@abumble/design-system 0.0.46 → 0.0.48

package/src/themes/linen.css

@@ -1,8 +1,23 @@
 :root {
 	/* --- Light Theme (Linen & Slate - Minimal Warmth) --- */
-	--background: oklch(0.992 0.003 85);
+	--background: oklch(0.992 0.008 85);
 	--foreground: oklch(0.2 0.01 85);
 
+	/* Brand palette */
+	--color-canopy: oklch(0.16 0.015 85);
+	--color-hive: oklch(0.68 0.18 75);
+	--color-parchment: oklch(0.975 0.006 85);
+
+	/* Chart palette — semantic (portfolio health) + categorical (unit mix) */
+	--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 (Tables, Cards, Buttons) - Frosted White */
 	--card: oklch(1 0 0 / 0.75);
 	--card-foreground: oklch(0.2 0.01 85);
@@ -10,36 +25,34 @@
 	--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: Warm Amber */
+	--primary: oklch(0.58 0.18 70);
 	--primary-foreground: oklch(1 0 0);
 
 	/* Button/Surface Colors: Pure White */
 	--secondary: oklch(1 0 0);
-	--secondary-foreground: oklch(0.18 0.01 85);
+	--secondary-foreground: oklch(0.58 0.18 70);
 
 	--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);
+	--accent: oklch(0.97 0.01 85);
+	--accent-foreground: oklch(0.58 0.18 70);
 
-	--destructive: oklch(0.55 0.15 25);
+	--destructive: oklch(0.55 0.19 15);
 	--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;
+	--ring: oklch(0.58 0.18 70 / 0.3);
 
 	/* Sidebar (Soft White) */
-	--sidebar: oklch(0.995 0.002 85);
+	--sidebar: oklch(1 0 0);
 	--sidebar-foreground: oklch(0.2 0.01 85);
-	--sidebar-primary: oklch(0.18 0.01 85);
+	--sidebar-primary: oklch(0.58 0.18 70);
 	--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-accent: oklch(0.96 0.015 75);
+	--sidebar-accent-foreground: oklch(0.35 0.1 70);
 	--sidebar-border: oklch(0.95 0.005 85);
 
 	/* Banners */
@@ -59,7 +72,7 @@
 	/* 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: oklch(0.58 0.18 70);
 	--checkbox-checked-foreground: oklch(1 0 0);
 	--checkbox-unchecked-bg: oklch(1 0 0);
 	--checkbox-unchecked-border: oklch(0.88 0.01 60);
@@ -67,9 +80,24 @@
 
 [data-theme="linen"] {
 	/* --- Light Theme (Linen & Slate - Minimal Warmth) --- */
-	--background: oklch(0.992 0.003 85);
+	--background: oklch(0.992 0.008 85);
 	--foreground: oklch(0.2 0.01 85);
 
+	/* Brand palette */
+	--color-canopy: oklch(0.16 0.015 85);
+	--color-hive: oklch(0.68 0.18 75);
+	--color-parchment: oklch(0.975 0.006 85);
+
+	/* 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 (Tables, Cards, Buttons) - Frosted White */
 	--card: oklch(1 0 0 / 0.75);
 	--card-foreground: oklch(0.2 0.01 85);
@@ -77,36 +105,34 @@
 	--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: Warm Amber */
+	--primary: oklch(0.58 0.18 70);
 	--primary-foreground: oklch(1 0 0);
 
 	/* Button/Surface Colors: Pure White */
 	--secondary: oklch(1 0 0);
-	--secondary-foreground: oklch(0.18 0.01 85);
+	--secondary-foreground: oklch(0.58 0.18 70);
 
 	--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);
+	--accent: oklch(0.97 0.01 85);
+	--accent-foreground: oklch(0.58 0.18 70);
 
-	--destructive: oklch(0.55 0.15 25);
+	--destructive: oklch(0.55 0.19 15);
 	--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;
+	--ring: oklch(0.58 0.18 70 / 0.3);
 
 	/* Sidebar (Soft White) */
-	--sidebar: oklch(0.995 0.002 85);
+	--sidebar: oklch(1 0 0);
 	--sidebar-foreground: oklch(0.2 0.01 85);
-	--sidebar-primary: oklch(0.18 0.01 85);
+	--sidebar-primary: oklch(0.58 0.18 70);
 	--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-accent: oklch(0.96 0.015 75);
+	--sidebar-accent-foreground: oklch(0.35 0.1 70);
 	--sidebar-border: oklch(0.95 0.005 85);
 
 	/* Banners */
