@getmicdrop/svelte-components 5.21.0 → 5.21.1

package/dist/tokens/__tests__/typography-base.test.js

@@ -34,7 +34,7 @@ describe('Typography Base CSS', () => {
         it('headings have dark mode support', () => {
             const headingMatches = cssContent.match(/h[1-6]\s*\{[^}]+\}/g) || [];
             headingMatches.forEach(match => {
-                expect(match).toContain('dark:text-white');
+                expect(match).toContain('');
             });
         });
     });
@@ -45,8 +45,8 @@ describe('Typography Base CSS', () => {
         it('paragraph uses secondary color for visual hierarchy', () => {
             const pMatch = cssContent.match(/p\s*\{[^}]+\}/);
             expect(pMatch).toBeTruthy();
-            expect(pMatch[0]).toContain('text-gray-600');
-            expect(pMatch[0]).toContain('dark:text-gray-300');
+            expect(pMatch[0]).toContain('text-text-secondary');
+            expect(pMatch[0]).toContain('');
         });
         it('paragraph has relaxed line height', () => {
             const pMatch = cssContent.match(/p\s*\{[^}]+\}/);
@@ -70,7 +70,7 @@ describe('Typography Base CSS', () => {
         it('links have blue color and hover underline', () => {
             const aMatch = cssContent.match(/a\s*\{[^}]+\}/);
             expect(aMatch).toBeTruthy();
-            expect(aMatch[0]).toContain('text-blue-600');
+            expect(aMatch[0]).toContain('text-brand-primary');
             expect(aMatch[0]).toContain('hover:underline');
         });
     });
@@ -132,7 +132,7 @@ describe('Typography Base CSS Consistency with typography.ts', () => {
     it('documents the intentional difference between CSS <p> and typography.body', () => {
         // This test exists to document the design decision
         const pMatch = cssContent.match(/p\s*\{[^}]+\}/);
-        expect(pMatch[0]).toContain('text-gray-600'); // CSS uses secondary
+        expect(pMatch[0]).toContain('text-text-secondary'); // CSS uses secondary
         // typography.body uses gray-900 (primary) - verified in typography.test.ts
     });
 });

package/dist/tokens/__tests__/typography.test.js

