@abumble/design-system 0.0.37 → 0.0.39

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@abumble/design-system",
-	"version": "0.0.37",
+	"version": "0.0.39",
 	"files": [
 		"dist",
 		"src/styles.css",
@@ -11,141 +11,9 @@
 			"import": "./dist/index.js",
 			"types": "./dist/index.d.ts"
 		},
-		"./components/Banner": {
-			"import": "./dist/components/Banner.js",
-			"types": "./dist/components/Banner/Banner.d.ts"
-		},
-		"./components/Breadcrumb": {
-			"import": "./dist/components/Breadcrumb.js",
-			"types": "./dist/components/Breadcrumb/Breadcrumb.d.ts"
-		},
-		"./components/Button": {
-			"import": "./dist/components/Button.js",
-			"types": "./dist/components/Button/Button.d.ts"
-		},
-		"./components/Card": {
-			"import": "./dist/components/Card.js",
-			"types": "./dist/components/Card/Card.d.ts"
-		},
-		"./components/Carousel": {
-			"import": "./dist/components/Carousel.js",
-			"types": "./dist/components/Carousel/Carousel.d.ts"
-		},
-		"./components/CodeDisplay": {
-			"import": "./dist/components/CodeDisplay.js",
-			"types": "./dist/components/CodeDisplay/CodeDisplay.d.ts"
-		},
-		"./components/Collapsible": {
-			"import": "./dist/components/Collapsible.js",
-			"types": "./dist/components/Collapsible/Collapsible.d.ts"
-		},
-		"./components/ContextMenu": {
-			"import": "./dist/components/ContextMenu.js",
-			"types": "./dist/components/ContextMenu/ContextMenu.d.ts"
-		},
-		"./components/Empty": {
-			"import": "./dist/components/Empty.js",
-			"types": "./dist/components/Empty/Empty.d.ts"
-		},
-		"./components/Input": {
-			"import": "./dist/components/Input.js",
-			"types": "./dist/components/Input/Input.d.ts"
-		},
-		"./components/List": {
-			"import": "./dist/components/List.js",
-			"types": "./dist/components/List/List.d.ts"
-		},
-		"./components/NotFound": {
-			"import": "./dist/components/NotFound.js",
-			"types": "./dist/components/NotFound/NotFound.d.ts"
-		},
-		"./components/Popover": {
-			"import": "./dist/components/Popover.js",
-			"types": "./dist/components/Popover/Popover.d.ts"
-		},
-		"./components/Separator": {
-			"import": "./dist/components/Separator.js",
-			"types": "./dist/components/Separator/Separator.d.ts"
-		},
-		"./components/Sheet": {
-			"import": "./dist/components/Sheet.js",
-			"types": "./dist/components/Sheet/Sheet.d.ts"
-		},
-		"./components/Sidebar": {
-			"import": "./dist/components/Sidebar.js",
-			"types": "./dist/components/Sidebar/Sidebar.d.ts"
-		},
-		"./components/Skeleton": {
-			"import": "./dist/components/Skeleton.js",
-			"types": "./dist/components/Skeleton/Skeleton.d.ts"
-		},
-		"./components/Tooltip": {
-			"import": "./dist/components/Tooltip.js",
-			"types": "./dist/components/Tooltip/Tooltip.d.ts"
-		},
-		"./components/UnderConstruction": {
-			"import": "./dist/components/UnderConstruction.js",
-			"types": "./dist/components/UnderConstruction/UnderConstruction.d.ts"
-		},
-		"./components/Badge": {
-			"import": "./dist/components/Badge.js",
-			"types": "./dist/components/Badge/Badge.d.ts"
-		},
-		"./components/Label": {
-			"import": "./dist/components/Label.js",
-			"types": "./dist/components/Label/Label.d.ts"
-		},
-		"./components/Checkbox": {
-			"import": "./dist/components/Checkbox.js",
-			"types": "./dist/components/Checkbox/Checkbox.d.ts"
-		},
-		"./components/Select": {
-			"import": "./dist/components/Select.js",
-			"types": "./dist/components/Select/Select.d.ts"
-		},
-		"./components/Textarea": {
-			"import": "./dist/components/Textarea.js",
-			"types": "./dist/components/Textarea/Textarea.d.ts"
-		},
-		"./components/Table": {
-			"import": "./dist/components/Table.js",
-			"types": "./dist/components/Table/Table.d.ts"
-		},
-		"./components/PageHeader": {
-			"import": "./dist/components/PageHeader.js",
-			"types": "./dist/components/PageHeader/PageHeader.d.ts"
-		},
-		"./components/Dialog": {
-			"import": "./dist/components/Dialog.js",
-			"types": "./dist/components/Dialog/Dialog.d.ts"
-		},
-		"./components/FieldsTable": {
-			"import": "./dist/components/FieldsTable.js",
-			"types": "./dist/components/FieldsTable/FieldsTable.d.ts"
-		},
-		"./components/ConfirmDeleteDialog": {
-			"import": "./dist/components/ConfirmDeleteDialog.js",
-			"types": "./dist/components/ConfirmDeleteDialog/ConfirmDeleteDialog.d.ts"
-		},
-		"./components/ActionsPopover": {
-			"import": "./dist/components/ActionsPopover.js",
-			"types": "./dist/components/ActionsPopover/ActionsPopover.d.ts"
-		},
-		"./components/BackLink": {
-			"import": "./dist/components/BackLink.js",
-			"types": "./dist/components/BackLink/BackLink.d.ts"
-		},
-		"./components/BannerHeader": {
-			"import": "./dist/components/BannerHeader.js",
-			"types": "./dist/components/BannerHeader/BannerHeader.d.ts"
-		},
-		"./components/DelayedLoadingFallback": {
-			"import": "./dist/components/DelayedLoadingFallback.js",
-			"types": "./dist/components/DelayedLoadingFallback/DelayedLoadingFallback.d.ts"
-		},
-		"./components/Toaster": {
-			"import": "./dist/components/Toaster.js",
-			"types": "./dist/components/Toaster/Toaster.d.ts"
+		"./components/*": {
+			"import": "./dist/components/*.js",
+			"types": "./dist/components/*/index.d.ts"
 		},
 		"./hooks/use-delayed-loading": {
 			"import": "./dist/use-delayed-loading.js",
@@ -168,6 +36,10 @@
 			"types": "./dist/hooks/use-mobile.d.ts"
 		},
 		"./styles.css": "./src/styles.css",
+		"./themes": {
+			"import": "./dist/themes.js",
+			"types": "./dist/themes/index.d.ts"
+		},
 		"./themes/linen.css": "./src/themes/linen.css",
 		"./themes/steel.css": "./src/themes/steel.css"
 	},