@@ -126,7 +152,7 @@
 	/* 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: oklch(0.58 0.18 70);
 	--checkbox-checked-foreground: oklch(1 0 0);
 	--checkbox-unchecked-bg: oklch(1 0 0);
 	--checkbox-unchecked-border: oklch(0.88 0.01 60);
@@ -137,6 +163,21 @@
 	--background: oklch(0.14 0.01 80);
 	--foreground: oklch(0.93 0.01 85);
 
+	/* Brand palette — dark */
+	--color-canopy: oklch(0.09 0.01 85);
+	--color-hive: oklch(0.78 0.18 75);
+	--color-parchment: oklch(0.17 0.012 80);
+
+	/* 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: Warm lifted surface */
 	--card: oklch(0.19 0.012 80 / 0.75);
 	--card-foreground: oklch(0.93 0.01 85);
@@ -165,7 +206,7 @@
 	--ring: oklch(0.86 0.05 85 / 0.3);
 
 	/* Sidebar (Warm Dark) */
-	--sidebar: oklch(0.17 0.01 80);
+	--sidebar: oklch(0.19 0.012 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);

package/src/themes/sage.css

@@ -0,0 +1,158 @@
+[data-theme="sage"] {
+	/* --- Light Theme (Natural, Organic - Pale Sage) --- */
+	--background: oklch(0.965 0.015 145);
+	--foreground: oklch(0.18 0.02 145);
+
+	/* Brand palette */
+	--color-canopy: oklch(0.16 0.04 145);
+	--color-hive: oklch(0.62 0.2 145);
+	--color-parchment: oklch(0.975 0.008 145);
+
+	/* 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 - Frosted with green tint */
+	--card: oklch(0.99 0.004 145 / 0.75);
+	--card-foreground: oklch(0.18 0.02 145);
+
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.18 0.02 145);
+
+	/* Primary: Deep Forest Green */
+	--primary: oklch(0.25 0.06 145);
+	--primary-foreground: oklch(0.97 0.005 145);
+
+	/* Button/Surface Colors */
+	--secondary: oklch(0.97 0.006 145);
+	--secondary-foreground: oklch(0.25 0.06 145);
+
+	--muted: oklch(0.94 0.006 145);
+	--muted-foreground: oklch(0.5 0.02 145);
+
+	--accent: oklch(0.92 0.008 145);
+	--accent-foreground: oklch(0.25 0.06 145);
+
+	--destructive: oklch(0.55 0.15 25);
+	--destructive-foreground: oklch(1 0 0);
+
+	--border: oklch(0.9 0.006 145);
+	--input: oklch(0.9 0.006 145);
+	--ring: oklch(0.25 0.06 145 / 0.15);
+
+	/* Sidebar (Soft Sage) */
+	--sidebar: oklch(0.99 0.004 145);
+	--sidebar-foreground: oklch(0.22 0.02 145);
+	--sidebar-primary: oklch(0.25 0.06 145);
+	--sidebar-primary-foreground: oklch(0.97 0.005 145);
+	--sidebar-accent: oklch(0.93 0.008 145);
+	--sidebar-accent-foreground: oklch(0.22 0.02 145);
+	--sidebar-border: oklch(0.91 0.006 145);
+
+	/* Banners */
+	--banner-info: oklch(0.94 0.02 240);
+	--banner-info-foreground: oklch(0.24 0.09 240);
+	--banner-info-border: oklch(0.52 0.18 240);
+	--banner-note: oklch(0.94 0.02 145);
+	--banner-note-foreground: oklch(0.24 0.1 145);
+	--banner-note-border: oklch(0.48 0.16 145);
+	--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 145);
+	--badge-success-foreground: oklch(0.98 0.01 145);
+	--checkbox-checked: oklch(0.25 0.06 145);
+	--checkbox-checked-foreground: oklch(1 0 0);
+	--checkbox-unchecked-bg: oklch(1 0 0);
+	--checkbox-unchecked-border: oklch(0.87 0.008 145);
+}
+
+[data-theme="sage"].dark {
+	/* --- Dark Theme (Deep Forest with Moss Glow) --- */
+	--background: oklch(0.14 0.015 145);
+	--foreground: oklch(0.93 0.01 145);
+
+	/* Brand palette — dark */
+	--color-canopy: oklch(0.09 0.02 145);
+	--color-hive: oklch(0.75 0.2 145);
+	--color-parchment: oklch(0.17 0.018 145);
+
+	/* 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.018 145 / 0.75);
+	--card-foreground: oklch(0.93 0.01 145);
+
+	--popover: oklch(0.17 0.015 145);
+	--popover-foreground: oklch(0.93 0.01 145);
+
+	/* Primary: Bright Moss Green */
+	--primary: oklch(0.8 0.1 145);
+	--primary-foreground: oklch(0.14 0.015 145);
+
+	--secondary: oklch(0.24 0.015 145);
+	--secondary-foreground: oklch(0.8 0.1 145);
+
+	--muted: oklch(0.24 0.015 145);
+	--muted-foreground: oklch(0.62 0.015 145);
+
+	--accent: oklch(0.24 0.015 145);
+	--accent-foreground: oklch(0.8 0.1 145);
+
+	--destructive: oklch(0.45 0.15 25);
+	--destructive-foreground: oklch(0.93 0.01 145);
+
+	--border: oklch(0.28 0.015 145);
+	--input: oklch(0.28 0.015 145);
+	--ring: oklch(0.8 0.1 145 / 0.3);
+
+	/* Sidebar (Dark Forest) */
+	--sidebar: oklch(0.19 0.018 145);
+	--sidebar-foreground: oklch(0.93 0.01 145);
+	--sidebar-primary: oklch(0.8 0.1 145);
+	--sidebar-primary-foreground: oklch(0.14 0.015 145);
+	--sidebar-accent: oklch(0.23 0.015 145);
+	--sidebar-accent-foreground: oklch(0.93 0.01 145);
+	--sidebar-border: oklch(0.28 0.015 145);
+
+	/* Banners (Dark) */
+	--banner-info: oklch(0.22 0.04 240);
+	--banner-info-foreground: oklch(0.88 0.05 240);
+	--banner-info-border: oklch(0.48 0.16 240);
+	--banner-note: oklch(0.22 0.05 145);
+	--banner-note-foreground: oklch(0.88 0.06 145);
+	--banner-note-border: oklch(0.5 0.12 145);
+	--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 145);
+	--badge-success-foreground: oklch(1 0 0);
+	--checkbox-checked: oklch(0.8 0.1 145);
+	--checkbox-checked-foreground: oklch(0.14 0.015 145);
+	--checkbox-unchecked-bg: oklch(0.22 0.01 145);
+	--checkbox-unchecked-border: oklch(0.38 0.01 145);
+}

