Add appearance settings

Signed-off-by: Rūdolfs Ošiņš <[email protected]>

Showcase.svelte

@@ -12,9 +12,17 @@
   import CheckIcon from "./icons/Check.svelte";
   import CrossIcon from "./icons/Cross.svelte";
   import ForkIcon from "./icons/Fork.svelte";
+  import LockIcon from "./icons/Lock.svelte";
   import MinusIcon from "./icons/Minus.svelte";
   import PlusIcon from "./icons/Plus.svelte";
 
+  import Theme from "./Theme.svelte";
+
+  import ThemeSetting from "./Showcase/ThemeSetting.svelte";
+  import PrimaryColorSetting from "./Showcase/PrimaryColorSetting.svelte";
+  import CodeFontSetting from "./Showcase/CodeFontSetting.svelte";
+  import UiFontSetting from "./Showcase/UiFontSetting.svelte";
+
   import Button from "./Button.svelte";
   import Checkbox from "./Checkbox.svelte";
   import Dropdown from "./Dropdown.svelte";
@@ -200,6 +208,8 @@
       onClose();
     }
   }
+
+  let settingsHeaderPinned: boolean = false;
 </script>
 
 <style>
@@ -264,8 +274,22 @@
     justify-content: center;
     align-items: center;
   }
+
+  .settings {
+    display: flex;
+    gap: 2rem;
+    align-items: center;
+    background-color: var(--color-foreground-level-1);
+    flex: 1;
+    height: 5rem;
+    padding-left: calc(var(--sidebar-width) + 2rem);
+    width: 100%;
+    z-index: 5;
+  }
 </style>
 