@@ -187,7 +59,7 @@
 		"tw-animate-css": "^1.3.6"
 	},
 	"devDependencies": {
-		"@chromatic-com/storybook": "^4.1.2",
+		"@chromatic-com/storybook": "^5.0.1",
 		"@eslint/js": "^9.39.1",
 		"@radix-ui/react-collapsible": "^1.1.12",
 		"@radix-ui/react-context-menu": "^2.2.16",
@@ -196,11 +68,11 @@
 		"@radix-ui/react-separator": "^1.1.7",
 		"@radix-ui/react-slot": "^1.2.3",
 		"@radix-ui/react-tooltip": "^1.2.8",
-		"@storybook/addon-a11y": "10.2.8",
-		"@storybook/addon-docs": "10.2.8",
-		"@storybook/addon-onboarding": "10.2.8",
-		"@storybook/addon-vitest": "10.2.8",
-		"@storybook/react-vite": "10.2.8",
+		"@storybook/addon-a11y": "10.2.17",
+		"@storybook/addon-docs": "10.2.17",
+		"@storybook/addon-onboarding": "10.2.17",
+		"@storybook/addon-vitest": "10.2.17",
+		"@storybook/react-vite": "10.2.17",
 		"@tailwindcss/vite": "^4.0.6",
 		"@types/node": "^24.10.0",
 		"@types/react": "^19.2.2",
@@ -216,7 +88,7 @@
 		"eslint": "^9.39.1",
 		"eslint-plugin-react-hooks": "^7.0.1",
 		"eslint-plugin-react-refresh": "^0.4.24",
-		"eslint-plugin-storybook": "10.2.8",
+		"eslint-plugin-storybook": "10.2.17",
 		"globals": "^16.5.0",
 		"lucide-react": "^0.544.0",
 		"playwright": "^1.56.1",
@@ -225,7 +97,7 @@
 		"react": "^19.2.0",
 		"react-dom": "^19.2.0",
 		"rimraf": "^6.1.2",
-		"storybook": "10.2.8",
+		"storybook": "10.2.17",
 		"tailwind-merge": "^3.0.2",
 		"tailwindcss": "^4.1.17",
 		"typescript": "~5.9.3",

package/src/themes/ThemeContext.ts

@@ -0,0 +1,12 @@
+import { createContext } from 'react'
+import type { ColorTheme, Theme } from './ThemeProvider'
+
+export interface ThemeContextValue {
+	theme: Theme
+	setTheme: (theme: Theme) => void
+	effectiveTheme: 'light' | 'dark'
+	colorTheme: ColorTheme
+	setColorTheme: (colorTheme: ColorTheme) => void
+}
+
+export const ThemeContext = createContext<ThemeContextValue | null>(null)

package/src/themes/ThemeProvider.tsx

@@ -0,0 +1,86 @@
+import type { ReactNode } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { ThemeContext } from './ThemeContext'
+import './linen.css'
+import './steel.css'
+
+export type Theme = 'light' | 'dark' | 'system'
+export type ColorTheme = 'linen' | 'steel'
+
+const STORAGE_KEY = 'theme'
+const COLOR_THEME_STORAGE_KEY = 'color-theme'
+
+function getStoredTheme(): Theme {
+	if (typeof window === 'undefined') return 'system'
+	const stored = localStorage.getItem(STORAGE_KEY)
+	if (stored === 'light' || stored === 'dark' || stored === 'system')
+		return stored
+	return 'dark'
+}
+
+function getStoredColorTheme(): ColorTheme {
+	if (typeof window === 'undefined') return 'linen'
+	const stored = localStorage.getItem(COLOR_THEME_STORAGE_KEY)
+	if (stored === 'linen' || stored === 'steel') return stored
+	return 'linen'
+}
+
+function applyTheme(effective: 'light' | 'dark') {
+	const root = document.documentElement
+	if (effective === 'dark') {
+		root.classList.add('dark')
+	} else {
+		root.classList.remove('dark')
+	}
+}
+
+function applyColorTheme(colorTheme: ColorTheme) {
+	document.documentElement.setAttribute('data-theme', colorTheme)
+}
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+	const [theme, setThemeState] = useState<Theme>(getStoredTheme)
+	const [colorTheme, setColorThemeState] =
+		useState<ColorTheme>(getStoredColorTheme)
+	const [systemDark, setSystemDark] = useState(
+		() => window.matchMedia('(prefers-color-scheme: dark)').matches,
+	)
+
+	const effectiveTheme: 'light' | 'dark' =
+		theme === 'system' ? (systemDark ? 'dark' : 'light') : theme
+
+	useEffect(() => {
+		applyTheme(effectiveTheme)
+	}, [effectiveTheme])
+
+	useEffect(() => {
+		applyColorTheme(colorTheme)
+	}, [colorTheme])
+
+	useEffect(() => {
+		if (theme !== 'system') return
+		const media = window.matchMedia('(prefers-color-scheme: dark)')
+		const handler = () => setSystemDark(media.matches)
+		media.addEventListener('change', handler)
+		return () => media.removeEventListener('change', handler)
+	}, [theme])
+
+	const setTheme = useCallback((next: Theme) => {
+		setThemeState(next)
+		localStorage.setItem(STORAGE_KEY, next)
+	}, [])
+
+	const setColorTheme = useCallback((next: ColorTheme) => {
+		setColorThemeState(next)
+		localStorage.setItem(COLOR_THEME_STORAGE_KEY, next)
+	}, [])
+
+	const value = useMemo(
+		() => ({ theme, setTheme, effectiveTheme, colorTheme, setColorTheme }),
+		[theme, setTheme, effectiveTheme, colorTheme, setColorTheme],
+	)
+
+	return (
+		<ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+	)
+}

