Radish alpha
r
radicle-desktop
Radicle desktop app
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Add a basic design system
Rūdolfs Ošiņš committed 1 year ago
commit dd3bead7e18234b73c05f0439899e4952f07ad1c
parent 38eb8a6f28c936ec62712fb6ecd351e3b5d92ed4
6 files changed +688 -2
modified src/App.svelte
@@ -1,11 +1,13 @@
<script lang="ts">

  import { Router, Route } from "svelte-routing";
- 
  import Startup from "@app/views/Startup.svelte";
+ 
  import DesignSystem from "@app/views/DesignSystem.svelte";

  import Repos from "@app/views/Repos.svelte";
+ 
  import Startup from "@app/views/Startup.svelte";

</script>



<Router>

  <Route path="/" component={Startup} />

  <Route path="/repos" component={Repos} />
+ 
  <Route path="/design-system" component={DesignSystem} />

</Router>
added src/components/Border.svelte
@@ -0,0 +1,156 @@
+ 
<script lang="ts">
+ 
  export let variant: "primary" | "secondary" | "ghost";
+
+ 
  $: style = `--button-color-1: var(--color-fill-${variant});`;
+ 
</script>
+
+ 
<style>
+ 
  .pixel {
+ 
    background-color: transparent;
+ 
  }
+
+ 
  .p1-1 {
+ 
    grid-area: p1-1;
+ 
  }
+ 
  .p1-2 {
+ 
    grid-area: p1-2;
+ 
  }
