doom-design-system 0.2.1 → 0.3.1

package/dist/styles/themes/definitions.d.ts

@@ -2,33 +2,29 @@ export declare const themes: {
     readonly default: {
         readonly name: "Default";
         readonly variables: {
-            readonly "--background": "#e0e7ff";
+            readonly "--background": "#f3f4f6";
             readonly "--foreground": "#000000";
             readonly "--card-bg": "#ffffff";
             readonly "--card-border": "#000000";
+            readonly "--surface-accent": "#dbeafe";
             readonly "--primary": "#a855f7";
             readonly "--primary-hover": "#9333ea";
             readonly "--primary-foreground": "#000000";
             readonly "--shadow-primary": "#7e22ce";
             readonly "--secondary": "#fbbf24";
             readonly "--secondary-foreground": "#000000";
-            readonly "--accent": "#ec4899";
-            readonly "--muted": "#94a3b8";
-            readonly "--muted-foreground": "#334155";
+            readonly "--accent": "#ef4444";
+            readonly "--muted": "#9ca3af";
+            readonly "--muted-foreground": "#374151";
             readonly "--success": "#22c55e";
             readonly "--success-foreground": "#000000";
             readonly "--warning": "#f59e0b";
             readonly "--warning-foreground": "#000000";
             readonly "--error": "#ef4444";
             readonly "--error-foreground": "#000000";
+            readonly "--on-surface": "#000000";
+            readonly "--on-surface-muted": "#374151";
             readonly "--shadow-error": "#b91c1c";
-            readonly "--border-width": "3px";
-            readonly "--radius": "8px";
-            readonly "--shadow-hard": "5px 5px 0px 0px #000000";
-            readonly "--shadow-hover": "7px 7px 0px 0px #000000";
-            readonly "--font-heading": "var(--font-montserrat)";
-            readonly "--heading-transform": "uppercase";
-            readonly "--heading-weight": "900";
             readonly "--text-xs": string;
             readonly "--text-sm": string;
             readonly "--text-base": string;
@@ -59,6 +55,8 @@ export declare const themes: {
             readonly "--z-header": string;
             readonly "--z-dropdown": string;
             readonly "--z-modal": string;
+            readonly "--z-overlay": string;
+            readonly "--z-drawer": string;
             readonly "--z-tooltip": string;
             readonly "--duration-fast": string;
             readonly "--duration-normal": string;
@@ -75,6 +73,16 @@ export declare const themes: {
             readonly "--size-icon-md": string;
             readonly "--size-icon-lg": string;
             readonly "--size-touch-target": string;
+            readonly "--common-black": "#000000";
+            readonly "--common-white": "#ffffff";
+            readonly "--border-strong": "#000000";
+            readonly "--border-width": string;
+            readonly "--radius": string;
+            readonly "--shadow-hard": string;
+            readonly "--shadow-hover": string;
+            readonly "--font-heading": string;
+            readonly "--heading-transform": string;
+            readonly "--heading-weight": string;
             readonly "--shadow-sm": string;
             readonly "--shadow-sm-hover": string;
             readonly "--shadow-sm-checked": string;
@@ -89,29 +97,25 @@ export declare const themes: {
             readonly "--foreground": "#e2e8f0";
             readonly "--card-bg": "#0f172a";
             readonly "--card-border": "#1e293b";
+            readonly "--surface-accent": "#0f172a";
             readonly "--primary": "#10b981";
             readonly "--primary-hover": "#059669";
             readonly "--primary-foreground": "#020617";
             readonly "--shadow-primary": "#000000";
-            readonly "--secondary": "#334155";
-            readonly "--secondary-foreground": "#f8fafc";
-            readonly "--accent": "#fbbf24";
+            readonly "--secondary": "#475569";
+            readonly "--secondary-foreground": "#F8FAFC";
+            readonly "--accent": "#ef4444";
             readonly "--muted": "#64748b";
             readonly "--muted-foreground": "#94a3b8";
             readonly "--success": "#10b981";
             readonly "--success-foreground": "#020617";
-            readonly "--warning": "#fbbf24";
+            readonly "--warning": "#f59e0b";
             readonly "--warning-foreground": "#020617";
             readonly "--error": "#ef4444";
             readonly "--error-foreground": "#000000";
+            readonly "--on-surface": "#e2e8f0";
+            readonly "--on-surface-muted": "#94a3b8";
             readonly "--shadow-error": "#000000";
-            readonly "--border-width": "2px";
-            readonly "--radius": "2px";
-            readonly "--shadow-hard": "5px 5px 0px 0px #000000";
-            readonly "--shadow-hover": "7px 7px 0px 0px #000000";
-            readonly "--font-heading": "var(--font-montserrat)";
-            readonly "--heading-transform": "uppercase";
-            readonly "--heading-weight": "700";
             readonly "--text-xs": string;
             readonly "--text-sm": string;
             readonly "--text-base": string;
@@ -142,6 +146,8 @@ export declare const themes: {
             readonly "--z-header": string;
             readonly "--z-dropdown": string;
             readonly "--z-modal": string;
+            readonly "--z-overlay": string;
+            readonly "--z-drawer": string;
             readonly "--z-tooltip": string;
             readonly "--duration-fast": string;
             readonly "--duration-normal": string;
@@ -158,6 +164,16 @@ export declare const themes: {
             readonly "--size-icon-md": string;
             readonly "--size-icon-lg": string;
             readonly "--size-touch-target": string;
+            readonly "--common-black": "#000000";
+            readonly "--common-white": "#ffffff";
+            readonly "--border-strong": "#000000";
+            readonly "--border-width": string;
+            readonly "--radius": string;
+            readonly "--shadow-hard": string;
+            readonly "--shadow-hover": string;
+            readonly "--font-heading": string;
+            readonly "--heading-transform": string;
+            readonly "--heading-weight": string;
             readonly "--shadow-sm": string;
             readonly "--shadow-sm-hover": string;
             readonly "--shadow-sm-checked": string;
@@ -169,32 +185,29 @@ export declare const themes: {
         readonly name: "THE CAPTAIN";
         readonly variables: {
             readonly "--background": "#F8FAFC";
-            readonly "--foreground": "#0F172A";
-            readonly "--card-bg": "#FFFFFF";
-            readonly "--card-border": "#002D72";
-            readonly "--primary": "#002D72";
-            readonly "--primary-hover": "#1E3A8A";
-            readonly "--primary-foreground": "#FFFFFF";
-            readonly "--shadow-primary": "#001533";
-            readonly "--secondary": "#B91C1C";
-            readonly "--secondary-foreground": "#FFFFFF";
-            readonly "--accent": "#C0C0C0";
-            readonly "--muted": "#64748B";
+            readonly "--foreground": "#0f172a";
+            readonly "--card-bg": "#ffffff";
+            readonly "--card-border": "#000000";
+            readonly "--surface-accent": "#f1f5f9";
+            readonly "--primary": "#2563eb";
+            readonly "--primary-hover": "#1d4ed8";
+            readonly "--primary-foreground": "#ffffff";
+            readonly "--shadow-primary": "#1e40af";
+            readonly "--secondary": "#64748b";
+            readonly "--secondary-foreground": "#ffffff";
+            readonly "--accent": "#b91c1c";
+            readonly "--muted": "#94a3b8";
             readonly "--muted-foreground": "#475569";
-            readonly "--success": "#15803D";
-            readonly "--success-foreground": "#FFFFFF";
-            readonly "--warning": "#B45309";
-            readonly "--warning-foreground": "#FFFFFF";
-            readonly "--error": "#B91C1C";
-            readonly "--error-foreground": "#FFFFFF";
-            readonly "--shadow-error": "#7f1d1d";
-            readonly "--border-width": "3px";
-            readonly "--radius": "8px";
-            readonly "--shadow-hard": "6px 6px 0px 0px #0F172A";
-            readonly "--shadow-hover": "8px 8px 0px 0px #0F172A";
-            readonly "--font-heading": "var(--font-montserrat)";
-            readonly "--heading-transform": "uppercase";
-            readonly "--heading-weight": "900";
+            readonly "--success": "#10b981";
+            readonly "--success-foreground": "#ffffff";
+            readonly "--warning": "#F7B731";
+            readonly "--warning-foreground": "#0F1419";
+            readonly "--error": "#b91c1c";
+            readonly "--error-foreground": "#ffffff";
+            readonly "--on-surface": "#0f172a";
+            readonly "--on-surface-muted": "#475569";
+            readonly "--shadow-error": "#991b1b";
+            readonly "--border-strong": "#0f172a";
             readonly "--text-xs": string;
             readonly "--text-sm": string;
             readonly "--text-base": string;
@@ -225,6 +238,8 @@ export declare const themes: {
             readonly "--z-header": string;
             readonly "--z-dropdown": string;
             readonly "--z-modal": string;
+            readonly "--z-overlay": string;
+            readonly "--z-drawer": string;
             readonly "--z-tooltip": string;
             readonly "--duration-fast": string;
             readonly "--duration-normal": string;
@@ -241,6 +256,15 @@ export declare const themes: {
             readonly "--size-icon-md": string;
             readonly "--size-icon-lg": string;
             readonly "--size-touch-target": string;
+            readonly "--common-black": "#000000";
+            readonly "--common-white": "#ffffff";
+            readonly "--border-width": string;
+            readonly "--radius": string;
+            readonly "--shadow-hard": string;
+            readonly "--shadow-hover": string;
+            readonly "--font-heading": string;
+            readonly "--heading-transform": string;
+            readonly "--heading-weight": string;
             readonly "--shadow-sm": string;
             readonly "--shadow-sm-hover": string;
             readonly "--shadow-sm-checked": string;
@@ -255,29 +279,25 @@ export declare const themes: {
             readonly "--foreground": "#E8E9ED";
             readonly "--card-bg": "#1A1F29";
             readonly "--card-border": "#2D3748";
+            readonly "--surface-accent": "#111827";
             readonly "--primary": "#F7B731";
             readonly "--primary-hover": "#F5A623";
             readonly "--primary-foreground": "#0F1419";
             readonly "--shadow-primary": "#000000";
-            readonly "--secondary": "#4A5568";
+            readonly "--secondary": "#4b5563";
             readonly "--secondary-foreground": "#E8E9ED";
             readonly "--accent": "#3B82F6";
-            readonly "--muted": "#718096";
-            readonly "--muted-foreground": "#A0AEC0";
-            readonly "--success": "#48BB78";
+            readonly "--muted": "#6b7280";
+            readonly "--muted-foreground": "#9ca3af";
+            readonly "--success": "#4ade80";
             readonly "--success-foreground": "#0F1419";
-            readonly "--warning": "#ED8936";
+            readonly "--warning": "#F5A623";
             readonly "--warning-foreground": "#0F1419";
             readonly "--error": "#F56565";
             readonly "--error-foreground": "#000000";
+            readonly "--on-surface": "#E8E9ED";
+            readonly "--on-surface-muted": "#9ca3af";
             readonly "--shadow-error": "#000000";
-            readonly "--border-width": "2px";
-            readonly "--radius": "6px";
-            readonly "--shadow-hard": "5px 5px 0px 0px #000000";
-            readonly "--shadow-hover": "7px 7px 0px 0px #000000";
-            readonly "--font-heading": "var(--font-montserrat)";
-            readonly "--heading-transform": "uppercase";
-            readonly "--heading-weight": "700";
             readonly "--text-xs": string;
             readonly "--text-sm": string;
             readonly "--text-base": string;
@@ -308,6 +328,8 @@ export declare const themes: {
             readonly "--z-header": string;
             readonly "--z-dropdown": string;
             readonly "--z-modal": string;
+            readonly "--z-overlay": string;
+            readonly "--z-drawer": string;
             readonly "--z-tooltip": string;
             readonly "--duration-fast": string;
             readonly "--duration-normal": string;
@@ -324,6 +346,16 @@ export declare const themes: {
             readonly "--size-icon-md": string;
             readonly "--size-icon-lg": string;
             readonly "--size-touch-target": string;
+            readonly "--common-black": "#000000";
+            readonly "--common-white": "#ffffff";
+            readonly "--border-strong": "#000000";
+            readonly "--border-width": string;
+            readonly "--radius": string;
+            readonly "--shadow-hard": string;
+            readonly "--shadow-hover": string;
+            readonly "--font-heading": string;
+            readonly "--heading-transform": string;
+            readonly "--heading-weight": string;
             readonly "--shadow-sm": string;
             readonly "--shadow-sm-hover": string;
             readonly "--shadow-sm-checked": string;

package/dist/styles/themes/definitions.js

@@ -1,81 +1,19 @@
-const baseVariables = {
-    // Typography Scale
-    "--text-xs": "0.75rem",
-    "--text-sm": "0.875rem",
-    "--text-base": "1rem",
-    "--text-lg": "1.125rem",
-    "--text-xl": "1.25rem",
-    "--text-2xl": "1.5rem",
-    "--text-3xl": "1.875rem",
-    "--text-4xl": "2.25rem",
-    "--text-5xl": "3rem",
-    "--text-6xl": "3.75rem",
-    // Font Weights
-    "--font-thin": "100",
-    "--font-extralight": "200",
-    "--font-light": "300",
-    "--font-regular": "400",
-    "--font-medium": "500",
-    "--font-semibold": "600",
-    "--font-bold": "700",
-    "--font-extrabold": "800",
-    "--font-black": "900",
-    // Spacing Scale
-    "--spacing-xs": "0.25rem",
-    "--spacing-sm": "0.5rem",
-    "--spacing-md": "1rem",
-    "--spacing-lg": "1.5rem",
-    "--spacing-xl": "2rem",
-    "--spacing-2xl": "3rem",
-    // Z-Indices
-    "--z-base": "0",
-    "--z-elevated": "10",
-    "--z-header": "40",
-    "--z-dropdown": "50",
-    "--z-modal": "100",
-    "--z-tooltip": "200",
-    // Motion
-    "--duration-fast": "150ms",
-    "--duration-normal": "250ms",
-    "--duration-slow": "350ms",
-    "--ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
-    "--ease-out": "cubic-bezier(0.0, 0, 0.2, 1)",
-    "--ease-in": "cubic-bezier(0.4, 0, 1, 1)",
-    // Border Radius
-    "--radius-pill": "9999px",
-    "--radius-full": "50%",
-    // Outline
-    "--outline-width": "2px",
-    "--outline-offset": "2px",
-    // Overlay
-    "--overlay-opacity": "0.5",
-    // Common Sizes
-    "--size-icon-sm": "20px",
-    "--size-icon-md": "24px",
-    "--size-icon-lg": "32px",
-    "--size-touch-target": "44px",
-    // Shadows (consistent relative to theme colors)
-    "--shadow-sm": "2px 2px 0px 0px var(--card-border)",
-    "--shadow-sm-hover": "3px 3px 0px 0px var(--card-border)",
-    "--shadow-sm-checked": "3px 3px 0px 0px var(--card-border)",
-    "--shadow-sm-checked-hover": "4px 4px 0px 0px var(--card-border)",
-    "--shadow-lg": "8px 8px 0px 0px var(--card-border)",
-};
+import { palette, baseVariables } from "../tokens.js";
 export const themes = {
     default: {
         name: "Default",
-        variables: Object.assign(Object.assign({}, baseVariables), { "--background": "#e0e7ff", "--foreground": "#000000", "--card-bg": "#ffffff", "--card-border": "#000000", "--primary": "#a855f7", "--primary-hover": "#9333ea", "--primary-foreground": "#000000", "--shadow-primary": "#7e22ce", "--secondary": "#fbbf24", "--secondary-foreground": "#000000", "--accent": "#ec4899", "--muted": "#94a3b8", "--muted-foreground": "#334155", "--success": "#22c55e", "--success-foreground": "#000000", "--warning": "#f59e0b", "--warning-foreground": "#000000", "--error": "#ef4444", "--error-foreground": "#000000", "--shadow-error": "#b91c1c", "--border-width": "3px", "--radius": "8px", "--shadow-hard": "5px 5px 0px 0px #000000", "--shadow-hover": "7px 7px 0px 0px #000000", "--font-heading": "var(--font-montserrat)", "--heading-transform": "uppercase", "--heading-weight": "900" }),
+        variables: Object.assign(Object.assign({}, baseVariables), { "--background": palette.gray[100], "--foreground": palette.common.black, "--card-bg": palette.common.white, "--card-border": palette.common.black, "--surface-accent": palette.blue[100], "--primary": palette.purple[500], "--primary-hover": palette.purple[600], "--primary-foreground": palette.common.black, "--shadow-primary": palette.purple[700], "--secondary": palette.yellow[400], "--secondary-foreground": palette.common.black, "--accent": palette.red[500], "--muted": palette.gray[400], "--muted-foreground": palette.gray[700], "--success": palette.green[500], "--success-foreground": palette.common.black, "--warning": palette.yellow[500], "--warning-foreground": palette.common.black, "--error": palette.red[500], "--error-foreground": palette.common.black, "--on-surface": palette.common.black, "--on-surface-muted": palette.gray[700], "--shadow-error": palette.red[600] }),
     },
     doom: {
         name: "DOOMSDAY",
-        variables: Object.assign(Object.assign({}, baseVariables), { "--background": "#020617", "--foreground": "#e2e8f0", "--card-bg": "#0f172a", "--card-border": "#1e293b", "--primary": "#10b981", "--primary-hover": "#059669", "--primary-foreground": "#020617", "--shadow-primary": "#000000", "--secondary": "#334155", "--secondary-foreground": "#f8fafc", "--accent": "#fbbf24", "--muted": "#64748b", "--muted-foreground": "#94a3b8", "--success": "#10b981", "--success-foreground": "#020617", "--warning": "#fbbf24", "--warning-foreground": "#020617", "--error": "#ef4444", "--error-foreground": "#000000", "--shadow-error": "#000000", "--border-width": "2px", "--radius": "2px", "--shadow-hard": "5px 5px 0px 0px #000000", "--shadow-hover": "7px 7px 0px 0px #000000", "--font-heading": "var(--font-montserrat)", "--heading-transform": "uppercase", "--heading-weight": "700" }),
+        variables: Object.assign(Object.assign({}, baseVariables), { "--background": palette.slate[950], "--foreground": palette.slate[200], "--card-bg": palette.slate[900], "--card-border": palette.slate[800], "--surface-accent": palette.slate[900], "--primary": palette.green[600], "--primary-hover": palette.green[700], "--primary-foreground": palette.slate[950], "--shadow-primary": palette.common.black, "--secondary": palette.slate[600], "--secondary-foreground": palette.slate[50], "--accent": palette.red[500], "--muted": palette.slate[500], "--muted-foreground": palette.slate[400], "--success": palette.green[600], "--success-foreground": palette.slate[950], "--warning": palette.yellow[500], "--warning-foreground": palette.slate[950], "--error": palette.red[500], "--error-foreground": palette.common.black, "--on-surface": palette.slate[200], "--on-surface-muted": palette.slate[400], "--shadow-error": palette.common.black }),
     },
     neighbor: {
         name: "THE CAPTAIN",
-        variables: Object.assign(Object.assign({}, baseVariables), { "--background": "#F8FAFC", "--foreground": "#0F172A", "--card-bg": "#FFFFFF", "--card-border": "#002D72", "--primary": "#002D72", "--primary-hover": "#1E3A8A", "--primary-foreground": "#FFFFFF", "--shadow-primary": "#001533", "--secondary": "#B91C1C", "--secondary-foreground": "#FFFFFF", "--accent": "#C0C0C0", "--muted": "#64748B", "--muted-foreground": "#475569", "--success": "#15803D", "--success-foreground": "#FFFFFF", "--warning": "#B45309", "--warning-foreground": "#FFFFFF", "--error": "#B91C1C", "--error-foreground": "#FFFFFF", "--shadow-error": "#7f1d1d", "--border-width": "3px", "--radius": "8px", "--shadow-hard": "6px 6px 0px 0px #0F172A", "--shadow-hover": "8px 8px 0px 0px #0F172A", "--font-heading": "var(--font-montserrat)", "--heading-transform": "uppercase", "--heading-weight": "900" }),
+        variables: Object.assign(Object.assign({}, baseVariables), { "--background": palette.slate[50], "--foreground": palette.slate[900], "--card-bg": palette.common.white, "--card-border": palette.common.black, "--surface-accent": palette.slate[100], "--primary": palette.blue[600], "--primary-hover": palette.blue[700], "--primary-foreground": palette.common.white, "--shadow-primary": palette.blue[800], "--secondary": palette.slate[500], "--secondary-foreground": palette.common.white, "--accent": palette.red[600], "--muted": palette.slate[400], "--muted-foreground": palette.slate[600], "--success": palette.green[600], "--success-foreground": palette.common.white, "--warning": palette.yellow[600], "--warning-foreground": palette.gray[950], "--error": palette.red[600], "--error-foreground": palette.common.white, "--on-surface": palette.slate[900], "--on-surface-muted": palette.slate[600], "--shadow-error": palette.red[800], "--border-strong": palette.slate[900] }),
     },
     vigilante: {
         name: "DARK KNIGHT",
-        variables: Object.assign(Object.assign({}, baseVariables), { "--background": "#0F1419", "--foreground": "#E8E9ED", "--card-bg": "#1A1F29", "--card-border": "#2D3748", "--primary": "#F7B731", "--primary-hover": "#F5A623", "--primary-foreground": "#0F1419", "--shadow-primary": "#000000", "--secondary": "#4A5568", "--secondary-foreground": "#E8E9ED", "--accent": "#3B82F6", "--muted": "#718096", "--muted-foreground": "#A0AEC0", "--success": "#48BB78", "--success-foreground": "#0F1419", "--warning": "#ED8936", "--warning-foreground": "#0F1419", "--error": "#F56565", "--error-foreground": "#000000", "--shadow-error": "#000000", "--border-width": "2px", "--radius": "6px", "--shadow-hard": "5px 5px 0px 0px #000000", "--shadow-hover": "7px 7px 0px 0px #000000", "--font-heading": "var(--font-montserrat)", "--heading-transform": "uppercase", "--heading-weight": "700" }),
+        variables: Object.assign(Object.assign({}, baseVariables), { "--background": palette.gray[950], "--foreground": "#E8E9ED", "--card-bg": palette.gray[975], "--card-border": palette.gray[990], "--surface-accent": palette.gray[900], "--primary": palette.yellow[600], "--primary-hover": palette.yellow[700], "--primary-foreground": palette.gray[950], "--shadow-primary": palette.common.black, "--secondary": palette.gray[600], "--secondary-foreground": "#E8E9ED", "--accent": palette.blue[500], "--muted": palette.gray[500], "--muted-foreground": palette.gray[400], "--success": palette.green[400], "--success-foreground": palette.gray[950], "--warning": palette.yellow[700], "--warning-foreground": palette.gray[950], "--error": palette.red[700], "--error-foreground": palette.common.black, "--on-surface": "#E8E9ED", "--on-surface-muted": palette.gray[400], "--shadow-error": palette.common.black }),
     },
 };

package/dist/styles/tokens.d.ts

@@ -0,0 +1,171 @@
+export declare const palette: {
+    readonly common: {
+        readonly black: "#000000";
+        readonly white: "#ffffff";
+    };
+    readonly slate: {
+        readonly 50: "#F8FAFC";
+        readonly 100: "#f1f5f9";
+        readonly 200: "#e2e8f0";
+        readonly 300: "#cbd5e1";
+        readonly 400: "#94a3b8";
+        readonly 500: "#64748b";
+        readonly 600: "#475569";
+        readonly 700: "#334155";
+        readonly 800: "#1e293b";
+        readonly 900: "#0f172a";
+        readonly 950: "#020617";
+    };
+    readonly purple: {
+        readonly 50: "#faf5ff";
+        readonly 100: "#f3e8ff";
+        readonly 200: "#e9d5ff";
+        readonly 300: "#d8b4fe";
+        readonly 400: "#c084fc";
+        readonly 500: "#a855f7";
+        readonly 600: "#9333ea";
+        readonly 700: "#7e22ce";
+        readonly 800: "#6b21a8";
+        readonly 900: "#581c87";
+    };
+    readonly navy: {
+        readonly 50: "#f0fdfa";
+        readonly 100: "#ccfbf1";
+        readonly 200: "#99f6e4";
+        readonly 300: "#5eead4";
+        readonly 400: "#2dd4bf";
+        readonly 500: "#002D72";
+        readonly 600: "#002D72";
+        readonly 700: "#1E3A8A";
+        readonly 800: "#001533";
+        readonly 900: "#0F172A";
+    };
+    readonly blue: {
+        readonly 50: "#eff6ff";
+        readonly 100: "#dbeafe";
+        readonly 200: "#bfdbfe";
+        readonly 300: "#93c5fd";
+        readonly 400: "#60a5fa";
+        readonly 500: "#3B82F6";
+        readonly 600: "#2563eb";
+        readonly 700: "#1d4ed8";
+        readonly 800: "#1e40af";
+        readonly 900: "#1e3a8a";
+    };
+    readonly yellow: {
+        readonly 50: "#fefce8";
+        readonly 100: "#fef9c3";
+        readonly 200: "#fde047";
+        readonly 300: "#fcd34d";
+        readonly 400: "#fbbf24";
+        readonly 500: "#f59e0b";
+        readonly 600: "#F7B731";
+        readonly 700: "#F5A623";
+        readonly 800: "#b45309";
+        readonly 900: "#78350f";
+    };
+    readonly green: {
+        readonly 50: "#f0fdf4";
+        readonly 100: "#dcfce7";
+        readonly 200: "#bbf7d0";
+        readonly 300: "#86efac";
+        readonly 400: "#4ade80";
+        readonly 500: "#22c55e";
+        readonly 600: "#10b981";
+        readonly 700: "#059669";
+        readonly 800: "#15803D";
+        readonly 900: "#14532d";
+    };
+    readonly red: {
+        readonly 50: "#fef2f2";
+        readonly 100: "#fee2e2";
+        readonly 200: "#fecaca";
+        readonly 300: "#fca5a5";
+        readonly 400: "#f87171";
+        readonly 500: "#ef4444";
+        readonly 600: "#b91c1c";
+        readonly 700: "#F56565";
+        readonly 800: "#991b1b";
+        readonly 900: "#7f1d1d";
+    };
+    readonly gray: {
+        readonly 50: "#f9fafb";
+        readonly 100: "#f3f4f6";
+        readonly 200: "#e5e7eb";
+        readonly 300: "#d1d5db";
+        readonly 400: "#9ca3af";
+        readonly 500: "#6b7280";
+        readonly 600: "#4b5563";
+        readonly 700: "#374151";
+        readonly 800: "#1f2937";
+        readonly 900: "#111827";
+        readonly 950: "#0F1419";
+        readonly 975: "#1A1F29";
+        readonly 990: "#2D3748";
+    };
+};
+export declare const baseVariables: {
+    "--text-xs": string;
+    "--text-sm": string;
+    "--text-base": string;
+    "--text-lg": string;
+    "--text-xl": string;
+    "--text-2xl": string;
+    "--text-3xl": string;
+    "--text-4xl": string;
+    "--text-5xl": string;
+    "--text-6xl": string;
+    "--font-thin": string;
+    "--font-extralight": string;
+    "--font-light": string;
+    "--font-regular": string;
+    "--font-medium": string;
+    "--font-semibold": string;
+    "--font-bold": string;
+    "--font-extrabold": string;
+    "--font-black": string;
+    "--spacing-xs": string;
+    "--spacing-sm": string;
+    "--spacing-md": string;
+    "--spacing-lg": string;
+    "--spacing-xl": string;
+    "--spacing-2xl": string;
+    "--z-base": string;
+    "--z-elevated": string;
+    "--z-header": string;
+    "--z-dropdown": string;
+    "--z-modal": string;
+    "--z-overlay": string;
+    "--z-drawer": string;
+    "--z-tooltip": string;
+    "--duration-fast": string;
+    "--duration-normal": string;
+    "--duration-slow": string;
+    "--ease-in-out": string;
+    "--ease-out": string;
+    "--ease-in": string;
+    "--radius-pill": string;
+    "--radius-full": string;
+    "--outline-width": string;
+    "--outline-offset": string;
+    "--overlay-opacity": string;
+    "--size-icon-sm": string;
+    "--size-icon-md": string;
+    "--size-icon-lg": string;
+    "--size-touch-target": string;
+    "--common-black": "#000000";
+    "--common-white": "#ffffff";
+    "--border-strong": "#000000";
+    "--border-width": string;
+    "--radius": string;
+    "--shadow-hard": string;
+    "--shadow-hover": string;
+    "--font-heading": string;
+    "--heading-transform": string;
+    "--heading-weight": string;
+    "--shadow-sm": string;
+    "--shadow-sm-hover": string;
+    "--shadow-sm-checked": string;
+    "--shadow-sm-checked-hover": string;
+    "--shadow-lg": string;
+};