package/src/themes/index.ts

@@ -0,0 +1,2 @@
+export { ThemeProvider, type Theme, type ColorTheme } from './ThemeProvider'
+export { useTheme } from './useTheme'

package/src/themes/linen.css

@@ -65,6 +65,73 @@
 	--checkbox-unchecked-border: oklch(0.88 0.01 60);
 }
 
+[data-theme="linen"] {
+	/* --- Light Theme (Linen & Slate - Minimal Warmth) --- */
+	--background: oklch(0.992 0.003 85);
+	--foreground: oklch(0.2 0.01 85);
+
+	/* Surfaces (Tables, Cards, Buttons) - Frosted White */
+	--card: oklch(1 0 0 / 0.75);
+	--card-foreground: oklch(0.2 0.01 85);
+
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.2 0.01 85);
+
+	/* Primary: Deep Warm Charcoal (Neutral & High Contrast) */
+	--primary: oklch(0.18 0.01 85);
+	--primary-foreground: oklch(1 0 0);
+
+	/* Button/Surface Colors: Pure White */
+	--secondary: oklch(1 0 0);
+	--secondary-foreground: oklch(0.18 0.01 85);
+
+	--muted: oklch(1 0 0);
+	--muted-foreground: oklch(0.5 0.01 85);
+
+	--accent: oklch(1 0 0);
+	--accent-foreground: oklch(0.18 0.01 85);
+
+	--destructive: oklch(0.55 0.15 25);
+	--destructive-foreground: oklch(1 0 0);
+
+	--border: oklch(0.94 0.005 85);
+	--input: oklch(0.94 0.005 85);
+	--ring: oklch(0.18 0.01 85 / 0.1);
+
+	--radius: 0.6rem;
+
+	/* Sidebar (Soft White) */
+	--sidebar: oklch(0.995 0.002 85);
+	--sidebar-foreground: oklch(0.2 0.01 85);
+	--sidebar-primary: oklch(0.18 0.01 85);
+	--sidebar-primary-foreground: oklch(1 0 0);
+	--sidebar-accent: oklch(0.97 0.01 85);
+	--sidebar-accent-foreground: oklch(0.18 0.01 85);
+	--sidebar-border: oklch(0.95 0.005 85);
+
+	/* Banners */
+	--banner-info: oklch(0.94 0.02 240);
+	--banner-info-foreground: oklch(0.4 0.1 240);
+	--banner-info-border: oklch(0.85 0.05 240);
+	--banner-note: oklch(0.94 0.02 160);
+	--banner-note-foreground: oklch(0.35 0.1 160);
+	--banner-note-border: oklch(0.85 0.05 160);
+	--banner-warning: oklch(0.95 0.03 80);
+	--banner-warning-foreground: oklch(0.45 0.1 60);
+	--banner-warning-border: oklch(0.88 0.05 70);
+	--banner-alert: oklch(0.95 0.03 25);
+	--banner-alert-foreground: oklch(0.45 0.12 25);
+	--banner-alert-border: oklch(0.88 0.08 25);
+
+	/* Interactive Elements */
+	--badge-success: oklch(0.4 0.1 160);
+	--badge-success-foreground: oklch(1 0 0);
+	--checkbox-checked: oklch(0.15 0.01 60);
+	--checkbox-checked-foreground: oklch(1 0 0);
+	--checkbox-unchecked-bg: oklch(1 0 0);
+	--checkbox-unchecked-border: oklch(0.88 0.01 60);
+}
+
 .dark {
 	/* --- Dark Theme (Warm Charcoal - Candlelit) --- */
 	--background: oklch(0.14 0.01 80);
@@ -128,3 +195,67 @@
 	--checkbox-unchecked-bg: oklch(0.22 0.01 80);
 	--checkbox-unchecked-border: oklch(0.35 0.01 80);
 }