package/src/themes/steel.css

@@ -1,8 +1,23 @@
 [data-theme="steel"] {
 	/* --- Light Theme (Metallic & Industrial - Brushed Steel) --- */
-	--background: oklch(0.95 0.005 250);
+	--background: oklch(0.95 0.015 250);
 	--foreground: oklch(0.2 0.02 250);
 
+	/* 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 - Aluminum Finish */
 	--card: oklch(0.98 0.005 250 / 0.85);
 	--card-foreground: oklch(0.2 0.02 250);
@@ -31,10 +46,8 @@
 	--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: oklch(0.98 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);
@@ -66,45 +79,60 @@
 }
 
 [data-theme="steel"].dark {
-	/* --- Dark Theme (Modern Slate & Glow) --- */
-	--background: oklch(0.18 0.015 260);
+	/* --- Dark Theme (Midnight Navy & Cyan) --- */
+	--background: oklch(0.18 0.02 225);
 	--foreground: oklch(0.985 0 0);
 
+	/* 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: Brighter than background */
-	--card: oklch(0.23 0.02 260 / 0.75);
+	--card: oklch(0.23 0.025 225 / 0.75);
 	--card-foreground: oklch(0.985 0 0);
 
-	--popover: oklch(0.21 0.015 260);
+	--popover: oklch(0.21 0.02 225);
 	--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);
+	--primary-foreground: oklch(0.18 0.02 225);
 
-	--secondary: oklch(0.28 0.02 260);
+	--secondary: oklch(0.28 0.025 225);
 	--secondary-foreground: oklch(0.9 0.1 220);
 
-	--muted: oklch(0.28 0.02 260);
-	--muted-foreground: oklch(0.705 0.015 260);
+	--muted: oklch(0.28 0.025 225);
+	--muted-foreground: oklch(0.705 0.015 225);
 
-	--accent: oklch(0.28 0.02 260);
+	--accent: oklch(0.28 0.025 225);
 	--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);
+	--border: oklch(0.32 0.025 225);
+	--input: oklch(0.32 0.025 225);
 	--ring: oklch(0.9 0.1 220 / 0.3);
 
-	/* Sidebar (Dark) */
-	--sidebar: oklch(0.21 0.015 260);
+	/* Sidebar (Midnight Navy) */
+	--sidebar: oklch(0.23 0.025 225);
 	--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-primary-foreground: oklch(0.18 0.02 225);
+	--sidebar-accent: oklch(0.28 0.025 225);
 	--sidebar-accent-foreground: oklch(0.985 0 0);
-	--sidebar-border: oklch(0.32 0.02 260);
+	--sidebar-border: oklch(0.32 0.025 225);
 
 	/* Banners (Dark - Desaturated) */
 	--banner-info: oklch(0.274 0.079 260);