@abumble/design-system 0.0.46 → 0.0.48

package/dist/themes.js

@@ -1,52 +1,52 @@
-import { jsx as k } from "react/jsx-runtime";
-import { useState as m, useEffect as c, useCallback as l, useMemo as E } from "react";
-import { T as y } from "./shared/useTheme.js";
+import { jsx as S } from "react/jsx-runtime";
+import { useState as m, useEffect as a, useCallback as l, useMemo as y } from "react";
+import { T as E } from "./shared/useTheme.js";
 import { u as b } from "./shared/useTheme.js";
-const h = "theme", u = "color-theme";
+const u = "theme", h = "color-theme";
 function v() {
   if (typeof window > "u") return "system";
-  const e = localStorage.getItem(h);
+  const e = localStorage.getItem(u);
   return e === "light" || e === "dark" || e === "system" ? e : "dark";
 }
 function w(e) {
   if (typeof window > "u") return e;
-  const o = localStorage.getItem(u);
-  return o === "linen" || o === "steel" ? o : e;
+  const t = localStorage.getItem(h);
+  return t === "linen" || t === "steel" || t === "sage" || t === "dusk" || t === "canopy" ? t : e;
 }
 function C(e) {
-  const o = document.documentElement;
-  e === "dark" ? o.classList.add("dark") : o.classList.remove("dark");
+  const t = document.documentElement;
+  e === "dark" ? t.classList.add("dark") : t.classList.remove("dark");
 }
 function L(e) {
   document.documentElement.setAttribute("data-theme", e);
 }
 function _({
   children: e,
-  defaultColorTheme: o = "steel"
+  defaultColorTheme: t = "steel"
 }) {
   const [r, f] = m(v), [s, T] = m(
-    () => w(o)
+    () => w(t)
   ), [p, g] = m(
     () => window.matchMedia("(prefers-color-scheme: dark)").matches
   ), n = r === "system" ? p ? "dark" : "light" : r;
-  c(() => {
+  a(() => {
     C(n);
-  }, [n]), c(() => {
+  }, [n]), a(() => {
     L(s);
-  }, [s]), c(() => {
+  }, [s]), a(() => {
     if (r !== "system") return;
-    const t = window.matchMedia("(prefers-color-scheme: dark)"), i = () => g(t.matches);
-    return t.addEventListener("change", i), () => t.removeEventListener("change", i);
+    const o = window.matchMedia("(prefers-color-scheme: dark)"), i = () => g(o.matches);
+    return o.addEventListener("change", i), () => o.removeEventListener("change", i);
   }, [r]);
-  const a = l((t) => {
-    f(t), localStorage.setItem(h, t);
-  }, []), d = l((t) => {
-    T(t), localStorage.setItem(u, t);
-  }, []), S = E(
-    () => ({ theme: r, setTheme: a, effectiveTheme: n, colorTheme: s, setColorTheme: d }),
-    [r, a, n, s, d]
+  const c = l((o) => {
+    f(o), localStorage.setItem(u, o);
+  }, []), d = l((o) => {
+    T(o), localStorage.setItem(h, o);
+  }, []), k = y(
+    () => ({ theme: r, setTheme: c, effectiveTheme: n, colorTheme: s, setColorTheme: d }),
+    [r, c, n, s, d]
   );
-  return /* @__PURE__ */ k(y.Provider, { value: S, children: e });
+  return /* @__PURE__ */ S(E.Provider, { value: k, children: e });
 }
 export {
   _ as ThemeProvider,

package/dist/themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"themes.js","sources":["../src/themes/ThemeProvider.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { ThemeContext } from './ThemeContext'\nimport './linen.css'\nimport './steel.css'\n\nexport type Theme = 'light' | 'dark' | 'system'\nexport type ColorTheme = 'linen' | 'steel'\n\nconst STORAGE_KEY = 'theme'\nconst COLOR_THEME_STORAGE_KEY = 'color-theme'\n\nfunction getStoredTheme(): Theme {\n\tif (typeof window === 'undefined') return 'system'\n\tconst stored = localStorage.getItem(STORAGE_KEY)\n\tif (stored === 'light' || stored === 'dark' || stored === 'system')\n\t\treturn stored\n\treturn 'dark'\n}\n\nfunction getStoredColorTheme(defaultColorTheme: ColorTheme): ColorTheme {\n\tif (typeof window === 'undefined') return defaultColorTheme\n\tconst stored = localStorage.getItem(COLOR_THEME_STORAGE_KEY)\n\tif (stored === 'linen' || stored === 'steel') return stored\n\treturn defaultColorTheme\n}\n\nfunction applyTheme(effective: 'light' | 'dark') {\n\tconst root = document.documentElement\n\tif (effective === 'dark') {\n\t\troot.classList.add('dark')\n\t} else {\n\t\troot.classList.remove('dark')\n\t}\n}\n\nfunction applyColorTheme(colorTheme: ColorTheme) {\n\tdocument.documentElement.setAttribute('data-theme', colorTheme)\n}\n\nexport function ThemeProvider({\n\tchildren,\n\tdefaultColorTheme = 'steel',\n}: {\n\tchildren: ReactNode\n\tdefaultColorTheme?: ColorTheme\n}) {\n\tconst [theme, setThemeState] = useState<Theme>(getStoredTheme)\n\tconst [colorTheme, setColorThemeState] = useState<ColorTheme>(() =>\n\t\tgetStoredColorTheme(defaultColorTheme),\n\t)\n\tconst [systemDark, setSystemDark] = useState(\n\t\t() => window.matchMedia('(prefers-color-scheme: dark)').matches,\n\t)\n\n\tconst effectiveTheme: 'light' | 'dark' =\n\t\ttheme === 'system' ? (systemDark ? 'dark' : 'light') : theme\n\n\tuseEffect(() => {\n\t\tapplyTheme(effectiveTheme)\n\t}, [effectiveTheme])\n\n\tuseEffect(() => {\n\t\tapplyColorTheme(colorTheme)\n\t}, [colorTheme])\n\n\tuseEffect(() => {\n\t\tif (theme !== 'system') return\n\t\tconst media = window.matchMedia('(prefers-color-scheme: dark)')\n\t\tconst handler = () => setSystemDark(media.matches)\n\t\tmedia.addEventListener('change', handler)\n\t\treturn () => media.removeEventListener('change', handler)\n\t}, [theme])\n\n\tconst setTheme = useCallback((next: Theme) => {\n\t\tsetThemeState(next)\n\t\tlocalStorage.setItem(STORAGE_KEY, next)\n\t}, [])\n\n\tconst setColorTheme = useCallback((next: ColorTheme) => {\n\t\tsetColorThemeState(next)\n\t\tlocalStorage.setItem(COLOR_THEME_STORAGE_KEY, next)\n\t}, [])\n\n\tconst value = useMemo(\n\t\t() => ({ theme, setTheme, effectiveTheme, colorTheme, setColorTheme }),\n\t\t[theme, setTheme, effectiveTheme, colorTheme, setColorTheme],\n\t)\n\n\treturn (\n\t\t<ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>\n\t)\n}\n"],"names":["STORAGE_KEY","COLOR_THEME_STORAGE_KEY","getStoredTheme","stored","getStoredColorTheme","defaultColorTheme","applyTheme","effective","root","applyColorTheme","colorTheme","ThemeProvider","children","theme","setThemeState","useState","setColorThemeState","systemDark","setSystemDark","effectiveTheme","useEffect","media","handler","setTheme","useCallback","next","setColorTheme","value","useMemo","jsx","ThemeContext"],"mappings":";;;;AASA,MAAMA,IAAc,SACdC,IAA0B;AAEhC,SAASC,IAAwB;AAChC,MAAI,OAAO,SAAW,IAAa,QAAO;AAC1C,QAAMC,IAAS,aAAa,QAAQH,CAAW;AAC/C,SAAIG,MAAW,WAAWA,MAAW,UAAUA,MAAW,WAClDA,IACD;AACR;AAEA,SAASC,EAAoBC,GAA2C;AACvE,MAAI,OAAO,SAAW,IAAa,QAAOA;AAC1C,QAAMF,IAAS,aAAa,QAAQF,CAAuB;AAC3D,SAAIE,MAAW,WAAWA,MAAW,UAAgBA,IAC9CE;AACR;AAEA,SAASC,EAAWC,GAA6B;AAChD,QAAMC,IAAO,SAAS;AACtB,EAAID,MAAc,SACjBC,EAAK,UAAU,IAAI,MAAM,IAEzBA,EAAK,UAAU,OAAO,MAAM;AAE9B;AAEA,SAASC,EAAgBC,GAAwB;AAChD,WAAS,gBAAgB,aAAa,cAAcA,CAAU;AAC/D;AAEO,SAASC,EAAc;AAAA,EAC7B,UAAAC;AAAA,EACA,mBAAAP,IAAoB;AACrB,GAGG;AACF,QAAM,CAACQ,GAAOC,CAAa,IAAIC,EAAgBb,CAAc,GACvD,CAACQ,GAAYM,CAAkB,IAAID;AAAA,IAAqB,MAC7DX,EAAoBC,CAAiB;AAAA,EAAA,GAEhC,CAACY,GAAYC,CAAa,IAAIH;AAAA,IACnC,MAAM,OAAO,WAAW,8BAA8B,EAAE;AAAA,EAAA,GAGnDI,IACLN,MAAU,WAAYI,IAAa,SAAS,UAAWJ;AAExD,EAAAO,EAAU,MAAM;AACf,IAAAd,EAAWa,CAAc;AAAA,EAC1B,GAAG,CAACA,CAAc,CAAC,GAEnBC,EAAU,MAAM;AACf,IAAAX,EAAgBC,CAAU;AAAA,EAC3B,GAAG,CAACA,CAAU,CAAC,GAEfU,EAAU,MAAM;AACf,QAAIP,MAAU,SAAU;AACxB,UAAMQ,IAAQ,OAAO,WAAW,8BAA8B,GACxDC,IAAU,MAAMJ,EAAcG,EAAM,OAAO;AACjD,WAAAA,EAAM,iBAAiB,UAAUC,CAAO,GACjC,MAAMD,EAAM,oBAAoB,UAAUC,CAAO;AAAA,EACzD,GAAG,CAACT,CAAK,CAAC;AAEV,QAAMU,IAAWC,EAAY,CAACC,MAAgB;AAC7C,IAAAX,EAAcW,CAAI,GAClB,aAAa,QAAQzB,GAAayB,CAAI;AAAA,EACvC,GAAG,CAAA,CAAE,GAECC,IAAgBF,EAAY,CAACC,MAAqB;AACvD,IAAAT,EAAmBS,CAAI,GACvB,aAAa,QAAQxB,GAAyBwB,CAAI;AAAA,EACnD,GAAG,CAAA,CAAE,GAECE,IAAQC;AAAA,IACb,OAAO,EAAE,OAAAf,GAAO,UAAAU,GAAU,gBAAAJ,GAAgB,YAAAT,GAAY,eAAAgB,EAAA;AAAA,IACtD,CAACb,GAAOU,GAAUJ,GAAgBT,GAAYgB,CAAa;AAAA,EAAA;AAG5D,SACC,gBAAAG,EAACC,EAAa,UAAb,EAAsB,OAAAH,GAAe,UAAAf,EAAA,CAAS;AAEjD;"}
+{"version":3,"file":"themes.js","sources":["../src/themes/ThemeProvider.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { ThemeContext } from './ThemeContext'\nimport './linen.css'\nimport './steel.css'\nimport './sage.css'\nimport './dusk.css'\nimport './canopy.css'\n\nexport type Theme = 'light' | 'dark' | 'system'\nexport type ColorTheme = 'linen' | 'steel' | 'sage' | 'dusk' | 'canopy'\n\nconst STORAGE_KEY = 'theme'\nconst COLOR_THEME_STORAGE_KEY = 'color-theme'\n\nfunction getStoredTheme(): Theme {\n\tif (typeof window === 'undefined') return 'system'\n\tconst stored = localStorage.getItem(STORAGE_KEY)\n\tif (stored === 'light' || stored === 'dark' || stored === 'system')\n\t\treturn stored\n\treturn 'dark'\n}\n\nfunction getStoredColorTheme(defaultColorTheme: ColorTheme): ColorTheme {\n\tif (typeof window === 'undefined') return defaultColorTheme\n\tconst stored = localStorage.getItem(COLOR_THEME_STORAGE_KEY)\n\tif (stored === 'linen' || stored === 'steel' || stored === 'sage' || stored === 'dusk' || stored === 'canopy') return stored\n\treturn defaultColorTheme\n}\n\nfunction applyTheme(effective: 'light' | 'dark') {\n\tconst root = document.documentElement\n\tif (effective === 'dark') {\n\t\troot.classList.add('dark')\n\t} else {\n\t\troot.classList.remove('dark')\n\t}\n}\n\nfunction applyColorTheme(colorTheme: ColorTheme) {\n\tdocument.documentElement.setAttribute('data-theme', colorTheme)\n}\n\nexport function ThemeProvider({\n\tchildren,\n\tdefaultColorTheme = 'steel',\n}: {\n\tchildren: ReactNode\n\tdefaultColorTheme?: ColorTheme\n}) {\n\tconst [theme, setThemeState] = useState<Theme>(getStoredTheme)\n\tconst [colorTheme, setColorThemeState] = useState<ColorTheme>(() =>\n\t\tgetStoredColorTheme(defaultColorTheme),\n\t)\n\tconst [systemDark, setSystemDark] = useState(\n\t\t() => window.matchMedia('(prefers-color-scheme: dark)').matches,\n\t)\n\n\tconst effectiveTheme: 'light' | 'dark' =\n\t\ttheme === 'system' ? (systemDark ? 'dark' : 'light') : theme\n\n\tuseEffect(() => {\n\t\tapplyTheme(effectiveTheme)\n\t}, [effectiveTheme])\n\n\tuseEffect(() => {\n\t\tapplyColorTheme(colorTheme)\n\t}, [colorTheme])\n\n\tuseEffect(() => {\n\t\tif (theme !== 'system') return\n\t\tconst media = window.matchMedia('(prefers-color-scheme: dark)')\n\t\tconst handler = () => setSystemDark(media.matches)\n\t\tmedia.addEventListener('change', handler)\n\t\treturn () => media.removeEventListener('change', handler)\n\t}, [theme])\n\n\tconst setTheme = useCallback((next: Theme) => {\n\t\tsetThemeState(next)\n\t\tlocalStorage.setItem(STORAGE_KEY, next)\n\t}, [])\n\n\tconst setColorTheme = useCallback((next: ColorTheme) => {\n\t\tsetColorThemeState(next)\n\t\tlocalStorage.setItem(COLOR_THEME_STORAGE_KEY, next)\n\t}, [])\n\n\tconst value = useMemo(\n\t\t() => ({ theme, setTheme, effectiveTheme, colorTheme, setColorTheme }),\n\t\t[theme, setTheme, effectiveTheme, colorTheme, setColorTheme],\n\t)\n\n\treturn (\n\t\t<ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>\n\t)\n}\n"],"names":["STORAGE_KEY","COLOR_THEME_STORAGE_KEY","getStoredTheme","stored","getStoredColorTheme","defaultColorTheme","applyTheme","effective","root","applyColorTheme","colorTheme","ThemeProvider","children","theme","setThemeState","useState","setColorThemeState","systemDark","setSystemDark","effectiveTheme","useEffect","media","handler","setTheme","useCallback","next","setColorTheme","value","useMemo","jsx","ThemeContext"],"mappings":";;;;AAYA,MAAMA,IAAc,SACdC,IAA0B;AAEhC,SAASC,IAAwB;AAChC,MAAI,OAAO,SAAW,IAAa,QAAO;AAC1C,QAAMC,IAAS,aAAa,QAAQH,CAAW;AAC/C,SAAIG,MAAW,WAAWA,MAAW,UAAUA,MAAW,WAClDA,IACD;AACR;AAEA,SAASC,EAAoBC,GAA2C;AACvE,MAAI,OAAO,SAAW,IAAa,QAAOA;AAC1C,QAAMF,IAAS,aAAa,QAAQF,CAAuB;AAC3D,SAAIE,MAAW,WAAWA,MAAW,WAAWA,MAAW,UAAUA,MAAW,UAAUA,MAAW,WAAiBA,IAC/GE;AACR;AAEA,SAASC,EAAWC,GAA6B;AAChD,QAAMC,IAAO,SAAS;AACtB,EAAID,MAAc,SACjBC,EAAK,UAAU,IAAI,MAAM,IAEzBA,EAAK,UAAU,OAAO,MAAM;AAE9B;AAEA,SAASC,EAAgBC,GAAwB;AAChD,WAAS,gBAAgB,aAAa,cAAcA,CAAU;AAC/D;AAEO,SAASC,EAAc;AAAA,EAC7B,UAAAC;AAAA,EACA,mBAAAP,IAAoB;AACrB,GAGG;AACF,QAAM,CAACQ,GAAOC,CAAa,IAAIC,EAAgBb,CAAc,GACvD,CAACQ,GAAYM,CAAkB,IAAID;AAAA,IAAqB,MAC7DX,EAAoBC,CAAiB;AAAA,EAAA,GAEhC,CAACY,GAAYC,CAAa,IAAIH;AAAA,IACnC,MAAM,OAAO,WAAW,8BAA8B,EAAE;AAAA,EAAA,GAGnDI,IACLN,MAAU,WAAYI,IAAa,SAAS,UAAWJ;AAExD,EAAAO,EAAU,MAAM;AACf,IAAAd,EAAWa,CAAc;AAAA,EAC1B,GAAG,CAACA,CAAc,CAAC,GAEnBC,EAAU,MAAM;AACf,IAAAX,EAAgBC,CAAU;AAAA,EAC3B,GAAG,CAACA,CAAU,CAAC,GAEfU,EAAU,MAAM;AACf,QAAIP,MAAU,SAAU;AACxB,UAAMQ,IAAQ,OAAO,WAAW,8BAA8B,GACxDC,IAAU,MAAMJ,EAAcG,EAAM,OAAO;AACjD,WAAAA,EAAM,iBAAiB,UAAUC,CAAO,GACjC,MAAMD,EAAM,oBAAoB,UAAUC,CAAO;AAAA,EACzD,GAAG,CAACT,CAAK,CAAC;AAEV,QAAMU,IAAWC,EAAY,CAACC,MAAgB;AAC7C,IAAAX,EAAcW,CAAI,GAClB,aAAa,QAAQzB,GAAayB,CAAI;AAAA,EACvC,GAAG,CAAA,CAAE,GAECC,IAAgBF,EAAY,CAACC,MAAqB;AACvD,IAAAT,EAAmBS,CAAI,GACvB,aAAa,QAAQxB,GAAyBwB,CAAI;AAAA,EACnD,GAAG,CAAA,CAAE,GAECE,IAAQC;AAAA,IACb,OAAO,EAAE,OAAAf,GAAO,UAAAU,GAAU,gBAAAJ,GAAgB,YAAAT,GAAY,eAAAgB,EAAA;AAAA,IACtD,CAACb,GAAOU,GAAUJ,GAAgBT,GAAYgB,CAAa;AAAA,EAAA;AAG5D,SACC,gBAAAG,EAACC,EAAa,UAAb,EAAsB,OAAAH,GAAe,UAAAf,EAAA,CAAS;AAEjD;"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@abumble/design-system",
-	"version": "0.0.46",
+	"version": "0.0.48",
 	"files": [
 		"dist",
 		"src/styles.css",
@@ -52,6 +52,7 @@
 		"prepublishOnly": "npm run build",
 		"publish:npm": "npm publish --access public",
 		"dev": "vite",
+		"sandbox": "vite --config sandbox/vite.config.ts",
 		"storybook": "storybook dev -p 6006",
 		"build-storybook": "storybook build"
 	},

package/src/styles.css

@@ -2,6 +2,8 @@
 @import 'tw-animate-css';
 @import './themes/linen.css';
 @import './themes/steel.css';
+@import './themes/sage.css';
+@import './themes/dusk.css';
 
 @tailwind base;
 @tailwind components;
@@ -9,6 +11,10 @@
 
 @custom-variant dark (&:is(.dark *));
 
+:root {
+	--radius: 0.3rem;
+}
+
 @theme {
 	/*
     This defines the utility class 'list-square'
@@ -113,13 +119,17 @@
 }
 
 .sidebar {
-	@apply text-sidebar-foreground;
+	@apply bg-sidebar text-sidebar-foreground;
 }
 
 .header {
 	@apply z-50 fixed w-full h-14 top-0 px-3 flex justify-between text-card-foreground bg-card border-container items-center;
 }
 
+.app-title {
+	@apply text-xl font-bold tracking-tight ml-2;
+}
+
 .sub-heading {
 	@apply mt-8 mb-1 font-semibold text-foreground;
 }

package/src/themes/ThemeProvider.tsx

@@ -3,9 +3,12 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { ThemeContext } from './ThemeContext'
 import './linen.css'
 import './steel.css'
+import './sage.css'
+import './dusk.css'
+import './canopy.css'
 
 export type Theme = 'light' | 'dark' | 'system'
-export type ColorTheme = 'linen' | 'steel'
+export type ColorTheme = 'linen' | 'steel' | 'sage' | 'dusk' | 'canopy'
 
 const STORAGE_KEY = 'theme'
 const COLOR_THEME_STORAGE_KEY = 'color-theme'
@@ -21,7 +24,7 @@ function getStoredTheme(): Theme {
 function getStoredColorTheme(defaultColorTheme: ColorTheme): ColorTheme {
 	if (typeof window === 'undefined') return defaultColorTheme
 	const stored = localStorage.getItem(COLOR_THEME_STORAGE_KEY)
-	if (stored === 'linen' || stored === 'steel') return stored
+	if (stored === 'linen' || stored === 'steel' || stored === 'sage' || stored === 'dusk' || stored === 'canopy') return stored
 	return defaultColorTheme
 }
 

package/src/themes/canopy.css

@@ -0,0 +1,157 @@
+[data-theme="canopy"] {
+	/* --- Light Theme (Professional Navy & Sky — Product Dashboard) --- */
+	--background: oklch(0.97 0.008 210);
+	--foreground: oklch(0.16 0.035 225);
+
+	/* Brand palette */
+	--color-canopy: #0f172a;
+	--color-hive: #0ea5e9;
+	--color-parchment: #f1f5f9;
+
+	/* Chart palette */
+	--chart-1: oklch(0.65 0.18 142);
+	--chart-2: oklch(0.72 0.17 72);
+	--chart-3: oklch(0.69 0.19 38);
+	--chart-4: oklch(0.55 0.2 25);
+	--chart-5: oklch(0.57 0.22 264);
+	--chart-6: oklch(0.55 0.22 290);
+	--chart-7: oklch(0.62 0.2 314);
+	--chart-8: oklch(0.62 0.2 340);
+
+	/* Surfaces */
+	--card: oklch(1 0 0 / 0.85);
+	--card-foreground: oklch(0.16 0.035 225);
+
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.16 0.035 225);
+
+	/* Primary: Sky Blue */
+	--primary: oklch(0.62 0.18 210);
+	--primary-foreground: oklch(1 0 0);
+
+	--secondary: oklch(0.93 0.01 210);
+	--secondary-foreground: oklch(0.62 0.18 210);
+
+	--muted: oklch(0.93 0.01 210);
+	--muted-foreground: oklch(0.5 0.02 210);
+
+	--accent: oklch(0.93 0.01 210);
+	--accent-foreground: oklch(0.62 0.18 210);
+
+	--destructive: oklch(0.55 0.19 15);
+	--destructive-foreground: oklch(1 0 0);
+
+	--border: oklch(0.88 0.008 210);
+	--input: oklch(0.88 0.008 210);
+	--ring: oklch(0.62 0.18 210 / 0.3);
+
+	/* Sidebar (Elevated cool surface) */
+	--sidebar: oklch(1 0 0);
+	--sidebar-foreground: oklch(0.16 0.035 225);
+	--sidebar-primary: oklch(0.62 0.18 210);
+	--sidebar-primary-foreground: oklch(1 0 0);
+	--sidebar-accent: oklch(0.93 0.01 210);
+	--sidebar-accent-foreground: oklch(0.16 0.035 225);
+	--sidebar-border: oklch(0.88 0.008 210);
+
+	/* Banners */
+	--banner-info: oklch(0.94 0.02 210);
+	--banner-info-foreground: oklch(0.24 0.09 210);
+	--banner-info-border: oklch(0.52 0.18 210);
+	--banner-note: oklch(0.94 0.02 162);
+	--banner-note-foreground: oklch(0.24 0.1 162);
+	--banner-note-border: oklch(0.48 0.16 162);
+	--banner-warning: oklch(0.95 0.04 78);
+	--banner-warning-foreground: oklch(0.34 0.13 62);
+	--banner-warning-border: oklch(0.62 0.18 72);
+	--banner-alert: oklch(0.95 0.03 22);
+	--banner-alert-foreground: oklch(0.34 0.14 22);
+	--banner-alert-border: oklch(0.52 0.2 22);
+
+	/* Interactive Elements */
+	--badge-success: oklch(0.35 0.1 160);
+	--badge-success-foreground: oklch(0.98 0.01 160);
+	--checkbox-checked: oklch(0.62 0.18 210);
+	--checkbox-checked-foreground: oklch(1 0 0);
+	--checkbox-unchecked-bg: oklch(1 0 0);
+	--checkbox-unchecked-border: oklch(0.85 0.01 210);
+}
+
+[data-theme="canopy"].dark {
+	/* --- Dark Theme (Deep Slate & Sky Glow) --- */
+	--background: oklch(0.14 0.03 240);
+	--foreground: oklch(0.95 0.005 210);
+
+	/* Brand palette — dark */
+	--color-canopy: #020617;
+	--color-hive: #38bdf8;
+	--color-parchment: #0f172a;
+
+	/* Chart palette — dark */
+	--chart-1: oklch(0.72 0.2 142);
+	--chart-2: oklch(0.78 0.18 72);
+	--chart-3: oklch(0.75 0.2 38);
+	--chart-4: oklch(0.65 0.22 25);
+	--chart-5: oklch(0.65 0.22 264);
+	--chart-6: oklch(0.63 0.22 290);
+	--chart-7: oklch(0.7 0.2 314);
+	--chart-8: oklch(0.7 0.2 340);
+
+	/* Card Elevation */
+	--card: oklch(0.19 0.035 235 / 0.75);
+	--card-foreground: oklch(0.95 0.005 210);
+
+	--popover: oklch(0.17 0.03 240);
+	--popover-foreground: oklch(0.95 0.005 210);
+
+	/* Primary: Bright Sky Glow */
+	--primary: oklch(0.72 0.18 210);
+	--primary-foreground: oklch(0.14 0.03 240);
+
+	--secondary: oklch(0.24 0.035 235);
+	--secondary-foreground: oklch(0.72 0.18 210);
+
+	--muted: oklch(0.24 0.035 235);
+	--muted-foreground: oklch(0.65 0.015 210);
+
+	--accent: oklch(0.24 0.035 235);
+	--accent-foreground: oklch(0.72 0.18 210);
+
+	--destructive: oklch(0.45 0.15 25);
+	--destructive-foreground: oklch(0.95 0.005 210);
+
+	--border: oklch(0.28 0.035 235);
+	--input: oklch(0.28 0.035 235);
+	--ring: oklch(0.72 0.18 210 / 0.3);
+
+	/* Sidebar (Deep Slate) */
+	--sidebar: oklch(0.19 0.035 235);
+	--sidebar-foreground: oklch(0.95 0.005 210);
+	--sidebar-primary: oklch(0.72 0.18 210);
+	--sidebar-primary-foreground: oklch(0.14 0.03 240);
+	--sidebar-accent: oklch(0.24 0.035 235);
+	--sidebar-accent-foreground: oklch(0.95 0.005 210);
+	--sidebar-border: oklch(0.28 0.035 235);
+
+	/* Banners (Dark) */
+	--banner-info: oklch(0.22 0.04 220);
+	--banner-info-foreground: oklch(0.88 0.05 220);
+	--banner-info-border: oklch(0.48 0.16 220);
+	--banner-note: oklch(0.22 0.05 155);
+	--banner-note-foreground: oklch(0.88 0.06 155);
+	--banner-note-border: oklch(0.5 0.12 155);
+	--banner-warning: oklch(0.26 0.06 70);
+	--banner-warning-foreground: oklch(0.92 0.1 80);
+	--banner-warning-border: oklch(0.65 0.2 75);
+	--banner-alert: oklch(0.23 0.05 25);
+	--banner-alert-foreground: oklch(0.9 0.06 25);
+	--banner-alert-border: oklch(0.44 0.14 25);
+
+	/* Interactive Elements (Dark) */
+	--badge-success: oklch(0.48 0.15 150);
+	--badge-success-foreground: oklch(1 0 0);
+	--checkbox-checked: oklch(0.72 0.18 210);
+	--checkbox-checked-foreground: oklch(0.14 0.03 240);
+	--checkbox-unchecked-bg: oklch(0.22 0.01 235);
+	--checkbox-unchecked-border: oklch(0.38 0.01 235);
+}

package/src/themes/dusk.css

@@ -0,0 +1,158 @@
+[data-theme="dusk"] {
+	/* --- Light Theme (Creative, Sophisticated - Pale Lavender) --- */
+	--background: oklch(0.965 0.015 295);
+	--foreground: oklch(0.2 0.02 295);
+
+	/* Brand palette */
+	--color-canopy: oklch(0.16 0.04 285);
+	--color-hive: oklch(0.62 0.2 285);
+	--color-parchment: oklch(0.975 0.006 285);
+
+	/* Chart palette */
+	--chart-1: oklch(0.65 0.18 142);
+	--chart-2: oklch(0.72 0.17 72);
+	--chart-3: oklch(0.69 0.19 38);
+	--chart-4: oklch(0.55 0.2 25);
+	--chart-5: oklch(0.57 0.22 264);
+	--chart-6: oklch(0.55 0.22 290);
+	--chart-7: oklch(0.62 0.2 314);
+	--chart-8: oklch(0.62 0.2 340);
+
+	/* Surfaces */
+	--card: oklch(0.99 0.004 295 / 0.85);
+	--card-foreground: oklch(0.2 0.02 295);
+
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.2 0.02 295);
+
+	/* Primary: Deep Violet */
+	--primary: oklch(0.3 0.06 295);
+	--primary-foreground: oklch(0.98 0.005 295);
+
+	/* Button/Surface Colors */
+	--secondary: oklch(0.97 0.005 295);
+	--secondary-foreground: oklch(0.3 0.06 295);
+
+	--muted: oklch(0.94 0.005 295);
+	--muted-foreground: oklch(0.52 0.02 295);
+
+	--accent: oklch(0.92 0.008 295);
+	--accent-foreground: oklch(0.3 0.06 295);
+
+	--destructive: oklch(0.55 0.15 25);
+	--destructive-foreground: oklch(1 0 0);
+
+	--border: oklch(0.89 0.006 295);
+	--input: oklch(0.89 0.006 295);
+	--ring: oklch(0.3 0.06 295 / 0.15);
+
+	/* Sidebar (Soft Lavender) */
+	--sidebar: oklch(0.99 0.004 295);
+	--sidebar-foreground: oklch(0.25 0.02 295);
+	--sidebar-primary: oklch(0.3 0.06 295);
+	--sidebar-primary-foreground: oklch(0.98 0.005 295);
+	--sidebar-accent: oklch(0.93 0.008 295);
+	--sidebar-accent-foreground: oklch(0.25 0.02 295);
+	--sidebar-border: oklch(0.91 0.006 295);
+
+	/* Banners */
+	--banner-info: oklch(0.94 0.02 245);
+	--banner-info-foreground: oklch(0.24 0.09 245);
+	--banner-info-border: oklch(0.52 0.18 245);
+	--banner-note: oklch(0.94 0.02 295);
+	--banner-note-foreground: oklch(0.24 0.1 295);
+	--banner-note-border: oklch(0.48 0.16 295);
+	--banner-warning: oklch(0.95 0.04 78);
+	--banner-warning-foreground: oklch(0.34 0.13 62);
+	--banner-warning-border: oklch(0.62 0.18 72);
+	--banner-alert: oklch(0.95 0.03 22);
+	--banner-alert-foreground: oklch(0.34 0.14 22);
+	--banner-alert-border: oklch(0.52 0.2 22);
+
+	/* Interactive Elements */
+	--badge-success: oklch(0.35 0.1 160);
+	--badge-success-foreground: oklch(0.98 0.01 160);
+	--checkbox-checked: oklch(0.3 0.06 295);
+	--checkbox-checked-foreground: oklch(1 0 0);
+	--checkbox-unchecked-bg: oklch(1 0 0);
+	--checkbox-unchecked-border: oklch(0.86 0.008 295);
+}
+
+[data-theme="dusk"].dark {
+	/* --- Dark Theme (Amethyst with Bright Purple Glow) --- */
+	--background: oklch(0.17 0.02 305);
+	--foreground: oklch(0.95 0.005 310);
+
+	/* Brand palette — dark */
+	--color-canopy: oklch(0.09 0.02 305);
+	--color-hive: oklch(0.78 0.2 305);
+	--color-parchment: oklch(0.17 0.018 305);
+
+	/* Chart palette — dark */
+	--chart-1: oklch(0.72 0.2 142);
+	--chart-2: oklch(0.78 0.18 72);
+	--chart-3: oklch(0.75 0.2 38);
+	--chart-4: oklch(0.65 0.22 25);
+	--chart-5: oklch(0.65 0.22 264);
+	--chart-6: oklch(0.63 0.22 290);
+	--chart-7: oklch(0.7 0.2 314);
+	--chart-8: oklch(0.7 0.2 340);
+
+	/* Card Elevation */
+	--card: oklch(0.22 0.025 305 / 0.75);
+	--card-foreground: oklch(0.95 0.005 310);
+
+	--popover: oklch(0.20 0.02 305);
+	--popover-foreground: oklch(0.95 0.005 310);
+
+	/* Primary: Bright Purple Glow */
+	--primary: oklch(0.88 0.1 305);
+	--primary-foreground: oklch(0.17 0.02 305);
+
+	--secondary: oklch(0.27 0.025 305);
+	--secondary-foreground: oklch(0.88 0.1 305);
+
+	--muted: oklch(0.27 0.025 305);
+	--muted-foreground: oklch(0.68 0.015 305);
+
+	--accent: oklch(0.27 0.025 305);
+	--accent-foreground: oklch(0.88 0.1 305);
+
+	--destructive: oklch(0.45 0.15 25);
+	--destructive-foreground: oklch(0.95 0.005 310);
+
+	--border: oklch(0.31 0.025 305);
+	--input: oklch(0.31 0.025 305);
+	--ring: oklch(0.88 0.1 305 / 0.3);
+
+	/* Sidebar (Amethyst) */
+	--sidebar: oklch(0.22 0.025 305);
+	--sidebar-foreground: oklch(0.95 0.005 310);
+	--sidebar-primary: oklch(0.88 0.1 305);
+	--sidebar-primary-foreground: oklch(0.17 0.02 305);
+	--sidebar-accent: oklch(0.27 0.025 305);
+	--sidebar-accent-foreground: oklch(0.95 0.005 310);
+	--sidebar-border: oklch(0.31 0.025 305);
+
+	/* Banners (Dark) */
+	--banner-info: oklch(0.22 0.04 260);
+	--banner-info-foreground: oklch(0.88 0.05 260);
+	--banner-info-border: oklch(0.48 0.16 260);
+	--banner-note: oklch(0.22 0.05 295);
+	--banner-note-foreground: oklch(0.88 0.06 295);
+	--banner-note-border: oklch(0.5 0.12 295);
+	--banner-warning: oklch(0.26 0.06 70);
+	--banner-warning-foreground: oklch(0.92 0.1 80);
+	--banner-warning-border: oklch(0.65 0.2 75);
+	--banner-alert: oklch(0.23 0.05 25);
+	--banner-alert-foreground: oklch(0.9 0.06 25);
+	--banner-alert-border: oklch(0.44 0.14 25);
+
+	/* Interactive Elements (Dark) */
+	--badge-success: oklch(0.48 0.15 150);
+	--badge-success-foreground: oklch(1 0 0);
+	--checkbox-checked: oklch(0.88 0.08 295);
+	--checkbox-checked-foreground: oklch(0.17 0.015 280);
+	--checkbox-unchecked-bg: oklch(0.24 0.01 280);
+	--checkbox-unchecked-border: oklch(0.38 0.01 280);
+}