+ 
  .p1-3 {
+ 
    grid-area: p1-3;
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .p1-4 {
+ 
    grid-area: p1-4;
+ 
  }
+ 
  .p1-5 {
+ 
    grid-area: p1-5;
+ 
  }
+
+ 
  .p2-1 {
+ 
    grid-area: p2-1;
+ 
  }
+ 
  .p2-2 {
+ 
    grid-area: p2-2;
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .p2-3 {
+ 
    grid-area: p2-3;
+ 
  }
+ 
  .p2-4 {
+ 
    grid-area: p2-4;
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .p2-5 {
+ 
    grid-area: p2-5;
+ 
  }
+
+ 
  .p3-1 {
+ 
    grid-area: p3-1;
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .p3-2 {
+ 
    grid-area: p3-2;
+ 
  }
+ 
  .p3-3 {
+ 
    grid-area: p3-3;
+ 
    display: flex;
+ 
    align-items: center;
+ 
    gap: 0.5rem;
+ 
  }
+ 
  .p3-4 {
+ 
    grid-area: p3-4;
+ 
  }
+ 
  .p3-5 {
+ 
    grid-area: p3-5;
+ 
    background-color: var(--button-color-1);
+ 
  }
+
+ 
  .p4-1 {
+ 
    grid-area: p4-1;
+ 
  }
+ 
  .p4-2 {
+ 
    grid-area: p4-2;
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .p4-3 {
+ 
    grid-area: p4-3;
+ 
  }
+ 
  .p4-4 {
+ 
    grid-area: p4-4;
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .p4-5 {
+ 
    grid-area: p4-5;
+ 
  }
+
+ 
  .p5-1 {
+ 
    grid-area: p5-1;
+ 
  }
+ 
  .p5-2 {
+ 
    grid-area: p5-2;
+ 
  }
+ 
  .p5-3 {
+ 
    grid-area: p5-3;
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .p5-4 {
+ 
    grid-area: p5-4;
+ 
  }
+ 
  .p5-5 {
+ 
    grid-area: p5-5;
+ 
  }
+
+ 
  .container {
+ 
    cursor: pointer;
+ 
    white-space: nowrap;
+
+ 
    -webkit-touch-callout: none;
+ 
    -webkit-user-select: none;
+ 
    user-select: none;
+
+ 
    column-gap: 0;
+ 
    row-gap: 0;
+ 
    display: grid;
+ 
    grid-template-columns: 2px 2px auto 2px 2px;
+ 
    grid-template-rows: 2px 2px auto 2px 2px;
+ 
    grid-template-areas:
+ 
      "p1-1 p1-2 p1-3 p1-4 p1-5"
+ 
      "p2-1 p2-2 p2-3 p2-4 p2-5"
+ 
      "p3-1 p3-2 p3-3 p3-4 p3-5"
+ 
      "p4-1 p4-2 p4-3 p4-4 p4-5"
+ 
      "p5-1 p5-2 p5-3 p5-4 p5-5";
+ 
  }
+ 
</style>
+
+ 
<!-- svelte-ignore a11y-click-events-have-key-events -->
+ 
<div class="container" on:click role="button" tabindex="0" {style}>
+ 
  <div class="pixel p1-1" />
+ 
  <div class="pixel p1-2" />
+ 
  <div class="pixel p1-3" />
+ 
  <div class="pixel p1-4" />
+ 
  <div class="pixel p1-5" />
+
+ 
  <div class="pixel p2-1" />
+ 
  <div class="pixel p2-2" />
+ 
  <div class="pixel p2-3" />
+ 
  <div class="pixel p2-4" />
+ 
  <div class="pixel p2-5" />
+
+ 
  <div class="pixel p3-1" />
+ 
  <div class="pixel p3-2" />
+ 
  <div class="pixel p3-3 txt-semibold txt-small"><slot /></div>
+ 
  <div class="pixel p3-4" />
+ 
  <div class="pixel p3-5" />
+
+ 
  <div class="pixel p4-1" />
+ 
  <div class="pixel p4-2" />
+ 
  <div class="pixel p4-3" />
+ 
  <div class="pixel p4-4" />
+ 
  <div class="pixel p4-5" />
+
+ 
  <div class="pixel p5-1" />
+ 
  <div class="pixel p5-2" />
+ 
  <div class="pixel p5-3" />
+ 
  <div class="pixel p5-4" />
+ 
  <div class="pixel p5-5" />
+ 
</div>
added src/components/Button.svelte
@@ -0,0 +1,255 @@
+ 
<script lang="ts">
+ 
  export let variant: "primary" | "secondary" | "ghost";
+
+ 
  $: style =
+ 
    `--button-color-1: var(--color-fill-${variant});` +
+ 
    `--button-color-2: var(--color-fill-${variant}-hover);` +
+ 
    `--button-color-3: var(--color-fill-${variant}-shade);` +
+ 
    // The ghost colors are called --color-fill-counter and --color-fill-counter-emphasized.
+ 
    `--button-color-4: var(--color-fill${variant === "ghost" ? "" : `-${variant}`}-counter)`;
+ 
</script>
+
+ 
<style>
+ 
  .pixel {
+ 
    background-color: transparent;
+ 
  }
+
+ 
  .p1-1 {
+ 
    grid-area: p1-1;
+ 
  }
+ 
  .p1-2 {
+ 
    grid-area: p1-2;
+ 
  }
+ 
  .p1-3 {
+ 
    grid-area: p1-3;
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .p1-4 {
+ 
    grid-area: p1-4;
+ 
  }
+ 
  .p1-5 {
+ 
    grid-area: p1-5;
+ 
  }
+
+ 
  .p2-1 {
+ 
    grid-area: p2-1;
+ 
  }
+ 
  .p2-2 {
+ 
    grid-area: p2-2;
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .p2-3 {
+ 
    grid-area: p2-3;
+ 
    background-color: var(--button-color-2);
+ 
  }
+ 
  .p2-4 {
+ 
    grid-area: p2-4;
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .p2-5 {
+ 
    grid-area: p2-5;
+ 
  }
+
+ 
  .p3-1 {
+ 
    grid-area: p3-1;
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .p3-2 {
+ 
    grid-area: p3-2;
+ 
    background-color: var(--button-color-2);
+ 
  }
+ 
  .p3-3 {
+ 
    grid-area: p3-3;
+ 
    background-color: var(--button-color-1);
+ 
    padding: 2px 8px;
+ 
    display: flex;
+ 
    align-items: center;
+ 
    gap: 0.5rem;
+ 
  }
+ 
  .p3-4 {
+ 
    grid-area: p3-4;
+ 
    background-color: var(--button-color-3);
+ 
  }
+ 
  .p3-5 {
+ 
    grid-area: p3-5;
+ 
    background-color: var(--button-color-3);
+ 
  }
+
+ 
  .p4-1 {
+ 
    grid-area: p4-1;
+ 
  }
+ 
  .p4-2 {
+ 
    grid-area: p4-2;
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .p4-3 {
+ 
    grid-area: p4-3;
+ 
    background-color: var(--button-color-3);
+ 
  }
+ 
  .p4-4 {
+ 
    grid-area: p4-4;
+ 
    background-color: var(--button-color-3);
+ 
  }
+ 
  .p4-5 {
+ 
    grid-area: p4-5;
+ 
  }
+
+ 
  .p5-1 {
+ 
    grid-area: p5-1;
+ 
  }
+ 
  .p5-2 {
+ 
    grid-area: p5-2;
+ 
  }
+ 
  .p5-3 {
+ 
    grid-area: p5-3;
+ 
    background-color: var(--button-color-3);
+ 
  }
+ 
  .p5-4 {
+ 
    grid-area: p5-4;
+ 
  }
+ 
  .p5-5 {
+ 
    grid-area: p5-5;
+ 
  }
+
+ 
  .container:hover .p1-3 {
+ 
    background-color: var(--button-color-2);
+ 
  }
+
+ 
  .container:hover .p2-2 {
+ 
    background-color: var(--button-color-2);
+ 
  }
+ 
  .container:hover .p2-3 {
+ 
    background-color: var(--button-color-4);
+ 
  }
+ 
  .container:hover .p2-4 {
+ 
    background-color: var(--button-color-2);
+ 
  }
+
+ 
  .container:hover .p3-1 {
+ 
    background-color: var(--button-color-2);
+ 
  }
+ 
  .container:hover .p3-2 {
+ 
    background-color: var(--button-color-4);
+ 
  }
+ 
  .container:hover .p3-3 {
+ 
    background-color: var(--button-color-2);
+ 
  }
+ 
  .container:hover .p3-4 {
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .container:hover .p3-5 {
+ 
    background-color: var(--button-color-1);
+ 
  }
+
+ 
  .container:hover .p4-2 {
+ 
    background-color: var(--button-color-2);
+ 
  }
+ 
  .container:hover .p4-3 {
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .container:hover .p4-4 {
+ 
    background-color: var(--button-color-1);
+ 
  }
+
+ 
  .container:hover .p5-3 {
+ 
    background-color: var(--button-color-1);
+ 
  }
+
+ 
  .container:active .p1-3 {
+ 
    background-color: var(--button-color-1);
+ 
  }
+
+ 
  .container:active .p2-2 {
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .container:active .p2-3 {
+ 
    background-color: var(--button-color-3);
+ 
  }
+ 
  .container:active .p2-4 {
+ 
    background-color: var(--button-color-1);
+ 
  }
+
+ 
  .container:active .p3-1 {
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .container:active .p3-2 {
+ 
    background-color: var(--button-color-3);
+ 
  }
+ 
  .container:active .p3-3 {
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .container:active .p3-4 {
+ 
    background-color: var(--button-color-2);
+ 
  }
+ 
  .container:active .p3-5 {
+ 
    background-color: var(--button-color-1);
+ 
  }
+
+ 
  .container:active .p4-2 {
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .container:active .p4-3 {
+ 
    background-color: var(--button-color-2);
+ 
  }
+ 
  .container:active .p4-4 {
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .container:active .p5-3 {
+ 
    background-color: var(--button-color-1);
+ 
  }
+
+ 
  .container {
+ 
    height: 32px;
+ 
    cursor: pointer;
+ 
    white-space: nowrap;
+
+ 
    -webkit-touch-callout: none;
+ 
    -webkit-user-select: none;
+ 
    user-select: none;
+
+ 
    column-gap: 0;
+ 
    row-gap: 0;
+ 
    display: grid;
+ 
    grid-template-columns: 2px 2px auto 2px 2px;
+ 
    grid-template-rows: 2px 2px auto 2px 2px;
+ 
    grid-template-areas:
+ 
      "p1-1 p1-2 p1-3 p1-4 p1-5"
+ 
      "p2-1 p2-2 p2-3 p2-4 p2-5"
+ 
      "p3-1 p3-2 p3-3 p3-4 p3-5"
+ 
      "p4-1 p4-2 p4-3 p4-4 p4-5"
+ 
      "p5-1 p5-2 p5-3 p5-4 p5-5";
+ 
  }
+ 
</style>
+
+ 
<!-- svelte-ignore a11y-click-events-have-key-events -->
+ 
<div class="container" on:click role="button" tabindex="0" {style}>
+ 
  <div class="pixel p1-1" />
+ 
  <div class="pixel p1-2" />
+ 
  <div class="pixel p1-3" />
+ 
  <div class="pixel p1-4" />
+ 
  <div class="pixel p1-5" />
+
+ 
  <div class="pixel p2-1" />
+ 
  <div class="pixel p2-2" />
+ 
  <div class="pixel p2-3" />
+ 
  <div class="pixel p2-4" />
+ 
  <div class="pixel p2-5" />
+
+ 
  <div class="pixel p3-1" />
+ 
  <div class="pixel p3-2" />
+ 
  <div class="pixel p3-3 txt-semibold txt-small"><slot /></div>
+ 
  <div class="pixel p3-4" />
+ 
  <div class="pixel p3-5" />
+
+ 
  <div class="pixel p4-1" />
+ 
  <div class="pixel p4-2" />
+ 
  <div class="pixel p4-3" />
+ 
  <div class="pixel p4-4" />
+ 
  <div class="pixel p4-5" />
+
+ 
  <div class="pixel p5-1" />
+ 
  <div class="pixel p5-2" />
+ 
  <div class="pixel p5-3" />
+ 
  <div class="pixel p5-4" />
+ 
  <div class="pixel p5-5" />
+ 
</div>
added src/components/Fill.svelte
@@ -0,0 +1,88 @@
+ 
<script lang="ts">
+ 
  export let variant: "primary" | "secondary" | "ghost" | "transparent";
+ 
  export let stylePadding: string | undefined = undefined;
+
+ 
  $: style =
+ 
    variant === "transparent"
+ 
      ? "--button-color-1: transparent"
+ 
      : `--button-color-1: var(--color-fill-${variant});`;
+ 
</script>
+
+ 
<style>
+ 
  .pixel {
+ 
    background-color: var(--button-color-1);
+ 
  }
+
+ 
  .p1-1 {
+ 
    grid-area: p1-1;
+ 
    background-color: transparent;
+ 
  }
+ 
  .p1-2 {
+ 
    grid-area: p1-2;
+ 
  }
+ 
  .p1-3 {
+ 
    grid-area: p1-3;
+ 
    background-color: transparent;
+ 
  }
+
+ 
  .p2-1 {
+ 
    grid-area: p2-1;
+ 
  }
+ 
  .p2-2 {
+ 
    grid-area: p2-2;
+ 
    display: flex;
+ 
    align-items: center;
+ 
    gap: 0.5rem;
+ 
  }
+ 
  .p2-3 {
+ 
    grid-area: p2-3;
+ 
  }
+
+ 
  .p3-1 {
+ 
    grid-area: p3-1;
+ 
    background-color: transparent;
+ 
  }
+ 
  .p3-2 {
+ 
    grid-area: p3-2;
+ 
  }
+ 
  .p3-3 {
+ 
    grid-area: p3-3;
+ 
    background-color: transparent;
+ 
  }
+
+ 
  .container {
+ 
    cursor: pointer;
+ 
    white-space: nowrap;
+
+ 
    -webkit-touch-callout: none;
+ 
    -webkit-user-select: none;
+ 
    user-select: none;
+
+ 
    column-gap: 0;
+ 
    row-gap: 0;
+ 
    display: grid;
+ 
    grid-template-columns: 2px auto 2px;
+ 
    grid-template-rows: 2px auto 2px;
+ 
    grid-template-areas:
+ 
      "p1-1 p1-2 p1-3"
+ 
      "p2-1 p2-2 p2-3"
+ 
      "p3-1 p3-2 p3-3";
+ 
  }
+ 
</style>
+
+ 
<!-- svelte-ignore a11y-click-events-have-key-events -->
+ 
<div class="container" on:click role="button" tabindex="0" {style}>
+ 
  <div class="pixel p1-1" />
+ 
  <div class="pixel p1-2" />
+ 
  <div class="pixel p1-3" />
+
+ 
  <div class="pixel p2-1" />
+ 
  <div class="pixel p2-2 txt-semibold txt-small" style:padding={stylePadding}>
+ 
    <slot />
+ 
  </div>
+ 
  <div class="pixel p2-3" />
+
+ 
  <div class="pixel p3-1" />
+ 
  <div class="pixel p3-2" />
+ 
  <div class="pixel p3-3" />
+ 
</div>
modified src/components/Icon.svelte
@@ -1,6 +1,19 @@
<script lang="ts">

  import { unreachable } from "@app/lib/utils";
- 
  export let name: "arrow-left" | "arrow-right" | "plus" | "offline";
+
+ 
  export let name:
+ 
    | "dashboard"
+ 
    | "arrow-left"
+ 
    | "arrow-right"
+ 
    | "plus"
+ 
    | "offline"
+ 
    | "chevron-right"
+ 
    | "inbox"
+ 
    | "delegate"
+ 
    | "diff"
+ 
    | "file"
+ 
    | "repo"
+ 
    | "seedling";

</script>



<style>
@@ -80,6 +93,136 @@
    <path d="M4 11L5 11V12L4 12L4 11Z" />

    <path d="M3 12H4L4 13H3L3 12Z" />

    <path d="M2 13L3 13L3 14H2V13Z" />
+ 
  {:else if name === "chevron-right"}
+ 
    <path d="M9 7L10 7L10 8L9 8L9 7Z" />
+ 
    <path d="M8 6H9V7H8L8 6Z" />
+ 
    <path d="M7 5L8 5V6L7 6L7 5Z" />
+ 
    <path d="M6 4L7 4L7 5L6 5L6 4Z" />
+ 
    <path d="M5 3L6 3L6 4H5L5 3Z" />
+ 
    <path d="M5 12H6L6 13H5L5 12Z" />
+ 
    <path d="M6 11H7L7 12H6L6 11Z" />
+ 
    <path d="M7 10L8 10L8 11L7 11L7 10Z" />
+ 
    <path d="M9 8L10 8V9L9 9V8Z" />
+ 
    <path d="M8 9H9V10H8L8 9Z" />
+ 
  {:else if name === "inbox"}
+ 
    <path d="M2 3H3V13H2V3Z" />
+ 
    <path d="M13 3H14V13H13V3Z" />
+ 
    <path d="M3 7H5V8H3V7Z" />
+ 
    <path d="M11 7H14V8H11V7Z" />
+ 
    <path d="M5 8H6V9H5L5 8Z" />
+ 
    <path d="M10 8H11V9H10V8Z" />
+ 
    <path d="M6 9H10L10 10H6L6 9Z" />
+ 
    <path d="M3 13H13V14H3L3 13Z" />
+ 
    <path d="M3 2H13V3H3L3 2Z" />
+ 
  {:else if name === "repo"}
+ 
    <path d="M13 5H14V7H13V5Z" />
+ 
    <path d="M13 10H14V11H13V10Z" />
+ 
    <path d="M13 7H14V5H13V7Z" />
+ 
    <path d="M13 9H14V8H13V9Z" />
+ 
    <path d="M3 7H2L2 5H3L3 7Z" />
+ 
    <path d="M3 8H2L2 9H3L3 8Z" />
+ 
    <path d="M3 5H2L2 7H3L3 5Z" />
+ 
    <path d="M3 10L2 10L2 11H3V10Z" />
+ 
    <path d="M11 4H13V5L11 5V4Z" />
+ 
    <path d="M11 8L13 8V7H11V8Z" />
+ 
    <path d="M11 10H13V9H11V10Z" />
+ 
    <path d="M11 12H13V11H11V12Z" />
+ 
    <path d="M9 3H11V4L9 4V3Z" />
+ 
    <path d="M9 9L11 9V8H9V9Z" />
+ 
    <path d="M9 11H11V10H9V11Z" />
+ 
    <path d="M9 13H11V12H9V13Z" />
+ 
    <path d="M8 2H9V3L8 3V2Z" />
+ 
    <path d="M8 10L9 10V9H8V10Z" />
+ 
    <path d="M8 12L9 12V11L8 11V12Z" />
+ 
    <path d="M8 14H9V13H8V14Z" />
+ 
    <path d="M7 2L8 2V3L7 3V2Z" />
+ 
    <path d="M7 10L8 10V9L7 9V10Z" />
+ 
    <path d="M7 12L8 12V11L7 11V12Z" />
+ 
    <path d="M7 14H8V13H7V14Z" />
+ 
    <path d="M5 5L3 5L3 4L5 4V5Z" />
+ 
    <path d="M5 7H3L3 8L5 8L5 7Z" />
+ 
    <path d="M5 9H3L3 10H5L5 9Z" />
+ 
    <path d="M5 11H3L3 12H5V11Z" />
+ 
    <path d="M7 4L5 4V3H7L7 4Z" />
+ 
    <path d="M7 8H5V9L7 9L7 8Z" />
+ 
    <path d="M7 10H5L5 11H7L7 10Z" />
+ 
    <path d="M7 12H5L5 13H7L7 12Z" />
+ 
  {:else if name === "dashboard"}
+ 
    <path d="M2 11H14V12H2V11Z" />
+ 
    <path d="M2 9H3V11H2L2 9Z" />
+ 
    <path d="M14 9H13V11L14 11V9Z" />
+ 
    <path d="M10 4V5L6 5V4L10 4Z" />
+ 
    <path d="M3 7H4V9L3 9L3 7Z" />
+ 
    <path d="M13 7H12V9H13V7Z" />
+ 
    <path d="M4 6H5V7H4L4 6Z" />
+ 
    <path d="M12 6H11V7H12V6Z" />
+ 
    <path d="M5 5L6 5V6H5V5Z" />
+ 
    <path d="M11 5L10 5V6H11V5Z" />
+ 
    <path d="M7 8H8V10H7V8Z" />
+ 
    <path d="M8 6H9V8H8V6Z" />
+ 
    <path d="M6 10H10V11H6V10Z" />
+ 
  {:else if name === "diff"}
+ 
    <path d="M2 3H3V13H2V3Z" />
+ 
    <path d="M3 13H12V14H3L3 13Z" />
+ 
    <path d="M3 2H12V3L3 3L3 2Z" />
+ 
    <path d="M12 3L13 3V13H12V3Z" />
+ 
    <path d="M7 4H8V9H7V4Z" />
+ 
    <path d="M5 6H10V7H5V6Z" />
+ 
    <path d="M5 10H10V11H5V10Z" />
+ 
  {:else if name === "file"}
+ 
    <path d="M10 4H11V5H10V4Z" />
+ 
    <path d="M11 5L12 5V6H11V5Z" />
+ 
    <path d="M10 6L12 6V7H10V6Z" />
+ 
    <path d="M9 6H10V7H9V6Z" />
+ 
    <path d="M8 5H9L9 6L8 6V5Z" />
+ 
    <path d="M8 3H9V5H8V3Z" />
+ 
    <path d="M9 3L10 3V4H9V3Z" />
+ 
    <path d="M4 13H12V14H4V13Z" />
+ 
    <path d="M4 2H9V3L4 3V2Z" />
+ 
    <path d="M13 6V13H12V6L13 6Z" />
+ 
    <path d="M4 3V13H3L3 3L4 3Z" />
+ 
  {:else if name === "delegate"}
+ 
    <path d="M2.33301 9L2.33301 7H3.33301V9H2.33301Z" />
+ 
    <path d="M3.33301 11L3.33301 9H4.33301L4.33301 11H3.33301Z" />
+ 
    <path d="M4.33301 12L4.33301 11H7.33301V12H4.33301Z" />
+ 
    <path d="M7.33301 11L7.33301 10H8.33301V11H7.33301Z" />
+ 
    <path d="M7.33301 6V5H8.33301V6H7.33301Z" />
+ 
    <path d="M4.33301 5V4L7.33301 4V5L4.33301 5Z" />
+ 
    <path d="M3.33301 7L3.33301 5L4.33301 5L4.33301 7H3.33301Z" />
+ 
    <path d="M4.33301 9L4.33301 7L5.33301 7V9L4.33301 9Z" />
+ 
    <path d="M7.33301 9V7H8.33301V9H7.33301Z" />
+ 
    <path d="M8.33301 7L8.33301 6L13.333 6V7L8.33301 7Z" />
+ 
    <path d="M8.33301 10L8.33301 9L10.333 9V10L8.33301 10Z" />
+ 
    <path d="M13.333 9V7L14.333 7V9H13.333Z" />
+ 
    <path d="M10.333 8H11.333V9L10.333 9V8Z" />
+ 
    <path d="M11.333 9L13.333 9V10H11.333L11.333 9Z" />
+ 
    <path d="M5.33301 6L7.33301 6L7.33301 7L5.33301 7L5.33301 6Z" />
+ 
    <path d="M5.33301 9L7.33301 9L7.33301 10H5.33301V9Z" />
+ 
  {:else if name === "seedling"}
+ 
    <path d="M10.333 6H9.33301V5L10.333 5V6Z" />
+ 
    <path d="M11.333 5L10.333 5V4L11.333 4V5Z" />
+ 
    <path d="M12.333 4H11.333L11.333 3L12.333 3L12.333 4Z" />
+ 
    <path d="M13.333 4L12.333 4L12.333 3L13.333 3L13.333 4Z" />
+ 
    <path d="M14.333 5L13.333 5V4L14.333 4V5Z" />
+ 
    <path d="M13.333 6H12.333V5H13.333V6Z" />
+ 
    <path d="M5.33301 7L5.33301 6L4.33301 6L4.33301 7L5.33301 7Z" />
+ 
    <path d="M4.33301 8V7L3.33301 7L3.33301 8L4.33301 8Z" />
+ 
    <path d="M3.33301 9L3.33301 8L2.33301 8L2.33301 9H3.33301Z" />
+ 
    <path d="M3.33301 10L3.33301 9H2.33301L2.33301 10H3.33301Z" />
+ 
    <path d="M4.33301 11L4.33301 10H3.33301L3.33301 11L4.33301 11Z" />
+ 
    <path d="M10.333 7H9.33301L9.33301 6H10.333L10.333 7Z" />
+ 
    <path d="M9.33301 8H8.33301V7L9.33301 7L9.33301 8Z" />
+ 
    <path d="M8.33301 8H7.33301V7H8.33301V8Z" />
+ 
    <path d="M11.333 8L10.333 8L10.333 7L11.333 7V8Z" />
+ 
    <path d="M12.333 8L10.333 8L10.333 7L12.333 7V8Z" />
+ 
    <path d="M13.333 7H12.333V6H13.333V7Z" />
+ 
    <path d="M5.33301 10L5.33301 9H4.33301L4.33301 10L5.33301 10Z" />
+ 
    <path d="M9.33301 8H8.33301V11H9.33301V8Z" />
+ 
    <path d="M8.33301 11L7.33301 11V14H8.33301V11Z" />
+ 
    <path d="M6.33301 7L6.33301 6H5.33301L5.33301 7H6.33301Z" />
+ 
    <path d="M7.33301 8V7L6.33301 7L6.33301 8H7.33301Z" />
+ 
    <path d="M7.33301 9L7.33301 7L6.33301 7L6.33301 9H7.33301Z" />
+ 
    <path d="M6.33301 10V9H5.33301L5.33301 10H6.33301Z" />

  {:else}

    {unreachable(name)}

  {/if}
added src/views/DesignSystem.svelte
@@ -0,0 +1,42 @@
+ 
<script lang="ts">
+ 
  import Border from "@app/components/Border.svelte";
+ 
  import Button from "@app/components/Button.svelte";
+ 
  import Fill from "@app/components/Fill.svelte";
+ 
  import Icon from "@app/components/Icon.svelte";
+
+ 
  let theme = "dark";
+
+ 
  $: document.documentElement.setAttribute("data-theme", theme);
+ 
</script>
+
+ 
<div style="display: flex; gap: 1rem;">
+ 
  <div style="display: flex; gap: 1rem;">
+ 
    <Border variant="secondary">
+ 
      <Fill
+ 
        stylePadding="0 0.5rem"
+ 
        variant={theme === "dark" ? "secondary" : "transparent"}
+ 
        on:click={() => {
+ 
          theme = "dark";
+ 
        }}>
+ 
        <Icon name="seedling" />
+ 
        Dark
+ 
      </Fill>
+
+ 
      <Fill
+ 
        stylePadding="0 0.5rem"
+ 
        variant={theme === "light" ? "secondary" : "transparent"}
+ 
        on:click={() => {
+ 
          theme = "light";
+ 
        }}>
+ 
        <Icon name="seedling" />
+ 
        Light
+ 
      </Fill>
+ 
    </Border>
+ 
  </div>
+
+ 
  <div style="display: flex; gap: 1rem;">
+ 
    <Button variant="primary"><Icon name="seedling" />Press me</Button>
+ 
    <Button variant="secondary"><Icon name="seedling" /> Press me</Button>
+ 
    <Button variant="ghost"><Icon name="seedling" /> Press me</Button>
+ 
  </div>
+ 
</div>