+
+[data-theme="linen"].dark {
+	/* --- Dark Theme (Warm Charcoal - Candlelit) --- */
+	--background: oklch(0.14 0.01 80);
+	--foreground: oklch(0.93 0.01 85);
+
+	/* Card Elevation: Warm lifted surface */
+	--card: oklch(0.19 0.012 80 / 0.75);
+	--card-foreground: oklch(0.93 0.01 85);
+
+	--popover: oklch(0.17 0.01 80);
+	--popover-foreground: oklch(0.93 0.01 85);
+
+	/* Primary: Warm Sand/Cream */
+	--primary: oklch(0.86 0.05 85);
+	--primary-foreground: oklch(0.14 0.01 80);
+
+	--secondary: oklch(0.24 0.01 80);
+	--secondary-foreground: oklch(0.86 0.05 85);
+
+	--muted: oklch(0.24 0.01 80);
+	--muted-foreground: oklch(0.60 0.01 85);
+
+	--accent: oklch(0.24 0.01 80);
+	--accent-foreground: oklch(0.86 0.05 85);
+
+	--destructive: oklch(0.48 0.15 25);
+	--destructive-foreground: oklch(0.93 0.01 85);
+
+	--border: oklch(0.28 0.01 80);
+	--input: oklch(0.28 0.01 80);
+	--ring: oklch(0.86 0.05 85 / 0.3);
+
+	/* Sidebar (Warm Dark) */
+	--sidebar: oklch(0.17 0.01 80);
+	--sidebar-foreground: oklch(0.93 0.01 85);
+	--sidebar-primary: oklch(0.86 0.05 85);
+	--sidebar-primary-foreground: oklch(0.14 0.01 80);
+	--sidebar-accent: oklch(0.23 0.01 80);
+	--sidebar-accent-foreground: oklch(0.93 0.01 85);
+	--sidebar-border: oklch(0.28 0.01 80);
+
+	/* Banners (Warm Dark) */
+	--banner-info: oklch(0.22 0.04 230);
+	--banner-info-foreground: oklch(0.88 0.05 230);
+	--banner-info-border: oklch(0.48 0.16 235);
+	--banner-note: oklch(0.22 0.04 155);
+	--banner-note-foreground: oklch(0.88 0.06 155);
+	--banner-note-border: oklch(0.44 0.1 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 (Warm Dark) */
+	--badge-success: oklch(0.44 0.12 150);
+	--badge-success-foreground: oklch(0.93 0.01 85);
+	--checkbox-checked: oklch(0.86 0.05 85);
+	--checkbox-checked-foreground: oklch(0.14 0.01 80);
+	--checkbox-unchecked-bg: oklch(0.22 0.01 80);
+	--checkbox-unchecked-border: oklch(0.35 0.01 80);
+}

package/src/themes/steel.css

@@ -65,6 +65,73 @@
 	--checkbox-unchecked-border: oklch(0.85 0.01 250);
 }
 
