Radish alpha
r
radicle-explorer
rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5
Radicle web interface
Radicle
Git
Commits › fa85596
Backport new UI kit design system from garden
Rūdolfs Ošiņš committed 1 month ago
commit fa85596ba1821d7e8da1b16ab05e4b0fb9a59fd7
parent 4eae95a
130 files changed +3560 -2974
modified index.html
@@ -14,7 +14,7 @@
    <meta property="og:description" content="Explore the Radicle network" />

    <meta

      property="og:image"
- 
      content="https://app.radicle.xyz/images/radicle-og-853x853-624f.png" />
+ 
      content="https://app.radicle.xyz/images/radicle-og-853x853-0569.png" />



    <meta name="twitter:card" content="summary" />

    <meta property="twitter:domain" content="app.radicle.xyz" />
@@ -23,29 +23,23 @@
    <meta name="twitter:description" content="Explore the Radicle network" />

    <meta

      name="twitter:image"
- 
      content="https://app.radicle.xyz/images/radicle-og-853x853-624f.png" />
+ 
      content="https://app.radicle.xyz/images/radicle-og-853x853-0569.png" />



    <link

      rel="preload"
- 
      href="/fonts/Inter-Regular.woff2"
+ 
      href="/fonts/Booton-Regular.woff2"

      as="font"

      type="font/woff2"

      crossorigin="anonymous" />

    <link

      rel="preload"
- 
      href="/fonts/Inter-Medium.woff2"
+ 
      href="/fonts/Booton-Medium.woff2"

      as="font"

      type="font/woff2"

      crossorigin="anonymous" />

    <link

      rel="preload"
- 
      href="/fonts/Inter-SemiBold.woff2"
- 
      as="font"
- 
      type="font/woff2"
- 
      crossorigin="anonymous" />
- 
    <link
- 
      rel="preload"
- 
      href="/fonts/Inter-Bold.woff2"
+ 
      href="/fonts/Booton-SemiBold.woff2"

      as="font"

      type="font/woff2"

      crossorigin="anonymous" />
@@ -80,7 +74,7 @@
    <link rel="stylesheet" type="text/css" href="/elevations.css" />

    <link rel="stylesheet" type="text/css" href="/prettylights.css" />

    <link rel="stylesheet" type="text/css" href="/index.css" />
- 
    <link rel="icon" href="/radicle.svg" type="image/svg+xml" />
+ 
    <link rel="icon" href="/favicon.png" type="image/png" />

    <link rel="manifest" href="/app.webmanifest" />



    <script type="text/javascript">
modified public/app.webmanifest
@@ -9,8 +9,7 @@
      "src": "/images/apple-touch-icon.png",

      "type": "image/png",

      "sizes": "192x192"
- 
    },
- 
    { "src": "/radicle.svg", "type": "image/svg", "sizes": "44x44" }
+ 
    }

  ],

  "display": "standalone"

}
modified public/colors.css
@@ -1,113 +1,306 @@
+ 
/* Light theme. */

:root {
- 
  --color-background-default: #f5f5ff;
- 
  --color-background-float: #fafaff;
- 
  --color-background-dip: #f5f5ff;
- 
  --color-foreground-contrast: #232563;
- 
  --color-foreground-dim: #6a6a81;
- 
  --color-foreground-emphasized: #8585ff;
- 
  --color-foreground-emphasized-hover: #7070ff;
- 
  --color-foreground-match-background: #f5f5ff;
- 
  --color-foreground-white: #ffffff;
- 
  --color-foreground-black: #000000;
- 
  --color-foreground-primary: #ff55ff;
- 
  --color-foreground-primary-hover: #ff80ff;
- 
  --color-foreground-success: #4fa877;
- 
  --color-foreground-red: #aa5078;
- 
  --color-foreground-yellow: #b29401;
- 
  --color-foreground-disabled: #9b9bb1;
- 
  --color-border-hint: #dbdbff;
- 
  --color-border-default: #dbdbff;
- 
  --color-border-focus: #7070ff;
- 
  --color-border-contrast: #24252d;
- 
  --color-border-error: #ce97af;
- 
  --color-border-merged: #ffe5ff;
- 
  --color-border-match-background: #f5f5ff;
- 
  --color-border-primary: #ff1aff;
- 
  --color-border-primary-hover: #ff55ff;
- 
  --color-border-selected: #dbdbff;
- 
  --color-border-warning: #ffe609;
- 
  --color-border-success: #97ceb0;
- 
  --color-fill-secondary: #7070ff;
- 
  --color-fill-secondary-hover: #8585ff;
- 
  --color-fill-secondary-counter: #7a7aff;
- 
  --color-fill-ghost: #ebebff;
- 
  --color-fill-ghost-hover: #dbdbff;
- 
  --color-fill-separator: #dbdbff;
- 
  --color-fill-primary: #ff70ff;
- 
  --color-fill-primary-hover: #ff80ff;
- 
  --color-fill-danger: #be7495;
- 
  --color-fill-yellow: #ffe609;
- 
  --color-fill-yellow-iconic: #ffff55;
- 
  --color-fill-gray: #9b9bb1;
- 
  --color-fill-diff-red: #efdce4;
- 
  --color-fill-diff-red-light: #f7eef2;
- 
  --color-fill-success: #4fa877;
- 
  --color-fill-diff-green: #badeca;
- 
  --color-fill-diff-green-light: #dcefe5;
- 
  --color-fill-float: #fafaff;
- 
  --color-fill-float-hover: #dbdbff;
- 
  --color-fill-merged: #ffeeff;
- 
  --color-fill-selected: #ebebff;
- 
  --color-fill-warning: #ffffe5;
- 
  --color-fill-counter: #dbdbff;
- 
  --color-fill-counter-emphasized: #dbdbff;
- 
  --color-fill-delegate: #ffe5ff;
- 
  --color-fill-private: #fff5d6;
+ 
  --color-surface-base: var(--color-neutrals-opaque-light-50);
+ 
  --color-surface-canvas: var(--color-neutrals-opaque-light-0);
+ 
  --color-surface-subtle: var(--color-neutrals-opaque-light-100);
+ 
  --color-surface-mid: var(--color-neutrals-opaque-light-150);
+ 
  --color-surface-strong: var(--color-neutrals-opaque-light-200);
+ 
  --color-surface-alpha-subtle: var(--color-neutrals-alpha-light-50);
+ 
  --color-surface-alpha-mid: var(--color-neutrals-alpha-light-100);
+ 
  --color-surface-alpha-strong: var(--color-neutrals-alpha-light-200);
+ 
  --color-surface-scrim: var(--color-neutrals-alpha-light-500);
+ 
  --color-surface-open: var(--color-accent-green-200);
+ 
  --color-surface-merged: var(--color-accent-blue-200);
+ 
  --color-surface-draft: var(--color-neutrals-opaque-light-150);
+ 
  --color-surface-closed: var(--color-accent-blue-200);
+ 
  --color-surface-archived: var(--color-accent-pink-200);
+
+ 
  --color-text-primary: var(--color-neutrals-opaque-light-900);
+ 
  --color-text-secondary: var(--color-neutrals-opaque-light-700);
+ 
  --color-text-tertiary: var(--color-neutrals-opaque-light-600);
+ 
  --color-text-quaternary: var(--color-neutrals-opaque-light-500);
+ 
  --color-text-disabled: var(--color-neutrals-alpha-light-400);
+ 
  --color-text-open: var(--color-accent-green-800);
+ 
  --color-text-merged: var(--color-accent-blue-800);
+ 
  --color-text-draft: var(--color-neutrals-opaque-light-600);
+ 
  --color-text-closed: var(--color-accent-blue-800);
+ 
  --color-text-archived: var(--color-accent-pink-800);
+
+ 
  --color-border-subtle: var(--color-neutrals-opaque-light-150);
+ 
  --color-border-mid: var(--color-neutrals-opaque-light-200);
+ 
  --color-border-strong: var(--color-neutrals-opaque-light-300);
+ 
  --color-border-alpha-subtle: var(--color-neutrals-alpha-light-100);
+ 
  --color-border-alpha-mid: var(--color-neutrals-alpha-light-200);
+
+ 
  --color-feedback-success-text: var(--color-semantic-green-800);
+ 
  --color-feedback-success-border: var(--color-semantic-green-600);
+ 
  --color-feedback-success-bg: var(--color-semantic-green-100);
+ 
  --color-feedback-success-bg-selected: var(--color-semantic-green-200);
+ 
  --color-feedback-warning-text: var(--color-semantic-amber-800);
+ 
  --color-feedback-warning-border: var(--color-semantic-amber-600);
+ 
  --color-feedback-warning-bg: var(--color-semantic-amber-100);
+ 
  --color-feedback-error-text: var(--color-semantic-red-800);
+ 
  --color-feedback-error-border: var(--color-semantic-red-600);
+ 
  --color-feedback-error-bg: var(--color-semantic-red-100);
+ 
  --color-feedback-error-bg-selected: var(--color-semantic-red-200);
+
+ 
  --color-code-keywords: var(--color-accent-blue-700);
+ 
  --color-code-strings: var(--color-accent-green-700);
+ 
  --color-code-numbers: var(--color-accent-purple-700);
+ 
  --color-code-comments: var(--color-neutrals-opaque-light-700);
+ 
  --color-code-error: var(--color-semantic-red-700);
+ 
  --color-code-functions: var(--color-accent-emerald-700);
+
+ 
  /* Brand. */
+ 
  --color-brand-bg: var(--color-accent-blue-600);
+ 
  --color-brand-hover: var(--color-accent-blue-500);
+ 
  --color-brand-text-light: var(--color-accent-blue-600);
+ 
  --color-brand-text-dark: var(--color-accent-blue-400);
+ 
  --color-text-on-brand: var(--color-neutrals-opaque-light-0);
+
+ 
  --color-surface-brand-primary: var(--color-brand-bg);
+ 
  --color-surface-brand-secondary: var(--color-brand-hover);
+ 
  --color-border-brand: var(--color-brand-hover);
+ 
  --color-text-brand: var(--color-brand-text-light);

}
+ 
/* Dark theme. */

:root[data-theme="dark"] {
- 
  --color-background-default: #0a0d10;
- 
  --color-background-float: #14151a;
- 
  --color-background-dip: #000000;
- 
  --color-foreground-contrast: #f9f9fb;
- 
  --color-foreground-dim: #9b9bb1;
- 
  --color-foreground-emphasized: #7070ff;
- 
  --color-foreground-emphasized-hover: #8585ff;
- 
  --color-foreground-match-background: #0a0d10;
- 
  --color-foreground-white: #ffffff;
- 
  --color-foreground-black: #000000;
- 
  --color-foreground-primary: #ff55ff;
- 
  --color-foreground-primary-hover: #ff80ff;
- 
  --color-foreground-success: #4fa877;
- 
  --color-foreground-red: #aa5078;
- 
  --color-foreground-yellow: #e5c001;
- 
  --color-foreground-disabled: #6a6a81;
- 
  --color-border-hint: #24252d;
- 
  --color-border-default: #2e2f38;
- 
  --color-border-focus: #7070ff;
- 
  --color-border-contrast: #ebebff;
- 
  --color-border-error: #6b2b42;
- 
  --color-border-merged: #6b006b;
- 
  --color-border-match-background: #0a0d10;
- 
  --color-border-primary: #ff1aff;
- 
  --color-border-primary-hover: #ff55ff;
- 
  --color-border-selected: #232563;
- 
  --color-border-warning: #4c4000;
- 
  --color-border-success: #2a5a40;
- 
  --color-fill-secondary: #7070ff;
- 
  --color-fill-secondary-hover: #8585ff;
- 
  --color-fill-secondary-counter: #7a7aff;
- 
  --color-fill-ghost: #24252d;
- 
  --color-fill-ghost-hover: #2e2f38;
- 
  --color-fill-separator: #24252d;
- 
  --color-fill-primary: #ff55ff;
- 
  --color-fill-primary-hover: #ff80ff;
- 
  --color-fill-danger: #aa5078;
- 
  --color-fill-yellow: #ffe609;
- 
  --color-fill-yellow-iconic: #ffff55;
- 
  --color-fill-gray: #9b9bb1;
- 
  --color-fill-diff-red: #4d1929;
- 
  --color-fill-diff-red-light: #2d060d;
- 
  --color-fill-success: #4fa877;
- 
  --color-fill-diff-green: #183425;
- 
  --color-fill-diff-green-light: #142a1d;
- 
  --color-fill-float: #14151a;
- 
  --color-fill-float-hover: #1b1c22;
- 
  --color-fill-merged: #1a001a;
- 
  --color-fill-selected: #16173d;
- 
  --color-fill-warning: #191500;
- 
  --color-fill-counter: #393a46;
- 
  --color-fill-counter-emphasized: #232563;
- 
  --color-fill-delegate: #3d003d;
- 
  --color-fill-private: #4c4000;
+ 
  --color-surface-base: var(--color-neutrals-opaque-dark-0);
+ 
  --color-surface-canvas: var(--color-neutrals-opaque-dark-50);
+ 
  --color-surface-subtle: var(--color-neutrals-opaque-dark-100);
+ 
  --color-surface-mid: var(--color-neutrals-opaque-dark-150);
+ 
  --color-surface-strong: var(--color-neutrals-opaque-dark-200);
+ 
  --color-surface-alpha-subtle: var(--color-neutrals-alpha-dark-50);
+ 
  --color-surface-alpha-mid: var(--color-neutrals-alpha-dark-100);
+ 
  --color-surface-alpha-strong: var(--color-neutrals-alpha-dark-200);
+ 
  --color-surface-scrim: var(--color-neutrals-alpha-light-700);
+ 
  --color-surface-open: var(--color-accent-green-900);
+ 
  --color-surface-draft: var(--color-neutrals-opaque-dark-150);
+ 
  --color-surface-closed: var(--color-accent-blue-900);
+ 
  --color-surface-merged: var(--color-accent-blue-900);
+ 
  --color-surface-archived: var(--color-accent-pink-900);
+
+ 
  --color-text-primary: var(--color-neutrals-opaque-dark-900);
+ 
  --color-text-secondary: var(--color-neutrals-opaque-dark-700);
+ 
  --color-text-tertiary: var(--color-neutrals-opaque-dark-600);
+ 
  --color-text-quaternary: var(--color-neutrals-opaque-dark-500);
+ 
  --color-text-disabled: var(--color-neutrals-alpha-dark-400);
+ 
  --color-text-open: var(--color-accent-green-500);
+ 
  --color-text-draft: var(--color-neutrals-opaque-dark-600);
+ 
  --color-text-closed: var(--color-accent-blue-500);
+ 
  --color-text-merged: var(--color-accent-blue-500);
+ 
  --color-text-archived: var(--color-accent-pink-500);
+
+ 
  --color-border-subtle: var(--color-neutrals-opaque-dark-150);
+ 
  --color-border-mid: var(--color-neutrals-opaque-dark-200);
+ 
  --color-border-strong: var(--color-neutrals-opaque-dark-300);
+ 
  --color-border-alpha-subtle: var(--color-neutrals-alpha-dark-100);
+ 
  --color-border-alpha-mid: var(--color-neutrals-alpha-dark-200);
+
+ 
  --color-feedback-success-text: var(--color-semantic-green-400);
+ 
  --color-feedback-success-border: var(--color-semantic-green-700);
+ 
  --color-feedback-success-bg: var(--color-semantic-green-900);
+ 
  --color-feedback-success-bg-selected: var(--color-semantic-green-800);
+ 
  --color-feedback-warning-text: var(--color-semantic-amber-400);
+ 
  --color-feedback-warning-border: var(--color-semantic-amber-700);
+ 
  --color-feedback-warning-bg: var(--color-semantic-amber-900);
+ 
  --color-feedback-error-text: var(--color-semantic-red-400);
+ 
  --color-feedback-error-border: var(--color-semantic-red-700);
+ 
  --color-feedback-error-bg: var(--color-semantic-red-900);
+ 
  --color-feedback-error-bg-selected: var(--color-semantic-red-800);
+
+ 
  --color-code-keywords: var(--color-accent-blue-400);
+ 
  --color-code-strings: var(--color-accent-green-400);
+ 
  --color-code-numbers: var(--color-accent-purple-400);
+ 
  --color-code-comments: var(--color-neutrals-opaque-dark-700);
+ 
  --color-code-error: var(--color-semantic-red-400);
+ 
  --color-code-functions: var(--color-accent-emerald-400);
+
+ 
  --color-text-brand: var(--color-brand-text-dark);
+ 
}
+
+ 
/* Internal color system, don't use directly! */
+ 
:root {
+ 
  --color-neutrals-opaque-light-0: #ffffff;
+ 
  --color-neutrals-opaque-light-50: #f8f9fa;
+ 
  --color-neutrals-opaque-light-100: #f1f3f5;
+ 
  --color-neutrals-opaque-light-150: #e9ebef;
+ 
  --color-neutrals-opaque-light-200: #e1e4e8;
+ 
  --color-neutrals-opaque-light-250: #d6d9e0;
+ 
  --color-neutrals-opaque-light-300: #c9cdd4;
+ 
  --color-neutrals-opaque-light-400: #a2a7b1;
+ 
  --color-neutrals-opaque-light-500: #7a8190;
+ 
  --color-neutrals-opaque-light-600: #5a5f6b;
+ 
  --color-neutrals-opaque-light-700: #3a3f49;
+ 
  --color-neutrals-opaque-light-800: #1f232b;
+ 
  --color-neutrals-opaque-light-900: #0b0d12;
+
+ 
  --color-neutrals-opaque-dark-0: #00060f;
+ 
  --color-neutrals-opaque-dark-50: #0a1018;
+ 
  --color-neutrals-opaque-dark-100: #141a22;
+ 
  --color-neutrals-opaque-dark-150: #1f242c;
+ 
  --color-neutrals-opaque-dark-200: #29303a;
+ 
  --color-neutrals-opaque-dark-250: #33383f;
+ 
  --color-neutrals-opaque-dark-300: #3d4248;
+ 
  --color-neutrals-opaque-dark-400: #52565c;
+ 
  --color-neutrals-opaque-dark-500: #666a6f;
+ 
  --color-neutrals-opaque-dark-600: #8f9296;
+ 
  --color-neutrals-opaque-dark-700: #b8babc;
+ 
  --color-neutrals-opaque-dark-800: #e0e1e2;
+ 
  --color-neutrals-opaque-dark-900: #ffffff;
+
+ 
  --color-neutrals-alpha-light-50: #00060f0a;
+ 
  --color-neutrals-alpha-light-100: #00060f14;
+ 
  --color-neutrals-alpha-light-200: #00060f1f;
+ 
  --color-neutrals-alpha-light-300: #00060f29;
+ 
  --color-neutrals-alpha-light-400: #00060f3d;
+ 
  --color-neutrals-alpha-light-500: #00060f52;
+ 
  --color-neutrals-alpha-light-600: #00060f7a;
+ 
  --color-neutrals-alpha-light-700: #00060fa3;
+ 
  --color-neutrals-alpha-light-800: #00060fcc;
+ 
  --color-neutrals-alpha-light-900: #00060feb;
+
+ 
  --color-neutrals-alpha-dark-50: #ffffff0a;
+ 
  --color-neutrals-alpha-dark-100: #ffffff14;
+ 
  --color-neutrals-alpha-dark-200: #ffffff1f;
+ 
  --color-neutrals-alpha-dark-300: #ffffff29;
+ 
  --color-neutrals-alpha-dark-400: #ffffff3d;
+ 
  --color-neutrals-alpha-dark-500: #ffffff52;
+ 
  --color-neutrals-alpha-dark-600: #ffffff7a;
+ 
  --color-neutrals-alpha-dark-700: #ffffffa3;
+ 
  --color-neutrals-alpha-dark-800: #ffffffcc;
+ 
  --color-neutrals-alpha-dark-900: #ffffffeb;
+
+ 
  --color-accent-blue-0: #f4f9ff;
+ 
  --color-accent-blue-100: #d6e9ff;
+ 
  --color-accent-blue-200: #afcfff;
+ 
  --color-accent-blue-300: #7fb0ff;
+ 
  --color-accent-blue-400: #4d94ff;
+ 
  --color-accent-blue-500: #1c77ff;
+ 
  --color-accent-blue-600: #165fcc;
+ 
  --color-accent-blue-700: #104799;
+ 
  --color-accent-blue-800: #0b3266;
+ 
  --color-accent-blue-900: #061d33;
+
+ 
  --color-accent-green-0: #f7fff2;
+ 
  --color-accent-green-100: #dffcc6;
+ 
  --color-accent-green-200: #bef98a;
+ 
  --color-accent-green-300: #99f24c;
+ 
  --color-accent-green-400: #73e926;
+ 
  --color-accent-green-500: #58e600;
+ 
  --color-accent-green-600: #46ba00;
+ 
  --color-accent-green-700: #358f00;
+ 
  --color-accent-green-800: #256400;
+ 
  --color-accent-green-900: #0a1f00;
+
+ 
  --color-accent-cyan-0: #f1fefe;
+ 
  --color-accent-cyan-100: #ccf9fa;
+ 
  --color-accent-cyan-200: #99eff0;
+ 
  --color-accent-cyan-300: #66e5e7;
+ 
  --color-accent-cyan-400: #33dbde;
+ 
  --color-accent-cyan-500: #00d4da;
+ 
  --color-accent-cyan-600: #00a8ae;
+ 
  --color-accent-cyan-700: #007d82;
+ 
  --color-accent-cyan-800: #005256;
+ 
  --color-accent-cyan-900: #00292b;
+
+ 
  --color-accent-purple-0: #f7f5ff;
+ 
  --color-accent-purple-100: #e0daff;
+ 
  --color-accent-purple-200: #c0b5ff;
+ 
  --color-accent-purple-300: #a08fff;
+ 
  --color-accent-purple-400: #8a74fa;
+ 
  --color-accent-purple-500: #886bf2;
+ 
  --color-accent-purple-600: #6c54c2;
+ 
  --color-accent-purple-700: #503f91;
+ 
  --color-accent-purple-800: #352a61;
+ 
  --color-accent-purple-900: #1b1530;
+
+ 
  --color-accent-pink-0: #fff6ff;
+ 
  --color-accent-pink-100: #ffedff;
+ 
  --color-accent-pink-200: #ffdbff;
+ 
  --color-accent-pink-300: #ffc9ff;
+ 
  --color-accent-pink-400: #ffb7ff;
+ 
  --color-accent-pink-500: #ffa5ff;
+ 
  --color-accent-pink-600: #cc84cc;
+ 
  --color-accent-pink-700: #996399;
+ 
  --color-accent-pink-800: #664266;
+ 
  --color-accent-pink-900: #332133;
+
+ 
  --color-accent-emerald-0: #f2fcf9;
+ 
  --color-accent-emerald-100: #ccf4e4;
+ 
  --color-accent-emerald-200: #99e9ca;
+ 
  --color-accent-emerald-300: #66ddb0;
+ 
  --color-accent-emerald-400: #33d196;
+ 
  --color-accent-emerald-500: #009f67;
+ 
  --color-accent-emerald-600: #007f52;
+ 
  --color-accent-emerald-700: #005f3e;
+ 
  --color-accent-emerald-800: #004029;
+ 
  --color-accent-emerald-900: #002015;
+
+ 
  --color-accent-citrus-0: #fcfff2;
+ 
  --color-accent-citrus-100: #f1ffbf;
+ 
  --color-accent-citrus-200: #e4ff80;
+ 
  --color-accent-citrus-300: #d6ff40;
+ 
  --color-accent-citrus-400: #caff20;
+ 
  --color-accent-citrus-500: #ccff38;
+ 
  --color-accent-citrus-600: #a4cc2d;
+ 
  --color-accent-citrus-700: #7c991f;
+ 
  --color-accent-citrus-800: #536613;
+ 
  --color-accent-citrus-900: #2b3307;
+
+ 
  --color-accent-olive-0: #fafaed;
+ 
  --color-accent-olive-100: #e6e5ba;
+ 
  --color-accent-olive-200: #d1cf86;
+ 
  --color-accent-olive-300: #bdb950;
+ 
  --color-accent-olive-400: #9e9900;
+ 
  --color-accent-olive-500: #585600;
+ 
  --color-accent-olive-600: #464400;
+ 
  --color-accent-olive-700: #343300;
+ 
  --color-accent-olive-800: #232200;
+ 
  --color-accent-olive-900: #111100;
+
+ 
  --color-semantic-red-0: #fff5f5;
+ 
  --color-semantic-red-100: #ffd6d6;
+ 
  --color-semantic-red-200: #ffafaf;
+ 
  --color-semantic-red-300: #ff8686;
+ 
  --color-semantic-red-400: #ff5c5c;
+ 
  --color-semantic-red-500: #ff4d4f;
+ 
  --color-semantic-red-600: #cc3e3f;
+ 
  --color-semantic-red-700: #992f2f;
+ 
  --color-semantic-red-800: #661f20;
+ 
  --color-semantic-red-900: #330f10;
+
+ 
  --color-semantic-amber-0: #fffdf2;
+ 
  --color-semantic-amber-100: #fff1b8;
+ 
  --color-semantic-amber-200: #ffe58f;
+ 
  --color-semantic-amber-300: #ffd666;
+ 
  --color-semantic-amber-400: #ffc53d;
+ 
  --color-semantic-amber-500: #faad14;
+ 
  --color-semantic-amber-600: #d48806;
+ 
  --color-semantic-amber-700: #ad6800;
+ 
  --color-semantic-amber-800: #874d00;
+ 
  --color-semantic-amber-900: #613400;
+
+ 
  --color-semantic-green-0: #f6fff1;
+ 
  --color-semantic-green-100: #d9f7be;
+ 
  --color-semantic-green-200: #b7eb8f;
+ 
  --color-semantic-green-300: #95de64;
+ 
  --color-semantic-green-400: #73d13d;
+ 
  --color-semantic-green-500: #52c41a;
+ 
  --color-semantic-green-600: #3d9914;
+ 
  --color-semantic-green-700: #2e7010;
+ 
  --color-semantic-green-800: #1e470a;
+ 
  --color-semantic-green-900: #0f2305;
+
+ 
  --color-semantic-blue-0: #f0f9ff;
+ 
  --color-semantic-blue-100: #c6e4ff;
+ 
  --color-semantic-blue-200: #91caff;
+ 
  --color-semantic-blue-300: #5bafff;
+ 
  --color-semantic-blue-400: #2896ff;
+ 
  --color-semantic-blue-500: #1890ff;
+ 
  --color-semantic-blue-600: #1373cc;
+ 
  --color-semantic-blue-700: #0e5799;
+ 
  --color-semantic-blue-800: #093c66;
+ 
  --color-semantic-blue-900: #051f33;

}
added public/favicon.png
added public/fonts/Booton-Medium.woff2
added public/fonts/Booton-Regular.woff2
added public/fonts/Booton-SemiBold.woff2
deleted public/fonts/Inter-Bold.woff2
deleted public/fonts/Inter-Medium.woff2
deleted public/fonts/Inter-Regular.woff2
deleted public/fonts/Inter-SemiBold.woff2
modified public/images/apple-touch-icon.png
deleted public/images/default-seed-avatar.png
deleted public/images/default-seed-header.png
deleted public/images/radicle-228x228.png
deleted public/images/radicle-798x798.png
added public/images/radicle-og-853x853-0569.png
deleted public/images/radicle-og-853x853-624f.png
modified public/index.css
@@ -4,16 +4,21 @@
}



:root {
- 
  --border-radius-tiny: 2px;
- 
  --border-radius-small: 4px;
- 
  --border-radius-regular: 8px;
- 
  --border-radius-round: 10rem;
+ 
  --border-radius-xs: 0.0625rem;
+ 
  --border-radius-sm: 0.125rem;
+ 
  --border-radius-md: 0.25rem;
+ 
  --border-radius-lg: 0.5rem;
+ 
  --border-radius-full: 99rem;



  --scrollbar-width: 0.5rem;



  --button-regular-height: 2.5rem;

  --button-small-height: 2rem;

  --button-tiny-height: 1.5rem;
+
+ 
  --global-header-height: 3.5rem;
+ 
  --global-left-sidebar-width: 20rem;
+ 
  --global-right-sidebar-width: 22.5rem;

}



html {
@@ -26,20 +31,15 @@ body {
  height: 100%;

  margin: 0;

  padding: 0;
- 
  color: var(--color-foreground-contrast);
+ 
  color: var(--color-text-primary);

  text-align: left;
- 
  background-color: var(--color-background-default);
+ 
  background-color: var(--color-surface-base);

  scrollbar-width: thin;

  scrollbar-height: thin;
- 
  scrollbar-color: var(--color-fill-separator) transparent;
+ 
  scrollbar-color: var(--color-border-subtle) transparent;

  overscroll-behavior: none;

}
- 
::selection {
- 
  background: var(--color-fill-yellow-iconic);
- 
  color: var(--color-foreground-black);
- 
}
- 


/* Chrome/Edge/Safari scrollbar */

*::-webkit-scrollbar {

  width: var(--scrollbar-width);
@@ -50,14 +50,14 @@ body {
}

*::-webkit-scrollbar-thumb {

  background: transparent;
- 
  border-radius: var(--border-radius-regular);
+ 
  border-radius: var(--border-radius-lg);

}

*::-webkit-scrollbar-corner {

  background: transparent;

}

*:hover::-webkit-scrollbar-thumb,

body::-webkit-scrollbar-thumb {
- 
  background-color: var(--color-fill-separator);
+ 
  background-color: var(--color-border-subtle);

}



a {
@@ -69,24 +69,10 @@ pre {
  margin: 0;

}
- 
.global-oid {
- 
  color: var(--color-foreground-emphasized);
- 
  font-size: var(--font-size-small);
- 
  font-family: var(--font-family-monospace);
- 
  font-weight: var(--font-weight-regular);
- 
}
-
- 
.global-commit {
- 
  color: var(--color-foreground-dim);
- 
  font-size: var(--font-size-small);
- 
  font-family: var(--font-family-monospace);
- 
  font-weight: var(--font-weight-semibold);
- 
}
- 


.global-counter {
- 
  border-radius: var(--border-radius-tiny);
- 
  background-color: var(--color-fill-ghost);
- 
  color: var(--color-foreground-dim);
+ 
  border-radius: var(--border-radius-sm);
+ 
  background-color: var(--color-surface-mid);
+ 
  color: var(--color-text-tertiary);

  padding: 0 0.25rem;

  display: block;

  min-width: 1.25rem;
@@ -95,7 +81,7 @@ pre {
.global-spacer {

  width: 1px;

  height: 100%;
- 
  background-color: var(--color-fill-ghost);
+ 
  background-color: var(--color-surface-mid);

}

.global-flex-item {

  display: flex;
modified public/radicle.svg
@@ -1,63 +1,4 @@
- 
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
- 
  <g shape-rendering="crispEdges">
- 
    <rect x="8" y="0" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="32" y="0" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="12" y="4" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="28" y="4" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="12" y="8" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="16" y="8" width="4" height="4" fill="#3333DD"/>
- 
    <rect x="20" y="8" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="24" y="8" width="4" height="4" fill="#3333DD"/>
- 
    <rect x="28" y="8" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="8" y="12" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="12" y="12" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="16" y="12" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="20" y="12" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="24" y="12" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="28" y="12" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="32" y="12" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="4" y="16" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="8" y="16" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="12" y="16" width="4" height="4" fill="#F4F4F4"/>
- 
    <rect x="16" y="16" width="4" height="4" fill="#F4F4F4"/>
- 
    <rect x="20" y="16" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="24" y="16" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="28" y="16" width="4" height="4" fill="#F4F4F4"/>
- 
    <rect x="32" y="16" width="4" height="4" fill="#F4F4F4"/>
- 
    <rect x="36" y="16" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="4" y="20" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="8" y="20" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="12" y="20" width="4" height="4" fill="#F4F4F4"/>
- 
    <rect x="16" y="20" width="4" height="4" fill="#FF55FF"/>
- 
    <rect x="20" y="20" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="24" y="20" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="28" y="20" width="4" height="4" fill="#F4F4F4"/>
- 
    <rect x="32" y="20" width="4" height="4" fill="#FF55FF"/>
- 
    <rect x="36" y="20" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="0" y="24" width="4" height="4" fill="#3333DD"/>
- 
    <rect x="4" y="24" width="4" height="4" fill="#3333DD"/>
- 
    <rect x="8" y="24" width="4" height="4" fill="#3333DD"/>
- 
    <rect x="12" y="24" width="4" height="4" fill="#3333DD"/>
- 
    <rect x="16" y="24" width="4" height="4" fill="#3333DD"/>
- 
    <rect x="20" y="24" width="4" height="4" fill="#3333DD"/>
- 
    <rect x="24" y="24" width="4" height="4" fill="#3333DD"/>
- 
    <rect x="28" y="24" width="4" height="4" fill="#3333DD"/>
- 
    <rect x="32" y="24" width="4" height="4" fill="#3333DD"/>
- 
    <rect x="36" y="24" width="4" height="4" fill="#3333DD"/>
- 
    <rect x="40" y="24" width="4" height="4" fill="#3333DD"/>
- 
    <rect x="8" y="28" width="4" height="4" fill="#3333DD"/>
- 
    <rect x="16" y="28" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="24" y="28" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="32" y="28" width="4" height="4" fill="#3333DD"/>
- 
    <rect x="8" y="32" width="4" height="4" fill="#3333DD"/>
- 
    <rect x="16" y="32" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="24" y="32" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="32" y="32" width="4" height="4" fill="#3333DD"/>
- 
    <rect x="16" y="36" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="24" y="36" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="12" y="40" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="16" y="40" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="24" y="40" width="4" height="4" fill="#5555FF"/>
- 
    <rect x="28" y="40" width="4" height="4" fill="#5555FF"/>
- 
  </g>
+ 
<svg width="44" height="22" viewBox="0 0 44 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+ 
<path d="M44 22H22V0H44V22ZM32.999 3.75C28.9895 3.75011 25.7393 7.00122 25.7393 11.0107C25.7395 15.0201 28.9897 18.2704 32.999 18.2705C37.0085 18.2705 40.2586 15.0202 40.2588 11.0107C40.2588 7.00116 37.0086 3.75 32.999 3.75Z" fill="black"/>
+ 
<path d="M5.17188 10.9966C5.17188 7.77682 7.78204 5.16666 11.0019 5.16666C14.2217 5.16666 16.8318 7.77682 16.8318 10.9966C16.8318 14.2165 14.2217 16.8266 11.0019 16.8266C7.78204 16.8266 5.17188 14.2165 5.17188 10.9966Z" fill="black"/>

</svg>
modified public/typography.css
@@ -1,30 +1,23 @@
@font-face {
- 
  font-family: "Inter";
+ 
  font-family: "Booton";

  font-style: normal;

  font-weight: 400;

  font-display: swap;
- 
  src: url("fonts/Inter-Regular.woff2");
+ 
  src: url("fonts/Booton-Regular.woff2");

}



@font-face {
- 
  font-family: "Inter";
- 
  font-weight: 500;
+ 
  font-family: "Booton";
+ 
  font-weight: 468;

  font-display: swap;
- 
  src: url("fonts/Inter-Medium.woff2");
+ 
  src: url("fonts/Booton-Medium.woff2");

}



@font-face {
- 
  font-family: "Inter";
+ 
  font-family: "Booton";

  font-weight: 600;

  font-display: swap;
- 
  src: url("fonts/Inter-SemiBold.woff2");
- 
}
-
- 
@font-face {
- 
  font-family: "Inter";
- 
  font-weight: 700;
- 
  font-display: swap;
- 
  src: url("fonts/Inter-Bold.woff2");
+ 
  src: url("fonts/Booton-SemiBold.woff2");

}



@font-face {
@@ -58,85 +51,133 @@
}



:root {
- 
  --font-family-sans-serif: Inter, sans-serif;
- 
  --font-family-monospace: monospace;
- 
  --font-weight-regular: 400;
- 
  --font-weight-medium: 500;
- 
  --font-weight-semibold: 600;
- 
  --font-weight-bold: 700;
- 
  --font-size-tiny: 0.75rem; /* 12px */
- 
  --font-size-small: 0.875rem; /* 14px */
- 
  --font-size-regular: 1rem; /* 16px */
- 
  --font-size-medium: 1.25rem; /* 20px */
- 
  --font-size-large: 1.5rem; /* 24px */
- 
  --font-size-x-large: 2rem; /* 32px */
- 
  --font-size-xx-large: 3rem; /* 48px */
+ 
  --txt-heading-xxs: 600 0.75rem/1rem Booton, sans-serif;
+ 
  --txt-heading-xs: 600 0.875rem/1.25rem Booton, sans-serif;
+ 
  --txt-heading-s: 600 1rem/1.25rem Booton, sans-serif;
+ 
  --txt-heading-m: 600 1.125rem/1.25rem Booton, sans-serif;
+ 
  --txt-heading-l: 600 1.375rem/1.75rem Booton, sans-serif;
+ 
  --txt-heading-xl: 600 1.75rem/2rem Booton, sans-serif;
+ 
  --txt-heading-xxl: 600 2rem/2.25rem Booton, sans-serif;
+
+ 
  --txt-body-s-regular: 400 0.75rem/1rem Booton, sans-serif;
+ 
  --txt-body-s-medium: 468 0.75rem/1rem Booton, sans-serif;
+ 
  --txt-body-s-semibold: 600 0.75rem/1rem Booton, sans-serif;
+
+ 
  --txt-body-m-regular: 400 0.875rem/1.25rem Booton, sans-serif;
+ 
  --txt-body-m-medium: 468 0.875rem/1.25rem Booton, sans-serif;
+ 
  --txt-body-m-semibold: 600 0.875rem/1.25rem Booton, sans-serif;
+
+ 
  --txt-body-l-regular: 400 1rem/1.5rem Booton, sans-serif;
+ 
  --txt-body-l-medium: 468 1rem/1.5rem Booton, sans-serif;
+ 
  --txt-body-l-semibold: 600 1rem/1.5rem Booton, sans-serif;

}



[data-codefont="system"] {
- 
  --font-family-monospace: monospace;
+ 
  --txt-code-regular: 400 0.875rem/1.25rem monospace;
+ 
  --txt-code-semibold: 600 0.875rem/1.25rem monospace;

}



[data-codefont="jetbrains"] {
- 
  --font-family-monospace: "JetBrains Mono";
+ 
  --txt-code-regular: 400 0.875rem/1.25rem "JetBrains Mono";
+ 
  --txt-code-semibold: 600 0.875rem/1.25rem "JetBrains Mono";

}



html {

  -ms-text-size-adjust: 100%;

  -webkit-font-smoothing: antialiased;

  -webkit-text-size-adjust: 100%;
- 
  font-family: var(--font-family-sans-serif);
- 
  font-feature-settings: "zero";
+ 
  font-family: Booton, sans-serif;

  /* The root element font size has to be set in px,

   * otherwise Safari breaks. */

  font-size: 16px;
- 
  font-weight: var(--font-weight-regular);
- 
  line-height: 1.5;
+ 
  font-weight: 400;
+ 
  line-height: 1.25;
+ 
}
+
+ 
.txt-heading-xxs {
+ 
  font: var(--txt-heading-xxs);
+ 
}
+
+ 
.txt-heading-xs {
+ 
  font: var(--txt-heading-xs);
+ 
}
+
+ 
.txt-heading-s {
+ 
  font: var(--txt-heading-s);
+ 
}
+
+ 
.txt-heading-m {
+ 
  font: var(--txt-heading-m);

}
- 
p {
- 
  margin: 1rem 0;
+ 
.txt-heading-l {
+ 
  font: var(--txt-heading-l);

}
- 
.txt-tiny {
- 
  font-size: var(--font-size-tiny);
+
+ 
.txt-heading-xl {
+ 
  font: var(--txt-heading-xl);

}
- 
.txt-small {
- 
  font-size: var(--font-size-small);
+
+ 
.txt-heading-xxl {
+ 
  font: var(--txt-heading-xxl);

}
- 
.txt-regular {
- 
  font-size: var(--font-size-regular);
+
+ 
.txt-body-s-regular {
+ 
  font: var(--txt-body-s-regular);
+ 
}
+
+ 
.txt-body-s-medium {
+ 
  font: var(--txt-body-s-medium);
+ 
}
+
+ 
.txt-body-s-semibold {
+ 
  font: var(--txt-body-s-semibold);
+ 
}
+
+ 
.txt-body-m-regular {
+ 
  font: var(--txt-body-m-regular);

}
- 
.txt-medium {
- 
  font-size: var(--font-size-medium);
+
+ 
.txt-body-m-medium {
+ 
  font: var(--txt-body-m-medium);

}
- 
.txt-large {
- 
  font-size: var(--font-size-large);
+
+ 
.txt-body-m-semibold {
+ 
  font: var(--txt-body-m-semibold);

}
- 
.txt-huge {
- 
  font-size: var(--font-size-x-large);
+
+ 
.txt-body-l-regular {
+ 
  font: var(--txt-body-l-regular);

}
- 
.txt-humongous {
- 
  font-size: var(--font-size-xx-large);
+
+ 
.txt-body-l-medium {
+ 
  font: var(--txt-body-l-medium);

}
- 
.txt-monospace {
- 
  font-family: var(--font-family-monospace);
+ 
.txt-body-l-semibold {
+ 
  font: var(--txt-body-l-semibold);

}
- 
.txt-bold {
- 
  font-weight: var(--font-weight-bold) !important;
+
+ 
.txt-code-regular {
+ 
  font: var(--txt-code-regular);

}
- 
.txt-semibold {
- 
  font-weight: var(--font-weight-semibold) !important;
+
+ 
.txt-code-semibold {
+ 
  font: var(--txt-code-semibold);

}
- 
.txt-missing {
- 
  color: var(--color-foreground-dim);
+
+ 
.txt-id {
+ 
  color: var(--color-text-tertiary);
+ 
  font: var(--txt-code-regular);

}
+ 


.txt-emoji {

  height: 1em;

  width: 1em;

  margin: 0 0.05em 0 0.1em;

  vertical-align: -0.1em;

}
+ 


.txt-overflow {

  overflow: hidden;

  text-overflow: ellipsis;
modified src/App/Footer.svelte
@@ -11,10 +11,10 @@
    display: flex;

    align-items: center;

    justify-content: space-between;
- 
    font-size: var(--font-size-small);
- 
    color: var(--color-foreground-dim);
+ 
    font: var(--txt-body-m-regular);
+ 
    color: var(--color-text-tertiary);

    height: 2.3125rem;
- 
    background-color: var(--color-background-dip);
+ 
    background-color: var(--color-surface-base);

    padding: 0 1rem;

  }
@@ -34,7 +34,7 @@
  }



  a:hover {
- 
    color: var(--color-fill-secondary);
+ 
    color: var(--color-text-brand);

  }

</style>
@@ -63,7 +63,7 @@
      rel="noreferrer"

      href="https://radicle.xyz">

      radicle.xyz
- 
      <Icon name="arrow-box-up-right" />
+ 
      <Icon name="open-external" />

    </a>

  </div>

</div>
modified src/App/FullscreenModalPortal.svelte
@@ -7,7 +7,7 @@
    height: 100vh;

    width: 100vw;

    position: fixed;
- 
    z-index: 100;
+ 
    z-index: 300;

    justify-content: center;

    overflow: scroll;

    display: flex;
modified src/App/Help.svelte
@@ -7,10 +7,11 @@


<style>

  .help {
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

    display: flex;

    flex-direction: column;

    gap: 1rem;
+ 
    width: 100%;

  }

  .item {

    display: flex;
@@ -20,7 +21,7 @@
    gap: 2rem;

  }

  .divider {
- 
    border-bottom: 1px solid var(--color-fill-separator);
+ 
    border-bottom: 1px solid var(--color-border-subtle);

  }

</style>
modified src/App/Hotkeys.svelte
@@ -1,7 +1,7 @@
<script lang="ts">

  import * as modal from "@app/lib/modal";
- 
  import ColorPaletteModal from "@app/modals/ColorPaletteModal.svelte";
+ 
  import DesignSystemModal from "@app/modals/DesignSystemModal.svelte";

  import HotkeysModal from "@app/modals/HotkeysModal.svelte";



  const onKeydown = (event: KeyboardEvent) => {
@@ -18,7 +18,7 @@
        if (import.meta.env.PROD) {

          return;

        }
- 
        modal.toggle({ component: ColorPaletteModal, props: {} });
+ 
        modal.toggle({ component: DesignSystemModal, props: {} });

        break;

    }

  };
modified src/App/Layout.svelte
@@ -1,68 +1,21 @@
<script lang="ts">
- 
  import Footer from "@app/App/Footer.svelte";
- 
  import MobileFooter from "@app/App/MobileFooter.svelte";
- 
  import Link from "@app/components/Link.svelte";
+ 
  import Header from "@app/components/Header.svelte";

</script>



<style>
- 
  .app {
- 
    display: flex;
- 
    flex-direction: column;
- 
    height: 100%;
- 
  }
- 
  .header {
- 
    border-bottom: 1px solid var(--color-fill-separator);
- 
    display: flex;
- 
    align-items: center;
- 
    gap: 0.5rem;
- 
    margin: 0;
- 
    padding: 0.5rem 0.5rem 0.5rem 1rem;
- 
    height: 3.5rem;
- 
    justify-content: flex-end;
- 
  }

  .content {
- 
    height: 100%;
- 
    overflow-y: scroll;
- 
  }
-
- 
  .logo {
- 
    height: var(--button-regular-height);
- 
    margin: 0 0.5rem;
+ 
    width: 100%;
+ 
    display: grid;
+ 
    height: calc(100vh - var(--global-header-height));

  }
- 
  @media (max-width: 719.98px) {
- 
    .app {
- 
      display: grid;
- 
      grid-template-rows: 1fr auto;
- 
      height: 100%;
- 
    }
- 
    .content {
- 
      overflow-y: scroll;
- 
    }
+ 
  .center {
+ 
    overflow-y: auto;

  }

</style>
- 
<div class="app">
- 
  <div class="global-hide-on-mobile-down header">
- 
    <Link
- 
      style="display: flex; align-items: center;"
- 
      route={{ resource: "nodes", params: undefined }}>
- 
      <img
- 
        width="24"
- 
        height="24"
- 
        class="logo"
- 
        alt="Radicle logo"
- 
        src="/radicle.svg" />
- 
    </Link>
- 
  </div>
- 
  <div class="content">
+ 
<Header />
+ 
<div class="content">
+ 
  <div class="center">

    <slot />

  </div>
- 
  <div style:margin-top="auto">
- 
    <div class="global-hide-on-mobile-down">
- 
      <Footer />
- 
    </div>
- 
    <div class="global-hide-on-small-desktop-up">
- 
      <MobileFooter />
- 
    </div>
- 
  </div>

</div>
modified src/App/LoadingBar.svelte
@@ -5,7 +5,7 @@
<style>

  .loading-bar {

    height: 0.125rem;
- 
    background-color: var(--color-fill-secondary);
+ 
    background-color: var(--color-surface-brand-primary);

    width: 0%;

    opacity: 0;

    position: fixed;
modified src/App/MobileFooter.svelte
@@ -16,11 +16,11 @@
    padding: 0.5rem;

    z-index: 1;

    gap: 0.5rem;
- 
    border-top: 1px solid var(--color-fill-separator);
- 
    background-color: var(--color-background-default);
+ 
    border-top: 1px solid var(--color-border-subtle);
+ 
    background-color: var(--color-surface-base);

  }

  .divider {
- 
    border-bottom: 1px solid var(--color-fill-separator);
+ 
    border-bottom: 1px solid var(--color-border-subtle);

    margin: 1.5rem 0;

  }

</style>
@@ -29,12 +29,7 @@
  <Link

    style="width: 100%; display: flex; align-items: center; justify-content: center;"

    route={{ resource: "nodes", params: undefined }}>
- 
    <img
- 
      width="16"
- 
      height="16"
- 
      class="logo"
- 
      alt="Radicle logo"
- 
      src="/radicle.svg" />
+ 
    <Icon name="logo" />

  </Link>



  <slot />
modified src/App/Settings.svelte
@@ -8,8 +8,6 @@
  } from "@app/lib/appearance";



  import Button from "@app/components/Button.svelte";
- 
  import Icon from "@app/components/Icon.svelte";
- 
  import Radio from "@app/components/Radio.svelte";

</script>



<style>
@@ -18,7 +16,7 @@
    flex-direction: column;

    align-items: center;

    gap: 1.5rem;
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

  }



  .item {
@@ -38,64 +36,56 @@
<div class="settings">

  <div class="item">

    <div>Theme</div>
- 
    <div class="right">
- 
      <Radio>
- 
        <Button
- 
          ariaLabel="Light Mode"
- 
          styleBorderRadius="0"
- 
          variant={!$followSystemTheme && $theme === "light"
- 
            ? "selected"
- 
            : "not-selected"}
- 
          on:click={() => {
- 
            theme.set("light");
- 
            followSystemTheme.set(false);
- 
          }}>
- 
          <Icon name="sun" />
- 
        </Button>
- 
        <div class="global-spacer"></div>
- 
        <Button
- 
          ariaLabel="Dark Mode"
- 
          styleBorderRadius="0"
- 
          variant={!$followSystemTheme && $theme === "dark"
- 
            ? "selected"
- 
            : "not-selected"}
- 
          on:click={() => {
- 
            theme.set("dark");
- 
            followSystemTheme.set(false);
- 
          }}>
- 
          <Icon name="moon" />
- 
        </Button>
- 
        <div class="global-spacer"></div>
- 
        <Button
- 
          ariaLabel="System Theme"
- 
          styleBorderRadius="0"
- 
          variant={$followSystemTheme ? "selected" : "not-selected"}
- 
          on:click={() => {
- 
            theme.set(loadTheme());
- 
            followSystemTheme.set(true);
- 
          }}>
- 
          <Icon name="device" />
- 
        </Button>
- 
      </Radio>
+ 
    <div class="right" style:display="flex" style:gap="0.25rem">
+ 
      <Button
+ 
        ariaLabel="Light Mode"
+ 
        styleBorderRadius="0"
+ 
        variant={!$followSystemTheme && $theme === "light"
+ 
          ? "gray"
+ 
          : "background"}
+ 
        on:click={() => {
+ 
          theme.set("light");
+ 
          followSystemTheme.set(false);
+ 
        }}>
+ 
        Light
+ 
      </Button>
+ 
      <Button
+ 
        ariaLabel="Dark Mode"
+ 
        styleBorderRadius="0"
+ 
        variant={!$followSystemTheme && $theme === "dark"
+ 
          ? "gray"
+ 
          : "background"}
+ 
        on:click={() => {
+ 
          theme.set("dark");
+ 
          followSystemTheme.set(false);
+ 
        }}>
+ 
        Dark
+ 
      </Button>
+ 
      <Button
+ 
        ariaLabel="System Theme"
+ 
        styleBorderRadius="0"
+ 
        variant={$followSystemTheme ? "gray" : "background"}
+ 
        on:click={() => {
+ 
          theme.set(loadTheme());
+ 
          followSystemTheme.set(true);
+ 
        }}>
+ 
        System
+ 
      </Button>

    </div>

  </div>

  <div class="item">

    <div>Code Font</div>
- 
    <div class="right">
- 
      <Radio>
- 
        {#each codeFonts as font}
- 
          <Button
- 
            styleBorderRadius="0"
- 
            styleFontFamily={font.fontFamily}
- 
            on:click={() => codeFont.set(font.storedName)}
- 
            variant={$codeFont === font.storedName
- 
              ? "selected"
- 
              : "not-selected"}>
- 
            {font.displayName}
- 
          </Button>
- 
          <div class="global-spacer"></div>
- 
        {/each}
- 
      </Radio>
+ 
    <div class="right" style:display="flex" style:gap="0.25rem">
+ 
      {#each codeFonts as font}
+ 
        <Button
+ 
          ariaLabel={`Code Font ${font.displayName}`}
+ 
          styleBorderRadius="0"
+ 
          styleFontFamily={font.fontFamily}
+ 
          on:click={() => codeFont.set(font.storedName)}
+ 
          variant={$codeFont === font.storedName ? "gray" : "background"}>
+ 
          {font.displayName}
+ 
        </Button>
+ 
      {/each}

    </div>

  </div>

</div>
modified src/components/ActivityDiagram.svelte
@@ -1,137 +1,132 @@
<script lang="ts">

  import type { WeeklyActivity } from "@app/lib/commit";
- 
  import { onMount } from "svelte";
+ 
  interface Props {
+ 
    id: string;
+ 
    activity: WeeklyActivity[];
+ 
    viewBoxHeight: number;
+ 
    styleColor: string;
+ 
  }
- 
  export let id: string;
- 
  export let activity: WeeklyActivity[];
- 
  export let viewBoxHeight: number;
- 
  export let styleColor: string;
+ 
  const { id, activity, viewBoxHeight, styleColor }: Props = $props();
- 
  const strokeWidth = 3;
- 
  const viewBoxWidth = 600;
+ 
  const viewBoxWidth = 493;
- 
  // The path strings to be inserted into the svg <path>.
- 
  let path = "";
- 
  let areaPath = "";
+ 
  const totalWeeks = 52;
+ 
  const columns = 40;
+ 
  const cellGap = 2;
+ 
  const maxRows = 10;
- 
  const heightWithPadding = viewBoxHeight + 16;
+ 
  type Rect = { x: number; y: number; opacity: number };
+ 
  let rects: Rect[] = $state([]);
- 
  // The latest point on the x axis, starting at 0 until `viewBoxWidth`.
- 
  let lastWidthPoint = viewBoxWidth;
+ 
  const heightWithPadding = viewBoxHeight + 16;
- 
  // The amount of points on the x axis.
- 
  const widthIteration = viewBoxWidth / 52;
+ 
  let cellSize: number = $state(0);
+ 
  let rows: number = 0;
+ 
  let colWidth: number = 0;
+ 
  let rowHeight: number = 0;
- 
  // The highest value on the y axis.
- 
  const commitCountArray: number[] = [];
+ 
  $effect(() => {
+ 
    // Always draw diagram, even with no activity (to show baseline)
+ 
    if (activity !== undefined && activity !== null) {
+ 
      drawDiagram();
+ 
    }
+ 
  });
- 
  // The minimal amplitude shown e.g. commitCount = 1 => `minimalHeight`
- 
  // points of height in the SVG.
- 
  const minimalHeight = 5;
+ 
  function drawDiagram() {
+ 
    const commitCountArray: number[] = [];
+ 
    let week = 0;
- 
  let week = 0;
+ 
    for (const point of activity) {
+ 
      if (point.week - week > 1) {
+ 
        commitCountArray.push(...new Array(point.week - week - 1).fill(0));
+ 
      }
+ 
      commitCountArray.push(point.commits.length);
+ 
      week = point.week;
+ 
    }
- 
  for (const point of activity) {
- 
    if (point.week - week > 1) {
- 
      commitCountArray.push(...new Array(point.week - week).fill(0));
+ 
    if (commitCountArray.length < totalWeeks) {
+ 
      commitCountArray.push(
+ 
        ...new Array(totalWeeks - commitCountArray.length).fill(0),
+ 
      );
+ 
    } else if (commitCountArray.length > totalWeeks) {
+ 
      commitCountArray.splice(totalWeeks);

    }
- 
    commitCountArray.push(point.commits.length);
- 
    week = point.week;
- 
  }
- 
  // Formats the points passed in, into a svg path string, without closing
- 
  // the area.
- 
  function createPath() {
- 
    let i = 1;
+ 
    const boundaries = Array.from({ length: columns + 1 }, (_, i) =>
+ 
      Math.floor((i * totalWeeks) / columns),
+ 
    );
+ 
    const bucketCounts = Array.from({ length: columns }, (_, i) => {
+ 
      const start = boundaries[i];
+ 
      const end = boundaries[i + 1];
+ 
      let sum = 0;
+ 
      for (let j = start; j < end; j++) sum += commitCountArray[j] ?? 0;
+ 
      return sum;
+ 
    });
+
+ 
    // Use an absolute threshold for activity instead of normalizing to each project's max
+ 
    // This allows comparison across projects: high-activity projects will have taller bars
+ 
    const activityThreshold = 70; // commits per bucket to reach max height
- 
    if (commitCountArray.length < 52) {
- 
      commitCountArray.push(...new Array(52 - commitCountArray.length).fill(0));
+ 
    const maxCellFromWidth = Math.floor(
+ 
      (viewBoxWidth - (columns - 1) * cellGap) / columns,
+ 
    );
+ 
    const maxCellFromHeight = Math.floor(
+ 
      (viewBoxHeight - (maxRows - 1) * cellGap) / maxRows,
+ 
    );
+ 
    cellSize = Math.max(1, Math.min(maxCellFromWidth, maxCellFromHeight));
+ 
    colWidth = cellSize + cellGap + 8;
+ 
    rowHeight = cellSize + cellGap;
+ 
    rows = maxRows;
+
+ 
    function cellsForBucket(count: number): number {
+ 
      if (rows <= 0) return 0;
+ 
      // Always show at least 1 row for baseline visibility
+ 
      if (count === 0) return 1;
+ 
      // Scale based on absolute threshold, not project's max
+ 
      const scaled = Math.round((count / activityThreshold) * rows);
+ 
      // Any non-zero activity should be at least 2 rows (above baseline)
+ 
      return Math.max(2, Math.min(rows, scaled));

    }
- 
    const maxValue = Math.max(...commitCountArray);
- 
    const minValue = Math.min(...commitCountArray);
+ 
    function opacityForRow(rowIndex: number, count: number): number {
+ 
      // Low baseline opacity for inactive periods (visible but subtle)
+ 
      if (count === 0) return 0.25;
+ 
      if (rows <= 1) return 1;
+ 
      const t = rowIndex / (rows - 1);
+ 
      return 0.25 + 0.75 * t;
+ 
    }
- 
    // Normalizes the values to the viewBox dimensions.
- 
    const normalizedArray = commitCountArray.map(c => {
- 
      // If we are not crossing the `viewBoxHeight` we want to return the
- 
      // actual value, and don't want to normalize <`minimalHeight` commit
- 
      // counts as huge spikes.
- 
      if (maxValue < viewBoxHeight && c >= minimalHeight) {
- 
        return c;
- 
      }
- 
      // If the value is 0..minimalHeight though we don't want to set it to
- 
      // the minimalHeight.
- 
      else if (c > 0 && c < minimalHeight) {
- 
        return minimalHeight;
+ 
    const nextRects: Rect[] = [];
+ 
    for (let i = 0; i < columns; i++) {
+ 
      const count = bucketCounts[i];
+ 
      const heightCells = cellsForBucket(count);
+ 
      const x = viewBoxWidth - cellSize - i * colWidth;
+ 
      for (let r = 0; r < heightCells; r++) {
+ 
        const y = viewBoxHeight - (r + 1) * rowHeight;
+ 
        nextRects.push({ x, y, opacity: opacityForRow(r, count) });

      }
- 
      // If the count is 0 we have to make sure the normalization is not being
- 
      // run since it would return NaN.
- 
      else {
- 
        return c === 0
- 
          ? 0
- 
          : ((viewBoxHeight - 0) * (c - minValue)) / (maxValue - minValue);
- 
      }
- 
    });
-
- 
    const path = normalizedArray.slice(1).reduce(
- 
      (acc, curr) => {
- 
        const s = `${viewBoxWidth - widthIteration * i},${
- 
          viewBoxHeight - curr
- 
        }`;
- 
        lastWidthPoint = viewBoxWidth - widthIteration * i;
- 
        i += 1;
- 
        return acc.concat(s);
- 
      },
- 
      [`M${viewBoxWidth},${viewBoxHeight - normalizedArray[0]}`],
- 
    );
- 
    return path.join();
+ 
    }
+ 
    rects = nextRects;

  }
-
- 
  onMount(() => {
- 
    // Creates the stroke path with the array of points.
- 
    path = createPath();
- 
    // Concats a path closing for it to be the area under the stroke.
- 
    areaPath = path.concat(
- 
      `L${lastWidthPoint},${viewBoxHeight}L${viewBoxWidth},${viewBoxHeight}Z`,
- 
    );
- 
  });

</script>



<svg
+ 
  style:min-width="185px"

  style:color={styleColor}

  viewBox="0 0 {viewBoxWidth} {heightWithPadding}"
- 
  xmlns="http://www.w3.org/2000/svg">
- 
  <linearGradient id={`${id}:fillGradient`} x1="0" y1="1" x2="0" y2="0">
- 
    <stop offset="0%" stop-color="currentColor" stop-opacity="0" />
- 
    <stop offset="100%" stop-color="currentColor" stop-opacity="0.2" />
- 
  </linearGradient>
- 
  <linearGradient id={`${id}:gradient`} x1="0" y1="1" x2="0" y2="0">
- 
    <stop offset="0%" stop-color="currentColor" stop-opacity="0.2" />
- 
    <stop offset="50%" stop-color="currentColor" stop-opacity="0.8" />
- 
    <stop offset="100%" stop-color="currentColor" stop-opacity="1" />
- 
  </linearGradient>
- 
  {#if activity.length > 0}
- 
    <g>
- 
      <path
- 
        fill="transparent"
- 
        stroke={`url(#${id}:gradient)`}
- 
        stroke-width={strokeWidth}
- 
        stroke-linejoin="round"
- 
        d={path} />
- 
      <path
- 
        fill={`url(#${id}:fillGradient)`}
- 
        stroke="transparent"
- 
        d={areaPath} />
- 
    </g>
- 
  {:else}
- 
    <!-- If no commits have been made in a year, we show a straight line -->
- 
    <line
- 
      x1="0"
- 
      y1={viewBoxHeight}
- 
      x2="600"
- 
      y2={viewBoxHeight}
- 
      stroke="currentColor"
- 
      stroke-width={1} />
- 
  {/if}
+ 
  xmlns="http://www.w3.org/2000/svg"
+ 
  id={`activity-diagram-${id}`}>
+ 
  <g>
+ 
    {#each rects as rect, i (i)}
+ 
      <rect
+ 
        x={rect.x}
+ 
        y={rect.y}
+ 
        width={cellSize}
+ 
        height={cellSize}
+ 
        fill="currentColor"
+ 
        fill-opacity={rect.opacity} />
+ 
    {/each}
+ 
  </g>

</svg>
modified src/components/Avatar.svelte
@@ -19,7 +19,7 @@
<style>

  .avatar {

    display: block;
- 
    box-shadow: 0 0 0 1px var(--color-border-match-background);
+ 
    box-shadow: 0 0 0 1px var(--color-border-subtle);

    width: inherit;

    object-fit: cover;

    background-size: cover;
@@ -27,11 +27,11 @@
  }

  .small {

    width: 1rem;
- 
    border-radius: var(--border-radius-round);
+ 
    border-radius: var(--border-radius-full);

  }

  .large {

    width: 4rem;
- 
    border-radius: var(--border-radius-small);
+ 
    border-radius: var(--border-radius-md);

  }

</style>
modified src/components/Badge.svelte
@@ -1,100 +1,100 @@
<script lang="ts">

  export let variant:
- 
    | "caution"
- 
    | "foreground"
+ 
    | "archived"

    | "background"
- 
    | "outline"
- 
    | "yellow"
- 
    | "neutral"
+ 
    | "delegate"
+ 
    | "draft"
+ 
    | "foreground"
+ 
    | "foreground-emphasized"
+ 
    | "merged"

    | "negative"
+ 
    | "neutral"
+ 
    | "open"
+ 
    | "outline"

    | "positive"
- 
    | "primary"
- 
    | "foreground-emphasized"
- 
    | "delegate"
- 
    | "secondary";
+ 
    | "private";

  export let round: boolean = false;

  export let style: string | undefined = undefined;

  export let size: "tiny" | "small" | "medium" = "tiny";

  export let title: string | undefined = undefined;
+ 
  export let onClick: (() => void) | undefined = undefined;

</script>



<style>

  .badge {
- 
    border-radius: var(--border-radius-round);
- 
    font-size: var(--font-size-tiny);
- 
    font-weight: var(--font-weight-bold);
- 
    line-height: 1.6;
+ 
    border-radius: var(--border-radius-sm);

    height: var(--button-tiny-height);
+ 
    font: var(--txt-body-s-regular);

    display: flex;

    white-space: nowrap;

    align-items: center;

    gap: 0.25rem;

  }
- 
  .background {
- 
    color: currentColor;
- 
    background: var(--color-background-float);
- 
  }

  .foreground {
- 
    color: var(--color-foreground-dim);
- 
    background: var(--color-fill-ghost);
+ 
    color: var(--color-text-tertiary);
+ 
    background: var(--color-surface-mid);

  }

  .foreground-emphasized {
- 
    background-color: var(--color-fill-selected);
- 
    color: var(--color-foreground-emphasized-hover);
+ 
    background-color: var(--color-surface-brand-primary);
+ 
    color: var(--color-text-on-brand);
+ 
  }
+ 
  .background {
+ 
    color: var(--color-text-primary);
+ 
    background: transparent;

  }

  .delegate {
- 
    color: var(--color-foreground-primary);
- 
    background: var(--color-fill-delegate);
+ 
    color: var(--color-text-merged);
+ 
    background: var(--color-surface-merged);

  }

  .neutral {
- 
    color: var(--color-foreground-contrast);
- 
    background: var(--color-fill-ghost);
+ 
    color: var(--color-text-primary);
+ 
    background: var(--color-surface-mid);

  }

  .positive {
- 
    color: var(--color-foreground-success);
- 
    background-color: var(--color-fill-diff-green-light);
+ 
    color: var(--color-text-open);
+ 
    background-color: var(--color-feedback-success-bg);

  }
- 
  .secondary {
- 
    color: var(--color-fill-secondary-hover);
- 
    background-color: var(--color-fill-counter-emphasized);
- 
  }
- 
  .yellow {
- 
    color: var(--color-fill-yellow);
- 
    background-color: var(--color-fill-yellow);
+ 
  .private {
+ 
    color: var(--color-feedback-warning-text);
+ 
    background-color: var(--color-feedback-warning-bg);

  }

  .outline {
- 
    border: 1px solid var(--color-border-hint);
+ 
    border: 1px solid var(--color-border-subtle);

    background-color: transparent;

  }
- 
  .outline:hover {
- 
    border-color: var(--color-fill-secondary);
- 
  }

  .negative {
- 
    color: var(--color-foreground-red);
- 
    background-color: var(--color-fill-diff-red-light);
+ 
    color: var(--color-feedback-error-text);
+ 
    background-color: var(--color-feedback-error-bg);
+ 
  }
+ 
  .draft {
+ 
    color: var(--color-text-tertiary);
+ 
    background: var(--color-surface-mid);
+ 
  }
+ 
  .archived {
+ 
    color: var(--color-text-archived);
+ 
    background: var(--color-surface-archived);

  }
- 
  .primary {
- 
    color: var(--color-foreground-primary);
- 
    background: var(--color-fill-delegate);
+ 
  .open {
+ 
    color: var(--color-text-open);
+ 
    background: var(--color-surface-open);

  }
- 
  .caution {
- 
    color: var(--color-foreground-yellow);
- 
    background: var(--color-fill-private);
+ 
  .merged {
+ 
    color: var(--color-text-merged);
+ 
    background: var(--color-surface-merged);

  }

  .tiny {

    height: 1.5rem;
- 
    font-size: var(--font-size-tiny);
- 
    font-weight: var(--font-weight-semibold);
+ 
    font: var(--txt-body-s-regular);

    padding: 0.25rem 0.5rem;

  }

  .small {

    height: 2rem;
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

    padding: 0.5rem 0.75rem;

  }

  .medium {

    height: 2.5rem;
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

    padding: 0.75rem 1rem;

  }

  .round {
@@ -104,31 +104,30 @@
  }

</style>
- 
<!-- svelte-ignore a11y-click-events-have-key-events -->
+ 
<!-- svelte-ignore a11y_click_events_have_key_events -->

<span

  role="button"

  tabindex="0"
- 
  on:click
- 
  on:mouseenter
- 
  on:mouseleave

  class="badge"
+ 
  onclick={onClick}

  {style}

  {title}

  class:round

  class:tiny={size === "tiny"}

  class:small={size === "small"}

  class:medium={size === "medium"}
- 
  class:caution={variant === "caution"}
- 
  class:yellow={variant === "yellow"}
+ 
  class:private={variant === "private"}

  class:delegate={variant === "delegate"}

  class:outline={variant === "outline"}

  class:foreground-emphasized={variant === "foreground-emphasized"}
- 
  class:background={variant === "background"}

  class:foreground={variant === "foreground"}

  class:neutral={variant === "neutral"}

  class:negative={variant === "negative"}

  class:positive={variant === "positive"}
- 
  class:primary={variant === "primary"}
- 
  class:secondary={variant === "secondary"}>
+ 
  class:draft={variant === "draft"}
+ 
  class:archived={variant === "archived"}
+ 
  class:open={variant === "open"}
+ 
  class:merged={variant === "merged"}
+ 
  class:background={variant === "background"}>

  <slot />

</span>
modified src/components/Button.svelte
@@ -7,16 +7,11 @@
    | "gray"

    | "gray-white"

    | "selected"
- 
    | "none"

    | "outline"
- 
    | "primary-toggle-off"
- 
    | "primary-toggle-on"

    | "secondary"

    | "secondary-toggle-off"
- 
    | "secondary-toggle-on"

    | "secondary-mobile"

    | "secondary-mobile-toggle"
- 
    | "naked-toggle"

    | "tab"

    | "tab-active" = "gray";

  export let size: "small" | "regular" | "large" = "regular";
@@ -42,10 +37,8 @@
    display: flex;

    align-items: center;

    border: none;
- 
    border-radius: var(--border-radius-tiny);
- 
    font-family: var(--font-family-sans-serif);
- 
    font-weight: var(--font-weight-semibold);
- 
    font-size: var(--font-size-small);
+ 
    border-radius: var(--border-radius-sm);
+ 
    font: var(--txt-body-m-medium);

    font-feature-settings: inherit;

    white-space: nowrap;

    gap: 0.5rem;
@@ -53,7 +46,7 @@
  }



  button:disabled {
- 
    color: var(--color-foreground-disabled);
+ 
    color: var(--color-text-disabled);

  }

  button:disabled.not-allowed {

    cursor: not-allowed;
@@ -70,243 +63,171 @@
  }



  .large {
- 
    border-radius: var(--border-radius-small);
+ 
    border-radius: var(--border-radius-sm);

    height: var(--button-regular-height);

    padding: 0 1rem;

  }



  .background {
- 
    color: var(--color-foreground-contrast);
- 
    background-color: var(--color-background-default);
- 
    font-weight: var(--font-weight-regular);
+ 
    color: var(--color-text-primary);
+ 
    background-color: var(--color-surface-base);
+ 
    font: var(--txt-body-m-regular);

  }

  .background[disabled] {
- 
    color: var(--color-foreground-disabled);
- 
    background-color: var(--color-background-default);
- 
    font-weight: var(--font-weight-regular);
+ 
    color: var(--color-text-disabled);
+ 
    background-color: var(--color-surface-base);

  }

  .background:not([disabled]):hover {
- 
    color: var(--color-foreground-contrast);
- 
    background-color: var(--color-fill-ghost);
+ 
    color: var(--color-text-primary);
+ 
    background-color: var(--color-surface-mid);

  }



  .gray {
- 
    background-color: var(--color-fill-ghost);
- 
    color: var(--color-foreground-contrast);
+ 
    background-color: var(--color-surface-mid);
+ 
    color: var(--color-text-primary);

  }

  .gray[disabled] {
- 
    background-color: var(--color-fill-ghost);
- 
    color: var(--color-foreground-disabled);
+ 
    background-color: var(--color-surface-mid);
+ 
    color: var(--color-text-disabled);

  }

  .gray:not([disabled]):hover {
- 
    background-color: var(--color-fill-ghost-hover);
- 
    color: var(--color-foreground-contrast);
+ 
    background-color: var(--color-surface-strong);
+ 
    color: var(--color-text-primary);

  }



  .gray-white {
- 
    background-color: var(--color-fill-ghost);
- 
    color: var(--color-foreground-contrast);
+ 
    background-color: var(--color-surface-mid);
+ 
    color: var(--color-text-primary);

  }

  .gray-white[disabled] {
- 
    background-color: var(--color-fill-ghost);
- 
    color: var(--color-foreground-disabled);
+ 
    background-color: var(--color-surface-mid);
+ 
    color: var(--color-text-disabled);

  }

  .gray-white:not([disabled]):hover {
- 
    background-color: var(--color-fill-ghost-hover);
- 
    color: var(--color-foreground-contrast);
+ 
    background-color: var(--color-surface-strong);
+ 
    color: var(--color-text-primary);

  }

  .selected {
- 
    background-color: var(--color-fill-float-hover);
- 
    color: var(--color-foreground-emphasized);
+ 
    background-color: var(--color-border-alpha-subtle);
+ 
    color: var(--color-text-brand);

    cursor: default;

  }

  .selected[disabled] {
- 
    background-color: var(--color-fill-ghost);
- 
    color: var(--color-foreground-disabled);
+ 
    background-color: var(--color-surface-mid);
+ 
    color: var(--color-text-disabled);

  }



  .not-selected {
- 
    background-color: var(--color-fill-ghost);
- 
    color: var(--color-foreground-contrast);
- 
    font-weight: var(--font-weight-normal);
+ 
    background-color: var(--color-surface-mid);
+ 
    color: var(--color-text-primary);
+ 
    font: var(--txt-body-m-regular);

    letter-spacing: 0.02rem;

  }

  .not-selected[disabled] {
- 
    background-color: var(--color-fill-float-hover);
- 
    color: var(--color-foreground-disabled);
- 
    font-weight: var(--font-weight-normal);
+ 
    background-color: var(--color-surface-mid);
+ 
    color: var(--color-text-disabled);

  }

  .not-selected:not([disabled]):hover {
- 
    background-color: var(--color-fill-ghost-hover);
- 
    color: var(--color-foreground-contrast);
- 
  }
-
- 
  .none {
- 
    background-color: transparent;
- 
    color: var(--color-foreground-emphasized);
- 
  }
- 
  .none[disabled] {
- 
    background-color: transparent;
- 
    color: var(--color-foreground-emphasized);
- 
  }
- 
  .none:not([disabled]):hover {
- 
    background-color: var(--color-fill-ghost);
+ 
    background-color: var(--color-surface-strong);
+ 
    color: var(--color-text-primary);

  }



  .outline {

    background-color: transparent;
- 
    color: var(--color-foreground-contrast);
- 
    border: 1px solid var(--color-border-hint);
+ 
    color: var(--color-text-primary);
+ 
    border: 1px solid var(--color-border-subtle);

  }

  .outline[disabled] {

    background-color: transparent;
- 
    color: var(--color-fill-gray);
+ 
    color: var(--color-text-tertiary);

  }

  .outline:not([disabled]):hover {

    background-color: transparent;
- 
    border: 1px solid var(--color-border-focus);
- 
  }
-
- 
  .primary-toggle-on {
- 
    color: var(--color-fill-primary);
- 
    background-color: var(--color-fill-merged);
- 
    border: 1px solid var(--color-border-merged);
- 
  }
-
- 
  .primary-toggle-on[disabled] {
- 
    color: var(--color-foreground-match-background);
- 
    background-color: var(--color-fill-primary);
- 
  }
-
- 
  .primary-toggle-on:not([disabled]):hover {
- 
    border: 1px solid var(--color-border-primary);
- 
  }
-
- 
  .primary-toggle-off {
- 
    background-color: transparent;
- 
    color: var(--color-foreground-dim);
- 
    border: 1px solid var(--color-border-hint);
- 
  }
- 
  .primary-toggle-off[disabled] {
- 
    background-color: transparent;
- 
    color: var(--color-fill-gray);
- 
  }
- 
  .primary-toggle-off:not([disabled]):hover {
- 
    background-color: transparent;
- 
    border: 1px solid var(--color-border-primary);
- 
    color: var(--color-foreground-dim);
+ 
    border: 1px solid var(--color-border-brand);

  }



  .secondary-toggle-off {
- 
    background-color: var(--color-fill-secondary);
- 
    color: var(--color-foreground-match-background);
+ 
    background-color: var(--color-surface-brand-primary);
+ 
    color: var(--color-text-on-brand);

  }

  .secondary-toggle-off[disabled] {
- 
    background-color: var(--color-fill-ghost);
- 
    color: var(--color-foreground-disabled);
+ 
    background-color: var(--color-surface-mid);
+ 
    color: var(--color-text-disabled);

  }

  .secondary-toggle-off:not([disabled]):hover {
- 
    background-color: var(--color-fill-secondary-hover);
- 
  }
- 
  .secondary-toggle-on {
- 
    background-color: var(--color-fill-selected);
- 
    color: var(--color-foreground-emphasized);
- 
    border: 1px solid var(--color-border-selected);
- 
  }
- 
  .secondary-toggle-on[disabled] {
- 
    background-color: var(--color-fill-ghost);
- 
    color: var(--color-foreground-disabled);
- 
    border: none;
- 
  }
- 
  .secondary-toggle-on:not([disabled]):hover {
- 
    background-color: var(--color-fill-selected);
- 
    border: 1px solid var(--color-border-focus);
- 
  }
-
- 
  .naked-toggle {
- 
    background-color: transparent;
- 
    color: var(--color-foreground-contrast);
- 
    border: 1px solid transparent;
- 
  }
- 
  .naked-toggle[disabled] {
- 
    background-color: transparent;
- 
    color: var(--color-fill-gray);
- 
  }
- 
  .naked-toggle:not([disabled]):hover {
- 
    background-color: transparent;
- 
    border: 1px solid var(--color-fill-secondary);
+ 
    background-color: var(--color-surface-brand-secondary);

  }



  .secondary {
- 
    color: var(--color-foreground-match-background);
- 
    background-color: var(--color-fill-secondary);
+ 
    color: var(--color-text-on-brand);
+ 
    background-color: var(--color-surface-brand-primary);

  }



  .secondary[disabled] {
- 
    background-color: var(--color-fill-ghost);
- 
    color: var(--color-foreground-disabled);
+ 
    background-color: var(--color-surface-mid);
+ 
    color: var(--color-text-disabled);

  }



  .secondary:not([disabled]):hover {
- 
    background-color: var(--color-fill-secondary-hover);
+ 
    background-color: var(--color-surface-brand-secondary);

  }



  .secondary-mobile {
- 
    color: var(--color-foreground-dim);
- 
    background-color: var(--color-background-default);
+ 
    color: var(--color-text-tertiary);
+ 
    background-color: var(--color-surface-base);

  }



  .secondary-mobile[disabled] {
- 
    background-color: var(--color-fill-ghost);
- 
    color: var(--color-foreground-disabled);
+ 
    background-color: var(--color-surface-mid);
+ 
    color: var(--color-text-disabled);

  }



  .secondary-mobile:not([disabled]):active {
- 
    color: var(--color-foreground-match-background);
- 
    background-color: var(--color-fill-secondary);
+ 
    color: var(--color-text-on-brand);
+ 
    background-color: var(--color-surface-brand-primary);

  }



  .secondary-mobile-toggle {
- 
    color: var(--color-foreground-dim);
- 
    background-color: var(--color-background-default);
+ 
    color: var(--color-text-tertiary);
+ 
    background-color: var(--color-surface-base);

  }



  .secondary-mobile-toggle[disabled] {
- 
    background-color: var(--color-fill-ghost);
- 
    color: var(--color-foreground-disabled);
+ 
    background-color: var(--color-surface-mid);
+ 
    color: var(--color-text-disabled);

  }



  .tab {

    background-color: transparent;
- 
    color: var(--color-foreground-contrast);
- 
    border: 1px solid var(--color-border-hint);
- 
    border-radius: 4px 4px 0 0;
+ 
    color: var(--color-text-primary);
+ 
    border: 1px solid var(--color-border-subtle);
+ 
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;

    font-weight: normal;

    letter-spacing: 0.3px;

  }



  .tab[disabled] {
- 
    background-color: var(--color-background-default);
- 
    color: var(--color-foreground-disabled);
+ 
    background-color: var(--color-surface-base);
+ 
    color: var(--color-text-disabled);

    border: none;
- 
    border-bottom: 1px solid var(--color-border-hint);
+ 
    border-bottom: 1px solid var(--color-border-subtle);

  }



  .tab:not([disabled]):hover {
- 
    background-color: var(--color-fill-float-hover);
+ 
    background-color: var(--color-border-alpha-subtle);

  }



  .tab-active {
- 
    background-color: var(--color-background-default);
- 
    border: 1px solid var(--color-fill-separator);
- 
    border-bottom: 1px solid var(--color-background-default);
- 
    border-radius: 4px 4px 0 0;
- 
    color: var(--color-foreground-contrast);
+ 
    background-color: var(--color-surface-base);
+ 
    border: 1px solid var(--color-border-subtle);
+ 
    border-bottom: 1px solid var(--color-surface-base);
+ 
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
+ 
    color: var(--color-text-primary);

  }



  .tab-active[disabled] {
- 
    background-color: var(--color-background-default);
- 
    color: var(--color-foreground-disabled);
+ 
    background-color: var(--color-surface-base);
+ 
    color: var(--color-text-disabled);

  }

</style>
@@ -344,13 +265,8 @@
  class:gray-white={variant === "gray-white"}

  class:selected={variant === "selected"}

  class:gray={variant === "gray"}
- 
  class:none={variant === "none"}

  class:outline={variant === "outline"}
- 
  class:primary-toggle-off={variant === "primary-toggle-off"}
- 
  class:primary-toggle-on={variant === "primary-toggle-on"}

  class:secondary-toggle-off={variant === "secondary-toggle-off"}
- 
  class:secondary-toggle-on={variant === "secondary-toggle-on"}
- 
  class:naked-toggle={variant === "naked-toggle"}

  class:secondary={variant === "secondary"}

  class:secondary-mobile={variant === "secondary-mobile"}

  class:secondary-mobile-toggle={variant === "secondary-mobile-toggle"}
modified src/components/Clipboard.svelte
@@ -13,10 +13,10 @@


  const dispatch = createEventDispatcher<{ copied: null }>();
- 
  let icon: "clipboard" | "checkmark" = "clipboard";
+ 
  let icon: "copy" | "checkmark" = "copy";



  const restoreIcon = debounce(() => {
- 
    icon = "clipboard";
+ 
    icon = "copy";

  }, 800);



  export async function copy() {
@@ -28,7 +28,7 @@
</script>



<style>
- 
  .clipboard {
+ 
  .copy {

    width: 1.5rem;

    height: 1.5rem;

    cursor: pointer;
@@ -43,8 +43,9 @@
<span

  role="button"

  tabindex="0"
+ 
  aria-label="Copy"

  title={tooltip}
- 
  class="clipboard"
+ 
  class="copy"

  on:click|stopPropagation={copy}>

  <Icon name={icon} />

</span>
modified src/components/Command.svelte
@@ -14,22 +14,22 @@
  }

  .cmd {

    cursor: pointer;
- 
    height: 2rem;
- 
    line-height: 2rem;
- 
    border-radius: var(--border-radius-small);
- 
    display: inline-block;
- 
    font-family: var(--font-family-monospace);
- 
    font-size: var(--font-size-small);
- 
    font-weight: var(--font-weight-semibold);
+ 
    height: 2.5rem;
+ 
    border-radius: var(--border-radius-sm);
+ 
    display: flex;
+ 
    align-items: center;
+ 
    font: var(--txt-code-regular);

    padding: 0 2rem 0 0.75rem;

    position: relative;
- 
    border: 1px solid var(--color-border-hint);
- 
    color: var(--color-foreground-dim);
+ 
    border: 1px solid var(--color-border-alpha-subtle);
+ 
    color: var(--color-text-secondary);
+ 
    background-color: var(--color-surface-alpha-mid);

    user-select: none;
+ 
    overflow: hidden;

  }

  .cmd:hover {
- 
    border: 1px solid var(--color-border-default);
- 
    color: var(--color-foreground-contrast);
+ 
    border: 1px solid var(--color-border-mid);
+ 
    color: var(--color-text-primary);

  }

  .clipboard {

    display: flex;
@@ -53,13 +53,15 @@
  <div

    role="button"

    tabindex="0"
- 
    class="cmd txt-overflow"
+ 
    class="cmd"

    class:full-width={fullWidth}

    on:click={() => {

      clipboard.copy();

    }}>
- 
    {#if showPrompt}${/if}
- 
    {command}
+ 
    <div class="txt-overflow">
+ 
      {#if showPrompt}${/if}
+ 
      {command}
+ 
    </div>

    <div class="clipboard">

      <Clipboard bind:this={clipboard} text={command} />

    </div>
modified src/components/Comment.svelte
@@ -49,9 +49,6 @@
    padding: 0.5rem 0;

    gap: 0.5rem;

  }
- 
  .card:not(:last-child) {
- 
    box-shadow: -1px 0 0 0 var(--color-fill-separator);
- 
  }

  .card-header {

    display: flex;

    align-items: center;
@@ -60,34 +57,33 @@
    padding: 0 0.75rem;

    min-height: 1.5rem;

    gap: 0.5rem;
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

  }

  .code-location {
- 
    font-family: var(--font-family-monospace);
- 
    background-color: var(--color-fill-ghost);
- 
    font-size: var(--font-size-tiny);
- 
    border-radius: var(--border-radius-tiny);
+ 
    font: var(--txt-code-regular);
+ 
    background-color: var(--color-surface-mid);
+ 
    border-radius: var(--border-radius-sm);

    padding: 0.125rem 0.25rem;

  }

  .reply-dot {
- 
    border-radius: var(--border-radius-round);
+ 
    border-radius: var(--border-radius-full);

    width: 4px;

    height: 4px;

    position: absolute;

    top: 10px;

    left: -2.5px;
- 
    background-color: var(--color-fill-separator);
+ 
    background-color: var(--color-border-subtle);

  }

  .card-metadata {
- 
    color: var(--color-fill-gray);
- 
    font-size: var(--font-size-small);
+ 
    color: var(--color-text-tertiary);
+ 
    font: var(--txt-body-m-regular);

  }

  .card-body {

    display: flex;

    align-items: center;

    min-height: 1.625rem;

    word-wrap: break-word;
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

    padding: 0 2.25rem;

  }

  .card-empty-body {
@@ -102,8 +98,8 @@
    margin-left: -0.375rem;

  }

  .timestamp {
- 
    font-size: var(--font-size-small);
- 
    color: var(--color-fill-gray);
+ 
    font: var(--txt-body-m-regular);
+ 
    color: var(--color-text-tertiary);

  }

  .card-header-no-icon {

    padding-left: 1rem;
@@ -118,7 +114,7 @@
    position: absolute;

    top: -9px;

    left: -1px;
- 
    background-color: var(--color-fill-separator);
+ 
    background-color: var(--color-border-subtle);

  }

</style>
modified src/components/CompactCommitAuthorship.svelte
@@ -10,7 +10,7 @@
<style>

  .authorship {

    display: flex;
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

    column-gap: 0.5rem;

    align-items: center;

    white-space: nowrap;
@@ -21,18 +21,14 @@
    flex-wrap: nowrap;

    white-space: nowrap;

    gap: 0.5rem;
- 
    font-family: var(--font-family-monospace);
- 
    font-weight: var(--font-weight-semibold);

  }

  .label {
- 
    font-family: var(--font-family-sans-serif);
- 
    font-weight: var(--font-weight-regular);
- 
    color: var(--color-foreground-dim);
+ 
    color: var(--color-text-tertiary);

  }

  .avatar {

    width: 1rem;

    height: 1rem;
- 
    border-radius: var(--border-radius-round);
+ 
    border-radius: var(--border-radius-full);

  }

</style>
modified src/components/DiffStatBadge.svelte
@@ -1,39 +1,37 @@
<script lang="ts">
- 
  export let insertions: number;
- 
  export let deletions: number;
- 
  export let hoverable: boolean = false;
+ 
  interface Props {
+ 
    insertions: number;
+ 
    deletions: number;
+ 
    hoverable?: boolean;
+ 
  }
+
+ 
  const { insertions, deletions, hoverable }: Props = $props();

</script>



<style>

  .badge {

    display: flex;
- 
    font-size: var(--font-size-tiny);
- 
    font-weight: var(--font-weight-bold);
- 
    font-family: var(--font-family-monospace);
+ 
    font: var(--txt-body-s-regular);

    height: var(--button-tiny-height);

    white-space: nowrap;
- 
    border-radius: var(--border-radius-round);

    overflow: hidden;
+ 
    position: relative;
+ 
    border-radius: var(--border-radius-sm);

  }
- 
  .hoverable:hover .positive {
- 
    background-color: var(--color-fill-diff-green);
- 
  }
- 
  .hoverable:hover .negative {
- 
    background-color: var(--color-fill-diff-red);
+ 
  .badge:hover {
+ 
    background-color: var(--color-surface-alpha-mid);

  }

  .positive {

    display: flex;
- 
    padding: 0 6px;
+ 
    padding: 0 4px;

    align-items: center;
- 
    color: var(--color-foreground-success);
- 
    background-color: var(--color-fill-diff-green-light);
+ 
    color: var(--color-text-open);

  }

  .negative {

    display: flex;
- 
    padding: 0 6px;
+ 
    padding: 0 4px;

    align-items: center;
- 
    color: var(--color-foreground-red);
- 
    background-color: var(--color-fill-diff-red-light);
+ 
    color: var(--color-feedback-error-text);

  }

</style>
modified src/components/DropdownList.svelte
@@ -7,13 +7,13 @@
<style>

  .dropdown {

    align-items: center;
- 
    border-radius: var(--border-radius-small);
+ 
    border-radius: var(--border-radius-sm);

    max-height: 60vh;

    overflow-y: auto;

  }

  .dropdown-item {

    padding: 0.25rem 0.25rem 0 0.25rem;
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

  }

</style>
modified src/components/DropdownList/DropdownListItem.svelte
@@ -14,32 +14,30 @@
    gap: 0.375rem;

    padding: 0.5rem 0.375rem;

    white-space: nowrap;
- 
    border-radius: var(--border-radius-tiny);
- 
    font-size: var(--font-size-small);
- 
    font-weight: var(--font-weight-regular);
- 
    color: var(--color-foreground-contrast);
+ 
    border-radius: var(--border-radius-sm);
+ 
    font: var(--txt-body-m-regular);
+ 
    color: var(--color-text-primary);

  }

  .item.disabled {
- 
    color: var(--color-foreground-disabled);
+ 
    color: var(--color-text-disabled);

  }

  .item:hover,

  .selected {
- 
    background-color: var(--color-fill-ghost);
+ 
    background-color: var(--color-surface-mid);

  }

  .selected {
- 
    font-weight: var(--font-weight-semibold);
- 
    color: var(--color-foreground-contrast);
- 
    background-color: var(--color-fill-ghost);
+ 
    color: var(--color-text-primary);
+ 
    background-color: var(--color-surface-mid);

  }

  .item:hover.selected {
- 
    background-color: var(--color-fill-ghost-hover);
+ 
    background-color: var(--color-surface-strong);

  }

  .item:hover.selected.disabled {
- 
    background-color: var(--color-fill-ghost);
+ 
    background-color: var(--color-surface-mid);

  }

  .item:hover.disabled {

    cursor: not-allowed;
- 
    background-color: var(--color-background-float);
+ 
    background-color: var(--color-surface-subtle);

  }

</style>
modified src/components/ErrorMessage.svelte
@@ -19,27 +19,24 @@
    border-radius: inherit;

    display: flex;

    flex-direction: column;
- 
    font-family: var(--font-family-sans-serif);

    font-size: inherit;

    padding: 1rem;
- 
    border-radius: var(--border-radius-small);
+ 
    border-radius: var(--border-radius-md);

    gap: 1rem;

  }

  .label {
- 
    font-size: var(--font-size-small);
- 
    font-weight: var(--font-weight-regular);
+ 
    font: var(--txt-body-m-regular);

    max-width: 36rem;

  }

  .error :global(code) {
- 
    font-family: var(--font-family-monospace);
- 
    font-size: var(--font-size-small);
- 
    background-color: var(--color-fill-ghost);
- 
    border-radius: var(--border-radius-tiny);
+ 
    font: var(--txt-code-regular);
+ 
    background-color: var(--color-surface-mid);
+ 
    border-radius: var(--border-radius-sm);

    padding: 0.125rem 0.25rem;

  }



  .help {
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

    text-align: center;

  }

  .command {
@@ -54,7 +51,7 @@


<div class="error">

  <IconLarge name={icon} />
- 
  <div class="txt-medium txt-bold">
+ 
  <div class="txt-heading-m">

    {title}

  </div>

  <!-- This @html is secure since we don't allow user input -->
modified src/components/ExternalLink.svelte
@@ -8,7 +8,6 @@


<style>

  a {
- 
    font-weight: var(--font-weight-semibold);

    color: inherit;

    display: inline-flex;

    align-items: center;
@@ -18,21 +17,21 @@
  a:hover {

    text-decoration: underline;

    text-underline-offset: 2px;
- 
    color: var(--color-fill-secondary);
+ 
    color: var(--color-text-brand);

  }



  .icon {
- 
    color: var(--color-foreground-dim);
+ 
    color: var(--color-text-tertiary);

    position: relative;

    bottom: 1px;

  }



  a:hover .icon {
- 
    color: var(--color-fill-secondary-hover);
+ 
    color: var(--color-surface-brand-secondary);

  }

</style>



<a {href} target="_blank" rel="noreferrer">

  <slot>{href}</slot>
- 
  <span class="icon"><Icon name="arrow-box-up-right" /></span>
+ 
  <span class="icon"><Icon name="open-external" /></span>

</a>
modified src/components/File.svelte
@@ -16,10 +16,10 @@
    height: 3rem;

    align-items: center;

    padding: 0 0.5rem 0 1rem;
- 
    border: 1px solid var(--color-border-hint);
- 
    border-top-left-radius: var(--border-radius-small);
- 
    border-top-right-radius: var(--border-radius-small);
- 
    background-color: var(--color-background-default);
+ 
    border: 1px solid var(--color-border-subtle);
+ 
    border-top-left-radius: var(--border-radius-md);
+ 
    border-top-right-radius: var(--border-radius-md);
+ 
    background-color: var(--color-surface-base);

    z-index: 2;

  }
@@ -29,8 +29,8 @@
  }



  .collapsed {
- 
    border-radius: var(--border-radius-small);
- 
    border: 1px solid var(--color-border-hint);
+ 
    border-radius: var(--border-radius-md);
+ 
    border: 1px solid var(--color-border-subtle);

  }



  .left {
@@ -50,11 +50,11 @@
  .container {

    position: relative;

    overflow-x: auto;
- 
    border: 1px solid var(--color-border-hint);
+ 
    border: 1px solid var(--color-border-subtle);

    border-top: 0;
- 
    background: var(--color-background-float);
- 
    border-bottom-left-radius: var(--border-radius-small);
- 
    border-bottom-right-radius: var(--border-radius-small);
+ 
    background: var(--color-surface-subtle);
+ 
    border-bottom-left-radius: var(--border-radius-md);
+ 
    border-bottom-right-radius: var(--border-radius-md);

  }

  @media (max-width: 719.98px) {

    .header {
modified src/components/FilePath.svelte
@@ -11,17 +11,16 @@


<style>

  .file-path {
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

    white-space: nowrap;

  }



  .path {
- 
    color: var(--color-fill-gray);
- 
    font-weight: var(--font-weight-regular);
+ 
    color: var(--color-text-tertiary);

  }



  .filename {
- 
    font-weight: var(--font-weight-semibold);
+ 
    font: var(--txt-body-m-regular);

  }

</style>
added src/components/Header.svelte
@@ -0,0 +1,75 @@
+ 
<script lang="ts">
+ 
  import Settings from "@app/App/Settings.svelte";
+ 
  import Help from "@app/App/Help.svelte";
+ 
  import Icon from "@app/components/Icon.svelte";
+ 
  import IconButton from "@app/components/IconButton.svelte";
+ 
  import Link from "@app/components/Link.svelte";
+ 
  import Logo from "@app/components/Logo.svelte";
+ 
  import Popover from "@app/components/Popover.svelte";
+ 
</script>
+
+ 
<style>
+ 
  .header-container {
+ 
    background-color: var(--color-surface-base);
+ 
    padding: 0 1rem;
+ 
    border-bottom: 1px solid var(--color-border-subtle);
+ 
    height: var(--global-header-height);
+ 
    display: flex;
+ 
    align-items: center;
+ 
    justify-content: space-between;
+ 
    width: 100%;
+ 
    position: relative;
+ 
    z-index: 200;
+ 
  }
+ 
  .left-section {
+ 
    display: flex;
+ 
    align-items: center;
+ 
  }
+ 
  .right-section {
+ 
    display: flex;
+ 
    justify-content: flex-end;
+ 
  }
+ 
  .divider {
+ 
    height: 1px;
+ 
    width: 100%;
+ 
    background-color: var(--color-border-subtle);
+ 
  }
+ 
</style>
+
+ 
<div class="header-container">
+ 
  <div class="left-section">
+ 
    {#if !$$slots.breadcrumbs}
+ 
      <Link
+ 
        ariaLabel="Home"
+ 
        route={{ resource: "nodes", params: undefined }}
+ 
        style="height: 1rem; display: flex; align-items: center;">
+ 
        <Logo />
+ 
      </Link>
+ 
    {/if}
+ 
    <slot name="breadcrumbs" />
+ 
  </div>
+
+ 
  <div class="right-section">
+ 
    <Popover popoverPositionTop="2.5rem" popoverPositionRight="0">
+ 
      <IconButton
+ 
        slot="toggle"
+ 
        let:toggle
+ 
        on:click={toggle}
+ 
        inline
+ 
        ariaLabel="Settings">
+ 
        <Icon name="settings" />
+ 
      </IconButton>
+
+ 
      <div
+ 
        slot="popover"
+ 
        style:display="flex"
+ 
        style:flex-direction="column"
+ 
        style:gap="0.75rem"
+ 
        style:align-items="flex-start">
+ 
        <Settings />
+ 
        <div class="divider"></div>
+ 
        <Help />
+ 
      </div>
+ 
    </Popover>
+ 
  </div>
+ 
</div>
modified src/components/HoverPopover.svelte
@@ -17,9 +17,9 @@
    display: inline-block;

  }

  .popover {
- 
    background: var(--color-background-float);
- 
    border-radius: var(--border-radius-regular);
- 
    border: 1px solid var(--color-border-hint);
+ 
    background: var(--color-surface-subtle);
+ 
    border-radius: var(--border-radius-md);
+ 
    border: 1px solid var(--color-border-subtle);

    padding: 1rem;

    box-shadow: var(--elevation-low);

    position: absolute;
modified src/components/Icon.svelte
@@ -2,48 +2,50 @@


<script lang="ts">

  import { unreachable } from "@app/lib/utils";
+ 


  export let name:

    | "activity"

    | "archive"
- 
    | "arrow-box-up-right"
- 
    | "arrow-reply"
+ 
    | "arrow-left"
+ 
    | "arrow-up"
+ 
    | "attach"

    | "badge"
- 
    | "bookmark-off"
- 
    | "bookmark-on"
+ 
    | "bookmark"
+ 
    | "bookmark-fill"

    | "branch"
- 
    | "brush"
- 
    | "chat"
- 
    | "checkbox-checked"
- 
    | "checkbox-unchecked"

    | "checkmark"
+ 
    | "checkout"

    | "chevron-down"

    | "chevron-left"

    | "chevron-left-right"

    | "chevron-right"

    | "chevron-up"
- 
    | "clipboard"
- 
    | "collapse"
+ 
    | "clock"
+ 
    | "code"
+ 
    | "collapse-vertical"
+ 
    | "comment"

    | "commit"
+ 
    | "copy"

    | "cross"

    | "cursor"
- 
    | "delegate"

    | "device"

    | "diff"
+ 
    | "disconnect"
+ 
    | "document"

    | "download"

    | "edit"

    | "ellipsis"
- 
    | "exclamation-circle"
- 
    | "expand"
- 
    | "eye-open"
- 
    | "face"
- 
    | "file"
+ 
    | "ellipsis-vertical"
+ 
    | "emoji"
+ 
    | "expand-vertical"
+ 
    | "eye"
+ 
    | "eye-slash"

    | "folder"

    | "folder-open"

    | "git"
- 
    | "globe"
+ 
    | "guide"

    | "help"
- 
    | "home"
- 
    | "info"
+ 
    | "hourglass"

    | "issue"

    | "key"

    | "link"
@@ -51,155 +53,83 @@
    | "logo"

    | "menu"

    | "moon"
- 
    | "more"
- 
    | "network"
- 
    | "offline"
- 
    | "online"
+ 
    | "open-external"

    | "patch"
+ 
    | "pin-filled"
+ 
    | "pin-hollow"
+ 
    | "play"

    | "plus"
- 
    | "quorum"
- 
    | "repo"
- 
    | "seedling"
+ 
    | "question-mark"
+ 
    | "reply"
+ 
    | "repository"
+ 
    | "review"
+ 
    | "seed"
+ 
    | "seed-filled"

    | "settings"
- 
    | "share"
+ 
    | "stop"

    | "sun"
- 
    | "user";
+ 
    | "trash";

</script>



<style>

  svg {
- 
    display: inline-flex;
+ 
    display: flex;

    flex-shrink: 0;

  }

</style>
- 
<!-- svelte-ignore a11y-click-events-have-key-events -->
- 
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
- 
<svg
- 
  role="img"
- 
  on:click
- 
  width="16"
- 
  height="16"
- 
  fill="currentColor"
- 
  viewBox="0 0 16 16">
+ 
<svg role="img" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">

  {#if name === "activity"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M2.76032 2.0563C2.56506 1.86104 2.24848 1.86104 2.05322 2.0563C1.85795 2.25156 1.85795 2.56815 2.05322 2.76341L3.41389 4.12408C2.52941 5.16972 1.99551 6.52284 1.99551 8C1.99551 11.3162 4.68381 14.0045 8 14.0045C11.3162 14.0045 14.0045 11.3162 14.0045 8C14.0045 4.68381 11.3162 1.99551 8 1.99551C7.13343 1.99551 6.30847 2.1794 5.5631 2.51075C5.31076 2.62293 5.19714 2.91842 5.30932 3.17075C5.42149 3.42308 5.71698 3.5367 5.96931 3.42453C6.58928 3.14892 7.27606 2.99551 8 2.99551C10.7639 2.99551 13.0045 5.2361 13.0045 8C13.0045 10.7639 10.7639 13.0045 8 13.0045C5.2361 13.0045 2.99551 10.7639 2.99551 8C2.99551 6.79876 3.41827 5.69689 4.12393 4.83412L4.84861 5.5588C4.32565 6.23309 4.01382 7.08042 4.01382 8C4.01382 10.2015 5.7985 11.9862 8 11.9862C10.2015 11.9862 11.9862 10.2015 11.9862 8C11.9862 5.79849 10.2015 4.01382 8 4.01382C7.6541 4.01382 7.31777 4.058 6.99668 4.14128C6.72939 4.21061 6.5689 4.4835 6.63823 4.7508C6.70756 5.01809 6.98045 5.17858 7.24775 5.10925C7.48754 5.04705 7.73952 5.01382 8 5.01382C9.64923 5.01382 10.9862 6.35078 10.9862 8C10.9862 9.64922 9.64923 10.9862 8 10.9862C6.35078 10.9862 5.01382 9.64922 5.01382 8C5.01382 7.35653 5.21697 6.76101 5.56321 6.27341L6.29783 7.00802C6.12778 7.29932 6.03009 7.63844 6.03009 8C6.03009 9.08795 6.91205 9.96991 8 9.96991C9.08794 9.96991 9.9699 9.08795 9.9699 8C9.9699 7.27462 9.57756 6.64143 8.9959 6.30011C8.75773 6.16035 8.45137 6.24013 8.31161 6.47829C8.17185 6.71646 8.25163 7.02282 8.48979 7.16258C8.77813 7.33178 8.9699 7.64377 8.9699 8C8.9699 8.53567 8.53566 8.96991 8 8.96991C7.46433 8.96991 7.03009 8.53567 7.03009 8C7.03009 7.87888 7.05216 7.76309 7.09262 7.6563C7.24121 7.67561 7.39681 7.62819 7.51096 7.51404C7.70622 7.31878 7.70622 7.0022 7.51096 6.80694L2.76032 2.0563Z" />
+ 
      d="M9.97559 11.7139L11.5361 7.81445L11.6611 7.5H15V8.5H12.3379L10.0244 14.2861L5.97266 5.1709L4.44727 8.22363L4.30859 8.5H1V7.5H3.69141L6.02637 2.8291L9.97559 11.7139Z" />

  {:else if name === "archive"}
- 
    <path d="M2 3H3L3 13H2L2 3Z" />
- 
    <path d="M13 3L14 3L14 13H13L13 3Z" />
- 
    <path d="M5 8L6 8V9H5V8Z" />
- 
    <path d="M10 8H11V9H10V8Z" />
- 
    <path d="M6 9L10 9L10 10H6V9Z" />
- 
    <path d="M3 13L13 13V14L3 14L3 13Z" />
- 
    <path d="M3 2L13 2V3L3 3L3 2Z" />
- 
    <path d="M6 7H10V8L6 8V7Z" />
- 
    <path d="M2 5L14 5V6L2 6V5Z" />
- 
  {:else if name === "arrow-box-up-right"}
- 
    <path
- 
      fill-rule="evenodd"
- 
      d="M8 3a.5.5 0 000 1h3.293l-2 2H3.217C2.545 6 2 6.545 2 7.217v5.566C2 13.455 2.545 14 3.217 14h5.566C9.455 14 10 13.455 10 12.783V8.609a.522.522 0 10-1.043 0v4.174a.174.174 0 01-.174.174H3.217a.174.174 0 01-.174-.174V7.217c0-.096.078-.174.174-.174H8.25L6.146 9.146a.5.5 0 10.708.708L12 4.707V8a.5.5 0 001 0V3.5a.5.5 0 00-.5-.5H8z"
- 
      clip-rule="evenodd">
- 
    </path>
- 
  {:else if name === "arrow-reply"}
- 
    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M2.87128 8.85806C2.89568 8.91703 2.93185 8.97228 2.97979 9.02022L6.31312 12.3536C6.50839 12.5488 6.82497 12.5488 7.02023 12.3536C7.21549 12.1583 7.21549 11.8417 7.02023 11.6464L4.54045 9.16667H12C12.6443 9.16667 13.1667 8.64433 13.1667 8V4C13.1667 3.72386 12.9428 3.5 12.6667 3.5C12.3905 3.5 12.1667 3.72386 12.1667 4V8C12.1667 8.09205 12.0921 8.16667 12 8.16667H4.54045L7.02023 5.68689C7.21549 5.49162 7.21549 5.17504 7.02023 4.97978C6.82497 4.78452 6.50839 4.78452 6.31312 4.97978L2.97979 8.31311C2.88292 8.40998 2.83411 8.53671 2.83335 8.66367C2.83335 8.66467 2.83334 8.66567 2.83334 8.66667C2.83334 8.66767 2.83335 8.66867 2.83335 8.66967C2.83374 8.73637 2.8472 8.79997 2.87128 8.85806Z" />
- 
  {:else if name === "badge"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M10.0435 6.41199C10.0435 7.51656 9.14803 8.41199 8.04346 8.41199C6.93889 8.41199 6.04346 7.51656 6.04346 6.41199C6.04346 5.30742 6.93889 4.41199 8.04346 4.41199C9.14803 4.41199 10.0435 5.30742 10.0435 6.41199ZM9.04346 6.41199C9.04346 6.96427 8.59574 7.41199 8.04346 7.41199C7.49117 7.41199 7.04346 6.96427 7.04346 6.41199C7.04346 5.8597 7.49117 5.41199 8.04346 5.41199C8.59574 5.41199 9.04346 5.8597 9.04346 6.41199Z" />
+ 
      d="M14.5 2.5V6H13.5V14.5H2.5V6H1.5V2.5H14.5ZM3.5 13.5H12.5V6H3.5V13.5ZM2.5 5H13.5V3.5H2.5V5Z" />
+ 
    <path d="M11 7.5L11 8.5L5 8.5L5 7.5L11 7.5Z" />
+ 
  {:else if name === "arrow-left"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M8.70235 1.76514L9.06964 2.13244C9.25591 2.31871 9.50857 2.42335 9.77201 2.42335H11.0548C11.6034 2.42335 12.0481 2.86806 12.0481 3.41663V4.69945C12.0481 4.9629 12.1528 5.21555 12.3391 5.40182L12.8168 5.87958C13.2047 6.26748 13.2047 6.89641 12.8168 7.28428L12.3391 7.76207C12.1528 7.94834 12.0481 8.20099 12.0481 8.46441V9.43104C12.0481 9.78994 11.8577 10.1044 11.5725 10.2789L12.6676 12.9387C12.7421 13.1197 12.7034 13.3277 12.5686 13.4697C12.4338 13.6117 12.2281 13.6612 12.0435 13.5962L10.7832 13.1526L10.082 14.2898C9.98071 14.454 9.79344 14.5447 9.60178 14.5224C9.41011 14.5001 9.24873 14.3687 9.18792 14.1856L8.33941 11.6302C8.12056 11.7095 7.87942 11.7095 7.66057 11.6301L6.81206 14.1856C6.75125 14.3687 6.58987 14.5001 6.3982 14.5224C6.20654 14.5447 6.01927 14.454 5.91799 14.2898L5.21675 13.1526L3.95651 13.5962C3.77184 13.6612 3.5662 13.6117 3.4314 13.4697C3.2966 13.3277 3.25783 13.1197 3.33237 12.9387L4.44826 10.2286C4.20486 10.0475 4.04717 9.75769 4.04717 9.43104V8.55968C4.04717 8.29627 3.9425 8.04361 3.75623 7.85734L3.1832 7.28428C2.7953 6.89641 2.7953 6.26748 3.1832 5.87958L3.75623 5.30655C3.9425 5.12028 4.04717 4.86762 4.04717 4.60418V3.41663C4.04717 2.86806 4.49185 2.42335 5.04045 2.42335H6.228C6.49142 2.42335 6.74407 2.31871 6.93034 2.13244L7.29764 1.76514C7.68554 1.37724 8.31447 1.37724 8.70235 1.76514ZM8.00001 2.46748L8.3673 2.83478C8.73984 3.20732 9.24515 3.41663 9.77201 3.41663H11.0548V4.69945C11.0548 5.22634 11.2641 5.73162 11.6367 6.10416L12.1145 6.58194L11.6367 7.0597C11.2641 7.43227 11.0548 7.93755 11.0548 8.46441V9.43104H10.0882C9.56134 9.43104 9.05606 9.64032 8.68352 10.0129L8.00001 10.6964L7.31649 10.0129C6.94392 9.64032 6.43864 9.43104 5.91178 9.43104H5.04045V8.55968C5.04045 8.03282 4.83114 7.52754 4.4586 7.15497L3.88554 6.58194L4.4586 6.00889C4.83114 5.63635 5.04045 5.13107 5.04045 4.60418V3.41663H6.228C6.75486 3.41663 7.26014 3.20732 7.63271 2.83478L8.00001 2.46748ZM5.44185 10.4243L4.6733 12.2909L5.26446 12.0827C5.48483 12.0052 5.72948 12.0917 5.8521 12.2905L6.20478 12.8625L6.84207 10.9432L6.61412 10.7152C6.42785 10.529 6.17523 10.4243 5.91178 10.4243H5.44185ZM9.15791 10.9432L9.7952 12.8625L10.1479 12.2905C10.2705 12.0917 10.5152 12.0052 10.7355 12.0827L11.3267 12.2909L10.5581 10.4243H10.0882C9.82479 10.4243 9.57213 10.529 9.38586 10.7152L9.15791 10.9432Z" />
- 
  {:else if name === "bookmark-on"}
+ 
      d="M5.20703 8.5L7.70703 11L7 11.707L3.29297 8L7 4.29297L7.70703 5L5.20703 7.5L12.5 7.5L12.5 8.5L5.20703 8.5Z" />
+ 
  {:else if name === "arrow-up"}

    <path
- 
      d="M4 2C3.44772 2 3 2.44772 3 3V13C3 13.4247 3.26825 13.8031 3.66899 13.9436C4.06974 14.0842 4.51557 13.9563 4.78087 13.6247L8 9.60078L11.2191 13.6247C11.4844 13.9563 11.9303 14.0842 12.331 13.9436C12.7318 13.8031 13 13.4247 13 13V3C13 2.44772 12.5523 2 12 2H4Z" />
- 
  {:else if name === "bookmark-off"}
+ 
      d="M8.5 12.5L7.5 12.5L7.5 5.20703L5 7.70703L4.29297 7L8 3.29297L11.707 7L11 7.70703L8.5 5.20703L8.5 12.5Z" />
+ 
  {:else if name === "attach"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M3 3C3 2.44772 3.44772 2 4 2H12C12.5523 2 13 2.44772 13 3V13C13 13.4247 12.7318 13.8031 12.331 13.9436C11.9303 14.0842 11.4844 13.9563 11.2191 13.6247L8 9.60078L4.78087 13.6247C4.51557 13.9563 4.06974 14.0842 3.66899 13.9436C3.26825 13.8031 3 13.4247 3 13V3ZM4 3H12V13L8.78087 8.97609C8.38054 8.47568 7.61946 8.47568 7.21913 8.97609L4 13V3Z" />
- 
  {:else if name === "branch"}
- 
    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M11.5 2.22668C11.7761 2.22668 12 2.45054 12 2.72668V8.5C12 9.32843 11.3284 10 10.5 10H5.98108C5.70494 10 5.48108 9.77614 5.48108 9.5C5.48108 9.22386 5.70494 9 5.98108 9H10.5C10.7761 9 11 8.77614 11 8.5V2.72668C11 2.45054 11.2239 2.22668 11.5 2.22668Z" />
- 
    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M4.5 8.95271C4.19774 8.95271 3.95271 9.19774 3.95271 9.5C3.95271 9.80226 4.19774 10.0473 4.5 10.0473C4.80226 10.0473 5.04729 9.80226 5.04729 9.5C5.04729 9.19774 4.80226 8.95271 4.5 8.95271ZM3 9.5C3 8.67157 3.67157 8 4.5 8C5.32843 8 6 8.67157 6 9.5C6 10.3284 5.32843 11 4.5 11C3.67157 11 3 10.3284 3 9.5Z" />
- 
    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M4.5 2C4.77614 2 5 2.22386 5 2.5L5 8.17142C5 8.44756 4.77614 8.67142 4.5 8.67142C4.22386 8.67142 4 8.44756 4 8.17142L4 2.5C4 2.22386 4.22386 2 4.5 2Z" />
- 
    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M4.5 11C4.77614 11 5 10.2442 5 10.5455L5 13.4545C5 13.7558 4.77614 14 4.5 14C4.22386 14 4 13.7558 4 13.4545L4 10.5455C4 10.2442 4.22386 11 4.5 11Z" />
+ 
      d="M7.89634 2.39647C9.0581 1.23471 10.9416 1.23471 12.1034 2.39647C13.2651 3.55823 13.2651 5.44174 12.1034 6.6035L7.35337 11.3535C6.60582 12.101 5.39388 12.101 4.64634 11.3535C3.89879 10.606 3.89879 9.39401 4.64634 8.64647L8.64634 4.64647L9.35337 5.3535L5.35337 9.3535C4.99634 9.71052 4.99634 10.2894 5.35337 10.6465C5.71039 11.0035 6.28931 11.0035 6.64634 10.6465L11.3963 5.89647C12.1676 5.12523 12.1676 3.87473 11.3963 3.1035C10.6251 2.33226 9.3746 2.33226 8.60337 3.1035L3.85337 7.8535C2.66792 9.03895 2.66792 10.961 3.85337 12.1465C5.03882 13.3319 6.96089 13.3319 8.14634 12.1465L12.6463 7.64647L13.3534 8.3535L8.85337 12.8535C7.27739 14.4295 4.72231 14.4295 3.14634 12.8535C1.57036 11.2775 1.57036 8.72244 3.14634 7.14647L7.89634 2.39647Z" />
+ 
  {:else if name === "badge"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M13.8725 4.85251C13.6772 5.04777 13.3606 5.04777 13.1654 4.85251L11.5189 3.20606L9.87247 4.85251C9.67721 5.04777 9.36063 5.04777 9.16537 4.85251C8.97011 4.65724 8.97011 4.34066 9.16537 4.1454L11.1654 2.1454C11.3606 1.95014 11.6772 1.95014 11.8725 2.1454L13.8725 4.1454C14.0677 4.34066 14.0677 4.65724 13.8725 4.85251Z" />
- 
  {:else if name === "brush"}
+ 
      d="M4.64602 8.34829L5.35313 7.64118L7.00488 9.29294L10.6613 5.63656L11.3684 6.34367L7.00488 10.7072L4.64602 8.34829Z" />

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M3.5 2.75C3.5 2.19772 3.94772 1.75 4.5 1.75H11.5C12.0523 1.75 12.5 2.19772 12.5 2.75V7.25H11.5V2.75L4.5 2.75V7.25H3.5V2.75Z" />
+ 
      d="M14.3125 4.06738L14.5625 4.21094V11.7891L14.3125 11.9326L8 15.5771L1.6875 11.9326L1.4375 11.7891V4.21094L1.6875 4.06738L8 0.422852L14.3125 4.06738ZM2.4375 4.78809V11.2109L8 14.4229L13.5625 11.2109V4.78809L8 1.57617L2.4375 4.78809Z" />
+ 
  {:else if name === "bookmark"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M4 7.75C4 8.30228 4.44772 8.75 5 8.75H6.14044C7.00888 8.75 7.69584 9.4852 7.63699 10.3516L7.47808 12.6914C7.45755 12.9936 7.69713 13.25 8 13.25C8.30287 13.25 8.54245 12.9936 8.52192 12.6914L8.36301 10.3516C8.30416 9.48521 8.99112 8.75 9.85956 8.75H11C11.5523 8.75 12 8.30228 12 7.75L4 7.75ZM3 7.25C3 6.97386 3.22386 6.75 3.5 6.75H12.5C12.7761 6.75 13 6.97386 13 7.25V7.75C13 8.85457 12.1046 9.75 11 9.75H9.85956C9.57008 9.75 9.34109 9.99507 9.36071 10.2839L9.51963 12.6237C9.57938 13.5035 8.88183 14.25 8 14.25C7.11817 14.25 6.42062 13.5035 6.48037 12.6237L6.63929 10.2839C6.65891 9.99507 6.42992 9.75 6.14044 9.75H5C3.89543 9.75 3 8.85457 3 7.75V7.25Z" />
+ 
      d="M3.5 2.5L12.5 2.5L12.5 15L8 11.626L3.5 15L3.5 2.5ZM8 10.375L11.5 13L11.5 3.5L4.5 3.5L4.5 13L8 10.375Z" />
+ 
  {:else if name === "bookmark-fill"}
+ 
    <path d="M12.5 2.5V15L8 11.625L3.5 15V2.5H12.5Z" />
+ 
  {:else if name === "branch"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M10.1667 4.91667L10.1667 2.25L11.1667 2.25L11.1667 4.91667C11.1667 5.19281 10.9428 5.41667 10.6667 5.41667C10.3905 5.41667 10.1667 5.19281 10.1667 4.91667Z" />
+ 
      d="M5 4C5 3.44772 4.55228 3 4 3C3.44772 3 3 3.44772 3 4C3 4.55228 3.44772 5 4 5V6C2.89543 6 2 5.10457 2 4C2 2.89543 2.89543 2 4 2C5.10457 2 6 2.89543 6 4C6 5.10457 5.10457 6 4 6V5C4.55228 5 5 4.55228 5 4Z" />

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M8.83331 3.58333L8.83331 2.25L9.83331 2.25L9.83331 3.58333C9.83331 3.85948 9.60946 4.08333 9.33331 4.08333C9.05717 4.08333 8.83331 3.85948 8.83331 3.58333Z" />
- 
  {:else if name === "chat"}
+ 
      d="M13 4C13 3.44772 12.5523 3 12 3C11.4477 3 11 3.44772 11 4C11 4.55228 11.4477 5 12 5V6C10.8954 6 10 5.10457 10 4C10 2.89543 10.8954 2 12 2C13.1046 2 14 2.89543 14 4C14 5.10457 13.1046 6 12 6V5C12.5523 5 13 4.55228 13 4Z" />

    <path
- 
      fill-rule="evenodd"
- 
      d="M3.5 3a.5.5 0 00-.5.5v6a.5.5 0 00.5.5h5.35A6.5 6.5 0 0113 11.497V3.5a.5.5 0 00-.5-.5h-9zM2 3.5A1.5 1.5 0 013.5 2h9A1.5 1.5 0 0114 3.5v9.143a.5.5 0 01-.845.362l-.512-.488A5.5 5.5 0 008.85 11H3.5A1.5 1.5 0 012 9.5v-6z"
- 
      clip-rule="evenodd">
- 
    </path>
+ 
      d="M5 12C5 11.4477 4.55228 11 4 11C3.44772 11 3 11.4477 3 12C3 12.5523 3.44772 13 4 13V14C2.89543 14 2 13.1046 2 12C2 10.8954 2.89543 10 4 10C5.10457 10 6 10.8954 6 12C6 13.1046 5.10457 14 4 14V13C4.55228 13 5 12.5523 5 12Z" />
+ 
    <path d="M4.5 5.5V10.5H3.5V5.5H4.5Z" />

    <path
- 
      fill-rule="evenodd"
- 
      d="M4 5.5a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm0 2a.5.5 0 01.5-.5h4.75a.5.5 0 010 1H4.5a.5.5 0 01-.5-.5z"
- 
      clip-rule="evenodd">
- 
    </path>
- 
  {:else if name === "checkbox-checked"}
+ 
      d="M12.5 5.00001V7.20705L10.707 9.00001H3.99995V8.00001H10.2929L11.5 6.79298V5.00001H12.5Z" />
+ 
  {:else if name === "checkmark"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2ZM13.8107 3.5855C14.134 3.13778 14.0332 2.51269 13.5855 2.18933C13.1378 1.86598 12.5127 1.9668 12.1893 2.41452L6.41921 10.4039L3.74742 7.39815C3.3805 6.98537 2.74843 6.94818 2.33565 7.3151C1.92286 7.68202 1.88568 8.31409 2.2526 8.72688L5.7526 12.6644C5.95412 12.8911 6.24764 13.0141 6.55057 12.9987C6.8535 12.9834 7.1331 12.8314 7.31069 12.5855L13.8107 3.5855Z" />
- 
  {:else if name === "checkbox-unchecked"}
+ 
      d="M3 7.29297L6 10.293L13 3.29297L13.707 4L6 11.707L2.29297 8L3 7.29297Z" />
+ 
  {:else if name === "checkout"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M14 1H2C1.44772 1 1 1.44772 1 2V14C1 14.5523 1.44772 15 2 15H14C14.5523 15 15 14.5523 15 14V2C15 1.44772 14.5523 1 14 1ZM2 0C0.895431 0 0 0.895431 0 2V14C0 15.1046 0.895431 16 2 16H14C15.1046 16 16 15.1046 16 14V2C16 0.895431 15.1046 0 14 0H2Z" />
- 
  {:else if name === "checkmark"}
+ 
      d="M9 4C9 3.44772 8.55228 3 8 3C7.44772 3 7 3.44772 7 4C7 4.55228 7.44772 5 8 5V6C6.89543 6 6 5.10457 6 4C6 2.89543 6.89543 2 8 2C9.10457 2 10 2.89543 10 4C10 5.10457 9.10457 6 8 6V5C8.55228 5 9 4.55228 9 4Z" />

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M12.748 3.06363C12.9877 3.19578 13.071 3.49038 12.934 3.72165L7.86936 12.2708C7.37865 13.0992 6.20572 13.2507 5.50635 12.5761L2.14645 9.3352C1.95118 9.14686 1.95118 8.84149 2.14645 8.65315C2.34171 8.46481 2.65829 8.46481 2.85355 8.65315L6.21345 11.894C6.44658 12.1189 6.83755 12.0684 7.00112 11.7923L12.0658 3.24309C12.2028 3.01182 12.5082 2.93148 12.748 3.06363Z" />
+ 
      d="M7.5 5L8.5 5L8.5 9.29297L10 7.79297L10.707 8.5L8 11.207L5.29297 8.5L6 7.79297L7.5 9.29297L7.5 5Z" />
+ 
    <path d="M3.5 10V12.5H12.5V10H13.5V13.5H2.5V10H3.5Z" />

  {:else if name === "chevron-down"}

    <path
- 
      fill-rule="evenodd"
- 
      d="M12.837 5.15a.49.49 0 010 .73L9.286 9.727a1.76 1.76 0 01-2.357 0L3.163 5.88a.489.489 0 010-.728.587.587 0 01.785 0L7.714 9A.587.587 0 008.5 9l3.552-3.85a.587.587 0 01.785 0z"
- 
      clip-rule="evenodd">
- 
    </path>
+ 
      d="M4 5.29297L8 9.29297L12 5.29297L12.707 6L8 10.707L3.29297 6L4 5.29297Z" />

  {:else if name === "chevron-left"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M10.4396 12.4278C10.2385 12.6448 9.91236 12.6448 9.71121 12.4278L5.86207 8.87619C5.25861 8.22532 5.25861 7.17004 5.86207 6.51917L9.71121 2.75323C9.91236 2.53628 10.2385 2.53628 10.4397 2.75323C10.6408 2.97019 10.6408 3.32195 10.4397 3.53891L6.59052 7.30484C6.38936 7.5218 6.38936 7.87356 6.59052 8.09051L10.4396 11.6421C10.6408 11.8591 10.6408 12.2108 10.4396 12.4278Z" />
+ 
      d="M10 3.29297L10.707 4L6.70703 8L10.707 12L10 12.707L5.29297 8L10 3.29297Z" />

  {:else if name === "chevron-left-right"}

    <path

      fill-rule="evenodd"
@@ -208,429 +138,261 @@
    </path>

  {:else if name === "chevron-right"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M5.81752 3.16272C6.01868 2.94576 6.34481 2.94576 6.54597 3.16272L10.2141 6.65876C10.8175 7.30964 10.8175 8.36491 10.2141 9.01579L6.54597 12.8373C6.34481 13.0542 6.01868 13.0542 5.81752 12.8373C5.61637 12.6203 5.61637 12.2686 5.81752 12.0516L9.48562 8.23011C9.68677 8.01315 9.68677 7.6614 9.48562 7.44444L5.81752 3.94839C5.61637 3.73143 5.61637 3.37968 5.81752 3.16272Z" />
+ 
      d="M7 3.29297L11.707 8L7 12.707L6.29297 12L10.29297 8L6.29297 4L7 3.29297Z" />

  {:else if name === "chevron-up"}

    <path
- 
      fill-rule="evenodd"
- 
      d="M3.163 9.85a.489.489 0 010-.73l3.496-3.667a1.76 1.76 0 012.357 0l3.821 3.668a.49.49 0 010 .728.587.587 0 01-.785 0L8.23 6.181a.587.587 0 00-.786 0L3.948 9.849a.587.587 0 01-.785 0z"
- 
      clip-rule="evenodd">
- 
    </path>
- 
  {:else if name === "clipboard"}
+ 
      d="M8 5.29297L12.707 10L12 10.707L8 6.70703L4 10.707L3.29297 10L8 5.29297Z" />
+ 
  {:else if name === "clock"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M5 3.5C5 2.67157 5.67157 2 6.5 2H12.5C13.3284 2 14 2.67157 14 3.5V9.5C14 10.3284 13.3284 11 12.5 11H11V12.5C11 13.3284 10.3284 14 9.5 14H3.5C2.67157 14 2 13.3284 2 12.5V6.5C2 5.67157 2.67157 5 3.5 5H5V3.5ZM5 6H3.5C3.22386 6 3 6.22386 3 6.5V12.5C3 12.7761 3.22386 13 3.5 13H9.5C9.77614 13 10 12.7761 10 12.5V11H6.5C5.67157 11 5 10.3284 5 9.5V6ZM6.5 10C6.22386 10 6 9.77614 6 9.5V3.5C6 3.22386 6.22386 3 6.5 3H12.5C12.7761 3 13 3.22386 13 3.5V9.5C13 9.77614 12.7761 10 12.5 10H6.5Z" />
- 
  {:else if name === "collapse"}
+ 
      d="M13.5 8C13.5 4.96243 11.0376 2.5 8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8ZM14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8Z" />
+ 
    <path d="M8 4V8H11V9H7V4H8Z" />
+ 
  {:else if name === "code"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M4.31307 13.3536C4.11781 13.1583 4.11781 12.8417 4.31307 12.6464L7.175 9.78452C7.63061 9.32891 8.36931 9.32891 8.82492 9.78452L11.6868 12.6464C11.8821 12.8417 11.8821 13.1583 11.6868 13.3536C11.4916 13.5488 11.175 13.5488 10.9797 13.3536L8.11781 10.4916C8.05272 10.4265 7.9472 10.4265 7.88211 10.4916L5.02018 13.3536C4.82492 13.5488 4.50833 13.5488 4.31307 13.3536ZM4.31307 3.64645C4.50833 3.45118 4.82492 3.45118 5.02018 3.64645L7.88211 6.50838C7.9472 6.57346 8.05272 6.57346 8.11781 6.50838L10.9797 3.64645C11.175 3.45118 11.4916 3.45118 11.6868 3.64645C11.8821 3.84171 11.8821 4.15829 11.6868 4.35355L8.82492 7.21548C8.3693 7.6711 7.63061 7.67109 7.175 7.21548L4.31307 4.35355C4.11781 4.15829 4.11781 3.84171 4.31307 3.64645Z" />
+ 
      d="M10 3.29297L14.707 8L10 12.707L9.29297 12L13.293 8L9.29297 4L10 3.29297Z" />
+ 
    <path
+ 
      d="M6 3.29297L6.70703 4L2.70703 8L6.70703 12L6 12.707L1.29297 8L6 3.29297Z" />
+ 
  {:else if name === "collapse-vertical"}
+ 
    <path
+ 
      d="M7.5 4.79297L5.5 2.79297L4.79297 3.5L8 6.70703L11.207 3.5L10.5 2.79297L8.5 4.79297V0.5H7.5V4.79297Z" />
+ 
    <path
+ 
      d="M7.5 11.207L5.5 13.207L4.79297 12.5L8 9.29297L11.207 12.5L10.5 13.207L8.5 11.207V15.5H7.5V11.207Z" />
+ 
    <path d="M14 7.5L14 8.5L2 8.5L2 7.5L14 7.5Z" />
+ 
  {:else if name === "comment"}
+ 
    <path
+ 
      d="M13.5 2.5V11.5H10.207L8 13.707L5.79297 11.5H2.5V2.5H13.5ZM3.5 10.5H6.20703L8 12.293L9.79297 10.5H12.5V3.5H3.5V10.5Z" />
+ 
    <path d="M11 7.5V8.5H5V7.5H11Z" />
+ 
    <path d="M11 5.5V6.5H5V5.5H11Z" />

  {:else if name === "commit"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M7.54485 0.955719C7.82099 0.955719 8.04485 1.17958 8.04485 1.45572V3.99071C9.76553 4.23367 11.0891 5.71226 11.0891 7.5C11.0891 9.28774 9.76553 10.7663 8.04485 11.0093V13.5443C8.04485 13.8204 7.82099 14.0443 7.54485 14.0443C7.2687 14.0443 7.04485 13.8204 7.04485 13.5443L7.04485 11.0093C5.32416 10.7663 4.00056 9.28774 4.00056 7.5C4.00056 5.71226 5.32416 4.23367 7.04485 3.99071V1.45572C7.04485 1.17958 7.2687 0.955719 7.54485 0.955719ZM7.54485 10.0443C8.95001 10.0443 10.0891 8.90517 10.0891 7.5C10.0891 6.09483 8.95001 4.95572 7.54485 4.95572C6.13968 4.95572 5.00056 6.09483 5.00056 7.5C5.00056 8.90517 6.13968 10.0443 7.54485 10.0443Z" />
+ 
      d="M8 4.5C9.7632 4.5 11.2212 5.8039 11.4639 7.5H15V8.5H11.4639C11.2212 10.1961 9.7632 11.5 8 11.5C6.2368 11.5 4.77879 10.1961 4.53613 8.5H1V7.5H4.53613C4.77879 5.8039 6.2368 4.5 8 4.5ZM8 5.5C6.61929 5.5 5.5 6.61929 5.5 8C5.5 9.38071 6.61929 10.5 8 10.5C9.38071 10.5 10.5 9.38071 10.5 8C10.5 6.61929 9.38071 5.5 8 5.5Z" />
+ 
  {:else if name === "copy"}
+ 
    <path d="M10.5 5.5V14.5H1.5V5.5H10.5ZM2.5 13.5H9.5V6.5H2.5V13.5Z" />
+ 
    <path d="M13.5 2.5V11.5H10V10.5H12.5V3.5H5.5V6H4.5V2.5H13.5Z" />

  {:else if name === "cross"}

    <path
- 
      fill-rule="evenodd"
- 
      d="M3.163 3.163a.556.556 0 01.785 0L8 7.214l4.052-4.051a.556.556 0 01.785.785L8.786 8l4.051 4.052a.556.556 0 01-.785.785L8 8.786l-4.052 4.051a.556.556 0 01-.785-.785L7.214 8 3.163 3.948a.556.556 0 010-.785z"
- 
      clip-rule="evenodd">
- 
    </path>
+ 
      d="M12.707 4L8.70605 8.00098L12.7051 12L11.998 12.707L7.99902 8.70801L4 12.707L3.29297 12L7.29199 8.00098L3.29297 4.00195L4 3.29492L7.99902 7.29395L12 3.29297L12.707 4Z" />

  {:else if name === "cursor"}

    <path

      fill-rule="evenodd"

      clip-rule="evenodd"

      d="M4.62672 2.32908C5.22095 2.00257 5.94947 2.15788 6.60157 2.60621C6.61264 2.61382 6.62339 2.62186 6.6338 2.63034L12.6308 7.50811C13.4117 8.14331 13.0756 9.40302 12.082 9.56471L10.5513 9.8138L11.7818 12.1598C12.0808 12.7299 11.8615 13.4344 11.2919 13.7341C11.2915 13.7344 11.291 13.7346 11.2905 13.7349L10.3375 14.2411L10.3352 14.2424C9.76458 14.5417 9.05939 14.3217 8.7601 13.7511L7.53168 11.4091L6.48794 12.5074C5.79339 13.2383 4.56132 12.8035 4.47941 11.7986L3.85193 4.09987C3.85193 4.09991 3.85192 4.09982 3.85193 4.09987C3.79086 3.35282 4.02701 2.6586 4.62672 2.32908ZM5.10827 3.2055C4.98313 3.27426 4.8056 3.49265 4.8486 4.01834L5.47611 11.7173C5.48781 11.8609 5.66382 11.923 5.76304 11.8186L7.28772 10.2141C7.39881 10.0972 7.55945 10.0411 7.71916 10.0633C7.87888 10.0856 8.01806 10.1835 8.09296 10.3263L9.64568 13.2866C9.68829 13.3679 9.78851 13.3993 9.86988 13.3572C9.8696 13.3574 9.87015 13.3571 9.86988 13.3572L10.8237 12.8505L10.826 12.8493C10.9075 12.8065 10.939 12.7058 10.8962 12.6243L9.34349 9.66396C9.26883 9.52163 9.26715 9.35209 9.33896 9.2083C9.41078 9.06452 9.54733 8.96402 9.70597 8.9382L11.9214 8.57769C12.0633 8.55459 12.1114 8.37463 11.9998 8.28389L6.01914 3.41941C5.5398 3.09522 5.2375 3.13449 5.10827 3.2055Z" />
+ 
  {:else if name === "device"}
+ 
    <path
+ 
      d="M13.5 10.5L2.5 10.5L2.5 2.5L13.5 2.5L13.5 10.5ZM3.5 8.5L3.5 9.5L12.5 9.5L12.5 8.5L3.5 8.5ZM3.5 3.5L3.5 7.5L12.5 7.5L12.5 3.5L3.5 3.5Z" />
+ 
    <path d="M7.5 9.5H8.5V12.5H10.5V13.5H5.5V12.5H7.5V9.5Z" />

  {:else if name === "diff"}

    <path
- 
      d="M8 4.5C8 4.22386 8.22386 4 8.5 4C8.77614 4 9 4.22386 9 4.5V6H10.5C10.7761 6 11 6.22386 11 6.5C11 6.77614 10.7761 7 10.5 7H9V8.5C9 8.77614 8.77614 9 8.5 9C8.22386 9 8 8.77614 8 8.5V7H6.5C6.22386 7 6 6.77614 6 6.5C6 6.22386 6.22386 6 6.5 6H8V4.5Z" />
+ 
      d="M13.5 1.5V14.5H2.5V1.5H13.5ZM3.5 13.5H12.5V2.5H3.5V13.5ZM10 10.5V11.5H6V10.5H10ZM8.5 4V5.5H10V6.5H8.5V8H7.5V6.5H6V5.5H7.5V4H8.5Z" />
+ 
  {:else if name === "disconnect"}

    <path
- 
      d="M11 11.5C11 11.2239 10.7761 11 10.5 11H6.5C6.22386 11 6 11.2239 6 11.5C6 11.7761 6.22386 12 6.5 12H10.5C10.7761 12 11 11.7761 11 11.5Z" />
+ 
      d="M2.5 2.5L9.5 2.5L9.5 5.5L8.5 5.5L8.5 3.5L3.5 3.5L3.5 12.5L8.5 12.5L8.5 10.5L9.5 10.5L9.5 13.5L2.5 13.5L2.5 2.5Z" />

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M3 3C3 1.89543 3.89543 1 5 1H12C13.1046 1 14 1.89543 14 3V13C14 14.1046 13.1046 15 12 15H5C3.89543 15 3 14.1046 3 13V3ZM5 2H12C12.5523 2 13 2.44772 13 3V13C13 13.5523 12.5523 14 12 14H5C4.44772 14 4 13.5523 4 13V3C4 2.44772 4.44772 2 5 2Z" />
+ 
      d="M6 7.5L12.793 7.5L10.6465 5.35352L11.3535 4.64648L14.707 8L11.3535 11.3535L10.6465 10.6465L12.793 8.5L6 8.5L6 7.5Z" />
+ 
  {:else if name === "document"}
+ 
    <path
+ 
      d="M13.5 14.5L2.5 14.5L2.5 1.5L9.20703 1.5L13.5 5.79297L13.5 14.5ZM8.5 6.5L8.5 2.5L3.5 2.5L3.5 13.5L12.5 13.5L12.5 6.5L8.5 6.5ZM9.5 3.20703L9.5 5.5L11.793 5.5L9.5 3.20703Z" />

  {:else if name === "download"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M7 7.63851L7 3C7 2.72386 7.22386 2.5 7.5 2.5C7.77614 2.5 8 2.72386 8 3L8 7.71891L10.2789 6.09009C10.5086 5.92587 10.819 5.99243 10.9722 6.23876C11.1254 6.4851 11.0633 6.81792 10.8335 6.98214L8.38828 8.72991C7.88444 9.09003 7.22805 9.09003 6.72421 8.72991L4.27894 6.98214C4.04918 6.81792 3.9871 6.4851 4.14027 6.23876C4.29344 5.99243 4.60387 5.92587 4.83363 6.09009L7 7.63851ZM2.55624 8C2.2801 8 2.05624 8.22386 2.05624 8.5V12.5C2.05624 13.3284 2.72782 14 3.55624 14L11.5562 14C12.3847 14 13.0562 13.3284 13.0562 12.5V8.5C13.0562 8.22386 12.8324 8 12.5562 8C12.2801 8 12.0562 8.22386 12.0562 8.5V12.5C12.0562 12.7761 11.8324 13 11.5562 13L3.55624 13C3.2801 13 3.05624 12.7761 3.05624 12.5L3.05624 8.5C3.05624 8.22386 2.83239 8 2.55624 8Z" />
+ 
      d="M7.5 2.5H8.5V9.79297L11 7.29297L11.707 8L8 11.707L4.29297 8L5 7.29297L7.5 9.79297V2.5Z" />
+ 
    <path
+ 
      d="M3.5 11L3.5 13.5L12.5 13.5L12.5 11L13.5 11L13.5 14.5L2.5 14.5L2.5 11L3.5 11Z" />

  {:else if name === "edit"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M11.0856 3L13.914 5.82843L12.4998 7.24263L9.6714 4.4142L11.0856 3ZM8.9643 5.12131L3.28903 10.7966L3.00011 13.9139L6.11746 13.625L11.7927 7.94973L8.9643 5.12131ZM10.3785 2.29289C10.769 1.90237 11.4022 1.90237 11.7927 2.29289L14.6212 5.12132C15.0117 5.51184 15.0117 6.14501 14.6212 6.53553L6.82457 14.3321C6.65957 14.4971 6.44208 14.5992 6.20975 14.6207L3.09239 14.9097C2.46913 14.9674 1.94661 14.4449 2.00437 13.8217L2.2933 10.7043C2.31483 10.472 2.41693 10.2545 2.58192 10.0895L10.3785 2.29289Z" />
+ 
      d="M14.707 5L6.20703 13.5H2.5V9.79297L11 1.29297L14.707 5ZM3.5 10.207V12.5H5.79297L11.293 7L9 4.70703L3.5 10.207ZM9.70703 4L12 6.29297L13.293 5L11 2.70703L9.70703 4Z" />

  {:else if name === "ellipsis"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M4 9C4.55228 9 5 8.55229 5 8C5 7.44772 4.55228 7 4 7C3.44772 7 3 7.44772 3 8C3 8.55229 3.44772 9 4 9ZM9 8C9 8.55229 8.55228 9 8 9C7.44772 9 7 8.55229 7 8C7 7.44772 7.44772 7 8 7C8.55228 7 9 7.44772 9 8ZM13 8C13 8.55229 12.5523 9 12 9C11.4477 9 11 8.55229 11 8C11 7.44772 11.4477 7 12 7C12.5523 7 13 7.44772 13 8Z" />
- 
  {:else if name === "exclamation-circle"}
- 
    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M8 5.16667C7.60055 5.16667 7.29371 5.52046 7.3502 5.91589L7.82831 9.26263C7.86736 9.536 7.67741 9.78926 7.40404 9.82831C7.13067 9.86737 6.87741 9.67742 6.83836 9.40405L6.36025 6.05731C6.2177 5.05945 6.992 4.16667 8 4.16667C9.00799 4.16667 9.7823 5.05945 9.63974 6.05731L9.16164 9.40405C9.12259 9.67742 8.86932 9.86737 8.59595 9.82831C8.32259 9.78926 8.13264 9.536 8.17169 9.26263L8.64979 5.91589C8.70628 5.52046 8.39945 5.16667 8 5.16667Z" />
- 
    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8Z" />
+ 
      d="M9 8C9 8.55228 8.55228 9 8 9C7.44772 9 7 8.55228 7 8C7 7.44772 7.44772 7 8 7C8.55228 7 9 7.44772 9 8Z" />

    <path
- 
      d="M8.66668 11.3333C8.66668 11.7015 8.3682 12 8.00001 12C7.63182 12 7.33334 11.7015 7.33334 11.3333C7.33334 10.9651 7.63182 10.6667 8.00001 10.6667C8.3682 10.6667 8.66668 10.9651 8.66668 11.3333Z" />
- 
  {:else if name === "expand"}
+ 
      d="M13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7C12.5523 7 13 7.44772 13 8Z" />

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M4.31313 9.64645C4.5084 9.45118 4.82498 9.45118 5.02024 9.64645L7.88217 12.5084C7.94726 12.5735 8.05278 12.5735 8.11787 12.5084L10.9798 9.64644C11.1751 9.45118 11.4916 9.45118 11.6869 9.64644C11.8822 9.84171 11.8822 10.1583 11.6869 10.3536L8.82498 13.2155C8.36937 13.6711 7.63067 13.6711 7.17506 13.2155L4.31313 10.3536C4.11787 10.1583 4.11787 9.84171 4.31313 9.64645ZM4.31313 6.35355C4.11787 6.15829 4.11787 5.84171 4.31313 5.64645L7.17506 2.78452C7.63067 2.3289 8.36937 2.3289 8.82498 2.78452L11.6869 5.64644C11.8822 5.84171 11.8822 6.15829 11.6869 6.35355C11.4916 6.54881 11.1751 6.54881 10.9798 6.35355L8.11787 3.49162C8.05278 3.42653 7.94726 3.42654 7.88217 3.49162L5.02024 6.35355C4.82498 6.54881 4.5084 6.54881 4.31313 6.35355Z" />
- 
  {:else if name === "eye-open"}
+ 
      d="M5 8C5 8.55228 4.55228 9 4 9C3.44772 9 3 8.55228 3 8C3 7.44772 3.44772 7 4 7C4.55228 7 5 7.44772 5 8Z" />
+ 
  {:else if name === "ellipsis-vertical"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M14.1652 7.9838C12.328 5.09942 10.2279 3.5 8.00013 3.5C5.77233 3.5 3.67224 5.09942 1.83502 7.9838C1.55994 8.41566 1.60375 8.98589 1.95654 9.36765C3.8457 11.4119 5.89216 12.5 8.00013 12.5C10.1081 12.5 12.1546 11.4119 14.0437 9.36765C14.3965 8.98589 14.4403 8.41566 14.1652 7.9838ZM2.67845 8.52103C4.4527 5.73552 6.29028 4.5 8.00013 4.5C9.70999 4.5 11.5476 5.73552 13.3218 8.52103C13.3571 8.57643 13.3486 8.64642 13.3093 8.68895C11.5368 10.6069 9.73773 11.5 8.00013 11.5C6.26253 11.5 4.46342 10.6069 2.69096 8.68895C2.65166 8.64642 2.64317 8.57643 2.67845 8.52103ZM6.50012 8C6.50012 7.17157 7.17169 6.5 8.00012 6.5C8.82855 6.5 9.50012 7.17157 9.50012 8C9.50012 8.82843 8.82855 9.5 8.00012 9.5C7.17169 9.5 6.50012 8.82843 6.50012 8ZM8.00012 5.5C6.61941 5.5 5.50012 6.61929 5.50012 8C5.50012 9.38071 6.61941 10.5 8.00012 10.5C9.38083 10.5 10.5001 9.38071 10.5001 8C10.5001 6.61929 9.38083 5.5 8.00012 5.5Z" />
- 
  {:else if name === "face"}
+ 
      d="M9 8C9 8.55228 8.55228 9 8 9C7.44772 9 7 8.55228 7 8C7 7.44772 7.44772 7 8 7C8.55228 7 9 7.44772 9 8Z" />

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M8 3C5.23857 3 3 5.23857 3 8C3 10.7615 5.23857 13 8 13C10.7615 13 13 10.7615 13 8C13 5.23857 10.7615 3 8 3ZM2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8Z" />
+ 
      d="M9 12C9 12.5523 8.55228 13 8 13C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11C8.55228 11 9 11.4477 9 12Z" />

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M4.93334 8.7C5.09902 8.47909 5.41243 8.43431 5.63334 8.6L5.90001 8.8C7.14445 9.73336 8.85557 9.73336 10.1 8.8L10.3667 8.59998C10.5877 8.43431 10.901 8.4791 11.0667 8.70002C11.2324 8.92095 11.1876 9.23435 10.9667 9.40002L10.7 9.59999C10.7 9.6 10.7 9.59998 10.7 9.59999C9.10002 10.8 6.9 10.8 5.30001 9.6C5.30001 9.6 5.30002 9.6 5.30001 9.6L5.03334 9.4C4.81243 9.23432 4.76766 8.92092 4.93334 8.7Z" />
+ 
      d="M9 4C9 4.55228 8.55228 5 8 5C7.44772 5 7 4.55228 7 4C7 3.44772 7.44772 3 8 3C8.55228 3 9 3.44772 9 4Z" />
+ 
  {:else if name === "emoji"}

    <path
- 
      d="M6.66667 7.33334C7.03486 7.33334 7.33333 7.03486 7.33333 6.66667C7.33333 6.29848 7.03486 6 6.66667 6C6.29848 6 6 6.29848 6 6.66667C6 7.03486 6.29848 7.33334 6.66667 7.33334Z" />
+ 
      d="M13.5 8C13.5 4.96243 11.0376 2.5 8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8ZM14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8Z" />

    <path
- 
      d="M9.33332 7.33334C9.70151 7.33334 9.99999 7.03486 9.99999 6.66667C9.99999 6.29848 9.70151 6 9.33332 6C8.96513 6 8.66666 6.29848 8.66666 6.66667C8.66666 7.03486 8.96513 7.33334 9.33332 7.33334Z" />
- 
  {:else if name === "file"}
+ 
      d="M11.2995 9.16699C11.1272 9.65421 10.8477 10.1021 10.4753 10.4746C9.81891 11.131 8.92795 11.5 7.9997 11.5C7.07155 11.4999 6.18139 11.1309 5.52509 10.4746C5.15257 10.102 4.87225 9.65437 4.69989 9.16699L5.64325 8.83301C5.76637 9.18123 5.96603 9.50144 6.23212 9.76758C6.70089 10.2363 7.33676 10.4999 7.9997 10.5C8.66274 10.5 9.29941 10.2364 9.76825 9.76758C10.0343 9.50148 10.234 9.18115 10.3571 8.83301L11.2995 9.16699Z" />

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M4.5 3.33329C4.5 3.24125 4.57462 3.16663 4.66667 3.16663H8.5898C8.79929 3.16663 9.0011 3.24553 9.15503 3.38762L11.2319 5.30473C11.4028 5.46249 11.5 5.68449 11.5 5.91707V12.6666C11.5 12.7587 11.4254 12.8333 11.3333 12.8333H4.66667C4.57462 12.8333 4.5 12.7587 4.5 12.6666V3.33329ZM4.66667 2.16663C4.02233 2.16663 3.5 2.68896 3.5 3.33329V12.6666C3.5 13.311 4.02233 13.8333 4.66667 13.8333H11.3333C11.9777 13.8333 12.5 13.311 12.5 12.6666V5.91707C12.5 5.40539 12.2862 4.91699 11.9102 4.56993L9.83331 2.65282C9.49466 2.34021 9.05068 2.16663 8.5898 2.16663H4.66667ZM6 4.16663C5.72386 4.16663 5.5 4.39048 5.5 4.66663C5.5 4.94277 5.72386 5.16663 6 5.16663H7.33333C7.60948 5.16663 7.83333 4.94277 7.83333 4.66663C7.83333 4.39048 7.60948 4.16663 7.33333 4.16663H6ZM6 6.83329C5.72386 6.83329 5.5 7.05715 5.5 7.33329C5.5 7.60944 5.72386 7.83329 6 7.83329H10C10.2761 7.83329 10.5 7.60944 10.5 7.33329C10.5 7.05715 10.2761 6.83329 10 6.83329H6ZM6 8.83329C5.72386 8.83329 5.5 9.05715 5.5 9.33329C5.5 9.60943 5.72386 9.83329 6 9.83329H8.66667C8.94281 9.83329 9.16667 9.60943 9.16667 9.33329C9.16667 9.05715 8.94281 8.83329 8.66667 8.83329H6ZM6 10.8333C5.72386 10.8333 5.5 11.0571 5.5 11.3333C5.5 11.6094 5.72386 11.8333 6 11.8333H9.33333C9.60948 11.8333 9.83333 11.6094 9.83333 11.3333C9.83333 11.0571 9.60948 10.8333 9.33333 10.8333H6Z" />
- 
  {:else if name === "folder"}
+ 
      d="M6.75 6.5C6.75 6.91421 6.41421 7.25 6 7.25C5.58579 7.25 5.25 6.91421 5.25 6.5C5.25 6.08579 5.58579 5.75 6 5.75C6.41421 5.75 6.75 6.08579 6.75 6.5Z" />

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M14.5 11.875c0 .69-.56 1.25-1.25 1.25H2.75c-.69 0-1.25-.56-1.25-1.25v-8.25c0-.69.56-1.25 1.25-1.25h4.036c.474 0 .907.268 1.119.691l.335.67a.25.25 0 00.224.139h4.786c.69 0 1.25.56 1.25 1.25v6.75zm-12-8.25a.25.25 0 01.25-.25h4.036a.25.25 0 01.224.138l.335.671a1.25 1.25 0 001.119.691h4.786a.25.25 0 01.25.25v1.268a1.99 1.99 0 00-1-.268h-10v-2.5zm0 3.5v4.75c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25v-3.75a1 1 0 00-1-1h-10z" />
- 
  {:else if name === "folder-open"}
+ 
      d="M10.75 6.5C10.75 6.91421 10.4142 7.25 10 7.25C9.58579 7.25 9.25 6.91421 9.25 6.5C9.25 6.08579 9.58579 5.75 10 5.75C10.4142 5.75 10.75 6.08579 10.75 6.5Z" />
+ 
  {:else if name === "expand-vertical"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M2.81 3.125a.25.25 0 00-.25.27l.635 8.25c.01.13.119.23.25.23h9.805v1H3.445a1.25 1.25 0 01-1.247-1.154l-.634-8.25A1.25 1.25 0 012.81 2.125h3.976c.474 0 .907.268 1.119.691l.335.67a.25.25 0 00.224.139h3.351a1.25 1.25 0 011.245 1.137l.143 1.568-.996.09-.143-1.568a.25.25 0 00-.249-.227H8.464a1.25 1.25 0 01-1.119-.691l-.335-.67a.25.25 0 00-.224-.139H2.81z" />
+ 
      d="M7.5 2.20703L5.5 4.20703L4.79297 3.5L8 0.292969L11.207 3.5L10.5 4.20703L8.5 2.20703V6.5H7.5V2.20703Z" />

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M3.672 6.97a1.25 1.25 0 011.24-1.095h8.238a1.25 1.25 0 011.24 1.405l-.562 4.5a1.25 1.25 0 01-1.24 1.095H3.585a.575.575 0 01-.57-.646l.657-5.259zm1.24-.095a.25.25 0 00-.248.219l-.598 4.781h8.522a.25.25 0 00.248-.219l.563-4.5a.25.25 0 00-.249-.281H4.912z" />
- 
  {:else if name === "git"}
+ 
      d="M7.5 13.793L5.5 11.793L4.79297 12.5L8 15.707L11.207 12.5L10.5 11.793L8.5 13.793V9.5H7.5V13.793Z" />
+ 
    <path d="M14 7.5L14 8.5L2 8.5L2 7.5L14 7.5Z" />
+ 
  {:else if name === "eye"}

    <path
- 
      d="M14.5354 8.22385L9.29616 2.98517C9.22442 2.9134 9.13924 2.85647 9.04549 2.81762C8.95173 2.77878 8.85125 2.75879 8.74977 2.75879C8.64829 2.75879 8.5478 2.77878 8.45405 2.81762C8.3603 2.85647 8.27512 2.9134 8.20337 2.98517L7.11545 4.07296L8.49527 5.4533C8.65748 5.398 8.83194 5.38926 8.99887 5.42808C9.1658 5.46689 9.31851 5.55171 9.43968 5.67291C9.56143 5.79488 9.64644 5.94862 9.68499 6.11659C9.72355 6.28457 9.71409 6.45999 9.65771 6.62285L10.9878 7.95329C11.1506 7.89668 11.326 7.88712 11.494 7.92571C11.662 7.9643 11.8158 8.04947 11.9376 8.17145C12.023 8.25676 12.0908 8.35809 12.1371 8.46964C12.1834 8.58119 12.2072 8.70077 12.2072 8.82153C12.2072 8.94229 12.1834 9.06187 12.1371 9.17342C12.0908 9.28497 12.023 9.3863 11.9376 9.47161C11.8522 9.5571 11.7508 9.62492 11.6392 9.6712C11.5276 9.71747 11.408 9.74129 11.2872 9.74129C11.1664 9.74129 11.0468 9.71747 10.9352 9.6712C10.8236 9.62492 10.7222 9.5571 10.6369 9.47161C10.5087 9.34325 10.4213 9.17984 10.3857 9.00194C10.3501 8.82403 10.3679 8.63958 10.4369 8.47177L9.19636 7.23126V10.4955C9.28641 10.5398 9.36861 10.5985 9.43968 10.6693C9.61212 10.8419 9.70899 11.0758 9.70899 11.3197C9.70899 11.5637 9.61212 11.7976 9.43968 11.9702C9.08024 12.3291 8.4979 12.3291 8.13952 11.9702C8.05401 11.8848 7.98617 11.7834 7.93988 11.6718C7.89359 11.5602 7.86977 11.4406 7.86977 11.3197C7.86977 11.1989 7.89359 11.0793 7.93988 10.9677C7.98617 10.8561 8.05401 10.7547 8.13952 10.6693C8.22534 10.583 8.32765 10.5148 8.44036 10.4688V7.17411C8.32765 7.12813 8.22534 7.05994 8.13952 6.97359C8.01043 6.84458 7.92262 6.6801 7.88727 6.50105C7.85191 6.322 7.87061 6.13649 7.94097 5.96809L6.58064 4.60724L2.98825 8.19963C2.91647 8.27137 2.85952 8.35656 2.82066 8.45033C2.78181 8.54409 2.76181 8.64459 2.76181 8.74609C2.76181 8.84758 2.78181 8.94809 2.82066 9.04185C2.85952 9.13561 2.91647 9.2208 2.98825 9.29255L8.22747 14.5318C8.29921 14.6035 8.38439 14.6605 8.47815 14.6993C8.5719 14.7381 8.67238 14.7581 8.77386 14.7581C8.87534 14.7581 8.97583 14.7381 9.06958 14.6993C9.16333 14.6605 9.24851 14.6035 9.32026 14.5318L14.5354 9.3173C14.6804 9.17229 14.7618 8.97563 14.7618 8.77058C14.7618 8.56552 14.6804 8.36886 14.5354 8.22385Z" />
- 
  {:else if name === "globe"}
+ 
      d="M14 8C14 8 12 12.5 8 12.5C4 12.5 2 8 2 8C2 8 4 3.5 8 3.5C12 3.5 14 8 14 8Z"
+ 
      fill="none"
+ 
      stroke="currentColor" />
+ 
    <circle cx="8" cy="8" r="2" fill="none" stroke="currentColor" />
+ 
  {:else if name === "eye-slash"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M3.4424 6.38689C4.03734 6.07787 4.81337 5.8403 5.68923 5.68926C5.73546 5.42115 5.78981 5.16239 5.85182 4.91533C5.99241 4.35527 6.17243 3.85525 6.38686 3.44243C5.01515 3.92794 3.92791 5.01518 3.4424 6.38689ZM7.99999 2.16669C4.77833 2.16669 2.16666 4.77836 2.16666 8.00002C2.16666 11.2217 4.77833 13.8334 7.99999 13.8334C11.2217 13.8334 13.8333 11.2217 13.8333 8.00002C13.8333 4.77836 11.2217 2.16669 7.99999 2.16669ZM7.99999 3.16669C7.86865 3.16669 7.59893 3.29241 7.29002 3.87344C7.10927 4.21341 6.94711 4.65475 6.8174 5.17614C6.78706 5.2981 6.75849 5.42444 6.73188 5.55489C7.13996 5.51895 7.56447 5.50002 7.99999 5.50002C8.43551 5.50002 8.86002 5.51895 9.2681 5.55489C9.24022 5.41825 9.2102 5.28611 9.17825 5.15879C9.04926 4.64495 8.8887 4.20963 8.70996 3.87344C8.40105 3.29241 8.13133 3.16669 7.99999 3.16669ZM10.1537 4.93762C10.0123 4.36853 9.83039 3.86072 9.61312 3.44243C10.9848 3.92794 12.0721 5.01518 12.5576 6.38689C11.9626 6.07787 11.1866 5.8403 10.3108 5.68926C10.2659 5.4292 10.2134 5.17795 10.1537 4.93762ZM9.42501 6.575C8.97388 6.52628 8.49569 6.50002 7.99999 6.50002C7.50429 6.50002 7.0261 6.52628 6.57497 6.575C6.52625 7.02613 6.49999 7.50432 6.49999 8.00002C6.49999 8.49572 6.52625 8.97391 6.57497 9.42504C7.02609 9.47376 7.50429 9.50002 7.99999 9.50002C8.49569 9.50002 8.97388 9.47376 9.42501 9.42504C9.47373 8.97391 9.49999 8.49572 9.49999 8.00002C9.49999 7.50432 9.47372 7.02612 9.42501 6.575ZM9.2681 10.4452C8.86002 10.4811 8.43551 10.5 7.99999 10.5C7.56447 10.5 7.13996 10.4811 6.73188 10.4452C6.87227 11.1333 7.06699 11.7071 7.29002 12.1266C7.59893 12.7076 7.86865 12.8334 7.99999 12.8334C8.13133 12.8334 8.40105 12.7076 8.70996 12.1266C8.93299 11.7071 9.12771 11.1333 9.2681 10.4452ZM9.61312 12.5576C9.92214 11.9627 10.1597 11.1866 10.3108 10.3108C11.1866 10.1597 11.9626 9.92217 12.5576 9.61315C12.0721 10.9849 10.9848 12.0721 9.61312 12.5576ZM12.8333 8.00002C12.8333 7.86868 12.7076 7.59896 12.1266 7.29005C11.7071 7.06702 11.1332 6.8723 10.4451 6.73191C10.4811 7.13999 10.5 7.5645 10.5 8.00002C10.5 8.43554 10.4811 8.86005 10.4451 9.26813C11.1333 9.12774 11.7071 8.93302 12.1266 8.70999C12.7076 8.40108 12.8333 8.13136 12.8333 8.00002ZM6.38686 12.5576C5.01515 12.0721 3.92791 10.9849 3.4424 9.61315C4.03734 9.92218 4.81337 10.1597 5.68923 10.3108C5.84027 11.1866 6.07784 11.9627 6.38686 12.5576ZM5.55486 9.26813C4.86673 9.12774 4.2929 8.93302 3.87341 8.70999C3.29238 8.40108 3.16666 8.13136 3.16666 8.00002C3.16666 7.86868 3.29238 7.59896 3.87341 7.29005C4.2929 7.06702 4.86673 6.8723 5.55486 6.73191C5.51892 7.13999 5.49999 7.5645 5.49999 8.00002C5.49999 8.43554 5.51892 8.86005 5.55486 9.26813Z" />
- 
  {:else if name === "help"}
+ 
      d="M13.3535 3.35352L3.35352 13.3535L2.64648 12.6465L12.6465 2.64648L13.3535 3.35352Z" />

    <path
- 
      d="M9 10.8419C9 11.3865 8.54467 11.8419 8 11.8419C7.45533 11.8419 7 11.3865 7 10.8419C7 10.2972 7.45533 9.84188 8 9.84188C8.54467 9.84188 9 10.2972 9 10.8419Z" />
+ 
      d="M12.9629 5.41797C13.4988 6.01003 13.8986 6.60048 14.165 7.04199C14.2985 7.26315 14.3997 7.44857 14.4678 7.58008C14.5018 7.64578 14.5281 7.69852 14.5459 7.73535C14.5546 7.75347 14.5616 7.76802 14.5664 7.77832C14.5688 7.78346 14.5709 7.78796 14.5723 7.79102C14.573 7.79254 14.5738 7.79394 14.5742 7.79492V7.7959L14.5752 7.79688L14.667 8L14.5752 8.20312L14.5723 8.20898C14.5709 8.21204 14.5688 8.21654 14.5664 8.22168C14.5616 8.23198 14.5546 8.24653 14.5459 8.26465C14.5281 8.30148 14.5018 8.35422 14.4678 8.41992C14.3997 8.55143 14.2985 8.73685 14.165 8.95801C13.8986 9.39952 13.4988 9.98997 12.9629 10.582C11.897 11.7595 10.2423 13 8 13C7.1153 13 6.32281 12.8051 5.62109 12.499L6.39355 11.7266C6.88615 11.8984 7.42143 12 8 12C9.83058 12 11.2304 10.9903 12.2012 9.91797C12.6833 9.38535 13.0474 8.85037 13.29 8.44824C13.3998 8.26635 13.484 8.11246 13.543 8C13.484 7.88754 13.3998 7.73365 13.29 7.55176C13.0474 7.14963 12.6833 6.61465 12.2012 6.08203C12.1755 6.05364 12.1484 6.02633 12.1221 5.99805L12.8369 5.2832C12.8795 5.32844 12.922 5.37285 12.9629 5.41797ZM8 3C8.8842 3 9.6765 3.19417 10.3779 3.5L9.60547 4.27246C9.1132 4.10091 8.57811 4 8 4C6.16942 4 4.76957 5.0097 3.79883 6.08203C3.31672 6.61465 2.95263 7.14963 2.70996 7.55176C2.60008 7.73386 2.51501 7.88751 2.45605 8C2.51501 8.11249 2.60008 8.26614 2.70996 8.44824C2.95263 8.85037 3.31672 9.38535 3.79883 9.91797C3.82422 9.94602 3.85097 9.97303 3.87695 10.001L3.16211 10.7158C3.11986 10.6709 3.07765 10.6268 3.03711 10.582C2.50124 9.98997 2.10141 9.39952 1.83496 8.95801C1.70151 8.73685 1.60025 8.55143 1.53223 8.41992C1.49825 8.35422 1.47188 8.30148 1.4541 8.26465C1.44536 8.24653 1.43841 8.23198 1.43359 8.22168C1.43119 8.21654 1.42914 8.21204 1.42773 8.20898C1.42703 8.20746 1.42623 8.20606 1.42578 8.20508V8.2041L1.4248 8.20312L1.33301 8L1.4248 7.79688L1.42578 7.7959V7.79492C1.42623 7.79394 1.42703 7.79254 1.42773 7.79102C1.42914 7.78796 1.43119 7.78346 1.43359 7.77832C1.43841 7.76802 1.44536 7.75347 1.4541 7.73535C1.47188 7.69852 1.49825 7.64578 1.53223 7.58008C1.60025 7.44857 1.70151 7.26315 1.83496 7.04199C2.10141 6.60048 2.50124 6.01003 3.03711 5.41797C4.10295 4.24049 5.75771 3 8 3Z" />

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M8 2.5C5.3534 2.5 2.5 4.52821 2.5 8C2.5 11.4718 5.3534 13.5 8 13.5C10.6466 13.5 13.5 11.4718 13.5 8C13.5 7.72386 13.7239 7.5 14 7.5C14.2761 7.5 14.5 7.72386 14.5 8C14.5 12.122 11.0956 14.5 8 14.5C4.90438 14.5 1.5 12.122 1.5 8C1.5 3.87804 4.90438 1.5 8 1.5C9.52918 1.5 10.6747 1.89561 11.4304 2.53262C12.1907 3.17354 12.5274 4.03904 12.4446 4.87775C12.3622 5.71281 11.8678 6.47921 11.0557 6.93153C10.3805 7.30768 9.51064 7.45531 8.5 7.28936V8.35417C8.5 8.63031 8.27614 8.85417 8 8.85417C7.72386 8.85417 7.5 8.63031 7.5 8.35417V6.66667C7.5 6.51033 7.57312 6.363 7.69763 6.26845C7.82214 6.17391 7.9837 6.14305 8.13429 6.18504C9.22008 6.48779 10.0333 6.35637 10.5691 6.05792C11.1056 5.75907 11.4005 5.27625 11.4495 4.77954C11.4981 4.28648 11.3084 3.73766 10.7859 3.2972C10.2588 2.85283 9.36507 2.5 8 2.5Z" />
- 
  {:else if name === "home"}
- 
    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M8.10975 3.42707C8.04691 3.37209 7.95308 3.37209 7.89025 3.42707L2.99592 7.70961C2.7881 7.89145 2.47222 7.87039 2.29038 7.66258C2.10853 7.45476 2.12959 7.13888 2.33741 6.95703L7.23174 2.67449C7.6716 2.28961 8.32839 2.28961 8.76825 2.67449L13.6626 6.95703C13.8704 7.13888 13.8915 7.45476 13.7096 7.66258C13.5278 7.87039 13.2119 7.89145 13.0041 7.70961L8.10975 3.42707ZM4.73737 7.50501C5.01074 7.54407 5.20069 7.79733 5.16164 8.0707L4.71239 11.2155C4.64067 11.7175 5.03022 12.1667 5.53734 12.1667H6.16666V10.6667C6.16666 9.65413 6.98748 8.83332 8 8.83332C9.01252 8.83332 9.83333 9.65413 9.83333 10.6667V12.1667H10.4627C10.9698 12.1667 11.3593 11.7175 11.2876 11.2155L10.8384 8.0707C10.7993 7.79733 10.9893 7.54407 11.2626 7.50501C11.536 7.46596 11.7893 7.65591 11.8283 7.92928L12.2776 11.074C12.4353 12.1785 11.5783 13.1667 10.4627 13.1667H5.53734C4.42167 13.1667 3.56466 12.1785 3.72244 11.074L4.17169 7.92928C4.21074 7.65591 4.46401 7.46596 4.73737 7.50501ZM8.83333 12.1667V10.6667C8.83333 10.2064 8.46023 9.83332 8 9.83332C7.53976 9.83332 7.16666 10.2064 7.16666 10.6667V12.1667H8.83333Z" />
- 
  {:else if name === "info"}
- 
    <path
- 
      d="M2.5 8C2.5 5.3534 4.52821 2.5 8 2.5C11.4718 2.5 13.5 5.3534 13.5 8C13.5 9.23995 12.9967 10.5534 12.2001 11.5551C11.3998 12.5615 10.3633 13.1837 9.33333 13.1837C8.68303 13.1837 8.33754 12.925 8.14609 12.5639C7.93269 12.1615 7.87359 11.5555 8.00151 10.8385L8.49223 8.08782C8.51822 7.94214 8.47835 7.79244 8.38335 7.67899C8.28834 7.56554 8.14797 7.5 8 7.5H6.3125C6.03636 7.5 5.8125 7.72386 5.8125 8C5.8125 8.27614 6.03636 8.5 6.3125 8.5H7.4029L7.01705 10.6628C6.86857 11.4951 6.90375 12.3556 7.26261 13.0324C7.64341 13.7505 8.34815 14.1837 9.33333 14.1837C10.7695 14.1837 12.0664 13.33 12.9828 12.1775C13.9031 11.0203 14.5 9.49194 14.5 8C14.5 4.90438 12.122 1.5 8 1.5C3.87804 1.5 1.5 4.90438 1.5 8C1.5 10.5817 2.91858 12.8362 5.38742 13.9396C5.63953 14.0523 5.93524 13.9393 6.04792 13.6872C6.16059 13.435 6.04756 13.1393 5.79545 13.0267C3.68759 12.0846 2.5 10.1883 2.5 8Z" />
- 
    <path
- 
      d="M7.33334 5.66666C7.33334 6.21132 7.78868 6.66666 8.33334 6.66666C8.87801 6.66666 9.33334 6.21132 9.33334 5.66666C9.33334 5.12199 8.87801 4.66666 8.33334 4.66666C7.78868 4.66666 7.33334 5.12199 7.33334 5.66666Z" />
- 
  {:else if name === "issue"}
- 
    <path
- 
      fill-rule="evenodd"
- 
      d="M2 8a6 6 0 1112 0A6 6 0 012 8zm6-5.077a5.077 5.077 0 100 10.154A5.077 5.077 0 008 2.923z"
- 
      clip-rule="evenodd">
- 
    </path>
+ 
      d="M10.4717 7.64844C10.4879 7.76347 10.5 7.88049 10.5 8C10.5 9.38071 9.38071 10.5 8 10.5C7.88049 10.5 7.76347 10.4879 7.64844 10.4717L10.4717 7.64844ZM8 5.5C8.11913 5.5 8.2359 5.51123 8.35059 5.52734L5.52734 8.35059C5.51123 8.2359 5.5 8.11913 5.5 8C5.5 6.61929 6.61929 5.5 8 5.5Z" />
+ 
  {:else if name === "folder"}

    <path
- 
      fill-rule="evenodd"
- 
      d="M7.077 8a.923.923 0 101.846 0 .923.923 0 00-1.846 0z"
- 
      clip-rule="evenodd">
- 
    </path>
- 
  {:else if name === "link"}
+ 
      d="M7.20703 2.5L9.20703 4.5H14.5V14.5H1.5V2.5H7.20703ZM2.5 13.5H13.5V5.5H2.5V13.5ZM2.5 4.5H7.79297L6.79297 3.5H2.5V4.5Z" />
+ 
  {:else if name === "folder-open"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M7.64645 3.64645C7.45118 3.84171 7.45118 4.15829 7.64645 4.35355C7.84171 4.54882 8.15829 4.54882 8.35355 4.35355L9.93934 2.76777C10.5251 2.18198 11.4749 2.18198 12.0607 2.76777L13.2322 3.93934C13.818 4.52513 13.818 5.47488 13.2322 6.06066L10.0607 9.23223C9.47487 9.81802 8.52513 9.81802 7.93934 9.23223L7.35355 8.64645C7.15829 8.45119 6.84171 8.45119 6.64645 8.64645C6.45118 8.84171 6.45118 9.15829 6.64645 9.35355L7.23223 9.93934C8.20854 10.9157 9.79146 10.9157 10.7678 9.93934L13.9393 6.76777C14.9156 5.79146 14.9156 4.20855 13.9393 3.23224L12.7678 2.06066C11.7915 1.08435 10.2085 1.08435 9.23223 2.06066L7.64645 3.64645ZM8.35352 12.3536C8.54879 12.1583 8.54879 11.8417 8.35352 11.6464C8.15826 11.4512 7.84168 11.4512 7.64642 11.6464L6.06063 13.2322C5.47485 13.818 4.5251 13.818 3.93931 13.2322L2.76774 12.0607C2.18195 11.4749 2.18195 10.5251 2.76774 9.93934L5.93931 6.76777C6.5251 6.18198 7.47485 6.18198 8.06063 6.76777L8.64642 7.35355C8.84168 7.54882 9.15826 7.54882 9.35352 7.35356C9.54879 7.15829 9.54879 6.84171 9.35352 6.64645L8.76774 6.06066C7.79143 5.08435 6.20852 5.08435 5.2322 6.06066L2.06063 9.23223C1.08432 10.2085 1.08432 11.7915 2.06063 12.7678L3.2322 13.9393C4.20852 14.9156 5.79143 14.9156 6.76774 13.9393L8.35352 12.3536Z" />
- 
  {:else if name === "logo"}
- 
    <path d="M5.04547 1.5H3.86365V2.68182H5.04547V1.5Z" />
- 
    <path d="M12.1364 1.5H10.9546V2.68182H12.1364V1.5Z" />
- 
    <path d="M6.22726 2.68182H5.04544V3.86363H6.22726V2.68182Z" />
- 
    <path d="M10.9546 2.68182H9.77274V3.86363H10.9546V2.68182Z" />
- 
    <path d="M6.22726 3.86364H5.04544V5.04546H6.22726V3.86364Z" />
- 
    <path d="M7.40908 3.86364H6.22726V5.04546H7.40908V3.86364Z" />
- 
    <path d="M8.59091 3.86364H7.40909V5.04546H8.59091V3.86364Z" />
- 
    <path d="M9.77273 3.86364H8.59091V5.04546H9.77273V3.86364Z" />
- 
    <path d="M10.9546 3.86364H9.77274V5.04546H10.9546V3.86364Z" />
- 
    <path d="M5.04547 5.04546H3.86365V6.22727H5.04547V5.04546Z" />
- 
    <path d="M6.22726 5.04546H5.04544V6.22727H6.22726V5.04546Z" />
- 
    <path d="M7.40908 5.04546H6.22726V6.22727H7.40908V5.04546Z" />
- 
    <path d="M8.59091 5.04546H7.40909V6.22727H8.59091V5.04546Z" />
- 
    <path d="M9.77273 5.04546H8.59091V6.22727H9.77273V5.04546Z" />
- 
    <path d="M10.9546 5.04546H9.77274V6.22727H10.9546V5.04546Z" />
- 
    <path d="M12.1364 5.04546H10.9546V6.22727H12.1364V5.04546Z" />
- 
    <path d="M3.86364 6.22727H2.68182V7.40909H3.86364V6.22727Z" />
- 
    <path d="M5.04547 6.22727H3.86365V7.40909H5.04547V6.22727Z" />
- 
    <path d="M8.59091 6.22727H7.40909V7.40909H8.59091V6.22727Z" />
- 
    <path d="M9.77273 6.22727H8.59091V7.40909H9.77273V6.22727Z" />
- 
    <path d="M13.3182 6.22727H12.1364V7.40909H13.3182V6.22727Z" />
- 
    <path d="M3.86364 7.40909H2.68182V8.59091H3.86364V7.40909Z" />
- 
    <path d="M5.04547 7.40909H3.86365V8.59091H5.04547V7.40909Z" />
- 
    <path d="M7.40908 7.40909H6.22726V8.59091H7.40908V7.40909Z" />
- 
    <path d="M8.59091 7.40909H7.40909V8.59091H8.59091V7.40909Z" />
- 
    <path d="M9.77273 7.40909H8.59091V8.59091H9.77273V7.40909Z" />
- 
    <path d="M12.1364 7.40909H10.9546V8.59091H12.1364V7.40909Z" />
- 
    <path d="M13.3182 7.40909H12.1364V8.59091H13.3182V7.40909Z" />
- 
    <path d="M2.68182 8.59091H1.5V9.77273H2.68182V8.59091Z" />
- 
    <path d="M3.86364 8.59091H2.68182V9.77273H3.86364V8.59091Z" />
- 
    <path d="M5.04547 8.59091H3.86365V9.77273H5.04547V8.59091Z" />
- 
    <path d="M6.22726 8.59091H5.04544V9.77273H6.22726V8.59091Z" />
- 
    <path d="M7.40908 8.59091H6.22726V9.77273H7.40908V8.59091Z" />
- 
    <path d="M8.59091 8.59091H7.40909V9.77273H8.59091V8.59091Z" />
- 
    <path d="M9.77273 8.59091H8.59091V9.77273H9.77273V8.59091Z" />
- 
    <path d="M10.9546 8.59091H9.77274V9.77273H10.9546V8.59091Z" />
- 
    <path d="M12.1364 8.59091H10.9546V9.77273H12.1364V8.59091Z" />
- 
    <path d="M13.3182 8.59091H12.1364V9.77273H13.3182V8.59091Z" />
- 
    <path d="M14.5 8.59091H13.3182V9.77273H14.5V8.59091Z" />
- 
    <path d="M5.04547 9.77273H3.86365V10.9545H5.04547V9.77273Z" />
- 
    <path d="M7.40908 9.77273H6.22726V10.9545H7.40908V9.77273Z" />
- 
    <path d="M9.77273 9.77273H8.59091V10.9545H9.77273V9.77273Z" />
- 
    <path d="M12.1364 9.77273H10.9546V10.9545H12.1364V9.77273Z" />
- 
    <path d="M5.04547 10.9546H3.86365V12.1364H5.04547V10.9546Z" />
- 
    <path d="M7.40908 10.9546H6.22726V12.1364H7.40908V10.9546Z" />
- 
    <path d="M9.77273 10.9546H8.59091V12.1364H9.77273V10.9546Z" />
- 
    <path d="M12.1364 10.9546H10.9546V12.1364H12.1364V10.9546Z" />
- 
    <path d="M7.40908 12.1364H6.22726V13.3182H7.40908V12.1364Z" />
- 
    <path d="M9.77273 12.1364H8.59091V13.3182H9.77273V12.1364Z" />
- 
    <path d="M6.22726 13.3182H5.04544V14.5H6.22726V13.3182Z" />
- 
    <path d="M7.40908 13.3182H6.22726V14.5H7.40908V13.3182Z" />
- 
    <path d="M9.77273 13.3182H8.59091V14.5H9.77273V13.3182Z" />
- 
    <path d="M10.9546 13.3182H9.77274V14.5H10.9546V13.3182Z" />
- 
  {:else if name === "menu"}
+ 
      d="M7.20703 2.5L9.20703 4.5H14.5V6.5H15.6631L13.377 14.5H1.5V2.5H7.20703ZM2.70898 13.5H12.623L14.3369 7.5H4.85254L2.70898 13.5ZM2.5 11.1133L4.0293 6.83203L4.14746 6.5H13.5V5.5H8.79297L6.79297 3.5H2.5V11.1133Z" />
+ 
  {:else if name === "git"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M14.2917 5.2002C14.2917 5.47634 14.0679 5.7002 13.7917 5.7002L4.45841 5.70019C4.18227 5.70019 3.95841 5.47634 3.95841 5.20019C3.95841 4.92405 4.18227 4.70019 4.45841 4.70019L13.7917 4.7002C14.0679 4.7002 14.2917 4.92405 14.2917 5.2002Z" />
+ 
      d="M9 7C9 6.44772 8.55228 6 8 6C7.44772 6 7 6.44772 7 7C7 7.55228 7.44772 8 8 8C8.55228 8 9 7.55228 9 7ZM10 7C10 8.10457 9.10457 9 8 9C6.89543 9 6 8.10457 6 7C6 5.89543 6.89543 5 8 5C9.10457 5 10 5.89543 10 7Z" />

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M14.2917 8.2002C14.2917 8.47634 14.0679 8.7002 13.7917 8.7002L4.45841 8.70019C4.18227 8.70019 3.95841 8.47634 3.95841 8.20019C3.95841 7.92405 4.18227 7.70019 4.45841 7.70019L13.7917 7.7002C14.0679 7.7002 14.2917 7.92405 14.2917 8.2002Z" />
+ 
      d="M15.7783 8.00023L8 15.7785L0.22168 8.00023L8 0.221909L15.7783 8.00023ZM5.6709 3.9641L7.35352 5.64671L6.64648 6.35374L4.96387 4.67113L1.63574 8.00023L8 14.3645L14.3643 8.00023L8 1.63597L5.6709 3.9641ZM8.5 8.50023V12.0002H7.5V8.50023H8.5ZM11.3535 9.64671L10.6465 10.3537L8.64648 8.35374L9.35352 7.64671L11.3535 9.64671Z" />
+ 
  {:else if name === "guide"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M14.2917 11.2002C14.2917 11.4763 14.0679 11.7002 13.7917 11.7002L4.45841 11.7002C4.18227 11.7002 3.95841 11.4763 3.95841 11.2002C3.95841 10.9241 4.18227 10.7002 4.45841 10.7002L13.7917 10.7002C14.0679 10.7002 14.2917 10.9241 14.2917 11.2002Z" />
- 
  {:else if name === "moon"}
+ 
      d="M13.5 8C13.5 4.96243 11.0376 2.5 8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8ZM14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8Z" />
+ 
    <path d="M8.5 6.25V10.5H9.5V11.5H6.5V10.5H7.5V7.25H6.75V6.25H8.5Z" />

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M9.12466 3C6.28376 3 4 5.24908 4 8C4 10.7509 6.28376 13 9.12466 13C9.77586 13 10.398 12.8817 10.9702 12.6661C8.96205 12.0339 7.49973 10.1903 7.49973 8C7.49973 5.80965 8.96205 3.96612 10.9702 3.33392C10.398 3.11832 9.77586 3 9.12466 3ZM3 8C3 4.67579 5.75273 2 9.12466 2C10.5003 2 11.7723 2.44492 12.796 3.19705C12.9702 3.32501 13.0424 3.5504 12.9751 3.75577C12.9078 3.96114 12.7161 4.1 12.5 4.1C10.2803 4.1 8.49973 5.85667 8.49973 8C8.49973 10.1433 10.2803 11.9 12.5 11.9C12.7161 11.9 12.9078 12.0389 12.9751 12.2442C13.0424 12.4496 12.9702 12.675 12.796 12.8029C11.7723 13.5551 10.5003 14 9.12466 14C5.75273 14 3 11.3242 3 8Z" />
- 
  {:else if name === "device"}
+ 
      d="M8.625 4.625C8.625 4.97018 8.34518 5.25 8 5.25C7.65482 5.25 7.375 4.97018 7.375 4.625C7.375 4.27982 7.65482 4 8 4C8.34518 4 8.625 4.27982 8.625 4.625Z" />
+ 
  {:else if name === "help"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M4.5306 4C4.47537 4 4.4306 4.04477 4.4306 4.1V8.4H11.8306V4.1C11.8306 4.04477 11.7858 4 11.7306 4H4.5306ZM12.0216 9.4H4.23962L3.01198 11.8553C2.97873 11.9218 3.02708 12 3.10142 12H13.1598C13.2341 12 13.2825 11.9218 13.2492 11.8553L12.0216 9.4ZM3.4306 8.78197V4.1C3.4306 3.49249 3.92309 3 4.5306 3H11.7306C12.3381 3 12.8306 3.49249 12.8306 4.1V8.78197L14.1436 11.4081C14.5093 12.1395 13.9775 13 13.1598 13H3.10142C2.2837 13 1.75185 12.1395 2.11755 11.4081L3.4306 8.78197Z" />
- 
  {:else if name === "delegate"}
+ 
      d="M13.5 8C13.5 4.96243 11.0376 2.5 8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8ZM14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8Z" />

    <path
- 
      fill-rule="evenodd"
- 
      d="M3.5 5a1 1 0 110-2 1 1 0 010 2zm-2-1a2 2 0 104 0 2 2 0 00-4 0zM11.5 5a1 1 0 110-2 1 1 0 010 2zm-2-1a2 2 0 104 0 2 2 0 00-4 0z"
- 
      clip-rule="evenodd">
- 
    </path>
+ 
      d="M8.625 11.625C8.625 11.9702 8.34518 12.25 8 12.25C7.65482 12.25 7.375 11.9702 7.375 11.625C7.375 11.2798 7.65482 11 8 11C8.34518 11 8.625 11.2798 8.625 11.625Z" />

    <path
- 
      fill-rule="evenodd"
- 
      d="M3.5 5.333a.5.5 0 01.5.5V7.5a.5.5 0 00.5.5h6a.5.5 0 00.5-.5V5.833a.5.5 0 011 0V7.5A1.5 1.5 0 0110.5 9H8v2.833c0 .277-.224-.5-.5-.5s-.5.777-.5.5V9H4.5A1.5 1.5 0 013 7.5V5.833a.5.5 0 01.5-.5z"
- 
      clip-rule="evenodd">
- 
    </path>
+ 
      d="M9.63379 6.5C9.63379 5.89312 9.41336 5.5453 9.13867 5.33496C8.84286 5.10866 8.42725 5 8 5C7.57445 5 7.20236 5.10724 6.94531 5.32129C6.7043 5.52213 6.5 5.87024 6.5 6.5H5.5C5.5 5.62992 5.79588 4.97787 6.30469 4.55371C6.79763 4.14292 7.42571 4 8 4C8.57275 4 9.22492 4.14134 9.74609 4.54004C10.2882 4.95474 10.6338 5.60725 10.6338 6.5C10.6338 7.32703 10.1246 7.91638 9.6123 8.29102C9.24736 8.55787 8.84058 8.74663 8.5 8.86816V10H7.5V8.10938L7.87891 8.01465C8.16659 7.9427 8.63623 7.76595 9.02148 7.48438C9.40947 7.20067 9.63379 6.87287 9.63379 6.5Z" />
+ 
  {:else if name === "hourglass"}

    <path
- 
      fill-rule="evenodd"
- 
      d="M7.5 14a1 1 0 110-2 1 1 0 010 2zm-2-1a2 2 0 104 0 2 2 0 00-4 0z"
- 
      clip-rule="evenodd">
- 
    </path>
- 
  {:else if name === "lock"}
+ 
      d="M13.5 1.5V2.5H12.5V5.25L8.83301 8L12.5 10.75V13.5H13.5V14.5H2.5V13.5H3.5V10.75L7.16602 8L3.5 5.25V2.5H2.5V1.5H13.5ZM4.5 11.25V13.5H11.5V11.25L8 8.625L4.5 11.25ZM4.5 4.74902L8 7.37402L11.5 4.74902V2.5H4.5V4.74902Z" />
+ 
  {:else if name === "issue"}

    <path
- 
      d="M8 12C7.72386 12 7.5 11.7761 7.5 11.5V10.8662C7.2011 10.6933 7 10.3701 7 10C7 9.44772 7.44772 9 8 9C8.55228 9 9 9.44772 9 10C9 10.3701 8.7989 10.6933 8.5 10.8662V11.5C8.5 11.7761 8.27614 12 8 12Z" />
+ 
      d="M9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5C8.82843 9.5 9.5 8.82843 9.5 8ZM10.5 8C10.5 9.38071 9.38071 10.5 8 10.5C6.61929 10.5 5.5 9.38071 5.5 8C5.5 6.61929 6.61929 5.5 8 5.5C9.38071 5.5 10.5 6.61929 10.5 8Z" />

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M5 5V7C3.89543 7 3 7.89543 3 9V12C3 13.1046 3.89543 14 5 14H11C12.1046 14 13 13.1046 13 12V9C13 7.89543 12.1046 7 11 7V5C11 3.34315 9.65685 2 8 2C6.34315 2 5 3.34315 5 5ZM10 7V5C10 3.89543 9.10457 3 8 3C6.89543 3 6 3.89543 6 5V7H10ZM4 9C4 8.44772 4.44772 8 5 8H11C11.5523 8 12 8.44772 12 9V12C12 12.5523 11.5523 13 11 13H5C4.44772 13 4 12.5523 4 12V9Z" />
+ 
      d="M13.5 8C13.5 4.96243 11.0376 2.5 8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8ZM14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8Z" />

  {:else if name === "key"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M2.97946 2.31295C3.17472 2.11769 3.4913 2.11769 3.68657 2.31295L5.68657 4.31295C5.88183 4.50821 5.88183 4.8248 5.68657 5.02006C5.49131 5.21532 5.17473 5.21532 4.97946 5.02006L4.60568 4.64628C4.43287 4.47347 4.24071 4.46105 4.10338 4.51851C3.97096 4.57393 3.83227 4.71955 3.83301 5.0046C3.83422 5.47296 4.01312 5.93932 4.37 6.2962C5.08596 7.01216 6.24676 7.01216 6.96272 6.2962C7.67868 5.58024 7.67868 4.41944 6.96272 3.70348C6.60482 3.34558 6.1368 3.16669 5.66707 3.16651C5.39093 3.1664 5.16715 2.94246 5.16726 2.66631C5.16737 2.39017 5.39131 2.1664 5.66745 2.16651C6.39143 2.16678 7.11696 2.4435 7.66983 2.99637C8.77631 4.10285 8.77631 5.89682 7.66983 7.00331C6.56334 8.10979 4.76937 8.10979 3.66289 7.00331C3.11163 6.45204 2.83488 5.72909 2.83301 5.00719C2.83141 4.38747 3.14273 3.8914 3.60722 3.64782L2.97946 3.02006C2.7842 2.8248 2.7842 2.50821 2.97946 2.31295ZM8.31281 7.64628C8.50807 7.45102 8.82466 7.45102 9.01992 7.64629L13.0199 11.6463C13.2152 11.8415 13.2152 12.1581 13.0199 12.3534C12.8247 12.5487 12.5081 12.5487 12.3128 12.3534L11.6664 11.7069L10.3532 13.0201C10.158 13.2153 9.8414 13.2153 9.64614 13.0201C9.45088 12.8248 9.45088 12.5082 9.64614 12.313L10.9593 10.9998L10.333 10.3736L9.01991 11.6867C8.82465 11.882 8.50807 11.882 8.31281 11.6867C8.11754 11.4915 8.11754 11.1749 8.31281 10.9796L9.62592 9.6665L8.31281 8.35339C8.11755 8.15813 8.11755 7.84155 8.31281 7.64628Z" />
- 
  {:else if name === "more"}
+ 
      d="M7.5 10C7.5 8.61929 6.38071 7.5 5 7.5C3.61929 7.5 2.5 8.61929 2.5 10C2.5 11.3807 3.61929 12.5 5 12.5C6.38071 12.5 7.5 11.3807 7.5 10ZM8.5 10C8.5 11.933 6.933 13.5 5 13.5C3.067 13.5 1.5 11.933 1.5 10C1.5 8.067 3.067 6.5 5 6.5C6.933 6.5 8.5 8.067 8.5 10Z" />

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M9.33334 12C9.33334 11.4477 8.88563 11 8.33334 11C7.78106 11 7.33334 11.4477 7.33334 12C7.33334 12.5523 7.78106 13 8.33334 13C8.88563 13 9.33334 12.5523 9.33334 12ZM8.33334 7C8.88563 7 9.33334 7.44772 9.33334 8C9.33334 8.55228 8.88563 9 8.33334 9C7.78106 9 7.33334 8.55228 7.33334 8C7.33334 7.44772 7.78106 7 8.33334 7ZM8.33334 3C8.88563 3 9.33334 3.44772 9.33334 4C9.33334 4.55229 8.88563 5 8.33334 5C7.78106 5 7.33334 4.55229 7.33334 4C7.33334 3.44772 7.78106 3 8.33334 3Z" />
- 
  {:else if name === "network"}
- 
    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M6 4C6 4.55228 5.55228 5 5 5C4.44772 5 4 4.55228 4 4C4 3.44772 4.44772 3 5 3C5.55228 3 6 3.44772 6 4ZM7 4C7 4.9319 6.36264 5.71493 5.50006 5.93698V8.06302C5.8119 8.1433 6.0943 8.29688 6.32779 8.50432L9.13526 6.72449C9.04792 6.49985 9 6.25552 9 6C9 4.89543 9.89543 4 11 4C12.1046 4 13 4.89543 13 6C13 6.93192 12.3626 7.71497 11.5 7.93699V11.063C12.3626 11.285 13 12.0681 13 13C13 14.1046 12.1046 15 11 15C9.89543 15 9 14.1046 9 13C9 12.9239 9.00425 12.8489 9.01252 12.775L6.45484 11.3724C6.09018 11.7588 5.57325 12 5 12C3.89543 12 3 11.1046 3 10C3 9.06806 3.63742 8.28499 4.50006 8.06299V5.93701C3.63742 5.71501 3 4.93194 3 4C3 2.89543 3.89543 2 5 2C6.10457 2 7 2.89543 7 4ZM6.93782 10.4968L9.37527 11.8334C9.64466 11.4589 10.0404 11.1813 10.5 11.063V7.93699C10.2094 7.8622 9.94439 7.72374 9.72068 7.53738L6.88648 9.33415C6.96 9.54244 7 9.76655 7 10C7 10.1715 6.97842 10.3379 6.93782 10.4968ZM12 6C12 6.55228 11.5523 7 11 7C10.4477 7 10 6.55228 10 6C10 5.44772 10.4477 5 11 5C11.5523 5 12 5.44772 12 6ZM12 13C12 13.5523 11.5523 14 11 14C10.4477 14 10 13.5523 10 13C10 12.4477 10.4477 12 11 12C11.5523 12 12 12.4477 12 13ZM5 11C5.55228 11 6 10.5523 6 10C6 9.44772 5.55228 9 5 9C4.44772 9 4 9.44772 4 10C4 10.5523 4.44772 11 5 11Z" />
- 
  {:else if name === "offline"}
+ 
      d="M5 10.5C5 10.7761 4.77614 11 4.5 11C4.22386 11 4 10.7761 4 10.5C4 10.2239 4.22386 10 4.5 10C4.77614 10 5 10.2239 5 10.5Z" />

    <path
- 
      d="M2.21803 11.0448C2.05026 10.8255 2.09207 10.5117 2.31141 10.3439L2.97907 9.83324C1.44084 7.44877 1.71567 4.23437 3.80358 2.14646C3.99884 1.9512 4.31542 1.9512 4.51068 2.14646C4.70595 2.34172 4.70595 2.65831 4.51068 2.85357C2.78185 4.5824 2.53715 7.23336 3.77659 9.22323L4.67273 8.53778C3.76723 6.99185 3.97751 4.97253 5.30358 3.64646C5.49884 3.4512 5.81542 3.4512 6.01068 3.64646C6.20595 3.84172 6.20595 4.15831 6.01068 4.35357C5.04408 5.32017 4.86563 6.77647 5.47534 7.92388L6.31548 7.28127C6.21353 7.04126 6.15714 6.77722 6.15714 6.50002C6.15714 5.39545 7.05257 4.50002 8.15714 4.50002C8.62359 4.50002 9.05275 4.6597 9.39292 4.92739L10.2416 4.27825C10.1111 4.08389 10.1318 3.81823 10.3036 3.64646C10.4988 3.4512 10.8154 3.4512 11.0107 3.64646L11.0352 3.67121L11.9313 2.98583C11.8897 2.94117 11.8471 2.89708 11.8036 2.85357C11.6083 2.65831 11.6083 2.34172 11.8036 2.14646C11.9988 1.9512 12.3154 1.9512 12.5107 2.14646C12.5857 2.2215 12.6584 2.29799 12.7288 2.37585L13.2686 1.96297C13.4879 1.7952 13.8017 1.83701 13.9695 2.05634C14.1372 2.27568 14.0954 2.58949 13.8761 2.75726L13.337 3.1696C13.3384 3.1717 13.3397 3.17379 13.3411 3.17589C13.316 3.18898 13.2918 3.20438 13.2686 3.22213L12.5395 3.77976C12.5395 3.77972 12.5395 3.7798 12.5395 3.77976L11.6432 4.46515C11.6432 4.46511 11.6433 4.46519 11.6432 4.46515L10.8406 5.07926C10.8405 5.07922 10.8406 5.0793 10.8406 5.07926L10.0001 5.72193C10.0001 5.72188 10.0002 5.72197 10.0001 5.72193L6.92416 8.07486C6.92412 8.07483 6.9242 8.07488 6.92416 8.07486L6.07453 8.72456C6.0745 8.72452 6.07455 8.7246 6.07453 8.72456L4.38525 10.0167C4.38522 10.0166 4.38528 10.0167 4.38525 10.0167L3.58782 10.6268C3.58779 10.6267 3.58785 10.6268 3.58782 10.6268L2.91894 11.1382C2.69961 11.306 2.3858 11.2642 2.21803 11.0448Z" />
+ 
      d="M4.75 10.5C4.75 10.3619 4.63807 10.25 4.5 10.25C4.36193 10.25 4.25 10.3619 4.25 10.5C4.25 10.6381 4.36193 10.75 4.5 10.75C4.63807 10.75 4.75 10.6381 4.75 10.5ZM5.25 10.5C5.25 10.9142 4.91421 11.25 4.5 11.25C4.08579 11.25 3.75 10.9142 3.75 10.5C3.75 10.0858 4.08579 9.75 4.5 9.75C4.91421 9.75 5.25 10.0858 5.25 10.5Z" />

    <path
- 
      d="M7.16102 9.15268L5.6523 14.4332C5.57787 14.6937 5.74357 14.9348 6.0224 14.9718C6.30122 15.0087 6.58759 14.8275 6.66202 14.567L8.15714 9.33408L9.65225 14.567C9.72668 14.8275 10.013 15.0087 10.2919 14.9717C10.5707 14.9348 10.7364 14.6936 10.662 14.4331L8.92336 8.34799C9.53166 8.09548 9.98839 7.55137 10.1191 6.89007L7.16102 9.15268Z" />
+ 
      d="M14.3535 4.64648L13.6465 5.35352L12 3.70703L10.707 5L12.3535 6.64648L11.6465 7.35352L10 5.70703L7.35352 8.35352L6.64648 7.64648L12 2.29297L14.3535 4.64648Z" />
+ 
  {:else if name === "link"}

    <path
- 
      d="M11.165 6.09007C11.288 6.99718 11.0008 7.94923 10.3036 8.64647C10.1083 8.84173 10.1083 9.15831 10.3036 9.35358C10.4988 9.54884 10.8154 9.54884 11.0107 9.35358C12.0769 8.28735 12.4218 6.77293 12.0453 5.41676L11.165 6.09007Z" />
+ 
      d="M10.3535 6.35352L6.35352 10.3535L5.64648 9.64648L9.64648 5.64648L10.3535 6.35352Z" />

    <path
- 
      d="M12.9891 4.69489C13.6727 6.52825 13.2775 8.6725 11.8036 10.1465C11.6083 10.3417 11.6083 10.6583 11.8036 10.8536C11.9988 11.0488 12.3154 11.0488 12.5107 10.8536C14.3462 9.01802 14.7805 6.31182 13.8135 4.0643L12.9891 4.69489Z" />
- 
  {:else if name === "online"}
+ 
      d="M8.64648 2.6465C9.94632 1.34667 12.0537 1.34667 13.3535 2.6465C14.6533 3.94634 14.6533 6.0537 13.3535 7.35354L11 9.70705L10.293 9.00002L12.6465 6.6465C13.5558 5.7372 13.5558 4.26284 12.6465 3.35354C11.7372 2.44423 10.2628 2.44423 9.35352 3.35354L7 5.70705L6.29297 5.00002L8.64648 2.6465Z" />

    <path
- 
      d="M4.51041 2.85355C4.70567 2.65829 4.70567 2.34171 4.51041 2.14645C4.31515 1.95118 3.99856 1.95118 3.8033 2.14645C1.3989 4.55085 1.3989 8.44916 3.8033 10.8536C3.99856 11.0488 4.31515 11.0488 4.51041 10.8536C4.70567 10.6583 4.70567 10.3417 4.51041 10.1465C2.49653 8.13258 2.49653 4.86743 4.51041 2.85355Z" />
+ 
      d="M5.70681 7L3.85329 8.85352C2.94398 9.76282 2.94398 11.2372 3.85329 12.1465C4.7626 13.0558 6.23695 13.0558 7.14626 12.1465L8.99978 10.293L9.70681 11L7.85329 12.8535C6.55346 14.1533 4.44609 14.1533 3.14626 12.8535C1.84643 11.5537 1.84643 9.44632 3.14626 8.14648L4.99978 6.29297L5.70681 7Z" />
+ 
  {:else if name === "lock"}

    <path
- 
      d="M12.5104 2.14645C12.3152 1.95118 11.9986 1.95118 11.8033 2.14645C11.608 2.34171 11.608 2.65829 11.8033 2.85355C13.8172 4.86743 13.8172 8.13258 11.8033 10.1465C11.608 10.3417 11.608 10.6583 11.8033 10.8536C11.9986 11.0488 12.3152 11.0488 12.5104 10.8536C14.9148 8.44916 14.9148 4.55085 12.5104 2.14645Z" />
+ 
      d="M10.5 5C10.5 3.61929 9.38071 2.5 8 2.5C6.61929 2.5 5.5 3.61929 5.5 5V6H4.5V5C4.5 3.067 6.067 1.5 8 1.5C9.933 1.5 11.5 3.067 11.5 5V6H10.5V5Z" />
+ 
    <path d="M12.5 6.5H3.5V13.5H12.5V6.5ZM13.5 14.5H2.5V5.5H13.5V14.5Z" />

    <path
- 
      d="M6.01041 4.35355C6.20567 4.15829 6.20567 3.84171 6.01041 3.64645C5.81515 3.45118 5.49856 3.45118 5.3033 3.64645C3.72733 5.22242 3.72733 7.77758 5.3033 9.35356C5.49856 9.54882 5.81515 9.54882 6.01041 9.35356C6.20567 9.1583 6.20567 8.84171 6.01041 8.64645C4.82496 7.461 4.82496 5.539 6.01041 4.35355Z" />
+ 
      d="M9 9C9 9.55228 8.55228 10 8 10C7.44772 10 7 9.55228 7 9C7 8.44772 7.44772 8 8 8C8.55228 8 9 8.44772 9 9Z" />
+ 
    <path d="M8.5 9V12H7.5V9H8.5Z" />
+ 
  {:else if name === "logo"}

    <path
- 
      d="M11.0104 3.64645C10.8152 3.45118 10.4986 3.45118 10.3033 3.64645C10.108 3.84171 10.108 4.15829 10.3033 4.35355C11.4888 5.539 11.4888 7.461 10.3033 8.64645C10.108 8.84171 10.108 9.1583 10.3033 9.35356C10.4986 9.54882 10.8152 9.54882 11.0104 9.35356C12.5864 7.77758 12.5864 5.22242 11.0104 3.64645Z" />
+ 
      d="M16 12H8V4H16V12ZM12 5.36035C10.542 5.36037 9.36035 6.54296 9.36035 8.00098C9.36051 9.45886 10.5421 10.6406 12 10.6406C13.4579 10.6406 14.6395 9.45887 14.6396 8.00098C14.6396 6.54294 13.458 5.36035 12 5.36035Z" />

    <path
- 
      d="M8.92309 8.34797C9.64744 8.04729 10.1569 7.33314 10.1569 6.5C10.1569 5.39543 9.26143 4.5 8.15686 4.5C7.05229 4.5 6.15686 5.39543 6.15686 6.5C6.15686 7.33314 6.66629 8.0473 7.39065 8.34798L5.65202 14.4332C5.57759 14.6937 5.74329 14.9348 6.02212 14.9718C6.30095 15.0087 6.58732 14.8275 6.66175 14.567L8.15687 9.33407L9.65198 14.5669C9.7264 14.8274 10.0128 15.0087 10.2916 14.9717C10.5704 14.9348 10.7361 14.6936 10.6617 14.4331L8.92309 8.34797Z" />
- 
  {:else if name === "patch"}
+ 
      d="M1.87988 8.00012C1.87988 6.82928 2.82903 5.88013 3.99988 5.88013C5.17072 5.88013 6.11987 6.82928 6.11987 8.00012C6.11987 9.17097 5.17072 10.1201 3.99988 10.1201C2.82903 10.1201 1.87988 9.17097 1.87988 8.00012Z" />
+ 
  {:else if name === "menu"}
+ 
    <path d="M2 7.5L14 7.5L14 8.5L2 8.5L2 7.5Z" />
+ 
    <path d="M2 3.5L14 3.5L14 4.5L2 4.5L2 3.5Z" />
+ 
    <path d="M2 11.5L14 11.5L14 12.5L2 12.5L2 11.5Z" />
+ 
  {:else if name === "moon"}

    <path
- 
      fill-rule="evenodd"
- 
      d="M11.5 13a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4zM4.5 4c.276 0 .5.247.5.553v5.894c0 .306-.224.553-.5.553s-.5-.247-.5-.553V4.553C4 4.247 4.224 4 4.5 4zM9.565 3.146a.5.5 0 010 .708L7.92 5.5l1.646 1.646a.5.5 0 11-.707.708l-2-2a.5.5 0 010-.708l2-2a.5.5 0 01.707 0z"
- 
      clip-rule="evenodd">
- 
    </path>
+ 
      d="M7.33545 2.38928C6.07966 4.14677 6.24028 6.60466 7.81787 8.18225C9.39586 9.75989 11.8542 9.91984 13.6118 8.66272L14.395 9.15784C14.1681 10.4168 13.5693 11.6232 12.5962 12.5963C10.0579 15.1346 5.94221 15.1344 3.40381 12.5963C0.865398 10.0579 0.865398 5.94234 3.40381 3.40393C4.37633 2.43146 5.58144 1.83329 6.83935 1.60608L7.33545 2.38928ZM5.91064 2.91272C5.25599 3.18051 4.64259 3.57924 4.11084 4.11096C1.96295 6.25885 1.96295 9.7414 4.11084 11.8893C6.25877 14.0369 9.7414 14.037 11.8892 11.8893C12.4218 11.3566 12.8204 10.7416 13.0884 10.0856C11.0983 10.9027 8.72776 10.5059 7.11084 8.88928C5.49473 7.27318 5.09511 4.90264 5.91064 2.91272Z" />
+ 
  {:else if name === "open-external"}
+ 
    <path d="M6 2.5V3.5H3.5V12.5H12.5V10H13.5V13.5H2.5V2.5H6Z" />

    <path
- 
      fill-rule="evenodd"
- 
      d="M7.003 5.5a.5.5 0 00.5.5h3.32c.092 0 .166.075.166.167L11 10.32a.5.5 0 001 0l-.01-4.154c0-.645-.523-1.167-1.167-1.167h-3.32a.5.5 0 00-.5.5zM4.5 13a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4zM4.5 4a1 1 0 100-2 1 1 0 000 2zm0 1a2 2 0 100-4 2 2 0 000 4z"
- 
      clip-rule="evenodd">
- 
    </path>
- 
  {:else if name === "plus"}
+ 
      d="M6.29297 9L11.793 3.5L8.5 3.5L8.5 2.5L13.5 2.5L13.5 7.5L12.5 7.5L12.5 4.20703L7 9.70703L6.29297 9Z" />
+ 
  {:else if name === "patch"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M8 2.83334C8.27614 2.83334 8.5 3.0572 8.5 3.33334V12.6667C8.5 12.9428 8.27614 13.1667 8 13.1667C7.72386 13.1667 7.5 12.9428 7.5 12.6667V3.33334C7.5 3.0572 7.72386 2.83334 8 2.83334Z" />
+ 
      d="M5.5 12C5.5 11.1716 4.82843 10.5 4 10.5C3.17157 10.5 2.5 11.1716 2.5 12C2.5 12.8284 3.17157 13.5 4 13.5C4.82843 13.5 5.5 12.8284 5.5 12ZM13.5 12C13.5 11.1716 12.8284 10.5 12 10.5C11.1716 10.5 10.5 11.1716 10.5 12C10.5 12.8284 11.1716 13.5 12 13.5C12.8284 13.5 13.5 12.8284 13.5 12ZM7.5 2.5H11.5V3.5H9.20703L12.5 6.79297V9.5498C13.6411 9.78142 14.5 10.7905 14.5 12C14.5 13.3807 13.3807 14.5 12 14.5C10.6193 14.5 9.5 13.3807 9.5 12C9.5 10.7905 10.3589 9.78142 11.5 9.5498V7.20703L8.5 4.20703V6.5H7.5V2.5ZM5.5 4C5.5 3.17157 4.82843 2.5 4 2.5C3.17157 2.5 2.5 3.17157 2.5 4C2.5 4.82843 3.17157 5.5 4 5.5C4.82843 5.5 5.5 4.82843 5.5 4ZM6.5 4C6.5 5.20943 5.64105 6.21753 4.5 6.44922V9.5498C5.64114 9.78142 6.5 10.7905 6.5 12C6.5 13.3807 5.38071 14.5 4 14.5C2.61929 14.5 1.5 13.3807 1.5 12C1.5 10.7905 2.35886 9.78142 3.5 9.5498V6.44922C2.35895 6.21753 1.5 5.20943 1.5 4C1.5 2.61929 2.61929 1.5 4 1.5C5.38071 1.5 6.5 2.61929 6.5 4Z" />
+ 
  {:else if name === "pin-filled"}
+ 
    <path d="M5 6L6 2H10L11 6L13 7V10H8H3V7L5 6Z" />

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M13.1667 8C13.1667 8.27614 12.9428 8.5 12.6667 8.5L3.33334 8.5C3.0572 8.5 2.83334 8.27614 2.83334 8C2.83334 7.72386 3.0572 7.5 3.33334 7.5L12.6667 7.5C12.9428 7.5 13.1667 7.72386 13.1667 8Z" />
- 
  {:else if name === "quorum"}
+ 
      d="M10.3906 1.5L11.4287 5.65527L13.2236 6.55273L13.5 6.69141V10.5H8.5V15H7.5V10.5H2.5V6.69141L2.77637 6.55273L4.57031 5.65527L5.60938 1.5H10.3906ZM5.48535 6.12109L5.42969 6.34473L5.22363 6.44727L3.5 7.30859V9.5H12.5V7.30859L10.7764 6.44727L10.5703 6.34473L10.5146 6.12109L9.60938 2.5H6.39062L5.48535 6.12109Z" />
+ 
  {:else if name === "pin-hollow"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M12 4C12.5523 4 13 3.55228 13 3C13 2.44772 12.5523 2 12 2C11.4477 2 11 2.44772 11 3C11 3.55228 11.4477 4 12 4ZM12 5C13.1046 5 14 4.10457 14 3C14 1.89543 13.1046 1 12 1C10.8954 1 10 1.89543 10 3C10 4.10457 10.8954 5 12 5Z" />
+ 
      d="M10.3906 1.5L11.4287 5.65527L13.2236 6.55273L13.5 6.69141V10.5H8.5V15H7.5V10.5H2.5V6.69141L2.77637 6.55273L4.57031 5.65527L5.60938 1.5H10.3906ZM5.48535 6.12109L5.42969 6.34473L5.22363 6.44727L3.5 7.30859V9.5H12.5V7.30859L10.7764 6.44727L10.5703 6.34473L10.5146 6.12109L9.60938 2.5H6.39062L5.48535 6.12109Z" />
+ 
  {:else if name === "play"}
+ 
    <path d="M12 8L4 13V3L12 8Z" />

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M4 14C4.55228 14 5 13.5523 5 13C5 12.4477 4.55228 12 4 12C3.44772 12 3 12.4477 3 13C3 13.5523 3.44772 14 4 14ZM4 15C5.10457 15 6 14.1046 6 13C6 11.8954 5.10457 11 4 11C2.89543 11 2 11.8954 2 13C2 14.1046 2.89543 15 4 15Z" />
+ 
      d="M12.9434 8L3.5 13.9023V2.09766L12.9434 8ZM4.5 12.0977L11.0566 8L4.5 3.90137V12.0977Z" />
+ 
  {:else if name === "plus"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M4 4C4.55228 4 5 3.55228 5 3C5 2.44772 4.55228 2 4 2C3.44772 2 3 2.44772 3 3C3 3.55228 3.44772 4 4 4ZM4 5C5.10457 5 6 4.10457 6 3C6 1.89543 5.10457 1 4 1C2.89543 1 2 1.89543 2 3C2 4.10457 2.89543 5 4 5Z" />
+ 
      d="M8.5 3V7.50488H13.0049V8.50488H8.5V13H7.5V8.50488H3.00488V7.50488H7.5V3H8.5Z" />
+ 
  {:else if name === "question-mark"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M12 14C12.5523 14 13 13.5523 13 13C13 12.4477 12.5523 12 12 12C11.4477 12 11 12.4477 11 13C11 13.5523 11.4477 14 12 14ZM12 15C13.1046 15 14 14.1046 14 13C14 11.8954 13.1046 11 12 11C10.8954 11 10 11.8954 10 13C10 14.1046 10.8954 15 12 15Z" />
+ 
      d="M8.625 11.625C8.625 11.9702 8.34518 12.25 8 12.25C7.65482 12.25 7.375 11.9702 7.375 11.625C7.375 11.2798 7.65482 11 8 11C8.34518 11 8.625 11.2798 8.625 11.625Z" />

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M8 3.5C8.15738 3.5 8.30557 3.5741 8.4 3.7L11.4 7.7C11.5333 7.87778 11.5333 8.12222 11.4 8.3L8.4 12.3C8.30557 12.4259 8.15738 12.5 8 12.5C7.84262 12.5 7.69443 12.4259 7.6 12.3L4.6 8.3C4.46667 8.12222 4.46667 7.87778 4.6 7.7L7.6 3.7C7.69443 3.5741 7.84262 3.5 8 3.5ZM5.625 8L8 11.1667L10.375 8L8 4.83333L5.625 8Z" />
+ 
      d="M9.63379 6.5C9.63379 5.89312 9.41336 5.5453 9.13867 5.33496C8.84286 5.10866 8.42725 5 8 5C7.57445 5 7.20236 5.10724 6.94531 5.32129C6.7043 5.52213 6.5 5.87024 6.5 6.5H5.5C5.5 5.62992 5.79588 4.97787 6.30469 4.55371C6.79763 4.14292 7.42571 4 8 4C8.57275 4 9.22492 4.14134 9.74609 4.54004C10.2882 4.95474 10.6338 5.60725 10.6338 6.5C10.6338 7.32703 10.1246 7.91638 9.6123 8.29102C9.24736 8.55787 8.84058 8.74663 8.5 8.86816V10H7.5V8.10938L7.87891 8.01465C8.16659 7.9427 8.63623 7.76595 9.02148 7.48438C9.40947 7.20067 9.63379 6.87287 9.63379 6.5Z" />
+ 
  {:else if name === "reply"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M4.49592 11.5631L6.0103 9.64167L6.79568 10.2607L5.2813 12.1821L4.49592 11.5631Z" />
+ 
      d="M5.35352 2.35352L3.20703 4.5H14.5V13.5H10V12.5H13.5V5.5H3.20703L5.35352 7.64648L4.64648 8.35352L1.29297 5L4.64648 1.64648L5.35352 2.35352Z" />
+ 
  {:else if name === "repository"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M9.09293 5.6512L10.6073 3.7298L11.3927 4.34882L9.87831 6.27021L9.09293 5.6512Z" />
+ 
      d="M8.22363 9.44727L8 9.55859L7.77637 9.44727L2.5 6.80859V9.69043L8 12.4404L13.5 9.69043V6.80859L8.22363 9.44727ZM3.11816 6L8 8.44043L12.8818 6L8 3.55859L3.11816 6ZM14.5 10.3086L14.2236 10.4473L8.22363 13.4473L8 13.5586L7.77637 13.4473L1.77637 10.4473L1.5 10.3086V5.69141L1.77637 5.55273L7.77637 2.55273L8 2.44141L8.22363 2.55273L14.2236 5.55273L14.5 5.69141V10.3086Z" />
+ 
  {:else if name === "review"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M11.3927 11.5631L9.87831 9.64167L9.09293 10.2607L10.6073 12.1821L11.3927 11.5631Z" />
+ 
      d="M8 3C10.2021 3 11.8273 4.24044 12.874 5.41797C13.4003 6.01012 13.793 6.60046 14.0547 7.04199C14.1857 7.26315 14.2848 7.44857 14.3516 7.58008C14.385 7.64588 14.4112 7.69851 14.4287 7.73535C14.4373 7.75347 14.4435 7.76802 14.4482 7.77832C14.4506 7.78349 14.4527 7.78795 14.4541 7.79102C14.4548 7.79255 14.4556 7.79393 14.4561 7.79492V7.7959L14.457 7.79688L14.5469 8L14.457 8.20312L14.4561 8.20508C14.4556 8.20607 14.4548 8.20745 14.4541 8.20898C14.4527 8.21205 14.4506 8.21651 14.4482 8.22168C14.4435 8.23198 14.4373 8.24653 14.4287 8.26465C14.4112 8.30149 14.385 8.35412 14.3516 8.41992C14.2848 8.55143 14.1857 8.73685 14.0547 8.95801C13.793 9.39954 13.4003 9.98988 12.874 10.582C11.8273 11.7596 10.2021 13 8 13C5.7979 13 4.17267 11.7596 3.12598 10.582C2.59966 9.98988 2.20697 9.39954 1.94531 8.95801C1.81425 8.73685 1.71524 8.55143 1.64844 8.41992C1.61502 8.35412 1.58875 8.30149 1.57129 8.26465C1.5627 8.24653 1.55649 8.23198 1.55176 8.22168C1.54939 8.21651 1.54728 8.21205 1.5459 8.20898C1.54521 8.20745 1.54439 8.20607 1.54395 8.20508V8.2041L1.54297 8.20312L1.45312 8L1.54297 7.79688L1.54395 7.7959V7.79492C1.54439 7.79393 1.54521 7.79255 1.5459 7.79102C1.54728 7.78795 1.54939 7.78349 1.55176 7.77832C1.55649 7.76802 1.5627 7.75347 1.57129 7.73535C1.58875 7.69851 1.61502 7.64588 1.64844 7.58008C1.71524 7.44857 1.81425 7.26315 1.94531 7.04199C2.20697 6.60046 2.59966 6.01012 3.12598 5.41797C4.17267 4.24044 5.7979 3 8 3ZM8 4C6.20223 4 4.82733 5.00965 3.87402 6.08203C3.40052 6.61472 3.04299 7.14962 2.80469 7.55176C2.69678 7.73386 2.61356 7.88751 2.55566 8C2.61356 8.11249 2.69678 8.26614 2.80469 8.44824C3.04299 8.85038 3.40052 9.38528 3.87402 9.91797C4.82733 10.9904 6.20223 12 8 12C9.79777 12 11.1727 10.9904 12.126 9.91797C12.5995 9.38528 12.957 8.85038 13.1953 8.44824C13.3031 8.26635 13.3855 8.11246 13.4434 8C13.3855 7.88754 13.3031 7.73365 13.1953 7.55176C12.957 7.14962 12.5995 6.61472 12.126 6.08203C11.1727 5.00965 9.79777 4 8 4ZM9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5C8.82843 9.5 9.5 8.82843 9.5 8ZM10.5 8C10.5 9.38071 9.38071 10.5 8 10.5C6.61929 10.5 5.5 9.38071 5.5 8C5.5 6.61929 6.61929 5.5 8 5.5C9.38071 5.5 10.5 6.61929 10.5 8Z" />
+ 
  {:else if name === "seed"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M6.79568 5.6512L5.28129 3.7298L4.49591 4.34882L6.0103 6.27021L6.79568 5.6512Z" />
- 
  {:else if name === "repo"}
+ 
      d="M12.3535 6.35352L7.5 11.207V14H6.5V11.207L4.64648 9.35352L5.35352 8.64648L7 10.293L11.6465 5.64648L12.3535 6.35352Z" />

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M8.3143 2.03576C8.43351 1.98808 8.56649 1.98808 8.6857 2.03576L14.6857 4.43576C14.8755 4.51169 15 4.69555 15 4.9V12.1C15 12.3045 14.8755 12.4883 14.6857 12.5642L8.6857 14.9642C8.56649 15.0119 8.43351 15.0119 8.3143 14.9642L2.3143 12.5642C2.12448 12.4883 2 12.3045 2 12.1V4.9C2 4.69555 2.12448 4.51169 2.3143 4.43576L8.3143 2.03576ZM3 5.63852L8 7.63852V13.7615L3 11.7615V5.63852ZM9 13.7615L14 11.7615V5.63852L9 7.63852V13.7615ZM8.5 6.76148L13.1537 4.9L8.5 3.03852L3.84629 4.9L8.5 6.76148Z" />
- 
  {:else if name === "seedling"}
+ 
      d="M14 6.5V4H11.5C10.1193 4 9 5.11929 9 6.5C9 7.88071 10.1193 9 11.5 9V10C9.567 10 8 8.433 8 6.5C8 4.567 9.567 3 11.5 3H15V6.5C15 8.433 13.433 10 11.5 10V9C12.8807 9 14 7.88071 14 6.5Z" />

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M8.445 11.527c-.137-1.49.08-3.501.96-4.474.925.206 2.777-.43 3.45-1.713.61-1.165.5-2.874.843-3.34-4.026 0-4.693 4.161-5.846 7.278C6.999 6.974 4.324 5.422 2 6.368c.945.654 1.534 2.265 2.814 2.41.403.045 1.135 0 1.618-.91 1.14.926.974 2.048.825 3.662-.06.65-.284 1.27-.252 1.786.048.912 1.646.912 1.694 0 .034-.516-.192-1.136-.252-1.786l-.002-.003z" />
- 
  {:else if name === "settings"}
+ 
      d="M5 7.5C5 6.67157 4.32843 6 3.5 6C2.67157 6 2 6.67157 2 7.5C2 8.32843 2.67157 9 3.5 9V10C2.11929 10 1 8.88071 1 7.5C1 6.11929 2.11929 5 3.5 5C4.88071 5 6 6.11929 6 7.5C6 8.88071 4.88071 10 3.5 10V9C4.32843 9 5 8.32843 5 7.5Z" />
+ 
  {:else if name === "seed-filled"}

    <path
- 
      d="M12.5 4C12.5 3.44772 12.0523 3 11.5 3C10.9477 3 10.5 3.44772 10.5 4C10.5 4.55228 10.9477 5 11.5 5H14C14.2761 5 14.5 4.77614 14.5 4.5C14.5 4.22386 14.2761 4 14 4H12.5Z" />
+ 
      d="M12.3535 6.35352L7.5 11.207V14H6.5V11.207L4.64648 9.35352L5.35352 8.64648L7 10.293L11.6465 5.64648L12.3535 6.35352Z" />

    <path
- 
      d="M2.5 4.5C2.5 4.22386 2.72386 4 3 4H9C9.27614 4 9.5 4.22386 9.5 4.5C9.5 4.77614 9.27614 5 9 5H3C2.72386 5 2.5 4.77614 2.5 4.5Z" />
+ 
      d="M15 6.5C15 8.433 13.433 10 11.5 10C9.567 10 8 8.433 8 6.5C8 4.567 9.567 3 11.5 3H15V6.5Z" />

    <path
- 
      d="M2.5 12.5C2.5 12.2239 2.72386 12 3 12H6C6.27614 12 6.5 12.2239 6.5 12.5C6.5 12.7761 6.27614 13 6 13H3C2.72386 13 2.5 12.7761 2.5 12.5Z" />
+ 
      d="M14 6.5V4H11.5C10.1193 4 9 5.11929 9 6.5C9 7.88071 10.1193 9 11.5 9V10C9.567 10 8 8.433 8 6.5C8 4.567 9.567 3 11.5 3H15V6.5C15 8.433 13.433 10 11.5 10V9C12.8807 9 14 7.88071 14 6.5Z" />

    <path
- 
      d="M2.5 8.5C2.5 8.22386 2.72386 8 3 8H4.5C4.5 7.44772 4.94772 7 5.5 7C6.05228 7 6.5 7.44772 6.5 8C6.5 8.55228 6.05228 9 5.5 9H3C2.72386 9 2.5 8.77614 2.5 8.5Z" />
+ 
      d="M3.5 5C4.88071 5 6 6.11929 6 7.5C6 8.88071 4.88071 10 3.5 10C2.11929 10 1 8.88071 1 7.5C1 6.11929 2.11929 5 3.5 5Z" />

    <path
- 
      d="M9.5 12H14C14.2761 12 14.5 12.2239 14.5 12.5C14.5 12.7761 14.2761 13 14 13H8.5C7.94772 13 7.5 12.5523 7.5 12C7.5 11.4477 7.94772 11 8.5 11C9.05229 11 9.5 11.4477 9.5 12Z" />
+ 
      d="M5 7.5C5 6.67157 4.32843 6 3.5 6C2.67157 6 2 6.67157 2 7.5C2 8.32843 2.67157 9 3.5 9V10C2.11929 10 1 8.88071 1 7.5C1 6.11929 2.11929 5 3.5 5C4.88071 5 6 6.11929 6 7.5C6 8.88071 4.88071 10 3.5 10V9C4.32843 9 5 8.32843 5 7.5Z" />
+ 
  {:else if name === "settings"}

    <path
- 
      d="M8 8C7.72386 8 7.5 8.22386 7.5 8.5C7.5 8.77614 7.72386 9 8 9H14C14.2761 9 14.5 8.77614 14.5 8.5C14.5 8.22386 14.2761 8 14 8H8Z" />
- 
  {:else if name === "share"}
+ 
      d="M5.5 10V14H4.5V10H5.5ZM3.5 11.5V12.5H2V11.5H3.5ZM14 11.5V12.5H6.5V11.5H14ZM11.5 6V10H10.5V6H11.5ZM9.5 7.5V8.5H2V7.5H9.5ZM14 7.5V8.5H12.5V7.5H14ZM5.5 2V6H4.5V2H5.5ZM3.5 3.5V4.5H2V3.5H3.5ZM14 3.5V4.5H6.5V3.5H14Z" />
+ 
  {:else if name === "stop"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M3.00001 11.8177L3.00001 12.8333C3.00001 13.4777 3.52235 14 4.16668 14L11.7761 14C12.4204 14 12.9427 13.4777 12.9427 12.8333L12.9427 8.16667C12.9427 7.52234 12.4204 7 11.7761 7L10.4558 7C10.1811 7.00223 9.9592 7.22557 9.9592 7.50073C9.9592 7.77728 10.1834 8.00146 10.4599 8.00146C10.4729 8.00146 10.4858 8.00097 10.4985 8L11.7761 8C11.8681 8 11.9427 8.07462 11.9427 8.16667L11.9427 12.8333C11.9427 12.9254 11.8681 13 11.7761 13L4.16668 13C4.07463 13 4.00001 12.9254 4.00001 12.8333L4.00001 8.16667C4.00001 8.07462 4.07463 8 4.16668 8L5.42271 8C5.43545 8.00097 5.44832 8.00146 5.4613 8.00146C5.73785 8.00146 5.96204 7.77728 5.96204 7.50073C5.96204 7.23296 5.75185 7.01428 5.48746 7.00067L5.4613 7L4.16668 7C3.52234 7 3.00001 7.52233 3.00001 8.16667L3.00001 9.18226L3 9.18498L3 11.815L3.00001 11.8177Z" />
+ 
      d="M10.707 1.49994L14.5 5.29291V10.707L10.707 14.4999H5.29297L1.5 10.707V5.29291L5.29297 1.49994H10.707ZM2.5 5.70697V10.2929L5.70703 13.4999H10.293L13.5 10.2929V5.70697L10.293 2.49994H5.70703L2.5 5.70697Z" />

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M10.9596 5.37141C10.7643 5.56667 10.4477 5.56667 10.2525 5.37141L8.43937 3.55829L8.43937 10.5C8.43937 10.7761 8.21551 11 7.93937 11C7.66322 11 7.43937 10.7761 7.43937 10.5L7.43937 3.5583L5.62626 5.37141C5.431 5.56668 5.11441 5.56667 4.91915 5.37141C4.72389 5.17615 4.72389 4.85957 4.91915 4.66431L7.11441 2.46904C7.57002 2.01343 8.30872 2.01343 8.76433 2.46904L10.9596 4.66431C11.1549 4.85957 11.1549 5.17615 10.9596 5.37141Z" />
+ 
      d="M9 11C9 11.5523 8.55228 12 8 12C7.44772 12 7 11.5523 7 11C7 10.4477 7.44772 10 8 10C8.55228 10 9 10.4477 9 11Z" />
+ 
    <path d="M8.75 4H7.25L7.5 9H8.5L8.75 4Z" />

  {:else if name === "sun"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM8 11C9.65685 11 11 9.65685 11 8C11 6.34315 9.65685 5 8 5C6.34315 5 5 6.34315 5 8C5 9.65685 6.34315 11 8 11Z" />
- 
    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M8 1.5C8.27614 1.5 8.5 1.72386 8.5 2V3.5C8.5 3.77614 8.27614 4 8 4C7.72386 4 7.5 3.77614 7.5 3.5V2C7.5 1.72386 7.72386 1.5 8 1.5Z" />
- 
    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M8 12C8.27614 12 8.5 12.2239 8.5 12.5V14C8.5 14.2761 8.27614 14.5 8 14.5C7.72386 14.5 7.5 14.2761 7.5 14V12.5C7.5 12.2239 7.72386 12 8 12Z" />
- 
    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M14.5 8C14.5 8.27614 14.2761 8.5 14 8.5H12.5C12.2239 8.5 12 8.27614 12 8C12 7.72386 12.2239 7.5 12.5 7.5H14C14.2761 7.5 14.5 7.72386 14.5 8Z" />
+ 
      d="M10.5 8C10.5 6.61929 9.38071 5.5 8 5.5C6.61929 5.5 5.5 6.61929 5.5 8C5.5 9.38071 6.61929 10.5 8 10.5C9.38071 10.5 10.5 9.38071 10.5 8ZM11.5 8C11.5 9.933 9.933 11.5 8 11.5C6.067 11.5 4.5 9.933 4.5 8C4.5 6.067 6.067 4.5 8 4.5C9.933 4.5 11.5 6.067 11.5 8Z" />
+ 
    <path d="M8.5 1V3.5H7.5V1H8.5Z" />

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M4 8C4 8.27614 3.77614 8.5 3.5 8.5H2C1.72386 8.5 1.5 8.27614 1.5 8C1.5 7.72386 1.72386 7.5 2 7.5H3.5C3.77614 7.5 4 7.72386 4 8Z" />
+ 
      d="M3.40535 2.70024L5.17312 4.46801L4.46601 5.17512L2.69824 3.40735L3.40535 2.70024Z" />

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M12.5962 12.5962C12.4009 12.7915 12.0843 12.7915 11.8891 12.5962L10.8284 11.5355C10.6332 11.3403 10.6332 11.0237 10.8284 10.8284C11.0237 10.6332 11.3403 10.6332 11.5355 10.8284L12.5962 11.8891C12.7915 12.0843 12.7915 12.4009 12.5962 12.5962Z" />
+ 
      d="M1.00488 7.505L3.50488 7.505L3.50488 8.505L1.00488 8.505L1.00488 7.505Z" />

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M5.17157 5.17157C4.97631 5.36683 4.65973 5.36683 4.46447 5.17157L3.40381 4.11091C3.20854 3.91565 3.20854 3.59907 3.40381 3.40381C3.59907 3.20854 3.91565 3.20854 4.11091 3.40381L5.17157 4.46447C5.36683 4.65973 5.36683 4.97631 5.17157 5.17157Z" />
+ 
      d="M2.705 12.5997L4.47277 10.832L5.17988 11.5391L3.41211 13.3069L2.705 12.5997Z" />
+ 
    <path d="M8.5 12.5V15H7.5V12.5H8.5Z" />

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M3.4038 12.5962C3.20854 12.4009 3.20854 12.0843 3.4038 11.8891L4.46446 10.8284C4.65972 10.6332 4.97631 10.6332 5.17157 10.8284C5.36683 11.0237 5.36683 11.3403 5.17157 11.5355L4.11091 12.5962C3.91565 12.7915 3.59906 12.7915 3.4038 12.5962Z" />
+ 
      d="M11.5372 10.832L13.305 12.5997L12.5978 13.3068L10.8301 11.5391L11.5372 10.832Z" />

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M10.8284 5.17157C10.6332 4.97631 10.6332 4.65973 10.8284 4.46447L11.8891 3.40381C12.0843 3.20854 12.4009 3.20854 12.5962 3.40381C12.7915 3.59907 12.7915 3.91565 12.5962 4.11091L11.5355 5.17157C11.3403 5.36684 11.0237 5.36684 10.8284 5.17157Z" />
- 
  {:else if name === "user"}
+ 
      d="M12.5049 7.505L15.0049 7.505L15.0049 8.505L12.5049 8.505L12.5049 7.505Z" />

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M11 4C11 5.65685 9.65685 7 8 7C6.34315 7 5 5.65685 5 4C5 2.34315 6.34315 1 8 1C9.65685 1 11 2.34315 11 4ZM10 4C10 5.10457 9.10457 6 8 6C6.89543 6 6 5.10457 6 4C6 2.89543 6.89543 2 8 2C9.10457 2 10 2.89543 10 4Z" />
+ 
      d="M10.8368 4.468L12.6046 2.70024L13.3117 3.40734L11.5439 5.17511L10.8368 4.468Z" />
+ 
  {:else if name === "trash"}

    <path
- 
      fill-rule="evenodd"
- 
      clip-rule="evenodd"
- 
      d="M8 8C4.68629 8 2 10.6117 2 13.8333V14C2 14.5523 2.44772 15 3 15H13C13.5523 15 14 14.5523 14 14V13.8333C14 10.6117 11.3137 8 8 8ZM3 13.8333C3 11.1903 5.21183 9 8 9C10.7882 9 13 11.1903 13 13.8333V14H3L3 13.8333Z" />
+ 
      d="M13.5 3.5V4.5H12.5V13.5H3.5V4.5H2.5V3.5H13.5ZM4.5 12.5H11.5V4.5H4.5V12.5Z" />
+ 
    <path d="M10.5 1.5V3.5H9.5V2.5H6.5V3.5H5.5V1.5H10.5Z" />
+ 
    <path d="M6 6H7V11H6V6Z" />
+ 
    <path d="M9 6H10V11H9V6Z" />

  {:else}

    {unreachable(name)}

  {/if}
modified src/components/IconButton.svelte
@@ -18,26 +18,26 @@
  .button {

    user-select: none;

    background-color: transparent;
- 
    border-radius: var(--border-radius-tiny);
- 
    color: var(--color-foreground-dim);
+ 
    border-radius: var(--border-radius-sm);
+ 
    color: var(--color-text-tertiary);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 8px 6px;

    gap: 0.25rem;
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

  }

  .inline {

    display: inline-flex;

  }

  .button:hover {
- 
    color: var(--color-foreground-contrast);
- 
    background-color: var(--color-fill-ghost);
+ 
    color: var(--color-text-primary);
+ 
    background-color: var(--color-surface-strong);

  }

  .disabled,

  .disabled:hover {
- 
    color: var(--color-fill-counter);
+ 
    color: var(--color-surface-alpha-subtle);

    background-color: unset;

  }

</style>
modified src/components/Id.svelte
@@ -1,26 +1,24 @@
<script lang="ts">

  import type { ComponentProps } from "svelte";
- 


  import debounce from "lodash/debounce";
+ 
  import Icon from "@app/components/Icon.svelte";
+ 


  import { formatObjectId } from "@app/lib/utils";

  import { toClipboard } from "@app/lib/utils";
- 
  import Icon from "./Icon.svelte";
- 


  export let id: string;

  export let shorten: boolean = true;
- 
  export let style: "oid" | "commit" | "none" = "oid";

  export let ariaLabel: string | undefined = undefined;

  export let styleWidth: string | undefined = undefined;

  export let title: string | undefined = undefined;
- 
  let icon: ComponentProps<Icon>["name"] = "clipboard";
+ 
  let icon: ComponentProps<Icon>["name"] = "copy";

  const text = "Click to copy";

  let tooltip = text;



  const restoreIcon = debounce(() => {
- 
    icon = "clipboard";
+ 
    icon = "copy";

    tooltip = text;

    visible = false;

  }, 1000);
@@ -54,36 +52,30 @@
    gap: 0.5rem;

    justify-content: center;

    z-index: 20;
- 
    background: var(--color-fill-ghost);
- 
    color: var(--color-fill-gray);
- 
    border: 1px solid var(--color-border-default);
- 
    border-radius: var(--border-radius-tiny);
+ 
    background: var(--color-surface-subtle);
+ 
    color: var(--color-text-primary);
+ 
    border: 1px solid var(--color-border-subtle);
+ 
    border-radius: var(--border-radius-md);

    box-shadow: var(--elevation-low);
- 
    font-family: var(--font-family-sans-serif);
- 
    font-size: var(--font-size-small);
- 
    font-weight: var(--font-weight-regular);
+ 
    font: var(--txt-body-m-regular);

    white-space: nowrap;
- 
    padding: 0.125rem 0.5rem;
- 
  }
- 
  .target-commit:hover {
- 
    color: var(--color-foreground-contrast);
- 
  }
- 
  .target-oid:hover {
- 
    color: var(--color-foreground-emphasized-hover);
+ 
    width: max-content;
+ 
    padding: 0.25rem 0.5rem;

  }

</style>



<div class="container" style:width={styleWidth} {title}>

  <!-- svelte-ignore a11y-click-events-have-key-events -->

  <div
- 
    style:display="flex"
+ 
    style:display="inline-flex"
+ 
    style:flex-wrap="wrap"

    on:mouseenter={() => {

      setVisible(true);

    }}

    on:mouseleave={() => {

      setVisible(false);

    }}
- 
    class="target-{style} global-{style}"
+ 
    class="txt-id"

    style:cursor="copy"

    aria-label={ariaLabel}

    on:click|preventDefault|stopPropagation={async () => {
modified src/components/KeyHint.svelte
@@ -5,9 +5,8 @@
<style>

  kbd {

    align-items: center;
- 
    border-radius: var(--border-radius-tiny);
- 
    border: 1px solid var(--color-border-default);
- 
    font-family: var(--font-family-sans-serif);
+ 
    border-radius: var(--border-radius-sm);
+ 
    border: 1px solid var(--color-border-mid);

    justify-content: center;

    padding: 0 0.25rem;

  }
added src/components/Layout.svelte
@@ -0,0 +1,69 @@
+ 
<script lang="ts">
+ 
  import Header from "@app/components/Header.svelte";
+
+ 
  export let stylePaddingBottom: string = "0";
+ 
</script>
+
+ 
<style>
+ 
  .content {
+ 
    width: 100%;
+ 
    display: grid;
+ 
    grid-template-columns: var(--global-left-sidebar-width) auto;
+ 
    grid-template-areas: "left center";
+ 
    height: calc(100vh - var(--global-header-height));
+ 
  }
+ 
  .center {
+ 
    overflow-y: auto;
+ 
  }
+ 
  .left {
+ 
    grid-area: left;
+ 
    background-color: var(--color-surface-base);
+ 
    height: calc(100vh - var(--global-header-height));
+ 
  }
+ 
  .center {
+ 
    grid-area: center;
+ 
    min-width: 23rem;
+ 
    border-left: 1px solid var(--color-border-subtle);
+ 
  }
+
+ 
  @media (max-width: 719.98px) {
+ 
    .content {
+ 
      display: flex;
+ 
      flex-direction: column;
+ 
      height: 100%;
+ 
      overflow-y: visible;
+ 
    }
+ 
    .left {
+ 
      position: relative;
+ 
      height: auto;
+ 
      width: 100%;
+ 
      overflow-y: visible;
+ 
      z-index: 100;
+ 
    }
+ 
    .center {
+ 
      position: relative;
+ 
      height: 100%;
+ 
      width: 100%;
+ 
      overflow-y: visible;
+ 
    }
+ 
  }
+ 
</style>
+
+ 
{#if $$slots.breadcrumbs}
+ 
  <Header>
+ 
    <svelte:fragment slot="breadcrumbs">
+ 
      <slot name="breadcrumbs" />
+ 
    </svelte:fragment>
+ 
  </Header>
+ 
{:else}
+ 
  <Header />
+ 
{/if}
+ 
<div class="content">
+ 
  <div class="left">
+ 
    <slot name="sidebar" />
+ 
  </div>
+
+ 
  <div class="center" style:padding-bottom={stylePaddingBottom}>
+ 
    <slot name="center" />
+ 
  </div>
+ 
</div>
modified src/components/Link.svelte
@@ -9,6 +9,7 @@
  export let styleHoverState: boolean = false;

  export let styleTextOverflow: boolean = false;

  export let title: string | undefined = undefined;
+ 
  export let ariaLabel: string | undefined = undefined;

  export let style: string | undefined = undefined;



  const dispatch = createEventDispatcher<{
@@ -44,6 +45,7 @@
  class:hover-style={styleHoverState}

  on:click={navigateToRoute}

  href={routeToPath(route)}
+ 
  aria-label={ariaLabel}

  {title}

  {style}>

  <slot />
modified src/components/List.svelte
@@ -4,11 +4,11 @@


<style>

  .list {
- 
    border-top: 1px solid var(--color-fill-separator);
- 
    border-bottom: 1px solid var(--color-fill-separator);
+ 
    border-top: 1px solid var(--color-border-subtle);
+ 
    border-bottom: 1px solid var(--color-border-subtle);

  }

  .list-item:not(:last-child) {
- 
    border-bottom: 1px solid var(--color-fill-separator);
+ 
    border-bottom: 1px solid var(--color-border-subtle);

  }

</style>
modified src/components/Loading.svelte
@@ -44,15 +44,15 @@
  .spinner > div {

    width: 18px;

    height: 18px;
- 
    background-color: var(--color-fill-secondary);
- 
    border-radius: var(--border-radius-round);
+ 
    background-color: var(--color-surface-brand-primary);
+ 
    border-radius: var(--border-radius-full);

    display: inline-block;

    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;

    animation: sk-bouncedelay 1.4s infinite ease-in-out both;

  }



  .spinner.grayscale > div {
- 
    background-color: var(--color-fill-ghost);
+ 
    background-color: var(--color-surface-mid);

  }



  .spinner.condensed > div {
added src/components/Logo.svelte
@@ -0,0 +1,38 @@
+ 
<script lang="ts">
+ 
</script>
+
+ 
<svg
+ 
  viewBox="0 0 69 16"
+ 
  fill="none"
+ 
  xmlns="http://www.w3.org/2000/svg"
+ 
  width="69"
+ 
  height="16">
+ 
  <path
+ 
    d="M1.84555 13.7149H0V15.7954H6.28119V13.7149H4.466V7.01257H8.02772V4.61917H1.84555V13.7149Z"
+ 
    fill="currentColor">
+ 
  </path>
+ 
  <path
+ 
    d="M9.20898 12.8172C9.20898 10.7169 10.6268 9.62514 13.2473 9.23834L15.1852 8.96243C15.8783 8.86078 16.2149 8.63636 16.2149 8.06474C16.2149 6.98355 15.4704 6.37233 14.1859 6.37233C12.8195 6.37233 12.0961 7.10633 11.8809 8.14659L9.35156 7.76903C9.73968 5.91293 11.279 4.41458 14.1846 4.41458C17.0902 4.41458 18.8446 6.0159 18.8446 8.56507V15.7941H16.2651V13.7241H16.1634C15.807 14.9479 14.5938 15.9974 12.7483 15.9974C10.5964 15.9974 9.2103 14.7327 9.2103 12.8159L9.20898 12.8172ZM16.2136 10.9109V10.544L13.7872 10.9928C12.5331 11.2278 11.9826 11.7572 11.9826 12.5624C11.9826 13.4601 12.6453 13.9895 13.6552 13.9895C15.3687 13.9895 16.2149 12.7459 16.2149 10.9096L16.2136 10.9109Z"
+ 
    fill="currentColor">
+ 
  </path>
+ 
  <path
+ 
    d="M20.5122 10.1861C20.5122 6.65872 22.3274 4.41449 25.0191 4.41449C26.5492 4.41449 27.7518 5.28182 28.3234 6.61647H28.4158V0.826372H31.0469V15.7953H28.4158V13.7465H28.3142C27.6211 15.1841 26.5505 16 25.031 16C22.3287 16 20.5135 13.7267 20.5135 10.1874L20.5122 10.1861ZM25.8455 13.7953C27.4152 13.7953 28.4053 12.3775 28.4053 10.1861C28.4053 7.99469 27.4165 6.58611 25.8455 6.58611C24.2746 6.58611 23.2858 7.99337 23.2858 10.1861C23.2858 12.3788 24.2851 13.7953 25.8455 13.7953Z"
+ 
    fill="currentColor">
+ 
  </path>
+ 
  <path
+ 
    d="M37.3981 13.7149H39.2436V15.7954H32.9624V13.7149H34.7776V6.69967H33.0957V4.61914H37.3981V13.7149ZM34.441 1.54983C34.441 0.693069 35.1551 0 36.0212 0C36.8872 0 37.5816 0.693069 37.5816 1.54983C37.5816 2.4066 36.899 3.08911 36.0212 3.08911C35.1433 3.08911 34.441 2.4066 34.441 1.54983Z"
+ 
    fill="currentColor">
+ 
  </path>
+ 
  <path
+ 
    d="M50.0937 7.98415L47.5644 8.52409C47.299 7.28052 46.5756 6.54653 45.3413 6.54653C43.7505 6.54653 42.7406 7.8825 42.7406 10.2073C42.7406 12.532 43.7598 13.868 45.3505 13.868C46.4924 13.868 47.3083 13.2462 47.5433 12.0026H50.1532C49.8574 14.5109 48.1954 16 45.3505 16C42.0871 16 39.9868 13.7267 39.9868 10.2086C39.9868 6.69042 42.0871 4.41716 45.34 4.41716C48.0317 4.41716 49.765 5.86534 50.0911 7.98547L50.0937 7.98415Z"
+ 
    fill="currentColor">
+ 
  </path>
+ 
  <path
+ 
    d="M55.5284 13.7148H57.374V15.7953H51.0928V13.7148H52.908V2.90558H51.2261V0.826372H55.5284V13.7148Z"
+ 
    fill="currentColor">
+ 
  </path>
+ 
  <path
+ 
    d="M57.9751 10.2271C57.9751 6.74989 60.1269 4.41458 63.3177 4.41458C66.2444 4.41458 68.5388 6.34197 68.2325 10.808H60.7276C60.8807 12.7855 61.921 13.938 63.3282 13.938C64.5414 13.938 65.3058 13.336 65.6015 12.2958H68.2629C67.9777 14.1822 66.1731 15.9974 63.3282 15.9974C60.0965 15.9974 57.9751 13.744 57.9751 10.2258V10.2271ZM65.6015 9.01392C65.5408 7.37167 64.7038 6.38289 63.3282 6.38289C62.0741 6.38289 61.0853 7.10633 60.7896 9.01392H65.6028H65.6015Z"
+ 
    fill="currentColor">
+ 
  </path>
+ 
</svg>
modified src/components/Markdown.svelte
@@ -257,9 +257,8 @@
    word-break: break-word;

  }

  .front-matter {
- 
    font-size: var(--font-size-tiny);
- 
    font-family: var(--font-family-monospace);
- 
    border: 1px dashed var(--color-border-default);
+ 
    font: var(--txt-body-s-regular);
+ 
    border: 1px dashed var(--color-border-mid);

    padding: 0.5rem;

    margin-bottom: 2rem;

  }
@@ -274,19 +273,17 @@
  }



  .markdown :global(h1) {
- 
    font-size: calc(var(--font-size-x-large) * 0.75);
- 
    font-weight: var(--font-weight-semibold);
+ 
    font: var(--txt-heading-l);

    padding: 1rem 0 0.5rem 0;

    margin: 0 0 0.75rem;
- 
    border-bottom: 1px solid var(--color-border-hint);
+ 
    border-bottom: 1px solid var(--color-border-subtle);

  }



  .markdown :global(h2) {
- 
    font-size: var(--font-size-medium);
- 
    font-weight: var(--font-weight-regular);
+ 
    font: var(--txt-heading-m);

    padding: 0.25rem 0;

    margin: 2rem 0 0.5rem;
- 
    border-bottom: 1px solid var(--color-border-hint);
+ 
    border-bottom: 1px solid var(--color-border-subtle);

  }



  .markdown :global(.pre-wrapper) {
@@ -302,8 +299,8 @@
  }



  .markdown :global(radicle-clipboard) {
- 
    background-color: var(--color-fill-ghost);
- 
    border-radius: var(--border-radius-small);
+ 
    background-color: var(--color-surface-alpha-mid);
+ 
    border-radius: var(--border-radius-sm);

  }



  .markdown :global(.pre-wrapper:hover > radicle-clipboard) {
@@ -311,29 +308,26 @@
  }



  .markdown :global(h3) {
- 
    font-size: calc(var(--font-size-medium) * 0.9);
- 
    font-weight: var(--font-weight-semibold);
+ 
    font: var(--txt-heading-m);

    padding: 0.5rem 0;

    margin: 1rem 0 0.25rem;

  }



  .markdown :global(h4) {
- 
    font-weight: var(--font-weight-semibold);
- 
    font-size: var(--font-size-regular);
+ 
    font: var(--txt-body-l-semibold);

    padding: 0.5rem 0;

    margin: 1rem 0 0.125rem;

  }



  .markdown :global(h5),

  .markdown :global(h6) {
- 
    font-weight: var(--font-weight-semibold);
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-semibold);

    padding: 0.35rem 0;

    margin: 1rem 0 0.125rem;

  }



  .markdown :global(h6) {
- 
    color: var(--color-foreground-dim);
+ 
    color: var(--color-text-tertiary);

  }



  .markdown :global(p) {
@@ -348,7 +342,7 @@


  .markdown :global(li.task-item) {

    list-style-type: none;
- 
    color: var(--color-foreground-dim);
+ 
    color: var(--color-text-tertiary);

  }

  .markdown :global(li.task-item radicle-icon-small) {

    margin-right: 0.2rem;
@@ -359,14 +353,14 @@
  }



  .markdown :global(blockquote) {
- 
    color: var(--color-foreground-dim);
- 
    border-left: 0.3rem solid var(--color-fill-ghost);
+ 
    color: var(--color-text-tertiary);
+ 
    border-left: 0.3rem solid var(--color-surface-alpha-mid);

    padding: 0 0 0 1rem;

    margin: 1rem 0 1rem 0;

  }



  .markdown :global(strong) {
- 
    font-weight: var(--font-weight-semibold);
+ 
    font-weight: 600;

  }



  .markdown :global(.footnote-ref) {
@@ -377,11 +371,7 @@
  .markdown :global(.footnote-ref),

  .markdown :global(.footnote > .marker),

  .markdown :global(.footnote > .ref-arrow) {
- 
    color: var(--color-foreground-dim);
- 
  }
- 
  .markdown :global(.footnote-ref:hover),
- 
  .markdown :global(.footnote .ref-arrow:hover) {
- 
    color: var(--color-foreground);
+ 
    color: var(--color-text-tertiary);

  }

  .markdown :global(.footnote) {

    margin-bottom: 0;
@@ -397,10 +387,9 @@
  }



  .markdown :global(code) {
- 
    font-family: var(--font-family-monospace);
- 
    font-size: var(--font-size-small);
- 
    background-color: var(--color-fill-ghost);
- 
    border-radius: var(--border-radius-tiny);
+ 
    font: var(--txt-code-regular);
+ 
    background-color: var(--color-surface-alpha-mid);
+ 
    border-radius: var(--border-radius-sm);

    padding: 0.125rem 0.25rem;

  }
@@ -414,11 +403,10 @@
  }



  .markdown :global(pre) {
- 
    font-family: var(--font-family-monospace);
- 
    font-size: var(--font-size-regular);
- 
    background-color: var(--color-fill-ghost);
+ 
    font: var(--txt-code-regular);
+ 
    background-color: var(--color-surface-alpha-mid);

    padding: 1rem !important;
- 
    border-radius: var(--border-radius-small);
+ 
    border-radius: var(--border-radius-sm);

    overflow: scroll;

    scrollbar-width: none;

  }
@@ -434,13 +422,13 @@
  }

  .markdown :global(a) {

    text-decoration: underline;
- 
    text-decoration-color: var(--color-foreground-dim);
+ 
    text-decoration-color: var(--color-text-tertiary);

  }

  .markdown :global(a.no-underline) {

    text-decoration: none;

  }

  .markdown :global(a:hover) {
- 
    text-decoration-color: var(--color-foreground-contrast);
+ 
    text-decoration-color: var(--color-text-primary);

  }



  .markdown :global(hr) {
@@ -449,14 +437,14 @@
    overflow: hidden;

    background: transparent;

    border: 0;
- 
    border-bottom: 1px solid var(--color-border-hint);
+ 
    border-bottom: 1px solid var(--color-border-subtle);

  }



  .markdown :global(ol) {

    line-height: 1.625;

    list-style-type: decimal;

    margin-bottom: 1rem;
- 
    padding-left: 1.5rem;
+ 
    padding-left: 2rem;

  }



  .markdown :global(ul) {
@@ -480,19 +468,19 @@
  .markdown :global(table) {

    margin: 1.5rem 0;

    border-collapse: collapse;
- 
    border-radius: var(--border-radius-regular);
+ 
    border-radius: var(--border-radius-sm);

    border-style: hidden;
- 
    box-shadow: 0 0 0 1px var(--color-border-hint);
+ 
    box-shadow: 0 0 0 1px var(--color-border-subtle);

    overflow: hidden;

  }

  .markdown :global(td) {

    text-align: left;

    text-overflow: ellipsis;
- 
    border: 1px solid var(--color-border-hint);
+ 
    border: 1px solid var(--color-border-subtle);

    padding: 0.5rem 1rem;

  }

  .markdown :global(tr:nth-child(even)) {
- 
    background-color: var(--color-background-default);
+ 
    background-color: var(--color-surface-base);

  }

  .markdown :global(th) {

    text-align: center;
@@ -506,7 +494,6 @@
    margin-top: 0 !important;

  }

  .markdown :global(dl dt) {
- 
    font-style: italic;

    margin-top: 1rem;

  }

  .markdown :global(dl dd) {
@@ -520,7 +507,7 @@
      <tbody>

        {#each frontMatter as [key, val]}

          <tr>
- 
            <td><span class="txt-bold">{key}</span></td>
+ 
            <td><span class="txt-body-m-semibold">{key}</span></td>

            <td>{val}</td>

          </tr>

        {/each}
modified src/components/Modal.svelte
@@ -10,10 +10,9 @@
<style>

  .modal {

    padding: 2rem;
- 
    border-radius: var(--border-radius-regular);
- 
    font-family: var(--font-family-sans-serif);
- 
    background: var(--color-background-float);
- 
    border: 1px solid var(--color-border-hint);
+ 
    border-radius: var(--border-radius-md);
+ 
    background: var(--color-surface-subtle);
+ 
    border: 1px solid var(--color-border-subtle);

    box-shadow: var(--elevation-low);

    min-width: 34rem;

    max-width: 100vw;
@@ -27,18 +26,17 @@
    justify-content: center;

  }

  .title {
- 
    font-size: var(--font-size-large);
- 
    font-weight: var(--font-weight-semibold);
+ 
    font: var(--txt-heading-l);

    text-align: center;

    text-overflow: ellipsis;

    overflow: hidden;

  }

  .subtitle {
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-heading-s);

    text-align: center;

  }

  .body {
- 
    font-size: var(--font-size-regular);
+ 
    font: var(--txt-body-m-regular);

    display: flex;

    justify-content: center;

  }
modified src/components/NodeId.svelte
@@ -2,7 +2,7 @@
  import type { BaseUrl } from "@http-client";

  import { formatNodeId, parseNodeId, truncateId } from "@app/lib/utils";
- 
  import Avatar from "./Avatar.svelte";
+ 
  import UserAvatar from "./UserAvatar.svelte";

  import Link from "./Link.svelte";



  export let baseUrl: BaseUrl;
@@ -16,12 +16,21 @@
    align-items: center;

    gap: 0.375rem;

    height: 1rem;
- 
    font-family: var(--font-family-monospace);
- 
    font-weight: var(--font-weight-semibold);
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);
+ 
  }
+ 
  .avatar-container {
+ 
    width: 1rem;
+ 
    height: 1rem;
+ 
    overflow: hidden;
+ 
  }
+ 
  .avatar-container :global(img) {
+ 
    display: block;
+ 
    width: 100%;
+ 
    height: 100%;
+ 
    object-fit: cover;

  }

  .no-alias {
- 
    color: var(--color-foreground-dim);
+ 
    color: var(--color-text-tertiary);

  }

</style>
@@ -30,7 +39,9 @@
    styleHoverState

    style="display: flex; gap: 0.375rem; align-items: center;"

    route={{ resource: "users", did: nodeId, baseUrl }}>
- 
    <Avatar variant="small" {nodeId} />
+ 
    <div class="avatar-container">
+ 
      <UserAvatar {nodeId} styleWidth="1rem" />
+ 
    </div>

    {#if alias}

      <span class="txt-overflow">

        {alias}
modified src/components/Placeholder.svelte
@@ -12,10 +12,10 @@
  .placeholder {

    align-items: center;

    text-align: center;
- 
    color: var(--color-foreground-dim);
+ 
    color: var(--color-text-tertiary);

    display: flex;

    flex-direction: column;
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

    gap: 0.5rem;

    justify-content: center;

  }
modified src/components/Popover.svelte
@@ -42,9 +42,9 @@
    position: relative;

  }

  .popover {
- 
    background: var(--color-background-float);
- 
    border-radius: var(--border-radius-regular);
- 
    border: 1px solid var(--color-border-hint);
+ 
    background: var(--color-surface-canvas);
+ 
    border-radius: var(--border-radius-md);
+ 
    border: 1px solid var(--color-border-subtle);

    box-shadow: var(--elevation-low);

    padding: 1rem;

    position: absolute;
modified src/components/Radio.svelte
@@ -7,16 +7,16 @@
<style>

  .radio {

    display: flex;
- 
    border-radius: var(--border-radius-tiny);
+ 
    border-radius: var(--border-radius-sm);

    justify-content: center;

    align-items: center;

    overflow: hidden;

  }

  .outline {

    display: flex;
- 
    border: 1px solid var(--color-fill-secondary);
+ 
    border: 1px solid var(--color-border-brand);

    padding: 3px;
- 
    border-radius: var(--border-radius-small);
+ 
    border-radius: var(--border-radius-sm);

    gap: 0.25rem;

  }

</style>
modified src/components/Reactions.svelte
@@ -24,7 +24,7 @@
<div class="reactions">

  {#each reactions as { emoji, authors }}

    <div title={authorsToTooltip(authors)}>
- 
      <div class="reaction txt-tiny" style="padding: 2px 4px;">
+ 
      <div class="reaction txt-body-s-regular" style="padding: 2px 4px;">

        <span>{emoji}</span>

        <span>{authors.length}</span>

      </div>
added src/components/RepoAvatar.svelte
@@ -0,0 +1,33 @@
+ 
<script lang="ts">
+ 
  import { cachedRepoAvatar } from "@app/lib/avatar";
+
+ 
  interface Props {
+ 
    name: string;
+ 
    rid: string;
+ 
    styleWidth: string;
+ 
  }
+
+ 
  const { name, rid, styleWidth }: Props = $props();
+
+ 
  let dataUri: string | undefined = $state(undefined);
+
+ 
  $effect(() => {
+ 
    // We strip out characters from the RID that repeat for all RIDs this leads
+ 
    // to the generated avatars looking nicer visually.
+ 
    const key = `${name}${rid.replace("rad:z", "")}${name}`;
+
+ 
    void cachedRepoAvatar(key).then((data: string) => {
+ 
      dataUri = data;
+ 
    });
+ 
  });
+ 
</script>
+
+ 
{#if dataUri}
+ 
  <img style:width={styleWidth} src={dataUri} alt="Repository Avatar" />
+ 
{:else}
+ 
  <div
+ 
    style:width={styleWidth}
+ 
    style:height={styleWidth}
+ 
    style:background-color="var(--color-surface-subtle)">
+ 
  </div>
+ 
{/if}
modified src/components/RepoCard.svelte
@@ -12,10 +12,10 @@
  } from "@app/lib/utils";



  import ActivityDiagram from "@app/components/ActivityDiagram.svelte";
- 
  import Badge from "@app/components/Badge.svelte";

  import Icon from "@app/components/Icon.svelte";

  import Id from "@app/components/Id.svelte";

  import Link from "@app/components/Link.svelte";
+ 
  import RepoAvatar from "@app/components/RepoAvatar.svelte";



  export let compact = false;

  export let repoInfo: RepoInfo;
@@ -31,15 +31,17 @@


<style>

  .repo-card {
+ 
    container-type: inline-size;

    height: 10rem;
- 
    border: 1px solid var(--color-border-default);
- 
    border-radius: var(--border-radius-small);
- 
    background-color: var(--color-background-float);
- 
    padding: 0.75rem 1rem;
+ 
    background-color: var(--color-surface-canvas);
+ 
    padding: 1rem;

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: space-between;
+ 
    border: 1px solid var(--color-border-subtle);
+ 
    margin-top: -1px;
+ 
    margin-left: -1px;

  }



  .repo-card.compact {
@@ -47,59 +49,30 @@
  }



  .repo-card:hover {
- 
    background-color: var(--color-fill-float-hover);
+ 
    background-color: var(--color-surface-subtle);

  }
- 
  .activity {
- 
    position: absolute;
- 
    bottom: 1.5rem;
- 
    right: 0;
- 
    width: calc(100% - 3rem);
- 
    max-width: 22rem;
- 
  }
-
- 
  .activity > .fadeout-overlay {
- 
    position: absolute;
- 
    bottom: 0;
- 
    right: 0;
- 
    width: 100%;
- 
    height: 100%;
- 
    background: linear-gradient(
- 
      to right,
- 
      var(--color-background-float) 20%,
- 
      rgba(255, 255, 255, 0) 100%
- 
    );
- 
  }
-
- 
  .repo-card:hover .fadeout-overlay {
- 
    background: linear-gradient(
- 
      to right,
- 
      var(--color-fill-float-hover) 20%,
- 
      rgba(255, 255, 255, 0) 100%
- 
    );
- 
  }
-
- 
  .title {
+ 
  .content-and-activity {

    display: flex;
- 
    flex-direction: column;
- 
    gap: 0.125rem;
- 
    position: relative;
+ 
    gap: 1rem;
+ 
    align-items: flex-start;

  }
- 
  .title * {
- 
    white-space: nowrap;
- 
    overflow: hidden;
- 
    text-overflow: ellipsis;
+ 
  .content {
+ 
    flex: 1;
+ 
    min-width: 0;

  }
- 
  .title p {
- 
    color: var(--color-foreground-dim);
+ 
  .activity {
+ 
    flex: 1;
+ 
    max-width: 12rem;
+ 
    align-self: flex-end;

  }



  .headline-and-badges {

    display: flex;
- 
    justify-content: space-between;

    gap: 0.5rem;
+ 
    margin-bottom: 1rem;

  }



  .badges {
@@ -118,11 +91,6 @@
    padding: 0.25rem;

  }
- 
  h4,
- 
  p {
- 
    margin: 0;
- 
  }
- 


  .stats-row {

    position: relative;

    display: flex;
@@ -131,6 +99,22 @@
    align-items: center;

    white-space: nowrap;

  }
+
+ 
  .icon {
+ 
    width: 1.5rem;
+ 
    height: 1.5rem;
+ 
    display: flex;
+ 
    align-items: center;
+ 
    justify-content: center;
+ 
    background-color: var(--color-brand-bg);
+ 
    color: var(--color-text-on-brand);
+ 
  }
+
+ 
  @container (max-width: 20rem) {
+ 
    .activity {
+ 
      display: none;
+ 
    }
+ 
  }

</style>



<Link
@@ -140,61 +124,65 @@
    node: baseUrl,

  }}>

  <div class="repo-card" class:compact>
- 
    <div class="activity">
- 
      <div class="fadeout-overlay"></div>
- 
      <ActivityDiagram
- 
        id={repo.rid}
- 
        viewBoxHeight={200}
- 
        styleColor="var(--color-foreground-primary)"
- 
        activity={repoInfo.activity} />
+ 
    <div class="headline-and-badges txt-overflow">
+ 
      <div class="icon">
+ 
        <RepoAvatar
+ 
          rid={repoInfo.repo.rid}
+ 
          name={project.data.name}
+ 
          styleWidth="1.5rem" />
+ 
      </div>
+ 
      <div class="txt-body-l-semibold" use:twemoji>{project.data.name}</div>
+ 
      <div class="badges" style:margin-left="auto">
+ 
        {#if isPrivate}
+ 
          <div
+ 
            title="Private"
+ 
            class="badge"
+ 
            style="background-color: var(--color-feedback-warning-bg); color: var(--color-feedback-warning-text)">
+ 
            <Icon name="lock" />
+ 
          </div>
+ 
        {/if}
+ 
        <slot name="delegate" />
+ 
      </div>

    </div>
- 
    <div class="title">
- 
      <div class="headline-and-badges">
- 
        <h4 use:twemoji>{project.data.name}</h4>
- 
        <div class="badges">
- 
          {#if isPrivate}
- 
            <div
- 
              title="Private"
- 
              class="badge"
- 
              style="background-color: var(--color-fill-private); color: var(--color-foreground-yellow)">
- 
              <Icon name="lock" />
- 
            </div>
- 
          {/if}
- 
          <slot name="delegate" />
- 
          <Badge
- 
            variant="neutral"
- 
            size="tiny"
- 
            style="padding: 0 0.372rem; gap: 0.125rem;">
- 
            <Icon name="seedling" />
- 
            {repoInfo.repo.seeding}
- 
          </Badge>
+ 
    <div class="content-and-activity">
+ 
      <div class="content">
+ 
        <div class="txt-body-m-regular txt-overflow" use:twemoji>
+ 
          {project.data.description}

        </div>
+ 
        <span style:text-overflow="ellipsis">
+ 
          <Id id={repo.rid} title={repo.rid}>
+ 
            {formatRepositoryId(repo.rid)}
+ 
          </Id>
+ 
        </span>
+ 
      </div>
+ 
      <div class="activity">
+ 
        <ActivityDiagram
+ 
          id={repo.rid}
+ 
          viewBoxHeight={100}
+ 
          styleColor="var(--color-text-brand)"
+ 
          activity={repoInfo.activity} />

      </div>
- 
      <p class="txt-small" use:twemoji>
- 
        {project.data.description}
- 
      </p>

    </div>

    <div>
- 
      <div class="stats-row txt-tiny" style:color="var(--color-foreground-dim)">
+ 
      <div
+ 
        class="stats-row txt-code-regular"
+ 
        style:color="var(--color-text-tertiary)">
+ 
        <Icon name="seed" />
+ 
        {repoInfo.repo.seeding} ·

        <Icon name="issue" />

        {project.meta.issues.open} ·

        <Icon name="patch" />

        {project.meta.patches.open}

        {#await api.repo.getCommitBySha(repo.rid, project.meta.head) then { commit }}

          <span
+ 
            class="txt-body-m-regular"
+ 
            style:margin-left="auto"

            style:overflow="hidden"

            style:text-overflow="ellipsis"

            title={absoluteTimestamp(commit.committer.time)}>
- 
            · Updated {formatTimestamp(commit.committer.time)}
+ 
            Updated {formatTimestamp(commit.committer.time)}

          </span>

        {/await}
- 
        <span class="global-flex-item" style:margin-left="auto">
- 
          <Id id={repo.rid} title={repo.rid}>
- 
            <span style:font-size="var(--font-size-tiny)">
- 
              {formatRepositoryId(repo.rid)}
- 
            </span>
- 
          </Id>
- 
        </span>

      </div>

    </div>

  </div>
modified src/components/ScopePolicyExplainer.svelte
@@ -19,9 +19,9 @@


<div class="section" style:padding-top="0.5rem">

  Policy:
- 
  <span class="txt-bold">{capitalize(policy)}</span>
+ 
  <span class="txt-body-m-semibold">{capitalize(policy)}</span>

</div>
- 
<div class="txt-missing text">
+ 
<div class="text" style:color="var(--color-text-tertiary)">

  {#if policy === "allow"}

    All discovered repositories will be seeded.

  {:else if policy === "block"}
@@ -32,9 +32,9 @@
{#if policy === "allow"}

  <div class="section" style:padding-top="0.5rem">

    Scope:
- 
    <span class="txt-bold">{capitalize(scope)}</span>
+ 
    <span class="txt-body-m-semibold">{capitalize(scope)}</span>

  </div>
- 
  <div class="txt-missing text">
+ 
  <div class="text" style:color="var(--color-text-tertiary)">

    {#if scope === "all"}

      All changes in seeded repositories, made by any peer, will be synced.

    {:else if scope === "followed"}
modified src/components/TextInput.svelte
@@ -77,15 +77,15 @@
    flex: 1;

    align-items: center;

    height: var(--button-regular-height);
- 
    background: var(--color-background-dip);
+ 
    background: var(--color-surface-base);

  }

  input {
- 
    background: var(--color-background-dip);
+ 
    background: var(--color-surface-base);

    font-family: inherit;
- 
    font-size: var(--font-size-small);
- 
    color: var(--color-foreground-contrast);
- 
    border: 1px solid var(--color-border-hint);
- 
    border-radius: var(--border-radius-tiny);
+ 
    font: var(--txt-body-m-regular);
+ 
    color: var(--color-text-primary);
+ 
    border: 1px solid var(--color-border-subtle);
+ 
    border-radius: var(--border-radius-sm);

    line-height: 1.6;

    outline: none;

    text-overflow: ellipsis;
@@ -95,34 +95,33 @@
    margin: 0;

  }

  input::placeholder {
- 
    font-family: var(--font-family-sans-serif);
- 
    color: var(--color-foreground-dim);
+ 
    color: var(--color-text-tertiary);

    opacity: 1 !important;

  }

  input:hover:not(.invalid) {
- 
    border: 1px solid var(--color-border-default);
+ 
    border: 1px solid var(--color-border-mid);

  }

  input:hover:not(.invalid) + .right-container {
- 
    border-top: 1px solid var(--color-border-default);
- 
    border-right: 1px solid var(--color-border-default);
- 
    border-bottom: 1px solid var(--color-border-default);
- 
    color: var(--color-fill-contrast);
+ 
    border-top: 1px solid var(--color-border-mid);
+ 
    border-right: 1px solid var(--color-border-mid);
+ 
    border-bottom: 1px solid var(--color-border-mid);
+ 
    color: var(--color-text-primary);

  }

  input:focus:not(.invalid) + .right-container {
- 
    border-top: 1px solid var(--color-fill-secondary);
- 
    border-right: 1px solid var(--color-fill-secondary);
- 
    border-bottom: 1px solid var(--color-fill-secondary);
- 
    color: var(--color-fill-contrast);
+ 
    border-top: 1px solid var(--color-border-brand);
+ 
    border-right: 1px solid var(--color-border-brand);
+ 
    border-bottom: 1px solid var(--color-border-brand);
+ 
    color: var(--color-text-primary);

  }

  input:focus:not(.invalid) {
- 
    border: 1px solid var(--color-fill-secondary);
+ 
    border: 1px solid var(--color-border-brand);

  }

  input[disabled] {

    cursor: not-allowed;

  }

  .right-container {

    border: 1px solid transparent;
- 
    color: var(--color-fill-gray);
+ 
    color: var(--color-text-tertiary);

    position: absolute;

    right: 0;

    top: 0;
@@ -131,12 +130,12 @@
    padding-left: 0.5rem;

    overflow: hidden;

    height: 100%;
- 
    border-top-right-radius: var(--border-radius-tiny);
- 
    border-bottom-right-radius: var(--border-radius-tiny);
+ 
    border-top-right-radius: var(--border-radius-sm);
+ 
    border-bottom-right-radius: var(--border-radius-sm);

    gap: 0.25rem;

  }

  .invalid {
- 
    border: 1px solid var(--color-border-error);
+ 
    border: 1px solid var(--color-feedback-error-border);

  }

</style>
modified src/components/Thread.svelte
@@ -19,15 +19,15 @@
  .comments {

    display: flex;

    flex-direction: column;
- 
    box-shadow: 0 0 0 1px var(--color-border-hint);
- 
    border-radius: var(--border-radius-small);
+ 
    box-shadow: 0 0 0 1px var(--color-border-subtle);
+ 
    border-radius: var(--border-radius-sm);

  }

  .top-level-comment {
- 
    background-color: var(--color-background-float);
- 
    border-radius: var(--border-radius-small);
+ 
    background-color: var(--color-surface-subtle);
+ 
    border-radius: var(--border-radius-sm);

  }

  .has-replies {
- 
    border-bottom: 1px solid var(--color-fill-separator);
+ 
    border-bottom: 1px solid var(--color-border-subtle);

    border-bottom-left-radius: 0;

    border-bottom-right-radius: 0;

  }
@@ -54,7 +54,7 @@
      reactions={root.reactions}

      timestamp={root.timestamp}

      body={root.body}>
- 
      <Icon name="chat" slot="icon" />
+ 
      <Icon name="comment" slot="icon" />

    </CommentComponent>

  </div>

  {#if replies.length > 0}
added src/components/UserAvatar.svelte
@@ -0,0 +1,22 @@
+ 
<script lang="ts">
+ 
  import { cachedUserAvatar } from "@app/lib/avatar";
+
+ 
  interface Props {
+ 
    nodeId: string;
+ 
    styleWidth: string;
+ 
  }
+
+ 
  const { nodeId, styleWidth }: Props = $props();
+
+ 
  let dataUri: string | undefined = $state(undefined);
+
+ 
  $effect(() => {
+ 
    void cachedUserAvatar(nodeId.replace("did:key:", "")).then(data => {
+ 
      dataUri = data;
+ 
    });
+ 
  });
+ 
</script>
+
+ 
{#if dataUri}
+ 
  <img style:width={styleWidth} src={dataUri} alt="Avatar" />
+ 
{/if}
added src/lib/avatar.ts
@@ -0,0 +1,937 @@
+ 
/* eslint-disable @typescript-eslint/naming-convention */
+ 
import { cached } from "@app/lib/cache";
+
+ 
type AtomType = "A" | "B" | "C" | "D";
+ 
type ShapeModel =
+ 
  | "rose"
+ 
  | "starburst"
+ 
  | "ringed"
+ 
  | "tip"
+ 
  | "notched"
+ 
  | "hollow";
+ 
type AtomMode = "bands-ABC" | "angle-stripes" | "parity-ACB" | "balanced-rand";
+
+ 
const PALETTE = [
+ 
  "#00D4DA", // teal
+ 
  "#886BF2", // purple
+ 
  "#FFA5FF", // pink
+ 
  "#009F67", // green
+ 
  "#CCFF38", // lime
+ 
  "#585600", // olive
+ 
];
+
+ 
const REPO_CONFIG = {
+ 
  GRID_SIZE: 16,
+ 
  CELL_SIZE: 32,
+ 
  PIXEL_DENSITY: 2,
+ 
  GLYPH: {
+ 
    WIDTH: 5,
+ 
    HEIGHT: 7,
+ 
    SPACING: 2,
+ 
    SCALE_2X_WIDTH: 10,
+ 
    SCALE_2X_HEIGHT: 14,
+ 
  },
+ 
  ATOMS: {
+ 
    CIRCLE_B_RATIO: 0.55,
+ 
    CIRCLE_C_RATIO: 0.67,
+ 
  },
+ 
} as const;
+
+ 
const USER_CONFIG = {
+ 
  TILE_SIZE: 32,
+ 
  DEFAULT_GRID: 10,
+ 
  PIXEL_DENSITY: 2,
+ 
  ATOMS: {
+ 
    ELLIPSE_B_SIZE: 17,
+ 
    ELLIPSE_C_SIZE: 21,
+ 
  },
+ 
  TOLERANCE: {
+ 
    ANGLE_NEAR_BASE: Math.PI / 28,
+ 
    ANGLE_FAR_BASE: Math.PI / 7,
+ 
    NEAR_RANGE: { MIN: 0.7, MAX: 1.2 },
+ 
    FAR_RANGE: { MIN: 0.7, MAX: 1.2 },
+ 
  },
+ 
  SOFTNESS: {
+ 
    MIN: 1.2,
+ 
    MAX: 4.2,
+ 
  },
+ 
  RING_PHASE: {
+ 
    MIN: 0.2,
+ 
    MAX: 0.8,
+ 
  },
+ 
} as const;
+
+ 
function hash32(str: string): number {
+ 
  let h = 2166136261 >>> 0;
+ 
  for (let i = 0; i < str.length; i++) {
+ 
    h ^= str.charCodeAt(i);
+ 
    h = Math.imul(h, 16777619);
+ 
  }
+ 
  return h >>> 0;
+ 
}
+
+ 
function xmur3(str: string): () => number {
+ 
  let h = 1779033703 ^ str.length;
+ 
  for (let i = 0; i < str.length; i++) {
+ 
    h = Math.imul(h ^ str.charCodeAt(i), 3432918353);
+ 
    h = (h << 13) | (h >>> 19);
+ 
  }
+ 
  return function () {
+ 
    h = Math.imul(h ^ (h >>> 16), 2246822507);
+ 
    h = Math.imul(h ^ (h >>> 13), 3266489909);
+ 
    return (h ^= h >>> 16) >>> 0;
+ 
  };
+ 
}
+
+ 
function mulberry32(a: number): () => number {
+ 
  return function () {
+ 
    let t = (a += 0x6d2b79f5);
+ 
    t = Math.imul(t ^ (t >>> 15), t | 1);
+ 
    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+ 
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+ 
  };
+ 
}
+
+ 
function makeRNG(key: string): () => number {
+ 
  return mulberry32(xmur3(key)());
+ 
}
+
+ 
function chooseK<T>(arr: T[], k: number, rnd: () => number): T[] {
+ 
  const pool = arr.slice();
+ 
  const out = [];
+ 
  for (let i = 0; i < k; i++) {
+ 
    const idx = Math.floor(rnd() * pool.length);
+ 
    out.push(pool.splice(idx, 1)[0]);
+ 
  }
+ 
  return out;
+ 
}
+
+ 
function pick<T>(rng: () => number, arr: T[]): T {
+ 
  return arr[Math.floor(rng() * arr.length)];
+ 
}
+
+ 
function createOffscreenCanvas(
+ 
  w: number,
+ 
  h: number,
+ 
  density: number = 2,
+ 
): { canvas: HTMLCanvasElement; ctx: CanvasRenderingContext2D } {
+ 
  const canvas = document.createElement("canvas");
+ 
  canvas.width = w * density;
+ 
  canvas.height = h * density;
+ 
  const ctx = canvas.getContext("2d")!;
+ 
  ctx.scale(density, density);
+ 
  ctx.imageSmoothingEnabled = false;
+ 
  return { canvas, ctx };
+ 
}
+
+ 
function fillCircle(
+ 
  ctx: CanvasRenderingContext2D,
+ 
  x: number,
+ 
  y: number,
+ 
  diameter: number,
+ 
  color: string,
+ 
): void {
+ 
  ctx.fillStyle = color;
+ 
  ctx.beginPath();
+ 
  ctx.arc(x, y, diameter / 2, 0, Math.PI * 2);
+ 
  ctx.fill();
+ 
}
+
+ 
function fillEllipse(
+ 
  ctx: CanvasRenderingContext2D,
+ 
  x: number,
+ 
  y: number,
+ 
  w: number,
+ 
  h: number,
+ 
  color: string,
+ 
): void {
+ 
  ctx.fillStyle = color;
+ 
  ctx.beginPath();
+ 
  ctx.ellipse(x, y, w / 2, h / 2, 0, 0, Math.PI * 2);
+ 
  ctx.fill();
+ 
}
+
+ 
interface AtomDrawConfig {
+ 
  cellSize: number;
+ 
  circleB: number;
+ 
  circleC: number;
+ 
  useEllipse?: boolean;
+ 
}
+
+ 
function createAtomRenderer(config: AtomDrawConfig) {
+ 
  const drawCircleOrEllipse = (
+ 
    ctx: CanvasRenderingContext2D,
+ 
    x: number,
+ 
    y: number,
+ 
    w: number,
+ 
    h: number,
+ 
    color: string,
+ 
  ) => {
+ 
    if (config.useEllipse) {
+ 
      fillEllipse(ctx, x, y, w, h, color);
+ 
    } else {
+ 
      fillCircle(ctx, x, y, w, color); // w is diameter for circles
+ 
    }
+ 
  };
+
+ 
  return {
+ 
    drawAtomA(
+ 
      ctx: CanvasRenderingContext2D,
+ 
      gx: number,
+ 
      gy: number,
+ 
      c1: string,
+ 
    ): void {
+ 
      const x = gx * config.cellSize;
+ 
      const y = gy * config.cellSize;
+ 
      ctx.fillStyle = c1;
+ 
      ctx.fillRect(x, y, config.cellSize, config.cellSize);
+ 
    },
+
+ 
    drawAtomB(
+ 
      ctx: CanvasRenderingContext2D,
+ 
      gx: number,
+ 
      gy: number,
+ 
      c1: string,
+ 
      c2: string,
+ 
    ): void {
+ 
      const x = gx * config.cellSize;
+ 
      const y = gy * config.cellSize;
+ 
      ctx.fillStyle = c1;
+ 
      ctx.fillRect(x, y, config.cellSize, config.cellSize);
+ 
      drawCircleOrEllipse(
+ 
        ctx,
+ 
        x + config.cellSize / 2,
+ 
        y + config.cellSize / 2,
+ 
        config.circleB,
+ 
        config.circleB,
+ 
        c2,
+ 
      );
+ 
    },
+
+ 
    drawAtomC(
+ 
      ctx: CanvasRenderingContext2D,
+ 
      gx: number,
+ 
      gy: number,
+ 
      c2: string,
+ 
      c3: string,
+ 
    ): void {
+ 
      const x = gx * config.cellSize;
+ 
      const y = gy * config.cellSize;
+ 
      ctx.fillStyle = c2;
+ 
      ctx.fillRect(x, y, config.cellSize, config.cellSize);
+ 
      drawCircleOrEllipse(
+ 
        ctx,
+ 
        x + config.cellSize / 2,
+ 
        y + config.cellSize / 2,
+ 
        config.circleC,
+ 
        config.circleC,
+ 
        c3,
+ 
      );
+ 
    },
+
+ 
    drawAtomD(
+ 
      ctx: CanvasRenderingContext2D,
+ 
      gx: number,
+ 
      gy: number,
+ 
      c3: string,
+ 
    ): void {
+ 
      const x = gx * config.cellSize;
+ 
      const y = gy * config.cellSize;
+ 
      ctx.fillStyle = c3;
+ 
      ctx.fillRect(x, y, config.cellSize, config.cellSize);
+ 
    },
+
+ 
    drawAtom(
+ 
      ctx: CanvasRenderingContext2D,
+ 
      atom: AtomType,
+ 
      gx: number,
+ 
      gy: number,
+ 
      c1: string,
+ 
      c2: string,
+ 
      c3: string,
+ 
    ): void {
+ 
      switch (atom) {
+ 
        case "A":
+ 
          this.drawAtomA(ctx, gx, gy, c1);
+ 
          break;
+ 
        case "B":
+ 
          this.drawAtomB(ctx, gx, gy, c1, c2);
+ 
          break;
+ 
        case "C":
+ 
          this.drawAtomC(ctx, gx, gy, c2, c3);
+ 
          break;
+ 
        case "D":
+ 
          this.drawAtomD(ctx, gx, gy, c3);
+ 
          break;
+ 
      }
+ 
    },
+ 
  };
+ 
}
+
+ 
// 5x7 pixel font glyphs (cached at module level for performance)
+ 
function createGlyphs5x7(): Record<string, number[][]> {
+ 
  const L: Record<string, number[][]> = {};
+ 
  const r = (s: string[]) =>
+ 
    s.map(row => row.split("").map(ch => (ch === "1" ? 1 : 0)));
+ 
  L["A"] = r(["01110", "10001", "10001", "11111", "10001", "10001", "10001"]);
+ 
  L["B"] = r(["11110", "10001", "10001", "11110", "10001", "10001", "11110"]);
+ 
  L["C"] = r(["01111", "10000", "10000", "10000", "10000", "10000", "01111"]);
+ 
  L["D"] = r(["11110", "10001", "10001", "10001", "10001", "10001", "11110"]);
+ 
  L["E"] = r(["11111", "10000", "10000", "11110", "10000", "10000", "11111"]);
+ 
  L["F"] = r(["11111", "10000", "10000", "11110", "10000", "10000", "10000"]);
+ 
  L["G"] = r(["01111", "10000", "10000", "10111", "10001", "10001", "01111"]);
+ 
  L["H"] = r(["10001", "10001", "10001", "11111", "10001", "10001", "10001"]);
+ 
  L["I"] = r(["11111", "00100", "00100", "00100", "00100", "00100", "11111"]);
+ 
  L["J"] = r(["11111", "00001", "00001", "00001", "10001", "10001", "01110"]);
+ 
  L["K"] = r(["10001", "10010", "10100", "11000", "10100", "10010", "10001"]);
+ 
  L["L"] = r(["10000", "10000", "10000", "10000", "10000", "10000", "11111"]);
+ 
  L["M"] = r(["10001", "11011", "10101", "10001", "10001", "10001", "10001"]);
+ 
  L["N"] = r(["10001", "11001", "10101", "10011", "10001", "10001", "10001"]);
+ 
  L["O"] = r(["01110", "10001", "10001", "10001", "10001", "10001", "01110"]);
+ 
  L["P"] = r(["11110", "10001", "10001", "11110", "10000", "10000", "10000"]);
+ 
  L["Q"] = r(["01110", "10001", "10001", "10001", "10101", "10010", "01101"]);
+ 
  L["R"] = r(["11110", "10001", "10001", "11110", "10100", "10010", "10001"]);
+ 
  L["S"] = r(["01111", "10000", "11110", "00001", "00001", "10001", "11110"]);
+ 
  L["T"] = r(["11111", "00100", "00100", "00100", "00100", "00100", "00100"]);
+ 
  L["U"] = r(["10001", "10001", "10001", "10001", "10001", "10001", "01110"]);
+ 
  L["V"] = r(["10001", "10001", "10001", "01010", "01010", "00100", "00100"]);
+ 
  L["W"] = r(["10001", "10001", "10001", "10101", "10101", "11011", "10001"]);
+ 
  L["X"] = r(["10001", "01010", "00100", "00100", "00100", "01010", "10001"]);
+ 
  L["Y"] = r(["10001", "01010", "00100", "00100", "00100", "00100", "00100"]);
+ 
  L["Z"] = r(["11111", "00001", "00010", "00100", "01000", "10000", "11111"]);
+ 
  L["0"] = r(["01110", "10001", "10011", "10101", "11001", "10001", "01110"]);
+ 
  L["1"] = r(["00100", "01100", "00100", "00100", "00100", "00100", "01110"]);
+ 
  L["2"] = r(["01110", "10001", "00001", "00110", "01000", "10000", "11111"]);
+ 
  L["3"] = r(["11110", "00001", "01110", "00001", "00001", "00001", "11110"]);
+ 
  L["4"] = r(["10010", "10010", "10010", "11111", "00010", "00010", "00010"]);
+ 
  L["5"] = r(["11111", "10000", "11110", "00001", "00001", "00001", "11110"]);
+ 
  L["6"] = r(["01110", "10000", "11110", "10001", "10001", "10001", "01110"]);
+ 
  L["7"] = r(["11111", "00001", "00010", "00100", "01000", "01000", "01000"]);
+ 
  L["8"] = r(["01110", "10001", "01110", "10001", "10001", "10001", "01110"]);
+ 
  L["9"] = r(["01110", "10001", "10001", "01111", "00001", "00001", "11110"]);
+ 
  L["?"] = r(["11111", "00001", "01110", "00000", "00100", "00000", "00100"]);
+ 
  return L;
+ 
}
+
+ 
const LETTER_5X7 = createGlyphs5x7();
+
+ 
function getInitials(name: string): string[] {
+ 
  if (!name || typeof name !== "string") return ["?"];
+ 
  const cleaned = name.trim().replace(/\s+/g, " ");
+ 
  const parts = cleaned.split(/[^A-Za-z0-9]+/).filter(Boolean);
+ 
  const first = parts[0] ? parts[0][0].toUpperCase() : "?";
+ 
  const second = parts[1] ? parts[1][0].toUpperCase() : null;
+ 
  return second ? [first, second] : [first];
+ 
}
+
+ 
function polarFromCell(
+ 
  gx: number,
+ 
  gy: number,
+ 
  cx: number,
+ 
  cy: number,
+ 
): { r: number; a: number } {
+ 
  const x = gx - cx + 0.5;
+ 
  const y = gy - cy + 0.5;
+ 
  const r = Math.hypot(x, y);
+ 
  let a = Math.atan2(y, x);
+ 
  if (a < 0) a += 2 * Math.PI;
+ 
  return { r, a };
+ 
}
+
+ 
function shapeRose(theta: number, petals: number, tol: number): boolean {
+ 
  const sector = Math.PI / petals;
+ 
  const nearest = Math.round(theta / sector) * sector;
+ 
  let diff = Math.abs(theta - nearest);
+ 
  diff = Math.min(diff, 2 * Math.PI - diff);
+ 
  return diff <= tol;
+ 
}
+
+ 
function shapeStarburst(
+ 
  theta: number,
+ 
  petals: number,
+ 
  softness: number,
+ 
): boolean {
+ 
  const period = (2 * Math.PI) / petals;
+ 
  const local = theta % period;
+ 
  const d = Math.min(local, period - local) / (period / 2);
+ 
  const response = Math.pow(Math.cos((d * Math.PI) / 2), softness);
+ 
  return response > 0.5;
+ 
}
+
+ 
function shapeRinged(
+ 
  theta: number,
+ 
  petals: number,
+ 
  ringPhase: number,
+ 
  tol: number,
+ 
): boolean {
+ 
  const sector = (2 * Math.PI) / petals;
+ 
  const k = Math.floor(theta / sector);
+ 
  const center = k * sector + sector * ringPhase;
+ 
  let diff = Math.abs(theta - center);
+ 
  diff = Math.min(diff, 2 * Math.PI - diff);
+ 
  return diff <= tol;
+ 
}
+
+ 
function shapeTip(
+ 
  theta: number,
+ 
  petals: number,
+ 
  tol: number,
+ 
  t: number,
+ 
): boolean {
+ 
  return shapeRose(theta, petals, tol * (0.5 + 1.0 * t)) && t > 0.45;
+ 
}
+
+ 
function shapeNotched(
+ 
  theta: number,
+ 
  petals: number,
+ 
  tol: number,
+ 
  notchDepth: number = 0.25,
+ 
): boolean {
+ 
  const sector = (2 * Math.PI) / petals;
+ 
  const local = (theta % sector) / sector;
+ 
  const notch = Math.abs(local - 0.5);
+ 
  return shapeRose(theta, petals, tol) && notch > notchDepth;
+ 
}
+
+ 
function shapeHollow(
+ 
  theta: number,
+ 
  petals: number,
+ 
  tol: number,
+ 
  t: number,
+ 
  inner: number = 0.28,
+ 
  outer: number = 0.9,
+ 
): boolean {
+ 
  return shapeRose(theta, petals, tol) && t > inner && t < outer;
+ 
}
+
+ 
function sectorGate(theta: number, petals: number, mask: boolean[]): boolean {
+ 
  const sector = (2 * Math.PI) / petals;
+ 
  const k = Math.floor(theta / sector);
+ 
  return mask[k % mask.length];
+ 
}
+
+ 
export const cachedRepoAvatar = cached(
+ 
  async (key: string) => renderRepoAvatar(key),
+ 
  (key: string) => key,
+ 
  { max: 2000 },
+ 
);
+
+ 
export const cachedUserAvatar = cached(
+ 
  async (key: string) => renderUserAvatar(key),
+ 
  (key: string) => key,
+ 
  { max: 2000 },
+ 
);
+
+ 
function renderRepoAvatar(key: string): string {
+ 
  if (typeof window === "undefined") {
+ 
    return "";
+ 
  }
+
+ 
  {
+ 
    // Color logic:
+ 
    //   A: square = Color1
+ 
    //   B: square = Color1, circle = Color2
+ 
    //   C: square = Color2, circle = Color3
+ 
    //   D: square = Color3
+ 
    // Letters: solid-only (A or D). Background: other three atoms.
+ 
    // Single initial: 2x2 expansion (10x14). Two initials: 5x7 each.
+
+ 
    const GRID = REPO_CONFIG.GRID_SIZE;
+ 
    const CELL = REPO_CONFIG.CELL_SIZE;
+ 
    const W = GRID * CELL;
+ 
    const H = GRID * CELL;
+
+ 
    const { canvas, ctx } = createOffscreenCanvas(
+ 
      W,
+ 
      H,
+ 
      REPO_CONFIG.PIXEL_DENSITY,
+ 
    );
+
+ 
    const atoms = createAtomRenderer({
+ 
      cellSize: CELL,
+ 
      circleB: CELL * REPO_CONFIG.ATOMS.CIRCLE_B_RATIO,
+ 
      circleC: CELL * REPO_CONFIG.ATOMS.CIRCLE_C_RATIO,
+ 
      useEllipse: false,
+ 
    });
+
+ 
    function renderInitialsAvatar(nameKey: string = "color bright") {
+ 
      const initials = getInitials(nameKey);
+ 
      const seed = hash32(nameKey.toLowerCase());
+ 
      const rnd = mulberry32(seed);
+
+ 
      // Select three distinct colors deterministically (Color1, Color2, Color3)
+ 
      const [c1, c2, c3] = chooseK(PALETTE, 3, rnd);
+
+ 
      // Choose letter solid atom: 'A' or 'D' (deterministic)
+ 
      const letterSolidAtom: AtomType = ((seed >>> 7) & 1) === 0 ? "A" : "D";
+
+ 
      const bgAtoms: AtomType[] = (["A", "B", "C", "D"] as AtomType[]).filter(
+ 
        a => a !== letterSolidAtom,
+ 
      );
+
+ 
      function pickBgAtom(gx: number, gy: number): AtomType {
+ 
        const k = (gy * 131 + gx * 197 + seed) >>> 0;
+ 
        return bgAtoms[k % bgAtoms.length];
+ 
      }
+
+ 
      // 1) Background: fill with bgAtoms using strict color mapping
+ 
      for (let gy = 0; gy < GRID; gy++) {
+ 
        for (let gx = 0; gx < GRID; gx++) {
+ 
          const atom = pickBgAtom(gx, gy);
+ 
          atoms.drawAtom(ctx, atom, gx, gy, c1, c2, c3);
+ 
        }
+ 
      }
+
+ 
      // 2) Letters: solid-only atom across glyph pixels, strict mapping (A uses c1, D uses c3)
+ 
      const glyphW = REPO_CONFIG.GLYPH.WIDTH;
+ 
      const glyphH = REPO_CONFIG.GLYPH.HEIGHT;
+
+ 
      function placeSolidLetter(
+ 
        glyph: number[][],
+ 
        startX: number,
+ 
        startY: number,
+ 
        scale2x: boolean,
+ 
      ) {
+ 
        if (scale2x) {
+ 
          // 2x2 expansion → 10x14
+ 
          for (let r = 0; r < glyphH; r++) {
+ 
            for (let c = 0; c < glyphW; c++) {
+ 
              if (!glyph[r][c]) continue;
+ 
              const gx = startX + c * 2;
+ 
              const gy = startY + r * 2;
+ 
              if (letterSolidAtom === "A") {
+ 
                atoms.drawAtomA(ctx, gx, gy, c1);
+ 
                atoms.drawAtomA(ctx, gx + 1, gy, c1);
+ 
                atoms.drawAtomA(ctx, gx, gy + 1, c1);
+ 
                atoms.drawAtomA(ctx, gx + 1, gy + 1, c1);
+ 
              } else {
+ 
                atoms.drawAtomD(ctx, gx, gy, c3);
+ 
                atoms.drawAtomD(ctx, gx + 1, gy, c3);
+ 
                atoms.drawAtomD(ctx, gx, gy + 1, c3);
+ 
                atoms.drawAtomD(ctx, gx + 1, gy + 1, c3);
+ 
              }
+ 
            }
+ 
          }
+ 
        } else {
+ 
          // 1x scale
+ 
          for (let r = 0; r < glyphH; r++) {
+ 
            for (let c = 0; c < glyphW; c++) {
+ 
              if (!glyph[r][c]) continue;
+ 
              const gx = startX + c;
+ 
              const gy = startY + r;
+ 
              if (letterSolidAtom === "A") {
+ 
                atoms.drawAtomA(ctx, gx, gy, c1);
+ 
              } else {
+ 
                atoms.drawAtomD(ctx, gx, gy, c3);
+ 
              }
+ 
            }
+ 
          }
+ 
        }
+ 
      }
+
+ 
      if (initials.length === 1) {
+ 
        // Single initial: 2x2 expansion (10x14), centered
+ 
        const glyph = LETTER_5X7[initials[0]] || LETTER_5X7["?"];
+ 
        const startX = Math.floor(
+ 
          (GRID - REPO_CONFIG.GLYPH.SCALE_2X_WIDTH) / 2,
+ 
        );
+ 
        const startY = Math.floor(
+ 
          (GRID - REPO_CONFIG.GLYPH.SCALE_2X_HEIGHT) / 2,
+ 
        );
+ 
        placeSolidLetter(glyph, startX, startY, true);
+ 
      } else {
+ 
        // Two initials: 5x7 each, side-by-side
+ 
        const leftGlyph = LETTER_5X7[initials[0]] || LETTER_5X7["?"];
+ 
        const rightGlyph = LETTER_5X7[initials[1]] || LETTER_5X7["?"];
+ 
        const spacing = REPO_CONFIG.GLYPH.SPACING;
+ 
        const totalW = REPO_CONFIG.GLYPH.WIDTH * 2 + spacing;
+ 
        const totalH = REPO_CONFIG.GLYPH.HEIGHT;
+ 
        const startX = Math.floor((GRID - totalW) / 2);
+ 
        const startY = Math.floor((GRID - totalH) / 2);
+ 
        placeSolidLetter(leftGlyph, startX, startY, false);
+ 
        placeSolidLetter(
+ 
          rightGlyph,
+ 
          startX + REPO_CONFIG.GLYPH.WIDTH + spacing,
+ 
          startY,
+ 
          false,
+ 
        );
+ 
      }
+
+ 
      return canvas.toDataURL();
+ 
    }
+
+ 
    return renderInitialsAvatar(key);
+ 
  }
+ 
}
+
+ 
function renderUserAvatar(key: string): string {
+ 
  if (typeof window === "undefined") {
+ 
    return "";
+ 
  }
+
+ 
  {
+ 
    const TILE = USER_CONFIG.TILE_SIZE;
+ 
    const DEFAULT_GRID = USER_CONFIG.DEFAULT_GRID;
+
+ 
    const atoms = createAtomRenderer({
+ 
      cellSize: TILE,
+ 
      circleB: USER_CONFIG.ATOMS.ELLIPSE_B_SIZE,
+ 
      circleC: USER_CONFIG.ATOMS.ELLIPSE_C_SIZE,
+ 
      useEllipse: true,
+ 
    });
+
+ 
    // Edge-to-edge integer placement
+ 
    function drawAt(
+ 
      fn: (x: number, y: number) => void,
+ 
      gx: number,
+ 
      gy: number,
+ 
    ): void {
+ 
      fn(gx * TILE, gy * TILE);
+ 
    }
+
+ 
    // Strict 4-way symmetry (quadrant mirroring)
+ 
    function drawQuad(
+ 
      fn: (x: number, y: number) => void,
+ 
      gx: number,
+ 
      gy: number,
+ 
      grid: number,
+ 
    ): void {
+ 
      const N = grid - 1;
+ 
      drawAt(fn, gx, gy);
+ 
      drawAt(fn, N - gx, gy);
+ 
      drawAt(fn, gx, N - gy);
+ 
      drawAt(fn, N - gx, N - gy);
+ 
    }
+
+ 
    // Draw by atom type (converts pixel coordinates to grid coordinates)
+ 
    function drawAtomByType(
+ 
      ctx: CanvasRenderingContext2D,
+ 
      type: AtomType,
+ 
      x: number,
+ 
      y: number,
+ 
      c1: string,
+ 
      c2: string,
+ 
      c3: string,
+ 
    ): void {
+ 
      const gx = x / TILE;
+ 
      const gy = y / TILE;
+ 
      atoms.drawAtom(ctx, type, gx, gy, c1, c2, c3);
+ 
    }
+
+ 
    // Make assigner among active petal atoms (exclude background atom)
+ 
    function makeAssigner(
+ 
      mode: AtomMode,
+ 
      activeAtoms: AtomType[],
+ 
    ): (rCell: number, theta?: number, sectorIdx?: number) => AtomType {
+ 
      if (mode === "bands-ABC")
+ 
        return (rCell: number) => activeAtoms[rCell % 3];
+ 
      if (mode === "angle-stripes")
+ 
        return (_rCell: number, _theta?: number, sectorIdx?: number) =>
+ 
          activeAtoms[(sectorIdx || 0) % activeAtoms.length];
+ 
      if (mode === "parity-ACB")
+ 
        return (rCell: number) => activeAtoms[rCell % 2 ? 1 : 0];
+ 
      if (mode === "balanced-rand")
+ 
        return (rCell: number, theta?: number, sectorIdx?: number) => {
+ 
          const v =
+ 
            (Math.sin(
+ 
              (theta || 0) * 13.37 + rCell * 2.17 + (sectorIdx || 0) * 0.73,
+ 
            ) +
+ 
              1) /
+ 
            2;
+ 
          if (v < 0.33) return activeAtoms[0];
+ 
          if (v < 0.66) return activeAtoms[1];
+ 
          return activeAtoms[2];
+ 
        };
+ 
      return (rCell: number) => activeAtoms[rCell % 3];
+ 
    }
+
+ 
    function generateFlower(
+ 
      ctx: CanvasRenderingContext2D,
+ 
      canvas: HTMLCanvasElement,
+ 
      key: string,
+ 
      grid: number = DEFAULT_GRID,
+ 
    ): void {
+ 
      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ 
      const rng = makeRNG(key);
+
+ 
      const picked = PALETTE.slice().sort(() => rng() - 0.5);
+ 
      const [c1, c2, c3] = picked.slice(0, 3);
+
+ 
      const allAtoms: AtomType[] = ["A", "B", "C", "D"];
+ 
      const bgAtom: AtomType = pick(rng, allAtoms);
+ 
      const petalAtoms: AtomType[] = allAtoms
+ 
        .filter(a => a !== bgAtom)
+ 
        .sort(() => rng() - 0.5);
+
+ 
      const cx = Math.floor(grid / 2),
+ 
        cy = Math.floor(grid / 2);
+ 
      const maxR = Math.min(cx, cy);
+ 
      const petals = pick(rng, [5, 6, 7, 8, 9, 10]);
+ 
      const petalDepth = Math.max(5, Math.floor(maxR * (0.6 + 0.35 * rng())));
+ 
      const radialThickness = pick(rng, [1, 2, 2, 3, 3]);
+ 
      const shapeModel: ShapeModel = pick(rng, [
+ 
        "rose",
+ 
        "starburst",
+ 
        "ringed",
+ 
        "tip",
+ 
        "notched",
+ 
        "hollow",
+ 
      ]);
+ 
      const atomMode: AtomMode = pick(rng, [
+ 
        "bands-ABC",
+ 
        "angle-stripes",
+ 
        "parity-ACB",
+ 
        "balanced-rand",
+ 
      ]);
+ 
      const assignAtom = makeAssigner(atomMode, petalAtoms);
+
+ 
      // Angle tolerances
+ 
      const angleTolNear =
+ 
        USER_CONFIG.TOLERANCE.ANGLE_NEAR_BASE *
+ 
        (USER_CONFIG.TOLERANCE.NEAR_RANGE.MIN +
+ 
          rng() *
+ 
            (USER_CONFIG.TOLERANCE.NEAR_RANGE.MAX -
+ 
              USER_CONFIG.TOLERANCE.NEAR_RANGE.MIN));
+ 
      const angleTolFar =
+ 
        USER_CONFIG.TOLERANCE.ANGLE_FAR_BASE *
+ 
        (USER_CONFIG.TOLERANCE.FAR_RANGE.MIN +
+ 
          rng() *
+ 
            (USER_CONFIG.TOLERANCE.FAR_RANGE.MAX -
+ 
              USER_CONFIG.TOLERANCE.FAR_RANGE.MIN));
+ 
      const softness =
+ 
        USER_CONFIG.SOFTNESS.MIN +
+ 
        rng() * (USER_CONFIG.SOFTNESS.MAX - USER_CONFIG.SOFTNESS.MIN);
+ 
      const ringPhase =
+ 
        USER_CONFIG.RING_PHASE.MIN +
+ 
        rng() * (USER_CONFIG.RING_PHASE.MAX - USER_CONFIG.RING_PHASE.MIN);
+
+ 
      // Sector gating mask (~70% sectors on), ensures bold shapes
+ 
      const sectorMask = Array.from({ length: petals }, () => rng() > 0.3);
+ 
      if (sectorMask.every(v => !v)) sectorMask[Math.floor(petals / 2)] = true;
+
+ 
      const drawBgAtom = (gx: number, gy: number) => {
+ 
        drawAt(
+ 
          (x: number, y: number) =>
+ 
            drawAtomByType(ctx, bgAtom, x, y, c1, c2, c3),
+ 
          gx,
+ 
          gy,
+ 
        );
+ 
      };
+
+ 
      // 0) Base pass: paint every tile once with background atom to avoid gaps
+ 
      function renderBasePass() {
+ 
        for (let gy = 0; gy < grid; gy++) {
+ 
          for (let gx = 0; gx < grid; gx++) {
+ 
            drawBgAtom(gx, gy);
+ 
          }
+ 
        }
+ 
      }
+
+ 
      // 1) Outer edge circumference (1–2 tiles thick) reinforced in background atom
+ 
      function renderEdgeReinforcement() {
+ 
        const edgeThickness = pick(rng, [1, 1, 2]);
+ 
        for (let t = 0; t < edgeThickness; t++) {
+ 
          for (let i = 0; i < grid; i++) {
+ 
            drawBgAtom(i, t);
+ 
            drawBgAtom(i, grid - 1 - t);
+ 
            drawBgAtom(t, i);
+ 
            drawBgAtom(grid - 1 - t, i);
+ 
          }
+ 
        }
+ 
      }
+
+ 
      // 2) Background atom structural accents inside (deterministic)
+ 
      //    - mid ring (optional) and a few gated spokes to help define silhouette
+ 
      function renderStructuralAccents() {
+ 
        // Mid ring
+ 
        if (rng() < 0.7) {
+ 
          const midR = Math.floor(petalDepth * (0.5 + 0.2 * rng()));
+ 
          for (let i = 0; i < grid; i++) {
+ 
            const coords: [number, number][] = [
+ 
              [cx - midR, i],
+ 
              [cx + midR, i],
+ 
              [i, cy - midR],
+ 
              [i, cy + midR],
+ 
            ];
+ 
            coords.forEach(([gx, gy]) => {
+ 
              if (gx >= 0 && gy >= 0 && gx < grid && gy < grid) {
+ 
                drawQuad(
+ 
                  (x: number, y: number) =>
+ 
                    drawAtomByType(ctx, bgAtom, x, y, c1, c2, c3),
+ 
                  gx,
+ 
                  gy,
+ 
                  grid,
+ 
                );
+ 
              }
+ 
            });
+ 
          }
+ 
        }
+
+ 
        // Gated spokes
+ 
        if (rng() < 0.6) {
+ 
          const gateEvery = pick(rng, [2, 3, 4]);
+ 
          for (let s = 0; s < petals; s++) {
+ 
            if (s % gateEvery !== 0) continue;
+ 
            const theta = s * ((2 * Math.PI) / petals);
+ 
            for (let r = 1; r <= petalDepth; r++) {
+ 
              const gx = Math.round(cx + r * Math.cos(theta));
+ 
              const gy = Math.round(cy + r * Math.sin(theta));
+ 
              if (gx >= 0 && gy >= 0 && gx < grid && gy < grid) {
+ 
                drawQuad(
+ 
                  (x: number, y: number) =>
+ 
                    drawAtomByType(ctx, bgAtom, x, y, c1, c2, c3),
+ 
                  gx,
+ 
                  gy,
+ 
                  grid,
+ 
                );
+ 
              }
+ 
            }
+ 
          }
+ 
        }
+ 
      }
+
+ 
      // 3) Strong center cluster (guarantee coverage; seed form)
+ 
      function renderCenterCluster() {
+ 
        const centerCluster: [number, number, AtomType][] = [
+ 
          [0, 0, "D"],
+ 
          [0, -1, petalAtoms[0]],
+ 
          [1, 0, petalAtoms[1]],
+ 
          [0, 1, petalAtoms[2]],
+ 
          [-1, 0, petalAtoms[0]],
+ 
        ];
+ 
        centerCluster.forEach(([dx, dy, t]: [number, number, AtomType]) => {
+ 
          const gx = cx + dx,
+ 
            gy = cy + dy;
+ 
          if (gx < 0 || gy < 0 || gx >= grid || gy >= grid) return;
+ 
          drawQuad(
+ 
            (x: number, y: number) => drawAtomByType(ctx, t, x, y, c1, c2, c3),
+ 
            gx,
+ 
            gy,
+ 
            grid,
+ 
          );
+ 
        });
+ 
      }
+
+ 
      // 4) Petals (TL quadrant → mirror)
+ 
      function renderPetals() {
+ 
        const half = Math.ceil(grid / 2);
+ 
        for (let gy = 0; gy < half; gy++) {
+ 
          for (let gx = 0; gx < half; gx++) {
+ 
            const { r, a } = polarFromCell(gx, gy, cx, cy);
+ 
            const rCell = Math.floor(r);
+ 
            if (rCell === 0 || rCell > petalDepth) continue;
+
+ 
            const t = rCell / petalDepth;
+ 
            const tol = angleTolNear * (1 - t) + angleTolFar * t;
+
+ 
            const sectorIdx = Math.floor(a / ((2 * Math.PI) / petals));
+ 
            if (!sectorGate(a, petals, sectorMask)) continue;
+
+ 
            let inside = false;
+ 
            if (shapeModel === "rose") inside = shapeRose(a, petals, tol);
+ 
            else if (shapeModel === "starburst")
+ 
              inside = shapeStarburst(a, petals, softness);
+ 
            else if (shapeModel === "ringed")
+ 
              inside = shapeRinged(a, petals, ringPhase, tol * 0.7);
+ 
            else if (shapeModel === "tip") inside = shapeTip(a, petals, tol, t);
+ 
            else if (shapeModel === "notched")
+ 
              inside = shapeNotched(a, petals, tol, 0.24);
+ 
            else inside = shapeHollow(a, petals, tol, t, 0.28, 0.92);
+
+ 
            if (!inside) continue;
+
+ 
            const type = assignAtom(rCell, a, sectorIdx);
+
+ 
            // Draw with radial thickness and 4-way mirroring
+ 
            for (let dr = 0; dr < radialThickness; dr++) {
+ 
              const x1 = gx + dr,
+ 
                y1 = gy + dr;
+ 
              const coords: [number, number][] = [
+ 
                [x1, y1],
+ 
                [grid - 1 - x1, y1],
+ 
                [x1, grid - 1 - y1],
+ 
                [grid - 1 - x1, grid - 1 - y1],
+ 
              ];
+ 
              coords.forEach(([ix, iy]: [number, number]) => {
+ 
                if (ix < 0 || iy < 0 || ix >= grid || iy >= grid) return;
+ 
                drawAt(
+ 
                  (x: number, y: number) =>
+ 
                    drawAtomByType(ctx, type, x, y, c1, c2, c3),
+ 
                  ix,
+ 
                  iy,
+ 
                );
+ 
              });
+ 
            }
+ 
          }
+ 
        }
+ 
      }
+
+ 
      // 5) Ensure all three petal atoms appear at least once
+ 
      function renderAccents() {
+ 
        const accents: [number, number, AtomType][] = [
+ 
          [cx, cy - 2, petalAtoms[0]],
+ 
          [cx + 1, cy, petalAtoms[1]],
+ 
          [cx, cy + 2, petalAtoms[2]],
+ 
        ];
+ 
        accents.forEach(([gx, gy, t]: [number, number, AtomType]) => {
+ 
          if (gx < 0 || gy < 0 || gx >= grid || gy >= grid) return;
+ 
          drawQuad(
+ 
            (x: number, y: number) => drawAtomByType(ctx, t, x, y, c1, c2, c3),
+ 
            gx,
+ 
            gy,
+ 
            grid,
+ 
          );
+ 
        });
+ 
      }
+
+ 
      // 6) Final safety: ensure center 6×6 px is covered via 2×2 cluster
+ 
      function renderFinalCluster() {
+ 
        const cluster: [number, number, AtomType][] = [
+ 
          [0, 0, "D"],
+ 
          [1, 0, petalAtoms[1]],
+ 
          [0, 1, petalAtoms[2]],
+ 
          [1, 1, petalAtoms[0]],
+ 
        ];
+ 
        cluster.forEach(([dx, dy, t]: [number, number, AtomType]) => {
+ 
          const gx = cx + dx,
+ 
            gy = cy + dy;
+ 
          if (gx < 0 || gy < 0 || gx >= grid || gy >= grid) return;
+ 
          drawQuad(
+ 
            (x: number, y: number) => drawAtomByType(ctx, t, x, y, c1, c2, c3),
+ 
            gx,
+ 
            gy,
+ 
            grid,
+ 
          );
+ 
        });
+ 
      }
+
+ 
      renderBasePass();
+ 
      renderEdgeReinforcement();
+ 
      renderStructuralAccents();
+ 
      renderCenterCluster();
+ 
      renderPetals();
+ 
      renderAccents();
+ 
      renderFinalCluster();
+ 
    }
+
+ 
    function drawFlowerForKey(
+ 
      key: string,
+ 
      grid: number = DEFAULT_GRID,
+ 
    ): string {
+ 
      const canvasPx = grid * TILE;
+
+ 
      const { canvas, ctx } = createOffscreenCanvas(
+ 
        canvasPx,
+ 
        canvasPx,
+ 
        USER_CONFIG.PIXEL_DENSITY,
+ 
      );
+
+ 
      generateFlower(ctx, canvas, key, grid);
+
+ 
      return canvas.toDataURL();
+ 
    }
+
+ 
    return drawFlowerForKey(key, DEFAULT_GRID);
+ 
  }
+ 
}
deleted src/modals/ColorPaletteModal.svelte
@@ -1,155 +0,0 @@
- 
<script lang="ts">
- 
  import Modal from "@app/components/Modal.svelte";
-
- 
  function extractCssVariables(variableName: string) {
- 
    return Array.from(document.styleSheets)
- 
      .filter(
- 
        sheet =>
- 
          sheet.href === null || sheet.href.startsWith(window.location.origin),
- 
      )
- 
      .reduce<string[]>(
- 
        (acc, sheet) =>
- 
          (acc = [
- 
            ...acc,
- 
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- 
            // @ts-ignore
- 
            ...Array.from(sheet.cssRules).reduce(
- 
              (def, rule) =>
- 
                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- 
                // @ts-ignore
- 
                (def =
- 
                  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- 
                  // @ts-ignore
- 
                  rule.selectorText === ":root"
- 
                    ? [
- 
                        ...def,
- 
                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- 
                        // @ts-ignore
- 
                        ...Array.from(rule.style).filter(name =>
- 
                          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- 
                          // @ts-ignore
- 
                          name.startsWith(variableName),
- 
                        ),
- 
                      ]
- 
                    : def),
- 
              [],
- 
            ),
- 
          ]),
- 
        [],
- 
      );
- 
  }
-
- 
  // rg "\--color-\w*-\w*" -o --no-line-number --no-filename -g "\!public/colors.css" -g "\!ColorPaletteModal.svelte" | sort | uniq | jq -sRM 'split("\n")[:-1]'
- 
  const usedColors = [
- 
    "--color-background-default",
- 
    "--color-background-dip",
- 
    "--color-background-float",
- 
    "--color-border-default",
- 
    "--color-border-error",
- 
    "--color-border-focus",
- 
    "--color-border-hint",
- 
    "--color-border-match",
- 
    "--color-border-merged",
- 
    "--color-fill-contrast",
- 
    "--color-fill-diff",
- 
    "--color-fill-float",
- 
    "--color-fill-ghost",
- 
    "--color-fill-gray",
- 
    "--color-fill-merged",
- 
    "--color-fill-primary",
- 
    "--color-fill-secondary",
- 
    "--color-fill-separator",
- 
    "--color-fill-success",
- 
    "--color-fill-yellow",
- 
    "--color-foreground-black",
- 
    "--color-foreground-contrast",
- 
    "--color-foreground-default",
- 
    "--color-foreground-dim",
- 
    "--color-foreground-disabled",
- 
    "--color-foreground-emphasized",
- 
    "--color-foreground-match",
- 
    "--color-foreground-primary",
- 
    "--color-foreground-red",
- 
    "--color-foreground-success",
- 
    "--color-foreground-white",
- 
    "--color-foreground-yellow",
- 
  ];
-
- 
  const colors = extractCssVariables("--color").filter(c => {
- 
    return !c.startsWith("--color-prettylights-syntax");
- 
  });
-
- 
  const colorGroups = [
- 
    ...new Set(
- 
      colors.map(color => {
- 
        const match = color.match(/--color-(\w*)-?/);
- 
        if (match) {
- 
          return match[1];
- 
        } else {
- 
          return "";
- 
        }
- 
      }),
- 
    ),
- 
  ];
-
- 
  let checkers = false;
- 
</script>
-
- 
<style>
- 
  .checkers {
- 
    background: repeating-conic-gradient(#88888833 0% 25%, transparent 0% 50%)
- 
      50% / 20px 20px;
- 
    border-radius: 1rem;
- 
  }
-
- 
  .container {
- 
    display: flex;
- 
    margin: 0;
- 
    padding: 0;
- 
  }
-
- 
  .color {
- 
    width: 3rem;
- 
    height: 3rem;
- 
    border-radius: var(--border-radius-regular);
- 
    outline-style: solid !important;
- 
    outline-color: #88888899 !important;
- 
    outline-offset: 0.3rem;
- 
    margin: 1rem;
- 
  }
-
- 
  .unused {
- 
    outline-style: dotted !important;
- 
    outline-color: #55555555 !important;
- 
  }
- 
</style>
-
- 
<Modal>
- 
  <!-- svelte-ignore a11y-click-events-have-key-events -->
- 
  <div slot="body">
- 
    <div
- 
      role="button"
- 
      tabindex="0"
- 
      class="container"
- 
      on:click={() => (checkers = !checkers)}>
- 
      <div class:checkers>
- 
        {#each colorGroups as colorGroup}
- 
          <div style:display="flex">
- 
            {#each colors.filter(color => {
- 
              return color.match(`--color-${colorGroup}`);
- 
            }) as color}
- 
              <div style:display="inline-flex">
- 
                <div
- 
                  class:unused={!usedColors.includes(color)}
- 
                  title={color}
- 
                  class="color"
- 
                  style:background-color={`var(${color})`}>
- 
                </div>
- 
              </div>
- 
            {/each}
- 
          </div>
- 
        {/each}
- 
      </div>
- 
    </div>
- 
  </div>
- 
</Modal>
added src/modals/DesignSystemModal.svelte
@@ -0,0 +1,297 @@
+ 
<script lang="ts">
+ 
  import { followSystemTheme, theme } from "@app/lib/appearance";
+
+ 
  import Button from "@app/components/Button.svelte";
+ 
  import Icon from "@app/components/Icon.svelte";
+ 
  import Modal from "@app/components/Modal.svelte";
+ 
  import Radio from "@app/components/Radio.svelte";
+
+ 
  function extractCssVariables(variableName: string) {
+ 
    return Array.from(document.styleSheets)
+ 
      .filter(
+ 
        sheet =>
+ 
          sheet.href === null || sheet.href.startsWith(window.location.origin),
+ 
      )
+ 
      .reduce<string[]>(
+ 
        (acc, sheet) =>
+ 
          (acc = [
+ 
            ...acc,
+ 
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ 
            // @ts-ignore
+ 
            ...Array.from(sheet.cssRules).reduce(
+ 
              (def, rule) =>
+ 
                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ 
                // @ts-ignore
+ 
                (def =
+ 
                  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ 
                  // @ts-ignore
+ 
                  rule.selectorText === ":root"
+ 
                    ? [
+ 
                        ...def,
+ 
                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ 
                        // @ts-ignore
+ 
                        ...Array.from(rule.style).filter(name =>
+ 
                          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ 
                          // @ts-ignore
+ 
                          name.startsWith(variableName),
+ 
                        ),
+ 
                      ]
+ 
                    : def),
+ 
              [],
+ 
            ),
+ 
          ]),
+ 
        [],
+ 
      );
+ 
  }
+
+ 
  // rg "\--color-\w*-\w*" -o --no-line-number --no-filename -g "\!public/colors.css" -g "\!DesignSystemModal.svelte" | sort | uniq | jq -sRM 'split("\n")[:-1]'
+ 
  const usedColors = [
+ 
    "--color-border-alpha",
+ 
    "--color-border-brand",
+ 
    "--color-border-mid",
+ 
    "--color-border-subtle",
+ 
    "--color-brand-bg",
+ 
    "--color-feedback-error",
+ 
    "--color-feedback-success",
+ 
    "--color-feedback-warning",
+ 
    "--color-prettylights-syntax",
+ 
    "--color-surface-alpha",
+ 
    "--color-surface-archived",
+ 
    "--color-surface-base",
+ 
    "--color-surface-brand",
+ 
    "--color-surface-canvas",
+ 
    "--color-surface-draft",
+ 
    "--color-surface-merged",
+ 
    "--color-surface-mid",
+ 
    "--color-surface-open",
+ 
    "--color-surface-strong",
+ 
    "--color-surface-subtle",
+ 
    "--color-text-archived",
+ 
    "--color-text-brand",
+ 
    "--color-text-disabled",
+ 
    "--color-text-draft",
+ 
    "--color-text-merged",
+ 
    "--color-text-on",
+ 
    "--color-text-open",
+ 
    "--color-text-primary",
+ 
    "--color-text-secondary",
+ 
    "--color-text-tertiary",
+ 
  ];
+
+ 
  const colors = extractCssVariables("--color").filter(c => {
+ 
    return (
+ 
      !c.startsWith("--color-prettylights-syntax") &&
+ 
      !c.startsWith("--color-accent") &&
+ 
      !c.startsWith("--color-semantic") &&
+ 
      !c.startsWith("--color-neutrals")
+ 
    );
+ 
  });
+
+ 
  function getColorGroup(color: string): string {
+ 
    // For simpler tokens like "--color-surface-base", just get the first part
+ 
    // e.g., "--color-surface-base" -> "surface"
+ 
    const simpleMatch = color.match(/--color-([a-z]+)-/);
+ 
    if (simpleMatch) {
+ 
      return simpleMatch[1];
+ 
    }
+
+ 
    return "";
+ 
  }
+
+ 
  const colorGroups = [...new Set(colors.map(getColorGroup))].filter(
+ 
    g => g !== "",
+ 
  );
+
+ 
  let checkers = $state(false);
+
+ 
  const icons = [
+ 
    "activity",
+ 
    "archive",
+ 
    "arrow-left",
+ 
    "arrow-up",
+ 
    "attach",
+ 
    "badge",
+ 
    "bookmark",
+ 
    "bookmark-fill",
+ 
    "branch",
+ 
    "checkmark",
+ 
    "checkout",
+ 
    "chevron-down",
+ 
    "chevron-left",
+ 
    "chevron-left-right",
+ 
    "chevron-right",
+ 
    "chevron-up",
+ 
    "clock",
+ 
    "code",
+ 
    "collapse-vertical",
+ 
    "comment",
+ 
    "commit",
+ 
    "copy",
+ 
    "cross",
+ 
    "cursor",
+ 
    "device",
+ 
    "diff",
+ 
    "disconnect",
+ 
    "document",
+ 
    "download",
+ 
    "edit",
+ 
    "ellipsis",
+ 
    "ellipsis-vertical",
+ 
    "emoji",
+ 
    "expand-vertical",
+ 
    "eye",
+ 
    "eye-slash",
+ 
    "folder",
+ 
    "folder-open",
+ 
    "git",
+ 
    "guide",
+ 
    "help",
+ 
    "hourglass",
+ 
    "issue",
+ 
    "key",
+ 
    "link",
+ 
    "lock",
+ 
    "logo",
+ 
    "menu",
+ 
    "moon",
+ 
    "open-external",
+ 
    "patch",
+ 
    "pin-filled",
+ 
    "pin-hollow",
+ 
    "play",
+ 
    "plus",
+ 
    "question-mark",
+ 
    "reply",
+ 
    "repository",
+ 
    "review",
+ 
    "seed",
+ 
    "seed-filled",
+ 
    "settings",
+ 
    "stop",
+ 
    "sun",
+ 
    "trash",
+ 
  ] as const;
+ 
</script>
+
+ 
<style>
+ 
  .checkers {
+ 
    background: repeating-conic-gradient(#88888833 0% 25%, transparent 0% 50%)
+ 
      50% / 20px 20px;
+ 
    border-radius: 1rem;
+ 
  }
+
+ 
  .container {
+ 
    display: flex;
+ 
    margin: 0;
+ 
    padding: 0;
+ 
  }
+
+ 
  .color {
+ 
    width: 3rem;
+ 
    height: 3rem;
+ 
    border-radius: var(--border-radius-md);
+ 
    outline-style: solid !important;
+ 
    outline-color: #88888899 !important;
+ 
    outline-offset: 0.3rem;
+ 
    margin: 1rem;
+ 
  }
+
+ 
  .unused {
+ 
    outline-style: dotted !important;
+ 
    outline-color: #55555555 !important;
+ 
  }
+ 
</style>
+
+ 
<Modal>
+ 
  <div slot="body" style="display: flex; flex-direction: column;">
+ 
    <div
+ 
      style="display: flex; margin-left: auto; width: 100%; padding-left: 0.5rem; margin-bottom: 1rem; gap: 0.5rem;">
+ 
      <Button
+ 
        ariaLabel="transparency"
+ 
        styleBorderRadius="0"
+ 
        variant={checkers ? "selected" : "not-selected"}
+ 
        on:click={() => {
+ 
          checkers = !checkers;
+ 
        }}>
+ 
        {#if checkers}
+ 
          <Icon name="review" />
+ 
        {:else}
+ 
          <Icon name="eye-slash" />
+ 
        {/if}
+ 
      </Button>
+ 
      <Radio>
+ 
        <Button
+ 
          ariaLabel="Light Mode"
+ 
          styleBorderRadius="0"
+ 
          variant={!$followSystemTheme && $theme === "light"
+ 
            ? "selected"
+ 
            : "not-selected"}
+ 
          on:click={() => {
+ 
            theme.set("light");
+ 
            followSystemTheme.set(false);
+ 
          }}>
+ 
          <Icon name="sun" />
+ 
        </Button>
+ 
        <div class="global-spacer"></div>
+ 
        <Button
+ 
          ariaLabel="Dark Mode"
+ 
          styleBorderRadius="0"
+ 
          variant={!$followSystemTheme && $theme === "dark"
+ 
            ? "selected"
+ 
            : "not-selected"}
+ 
          on:click={() => {
+ 
            theme.set("dark");
+ 
            followSystemTheme.set(false);
+ 
          }}>
+ 
          <Icon name="moon" />
+ 
        </Button>
+ 
      </Radio>
+ 
    </div>
+
+ 
    <div class="container">
+ 
      <div class:checkers>
+ 
        {#each colorGroups as colorGroup}
+ 
          <div style:display="flex">
+ 
            {#each colors.filter(color => {
+ 
              return getColorGroup(color) === colorGroup;
+ 
            }) as color}
+ 
              <div style:display="inline-flex">
+ 
                <div
+ 
                  class:unused={!usedColors.includes(color)}
+ 
                  title={color}
+ 
                  class="color"
+ 
                  style:background-color={`var(${color})`}>
+ 
                </div>
+ 
              </div>
+ 
            {/each}
+ 
          </div>
+ 
        {/each}
+ 
      </div>
+ 
    </div>
+
+ 
    <div
+ 
      style="display: flex; flex-direction: column; padding-left: 0.5rem; width: 100%; align-items: flex-start;">
+ 
      <div style="margin-top: 1rem; display: flex; flex-direction: row;">
+ 
        {#each icons.slice(0, 25) as icon}
+ 
          <div style="display: flex;" title={icon}>
+ 
            <Icon name={icon} />
+ 
          </div>
+ 
        {/each}
+ 
      </div>
+ 
      <div style="margin-top: 1rem; display: flex; flex-direction: row;">
+ 
        {#each icons.slice(25, 50) as icon}
+ 
          <div style="display: flex;" title={icon}>
+ 
            <Icon name={icon} />
+ 
          </div>
+ 
        {/each}
+ 
      </div>
+ 
      <div style="margin-top: 1rem; display: flex; flex-direction: row;">
+ 
        {#each icons.slice(50) as icon}
+ 
          <div style="display: flex;" title={icon}>
+ 
            <Icon name={icon} />
+ 
          </div>
+ 
        {/each}
+ 
      </div>
+ 
    </div>
+ 
  </div>
+ 
</Modal>
modified src/modals/HotkeysModal.svelte
@@ -11,7 +11,7 @@
    gap: 1rem;

    display: flex;

    flex-direction: column;
- 
    font-size: var(--font-size-regular);
+ 
    font: var(--txt-body-l-regular);

  }



  .pair {
modified src/views/NotFound.svelte
@@ -19,6 +19,6 @@
<Layout>

  <div class="container">

    <IconLarge name="desert" />
- 
    <div class="title txt-medium txt-bold">{title}</div>
+ 
    <div class="title txt-heading-m">{title}</div>

  </div>

</Layout>
modified src/views/nodes/PolicyExplainer.svelte
@@ -19,7 +19,7 @@


<style>

  .policies {
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

    display: flex;

    flex-direction: column;

  }
@@ -39,7 +39,7 @@
    </div>

    <div

      style="display: flex; flex-direction: row; gap: 0.5rem; align-items: center;">
- 
      <div class="txt-bold">
+ 
      <div class="txt-body-m-semibold">

        {capitalize(shortScope)}

      </div>

      <IconButton on:click={() => (expandedNode = !expandedNode)}>
modified src/views/nodes/ReposView.svelte
@@ -62,8 +62,8 @@
<style>

  .subtitle,

  .pagination {
- 
    font-size: var(--font-size-small);
- 
    color: var(--color-foreground-dim);
+ 
    font: var(--txt-body-m-regular);
+ 
    color: var(--color-text-tertiary);

  }

  .pagination {

    display: flex;
@@ -75,17 +75,14 @@
  }

  .repo-grid {

    display: grid;
- 
    grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
- 
    gap: 1rem;
+ 
    grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr));
+ 
    gap: 0;

  }
- 
  .empty-state {
- 
    display: flex;
- 
    flex-direction: column;
- 
    align-items: center;
- 
    justify-content: center;
- 
    gap: 0.5rem;
- 
    height: 35vh;
- 
    font-size: var(--font-size-small);
+ 
  .container {
+ 
    display: grid;
+ 
    place-items: center;
+ 
    min-height: calc(100vh - var(--global-header-height));
+ 
    font: var(--txt-body-m-regular);

  }

  .text-button {

    background: none;
@@ -107,12 +104,12 @@
  .footer {

    display: flex;

    gap: 0.5rem 1rem;
- 
    margin-top: 1rem;
+ 
    margin: 1rem;

  }



  @media (max-width: 1010.98px) {
- 
    .repos {
- 
      margin-top: 3rem;
+ 
    .repo-grid {
+ 
      grid-template-columns: 1fr;

    }

    .footer {

      flex-direction: column;
@@ -125,7 +122,7 @@


<div class="repos">

  {#await fetchRepos(listState, perPage, page)}
- 
    <div style:height="35vh">
+ 
    <div class="container">

      <Loading small center />

    </div>

  {:then repoInfos}
@@ -186,7 +183,7 @@
        {/if}

      </div>

    {:else}
- 
      <div class="empty-state">
+ 
      <div class="container">

        {#if listState === "pinned"}

          <Placeholder

            iconName="desert"
modified src/views/nodes/SeedSelector.svelte
@@ -75,7 +75,7 @@


<style>

  .container {
- 
    justify-content: space-between;
+ 
    justify-content: flex-start;

    width: 100%;

  }

  .popover {
@@ -84,7 +84,7 @@
  }



  .validation-message {
- 
    color: var(--color-foreground-red);
+ 
    color: var(--color-feedback-error-text);

    margin-top: 0.5rem;

    margin-left: 0.5rem;

    display: flex;
@@ -102,24 +102,10 @@
  .target {

    display: flex;

    flex-direction: row;
+ 
    align-items: center;

    gap: 0.5rem;

    max-width: 19.5rem;

  }
-
- 
  @media (max-width: 1010.98px) {
- 
    .target {
- 
      max-width: 10rem;
- 
    }
- 
    .container {
- 
      justify-content: flex-start;
- 
    }
- 
  }
-
- 
  @media (max-width: 719.98px) {
- 
    .target {
- 
      max-width: 14.5rem;
- 
    }
- 
  }

</style>



<div class="global-flex-item container" style:width="100%">
@@ -127,9 +113,9 @@
    bind:expanded

    popoverPositionTop="2.5rem"

    popoverPadding="0.25rem"
- 
    popoverBorderRadius="var(--border-radius-small)">
+ 
    popoverBorderRadius="var(--border-radius-md)">

    <div class="target" slot="toggle" title="Switch preferred seed" let:toggle>
- 
      <div class="txt-medium txt-semibold txt-overflow">
+ 
      <div class="txt-body-m-semibold txt-overflow">

        {baseUrl.hostname}

      </div>

      <IconButton on:click={toggle} ariaLabel="Toggle seed selector dropdown">
@@ -138,8 +124,8 @@
    </div>



    <svelte:fragment slot="popover">
- 
      <div style:width="16rem">
- 
        <div class="txt-small" style:margin="0.5rem 0.5rem">
+ 
      <div style:min-width="16rem">
+ 
        <div class="txt-body-s-regular" style:margin="0.5rem 0.5rem">

          Navigate to seed

        </div>

        <div style:padding="0 0.25rem">
@@ -153,7 +139,9 @@
            on:submit={navigateToSeed} />

        </div>

        {#if validationMessage}
- 
          <span class="validation-message txt-small">{validationMessage}</span>
+ 
          <span class="validation-message txt-body-s-regular">
+ 
            {validationMessage}
+ 
          </span>

        {/if}

        <div class="popover" style:padding-top="0.75rem">

          <DropdownList items={$bookmarkedSeeds} styleDropdownPadding="0">
@@ -167,14 +155,14 @@
              selected={isEqual(baseUrl, item)}>

              <div class="flex-wrapper">

                <div class="global-flex-item txt-overflow">
- 
                  <Icon name="seedling" />
+ 
                  <Icon name="seed" />

                  <div class="txt-overflow">{item.hostname}</div>

                </div>

                <IconButton

                  ariaLabel="Remove bookmark"

                  stopPropagation

                  on:click={() => removeBookmark(item)}>
- 
                  <Icon name="bookmark-on" />
+ 
                  <Icon name="bookmark-fill" />

                </IconButton>

              </div>

            </DropdownListItem>
@@ -189,17 +177,20 @@
              let:item>

              <div class="flex-wrapper">

                <div class="global-flex-item txt-overflow">
- 
                  <Icon name="seedling" />
+ 
                  <Icon name="seed" />

                  <div class="txt-overflow">{item.hostname}</div>

                </div>

                <IconButton disabled title="Default seeds can't be removed">
- 
                  <Icon name="bookmark-on" />
+ 
                  <Icon name="bookmark-fill" />

                </IconButton>

              </div>

            </DropdownListItem>

          </DropdownList>

          {#if !$bookmarkedSeeds.length && !config.preferredSeeds.length}
- 
            <span class="txt-missing txt-small" style:padding="0.5rem">
+ 
            <span
+ 
              class="txt-body-m-regular"
+ 
              style:padding="0.5rem"
+ 
              style:color="var(--color-text-tertiary)">

              No default or bookmarked seeds

            </span>

          {/if}
@@ -226,9 +217,9 @@
      }

    }}>

    {#if some($bookmarkedSeeds, baseUrl) || some(config.preferredSeeds, baseUrl)}
- 
      <Icon name="bookmark-on" />
+ 
      <Icon name="bookmark-fill" />

    {:else}
- 
      <Icon name="bookmark-off" />
+ 
      <Icon name="bookmark" />

    {/if}

  </IconButton>

</div>
modified src/views/nodes/Seeding.svelte
@@ -19,10 +19,10 @@


<div

  class="item"
- 
  style="justify-content: space-between; display: flex; text-wrap: nowrap; font-size: var(--font-size-small); ">
+ 
  style="justify-content: space-between; display: flex; text-wrap: nowrap; font: var(--txt-body-m-regular); ">

  <span>Seeding</span>

  <div class="global-flex-item" style:gap="0.25rem">
- 
    <Icon name="seedling" />{formatter.format(count).toLowerCase()}
+ 
    <Icon name="seed" />{formatter.format(count).toLowerCase()}

    <slot />

  </div>

</div>
modified src/views/nodes/UserAgent.svelte
@@ -6,9 +6,8 @@


<style>

  .agent {
- 
    color: var(--color-fill-gray);
- 
    font-family: var(--font-family-monospace);
- 
    font-size: var(--font-size-small);
+ 
    color: var(--color-text-tertiary);
+ 
    font: var(--txt-code-regular);

    max-width: 19rem;

    margin-right: 2.25rem;

  }
@@ -18,7 +17,7 @@
    align-items: center;

    justify-content: space-between;

    gap: 0.5rem;
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

    width: 100%;

  }

  @media (max-width: 1010.98px) {
@@ -30,7 +29,7 @@


<div class="item">

  <div style:white-space="nowrap">User Agent</div>
- 
  <Id ariaLabel="agent" id={agent} shorten={false} style="none">
+ 
  <Id ariaLabel="agent" id={agent} shorten={false}>

    <div class="agent">

      <div class="txt-overflow">{agent}</div>

    </div>
modified src/views/nodes/View.svelte
@@ -4,17 +4,13 @@
  import dompurify from "dompurify";

  import { markdown } from "@app/lib/markdown";
- 
  import Settings from "@app/App/Settings.svelte";
-
- 
  import Button from "@app/components/Button.svelte";

  import Command from "@app/components/Command.svelte";
- 
  import Help from "@app/App/Help.svelte";

  import Icon from "@app/components/Icon.svelte";

  import IconButton from "@app/components/IconButton.svelte";
- 
  import Link from "@app/components/Link.svelte";
- 
  import MobileFooter from "@app/App/MobileFooter.svelte";
+ 
  import Layout from "@app/components/Layout.svelte";

  import Popover from "@app/components/Popover.svelte";

  import ReposView from "./ReposView.svelte";
+ 
  import UserAvatar from "@app/components/UserAvatar.svelte";



  import PolicyExplainer from "./PolicyExplainer.svelte";

  import SeedSelector from "./SeedSelector.svelte";
@@ -26,19 +22,6 @@
  export let stats: NodeStats;

  export let node: Node;
- 
  let scrollY: number;
- 
  let top: number;
-
- 
  $: if (scrollY >= 0 && scrollY < 289) {
- 
    top = 288 - scrollY;
- 
  } else if (scrollY >= 289) {
- 
    top = 0;
- 
  }
-
- 
  $: background = node.bannerUrl
- 
    ? `url("${node.bannerUrl}")`
- 
    : `url("/images/default-seed-header.png")`;
- 


  function render(content: string): string {

    return dompurify.sanitize(

      markdown({ linkify: true, emojis: true }).parse(content) as string,
@@ -47,83 +30,18 @@
</script>



<style>
- 
  .below-header {
- 
    display: grid;
- 
    grid-template: auto 1fr auto / auto 1fr auto;
- 
  }
- 
  .breadcrumbs {
- 
    display: flex;
- 
    gap: 0.5rem;
- 
    flex-direction: row;
- 
    align-items: center;
- 
    height: 3.5rem;
- 
    font-weight: var(--font-weight-semibold);
- 
    font-size: var(--font-size-small);
- 
    padding: 0.5rem 0.5rem 0.5rem 1rem;
- 
    justify-content: flex-end;
- 
  }
-
- 
  .description {
- 
    word-break: break-word;
- 
  }
-
- 
  .header {
- 
    grid-column: 1 / 4;
- 
    border-bottom: 1px solid var(--color-fill-separator);
- 
    height: 18rem;
- 
    display: flex;
- 
    justify-content: space-between;
- 
    flex-direction: column;
- 
    position: sticky;
- 
    z-index: 5;
- 
    background-color: var(--color-background-default);
- 
    background-position: center;
- 
    background-size: cover;
- 
  }

  .sidebar {
- 
    grid-column: 1 / 2;
- 
    border-right: 1px solid var(--color-fill-separator);
- 
    width: 30rem;
- 
    position: fixed;
- 
    display: flex;
- 
    flex-direction: column;
- 
    justify-content: space-between;
- 
    padding: 1.5rem;
- 
    height: 100%;
- 
    z-index: 1;
- 
  }
-
- 
  .content {
- 
    grid-column: 2 / 3;
- 
    margin-left: 30rem;
+ 
    padding: 1rem;

  }
- 
  .mobile-header {
- 
    height: 8rem;
+ 
  .sidebar-content {
+ 
    gap: 1rem;

    display: flex;
- 
    align-items: flex-end;
- 
    border-bottom: 1px solid var(--color-fill-separator);
- 
    background-color: var(--color-background-default);
- 
    background-position: center;
- 
    background-size: cover;
- 
  }
-
- 
  .mobile-footer {
- 
    display: none;
+ 
    flex-direction: column;

  }
- 
  .container {
- 
    width: 100%;
- 
    display: flex;
- 
    justify-content: center;
- 
  }
- 
  .wrapper {
- 
    padding: 1.5rem;
- 
    max-width: 78rem;
- 
    margin: 0 auto;
- 
    width: 100%;
- 
    display: flex;
- 
    flex-direction: column;
+ 
  .description {
+ 
    word-break: break-word;

  }



  .sidebar-item {
@@ -133,132 +51,63 @@
  }



  .box {
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

    line-height: 1.625rem;

    width: 17rem;

  }
+ 


  code {
- 
    font-family: var(--font-family-monospace);
- 
    font-size: var(--font-size-small);
- 
    background-color: var(--color-fill-ghost);
- 
    border-radius: var(--border-radius-tiny);
+ 
    font: var(--txt-code-regular);
+ 
    background-color: var(--color-surface-mid);
+ 
    border-radius: var(--border-radius-sm);

    padding: 0.125rem 0.25rem;

  }
- 
  .desktop-hostname {
- 
    max-width: 22rem;
- 
  }
- 
  @media (max-width: 1010.98px) {
- 
    .wrapper {
- 
      padding: 1.5rem;
- 
    }
- 
    .sidebar {
- 
      width: 325px;
- 
    }
- 
    .content {
- 
      margin-left: 325px;
- 
    }
- 
    .desktop-hostname {
- 
      max-width: 12rem;
- 
    }
- 
  }
-
- 
  @media (max-width: 719.98px) {
- 
    .title {
- 
      display: flex;
- 
      flex-direction: column;
- 
      margin-left: 1.5rem;
- 
    }
- 
    .layout {
- 
      height: 100%;
- 
    }
- 
    .below-header {
- 
      height: 100%;
- 
    }
- 
    .header {
- 
      display: none;
- 
    }
- 
    .content {
- 
      overflow-x: hidden;
- 
      margin-left: 0;
- 
    }
- 
    .wrapper {
- 
      width: 100%;
- 
      padding: 1rem;
- 
    }
- 
    .container {
- 
      padding: 0;
- 
    }
- 
    .mobile-footer {
- 
      margin-top: auto;
- 
      display: grid;
- 
      grid-column: 1 / 4;
- 
      background-color: pink;
- 
    }
- 
  }

</style>
- 
<svelte:window bind:scrollY />
-
- 
<div class="layout">
- 
  <div class="header" style:background-image={background}>
- 
    <div class="breadcrumbs">
- 
      <Link
- 
        style="display: flex; align-items: center;"
- 
        route={{ resource: "nodes", params: undefined }}>
- 
        <div
- 
          style="background-color: var(--color-background-default);border-radius: var(--border-radius-small); display: flex; padding: 0.5rem 0;">
- 
          <img
- 
            style:margin="0 0.5rem"
- 
            width="24"
- 
            height="24"
- 
            class="logo"
- 
            alt="Radicle logo"
- 
            src="/radicle.svg" />
- 
        </div>
- 
      </Link>
- 
    </div>
- 
  </div>
+ 
<Layout>
+ 
  <div slot="sidebar">
+ 
    {#if node.bannerUrl}
+ 
      <img style:width="100%" alt="Node banner" src={node.bannerUrl} />
+ 
    {/if}
- 
  <div class="below-header">
- 
    <div
- 
      class="sidebar global-hide-on-mobile-down"
- 
      style:top={`${top}px`}
- 
      style:height={`calc(100% - ${top}px)`}>
- 
      <div class="title">
- 
        <div
- 
          style="display: flex; align-items: center; gap: 1rem;"
- 
          style:margin-bottom="1.5rem">
- 
          <img
- 
            style:border-radius="var(--border-radius-small)"
- 
            style:min-width="64px"
- 
            width="64"
- 
            height="64"
- 
            class="avatar"
- 
            alt="Seed avatar"
- 
            src={node.avatarUrl
- 
              ? node.avatarUrl
- 
              : "/images/default-seed-avatar.png"} />
+ 
    <div class="sidebar">
+ 
      <div class="sidebar-content">
+ 
        <div style:display="flex" style:align-items="center" style:gap="1rem">
+ 
          {#if node.avatarUrl}
+ 
            <img
+ 
              style:border-radius="var(--border-radius-md)"
+ 
              style:min-width="64px"
+ 
              width="64"
+ 
              height="64"
+ 
              class="avatar"
+ 
              alt="Seed avatar"
+ 
              src={node.avatarUrl} />
+ 
          {:else}
+ 
            <UserAvatar nodeId={node.id} styleWidth="4rem" />
+ 
          {/if}

          <div style:width="100%">
- 
            <div class="global-flex-item desktop-hostname">
+ 
            <div class="global-flex-item">

              <SeedSelector {baseUrl} />

            </div>

            <NodeAddress {node} />

          </div>

        </div>
+ 


        {#if node.description}
- 
          <div class="description txt-small">
+ 
          <div class="description txt-body-m-regular">

            {@html render(node.description)}

          </div>

        {:else}

          <div
- 
            class="global-flex-item txt-small txt-missing"
+ 
            class="global-flex-item txt-body-m-regular"

            style:align-items="center"

            style:justify-content="space-between"
+ 
            style:color="var(--color-text-tertiary)"

            style:gap="0.25rem">

            No description configured.

            <Popover popoverPositionTop="0" popoverPositionLeft="2.25rem">

              <IconButton slot="toggle" let:toggle on:click={toggle}>
- 
                <Icon name="info" />
+ 
                <Icon name="guide" />

              </IconButton>



              <div slot="popover" class="box">
@@ -279,11 +128,8 @@
            </Popover>

          </div>

        {/if}
- 
        <div
- 
          style:display="flex"
- 
          style:margin-top="1.5rem"
- 
          style:margin-bottom="1rem"
- 
          style:flex-direction="column">
+
+ 
        <div style:display="flex" style:flex-direction="column">

          <PolicyExplainer seedingPolicy={node.config?.seedingPolicy} />

          <div class="sidebar-item">

            <Seeding count={stats.repos.total}>
@@ -295,120 +141,10 @@
          </div>

        </div>

      </div>
- 
      <div class="sidebar-footer">
- 
        <div
- 
          style:margin-top="1.5rem"
- 
          style:display="flex"
- 
          style:justify-content="space-between"
- 
          style:flex-direction="row">
- 
          <div class="horizontal-buttons">
- 
            <Popover popoverPositionBottom="2.5rem" popoverPositionLeft="0">
- 
              <Button
- 
                variant="outline"
- 
                title="Settings"
- 
                slot="toggle"
- 
                let:toggle
- 
                on:click={toggle}>
- 
                <Icon name="settings" />
- 
                Settings
- 
              </Button>
-
- 
              <Settings slot="popover" />
- 
            </Popover>
- 
          </div>
- 
          <div class="horizontal-buttons">
- 
            <Popover popoverPositionBottom="2.5rem" popoverPositionLeft="0">
- 
              <Button
- 
                variant="outline"
- 
                title="Help"
- 
                slot="toggle"
- 
                let:toggle
- 
                on:click={toggle}>
- 
                <Icon name="help" />
- 
                Help
- 
              </Button>
- 
              <Help slot="popover" />
- 
            </Popover>
- 
          </div>
- 
        </div>
- 
      </div>
- 
    </div>
-
- 
    <div class="content">
- 
      <div class="global-hide-on-small-desktop-up">
- 
        <div
- 
          class="mobile-header txt-huge txt-semibold"
- 
          style:background-image={background}>
- 
        </div>
- 
      </div>
- 
      <div class="container">
- 
        <div class="wrapper">
- 
          <div
- 
            class="global-hide-on-small-desktop-up"
- 
            style="display: flex; align-items: center; gap: 1rem;">
- 
            <img
- 
              style:min-width="64px"
- 
              style:border-radius="var(--border-radius-small)"
- 
              width="64"
- 
              height="64"
- 
              alt="Seed avatar"
- 
              src={node.avatarUrl
- 
                ? node.avatarUrl
- 
                : "/images/default-seed-avatar.png"} />
- 
            <div>
- 
              <div class="global-flex-item">
- 
                <SeedSelector {baseUrl} />
- 
              </div>
- 
              <NodeAddress {node} />
- 
            </div>
- 
          </div>
- 
          {#if node.description}
- 
            <div
- 
              class="global-hide-on-small-desktop-up"
- 
              style:margin-top="1.5rem"
- 
              style:display="flex"
- 
              style:flex-direction="column"
- 
              style:gap="0.25rem">
- 
              {#if node.description}
- 
                <div class="description txt-small">
- 
                  {@html render(node.description)}
- 
                </div>
- 
              {/if}
- 
            </div>
- 
          {:else}
- 
            <div
- 
              class="global-flex-item txt-small txt-missing global-hide-on-small-desktop-up"
- 
              style:margin-top="1.5rem">
- 
              No description configured.
- 
            </div>
- 
          {/if}
-
- 
          <ReposView {baseUrl} {stats} />
- 
        </div>
- 
      </div>

    </div>
+ 
  </div>
- 
    <div class="mobile-footer">
- 
      <MobileFooter>
- 
        <div style:width="100%">
- 
          <Popover popoverPositionBottom="3rem" popoverPositionRight="-7.5rem">
- 
            <Button
- 
              let:expanded
- 
              slot="toggle"
- 
              variant={expanded ? "secondary" : "secondary-mobile-toggle"}
- 
              styleWidth="100%"
- 
              let:toggle
- 
              on:click={toggle}>
- 
              <Icon name="info" />
- 
            </Button>
-
- 
            <div slot="popover" style:width="20rem">
- 
              <PolicyExplainer seedingPolicy={node.config?.seedingPolicy} />
- 
              <UserAgent agent={node.agent} />
- 
            </div>
- 
          </Popover>
- 
        </div>
- 
      </MobileFooter>
- 
    </div>
+ 
  <div slot="center">
+ 
    <ReposView {baseUrl} {stats} />

  </div>
- 
</div>
+ 
</Layout>
modified src/views/repos/Changeset.svelte
@@ -41,25 +41,25 @@
    align-items: center;

    justify-content: space-between;

    padding: 1rem 1rem 0.5rem 1rem;
- 
    background-color: var(--color-background-default);
+ 
    background-color: var(--color-surface-base);

  }

  .additions {
- 
    color: var(--color-foreground-success);
+ 
    color: var(--color-text-open);

    white-space: nowrap;

  }

  .deletions {
- 
    color: var(--color-foreground-red);
+ 
    color: var(--color-feedback-error-text);

    white-space: nowrap;

  }

  .diff-list {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;
- 
    background-color: var(--color-background-default);
+ 
    background-color: var(--color-surface-base);

    padding: 1rem;

  }

  .summary {
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

  }

  @media (max-width: 719.98px) {

    .diff-list {
@@ -85,10 +85,10 @@
  {#if diff.stats.filesChanged > 1}

    <IconButton on:click={() => (expanded = !expanded)}>

      {#if expanded === true}
- 
        <Icon name="collapse" />
+ 
        <Icon name="collapse-vertical" />

        <span class="global-hide-on-mobile-down">Collapse all</span>

      {:else}
- 
        <Icon name="expand" />
+ 
        <Icon name="expand-vertical" />

        <span class="global-hide-on-mobile-down">Expand all</span>

      {/if}

    </IconButton>
modified src/views/repos/Changeset/FileDiff.svelte
@@ -250,9 +250,9 @@


<style>

  .container {
- 
    font-size: var(--font-size-small);
- 
    background: var(--color-background-float);
- 
    border-radius: 0 0 var(--border-radius-small) var(--border-radius-small);
+ 
    font: var(--txt-body-m-regular);
+ 
    background: var(--color-surface-subtle);
+ 
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);

    overflow-x: auto;

  }

  .actions {
@@ -270,7 +270,7 @@
    margin-right: 0.5rem;

  }

  .diff {
- 
    font-family: var(--font-family-monospace);
+ 
    font: var(--txt-code-regular);

    table-layout: fixed;

    border-collapse: collapse;

    margin: 0.5rem 0;
@@ -279,73 +279,73 @@
    vertical-align: top;

  }

  .diff-line.type-addition > * {
- 
    background-color: var(--color-fill-diff-green-light);
+ 
    background-color: var(--color-feedback-success-bg);

  }

  .diff-line.type-deletion > * {
- 
    background-color: var(--color-fill-diff-red-light);
+ 
    background-color: var(--color-feedback-error-bg);

  }



  .diff-line.selected > * {
- 
    background-color: var(--color-fill-float-hover);
+ 
    background-color: var(--color-surface-mid);

  }

  .diff-line.selected.type-addition > * {
- 
    background-color: var(--color-fill-diff-green);
+ 
    background-color: var(--color-feedback-success-bg-selected);

  }

  .diff-line.selected.type-deletion > * {
- 
    background-color: var(--color-fill-diff-red);
+ 
    background-color: var(--color-feedback-error-bg-selected);

  }



  .type-addition > .diff-line-number,

  .type-addition > .diff-line-type {
- 
    color: var(--color-foreground-success);
+ 
    color: var(--color-text-open);

  }

  .type-deletion > .diff-line-number,

  .type-deletion > .diff-line-type {
- 
    color: var(--color-foreground-red);
+ 
    color: var(--color-feedback-error-text);

  }



  .diff-line.selected .selection-indicator-left {
- 
    background-color: var(--color-fill-secondary);
+ 
    background-color: var(--color-surface-brand-primary);

  }

  .type-addition.diff-line.selected .selection-indicator-left {
- 
    background-color: var(--color-fill-secondary);
+ 
    background-color: var(--color-surface-brand-primary);

  }

  .type-deletion.diff-line.selected .selection-indicator-left {
- 
    background-color: var(--color-fill-secondary);
+ 
    background-color: var(--color-surface-brand-primary);

  }



  .diff-line.selected .selection-indicator-right {
- 
    background-color: var(--color-fill-secondary);
+ 
    background-color: var(--color-surface-brand-primary);

  }

  .type-addition.diff-line.selected .selection-indicator-right {
- 
    background-color: var(--color-fill-secondary);
+ 
    background-color: var(--color-surface-brand-primary);

  }

  .type-deletion.diff-line.selected .selection-indicator-right {
- 
    background-color: var(--color-fill-secondary);
+ 
    background-color: var(--color-surface-brand-primary);

  }



  .selection-start {
- 
    box-shadow: 0 -1px 0 0 var(--color-fill-secondary);
+ 
    box-shadow: 0 -1px 0 0 var(--color-border-brand);

    z-index: 1;

  }

  .selection-end {
- 
    box-shadow: 0 1px 0 0 var(--color-fill-secondary);
+ 
    box-shadow: 0 1px 0 0 var(--color-border-brand);

    z-index: 1;

  }



  .selection-start.selection-end {
- 
    box-shadow: 0 0 0 1px var(--color-fill-secondary);
+ 
    box-shadow: 0 0 0 1px var(--color-border-brand);

    z-index: 1;

  }



  .diff-line-number {
- 
    font-family: var(--font-family-monospace);
+ 
    font: var(--txt-code-regular);

    text-align: right;

    user-select: none;

    line-height: 1.5rem;

    min-width: 3rem;

    cursor: pointer;
- 
    color: var(--color-foreground-disabled);
+ 
    color: var(--color-text-disabled);

  }

  .diff-line-number.left {

    position: relative;
@@ -383,7 +383,7 @@
  }

  .diff-expand-header {

    padding-left: 0.5rem;
- 
    color: var(--color-foreground-dim);
+ 
    color: var(--color-text-tertiary);

  }

</style>
@@ -433,7 +433,7 @@
                window.location.hash = "";

                preview = true;

              }}>
- 
              <Icon name="eye-open" />Preview
+ 
              <Icon name="eye" />Preview

            </Button>

          </Radio>

        {/if}
modified src/views/repos/Changeset/FileLocationChange.svelte
@@ -17,8 +17,8 @@


<style>

  .wrapper {
- 
    border: 1px solid var(--color-border-default);
- 
    border-radius: var(--border-radius-small);
+ 
    border: 1px solid var(--color-border-mid);
+ 
    border-radius: var(--border-radius-md);

    line-height: 1.5rem;

  }

  .header {
modified src/views/repos/Cob/Assignees.svelte
@@ -8,7 +8,7 @@


<style>

  .header {
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

    margin-bottom: 0.75rem;

  }

  .body {
@@ -17,7 +17,7 @@
    flex-direction: row;

    width: 100%;

    gap: 0.5rem;
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

  }

  @media (max-width: 1349.98px) {

    .wrapper {
@@ -50,7 +50,9 @@
    {#each assignees as { id, alias }}

      <NodeId {baseUrl} nodeId={id} {alias} />

    {:else}
- 
      <div class="txt-missing no-assignees">No assignees</div>
+ 
      <div class="no-assignees" style:color="var(--color-text-tertiary)">
+ 
        No assignees
+ 
      </div>

    {/each}

  </div>

</div>
modified src/views/repos/Cob/CobCommitTeaser.svelte
@@ -21,7 +21,7 @@
<style>

  .teaser {

    display: flex;
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

    align-items: start;

    padding: 0.125rem 0;

  }
@@ -49,7 +49,7 @@
  }

  .commit-message {

    margin: 0.5rem 0;
- 
    font-size: var(--font-size-tiny);
+ 
    font: var(--txt-body-s-regular);

  }

  pre {

    white-space: pre-wrap;
@@ -68,7 +68,7 @@
          commit: commit.id,

        }}>

        <div class="summary" use:twemoji>
- 
          <InlineTitle fontSize="small" content={commit.summary} />
+ 
          <InlineTitle fontSize="body-m-regular" content={commit.summary} />

        </div>

      </Link>

      {#if commit.description}
@@ -88,7 +88,7 @@
    {/if}

    <div class="global-hide-on-small-desktop-up">

      <CompactCommitAuthorship {commit}>
- 
        <Id id={commit.id} style="commit" />
+ 
        <Id id={commit.id} />

      </CompactCommitAuthorship>

    </div>

  </div>
@@ -96,7 +96,7 @@
    <div style="display: flex; gap: 0.5rem; height: 21px; align-items: center;">

      <div class="global-hide-on-mobile-down">

        <CompactCommitAuthorship {commit}>
- 
          <Id id={commit.id} style="commit" />
+ 
          <Id id={commit.id} />

        </CompactCommitAuthorship>

      </div>

      <IconButton title="Browse repo at this commit">
modified src/views/repos/Cob/CobHeader.svelte
@@ -13,7 +13,7 @@
    align-items: center;

    flex-wrap: wrap;

    gap: 0.5rem;
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

  }

  .summary {

    display: flex;
@@ -26,7 +26,7 @@
    display: flex;

    flex-direction: column;

    gap: 0.5rem;
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

    margin-top: 2rem;

    word-break: break-word;

  }
modified src/views/repos/Cob/Embeds.svelte
@@ -9,7 +9,7 @@


<style>

  .header {
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

    margin-bottom: 0.75rem;

  }

  .body {
@@ -17,7 +17,7 @@
    flex-wrap: wrap;

    flex-direction: row;

    gap: 0.5rem;
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

  }



  @media (max-width: 1349.98px) {
@@ -50,7 +50,9 @@
        <Clipboard text={`![${embed.name}](${embed.content.substring(4)})`} />

      </Badge>

    {:else}
- 
      <div class="txt-missing no-attachments">No attachments</div>
+ 
      <div class="no-attachments" style:color="var(--color-text-tertiary)">
+ 
        No attachments
+ 
      </div>

    {/each}

  </div>

</div>
modified src/views/repos/Cob/Labels.svelte
@@ -6,7 +6,7 @@


<style>

  .header {
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

    margin-bottom: 0.75rem;

  }

  .body {
@@ -15,7 +15,7 @@
    flex-wrap: wrap;

    flex-direction: row;

    gap: 0.5rem;
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

  }

  @media (max-width: 1349.98px) {

    .wrapper {
@@ -49,7 +49,9 @@
        {label}

      </Badge>

    {:else}
- 
      <div class="txt-missing no-labels">No labels</div>
+ 
      <div class="no-labels" style:color="var(--color-text-tertiary)">
+ 
        No labels
+ 
      </div>

    {/each}

  </div>

</div>
modified src/views/repos/Cob/Reviews.svelte
@@ -21,14 +21,14 @@


<style>

  .header {
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

    margin-bottom: 0.75rem;

  }

  .body {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

  }

  .review {

    display: inline-flex;
@@ -36,14 +36,17 @@
    gap: 0.5rem;

  }

  .review-accept {
- 
    color: var(--color-foreground-success);
+ 
    color: var(--color-text-open);

  }

  .review-reject {
- 
    color: var(--color-foreground-red);
+ 
    color: var(--color-feedback-error-text);

  }
- 
  .txt-missing .review-accept,
- 
  .txt-missing .review-reject {
- 
    color: var(--color-foreground-dim);
+ 
  .review-missing {
+ 
    color: var(--color-text-tertiary);
+ 
  }
+ 
  .review-missing .review-accept,
+ 
  .review-missing .review-reject {
+ 
    color: var(--color-text-tertiary);

  }

  @media (max-width: 1349.98px) {

    .wrapper {
@@ -74,7 +77,7 @@
    {#each sortedReviews as { latest, review }}

      <div

        class="review"
- 
        class:txt-missing={!latest}
+ 
        class:review-missing={!latest}

        title={!latest

          ? `This review was on a previous revision. Please ask ${review.author.alias} to re-review`

          : ""}>
@@ -86,7 +89,7 @@
          {:else if review.verdict === "reject"}

            <Icon name="cross" />

          {:else}
- 
            <Icon name="chat" />
+ 
            <Icon name="comment" />

          {/if}

        </span>

        <NodeId
@@ -95,7 +98,9 @@
          alias={review.author.alias} />

      </div>

    {:else}
- 
      <div class="txt-missing no-reviews">No reviews</div>
+ 
      <div class="no-reviews" style:color="var(--color-text-tertiary)">
+ 
        No reviews
+ 
      </div>

    {/each}

  </div>

</div>
modified src/views/repos/Cob/Revision.svelte
@@ -71,25 +71,25 @@
  function verdictIconColor(verdict?: Verdict | null) {

    switch (verdict) {

      case "accept":
- 
        return "var(--color-foreground-success)";
+ 
        return "var(--color-text-open)";

      case "reject":
- 
        return "var(--color-foreground-red)";
+ 
        return "var(--color-feedback-error-text)";

      default:
- 
        return "var(--color-fill-gray)";
+ 
        return "var(--color-text-tertiary)";

    }

  }



  function badgeColor({ status }: PatchState): string | undefined {

    if (status === "draft") {
- 
      return "var(--color-fill-gray)";
+ 
      return "var(--color-text-tertiary)";

    } else if (status === "open") {
- 
      return "var(--color-foreground-success)";
+ 
      return "var(--color-text-open)";

    } else if (status === "archived") {
- 
      return "var(--color-foreground-yellow)";
+ 
      return "var(--color-text-archived)";

    } else if (status === "merged") {
- 
      return "var(--color-fill-primary)";
+ 
      return "var(--color-text-merged)";

    } else {
- 
      return "var(--color-foreground-success)";
+ 
      return "var(--color-text-open)";

    }

  }
@@ -124,26 +124,26 @@


<style>

  .action {
- 
    border-radius: var(--border-radius-small);
+ 
    border-radius: var(--border-radius-md);

    min-height: 2.5rem;

    display: flex;

    align-items: center;

  }

  .merge {
- 
    border: 1px solid var(--color-border-merged);
- 
    background-color: var(--color-fill-merged);
+ 
    border: 1px solid var(--color-text-merged);
+ 
    background-color: var(--color-surface-merged);

  }

  .positive-review {
- 
    border: 1px solid var(--color-fill-diff-green);
- 
    background-color: var(--color-fill-diff-green-light);
+ 
    border: 1px solid var(--color-feedback-success-border);
+ 
    background-color: var(--color-feedback-success-bg);

  }

  .comment-review {
- 
    border: 1px solid var(--color-border-hint);
- 
    background-color: var(--color-fill-float);
+ 
    border: 1px solid var(--color-border-subtle);
+ 
    background-color: var(--color-surface-subtle);

  }

  .negative-review {
- 
    border: 1px solid var(--color-fill-diff-red);
- 
    background-color: var(--color-fill-diff-red-light);
+ 
    border: 1px solid var(--color-feedback-error-border);
+ 
    background-color: var(--color-feedback-error-bg);

  }



  .diff-error {
@@ -152,10 +152,10 @@
  .revision {

    display: flex;

    flex-direction: column;
- 
    border-radius: var(--border-radius-small);
+ 
    border-radius: var(--border-radius-sm);

  }

  .revision-box {
- 
    border-radius: var(--border-radius-small);
+ 
    border-radius: var(--border-radius-sm);

  }

  .revision-header {

    display: flex;
@@ -163,21 +163,20 @@
    justify-content: center;

    background: none;

    padding: 0.5rem;
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

    height: 3rem;

  }

  .revision-name {

    display: flex;

    align-items: center;

    gap: 0.5rem;
- 
    font-weight: var(--font-weight-medium);

  }

  .revision-data {

    gap: 0.5rem;

    display: flex;

    align-items: center;

    margin-left: auto;
- 
    color: var(--color-foreground-dim);
+ 
    color: var(--color-text-tertiary);

  }

  .revision-description {

    margin-left: 2.75rem;
@@ -185,22 +184,19 @@
    max-width: fit-content;

  }

  .author-metadata {
- 
    color: var(--color-fill-gray);
- 
    font-size: var(--font-size-small);
- 
  }
- 
  .compare-dropdown-item {
- 
    font-weight: var(--font-weight-regular);
+ 
    color: var(--color-text-tertiary);
+ 
    font: var(--txt-body-m-regular);

  }

  .patch-header {
- 
    background-color: var(--color-fill-float);
- 
    border-bottom: 1px solid var(--color-fill-separator);
- 
    border-top: 1px solid var(--color-fill-separator);
+ 
    background-color: var(--color-surface-subtle);
+ 
    border-bottom: 1px solid var(--color-border-subtle);
+ 
    border-top: 1px solid var(--color-border-subtle);

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-height: 2.5rem;

    padding: 0.5rem 0;
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

    gap: 0.5rem;

  }

  .authorship-header {
@@ -211,11 +207,11 @@
    padding: 0 0.5rem;

    min-height: 1.5rem;

    gap: 0.5rem;
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

  }

  .timestamp {
- 
    font-size: var(--font-size-small);
- 
    color: var(--color-fill-gray);
+ 
    font: var(--txt-body-m-regular);
+ 
    color: var(--color-text-tertiary);

  }

  .actions {

    display: flex;
@@ -232,7 +228,7 @@
    margin-left: 1.25rem;

    gap: 0.5rem;

    padding: 1rem 0.5rem 1rem 1rem;
- 
    border-left: 1px solid var(--color-fill-separator);
+ 
    border-left: 1px solid var(--color-border-subtle);

  }

  .commit:last-of-type::after {

    content: "";
@@ -240,25 +236,25 @@
    left: -18.5px;

    top: 14px;

    bottom: -1rem;
- 
    border-left: 4px solid var(--color-background-default);
+ 
    border-left: 4px solid var(--color-surface-base);

  }

  .expanded {
- 
    box-shadow: 0 0 0 1px var(--color-border-hint);
+ 
    box-shadow: 0 0 0 1px var(--color-border-subtle);

  }

  .commit-dot {
- 
    border-radius: var(--border-radius-round);
+ 
    border-radius: var(--border-radius-full);

    width: 4px;

    height: 4px;

    position: absolute;

    top: 0.625rem;

    left: -18.5px;
- 
    background-color: var(--color-fill-separator);
+ 
    background-color: var(--color-border-subtle);

  }

  .connector {

    width: 1px;

    height: 1.5rem;

    margin-left: 1.25rem;
- 
    background-color: var(--color-fill-separator);
+ 
    background-color: var(--color-border-subtle);

  }

  @media (max-width: 719.98px) {

    .revision-box {
@@ -309,13 +305,13 @@
          popoverPadding="0"

          popoverPositionTop={expanded ? "3rem" : "2.5rem"}

          popoverPositionRight="0"
- 
          popoverBorderRadius="var(--border-radius-small)">
+ 
          popoverBorderRadius="var(--border-radius-md)">

          <IconButton

            slot="toggle"

            let:toggle

            on:click={toggle}

            title="toggle-context-menu">
- 
            <Icon name="more" />
+ 
            <Icon name="ellipsis-vertical" />

          </IconButton>

          <DropdownList

            slot="popover"
@@ -344,10 +340,7 @@
                <DropdownListItem selected={false}>

                  <span class="compare-dropdown-item">

                    Compare to base:
- 
                    <span
- 
                      style:color="var(--color-fill-gray)"
- 
                      style:font-weight="var(--font-weight-bold)"
- 
                      style:font-family="var(--font-family-monospace)">
+ 
                    <span class="txt-id">

                      {utils.formatObjectId(revisionBase)}

                    </span>

                  </span>
@@ -363,9 +356,8 @@
                      )}`}>

                  <span class="compare-dropdown-item">

                    Compare to previous revision: <span
- 
                      style:color="var(--color-fill-secondary)"
- 
                      style:font-weight="var(--font-weight-bold)"
- 
                      style:font-family="var(--font-family-monospace)">
+ 
                      style:color="var(--color-text-brand)"
+ 
                      class="txt-id">

                      {utils.formatObjectId(previousRevId)}

                    </span>

                  </span>
@@ -391,13 +383,13 @@
              alias={revisionAuthor.alias} />

            {#if patchId === revisionId}

              opened this patch on base
- 
              <Id id={revisionBase} style="commit" />
+ 
              <Id id={revisionBase} />

            {:else}

              updated to

              <Id id={revisionId} />

              {#if previousRevBase && previousRevBase !== revisionBase}

                on base
- 
                <Id id={revisionBase} style="commit" />
+ 
                <Id id={revisionBase} />

              {/if}

            {/if}

            <span
@@ -417,7 +409,7 @@
            {/if}

          </div>

          {#if revisionDescription && !first}
- 
            <div class="revision-description txt-small">
+ 
            <div class="revision-description txt-body-m-regular">

              <Markdown

                breaks

                rawPath={rawPath(revisionBase)}
@@ -448,11 +440,11 @@
      </div>

      {#if error}

        <div
- 
          class="diff-error txt-monospace txt-small"
- 
          style:border-radius="var(--border-radius-small)">
+ 
          class="diff-error txt-code-regular"
+ 
          style:border-radius="var(--border-radius-md)">

          <ErrorMessage

            title="Failed to load diff for this revision"
- 
            description="Make sure you are able to connect to the seed <code>${utils.baseUrlToString(
+ 
            description="Make sure you are able to connect to the seed <code>{utils.baseUrlToString(

              api.baseUrl,

            )}</code>"

            {error} />
@@ -473,7 +465,7 @@
          <div class="connector"></div>

          <div class="action merge">

            <div class="authorship-header">
- 
              <div style:color="var(--color-fill-primary)">
+ 
              <div style:color="var(--color-text-merged)">

                <Icon name="patch" />

              </div>
@@ -486,11 +478,11 @@
              merged revision

              <Id id={element.inner.revision} />

              at commit
- 
              <Id id={element.inner.commit} style="commit" />
+ 
              <Id id={element.inner.commit} />

              <span

                class="timestamp"
- 
                title={utils.absoluteTimestamp(revisionTimestamp)}>
- 
                {utils.formatTimestamp(revisionTimestamp)}
+ 
                title={utils.absoluteTimestamp(element.inner.timestamp)}>
+ 
                {utils.formatTimestamp(element.inner.timestamp)}

              </span>

            </div>

          </div>
@@ -520,7 +512,7 @@
                {:else if review.verdict === "reject"}

                  <Icon name="cross" />

                {:else}
- 
                  <Icon name="chat" />
+ 
                  <Icon name="comment" />

                {/if}

              </div>

            </CommentComponent>
modified src/views/repos/CommentCounter.svelte
@@ -6,8 +6,8 @@


<style>

  .comments {
- 
    color: var(--color-foreground-dim);
- 
    font-size: var(--font-size-tiny);
+ 
    color: var(--color-text-tertiary);
+ 
    font: var(--txt-body-s-regular);

    display: flex;

    align-items: center;

    gap: 0.25rem;
@@ -16,6 +16,6 @@
</style>



<div class="comments">
- 
  <Icon name="chat" />
+ 
  <Icon name="comment" />

  <span>{commentCount}</span>

</div>
modified src/views/repos/Commit.svelte
@@ -46,20 +46,19 @@


<style>

  .commit {
- 
    background-color: var(--color-background-float);
+ 
    background-color: var(--color-surface-subtle);

  }

  .header {

    padding: 1rem;
- 
    border-radius: var(--border-radius-small);
- 
    border-bottom: 1px solid var(--color-border-hint);
+ 
    border-radius: var(--border-radius-md);
+ 
    border-bottom: 1px solid var(--color-border-subtle);

  }

  .title {

    display: flex;

    align-items: center;
- 
    font-weight: var(--font-weight-semibold);

  }

  .description {
- 
    font-family: var(--font-family-monospace);
+ 
    font: var(--txt-code-regular);

    white-space: pre-wrap;

    margin-top: 1.5rem;

  }
@@ -82,7 +81,7 @@
      Commits

    </Link>

    <Separator />
- 
    <span class="id">
+ 
    <span class="txt-id">

      <div class="global-hide-on-small-desktop-down">

        {commit.commit.id}

      </div>
@@ -95,7 +94,7 @@
    <div class="header">

      <div style="display:flex; flex-direction: column; gap: 0.5rem;">

        <span class="title">
- 
          <InlineTitle fontSize="large" content={header.summary} />
+ 
          <InlineTitle fontSize="heading-l" content={header.summary} />

          <div class="button-container">

            <Link

              route={{
@@ -121,9 +120,9 @@
          </div>

        </span>

        <CommitAuthorship {header}>
- 
          <Id id={header.id} style="commit" ariaLabel="commit-id" />
+ 
          <Id id={header.id} ariaLabel="commit-id" />

        </CommitAuthorship>
- 
        <span class="txt-small">
+ 
        <span class="txt-body-m-regular">

          {header.parents.length === 1 ? "Parent" : "Parents"}:

          {#each header.parents as parent, i}

            {i > 0 ? " + " : ""}
@@ -135,13 +134,13 @@
                node: baseUrl,

                commit: parent,

              }}>
- 
              <span class="global-commit">{formatObjectId(parent)}</span>
+ 
              <span class="txt-id">{formatObjectId(parent)}</span>

            </Link>

          {/each}

        </span>

      </div>

      {#if header.description}
- 
        <pre class="description txt-small">{@html dompurify.sanitize(
+ 
        <pre class="description">{@html dompurify.sanitize(

            convertUrlsToExternalLinks(escape(header.description)),

          )}</pre>

      {/if}
modified src/views/repos/Commit/CommitAuthorship.svelte
@@ -13,7 +13,7 @@
<style>

  .authorship {

    display: flex;
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

    gap: 0.5rem;

    flex-wrap: wrap;

    align-items: center;
@@ -24,13 +24,10 @@
    flex-wrap: nowrap;

    white-space: nowrap;

    gap: 0.5rem;
- 
    font-family: var(--font-family-monospace);
- 
    font-weight: var(--font-weight-semibold);

  }

  .avatar {

    width: 1rem;

    height: 1rem;
- 
    border-radius: var(--border-radius-round);

  }

</style>
modified src/views/repos/Commit/CommitTeaser.svelte
@@ -22,10 +22,10 @@
  .teaser {

    display: flex;

    padding: 1.25rem;
- 
    background-color: var(--color-background-float);
+ 
    background-color: var(--color-surface-canvas);

  }

  .teaser:hover {
- 
    background-color: var(--color-fill-float-hover);
+ 
    background-color: var(--color-surface-mid);

  }

  .message {

    align-items: center;
@@ -44,11 +44,11 @@
    align-items: flex-start;

    gap: 1rem;

    margin-left: auto;
- 
    color: var(--color-foreground-dim);
- 
    font-size: var(--font-size-tiny);
+ 
    color: var(--color-text-tertiary);
+ 
    font: var(--txt-body-s-regular);

  }

  .summary {
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

  }

  .summary::after {

    content: "";
@@ -66,7 +66,7 @@
  }

  .commit-message {

    margin: 0.5rem 0;
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

  }

  pre {

    white-space: pre-wrap;
@@ -86,7 +86,7 @@
        }}>

        <div style="position: relative;">

          <div class="summary" use:twemoji>
- 
            <InlineTitle fontSize="regular" content={commit.summary} />
+ 
            <InlineTitle fontSize="body-m-regular" content={commit.summary} />

          </div>

        </div>

      </Link>
@@ -104,7 +104,7 @@
      </div>

    {/if}

    <CommitAuthorship header={commit}>
- 
      <Id id={commit.id} style="commit" />
+ 
      <Id id={commit.id} />

    </CommitAuthorship>

  </div>

  <div class="right">
modified src/views/repos/Header.svelte
@@ -22,20 +22,20 @@
  }



  .counter {
- 
    border-radius: var(--border-radius-tiny);
- 
    background-color: var(--color-fill-ghost);
- 
    color: var(--color-foreground-dim);
+ 
    border-radius: var(--border-radius-sm);
+ 
    background-color: var(--color-surface-mid);
+ 
    color: var(--color-text-tertiary);

    padding: 0 0.25rem;

  }



  .selected {
- 
    background-color: var(--color-fill-counter);
- 
    color: var(--color-foreground-contrast);
+ 
    background-color: var(--color-surface-alpha-subtle);
+ 
    color: var(--color-text-primary);

  }



  .hover {
- 
    background-color: var(--color-fill-ghost-hover);
- 
    color: var(--color-foreground-contrast);
+ 
    background-color: var(--color-surface-strong);
+ 
    color: var(--color-text-primary);

  }



  .title-counter {
modified src/views/repos/Header/CloneButton.svelte
@@ -33,8 +33,7 @@


<style>

  .popover {
- 
    font-size: var(--font-size-small);
- 
    font-weight: var(--font-weight-regular);
+ 
    font: var(--txt-body-m-regular);

  }

  label {

    display: block;
@@ -44,7 +43,7 @@


<Popover popoverPositionTop="2.5rem" popoverPositionRight="0">

  <Button slot="toggle" let:toggle on:click={toggle} variant="outline">
- 
    <Icon name="download" />
+ 
    <Icon name="checkout" />

    <span class="global-hide-on-small-desktop-down">Clone</span>

  </Button>
modified src/views/repos/Header/SeedButton.svelte
@@ -13,8 +13,7 @@
<style>

  .seed-label {

    display: block;
- 
    font-size: var(--font-size-small);
- 
    font-weight: var(--font-weight-regular);
+ 
    font: var(--txt-body-m-regular);

    margin-bottom: 0.75rem;

  }

  .title-counter {
@@ -22,20 +21,18 @@
    gap: 0.5rem;

  }

  .counter {
- 
    font-weight: var(--font-weight-regular);
- 
    border-radius: var(--border-radius-tiny);
- 
    background-color: var(--color-fill-ghost-hover);
- 
    border: 1px solid var(--color-border-secondary-counter);
- 
    color: var(--color-foreground-contrast);
+ 
    border-radius: var(--border-radius-sm);
+ 
    background-color: var(--color-surface-strong);
+ 
    color: var(--color-text-primary);

    padding: 0 0.25rem;

  }

  .not-seeding {
- 
    background-color: var(--color-fill-secondary-counter);
- 
    color: var(--color-foreground-match-background);
+ 
    background-color: var(--color-surface-brand-secondary);
+ 
    color: var(--color-text-on-brand);

  }

  .disabled {
- 
    background-color: var(--color-fill-float-hover);
- 
    color: var(--color-foreground-disabled);
+ 
    background-color: var(--color-surface-mid);
+ 
    color: var(--color-text-disabled);

  }

</style>
@@ -48,13 +45,10 @@
      toggle();

    }}

    variant="secondary-toggle-off">
- 
    <Icon name="seedling" />
+ 
    <Icon name="seed" />

    <span class="title-counter">

      <span class="global-hide-on-mobile-down">Seed</span>
- 
      <span
- 
        class="counter not-seeding"
- 
        class:disabled
- 
        style:font-weight="var(--font-weight-regular)">
+ 
      <span class="counter not-seeding" class:disabled>

        {seedCount}

      </span>

    </span>
modified src/views/repos/History.svelte
@@ -83,9 +83,8 @@
    margin-left: 1rem;

    margin-top: 3rem;

    margin-bottom: 1rem;
- 
    font-size: var(--font-size-small);
- 
    font-weight: var(--font-weight-medium);
- 
    color: var(--color-foreground-dim);
+ 
    font: var(--txt-body-m-regular);
+ 
    color: var(--color-text-tertiary);

  }

  .group-header:first-child {

    margin-top: 0;
@@ -162,7 +161,7 @@
      <div class="message">

        <ErrorMessage

          title="Couldn't load commits"
- 
          description="Make sure you are able to connect to the seed <code>${baseUrlToString(
+ 
          description="Make sure you are able to connect to the seed <code>{baseUrlToString(

            api.baseUrl,

          )}</code>"

          {error} />
@@ -172,7 +171,7 @@
    <div class="message">

      <ErrorMessage

        title="Couldn't load repo stats"
- 
        description="Make sure you are able to connect to the seed <code>${baseUrlToString(
+ 
        description="Make sure you are able to connect to the seed <code>{baseUrlToString(

          api.baseUrl,

        )}</code>"

        {error} />
modified src/views/repos/Issue.svelte
@@ -65,25 +65,25 @@
    flex: 1;

    flex-direction: column;

    min-width: 0;
- 
    background-color: var(--color-background-float);
+ 
    background-color: var(--color-surface-subtle);

  }

  .bottom {

    padding: 0 1rem 2.5rem 1rem;
- 
    background-color: var(--color-background-default);
+ 
    background-color: var(--color-surface-base);

    height: 100%;
- 
    border-top: 1px solid var(--color-border-hint);
+ 
    border-top: 1px solid var(--color-border-subtle);

  }

  .connector {

    width: 1px;

    height: 1.5rem;

    margin-left: 1.25rem;
- 
    background-color: var(--color-fill-separator);
+ 
    background-color: var(--color-border-subtle);

  }

  .metadata {

    display: flex;

    flex-direction: column;

    padding: 1rem;
- 
    border-left: 1px solid var(--color-border-hint);
+ 
    border-left: 1px solid var(--color-border-subtle);

    gap: 1.5rem;

    width: 20rem;

  }
@@ -94,8 +94,8 @@
  }



  .author-metadata {
- 
    color: var(--color-fill-gray);
- 
    font-size: var(--font-size-small);
+ 
    color: var(--color-text-tertiary);
+ 
    font: var(--txt-body-m-regular);

  }

  .title {

    overflow: hidden;
@@ -103,8 +103,7 @@
    display: flex;

    align-items: center;

    gap: 0.5rem;
- 
    font-weight: var(--font-weight-semibold);
- 
    font-size: var(--font-size-large);
+ 
    font: var(--txt-heading-l);

    word-break: break-word;

  }

  .reactions {
@@ -113,11 +112,6 @@
    align-items: center;

    margin-left: -0.25rem;

  }
- 
  .id {
- 
    font-size: var(--font-size-small);
- 
    font-family: var(--font-family-monospace);
- 
    font-weight: var(--font-weight-semibold);
- 
  }

  @media (max-width: 719.98px) {

    .bottom {

      padding: 0;
@@ -143,7 +137,7 @@
      Issues

    </Link>

    <Separator />
- 
    <span class="id">
+ 
    <span class="txt-id">

      <div class="global-hide-on-small-desktop-down">

        {issue.id}

      </div>
@@ -160,22 +154,22 @@
          <div style="display: flex; gap: 1rem; width: 100%;">

            {#if issue.title}

              <div class="title">
- 
                <InlineTitle fontSize="large" content={issue.title} />
+ 
                <InlineTitle fontSize="heading-l" content={issue.title} />

              </div>

            {:else}
- 
              <span class="txt-missing">No title</span>
+ 
              <span style:color="var(--color-text-tertiary)">No title</span>

            {/if}

          </div>

          <Share />

        </svelte:fragment>

        <svelte:fragment slot="state">

          {#if issue.state.status === "open"}
- 
            <Badge size="tiny" variant="positive">
+ 
            <Badge size="tiny" variant="open">

              <Icon name="issue" />

              {capitalize(issue.state.status)}

            </Badge>

          {:else}
- 
            <Badge size="tiny" variant="negative">
+ 
            <Badge size="tiny" variant="merged">

              <Icon name="issue" />

              {capitalize(issue.state.status)} as

              {issue.state.reason}
@@ -219,7 +213,7 @@
                repo.payloads["xyz.radicle.project"].meta.head,

              )} />

          {:else}
- 
            <span class="txt-missing">No description</span>
+ 
            <span style:color="var(--color-text-tertiary)">No description</span>

          {/if}

          <div class="reactions">

            {#if issue.discussion[0].reactions.length > 0}
modified src/views/repos/Issue/IssueTeaser.svelte
@@ -27,10 +27,10 @@
  .issue-teaser {

    display: flex;

    padding: 1.25rem;
- 
    background-color: var(--color-background-float);
+ 
    background-color: var(--color-surface-canvas);

  }

  .issue-teaser:hover {
- 
    background-color: var(--color-fill-float-hover);
+ 
    background-color: var(--color-surface-mid);

  }

  .content {

    gap: 0.5rem;
@@ -42,7 +42,7 @@
    display: flex;

    flex-direction: column;

    flex-wrap: wrap;
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

    gap: 0.5rem;

  }

  .summary {
@@ -61,13 +61,17 @@
    justify-self: center;

    align-self: flex-start;

    margin-right: 0.5rem;
- 
    padding: 0.25rem 0;
+ 
    padding: 0.25rem 0.25rem;

  }

  .open {
- 
    color: var(--color-fill-success);
+ 
    color: var(--color-text-open);
+ 
    background: var(--color-surface-open);
+ 
    border-radius: var(--border-radius-xs);

  }

  .closed {
- 
    color: var(--color-foreground-red);
+ 
    color: var(--color-text-merged);
+ 
    background: var(--color-surface-merged);
+ 
    border-radius: var(--border-radius-xs);

  }

</style>
@@ -90,9 +94,9 @@
            issue: issue.id,

          }}>

          {#if !issue.title}
- 
            <span class="txt-missing">No title</span>
+ 
            <span style:color="var(--color-text-tertiary)">No title</span>

          {:else}
- 
            <InlineTitle fontSize="regular" content={issue.title} />
+ 
            <InlineTitle fontSize="body-m-regular" content={issue.title} />

          {/if}

        </Link>

      </span>
modified src/views/repos/Issues.svelte
@@ -67,8 +67,13 @@


  const stateOptions: IssueState["status"][] = ["open", "closed"];

  const stateColor: Record<IssueState["status"], string> = {
- 
    open: "var(--color-fill-success)",
- 
    closed: "var(--color-foreground-red)",
+ 
    open: "var(--color-text-open)",
+ 
    closed: "var(--color-text-merged)",
+ 
  };
+
+ 
  const stateBackground: Record<IssueState["status"], string> = {
+ 
    open: "var(--color-surface-open)",
+ 
    closed: "var(--color-surface-merged)",

  };



  $: showMoreButton =
@@ -91,20 +96,20 @@
    justify-content: center;

  }

  .dropdown-button-counter {
- 
    border-radius: var(--border-radius-tiny);
- 
    background-color: var(--color-fill-counter);
- 
    color: var(--color-foreground-contrast);
+ 
    border-radius: var(--border-radius-sm);
+ 
    background-color: var(--color-surface-alpha-subtle);
+ 
    color: var(--color-text-primary);

    padding: 0 0.25rem;

  }

  .dropdown-list-counter {
- 
    border-radius: var(--border-radius-tiny);
- 
    background-color: var(--color-fill-ghost);
- 
    color: var(--color-foreground-dim);
+ 
    border-radius: var(--border-radius-sm);
+ 
    background-color: var(--color-surface-mid);
+ 
    color: var(--color-text-tertiary);

    padding: 0 0.25rem;

  }

  .selected {
- 
    background-color: var(--color-fill-counter);
- 
    color: var(--color-foreground-dim);
+ 
    background-color: var(--color-surface-alpha-subtle);
+ 
    color: var(--color-text-tertiary);

  }

  .placeholder {

    height: calc(100% - 4rem);
@@ -135,7 +140,7 @@
    <Popover

      popoverPadding="0"

      popoverPositionTop="2.5rem"
- 
      popoverBorderRadius="var(--border-radius-small)">
+ 
      popoverBorderRadius="var(--border-radius-md)">

      <Button

        let:expanded

        slot="toggle"
@@ -143,7 +148,11 @@
        on:click={toggle}

        ariaLabel="filter-dropdown"

        title="Filter issues by state">
- 
        <div style:color={stateColor[status]}>
+ 
        <div
+ 
          style:color={stateColor[status]}
+ 
          style:background={stateBackground[status]}
+ 
          style:padding="0.25rem 0.25rem"
+ 
          style:border-radius="var(--border-radius-sm)">

          <Icon name="issue" />

        </div>

        {capitalize(status)}
@@ -165,7 +174,11 @@
            status: item,

          }}>

          <DropdownListItem selected={item === status}>
- 
            <div style:color={stateColor[item]}>
+ 
            <div
+ 
              style:color={stateColor[item]}
+ 
              style:background={stateBackground[item]}
+ 
              style:padding="0.25rem 0.25rem"
+ 
              style:border-radius="var(--border-radius-sm)">

              <Icon name="issue" />

            </div>

            <div
@@ -197,7 +210,7 @@
  {#if error}

    <ErrorMessage

      title="Couldn't load issues"
- 
      description="Please make sure you are able to connect to the seed <code>${baseUrlToString(
+ 
      description="Please make sure you are able to connect to the seed <code>{baseUrlToString(

        api.baseUrl,

      )}</code>"

      {error} />
modified src/views/repos/Layout.svelte
@@ -3,11 +3,13 @@
  import type { BaseUrl, Repo, SeedingPolicy } from "@http-client";



  import Button from "@app/components/Button.svelte";
+ 
  import Header from "@app/components/Header.svelte";

  import Icon from "@app/components/Icon.svelte";

  import Link from "@app/components/Link.svelte";

  import MobileFooter from "@app/App/MobileFooter.svelte";

  import Separator from "./Separator.svelte";

  import Sidebar from "@app/views/repos/Sidebar.svelte";
+ 
  import UserAvatar from "@app/components/UserAvatar.svelte";



  export let activeTab: ActiveTab | undefined = undefined;

  export let seedingPolicy: SeedingPolicy;
@@ -26,27 +28,11 @@


  .desktop-header {

    grid-column: 1 / 4;
- 
    border-bottom: 1px solid var(--color-fill-separator);
- 
  }
-
- 
  header {
- 
    display: flex;
- 
    align-items: center;
- 
    gap: 0.5rem;
- 
    margin: 0;
- 
    padding: 0.5rem 0.5rem 0.5rem 1rem;
- 
    height: 3.5rem;
- 
    justify-content: space-between;
- 
  }
-
- 
  .logo {
- 
    height: var(--button-regular-height);
- 
    margin: 0 0.5rem;

  }



  .sidebar {

    grid-column: 1 / 2;
- 
    border-right: 1px solid var(--color-fill-separator);
+ 
    border-right: 1px solid var(--color-border-subtle);

  }



  .content {
@@ -62,9 +48,7 @@
    display: flex;

    align-items: center;

    column-gap: 0.25rem;
- 
    line-height: 1rem;
- 
    font-weight: var(--font-weight-semibold);
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

    white-space: nowrap;

    flex-wrap: wrap;

  }
@@ -74,11 +58,10 @@
    gap: 0.25rem;

  }

  .breadcrumb :global(a:hover) {
- 
    color: var(--color-fill-secondary);
+ 
    color: var(--color-text-brand);

  }

  .avatar {
- 
    border-radius: var(--border-radius-tiny);
- 
    margin-right: 0.5rem;
+ 
    border-radius: var(--border-radius-md);

  }



  @media (max-width: 719.98px) {
@@ -93,67 +76,61 @@
      margin-top: auto;

      display: grid;

      grid-column: 1 / 4;
- 
      background-color: pink;

    }

  }

</style>



<div class="layout">

  <div class="desktop-header">
- 
    <header>
- 
      <div class="breadcrumbs">
- 
        <span class="breadcrumb">
- 
          <Link
- 
            style="display: flex; align-items: center; gap: 0.25rem;"
- 
            route={{
- 
              resource: "nodes",
- 
              params: {
- 
                baseUrl,
- 
                repoPageIndex: 0,
- 
              },
- 
            }}>
- 
            <img
- 
              width="24"
- 
              height="24"
- 
              class="avatar"
- 
              alt="Radicle logo"
- 
              src={nodeAvatarUrl
- 
                ? nodeAvatarUrl
- 
                : "/images/default-seed-avatar.png"} />
- 
            {baseUrl.hostname}
- 
          </Link>
- 
        </span>
-
- 
        <Separator />
-
- 
        <span class="breadcrumb" title={repo.rid}>
- 
          <Link
- 
            route={{
- 
              resource: "repo.source",
- 
              repo: repo.rid,
- 
              node: baseUrl,
- 
            }}>
- 
            <div class="breadcrumb">
- 
              {repo.payloads["xyz.radicle.project"].data.name}
- 
            </div>
- 
          </Link>
- 
        </span>
-
- 
        <div class="breadcrumb">
- 
          <slot name="breadcrumb" />
- 
        </div>
- 
      </div>
- 
      <Link
- 
        style="display: flex; align-items: center;"
- 
        route={{ resource: "nodes", params: undefined }}>
- 
        <img
- 
          width="24"
- 
          height="24"
- 
          class="logo"
- 
          alt="Radicle logo"
- 
          src="/radicle.svg" />
- 
      </Link>
- 
    </header>
+ 
    <Header>
+ 
      <svelte:fragment slot="breadcrumbs">
+ 
        <nav class="breadcrumbs" aria-label="Breadcrumb">
+ 
          <span class="breadcrumb">
+ 
            <Link
+ 
              ariaLabel="Home"
+ 
              style="display: flex; align-items: center; gap: 0.5rem;"
+ 
              route={{
+ 
                resource: "nodes",
+ 
                params: {
+ 
                  baseUrl,
+ 
                  repoPageIndex: 0,
+ 
                },
+ 
              }}>
+ 
              {#if nodeAvatarUrl}
+ 
                <img
+ 
                  width="24"
+ 
                  height="24"
+ 
                  class="avatar"
+ 
                  alt="Node avatar"
+ 
                  src={nodeAvatarUrl} />
+ 
              {:else}
+ 
                <UserAvatar nodeId={baseUrl.hostname} styleWidth="1.5rem" />
+ 
              {/if}
+ 
              {baseUrl.hostname}
+ 
            </Link>
+ 
          </span>
+
+ 
          <Separator />
+
+ 
          <span class="breadcrumb" title={repo.rid}>
+ 
            <Link
+ 
              route={{
+ 
                resource: "repo.source",
+ 
                repo: repo.rid,
+ 
                node: baseUrl,
+ 
              }}>
+ 
              <div class="breadcrumb">
+ 
                {repo.payloads["xyz.radicle.project"].data.name}
+ 
              </div>
+ 
            </Link>
+ 
          </span>
+
+ 
          <div class="breadcrumb">
+ 
            <slot name="breadcrumb" />
+ 
          </div>
+ 
        </nav>
+ 
      </svelte:fragment>
+ 
    </Header>

  </div>



  <div class="sidebar global-hide-on-medium-desktop-down">
modified src/views/repos/Patch.svelte
@@ -90,15 +90,15 @@


  function badgeColor(status: string): ComponentProps<Badge>["variant"] {

    if (status === "draft") {
- 
      return "foreground";
+ 
      return "draft";

    } else if (status === "open") {
- 
      return "positive";
+ 
      return "open";

    } else if (status === "archived") {
- 
      return "caution";
+ 
      return "archived";

    } else if (status === "merged") {
- 
      return "primary";
+ 
      return "merged";

    } else {
- 
      return "foreground";
+ 
      return "draft";

    }

  }
@@ -241,16 +241,15 @@
    flex: 1;

    flex-direction: column;

    min-width: 0;
- 
    background-color: var(--color-background-float);
+ 
    background-color: var(--color-surface-subtle);

  }

  .metadata {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

    padding: 1rem;
- 
    border-left: 1px solid var(--color-border-hint);
- 
    border-left: 1px solid var(--color-border-hint);
+ 
    border-left: 1px solid var(--color-border-subtle);

    width: 20rem;

  }

  .title {
@@ -259,32 +258,31 @@
    display: flex;

    align-items: center;

    gap: 0.5rem;
- 
    font-weight: var(--font-weight-semibold);
- 
    font-size: var(--font-size-large);
+ 
    font: var(--txt-heading-l);

    word-break: break-word;

  }

  .bottom {
- 
    background-color: var(--color-background-default);
+ 
    background-color: var(--color-surface-base);

    padding: 1rem 1rem 0.5rem 1rem;

    height: 100%;

  }

  .tabs {
- 
    font-size: var(--font-size-tiny);
+ 
    font: var(--txt-body-s-regular);

    display: flex;

    align-items: center;

    justify-content: left;

    flex-wrap: wrap;

    position: relative;

    margin-top: 1rem;
- 
    box-shadow: inset 0 -1px 0 var(--color-border-hint);
+ 
    box-shadow: inset 0 -1px 0 var(--color-border-subtle);

  }

  .tabs-spacer {

    width: 1rem;

    height: 100%;

  }

  .author-metadata {
- 
    color: var(--color-fill-gray);
- 
    font-size: var(--font-size-small);
+ 
    color: var(--color-text-tertiary);
+ 
    font: var(--txt-body-m-regular);

  }

  .revision-description {

    display: flex;
@@ -292,11 +290,6 @@
    gap: 0.5rem;

    width: 100%;

  }
- 
  .id {
- 
    font-size: var(--font-size-small);
- 
    font-family: var(--font-family-monospace);
- 
    font-weight: var(--font-weight-semibold);
- 
  }

  @media (max-width: 719.98px) {

    .patch {

      display: block;
@@ -325,7 +318,7 @@
      Patches

    </Link>

    <Separator />
- 
    <span class="id">
+ 
    <span class="txt-id">

      <div class="global-hide-on-small-desktop-down">

        {patch.id}

      </div>
@@ -340,10 +333,10 @@
        <svelte:fragment slot="title">

          {#if patch.title}

            <div class="title">
- 
              <InlineTitle fontSize="large" content={patch.title} />
+ 
              <InlineTitle fontSize="heading-l" content={patch.title} />

            </div>

          {:else}
- 
            <span class="txt-missing">No title</span>
+ 
            <span style:color="var(--color-text-tertiary)">No title</span>

          {/if}

          <div class="global-flex-item">

            <Share />
@@ -407,7 +400,9 @@
                content={description}

                rawPath={rawPath(patch.id)} />

            {:else}
- 
              <span class="txt-missing">No description available</span>
+ 
              <span style:color="var(--color-text-tertiary)">
+ 
                No description available
+ 
              </span>

            {/if}

            {#if firstRevision.revisionReactions.length > 0}

              <Reactions reactions={firstRevision.revisionReactions} />
modified src/views/repos/Patch/CheckoutButton.svelte
@@ -10,8 +10,7 @@
<style>

  .label {

    display: block;
- 
    font-size: var(--font-size-small);
- 
    font-weight: var(--font-weight-regular);
+ 
    font: var(--txt-body-m-regular);

    margin-bottom: 0.75rem;

  }

</style>
@@ -24,7 +23,7 @@
    on:click={() => {

      toggle();

    }}>
- 
    <Icon name="branch" />
+ 
    <Icon name="checkout" />

    <span class="global-hide-on-small-desktop-down">Checkout</span>

  </Button>
modified src/views/repos/Patch/CompareButton.svelte
@@ -7,10 +7,10 @@
</script>



<Button size="regular" disabled>
- 
  <span style:color="var(--color-foregroung-disabled)">Compare</span>
+ 
  <span style:color="var(--color-text-disabled)">Compare</span>

  <span
- 
    style:color="var(--color-foregroung-disabled)"
- 
    style:font-family="var(--font-family-monospace)">
+ 
    style:color="var(--color-text-disabled)"
+ 
    style:font="var(--txt-code-regular)">

    {fromCommit.substring(0, 6)}..{toCommit.substring(0, 6)}

  </span>

  <Icon name="chevron-down" />
modified src/views/repos/Patch/PatchTeaser.svelte
@@ -30,10 +30,10 @@
  .patch-teaser {

    display: flex;

    padding: 1.25rem;
- 
    background-color: var(--color-background-float);
+ 
    background-color: var(--color-surface-canvas);

  }

  .patch-teaser:hover {
- 
    background-color: var(--color-fill-float-hover);
+ 
    background-color: var(--color-surface-mid);

  }

  .content {

    width: 100%;
@@ -45,7 +45,7 @@
    display: flex;

    flex-direction: column;

    flex-wrap: wrap;
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

    gap: 0.5rem;

  }

  .summary {
@@ -63,19 +63,24 @@
    justify-self: center;

    align-self: flex-start;

    margin-right: 0.5rem;
- 
    padding: 0.25rem 0;
- 
  }
- 
  .draft {
- 
    color: var(--color-foreground-dim);
+ 
    padding: 0.25rem 0.25rem;
+ 
    border-radius: var(--border-radius-xs);

  }

  .open {
- 
    color: var(--color-fill-success);
+ 
    color: var(--color-text-open);
+ 
    background: var(--color-surface-open);

  }

  .archived {
- 
    color: var(--color-foreground-yellow);
+ 
    color: var(--color-text-archived);
+ 
    background: var(--color-surface-archived);

  }

  .merged {
- 
    color: var(--color-fill-primary);
+ 
    color: var(--color-text-merged);
+ 
    background: var(--color-surface-merged);
+ 
  }
+ 
  .draft {
+ 
    color: var(--color-text-draft);
+ 
    background: var(--color-surface-draft);

  }

  .diff-comment {

    display: flex;
@@ -104,7 +109,7 @@
          node: baseUrl,

          patch: patch.id,

        }}>
- 
        <InlineTitle fontSize="regular" content={patch.title} />
+ 
        <InlineTitle fontSize="body-m-regular" content={patch.title} />

      </Link>

      {#if patch.labels.length > 0}

        <span
modified src/views/repos/Patch/RevisionSelector.svelte
@@ -20,7 +20,7 @@
<Popover

  popoverPadding="0"

  popoverPositionTop="3rem"
- 
  popoverBorderRadius="var(--border-radius-small)">
+ 
  popoverBorderRadius="var(--border-radius-md)">

  <Button

    let:expanded

    slot="toggle"
@@ -30,15 +30,15 @@
    disabled={patch.revisions.length === 1}>

    <span

      style:color={patch.revisions.length > 1
- 
        ? "var(--color-foreground-contrast)"
- 
        : "var(--color-foregroung-disabled)"}>
+ 
        ? "var(--color-text-primary)"
+ 
        : "var(--color-text-disabled)"}>

      Revision

    </span>

    <span

      style:color={patch.revisions.length > 1
- 
        ? "var(--color-fill-secondary)"
- 
        : "var(--color-foregroung-disabled)"}
- 
      style:font-family="var(--font-family-monospace)">
+ 
        ? "var(--color-text-brand)"
+ 
        : "var(--color-text-disabled)"}
+ 
      style:font="var(--txt-code-regular)">

      {utils.formatObjectId(view.revision)}

    </span>

    <Icon name={expanded ? "chevron-up" : "chevron-down"} />
@@ -60,13 +60,13 @@
        <DropdownListItem selected={item.id === view.revision}>

          <span

            style:color={item.id === view.revision
- 
              ? "var(--color-foreground-contrast)"
- 
              : "var(--color-fill-gray)"}>
+ 
              ? "var(--color-text-primary)"
+ 
              : "var(--color-text-tertiary)"}>

            Revision

          </span>

          <span
- 
            style:color="var(--color-fill-secondary)"
- 
            style:font-family="var(--font-family-monospace)">
+ 
            style:color="var(--color-text-brand)"
+ 
            style:font="var(--txt-code-regular)">

            {utils.formatObjectId(item.id)}

          </span>

        </DropdownListItem>
modified src/views/repos/Patches.svelte
@@ -73,10 +73,17 @@
  ];



  const stateColor: Record<PatchState["status"], string> = {
- 
    draft: "var(--color-fill-gray)",
- 
    open: "var(--color-fill-success)",
- 
    archived: "var(--color-foreground-yellow)",
- 
    merged: "var(--color-fill-primary)",
+ 
    draft: "var(--color-text-draft)",
+ 
    open: "var(--color-text-open)",
+ 
    archived: "var(--color-text-archived)",
+ 
    merged: "var(--color-text-merged)",
+ 
  };
+
+ 
  const stateBackground: Record<PatchState["status"], string> = {
+ 
    draft: "var(--color-surface-draft)",
+ 
    open: "var(--color-surface-open)",
+ 
    archived: "var(--color-surface-archived)",
+ 
    merged: "var(--color-surface-merged)",

  };



  $: showMoreButton =
@@ -100,20 +107,20 @@
    justify-content: center;

  }

  .dropdown-button-counter {
- 
    border-radius: var(--border-radius-tiny);
- 
    background-color: var(--color-fill-counter);
- 
    color: var(--color-foreground-contrast);
+ 
    border-radius: var(--border-radius-sm);
+ 
    background-color: var(--color-surface-alpha-subtle);
+ 
    color: var(--color-text-primary);

    padding: 0 0.25rem;

  }

  .dropdown-list-counter {
- 
    border-radius: var(--border-radius-tiny);
- 
    background-color: var(--color-fill-ghost);
- 
    color: var(--color-foreground-dim);
+ 
    border-radius: var(--border-radius-sm);
+ 
    background-color: var(--color-surface-mid);
+ 
    color: var(--color-text-tertiary);

    padding: 0 0.25rem;

  }

  .selected {
- 
    background-color: var(--color-fill-counter);
- 
    color: var(--color-foreground-dim);
+ 
    background-color: var(--color-surface-alpha-subtle);
+ 
    color: var(--color-text-tertiary);

  }

  .placeholder {

    height: calc(100% - 4rem);
@@ -144,7 +151,7 @@
    <Popover

      popoverPadding="0"

      popoverPositionTop="2.5rem"
- 
      popoverBorderRadius="var(--border-radius-small)">
+ 
      popoverBorderRadius="var(--border-radius-md)">

      <Button

        let:expanded

        slot="toggle"
@@ -152,7 +159,11 @@
        on:click={toggle}

        ariaLabel="filter-dropdown"

        title="Filter patches by state">
- 
        <div style:color={stateColor[status]}>
+ 
        <div
+ 
          style:color={stateColor[status]}
+ 
          style:background={stateBackground[status]}
+ 
          style:padding="0.25rem 0.25rem"
+ 
          style:border-radius="var(--border-radius-sm)">

          <Icon name="patch" />

        </div>

        {capitalize(status)}
@@ -173,7 +184,11 @@
            search: `status=${item}`,

          }}>

          <DropdownListItem selected={item === status}>
- 
            <div style:color={stateColor[item]}>
+ 
            <div
+ 
              style:color={stateColor[item]}
+ 
              style:background={stateBackground[item]}
+ 
              style:padding="0.25rem 0.25rem"
+ 
              style:border-radius="var(--border-radius-sm)">

              <Icon name="patch" />

            </div>

            <div
@@ -205,7 +220,7 @@
  {#if error}

    <ErrorMessage

      title="Couldn't load patches"
- 
      description="Please make sure you are able to connect to the seed <code>${baseUrlToString(
+ 
      description="Please make sure you are able to connect to the seed <code>{baseUrlToString(

        api.baseUrl,

      )}</code>"

      {error} />
modified src/views/repos/Separator.svelte
@@ -2,6 +2,9 @@
  import Icon from "@app/components/Icon.svelte";

</script>
- 
<span style:color="var(--color-foreground-dim)">
+ 
<span
+ 
  style:display="inline-flex"
+ 
  style:align-items="center"
+ 
  style:color="var(--color-text-tertiary)">

  <Icon name="chevron-right" />

</span>
modified src/views/repos/Sidebar.svelte
@@ -4,11 +4,9 @@


  import Button from "@app/components/Button.svelte";

  import ContextRepo from "@app/views/repos/Sidebar/ContextRepo.svelte";
- 
  import Help from "@app/App/Help.svelte";

  import Icon from "@app/components/Icon.svelte";

  import Link from "@app/components/Link.svelte";

  import Popover from "@app/components/Popover.svelte";
- 
  import Settings from "@app/App/Settings.svelte";



  const SIDEBAR_STATE_KEY = "sidebarState";
@@ -72,18 +70,18 @@
  }



  .counter {
- 
    border-radius: var(--border-radius-tiny);
- 
    background-color: var(--color-fill-ghost);
- 
    color: var(--color-foreground-dim);
+ 
    border-radius: var(--border-radius-sm);
+ 
    background-color: var(--color-surface-mid);
+ 
    color: var(--color-text-tertiary);

    padding: 0 0.25rem;

  }

  .selected {
- 
    background-color: var(--color-fill-counter);
- 
    color: var(--color-foreground-contrast);
+ 
    background-color: var(--color-surface-alpha-subtle);
+ 
    color: var(--color-text-primary);

  }

  .hover {
- 
    background-color: var(--color-fill-ghost-hover);
- 
    color: var(--color-foreground-contrast);
+ 
    background-color: var(--color-surface-strong);
+ 
    color: var(--color-text-primary);

  }

  .title-counter {

    display: flex;
@@ -111,10 +109,10 @@
  .box {

    padding: 1rem;

    margin-bottom: 0.5rem;
- 
    background-color: var(--color-background-float);
- 
    border: 1px solid var(--color-border-hint);
- 
    font-size: var(--font-size-small);
- 
    border-radius: var(--border-radius-small);
+ 
    background-color: var(--color-surface-subtle);
+ 
    border: 1px solid var(--color-border-subtle);
+ 
    font: var(--txt-body-m-regular);
+ 
    border-radius: var(--border-radius-md);

  }

  .repo.expanded {

    opacity: 1;
@@ -137,16 +135,6 @@
    height: 0;

    overflow: hidden;

  }
- 
  .horizontal-buttons {
- 
    display: flex;
- 
    gap: 0.5rem;
- 
    opacity: 0;
- 
    transition: opacity 30ms ease-in-out;
- 
  }
- 
  .horizontal-buttons.expanded {
- 
    opacity: 1;
- 
    transition: opacity 150ms ease-in-out;
- 
  }

  .icon {

    transform: rotate(180deg);

    transition: transform 150ms ease-in-out;
@@ -157,7 +145,6 @@
  .bottom {

    display: flex;

    flex-direction: column;
- 
    justify-items: flex-end;

  }

</style>
@@ -250,42 +237,14 @@
        <Button

          stylePadding="0 0.75rem"

          variant="background"
- 
          title="Settings"
- 
          slot="toggle"
- 
          let:toggle
- 
          on:click={toggle}>
- 
          <Icon name="settings" />
- 
        </Button>
-
- 
        <Settings slot="popover" />
- 
      </Popover>
-
- 
      <Popover popoverPositionBottom="0" popoverPositionLeft="3rem">
- 
        <Button
- 
          stylePadding="0 0.75rem"
- 
          variant="background"
- 
          title="Help"
- 
          slot="toggle"
- 
          let:toggle
- 
          on:click={toggle}>
- 
          <Icon name="help" />
- 
        </Button>
-
- 
        <Help slot="popover" />
- 
      </Popover>
-
- 
      <Popover popoverPositionBottom="0" popoverPositionLeft="3rem">
- 
        <Button
- 
          stylePadding="0 0.75rem"
- 
          variant="background"

          title="Info"

          slot="toggle"

          let:toggle

          on:click={toggle}>
- 
          <Icon name="info" />
+ 
          <Icon name="guide" />

        </Button>
- 
        <div slot="popover" class="txt-small" style:width="18rem">
+ 
        <div slot="popover" class="txt-body-m-regular" style:width="18rem">

          <ContextRepo

            {baseUrl}

            repoThreshold={repo.threshold}
@@ -302,37 +261,6 @@
            <Icon name="chevron-left" />

          </div>

        </Button>
- 
        <div class="global-flex-item">
- 
          <div class="horizontal-buttons" class:expanded>
- 
            <Popover popoverPositionBottom="2.5rem" popoverPositionLeft="0">
- 
              <Button
- 
                variant="outline"
- 
                title="Settings"
- 
                slot="toggle"
- 
                let:toggle
- 
                on:click={toggle}>
- 
                <Icon name="settings" />
- 
                Settings
- 
              </Button>
-
- 
              <Settings slot="popover" />
- 
            </Popover>
- 
          </div>
- 
          <div class="horizontal-buttons" class:expanded>
- 
            <Popover popoverPositionBottom="2.5rem" popoverPositionLeft="0">
- 
              <Button
- 
                variant="outline"
- 
                title="Help"
- 
                slot="toggle"
- 
                let:toggle
- 
                on:click={toggle}>
- 
                <Icon name="help" />
- 
                Help
- 
              </Button>
- 
              <Help slot="popover" />
- 
            </Popover>
- 
          </div>
- 
        </div>

      </div>

    {/if}

  </div>
modified src/views/repos/Sidebar/ContextRepo.svelte
@@ -39,7 +39,7 @@
<div class="item-header">

  <span>Delegates</span>

  <div class="global-flex-item">
- 
    <span class="txt-bold">
+ 
    <span class="txt-body-m-semibold">

      {repoThreshold}/{repoDelegates.length}

    </span>

    <IconButton on:click={() => (delegateExpanded = !delegateExpanded)}>
@@ -48,7 +48,7 @@
  </div>

</div>

{#if delegateExpanded}
- 
  <div style:color="var(--color-foreground-dim" style:margin-bottom="1rem">
+ 
  <div style:color="var(--color-text-tertiary)" style:margin-bottom="1rem">

    {#if repoDelegates.length === 1}

      Any changes accepted by the sole delegate will be included in the

      canonical branch.
@@ -68,7 +68,7 @@
<div class="item-header">

  <span style:text-wrap="nowrap">Seeding Scope</span>

  <div class="global-flex-item">
- 
    <span class="txt-bold">
+ 
    <span class="txt-body-m-semibold">

      {capitalize(

        "scope" in seedingPolicy ? seedingPolicy.scope : "not defined",

      )}
@@ -79,7 +79,7 @@
  </div>

</div>

{#if policyExpanded}
- 
  <div style:color="var(--color-foreground-dim)">
+ 
  <div style:color="var(--color-text-tertiary)">

    {#if seedingPolicy.policy === "block"}

      Seeding scope only has an effect when a repository is seeded. This repo

      isn't seeded by the seed node.
modified src/views/repos/Source.svelte
@@ -90,8 +90,8 @@
  .placeholder {

    width: 100%;

    padding: 4rem 0;
- 
    border: 1px solid var(--color-border-hint);
- 
    border-radius: var(--border-radius-small);
+ 
    border: 1px solid var(--color-border-subtle);
+ 
    border-radius: var(--border-radius-sm);

  }



  .source-tree {
modified src/views/repos/Source/Blob.svelte
@@ -75,8 +75,8 @@


<style>

  .code :global(.line-number) {
- 
    font-family: var(--font-family-monospace);
- 
    color: var(--color-foreground-disabled);
+ 
    font: var(--txt-code-regular);
+ 
    color: var(--color-text-disabled);

    text-align: right;

    padding: 0;

    user-select: none;
@@ -87,12 +87,12 @@
  }

  .code :global(.line-number:hover) {

    cursor: pointer;
- 
    color: var(--color-foreground-dim);
+ 
    color: var(--color-text-tertiary);

  }



  .code :global(.content) {

    display: inline;
- 
    font-family: var(--font-family-monospace);
+ 
    font: var(--txt-code-regular);

    margin: 0;

  }
@@ -100,16 +100,16 @@
    line-height: 22px; /* This seems to be the line-height of a pre code block */

  }

  .code :global(.highlight) {
- 
    background-color: var(--color-fill-float-hover);
- 
    box-shadow: 0 0 0 1px var(--color-fill-secondary);
+ 
    background-color: var(--color-surface-mid);
+ 
    box-shadow: 0 0 0 1px var(--color-border-brand);

  }

  .code :global(.highlight td:first-child) {
- 
    background-color: var(--color-fill-float-hover);
- 
    border-left: 1px solid var(--color-fill-secondary);
+ 
    background-color: var(--color-surface-mid);
+ 
    border-left: 1px solid var(--color-border-brand);

  }

  .code :global(.highlight td:last-child) {
- 
    background-color: var(--color-fill-float-hover);
- 
    border-right: 1px solid var(--color-fill-secondary);
+ 
    background-color: var(--color-surface-mid);
+ 
    border-right: 1px solid var(--color-border-brand);

  }



  .code :global(.line-content) {
@@ -121,7 +121,7 @@
    width: 100%;

    border-spacing: 0;

    overflow-x: auto;
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

    padding-top: 1rem;

    margin-bottom: 1.5rem;

  }
@@ -172,14 +172,14 @@
              // eslint-disable-next-line

              preview = true;

            }}>
- 
            <Icon name="eye-open" />Preview
+ 
            <Icon name="eye" />Preview

          </Button>

          <div class="global-spacer"></div>

        </Radio>

      {/if}

      <a href="{rawPath}/{blob.path}" target="_blank" rel="noreferrer">

        <Button variant="gray-white">
- 
          Raw <Icon name="arrow-box-up-right" />
+ 
          Raw <Icon name="open-external" />

        </Button>

      </a>

    </div>
modified src/views/repos/Source/Header.svelte
@@ -67,7 +67,7 @@
  }



  .header {
- 
    font-size: var(--font-size-tiny);
+ 
    font: var(--txt-body-s-regular);

    display: flex;

    gap: 0.375rem;

    align-items: center;
@@ -80,15 +80,15 @@
    position: absolute;

    left: -1rem;

    bottom: 0;
- 
    border-bottom: 1px solid var(--color-fill-separator);
+ 
    border-bottom: 1px solid var(--color-border-subtle);

    width: calc(100% + 1rem);

    z-index: -1;

  }



  .counter {
- 
    border-radius: var(--border-radius-tiny);
- 
    background-color: var(--color-fill-ghost);
- 
    color: var(--color-foreground-dim);
+ 
    border-radius: var(--border-radius-sm);
+ 
    background-color: var(--color-surface-mid);
+ 
    color: var(--color-text-tertiary);

    padding: 0 0.25rem;

  }
@@ -99,8 +99,8 @@
  }



  .selected {
- 
    background-color: var(--color-fill-ghost);
- 
    color: var(--color-foreground-contrast);
+ 
    background-color: var(--color-surface-mid);
+ 
    color: var(--color-text-primary);

  }

</style>
@@ -127,7 +127,7 @@
      <Link route={baseRoute}>

        <Button

          variant="not-selected"
- 
          styleBorderRadius="0 var(--border-radius-tiny) var(--border-radius-tiny) 0">
+ 
          styleBorderRadius="0 var(--border-radius-sm) var(--border-radius-sm) 0">

          <Icon name="cross" />

        </Button>

      </Link>
@@ -146,7 +146,7 @@
        revision,

      }}>

      <Button size="large" variant={filesLinkActive ? "tab-active" : "tab"}>
- 
        <Icon name="file" />Files
+ 
        <Icon name="document" />Files

      </Button>

    </Link>
modified src/views/repos/Source/PeerBranchSelector.svelte
@@ -29,7 +29,7 @@
  const subgridStyle =

    "display: grid; grid-template-columns: subgrid; grid-column: span 2;";

  const highlightSearchStyle = [
- 
    '<span style="background: var(--color-fill-yellow-iconic); color: var(--color-foreground-black);">',
+ 
    '<span style="background: var(--color-feedback-warning-bg); color: var(--color-text-primary);">',

    "</span>",

  ];

  let searchInput = "";
@@ -62,7 +62,7 @@


<style>

  .dropdown {
- 
    border-radius: var(--border-radius-small);
+ 
    border-radius: var(--border-radius-sm);

    width: 40rem;

    max-height: 60vh;

    overflow-y: auto;
@@ -82,9 +82,9 @@
  .dropdown-header {

    display: grid;

    grid-template-columns: subgrid;
- 
    font-size: var(--font-size-tiny);
+ 
    font: var(--txt-body-s-regular);

    padding: 0.5rem;
- 
    color: var(--color-foreground-dim);
+ 
    color: var(--color-text-tertiary);

  }

  .container {

    display: flex;
@@ -98,9 +98,7 @@
    justify-content: center;

    gap: 0.375rem;

    height: 1rem;
- 
    font-family: var(--font-family-monospace);
- 
    font-weight: var(--font-weight-semibold);
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

  }

  @media (max-width: 719.98px) {

    .dropdown {
@@ -114,12 +112,12 @@
    popoverContainerMinWidth="0"

    popoverPadding="0"

    popoverPositionTop="2.5rem"
- 
    popoverBorderRadius="var(--border-radius-small)">
+ 
    popoverBorderRadius="var(--border-radius-sm)">

    <Button

      slot="toggle"

      let:expanded

      let:toggle
- 
      styleBorderRadius="var(--border-radius-tiny) 0 0 var(--border-radius-tiny)"
+ 
      styleBorderRadius="var(--border-radius-sm) 0 0 var(--border-radius-sm)"

      styleWidth="100%"

      on:click={toggle}

      title="Change branch"
@@ -226,9 +224,7 @@
                    {/if}

                  </span>

                </div>
- 
                <div
- 
                  class="txt-monospace"
- 
                  style="color: var(--color-foreground-dim);">
+ 
                <div class="txt-id">

                  {formatCommit(head)}

                </div>

              </DropdownListItem>
@@ -236,7 +232,8 @@
          {:else}

            <div

              style="gap: inherit; padding: 0.5rem 0.375rem;"
- 
              class="subgrid-item txt-missing txt-small">
+ 
              class="subgrid-item txt-body-m-regular"
+ 
              style:color="var(--color-text-tertiary)">

              No entries found

            </div>

          {/each}
@@ -258,9 +255,7 @@
                  Canonical

                </Badge>

              </div>
- 
              <div
- 
                class="txt-monospace"
- 
                style="color: var(--color-foreground-dim);">
+ 
              <div class="txt-id">

                {formatCommit(repo.payloads["xyz.radicle.project"].meta.head)}

              </div>

            </DropdownListItem>
modified src/views/repos/Source/PeerBranchSelector/Peer.svelte
@@ -76,9 +76,7 @@
          </span>

        </div>

        <div class="global-flex-item">
- 
          <span
- 
            class="txt-monospace"
- 
            style="color: var(--color-foreground-dim);">
+ 
          <span class="txt-id" style="color: var(--color-text-tertiary);">

            {formatCommit(head)}

          </span>

        </div>
modified src/views/repos/Source/RepoNameHeader.svelte
@@ -41,9 +41,9 @@
  .title {

    align-items: center;

    gap: 0.5rem;
- 
    color: var(--color-foreground-contrast);
+ 
    color: var(--color-text-primary);

    display: flex;
- 
    font-size: var(--font-size-large);
+ 
    font: var(--txt-heading-l);

    justify-content: left;

    text-align: left;

    text-overflow: ellipsis;
@@ -52,17 +52,14 @@
  .description {

    padding: 0 1rem 1rem 1rem;

  }
- 
  .repo-name {
- 
    font-weight: var(--font-weight-semibold);
- 
  }

  .repo-name:hover {

    color: inherit;

  }

  .description :global(a) {
- 
    border-bottom: 1px solid var(--color-foreground-dim);
+ 
    border-bottom: 1px solid var(--color-text-tertiary);

  }

  .description :global(a:hover) {
- 
    border-bottom: 1px solid var(--color-foreground-contrast);
+ 
    border-bottom: 1px solid var(--color-text-primary);

  }

  .id {

    padding-left: 1rem;
@@ -90,7 +87,7 @@
      </Link>

    </span>

    {#if repo.visibility.type === "private"}
- 
      <Badge variant="yellow" size="tiny">
+ 
      <Badge variant="private" size="tiny">

        <Icon name="lock" />

        Private

      </Badge>
modified src/views/repos/Source/Tree/File.svelte
@@ -7,29 +7,26 @@


<style>

  .file {
- 
    border-radius: var(--border-radius-tiny);
+ 
    border-radius: var(--border-radius-sm);

    cursor: pointer;

    display: flex;
- 
    line-height: 1.5em;

    margin: 0.25rem 0;

    padding: 0.25rem 0.875rem;

    width: 100%;

    gap: 0.25rem;
- 
    font-weight: var(--font-weight-regular);

  }



  .file:hover {
- 
    background-color: var(--color-fill-ghost);
+ 
    background-color: var(--color-surface-mid);

  }



  .file.active {
- 
    color: var(--color-foreground-contrast) !important;
- 
    background-color: var(--color-fill-ghost);
- 
    font-weight: var(--font-weight-medium);
+ 
    color: var(--color-text-primary) !important;
+ 
    background-color: var(--color-surface-mid);

  }



  .file.active:hover {
- 
    background-color: var(--color-fill-ghost-hover);
+ 
    background-color: var(--color-surface-strong);

  }



  .name {
@@ -37,23 +34,23 @@
    white-space: nowrap;

    text-overflow: ellipsis !important;

    overflow: hidden;
- 
    font-size: var(--font-size-small);
+ 
    font: var(--txt-body-m-regular);

  }

  .icon-container {
- 
    color: var(--color-foreground-dim);
+ 
    color: var(--color-text-tertiary);

    display: flex;

    justify-content: center;

    align-items: center;

    margin-right: 0.125rem;

  }

  .active .icon-container {
- 
    color: var(--color-foreground-contrast);
+ 
    color: var(--color-text-primary);

  }

</style>



<div class="file" class:active>

  <div class="icon-container">
- 
    <Icon name="file" />
+ 
    <Icon name="document" />

  </div>

  <span class="name">{name}</span>

</div>
modified src/views/repos/Source/Tree/Folder.svelte
@@ -38,18 +38,16 @@
    padding: 0.25rem 0.875rem;

    margin: 0.25rem 0;

    user-select: none;
- 
    line-height: 1.5rem;

    white-space: nowrap;

  }

  .folder:hover {
- 
    background-color: var(--color-fill-ghost);
- 
    border-radius: var(--border-radius-tiny);
+ 
    background-color: var(--color-surface-mid);
+ 
    border-radius: var(--border-radius-sm);

  }



  .folder-name {

    margin-left: 0.25rem;
- 
    font-size: var(--font-size-small);
- 
    font-weight: var(--font-weight-regular);
+ 
    font: var(--txt-body-m-regular);

  }



  .container {
@@ -65,13 +63,12 @@
    display: flex;

    justify-content: center;

    align-items: center;
- 
    color: var(--color-foreground-dim);
+ 
    color: var(--color-text-tertiary);

    margin-right: 0.125rem;

  }



  .expanded {
- 
    font-weight: var(--font-weight-medium);
- 
    color: var(--color-foreground-contrast);
+ 
    color: var(--color-text-primary);

  }

</style>
modified src/views/repos/Source/Tree/Submodule.svelte
@@ -8,8 +8,8 @@


<style>

  .submodule {
- 
    color: var(--color-foreground-dim);
- 
    border-radius: var(--border-radius-tiny);
+ 
    color: var(--color-text-tertiary);
+ 
    border-radius: var(--border-radius-sm);

    display: flex;

    line-height: 1.5em;

    margin: 0.25rem 0;
@@ -23,8 +23,7 @@
    white-space: nowrap;

    text-overflow: ellipsis !important;

    overflow: hidden;
- 
    font-size: var(--font-size-small);
- 
    font-weight: var(--font-weight-regular);
+ 
    font: var(--txt-body-m-regular);

  }

  .icon-container {

    display: flex;
@@ -38,7 +37,7 @@
  class="submodule"

  title="This is a git submodule, for more information look at the nearest .gitmodules file">

  <div class="icon-container">
- 
    <Icon name="repo" />
+ 
    <Icon name="repository" />

  </div>

  <span class="name">{name} @ {formatCommit(oid)}</span>

</div>
modified src/views/repos/components/CommitButton.svelte
@@ -17,13 +17,11 @@


  $: commitShortId = formatCommit(commit.id);

  $: if (variant === "right") {
- 
    styleBorderRadius =
- 
      "0 var(--border-radius-tiny) var(--border-radius-tiny) 0";
+ 
    styleBorderRadius = "0 var(--border-radius-sm) var(--border-radius-sm) 0";

  } else if (variant === "standalone") {
- 
    styleBorderRadius = "var(--border-radius-tiny)";
+ 
    styleBorderRadius = "var(--border-radius-sm)";

  } else if (variant === "left") {
- 
    styleBorderRadius =
- 
      "var(--border-radius-tiny) 0 0 var(--border-radius-tiny)";
+ 
    styleBorderRadius = "var(--border-radius-sm) 0 0 var(--border-radius-sm)";

  } else if (variant === "center") {

    styleBorderRadius = "0";

  } else {
@@ -59,7 +57,7 @@
    {styleMinWidth}

    {styleBorderRadius}>

    <div class="txt-overflow commit">
- 
      <div class="identifier global-commit">
+ 
      <div class="identifier txt-id">

        {commitShortId}

      </div>

      <span
modified src/views/repos/components/InlineTitle.svelte
@@ -4,25 +4,24 @@
  import { formatInlineTitle } from "@app/lib/utils";



  export let content: string;
- 
  export let fontSize: "tiny" | "small" | "regular" | "medium" | "large" =
- 
    "small";
+ 
  export let fontSize: "body-m-regular" | "body-l-medium" | "heading-l" =
+ 
    "body-m-regular";

</script>



<style>

  .content :global(code) {
- 
    font-family: var(--font-family-monospace);
- 
    background-color: var(--color-fill-ghost);
- 
    border-radius: var(--border-radius-tiny);
+ 
    font: var(--txt-code-regular);
+ 
    font-size: inherit;
+ 
    background-color: var(--color-surface-mid);
+ 
    border-radius: var(--border-radius-sm);

    padding: 0.125rem 0.25rem;

  }

</style>



<span

  class="content"
- 
  class:txt-large={fontSize === "large"}
- 
  class:txt-medium={fontSize === "medium"}
- 
  class:txt-regular={fontSize === "regular"}
- 
  class:txt-small={fontSize === "small"}
- 
  class:txt-tiny={fontSize === "tiny"}>
+ 
  class:txt-heading-l={fontSize === "heading-l"}
+ 
  class:txt-body-l-medium={fontSize === "body-l-medium"}
+ 
  class:txt-body-m-regular={fontSize === "body-m-regular"}>

  {@html dompurify.sanitize(formatInlineTitle(escape(content)))}

</span>
added src/views/users/UserReposView.svelte
@@ -0,0 +1,81 @@
+ 
<script lang="ts">
+ 
  import type { BaseUrl, NodeIdentity, NodeStats } from "@http-client";
+
+ 
  import * as router from "@app/lib/router";
+ 
  import * as utils from "@app/lib/utils";
+ 
  import { fetchRepoInfos } from "@app/components/RepoCard";
+ 
  import { handleError } from "@app/views/nodes/error";
+
+ 
  import Badge from "@app/components/Badge.svelte";
+ 
  import Icon from "@app/components/Icon.svelte";
+ 
  import Loading from "@app/components/Loading.svelte";
+ 
  import Placeholder from "@app/components/Placeholder.svelte";
+ 
  import RepoCard from "@app/components/RepoCard.svelte";
+
+ 
  export let baseUrl: BaseUrl;
+ 
  export let stats: NodeStats;
+ 
  export let user: NodeIdentity;
+ 
  export let did: { prefix: string; pubkey: string };
+ 
</script>
+
+ 
<style>
+ 
  .repo-grid {
+ 
    display: grid;
+ 
    grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr));
+ 
    gap: 0;
+ 
  }
+ 
  .container {
+ 
    display: grid;
+ 
    place-items: center;
+ 
    min-height: calc(100vh - var(--global-header-height));
+ 
    font: var(--txt-body-m-regular);
+ 
  }
+ 
  .subtitle {
+ 
    font: var(--txt-body-m-regular);
+ 
    color: var(--color-text-tertiary);
+ 
    margin: 1rem;
+ 
  }
+
+ 
  @media (max-width: 1010.98px) {
+ 
    .repo-grid {
+ 
      grid-template-columns: 1fr;
+ 
    }
+ 
  }
+ 
</style>
+
+ 
{#await fetchRepoInfos(baseUrl, { show: "all", perPage: stats.repos.total }, utils.formatDid(did))}
+ 
  <div class="container">
+ 
    <Loading small center />
+ 
  </div>
+ 
{:then repos}
+ 
  {#if repos.length > 0}
+ 
    <div class="repo-grid">
+ 
      {#each repos as repoInfo}
+ 
        <RepoCard {repoInfo} {baseUrl}>
+ 
          <svelte:fragment slot="delegate">
+ 
            <Badge
+ 
              title={`${user.alias || utils.formatNodeId(did.pubkey)} is a delegate of this repository`}
+ 
              round
+ 
              variant="delegate"
+ 
              size="tiny"
+ 
              style="padding: 0 0.372rem; gap: 0.125rem;">
+ 
              <Icon name="badge" />
+ 
            </Badge>
+ 
          </svelte:fragment>
+ 
        </RepoCard>
+ 
      {/each}
+ 
    </div>
+ 
    <div class="subtitle">
+ 
      {repos.length}
+ 
      {repos.length === 1 ? "repository" : "repositories"}
+ 
    </div>
+ 
  {:else}
+ 
    <div class="container">
+ 
      <Placeholder
+ 
        iconName="desert"
+ 
        caption="This user doesn't have any repositories on this node." />
+ 
    </div>
+ 
  {/if}
+ 
{:catch error}
+ 
  {router.push(handleError(error, utils.baseUrlToString(baseUrl)))}
+ 
{/await}
modified src/views/users/View.svelte
@@ -1,28 +1,20 @@
<script lang="ts">

  import type { BaseUrl, NodeIdentity, NodeStats } from "@http-client";
- 
  import * as router from "@app/lib/router";

  import * as utils from "@app/lib/utils";
- 
  import { fetchRepoInfos } from "@app/components/RepoCard";
- 
  import { handleError } from "@app/views/nodes/error";
- 
  import Avatar from "@app/components/Avatar.svelte";
- 
  import Badge from "@app/components/Badge.svelte";

  import Button from "@app/components/Button.svelte";

  import Command from "@app/components/Command.svelte";

  import ExternalLink from "@app/components/ExternalLink.svelte";
- 
  import Help from "@app/App/Help.svelte";

  import Icon from "@app/components/Icon.svelte";

  import Id from "@app/components/Id.svelte";
+ 
  import Layout from "@app/components/Layout.svelte";

  import Link from "@app/components/Link.svelte";
- 
  import Loading from "@app/components/Loading.svelte";
- 
  import MobileFooter from "@app/App/MobileFooter.svelte";
- 
  import Placeholder from "@app/components/Placeholder.svelte";

  import Popover from "@app/components/Popover.svelte";
- 
  import RepoCard from "@app/components/RepoCard.svelte";

  import Separator from "@app/views/repos/Separator.svelte";
- 
  import Settings from "@app/App/Settings.svelte";

  import UserAddress from "@app/views/users/UserAddress.svelte";
+ 
  import UserAvatar from "@app/components/UserAvatar.svelte";
+ 
  import UserReposView from "./UserReposView.svelte";



  export let baseUrl: BaseUrl;

  export let node: NodeIdentity;
@@ -32,186 +24,70 @@
</script>



<style>
- 
  .layout {
- 
    display: grid;
- 
    grid-template-rows: 3.5rem 1fr auto;
- 
    grid-template-columns: 30rem auto;
- 
    grid-template-areas:
- 
      "header header"
- 
      "sidebar main"
- 
      "footer main";
- 
    height: 100vh;
+ 
  .sidebar {
+ 
    padding: 1rem;

  }
- 
  header {
- 
    grid-area: header;
+
+ 
  .sidebar-content {
+ 
    gap: 1rem;

    display: flex;
- 
    align-items: center;
- 
    gap: 0.5rem;
- 
    padding: 0.5rem 0.5rem 0.5rem 1rem;
- 
    justify-content: space-between;
- 
    outline: 1px solid var(--color-fill-separator) !important;
+ 
    flex-direction: column;

  }
- 
  .breadcrumbs {
+ 
  .node-address {

    display: flex;

    align-items: center;
- 
    column-gap: 0.25rem;
- 
    line-height: 1rem;
- 
    font-weight: var(--font-weight-semibold);
- 
    font-size: var(--font-size-small);
- 
    white-space: nowrap;
- 
    flex-wrap: wrap;
+ 
    gap: 0.5rem;
+ 
    margin-top: 0.5rem;
+ 
    min-width: 0;
+ 
    max-width: 100%;

  }
- 
  .breadcrumb {
+
+ 
  .node-alias {
+ 
    font: var(--txt-body-m-regular);
+ 
    color: var(--color-text-tertiary);
+ 
    border: 1px solid var(--color-border-alpha-subtle);
+ 
    border-radius: var(--border-radius-sm);
+ 
    padding: 0.25rem 0.5rem;
+ 
    white-space: nowrap;

    display: flex;

    align-items: center;

    gap: 0.25rem;

  }
- 
  .breadcrumb :global(a:hover) {
- 
    color: var(--color-fill-secondary);
- 
  }
- 
  .sidebar {
- 
    grid-area: sidebar;
- 
    border-right: 1px solid var(--color-fill-separator);
- 
    width: 30rem;
- 
    display: flex;
- 
    flex-direction: column;
- 
    padding: 1.5rem;
- 
    z-index: 1;
- 
  }
- 
  .sidebar-item {
- 
    display: flex;
- 
    align-items: center;
- 
    justify-content: space-between;
- 
    height: 2rem;
+ 
  .follow-label {
+ 
    display: block;
+ 
    font: var(--txt-body-m-regular);
+ 
    margin-bottom: 0.75rem;

  }
- 
  .empty-state {
+
+ 
  .breadcrumbs {

    display: flex;

    align-items: center;
- 
    justify-content: center;
- 
    font-size: var(--font-size-small);
- 
  }
- 
  .empty-state,
- 
  .loading {
- 
    height: 100%;
- 
  }
-
- 
  .content {
- 
    overflow-y: scroll;
- 
    grid-area: main;
- 
  }
- 
  .wrapper {
- 
    height: 100%;
- 
    margin: 0 auto;
- 
    max-width: 78rem;
- 
    padding: 1.5rem;
- 
  }
-
- 
  .logo {
- 
    height: var(--button-regular-height);
- 
    margin: 0 0.5rem;
- 
  }
-
- 
  .mobile-footer {
- 
    display: none;
+ 
    column-gap: 0.25rem;
+ 
    font: var(--txt-body-m-regular);
+ 
    white-space: nowrap;
+ 
    flex-wrap: wrap;

  }
- 
  .footer {
+ 
  .breadcrumb {

    display: flex;
- 
    border-right: 1px solid var(--color-fill-separator);
- 
    justify-content: space-between;

    align-items: center;
- 
    padding: 1.5rem;
+ 
    gap: 0.25rem;

  }
- 
  .subtitle {
- 
    font-size: var(--font-size-small);
- 
    color: var(--color-foreground-dim);
- 
    padding: 1rem 0;
+ 
  .breadcrumb :global(a:hover) {
+ 
    color: var(--color-text-brand);

  }

  .avatar {
- 
    border-radius: var(--border-radius-tiny);
- 
    margin-right: 0.5rem;
- 
  }
-
- 
  .user-info {
- 
    display: grid;
- 
    grid-template-columns: 64px minmax(0, 30rem) max-content;
- 
    column-gap: 1rem;
- 
    margin-bottom: 1.5rem;
- 
  }
- 
  .follow-label {
- 
    display: block;
- 
    font-size: var(--font-size-small);
- 
    font-weight: var(--font-weight-regular);
- 
    margin-bottom: 0.75rem;
- 
  }
- 
  .id {
- 
    max-width: 22rem;
- 
  }
- 
  .repo-grid {
- 
    display: grid;
- 
    grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
- 
    gap: 1rem;
- 
  }
- 
  @media (max-width: 1010.98px) {
- 
    .wrapper {
- 
      padding: 1.5rem;
- 
    }
- 
    .sidebar {
- 
      width: 325px;
- 
    }
- 
    .id {
- 
      max-width: 12rem;
- 
    }
- 
    .layout {
- 
      grid-template-columns: 325px auto;
- 
      grid-template-areas:
- 
        "header header"
- 
        "sidebar main"
- 
        "footer main";
- 
    }
- 
  }
-
- 
  @media (max-width: 719.98px) {
- 
    .layout {
- 
      grid-template-columns: 1fr;
- 
      grid-template-areas:
- 
        "main"
- 
        "main"
- 
        "footer";
- 
    }
- 
    header {
- 
      display: none;
- 
    }
- 
    .content {
- 
      overflow-x: hidden;
- 
      margin-left: 0;
- 
    }
- 
    .wrapper {
- 
      padding: 1rem;
- 
    }
- 
    .empty-state,
- 
    .loading {
- 
      height: calc(100% - 6rem);
- 
    }
- 
    .footer {
- 
      display: none;
- 
    }
- 
    .mobile-footer {
- 
      grid-area: footer;
- 
      margin-top: auto;
- 
      display: grid;
- 
      grid-column: 1 / 4;
- 
    }
+ 
    border-radius: var(--border-radius-md);

  }

</style>
- 
<div class="layout">
- 
  <header>
+ 
<Layout>
+ 
  <svelte:fragment slot="breadcrumbs">

    <div class="breadcrumbs">

      <span class="breadcrumb">

        <Link
- 
          style="display: flex; align-items: center; gap: 0.25rem;"
+ 
          style="display: flex; align-items: center; gap: 0.5rem;"

          route={{

            resource: "nodes",

            params: {
@@ -219,14 +95,16 @@
              repoPageIndex: 0,

            },

          }}>
- 
          <img
- 
            width="24"
- 
            height="24"
- 
            class="avatar"
- 
            alt="Radicle logo"
- 
            src={nodeAvatarUrl
- 
              ? nodeAvatarUrl
- 
              : "/images/default-seed-avatar.png"} />
+ 
          {#if nodeAvatarUrl}
+ 
            <img
+ 
              width="24"
+ 
              height="24"
+ 
              class="avatar"
+ 
              alt="Node avatar"
+ 
              src={nodeAvatarUrl} />
+ 
          {:else}
+ 
            <UserAvatar nodeId={baseUrl.hostname} styleWidth="1.5rem" />
+ 
          {/if}

          {baseUrl.hostname}

        </Link>

      </span>
@@ -234,192 +112,108 @@
      <Separator />



      <span class="breadcrumb">
- 
        <Link route={{ resource: "users", did: utils.formatDid(did), baseUrl }}>
- 
          <div class="breadcrumb" title={utils.formatDid(did)}>
- 
            {node.alias || utils.formatNodeId(did.pubkey)}
- 
          </div>
+ 
        <Link
+ 
          ariaLabel="Home"
+ 
          route={{
+ 
            resource: "users",
+ 
            baseUrl: baseUrl,
+ 
            did: utils.formatDid(did),
+ 
          }}>
+ 
          {node.alias || utils.formatNodeId(did.pubkey)}

        </Link>

      </span>

    </div>
- 
    <Link
- 
      style="display: flex; align-items: center;"
- 
      route={{ resource: "nodes", params: undefined }}>
- 
      <img
- 
        width="24"
- 
        height="24"
- 
        class="logo"
- 
        alt="Radicle logo"
- 
        src="/radicle.svg" />
- 
    </Link>
- 
  </header>
-
- 
  <div class="sidebar global-hide-on-mobile-down">
- 
    <div class="user-info">
- 
      <div style:margin-right="0.5rem">
- 
        <Avatar nodeId={did.pubkey} variant="large" />
- 
      </div>
- 
      <div style:margin-top="0.25rem">
- 
        <div class="txt-medium txt-semibold txt-overflow">
- 
          {node.alias || utils.formatNodeId(did.pubkey)}
- 
        </div>
- 
        <div style:margin-top="0.25rem">
- 
          <UserAddress {did} />
- 
        </div>
- 
      </div>
- 
      <div class="global-hide-on-small-desktop-down" style="justify-self: end;">
- 
        <Popover popoverPositionTop="2.5rem">
- 
          <Button
- 
            slot="toggle"
- 
            let:toggle
- 
            on:click={toggle}
- 
            variant="secondary">
- 
            <div class="global-flex-item">
- 
              <Icon name="plus" />
- 
              <span>Follow</span>
- 
            </div>
- 
          </Button>
- 
          <div slot="popover" style:width="24rem">
- 
            <span class="follow-label">
- 
              Use the <ExternalLink href="https://radicle.xyz">
- 
                Radicle CLI
- 
              </ExternalLink> to start following this user.
- 
            </span>
- 
            <span class="follow-label">
- 
              Following a user ensures that their contributions are fetched onto
- 
              your device.
- 
            </span>
- 
            <Command command={`rad follow ${did.pubkey}`} />
- 
          </div>
- 
        </Popover>
- 
      </div>
- 
    </div>
- 
    <div style:margin-bottom="1rem">
- 
      <div class="sidebar-item txt-small">
- 
        <span>SSH Key</span>
- 
        <Id id={node.ssh.full}>
- 
          <div class="id txt-overflow">{node.ssh.full}</div>
- 
        </Id>
- 
      </div>
- 
      <div class="sidebar-item txt-small">
- 
        <span>SSH Hash</span>
- 
        <Id id={node.ssh.hash}>
- 
          <div class="id txt-overflow">{node.ssh.hash}</div>
- 
        </Id>
- 
      </div>
- 
    </div>
- 
  </div>
- 
  <div class="footer">
- 
    <Popover popoverPositionBottom="2.5rem" popoverPositionLeft="0">
- 
      <Button
- 
        variant="outline"
- 
        title="Settings"
- 
        slot="toggle"
- 
        let:toggle
- 
        on:click={toggle}>
- 
        <Icon name="settings" />
- 
        Settings
- 
      </Button>
-
- 
      <Settings slot="popover" />
- 
    </Popover>
- 
    <Popover popoverPositionBottom="2.5rem" popoverPositionLeft="0">
- 
      <Button
- 
        variant="outline"
- 
        title="Help"
- 
        slot="toggle"
- 
        let:toggle
- 
        on:click={toggle}>
- 
        <Icon name="help" />
- 
        Help
- 
      </Button>
- 
      <Help slot="popover" />
- 
    </Popover>
- 
  </div>
-
- 
  <div class="content">
- 
    <div class="wrapper">
- 
      <div class="global-hide-on-small-desktop-up user-info">
- 
        <div style:margin-right="0.5rem">
- 
          <Avatar nodeId={did.pubkey} variant="large" />
- 
        </div>
- 
        <div style:margin-top="0.25rem">
- 
          <div class="txt-medium txt-semibold txt-overflow">
+ 
  </svelte:fragment>
+
+ 
  <div slot="sidebar">
+ 
    <!-- Banner/Avatar at top -->
+ 
    {#if nodeAvatarUrl}
+ 
      <img style:width="100%" alt="User banner" src={nodeAvatarUrl} />
+ 
    {:else}
+ 
      <UserAvatar nodeId={did.pubkey} styleWidth="100%" />
+ 
    {/if}
+
+ 
    <div class="sidebar">
+ 
      <div class="sidebar-content">
+ 
        <!-- User Alias -->
+ 
        <div
+ 
          class="global-flex-item"
+ 
          style:width="100%"
+ 
          style:justify-content="space-between">
+ 
          <div
+ 
            class="txt-heading-s txt-overflow"
+ 
            style:flex="1"
+ 
            style:min-width="0">

            {node.alias || utils.formatNodeId(did.pubkey)}

          </div>
- 
          <div style:margin-top="0.25rem">
- 
            <UserAddress {did} />
- 
          </div>
+ 
          <Popover popoverPositionTop="2.5rem" popoverPositionRight="0">
+ 
            <Button
+ 
              slot="toggle"
+ 
              let:toggle
+ 
              on:click={toggle}
+ 
              variant="outline">
+ 
              <div class="global-flex-item">
+ 
                <Icon name="plus" />
+ 
                <span>Follow</span>
+ 
              </div>
+ 
            </Button>
+ 
            <div slot="popover" style:width="16rem">
+ 
              <span class="follow-label">
+ 
                Use the <ExternalLink href="https://radicle.xyz">
+ 
                  Radicle CLI
+ 
                </ExternalLink> to start following this user.
+ 
              </span>
+ 
              <span class="follow-label">
+ 
                Following a user ensures that their contributions are fetched
+ 
                onto your device.
+ 
              </span>
+ 
              <Command command={`rad follow ${did.pubkey}`} />
+ 
            </div>
+ 
          </Popover>

        </div>
- 
      </div>
- 
      {#await fetchRepoInfos(baseUrl, { show: "all", perPage: stats.repos.total }, utils.formatDid(did))}
- 
        <div class="loading">
- 
          <Loading small center />
- 
        </div>
- 
      {:then repos}
- 
        {#if repos.length > 0}
- 
          <div class="repo-grid">
- 
            {#each repos as repoInfo}
- 
              <RepoCard {repoInfo} {baseUrl}>
- 
                <svelte:fragment slot="delegate">
- 
                  <Badge
- 
                    title={`${node.alias || utils.formatNodeId(did.pubkey)} is a delegate of this repository`}
- 
                    round
- 
                    variant="delegate"
- 
                    size="tiny"
- 
                    style="padding: 0 0.372rem; gap: 0.125rem;">
- 
                    <Icon name="badge" />
- 
                  </Badge>
- 
                </svelte:fragment>
- 
              </RepoCard>
- 
            {/each}
+ 
        <div
+ 
          style:flex-direction="column"
+ 
          style:align-items="flex-start"
+ 
          style:overflow="hidden"
+ 
          style:width="100%">
+ 
          <div
+ 
            style:flex-direction="column"
+ 
            style:align-items="flex-start"
+ 
            style:width="100%">
+ 
            <div class="node-address">
+ 
              <div class="node-alias">
+ 
                <Icon name="key" />{node.alias || "user"}
+ 
              </div>
+ 
              <UserAddress {did} />
+ 
            </div>

          </div>
- 
          <div class="subtitle">
- 
            {repos.length}
- 
            {repos.length === 1 ? "repository" : "repositories"}
+ 
          <div class="node-address">
+ 
            <div class="node-alias">
+ 
              <Icon name="key" />SSH Key
+ 
            </div>
+ 
            <Id styleWidth="fit-content" id={node.ssh.full}>
+ 
              <div class="txt-overflow">
+ 
                {node.ssh.full.substring(0, 10)}…{node.ssh.full.slice(-10)}
+ 
              </div>
+ 
            </Id>

          </div>
- 
        {:else}
- 
          <div class="empty-state">
- 
            <Placeholder
- 
              iconName="desert"
- 
              caption="This user doesn't have any repositories on this node." />
+ 
          <div class="node-address">
+ 
            <div class="node-alias">
+ 
              <Icon name="key" />SSH Hash
+ 
            </div>
+ 
            <Id styleWidth="fit-content" id={node.ssh.hash}>
+ 
              <div class="txt-overflow">
+ 
                {node.ssh.hash.substring(0, 10)}…{node.ssh.hash.slice(-10)}
+ 
              </div>
+ 
            </Id>

          </div>
- 
        {/if}
- 
      {:catch error}
- 
        {router.push(handleError(error, utils.baseUrlToString(baseUrl)))}
- 
      {/await}
+ 
        </div>
+ 
      </div>

    </div>

  </div>
- 
  <div class="mobile-footer">
- 
    <MobileFooter>
- 
      <div style:width="100%">
- 
        <Popover popoverPositionBottom="3rem" popoverPositionRight="-7.5rem">
- 
          <Button
- 
            let:expanded
- 
            slot="toggle"
- 
            variant={expanded ? "secondary" : "secondary-mobile-toggle"}
- 
            styleWidth="100%"
- 
            let:toggle
- 
            on:click={toggle}>
- 
            <Icon name="info" />
- 
          </Button>
- 
          <div slot="popover" style:width="20rem">
- 
            <div class="sidebar-item txt-small">
- 
              <span>SSH Key</span>
- 
              <Id id={node.ssh.full}>
- 
                <div class="id txt-overflow">{node.ssh.full}</div>
- 
              </Id>
- 
            </div>
- 
            <div class="sidebar-item txt-small">
- 
              <span>SSH Hash</span>
- 
              <Id id={node.ssh.hash}>
- 
                <div class="id txt-overflow">{node.ssh.hash}</div>
- 
              </Id>
- 
            </div>
- 
          </div>
- 
        </Popover>
- 
      </div>
- 
    </MobileFooter>
+ 
  <div slot="center">
+ 
    <UserReposView {baseUrl} {stats} user={node} {did} />

  </div>
- 
</div>
+ 
</Layout>
modified tests/e2e/clipboard.spec.ts
@@ -4,6 +4,7 @@ import {
  sourceBrowsingRid,

  test,

  cobUrl,
+ 
  markdownUrl,

} from "@tests/support/fixtures.js";



// We explicitly run all clipboard tests withing the context of a single test
@@ -38,14 +39,22 @@ test("copy to clipboard", async ({ page, browserName, context }) => {
  // `rad clone` URL.

  {

    await page.getByRole("button", { name: "Clone" }).first().click();
- 
    await page.getByText("rad clone").locator(".clipboard").first().click();
+ 
    await page
+ 
      .locator(".cmd:has-text('rad clone')")
+ 
      .locator(".clipboard")
+ 
      .first()
+ 
      .click();

    await expectClipboard(`rad clone ${sourceBrowsingRid}`);

  }



  // `git clone` URL.

  {

    await page.getByRole("button", { name: "Git" }).click();
- 
    await page.getByText("git clone").locator(".clipboard").first().click();
+ 
    await page
+ 
      .locator(".cmd:has-text('git clone')")
+ 
      .locator(".clipboard")
+ 
      .first()
+ 
      .click();

    await expectClipboard(

      `git clone http://localhost/${sourceBrowsingRid.replace(

        "rad:",
@@ -66,6 +75,19 @@ test("copy to clipboard", async ({ page, browserName, context }) => {
    await expectClipboard("783d33c5b14e13234d4d7affa98bd0b52d1b1ea3");

  }
+ 
  // Markdown code block copy.
+ 
  {
+ 
    await page.goto(`${markdownUrl}/tree/main/cheatsheet.md#code`);
+ 
    const codeBlock = page
+ 
      .locator("div.pre-wrapper")
+ 
      .filter({ hasText: "Inline `code` has `back-ticks around` it." })
+ 
      .first();
+ 
    await codeBlock.hover();
+ 
    await codeBlock.getByRole("button", { name: "Copy" }).click();
+ 
    await page.pause();
+ 
    await expectClipboard("Inline `code` has `back-ticks around` it.\n");
+ 
  }
+ 


  // Clear the system clipboard contents so developers don't wonder why there's

  // random stuff in their clipboard after running tests.

  await page.evaluate<string>("navigator.clipboard.writeText('')");
modified tests/e2e/node.spec.ts
@@ -100,7 +100,7 @@ test("edit seed bookmarks", async ({ page }) => {
  await expect(page.locator(".dropdown > .dropdown-item")).toHaveCount(2);



  // Test that new seed is persisted and opened when we go to the landing page.
- 
  await page.getByRole("link", { name: "Radicle logo" }).click();
+ 
  await page.getByRole("link", { name: "Home" }).click();

  await expect(page.getByText("seed.example.tld").first()).toBeVisible();



  // Test removing a bookmark.
modified tests/e2e/repo.spec.ts
@@ -183,22 +183,34 @@ test("files with special characters in the filename", async ({ page }) => {
  await sourceTree.getByText("special").click();



  await sourceTree.getByText("+plus+").click();
- 
  await expect(page.getByRole("banner")).toContainText("+plus");
+ 
  await expect(
+ 
    page.getByRole("navigation", { name: "Breadcrumb" }),
+ 
  ).toContainText("+plus");



  await sourceTree.getByText("-dash-").click();
- 
  await expect(page.getByRole("banner")).toContainText("-dash-");
+ 
  await expect(
+ 
    page.getByRole("navigation", { name: "Breadcrumb" }),
+ 
  ).toContainText("-dash-");



  await sourceTree.getByText(":colon:").click();
- 
  await expect(page.getByRole("banner")).toContainText(":colon:");
+ 
  await expect(
+ 
    page.getByRole("navigation", { name: "Breadcrumb" }),
+ 
  ).toContainText(":colon:");



  await sourceTree.getByText(";semicolon;").click();
- 
  await expect(page.getByRole("banner")).toContainText(";semicolon;");
+ 
  await expect(
+ 
    page.getByRole("navigation", { name: "Breadcrumb" }),
+ 
  ).toContainText(";semicolon;");



  await sourceTree.getByText("@at@").click();
- 
  await expect(page.getByRole("banner")).toContainText("@at@");
+ 
  await expect(
+ 
    page.getByRole("navigation", { name: "Breadcrumb" }),
+ 
  ).toContainText("@at@");



  await sourceTree.getByText("_underscore_").click();
- 
  await expect(page.getByRole("banner")).toContainText("_underscore_");
+ 
  await expect(
+ 
    page.getByRole("navigation", { name: "Breadcrumb" }),
+ 
  ).toContainText("_underscore_");



  // TODO: fix these errors in `radicle-httpd` for the following edge cases.

  //
@@ -210,13 +222,19 @@ test("files with special characters in the filename", async ({ page }) => {
  // );



  await sourceTree.getByText("spaces are okay").click();
- 
  await expect(page.getByRole("banner")).toContainText("spaces are okay");
+ 
  await expect(
+ 
    page.getByRole("navigation", { name: "Breadcrumb" }),
+ 
  ).toContainText("spaces are okay");



  await sourceTree.getByText("~tilde~").click();
- 
  await expect(page.getByRole("banner")).toContainText("~tilde~");
+ 
  await expect(
+ 
    page.getByRole("navigation", { name: "Breadcrumb" }),
+ 
  ).toContainText("~tilde~");



  await sourceTree.getByText("👹👹👹").click();
- 
  await expect(page.getByRole("banner")).toContainText("👹👹👹");
+ 
  await expect(
+ 
    page.getByRole("navigation", { name: "Breadcrumb" }),
+ 
  ).toContainText("👹👹👹");

});



test("binary files", async ({ page }) => {
modified tests/e2e/repo/commits.spec.ts
@@ -198,10 +198,7 @@ test("pushing changes while viewing history", async ({ page, peerManager }) => {
  const branchSelectorCommitButton = page.getByTitle("Current HEAD").first();

  await expect(branchSelectorCommitButton).toHaveText("516fa74 first change");
- 
  await page
- 
    .getByRole("banner")
- 
    .getByRole("link", { name: "alice-project" })
- 
    .click();
+ 
  await page.getByRole("link", { name: "alice-project" }).nth(1).click();

  await expect(page).toHaveURL(`${alice.uiUrl()}/${rid}`);

  await page.getByRole("link", { name: "Commits 2" }).click();
modified tests/e2e/router.spec.ts
@@ -35,7 +35,7 @@ test("navigation between node and repo pages", async ({ page }) => {
  await expectBackAndForwardNavigationWorks("/nodes/localhost", page);

  await expectUrlPersistsReload(page);
- 
  await page.getByRole("link", { name: "Radicle logo localhost" }).click();
+ 
  await page.getByRole("link", { name: "Home" }).click();

  await expect(page).toHaveURL("/nodes/localhost");

});
modified tests/e2e/theme.spec.ts
@@ -17,11 +17,13 @@ test("default theme", async ({ page }) => {
test("theme persistence", async ({ page }) => {

  await page.goto(sourceBrowsingFixture);

  await expect(
- 
    page.getByRole("banner").getByRole("link", { name: "source-browsing" }),
+ 
    page
+ 
      .getByRole("navigation", { name: "Breadcrumb" })
+ 
      .getByRole("link", { name: "source-browsing" }),

  ).toBeVisible();

  await page.getByRole("button", { name: "Settings" }).click();
- 
  await page.getByText("System").click();
+ 
  await page.getByRole("button", { name: "Code Font System" }).click();

  await page.getByRole("button", { name: "Light Mode" }).click();



  await expect(page.locator("html")).toHaveAttribute("data-theme", "light");
@@ -36,7 +38,9 @@ test("theme persistence", async ({ page }) => {
test("change theme", async ({ page }) => {

  await page.goto(sourceBrowsingFixture);

  await expect(
- 
    page.getByRole("banner").getByRole("link", { name: "source-browsing" }),
+ 
    page
+ 
      .getByRole("navigation", { name: "Breadcrumb" })
+ 
      .getByRole("link", { name: "source-browsing" }),

  ).toBeVisible();

  await page.getByRole("button", { name: "Settings" }).click();
@@ -44,35 +48,35 @@ test("change theme", async ({ page }) => {
  await expect(page.locator("html")).toHaveAttribute("data-theme", "light");

  await expect(page.locator("body")).toHaveCSS(

    "background-color",
- 
    "rgb(245, 245, 255)",
+ 
    "rgb(248, 249, 250)",

  );

  // Source highlighting reacts to theme change.
- 
  await expect(page.getByText("() {")).toHaveCSS("color", "rgb(35, 37, 99)");
+ 
  await expect(page.getByText("() {")).toHaveCSS("color", "rgb(11, 13, 18)");



  await page.getByRole("button", { name: "Dark Mode" }).click();

  await expect(page.locator("html")).toHaveAttribute("data-theme", "dark");

  await expect(page.locator("body")).toHaveCSS(

    "background-color",
- 
    "rgb(10, 13, 16)",
+ 
    "rgb(0, 6, 15)",

  );

  // Source highlighting reacts to theme change.
- 
  await expect(page.getByText("() {")).toHaveCSS("color", "rgb(249, 249, 251)");
+ 
  await expect(page.getByText("() {")).toHaveCSS("color", "rgb(255, 255, 255)");

});



test("change code font", async ({ page }) => {

  await page.goto(sourceBrowsingFixture);

  await expect(
- 
    page.getByRole("banner").getByRole("link", { name: "source-browsing" }),
+ 
    page
+ 
      .getByRole("navigation", { name: "Breadcrumb" })
+ 
      .getByRole("link", { name: "source-browsing" }),

  ).toBeVisible();



  await page.getByRole("button", { name: "Settings" }).click();
- 
  await page.getByText("System").click();
- 
  await expect(page.getByText("System")).toHaveClass(/selected/);
+ 
  await page.getByRole("button", { name: "Code Font System" }).click();

  await expect(page.locator("html")).toHaveAttribute("data-codefont", "system");
- 
  await page.getByText("JetBrains Mono").click();
- 
  await expect(page.getByText("JetBrains Mono")).toHaveClass(/selected/);
+ 
  await page.getByRole("button", { name: "Code Font JetBrains Mono" }).click();

  await expect(page.locator("html")).toHaveAttribute(

    "data-codefont",

    "jetbrains",
modified tests/support/fixtures.ts
@@ -88,7 +88,7 @@ export const test = base.extend<{
        route => {

          return route.fulfill({

            status: 200,
- 
            path: "./public/radicle.svg",
+ 
            path: "./public/favicon.png",

          });

        },

      );