From 5d0182dfc2e2769b381e79dd9443e82201c520cb Mon Sep 17 00:00:00 2001
From: Pas <74743263+Pasithea0@users.noreply.github.com>
Date: Sat, 22 Mar 2025 14:09:38 -0600
Subject: [PATCH] add more themes

green, mocha, pink
---
 src/assets/locales/en.json                  |   5 +-
 src/pages/parts/settings/AppearancePart.tsx |  21 +-
 themes/all.ts                               |   8 +-
 themes/list/green.ts                        | 260 ++++++++++++++++++++
 themes/list/mocha.ts                        | 260 ++++++++++++++++++++
 themes/list/pink.ts                         | 260 ++++++++++++++++++++
 6 files changed, 809 insertions(+), 5 deletions(-)
 create mode 100644 themes/list/green.ts
 create mode 100644 themes/list/mocha.ts
 create mode 100644 themes/list/pink.ts

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 1b756ffa..acb1e405 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -610,7 +610,10 @@
         "gray": "Gray",
         "red": "Red",
         "teal": "Teal",
-        "classic": "Classic"
+        "classic": "Classic",
+        "green": "Green",
+        "mocha": "Mocha",
+        "pink": "Pink"
       },
       "title": "Appearance",
       "options": {
diff --git a/src/pages/parts/settings/AppearancePart.tsx b/src/pages/parts/settings/AppearancePart.tsx
index 48d9c67a..6009843b 100644
--- a/src/pages/parts/settings/AppearancePart.tsx
+++ b/src/pages/parts/settings/AppearancePart.tsx
@@ -11,6 +11,11 @@ const availableThemes = [
     selector: "theme-default",
     key: "settings.appearance.themes.default",
   },
+  {
+    id: "classic",
+    selector: "theme-classic",
+    key: "settings.appearance.themes.classic",
+  },
   {
     id: "blue",
     selector: "theme-blue",
@@ -32,9 +37,19 @@ const availableThemes = [
     key: "settings.appearance.themes.gray",
   },
   {
-    id: "classic",
-    selector: "theme-classic",
-    key: "settings.appearance.themes.classic",
+    id: "green",
+    selector: "theme-green",
+    key: "settings.appearance.themes.green",
+  },
+  {
+    id: "mocha",
+    selector: "theme-mocha",
+    key: "settings.appearance.themes.mocha",
+  },
+  {
+    id: "pink",
+    selector: "theme-pink",
+    key: "settings.appearance.themes.pink",
   },
 ];
 
diff --git a/themes/all.ts b/themes/all.ts
index abf81d52..d42e1990 100644
--- a/themes/all.ts
+++ b/themes/all.ts
@@ -3,11 +3,17 @@ import blue from "./list/blue";
 import red from "./list/red";
 import gray from "./list/gray";
 import classic from "./list/classic";
+import green from "./list/green";
+import mocha from "./list/mocha";
+import pink from "./list/pink";
 
 export const allThemes = [
   teal,
   blue,
   gray,
   red,
-  classic
+  classic,
+  green,
+  mocha,
+  pink
 ]
diff --git a/themes/list/green.ts b/themes/list/green.ts
new file mode 100644
index 00000000..295d9000
--- /dev/null
+++ b/themes/list/green.ts
@@ -0,0 +1,260 @@
+import { createTheme } from "../types";
+
+const tokens = {
+  purple: {
+    c50: "#91DB8BFF",
+    c100: "#4D9F3EFF",
+    c200: "#2B9A34FF",
+    c300: "#1C7C09FF",
+    c400: "#1A8A10FF",
+    c500: "#176D17FF",
+    c600: "#186507FF",
+    c700: "#044304FF",
+    c800: "#044109FF",
+    c900: "#032A03FF"
+  },
+  shade: {
+    c25: "#5DB35DFF",
+    c50: "#689067FF",
+    c100: "#567A52FF",
+    c200: "#3F603FFF",
+    c300: "#344F32FF",
+    c400: "#2C4127FF",
+    c500: "#1E321EFF",
+    c600: "#172818FF",
+    c700: "#152213FF",
+    c800: "#0F1B0FFF",
+    c900: "#0A120BFF"
+  },
+  ash: {
+    c50: "#7F9B8BFF",
+    c100: "#5B7B65FF",
+    c200: "#44644FFF",
+    c300: "#2B4E34FF",
+    c400: "#20422BFF",
+    c500: "#1C3C23FF",
+    c600: "#17321DFF",
+    c700: "#132917FF",
+    c800: "#102013FF",
+    c900: "#0C160CFF"
+  },
+  blue: {
+    c50: "#B5F5ADFF",
+    c100: "#79CC80FF",
+    c200: "#62AE5DFF",
+    c300: "#3E8C3BFF",
+    c400: "#235B25FF",
+    c500: "#1F5021FF",
+    c600: "#1C411BFFFF",
+    c700: "#17361BFF",
+    c800: "#102010FF",
+    c900: "#0B130BFF"
+  }
+};
+
+export default createTheme({
+  name: "green",
+  extend: {
+    colors: {
+      themePreview: {
+        primary: tokens.blue.c200,
+        secondary: tokens.shade.c50
+      },
+
+      pill: {
+        background: tokens.shade.c300,
+        backgroundHover: tokens.shade.c200,
+        highlight: tokens.blue.c200,
+
+        activeBackground: tokens.shade.c300,
+      },
+
+      global: {
+        accentA: tokens.blue.c200,
+        accentB: tokens.blue.c300
+      },
+
+      lightBar: {
+        light: tokens.blue.c400
+      },
+
+      buttons: {
+        toggle: tokens.purple.c300,
+        toggleDisabled: tokens.ash.c500,
+
+        secondary: tokens.ash.c700,
+        secondaryHover: tokens.ash.c700,
+        purple: tokens.purple.c500,
+        purpleHover: tokens.purple.c400,
+        cancel: tokens.ash.c500,
+        cancelHover: tokens.ash.c300
+      },
+
+      background: {
+        main: tokens.shade.c900,
+        secondary: tokens.shade.c600,
+        secondaryHover: tokens.shade.c400,
+        accentA: tokens.purple.c500,
+        accentB: tokens.blue.c500
+      },
+
+      modal: {
+        background: tokens.shade.c800,
+      },
+
+      type: {
+        logo: tokens.purple.c100,
+        text: tokens.shade.c50,
+        dimmed: tokens.shade.c50,
+        divider: tokens.ash.c500,
+        secondary: tokens.ash.c100,
+        link: tokens.purple.c100,
+        linkHover: tokens.purple.c50
+      },
+
+      search: {
+        background: tokens.shade.c500,
+        hoverBackground: tokens.shade.c600,
+        focused: tokens.shade.c400,
+        placeholder: tokens.shade.c100,
+        icon: tokens.shade.c100
+      },
+
+      mediaCard: {
+        hoverBackground: tokens.shade.c600,
+        hoverAccent: tokens.shade.c25,
+        hoverShadow: tokens.shade.c900,
+        shadow: tokens.shade.c700,
+        barColor: tokens.ash.c200,
+        barFillColor: tokens.purple.c100,
+        badge: tokens.shade.c700,
+        badgeText: tokens.ash.c100
+      },
+
+      largeCard: {
+        background: tokens.shade.c600,
+        icon: tokens.purple.c400
+      },
+
+      dropdown: {
+        background: tokens.shade.c600,
+        altBackground: tokens.shade.c700,
+        hoverBackground: tokens.shade.c500,
+        text: tokens.shade.c50,
+        secondary: tokens.shade.c100,
+        border: tokens.shade.c400,
+        contentBackground: tokens.shade.c500
+      },
+
+      authentication: {
+        border: tokens.shade.c300,
+        inputBg: tokens.shade.c600,
+        inputBgHover: tokens.shade.c500,
+        wordBackground: tokens.shade.c500,
+        copyText: tokens.shade.c100,
+        copyTextHover: tokens.ash.c50
+      },
+
+      settings: {
+        sidebar: {
+          activeLink: tokens.shade.c600,
+          badge: tokens.shade.c900,
+
+          type: {
+            secondary: tokens.shade.c200,
+            inactive: tokens.shade.c50,
+            icon: tokens.shade.c50,
+            iconActivated: tokens.purple.c200,
+            activated: tokens.purple.c50
+          }
+        },
+
+        card: {
+          border: tokens.shade.c400,
+          background: tokens.shade.c400,
+          altBackground: tokens.shade.c400
+        },
+
+        saveBar: {
+          background: tokens.shade.c800
+        }
+      },
+
+      utils: {
+        divider: tokens.ash.c300
+      },
+
+      errors: {
+        card: tokens.shade.c800,
+        border: tokens.ash.c500,
+
+        type: {
+          secondary: tokens.ash.c100
+        }
+      },
+
+      about: {
+        circle: tokens.ash.c500,
+        circleText: tokens.ash.c50
+      },
+
+      editBadge: {
+        bg: tokens.ash.c500,
+        bgHover: tokens.ash.c400,
+        text: tokens.ash.c50
+      },
+
+      progress: {
+        background: tokens.ash.c50,
+        preloaded: tokens.ash.c50,
+        filled: tokens.purple.c200
+      },
+
+      video: {
+        buttonBackground: tokens.ash.c200,
+
+        autoPlay: {
+          background: tokens.ash.c700,
+          hover: tokens.ash.c500
+        },
+
+        scraping: {
+          card: tokens.shade.c700,
+          loading: tokens.purple.c200,
+          noresult: tokens.ash.c100
+        },
+
+        audio: {
+          set: tokens.purple.c200
+        },
+
+        context: {
+          background: tokens.ash.c900,
+          light: tokens.shade.c50,
+          border: tokens.ash.c600,
+          hoverColor: tokens.ash.c600,
+          buttonFocus: tokens.ash.c500,
+          flagBg: tokens.ash.c500,
+          inputBg: tokens.ash.c600,
+          buttonOverInputHover: tokens.ash.c500,
+          inputPlaceholder: tokens.ash.c200,
+          cardBorder: tokens.ash.c700,
+          slider: tokens.ash.c50,
+          sliderFilled: tokens.purple.c200,
+
+          buttons: {
+            list: tokens.ash.c700,
+            active: tokens.ash.c900
+          },
+
+          closeHover: tokens.ash.c800,
+
+          type: {
+            secondary: tokens.ash.c200,
+            accent: tokens.purple.c200
+          }
+        }
+      }
+    }
+  }
+});
diff --git a/themes/list/mocha.ts b/themes/list/mocha.ts
new file mode 100644
index 00000000..52fa71b2
--- /dev/null
+++ b/themes/list/mocha.ts
@@ -0,0 +1,260 @@
+import { createTheme } from "../types";
+
+const tokens = {
+  purple: {
+    c50: "#E2AB68FF",
+    c100: "#B27C39FF",
+    c200: "#B1853FFF",
+    c300: "#88581DFF",
+    c400: "#8B5C27FF",
+    c500: "#905C22FF",
+    c600: "#784E1CFF",
+    c700: "#432A04FF",
+    c800: "#412604FF",
+    c900: "#2A1D03FF"
+  },
+  shade: {
+    c25: "#B38F5DFF",
+    c50: "#907D67FF",
+    c100: "#7A6A52FF",
+    c200: "#60523FFF",
+    c300: "#4F4432FF",
+    c400: "#413727FF",
+    c500: "#322C1EFF",
+    c600: "#281E17FF",
+    c700: "#221D13FF",
+    c800: "#1B160FFF",
+    c900: "#120F0AFF"
+  },
+  ash: {
+    c50: "#9B877FFF",
+    c100: "#7B665BFF",
+    c200: "#645044FF",
+    c300: "#4E3C2BFF",
+    c400: "#423420FF",
+    c500: "#3C2F1CFF",
+    c600: "#322517FF",
+    c700: "#292113FF",
+    c800: "#201910FF",
+    c900: "#16100CFF"
+  },
+  blue: {
+    c50: "#F5DBADFF",
+    c100: "#CCB279FF",
+    c200: "#987A4EFF",
+    c300: "#775936FF",
+    c400: "#785D34FF",
+    c500: "#534024FF",
+    c600: "#41321BFFFF",
+    c700: "#362C17FF",
+    c800: "#201810FF",
+    c900: "#13100BFF"
+  }
+};
+
+export default createTheme({
+  name: "mocha",
+  extend: {
+    colors: {
+      themePreview: {
+        primary: tokens.blue.c200,
+        secondary: tokens.shade.c50
+      },
+
+      pill: {
+        background: tokens.shade.c300,
+        backgroundHover: tokens.shade.c200,
+        highlight: tokens.blue.c200,
+
+        activeBackground: tokens.shade.c300,
+      },
+
+      global: {
+        accentA: tokens.blue.c200,
+        accentB: tokens.blue.c300
+      },
+
+      lightBar: {
+        light: tokens.blue.c400
+      },
+
+      buttons: {
+        toggle: tokens.purple.c300,
+        toggleDisabled: tokens.ash.c500,
+
+        secondary: tokens.ash.c700,
+        secondaryHover: tokens.ash.c700,
+        purple: tokens.purple.c500,
+        purpleHover: tokens.purple.c400,
+        cancel: tokens.ash.c500,
+        cancelHover: tokens.ash.c300
+      },
+
+      background: {
+        main: tokens.shade.c900,
+        secondary: tokens.shade.c600,
+        secondaryHover: tokens.shade.c400,
+        accentA: tokens.purple.c500,
+        accentB: tokens.blue.c500
+      },
+
+      modal: {
+        background: tokens.shade.c800,
+      },
+
+      type: {
+        logo: tokens.purple.c100,
+        text: tokens.shade.c50,
+        dimmed: tokens.shade.c50,
+        divider: tokens.ash.c500,
+        secondary: tokens.ash.c100,
+        link: tokens.purple.c100,
+        linkHover: tokens.purple.c50
+      },
+
+      search: {
+        background: tokens.shade.c500,
+        hoverBackground: tokens.shade.c600,
+        focused: tokens.shade.c400,
+        placeholder: tokens.shade.c100,
+        icon: tokens.shade.c100
+      },
+
+      mediaCard: {
+        hoverBackground: tokens.shade.c600,
+        hoverAccent: tokens.shade.c25,
+        hoverShadow: tokens.shade.c900,
+        shadow: tokens.shade.c700,
+        barColor: tokens.ash.c200,
+        barFillColor: tokens.purple.c100,
+        badge: tokens.shade.c700,
+        badgeText: tokens.ash.c100
+      },
+
+      largeCard: {
+        background: tokens.shade.c600,
+        icon: tokens.purple.c400
+      },
+
+      dropdown: {
+        background: tokens.shade.c600,
+        altBackground: tokens.shade.c700,
+        hoverBackground: tokens.shade.c500,
+        text: tokens.shade.c50,
+        secondary: tokens.shade.c100,
+        border: tokens.shade.c400,
+        contentBackground: tokens.shade.c500
+      },
+
+      authentication: {
+        border: tokens.shade.c300,
+        inputBg: tokens.shade.c600,
+        inputBgHover: tokens.shade.c500,
+        wordBackground: tokens.shade.c500,
+        copyText: tokens.shade.c100,
+        copyTextHover: tokens.ash.c50
+      },
+
+      settings: {
+        sidebar: {
+          activeLink: tokens.shade.c600,
+          badge: tokens.shade.c900,
+
+          type: {
+            secondary: tokens.shade.c200,
+            inactive: tokens.shade.c50,
+            icon: tokens.shade.c50,
+            iconActivated: tokens.purple.c200,
+            activated: tokens.purple.c50
+          }
+        },
+
+        card: {
+          border: tokens.shade.c400,
+          background: tokens.shade.c400,
+          altBackground: tokens.shade.c400
+        },
+
+        saveBar: {
+          background: tokens.shade.c800
+        }
+      },
+
+      utils: {
+        divider: tokens.ash.c300
+      },
+
+      errors: {
+        card: tokens.shade.c800,
+        border: tokens.ash.c500,
+
+        type: {
+          secondary: tokens.ash.c100
+        }
+      },
+
+      about: {
+        circle: tokens.ash.c500,
+        circleText: tokens.ash.c50
+      },
+
+      editBadge: {
+        bg: tokens.ash.c500,
+        bgHover: tokens.ash.c400,
+        text: tokens.ash.c50
+      },
+
+      progress: {
+        background: tokens.ash.c50,
+        preloaded: tokens.ash.c50,
+        filled: tokens.purple.c200
+      },
+
+      video: {
+        buttonBackground: tokens.ash.c200,
+
+        autoPlay: {
+          background: tokens.ash.c700,
+          hover: tokens.ash.c500
+        },
+
+        scraping: {
+          card: tokens.shade.c700,
+          loading: tokens.purple.c200,
+          noresult: tokens.ash.c100
+        },
+
+        audio: {
+          set: tokens.purple.c200
+        },
+
+        context: {
+          background: tokens.ash.c900,
+          light: tokens.shade.c50,
+          border: tokens.ash.c600,
+          hoverColor: tokens.ash.c600,
+          buttonFocus: tokens.ash.c500,
+          flagBg: tokens.ash.c500,
+          inputBg: tokens.ash.c600,
+          buttonOverInputHover: tokens.ash.c500,
+          inputPlaceholder: tokens.ash.c200,
+          cardBorder: tokens.ash.c700,
+          slider: tokens.ash.c50,
+          sliderFilled: tokens.purple.c200,
+
+          buttons: {
+            list: tokens.ash.c700,
+            active: tokens.ash.c900
+          },
+
+          closeHover: tokens.ash.c800,
+
+          type: {
+            secondary: tokens.ash.c200,
+            accent: tokens.purple.c200
+          }
+        }
+      }
+    }
+  }
+});
diff --git a/themes/list/pink.ts b/themes/list/pink.ts
new file mode 100644
index 00000000..57ad82e3
--- /dev/null
+++ b/themes/list/pink.ts
@@ -0,0 +1,260 @@
+import { createTheme } from "../types";
+
+const tokens = {
+  purple: {
+    c50: "#E964E9FF",
+    c100: "#CE40ADFF",
+    c200: "#C132BCFF",
+    c300: "#A1117DFF",
+    c400: "#AE299AFF",
+    c500: "#98147EFF",
+    c600: "#7D0E6CFF",
+    c700: "#430431FF",
+    c800: "#410440FF",
+    c900: "#2A0324FF"
+  },
+  shade: {
+    c25: "#B35DA5FF",
+    c50: "#906788FF",
+    c100: "#7A5275FF",
+    c200: "#603F5BFF",
+    c300: "#4F324DFF",
+    c400: "#412738FF",
+    c500: "#321E31FF",
+    c600: "#281726FF",
+    c700: "#211322FF",
+    c800: "#1B0F1AFF",
+    c900: "#120A11FF"
+  },
+  ash: {
+    c50: "#9B7F95FF",
+    c100: "#7B5B75FF",
+    c200: "#64445FFF",
+    c300: "#4E2B48FF",
+    c400: "#412042FF",
+    c500: "#41203EFF",
+    c600: "#32172DFF",
+    c700: "#291328FF",
+    c800: "#1E1020FF",
+    c900: "#150C16FF"
+  },
+  blue: {
+    c50: "#F5ADEEFF",
+    c100: "#CC79C8FF",
+    c200: "#AE5D9CFF",
+    c300: "#8C3B87FF",
+    c400: "#5B2353FF",
+    c500: "#501F4CFF",
+    c600: "#411B3AFFFF",
+    c700: "#361736FF",
+    c800: "#20101EFF",
+    c900: "#130B12FF"
+  }
+};
+
+export default createTheme({
+  name: "pink",
+  extend: {
+    colors: {
+      themePreview: {
+        primary: tokens.blue.c200,
+        secondary: tokens.shade.c50
+      },
+
+      pill: {
+        background: tokens.shade.c300,
+        backgroundHover: tokens.shade.c200,
+        highlight: tokens.blue.c200,
+
+        activeBackground: tokens.shade.c300,
+      },
+
+      global: {
+        accentA: tokens.blue.c200,
+        accentB: tokens.blue.c300
+      },
+
+      lightBar: {
+        light: tokens.blue.c400
+      },
+
+      buttons: {
+        toggle: tokens.purple.c300,
+        toggleDisabled: tokens.ash.c500,
+
+        secondary: tokens.ash.c700,
+        secondaryHover: tokens.ash.c700,
+        purple: tokens.purple.c500,
+        purpleHover: tokens.purple.c400,
+        cancel: tokens.ash.c500,
+        cancelHover: tokens.ash.c300
+      },
+
+      background: {
+        main: tokens.shade.c900,
+        secondary: tokens.shade.c600,
+        secondaryHover: tokens.shade.c400,
+        accentA: tokens.purple.c500,
+        accentB: tokens.blue.c500
+      },
+
+      modal: {
+        background: tokens.shade.c800,
+      },
+
+      type: {
+        logo: tokens.purple.c100,
+        text: tokens.shade.c50,
+        dimmed: tokens.shade.c50,
+        divider: tokens.ash.c500,
+        secondary: tokens.ash.c100,
+        link: tokens.purple.c100,
+        linkHover: tokens.purple.c50
+      },
+
+      search: {
+        background: tokens.shade.c500,
+        hoverBackground: tokens.shade.c600,
+        focused: tokens.shade.c400,
+        placeholder: tokens.shade.c100,
+        icon: tokens.shade.c100
+      },
+
+      mediaCard: {
+        hoverBackground: tokens.shade.c600,
+        hoverAccent: tokens.shade.c25,
+        hoverShadow: tokens.shade.c900,
+        shadow: tokens.shade.c700,
+        barColor: tokens.ash.c200,
+        barFillColor: tokens.purple.c100,
+        badge: tokens.shade.c700,
+        badgeText: tokens.ash.c100
+      },
+
+      largeCard: {
+        background: tokens.shade.c600,
+        icon: tokens.purple.c400
+      },
+
+      dropdown: {
+        background: tokens.shade.c600,
+        altBackground: tokens.shade.c700,
+        hoverBackground: tokens.shade.c500,
+        text: tokens.shade.c50,
+        secondary: tokens.shade.c100,
+        border: tokens.shade.c400,
+        contentBackground: tokens.shade.c500
+      },
+
+      authentication: {
+        border: tokens.shade.c300,
+        inputBg: tokens.shade.c600,
+        inputBgHover: tokens.shade.c500,
+        wordBackground: tokens.shade.c500,
+        copyText: tokens.shade.c100,
+        copyTextHover: tokens.ash.c50
+      },
+
+      settings: {
+        sidebar: {
+          activeLink: tokens.shade.c600,
+          badge: tokens.shade.c900,
+
+          type: {
+            secondary: tokens.shade.c200,
+            inactive: tokens.shade.c50,
+            icon: tokens.shade.c50,
+            iconActivated: tokens.purple.c200,
+            activated: tokens.purple.c50
+          }
+        },
+
+        card: {
+          border: tokens.shade.c400,
+          background: tokens.shade.c400,
+          altBackground: tokens.shade.c400
+        },
+
+        saveBar: {
+          background: tokens.shade.c800
+        }
+      },
+
+      utils: {
+        divider: tokens.ash.c300
+      },
+
+      errors: {
+        card: tokens.shade.c800,
+        border: tokens.ash.c500,
+
+        type: {
+          secondary: tokens.ash.c100
+        }
+      },
+
+      about: {
+        circle: tokens.ash.c500,
+        circleText: tokens.ash.c50
+      },
+
+      editBadge: {
+        bg: tokens.ash.c500,
+        bgHover: tokens.ash.c400,
+        text: tokens.ash.c50
+      },
+
+      progress: {
+        background: tokens.ash.c50,
+        preloaded: tokens.ash.c50,
+        filled: tokens.purple.c200
+      },
+
+      video: {
+        buttonBackground: tokens.ash.c200,
+
+        autoPlay: {
+          background: tokens.ash.c700,
+          hover: tokens.ash.c500
+        },
+
+        scraping: {
+          card: tokens.shade.c700,
+          loading: tokens.purple.c200,
+          noresult: tokens.ash.c100
+        },
+
+        audio: {
+          set: tokens.purple.c200
+        },
+
+        context: {
+          background: tokens.ash.c900,
+          light: tokens.shade.c50,
+          border: tokens.ash.c600,
+          hoverColor: tokens.ash.c600,
+          buttonFocus: tokens.ash.c500,
+          flagBg: tokens.ash.c500,
+          inputBg: tokens.ash.c600,
+          buttonOverInputHover: tokens.ash.c500,
+          inputPlaceholder: tokens.ash.c200,
+          cardBorder: tokens.ash.c700,
+          slider: tokens.ash.c50,
+          sliderFilled: tokens.purple.c200,
+
+          buttons: {
+            list: tokens.ash.c700,
+            active: tokens.ash.c900
+          },
+
+          closeHover: tokens.ash.c800,
+
+          type: {
+            secondary: tokens.ash.c200,
+            accent: tokens.purple.c200
+          }
+        }
+      }
+    }
+  }
+});