+[data-theme="steel"] {
+	/* --- Light Theme (Metallic & Industrial - Brushed Steel) --- */
+	--background: oklch(0.95 0.005 250);
+	--foreground: oklch(0.2 0.02 250);
+
+	/* Surfaces - Aluminum Finish */
+	--card: oklch(0.98 0.005 250 / 0.85);
+	--card-foreground: oklch(0.2 0.02 250);
+
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.2 0.02 250);
+
+	/* Primary: Industrial Blue */
+	--primary: oklch(0.3 0.05 250);
+	--primary-foreground: oklch(0.98 0.005 250);
+
+	/* Button/Surface Colors: Silver */
+	--secondary: oklch(0.97 0.005 250);
+	--secondary-foreground: oklch(0.3 0.05 250);
+
+	--muted: oklch(0.93 0.005 250);
+	--muted-foreground: oklch(0.5 0.02 250);
+
+	--accent: oklch(0.91 0.008 250);
+	--accent-foreground: oklch(0.3 0.05 250);
+
+	--destructive: oklch(0.55 0.15 25);
+	--destructive-foreground: oklch(1 0 0);
+
+	--border: oklch(0.88 0.005 250);
+	--input: oklch(0.88 0.005 250);
+	--ring: oklch(0.3 0.05 250 / 0.15);
+
+	--radius: 0.25rem; /* Sharper for robotic feel */
+
+	/* Sidebar (Cold Slate) */
+	--sidebar: oklch(0.97 0.005 250);
+	--sidebar-foreground: oklch(0.25 0.02 250);
+	--sidebar-primary: oklch(0.3 0.05 250);
+	--sidebar-primary-foreground: oklch(0.98 0.005 250);
+	--sidebar-accent: oklch(0.93 0.008 250);
+	--sidebar-accent-foreground: oklch(0.25 0.02 250);
+	--sidebar-border: oklch(0.9 0.005 250);
+
+	/* Banners (Metallic & Industrial) */
+	--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 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.3 0.05 250);
+	--checkbox-checked-foreground: oklch(1 0 0);
+	--checkbox-unchecked-bg: oklch(1 0 0);
+	--checkbox-unchecked-border: oklch(0.85 0.01 250);
+}
+
 .dark {
 	/* --- Dark Theme (Modern Slate & Glow) --- */
 	--background: oklch(0.18 0.015 260);
@@ -128,3 +195,67 @@
 	--checkbox-unchecked-bg: oklch(0.25 0.01 260);
 	--checkbox-unchecked-border: oklch(0.4 0.01 260);
 }