+<Theme />
+
 <svelte:window on:keydown={onKeydown} />
 
 {#if onClose !== undefined}
@@ -295,6 +319,24 @@
         <Emoji emoji="🫐" size="large" />
         <h3>Components</h3></a>
     </div>
+
+    <div
+      class="settings"
+      style:position={settingsHeaderPinned ? "fixed" : "relative"}>
+      <UiFontSetting />
+      <CodeFontSetting />
+      <ThemeSetting />
+      <PrimaryColorSetting />
+
+      <span style="margin-left: auto; margin-right: 3.5rem;">
+        <LockIcon
+          on:click={() => (settingsHeaderPinned = !settingsHeaderPinned)}
+          style={settingsHeaderPinned
+            ? "fill: var(--color-foreground)"
+            : "fill: var(--color-foreground-level-4)"} />
+      </span>
+    </div>
+
     <div class="layout">
       <slot name="top" />
 

Showcase/CodeFontSetting.svelte

@@ -0,0 +1,16 @@
+<!--
+ Copyright © 2022 The Radicle Design System Contributors
+
+ This file is part of radicle-design-system, distributed under the GPLv3
+ with Radicle Linking Exception. For full terms see the included
+ LICENSE file.
+-->
+<script lang="ts">
+  import { codeFont, codeFontOptions } from "../lib/appearance";
+  import SegmentedControl from "../SegmentedControl.svelte";
+</script>
+
+<SegmentedControl
+  active={$codeFont}
+  options={codeFontOptions}
+  on:select={ev => codeFont.set(ev.detail)} />

Showcase/PrimaryColorSetting.svelte

@@ -0,0 +1,49 @@
+<!--
+ Copyright © 2022 The Radicle Design System Contributors
+
+ This file is part of radicle-design-system, distributed under the GPLv3
+ with Radicle Linking Exception. For full terms see the included
+ LICENSE file.
+-->
+<script lang="ts">
+  import { fly } from "svelte/transition";
+  import { backOut } from "svelte/easing";
+
+  import {
+    primaryColor,
+    primaryColorOptions,
+    primaryColorHex,
+  } from "../lib/appearance";
+
+  import SegmentedControl from "../SegmentedControl.svelte";
+</script>
+
+<style>
+  input[type="color"] {
+    -webkit-appearance: none;
+    margin: 0.25rem;
+    width: 1.875rem;
+    height: 1.875rem;
+  }
+  input[type="color"]::-webkit-color-swatch-wrapper {
+    padding: 0;
+    cursor: pointer;
+  }
+  input[type="color"]::-webkit-color-swatch {
+    border: none;
+    border-radius: 0.25rem;
+  }
+</style>
+
+<SegmentedControl
+  active={$primaryColor}
+  options={primaryColorOptions}
+  on:select={ev => primaryColor.set(ev.detail)}>
+  {#if $primaryColor === "custom"}
+    <input
+      in:fly|local={{ x: 30, duration: 100, easing: backOut }}
+      out:fly|local={{ x: 30, duration: 100 }}
+      type="color"
+      bind:value={$primaryColorHex} />
+  {/if}
+</SegmentedControl>

Showcase/ThemeSetting.svelte

@@ -0,0 +1,16 @@
+<!--
+ Copyright © 2022 The Radicle Design System Contributors
+
+ This file is part of radicle-design-system, distributed under the GPLv3
+ with Radicle Linking Exception. For full terms see the included
+ LICENSE file.
+-->
+<script lang="ts">
+  import { theme, themeOptions } from "../lib/appearance";
+  import SegmentedControl from "../SegmentedControl.svelte";
+</script>
+
+<SegmentedControl
+  active={$theme}
+  options={themeOptions}
+  on:select={ev => theme.set(ev.detail)} />

Showcase/UiFontSetting.svelte

@@ -0,0 +1,25 @@
+<!--
+ Copyright © 2021 The Radicle Upstream Contributors
+
+ This file is part of radicle-upstream, distributed under the GPLv3
+ with Radicle Linking Exception. For full terms see the included
+ LICENSE file.
+-->
+<script lang="ts">
+  import { uiFont, uiFontOptions } from "../lib/appearance";
+  import SegmentedControl from "../SegmentedControl.svelte";
+</script>
+
+<!--
+ Copyright © 2022 The Radicle Design System Contributors
+
+ This file is part of radicle-design-system, distributed under the GPLv3
+ with Radicle Linking Exception. For full terms see the included
+ LICENSE file.
+-->
+
+
+<SegmentedControl
+  active={$uiFont}
+  options={uiFontOptions}
+  on:select={ev => uiFont.set(ev.detail)} />

Theme.svelte

@@ -0,0 +1,56 @@
+<!--
+ Copyright © 2022 The Radicle Design System Contributors
+
+ This file is part of radicle-design-system, distributed under the GPLv3
+ with Radicle Linking Exception. For full terms see the included
+ LICENSE file.
+-->
+<script lang="ts">
+  import {
+    theme,
+    codeFont,
+    uiFont,
+    primaryColor,
+    primaryColorHex,
+  } from "./lib/appearance";
+
+  $: document.documentElement.setAttribute("data-theme", $theme);
+  $: document.documentElement.setAttribute("data-uifont", $uiFont);
+  $: document.documentElement.setAttribute("data-codefont", $codeFont);
+  $: document.documentElement.setAttribute("data-primary-color", $primaryColor);
+
+  const customPrimaryColorRule = makeCssStyleRule();
+  $: {
+    const { r, g, b } = hexToRgbColor($primaryColorHex);
+    customPrimaryColorRule.style.cssText = `
+      --color-primary: rgba(${r},${g},${b},1);
+      --color-primary-level-1: rgba(${r},${g},${b},0.17);
+      --color-primary-level-2: rgba(${r},${g},${b},0.37);
+      --color-primary-level-6: rgba(${r},${g},${b},0.87);
+    `;
+  }
+
+  function hexToRgbColor(hex: string): { r: number; g: number; b: number } {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+      ? {
+          r: parseInt(result[1], 16),
+          g: parseInt(result[2], 16),
+          b: parseInt(result[3], 16),
+        }
+      : {
+          r: 21,
+          g: 21,
+          b: 21,
+        };
+  }
+
+  function makeCssStyleRule(): CSSStyleRule {
+    const element = document.createElement("style");
+    document.head.appendChild(element);
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const sheet = element.sheet!;
+    sheet.insertRule(`[data-primary-color="custom"] {}`);
+    return sheet.cssRules[0] as CSSStyleRule;
+  }
+</script>

lib/appearance.ts

@@ -0,0 +1,74 @@
+// Copyright © 2022 The Radicle Design System Contributors
+//
+// This file is part of radicle-design-system, distributed under the GPLv3
+// with Radicle Linking Exception. For full terms see the included
+// LICENSE file.
+
+import { writable } from "svelte/store";
+
+interface Option<T> {
+  value: T;
+  title: string;
+}
+
+type Theme = "dark" | "light" | "h4x0r";
+
+export const theme = writable<Theme>("dark");
+
+export const themeOptions: Option<Theme>[] = [
+  {
+    title: "Light",
+    value: "light",
+  },
+  {
+    title: "Dark",
+    value: "dark",
+  },
+  {
+    title: "H4x0r",
+    value: "h4x0r",
+  },
+];
+
+type UiFont = "inter" | "system";
+
+export const uiFont = writable<UiFont>("inter");
+
+export const uiFontOptions: Option<UiFont>[] = [
+  {
+    title: "Inter",
+    value: "inter",
+  },
+  {
+    title: "System",
+    value: "system",
+  },
+];
+
+type CodeFont = "sourceCode" | "system";
+
+export const codeFont = writable<CodeFont>("sourceCode");
+
+export const codeFontOptions: Option<CodeFont>[] = [
+  {
+    title: "Source Code",
+    value: "sourceCode",
+  },
+  {
+    title: "System",
+    value: "system",
+  },
+];
+
+type PrimaryColor = "blue" | "pink" | "orange" | "custom";
+
+export const primaryColor = writable<PrimaryColor>("blue");
+
+export const primaryColorOptions: Option<PrimaryColor>[] = [
+  { title: "Blue", value: "blue" },
+  { title: "Pink", value: "pink" },
+  { title: "Orange", value: "orange" },
+  { title: "Custom", value: "custom" },
+];
+
+export const primaryColorHex = writable<string>("#5555FF");