@@ -4,8 +4,7 @@ describe('Typography Headings', () => {
     it('h1 has 2xl size and semibold weight', () => {
         expect(typography.h1).toContain('text-2xl');
         expect(typography.h1).toContain('font-semibold');
-        expect(typography.h1).toContain('text-gray-900');
-        expect(typography.h1).toContain('dark:text-white');
+        expect(typography.h1).toContain('text-text-primary');
     });
     it('h2 has xl size and semibold weight', () => {
         expect(typography.h2).toContain('text-xl');
@@ -32,33 +31,31 @@ describe('Typography Body Text', () => {
     it('body has base size and relaxed leading', () => {
         expect(typography.body).toContain('text-base');
         expect(typography.body).toContain('leading-relaxed');
-        expect(typography.body).toContain('text-gray-900');
+        expect(typography.body).toContain('text-text-primary');
     });
-    it('bodyMuted has muted gray color', () => {
-        expect(typography.bodyMuted).toContain('text-gray-500');
-        expect(typography.bodyMuted).toContain('dark:text-gray-400');
+    it('bodyMuted has muted token color', () => {
+        expect(typography.bodyMuted).toContain('text-muted-foreground');
     });
     it('sm has sm size', () => {
         expect(typography.sm).toContain('text-sm');
-        expect(typography.sm).toContain('text-gray-900');
+        expect(typography.sm).toContain('text-text-primary');
     });
     it('smMuted has sm size and muted color', () => {
         expect(typography.smMuted).toContain('text-sm');
-        expect(typography.smMuted).toContain('text-gray-500');
+        expect(typography.smMuted).toContain('text-muted-foreground');
     });
     it('xs has xs size', () => {
         expect(typography.xs).toContain('text-xs');
-        expect(typography.xs).toContain('text-gray-900');
+        expect(typography.xs).toContain('text-text-primary');
     });
     it('xsMuted has xs size and muted color', () => {
         expect(typography.xsMuted).toContain('text-xs');
-        expect(typography.xsMuted).toContain('text-gray-500');
+        expect(typography.xsMuted).toContain('text-muted-foreground');
     });
 });
 describe('Typography Muted Colors', () => {
-    it('textMuted has muted gray color', () => {
-        expect(typography.textMuted).toContain('text-gray-500');
-        expect(typography.textMuted).toContain('dark:text-gray-400');
+    it('textMuted has muted token color', () => {
+        expect(typography.textMuted).toContain('text-muted-foreground');
     });
     it('iconMuted matches textMuted', () => {
         expect(typography.iconMuted).toBe(typography.textMuted);
@@ -68,7 +65,7 @@ describe('Typography Labels', () => {
     it('label has sm size and medium weight', () => {
         expect(typography.label).toContain('text-sm');
         expect(typography.label).toContain('font-medium');
-        expect(typography.label).toContain('text-gray-900');
+        expect(typography.label).toContain('text-text-primary');
     });
     it('labelSpaced includes bottom margin', () => {
         expect(typography.labelSpaced).toContain('mb-2');
@@ -77,40 +74,39 @@ describe('Typography Labels', () => {
     });
     it('helper has muted color', () => {
         expect(typography.helper).toContain('text-sm');
-        expect(typography.helper).toContain('text-gray-500');
+        expect(typography.helper).toContain('text-muted-foreground');
     });
-    it('placeholder has lighter muted color', () => {
+    it('placeholder has muted color', () => {
         expect(typography.placeholder).toContain('text-sm');
-        expect(typography.placeholder).toContain('text-gray-400');
+        expect(typography.placeholder).toContain('text-muted-foreground');
     });
 });
 describe('Typography Status Text', () => {
-    it('error has red color', () => {
+    it('error has danger token color', () => {
         expect(typography.error).toContain('text-sm');
-        expect(typography.error).toContain('text-red-500');
-        expect(typography.error).toContain('dark:text-red-400');
+        expect(typography.error).toContain('text-accent-danger');
     });
-    it('success has green color', () => {
+    it('success has success token color', () => {
         expect(typography.success).toContain('text-sm');
-        expect(typography.success).toContain('text-green-600');
+        expect(typography.success).toContain('text-accent-success');
     });
-    it('warning has yellow color', () => {
+    it('warning has warning token color', () => {
         expect(typography.warning).toContain('text-sm');
-        expect(typography.warning).toContain('text-yellow-600');
+        expect(typography.warning).toContain('text-accent-warning');
     });
-    it('info has blue color', () => {
+    it('info has brand token color', () => {
         expect(typography.info).toContain('text-sm');
-        expect(typography.info).toContain('text-blue-600');
+        expect(typography.info).toContain('text-brand-primary');
     });
 });
 describe('Typography Links', () => {
-    it('link has blue color and hover underline', () => {
-        expect(typography.link).toContain('text-blue-700');
+    it('link has brand color and hover underline', () => {
+        expect(typography.link).toContain('text-brand-primary');
         expect(typography.link).toContain('hover:underline');
     });
-    it('linkMuted has gray color and hover state', () => {
-        expect(typography.linkMuted).toContain('text-gray-500');
-        expect(typography.linkMuted).toContain('hover:text-gray-700');
+    it('linkMuted has muted color and hover state', () => {
+        expect(typography.linkMuted).toContain('text-muted-foreground');
+        expect(typography.linkMuted).toContain('hover:text-text-secondary');
     });
 });
 describe('Typography Special Cases', () => {
@@ -137,7 +133,7 @@ describe('Typography Special Cases', () => {
     });
     it('codeMuted has mono font and muted color', () => {
         expect(typography.codeMuted).toContain('font-mono');
-        expect(typography.codeMuted).toContain('text-gray-500');
+        expect(typography.codeMuted).toContain('text-muted-foreground');
     });
 });
 describe('Typography Token Type', () => {
@@ -147,10 +143,10 @@ describe('Typography Token Type', () => {
             expect(typeof typography[token]).toBe('string');
         });
     });
-    it('all tokens have dark mode variants where applicable', () => {
-        const tokensWithDarkMode = ['h1', 'body', 'sm', 'label', 'error'];
-        tokensWithDarkMode.forEach(token => {
-            expect(typography[token]).toContain('dark:');
+    it('all tokens use centralized token classes instead of dark: variants', () => {
+        const tokenKeys = Object.keys(typography);
+        tokenKeys.forEach(token => {
+            expect(typography[token]).not.toContain('dark:');
         });
     });
 });

package/dist/tokens/__tests__/variants.test.js

@@ -4,37 +4,33 @@ describe('color variant tokens', () => {
     describe('badgeColorVariants', () => {
         describe('semantic variants', () => {
             it('has success variant with green colors', () => {
-                expect(badgeColorVariants.success).toContain('text-green-800');
-                expect(badgeColorVariants.success).toContain('bg-green-100');
-                expect(badgeColorVariants.success).toContain('dark:bg-green-900');
-                expect(badgeColorVariants.success).toContain('dark:text-green-300');
+                expect(badgeColorVariants.success).toContain('text-status-success-text');
+                expect(badgeColorVariants.success).toContain('bg-status-success-bg');
+                expect(badgeColorVariants.success).toContain('');
+                expect(badgeColorVariants.success).toContain('');
             });
             it('has warning variant with yellow colors', () => {
-                expect(badgeColorVariants.warning).toContain('text-yellow-800');
-                expect(badgeColorVariants.warning).toContain('bg-yellow-100');
-                expect(badgeColorVariants.warning).toContain('dark:bg-yellow-900');
-                expect(badgeColorVariants.warning).toContain('dark:text-yellow-300');
+                expect(badgeColorVariants.warning).toContain('text-status-warning-text');
+                expect(badgeColorVariants.warning).toContain('bg-status-warning-bg');
+                expect(badgeColorVariants.warning).toContain('');
+                expect(badgeColorVariants.warning).toContain('');
             });
             it('has error variant with red colors', () => {
-                expect(badgeColorVariants.error).toContain('text-red-800');
-                expect(badgeColorVariants.error).toContain('bg-red-100');
-                expect(badgeColorVariants.error).toContain('dark:bg-red-900');
-                expect(badgeColorVariants.error).toContain('dark:text-red-300');
+                expect(badgeColorVariants.error).toContain('text-status-error-text');
+                expect(badgeColorVariants.error).toContain('bg-status-error-bg');
             });
             it('has danger variant identical to error', () => {
                 expect(badgeColorVariants.danger).toBe(badgeColorVariants.error);
             });
             it('has info variant with blue colors', () => {
-                expect(badgeColorVariants.info).toContain('text-blue-800');
-                expect(badgeColorVariants.info).toContain('bg-blue-100');
-                expect(badgeColorVariants.info).toContain('dark:bg-blue-900');
-                expect(badgeColorVariants.info).toContain('dark:text-blue-300');
+                expect(badgeColorVariants.info).toContain('text-status-info-text');
+                expect(badgeColorVariants.info).toContain('bg-status-info-bg');
             });
             it('has neutral variant with gray colors', () => {
-                expect(badgeColorVariants.neutral).toContain('text-gray-800');
-                expect(badgeColorVariants.neutral).toContain('bg-gray-100');
-                expect(badgeColorVariants.neutral).toContain('dark:bg-gray-700');
-                expect(badgeColorVariants.neutral).toContain('dark:text-gray-300');
+                expect(badgeColorVariants.neutral).toContain('text-text-primary');
+                expect(badgeColorVariants.neutral).toContain('bg-muted');
+                expect(badgeColorVariants.neutral).toContain('');
+                expect(badgeColorVariants.neutral).toContain('');
             });
         });
         describe('color variants', () => {
@@ -52,8 +48,8 @@ describe('color variant tokens', () => {
             ];
             it.each(colorVariants)('has %s color variant', (color) => {
                 expect(badgeColorVariants[color]).toBeDefined();
-                expect(badgeColorVariants[color]).toContain(`text-${color}-800`);
-                expect(badgeColorVariants[color]).toContain(`bg-${color}-100`);
+                expect(typeof badgeColorVariants[color]).toBe('string');
+                expect(badgeColorVariants[color].length).toBeGreaterThan(0);
             });
             it('green color variant matches success semantic variant', () => {
                 expect(badgeColorVariants.green).toBe(badgeColorVariants.success);
@@ -68,55 +64,47 @@ describe('color variant tokens', () => {
         describe('special variants', () => {
             it('has notification variant with white text and red background', () => {
                 expect(badgeColorVariants.notification).toContain('text-white');
-                expect(badgeColorVariants.notification).toContain('bg-red-500');
-                expect(badgeColorVariants.notification).toContain('dark:bg-red-600');
+                expect(badgeColorVariants.notification).toContain('bg-accent-danger');
+                expect(badgeColorVariants.notification).toContain('');
             });
         });
         it('has exactly 17 variants', () => {
             expect(Object.keys(badgeColorVariants)).toHaveLength(17);
         });
-        it('all variants include dark mode support', () => {
+        it('all variants are non-empty strings', () => {
             for (const [key, value] of Object.entries(badgeColorVariants)) {
-                expect(value).toContain('dark:');
+                expect(typeof value).toBe('string');
+                expect(value.length).toBeGreaterThan(0);
             }
         });
     });
     describe('alertColorVariants', () => {
-        it('has info variant with blue-50 background and border', () => {
-            expect(alertColorVariants.info).toContain('text-blue-800');
-            expect(alertColorVariants.info).toContain('bg-blue-50');
-            expect(alertColorVariants.info).toContain('border-blue-300');
-            expect(alertColorVariants.info).toContain('dark:bg-gray-800');
-            expect(alertColorVariants.info).toContain('dark:text-blue-400');
-            expect(alertColorVariants.info).toContain('dark:border-blue-800');
-        });
-        it('has success variant with green-50 background and border', () => {
-            expect(alertColorVariants.success).toContain('text-green-800');
-            expect(alertColorVariants.success).toContain('bg-green-50');
-            expect(alertColorVariants.success).toContain('border-green-300');
-            expect(alertColorVariants.success).toContain('dark:bg-gray-800');
-            expect(alertColorVariants.success).toContain('dark:text-green-400');
-        });
-        it('has warning variant with yellow-50 background and border', () => {
-            expect(alertColorVariants.warning).toContain('text-yellow-800');
-            expect(alertColorVariants.warning).toContain('bg-yellow-50');
-            expect(alertColorVariants.warning).toContain('border-yellow-300');
-            expect(alertColorVariants.warning).toContain('dark:bg-gray-800');
-            expect(alertColorVariants.warning).toContain('dark:text-yellow-300');
-        });
-        it('has danger variant with red-50 background and border', () => {
-            expect(alertColorVariants.danger).toContain('text-red-800');
-            expect(alertColorVariants.danger).toContain('bg-red-50');
-            expect(alertColorVariants.danger).toContain('border-red-300');
-            expect(alertColorVariants.danger).toContain('dark:bg-gray-800');
-            expect(alertColorVariants.danger).toContain('dark:text-red-400');
+        it('has info variant with status-info background and border', () => {
+            expect(alertColorVariants.info).toContain('text-status-info-text');
+            expect(alertColorVariants.info).toContain('bg-status-info-bg');
+            expect(alertColorVariants.info).toContain('border-status-info-border');
+        });
+        it('has success variant with green background and border', () => {
+            expect(alertColorVariants.success).toContain('text-status-success-text');
+            expect(alertColorVariants.success).toContain('bg-status-success-bg');
+            expect(alertColorVariants.success).toContain('border-status-success-border');
+        });
+        it('has warning variant with yellow background and border', () => {
+            expect(alertColorVariants.warning).toContain('text-status-warning-text');
+            expect(alertColorVariants.warning).toContain('bg-status-warning-bg');
+            expect(alertColorVariants.warning).toContain('border-status-warning-border');
+        });
+        it('has danger variant with red background and border', () => {
+            expect(alertColorVariants.danger).toContain('text-status-error-text');
+            expect(alertColorVariants.danger).toContain('bg-status-error-bg');
+            expect(alertColorVariants.danger).toContain('border-status-error-border');
         });
         it('has exactly 4 variants', () => {
             expect(Object.keys(alertColorVariants)).toHaveLength(4);
         });
-        it('uses bg-*-50 pattern (lighter than badge variants)', () => {
+        it('uses bg-status-*-bg pattern for semantic backgrounds', () => {
             for (const value of Object.values(alertColorVariants)) {
-                expect(value).toMatch(/bg-\w+-50/);
+                expect(value).toMatch(/bg-status-\w+-bg/);
             }
         });
     });
@@ -129,12 +117,12 @@ describe('color variant tokens', () => {
         it('includes hover states for each variant', () => {
             for (const value of Object.values(alertCloseButtonVariants)) {
                 expect(value).toContain('hover:');
-                expect(value).toContain('dark:hover:');
+                expect(value).toContain(':');
             }
         });
         it('info close button has correct colors', () => {
-            expect(alertCloseButtonVariants.info).toContain('text-blue-500');
-            expect(alertCloseButtonVariants.info).toContain('hover:bg-blue-200');
+            expect(alertCloseButtonVariants.info).toContain('text-brand-primary');
+            expect(alertCloseButtonVariants.info).toContain('hover:bg-status-info-bg/80');
         });
     });
     describe('spinnerColorVariants', () => {
@@ -156,7 +144,7 @@ describe('color variant tokens', () => {
             expect(Object.keys(spinnerColorVariants)).toHaveLength(8);
         });
         it('gray spinner has dark mode support', () => {
-            expect(spinnerColorVariants.gray).toContain('dark:fill-gray-300');
+            expect(spinnerColorVariants.gray).toContain('');
         });
         it('white spinner is just fill-white', () => {
             expect(spinnerColorVariants.white).toBe('fill-white');
@@ -293,8 +281,7 @@ describe('type exports', () => {
     });
 });
 describe('consistency checks', () => {
-    it('all badge variants follow consistent pattern', () => {
-        // Check that all non-special variants follow the same structure
+    it('all badge variants have text and background classes', () => {
         const standardVariants = [
             'success',
             'warning',
@@ -312,26 +299,24 @@ describe('consistency checks', () => {
         ];
         for (const variant of standardVariants) {
             const classes = badgeColorVariants[variant];
-            // Should have text-*-800 and bg-*-100 and dark: variants
-            expect(classes).toMatch(/text-\w+-800/);
-            expect(classes).toMatch(/bg-\w+-100/);
-            expect(classes).toMatch(/dark:bg-\w+-900/);
-            expect(classes).toMatch(/dark:text-\w+-300/);
+            // Should have both a text class and a bg class
+            expect(classes).toMatch(/text-/);
+            expect(classes).toMatch(/bg-/);
         }
     });
     it('gray and neutral badge variants are identical', () => {
         expect(badgeColorVariants.gray).toBe(badgeColorVariants.neutral);
     });
-    it('semantic badge variants map to correct colors', () => {
-        // success = green
-        expect(badgeColorVariants.success).toContain('green');
-        // error = red
-        expect(badgeColorVariants.error).toContain('red');
-        // warning = yellow
-        expect(badgeColorVariants.warning).toContain('yellow');
-        // info = blue
-        expect(badgeColorVariants.info).toContain('blue');
-        // neutral = gray
-        expect(badgeColorVariants.neutral).toContain('gray');
+    it('semantic badge variants use semantic tokens', () => {
+        // success uses status-success tokens
+        expect(badgeColorVariants.success).toContain('status-success');
+        // error uses status-error or red
+        expect(badgeColorVariants.error).toContain('status-error');
+        // warning uses status-warning tokens
+        expect(badgeColorVariants.warning).toContain('status-warning');
+        // info uses status-info tokens
+        expect(badgeColorVariants.info).toContain('status-info');
+        // neutral uses muted
+        expect(badgeColorVariants.neutral).toContain('muted');
     });
 });

package/dist/tokens/tokens.css

@@ -1,87 +1,87 @@
-:root {
-  --bg-primary: 0 0% 100%;
-  --bg-secondary: 220 7% 97%;
-  --bg-tertiary: 220 7% 94%;
-  --bg-quaternary: 220 6% 91%;
-
-  --text-primary: 221 50% 10%;
-  --text-secondary: 220 20% 18%;
-  --text-tertiary: 221 9% 44%;
-  --text-head: 221 9% 44%;
-
-  --brand-primary: 209 99% 50%;
-
-  --accent-warning: 28 100% 59%;
-  --accent-danger: 0 100% 70%;
-  --accent-success: 131 77% 35%;
-
-  --stroke-primary: 216 6% 84%;
-  --stroke-secondary: 216 6% 84%;
-  --border: 220 13% 91%;
-
-  --card: 0 0% 100%;
-  --card-foreground: 224 71.4% 4.1%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 224 71.4% 4.1%;
-  --muted: 220 14.3% 95.9%;
-  --muted-foreground: 220 8.9% 46.1%;
-  --hover-primary: 210 20% 96%;
-
-  --sidebar-background: 0 0% 100%;
-  --sidebar-foreground: 220 20% 18%;
-  --sidebar-border: 220 13% 91%;
-  --sidebar-primary: 221 65% 54%;
-  --sidebar-primary-foreground: 221 50% 10%;
-
-  --BG-Primary: var(--bg-primary);
-  --BG-Secondary: var(--bg-secondary);
-  --BG-Tertiary: var(--bg-tertiary);
-  --BG-Quaternary: var(--bg-quaternary);
-  --Text-Primary: var(--text-primary);
-  --Text-Secondary: var(--text-secondary);
-  --Text-Tartiary: var(--text-tertiary);
-  --Text-Tertiary: var(--text-tertiary);
-  --Text-Head: var(--text-head);
-  --Brand-Primary: var(--brand-primary);
-  --Accent-Warning: var(--accent-warning);
-  --Accent-Danger: var(--accent-danger);
-  --Accent-Success: var(--accent-success);
-  --Stroke-Primary: var(--stroke-primary);
-  --Stroke-Secondary: var(--stroke-secondary);
-}
-
-.dark {
-  --bg-primary: 220 20% 18%;
-  --bg-secondary: 221 50% 10%;
-  --bg-tertiary: 221 50% 6%;
-  --bg-quaternary: 0 0% 0%;
-
-  --text-primary: 220 7% 97%;
-  --text-secondary: 220 7% 94%;
-  --text-tertiary: 220 6% 91%;
-  --text-head: 220 9% 70%;
-
-  --brand-primary: 220 89% 63%;
-
-  --accent-warning: 30 100% 70%;
-  --accent-danger: 0 100% 70%;
-  --accent-success: 142 71% 45%;
-
-  --stroke-primary: 220 20% 28%;
-  --stroke-secondary: 220 20% 28%;
-  --border: 215 27.9% 16.9%;
-
-  --card: 224 20% 10%;
-  --card-foreground: 210 20% 98%;
-  --popover: 224 71.4% 4.1%;
-  --popover-foreground: 210 20% 98%;
-  --muted: 215 27.9% 16.9%;
-  --muted-foreground: 217.9 10.6% 64.9%;
-  --hover-primary: 222 10% 39%;
-
-  --sidebar-background: 220 20% 18%;
-  --sidebar-foreground: 220 7% 94%;
-  --sidebar-border: 215 20% 20%;
-  --sidebar-primary: 221 65% 54%;
-  --sidebar-primary-foreground: 220 7% 97%;
-}
+:root {
+  --bg-primary: 0 0% 100%;
+  --bg-secondary: 220 7% 97%;
+  --bg-tertiary: 220 7% 94%;
+  --bg-quaternary: 220 6% 91%;
+
+  --text-primary: 221 50% 10%;
+  --text-secondary: 220 20% 18%;
+  --text-tertiary: 221 9% 44%;
+  --text-head: 221 9% 44%;
+
+  --brand-primary: 209 99% 50%;
+
+  --accent-warning: 28 100% 59%;
+  --accent-danger: 0 100% 70%;
+  --accent-success: 131 77% 35%;
+
+  --stroke-primary: 216 6% 84%;
+  --stroke-secondary: 216 6% 84%;
+  --border: 220 13% 91%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 224 71.4% 4.1%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 224 71.4% 4.1%;
+  --muted: 220 14.3% 95.9%;
+  --muted-foreground: 220 8.9% 46.1%;
+  --hover-primary: 210 20% 96%;
+
+  --sidebar-background: 0 0% 100%;
+  --sidebar-foreground: 220 20% 18%;
+  --sidebar-border: 220 13% 91%;
+  --sidebar-primary: 221 65% 54%;
+  --sidebar-primary-foreground: 221 50% 10%;
+
+  --bg-primary: var(--bg-primary);
+  --bg-secondary: var(--bg-secondary);
+  --bg-tertiary: var(--bg-tertiary);
+  --bg-quaternary: var(--bg-quaternary);
+  --text-primary: var(--text-primary);
+  --text-secondary: var(--text-secondary);
+  --text-tertiary: var(--text-tertiary);
+  --text-tertiary: var(--text-tertiary);
+  --text-head: var(--text-head);
+  --brand-primary: var(--brand-primary);
+  --accent-warning: var(--accent-warning);
+  --accent-danger: var(--accent-danger);
+  --accent-success: var(--accent-success);
+  --stroke-primary: var(--stroke-primary);
+  --stroke-secondary: var(--stroke-secondary);
+}
+
+.dark {
+  --bg-primary: 220 20% 18%;
+  --bg-secondary: 221 50% 10%;
+  --bg-tertiary: 221 50% 6%;
+  --bg-quaternary: 0 0% 0%;
+
+  --text-primary: 220 7% 97%;
+  --text-secondary: 220 7% 94%;
+  --text-tertiary: 220 6% 91%;
+  --text-head: 220 9% 70%;
+
+  --brand-primary: 220 89% 63%;
+
+  --accent-warning: 30 100% 70%;
+  --accent-danger: 0 100% 70%;
+  --accent-success: 142 71% 45%;
+
+  --stroke-primary: 220 20% 28%;
+  --stroke-secondary: 220 20% 28%;
+  --border: 215 27.9% 16.9%;
+
+  --card: 224 20% 10%;
+  --card-foreground: 210 20% 98%;
+  --popover: 224 71.4% 4.1%;
+  --popover-foreground: 210 20% 98%;
+  --muted: 215 27.9% 16.9%;
+  --muted-foreground: 217.9 10.6% 64.9%;
+  --hover-primary: 222 10% 39%;
+
+  --sidebar-background: 220 20% 18%;
+  --sidebar-foreground: 220 7% 94%;
+  --sidebar-border: 215 20% 20%;
+  --sidebar-primary: 221 65% 54%;
+  --sidebar-primary-foreground: 220 7% 97%;
+}