+
+[data-theme="steel"].dark {
+	/* --- Dark Theme (Modern Slate & Glow) --- */
+	--background: oklch(0.18 0.015 260);
+	--foreground: oklch(0.985 0 0);
+
+	/* Card Elevation: Brighter than background */
+	--card: oklch(0.23 0.02 260 / 0.75);
+	--card-foreground: oklch(0.985 0 0);
+
+	--popover: oklch(0.21 0.015 260);
+	--popover-foreground: oklch(0.985 0 0);
+
+	/* Primary: Electric Cyan Glow */
+	--primary: oklch(0.9 0.1 220);
+	--primary-foreground: oklch(0.18 0.015 260);
+
+	--secondary: oklch(0.28 0.02 260);
+	--secondary-foreground: oklch(0.9 0.1 220);
+
+	--muted: oklch(0.28 0.02 260);
+	--muted-foreground: oklch(0.705 0.015 260);
+
+	--accent: oklch(0.28 0.02 260);
+	--accent-foreground: oklch(0.9 0.1 220);
+
+	--destructive: oklch(0.45 0.15 25);
+	--destructive-foreground: oklch(0.985 0 0);
+
+	--border: oklch(0.32 0.02 260);
+	--input: oklch(0.32 0.02 260);
+	--ring: oklch(0.9 0.1 220 / 0.3);
+
+	/* Sidebar (Dark) */
+	--sidebar: oklch(0.21 0.015 260);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.9 0.1 220);
+	--sidebar-primary-foreground: oklch(0.18 0.015 260);
+	--sidebar-accent: oklch(0.28 0.02 260);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(0.32 0.02 260);
+
+	/* Banners (Dark - Desaturated) */
+	--banner-info: oklch(0.274 0.079 260);
+	--banner-info-foreground: oklch(0.925 0.033 260);
+	--banner-info-border: oklch(0.488 0.2 260);
+	--banner-note: oklch(0.266 0.065 152);
+	--banner-note-foreground: oklch(0.962 0.044 156);
+	--banner-note-border: oklch(0.45 0.1 152);
+	--banner-warning: oklch(0.55 0.22 100);
+	--banner-warning-foreground: oklch(0.99 0.15 102);
+	--banner-warning-border: oklch(0.75 0.25 100);
+	--banner-alert: oklch(0.293 0.084 27);
+	--banner-alert-foreground: oklch(0.969 0.071 27);
+	--banner-alert-border: oklch(0.45 0.12 27);
+
+	/* Interactive Elements (Dark) */
+	--badge-success: oklch(0.48 0.15 150);
+	--badge-success-foreground: oklch(1 0 0);
+	--checkbox-checked: oklch(0.9 0.1 220);
+	--checkbox-checked-foreground: oklch(0.18 0.015 260);
+	--checkbox-unchecked-bg: oklch(0.25 0.01 260);
+	--checkbox-unchecked-border: oklch(0.4 0.01 260);
+}

package/src/themes/theme.tsx

@@ -0,0 +1,3 @@
+// This file has been reorganized.
+// ThemeProvider, useTheme, Theme  →  ./ThemeProvider  (exported via @abumble/design-system/themes)
+// ThemeToggle                     →  src/components/ThemeToggle  (exported via @abumble/design-system/components/ThemeToggle)

package/src/themes/useTheme.ts

@@ -0,0 +1,8 @@
+import { useContext } from 'react'
+import { ThemeContext } from './ThemeContext'
+
+export function useTheme() {
+	const ctx = useContext(ThemeContext)
+	if (!ctx) throw new Error('useTheme must be used within ThemeProvider')
+	return ctx
+}