doom-design-system 0.4.2 → 0.4.3

package/dist/components/Button/Button.module.css

@@ -19,7 +19,7 @@
 }
 .button:hover {
   transform: translate(-2px, -2px);
-  box-shadow: 6px 6px 0px 0px var(--border-strong);
+  box-shadow: 6px 6px 0px 0px var(--shadow-base);
 }
 .button:focus-visible {
   outline: none;

package/dist/components/Drawer/Drawer.module.css

@@ -35,7 +35,7 @@
   border-left: 0;
   /* Standard directional shadow for left-anchored panel */
   /* Bottom-Right shadow for left-anchored elements */
-  box-shadow: 8px 8px 0 0 var(--border-strong);
+  box-shadow: 8px 8px 0 0 var(--shadow-base);
   border-top-right-radius: var(--radius);
   border-bottom-right-radius: var(--radius);
   transform: translateX(calc(-100% - 20px));
@@ -46,7 +46,7 @@
   border-right: 0;
   /* Standard directional shadow for right-anchored panel */
   /* Bottom-Left shadow for right-anchored elements */
-  box-shadow: -8px 8px 0 0 var(--border-strong);
+  box-shadow: -8px 8px 0 0 var(--shadow-base);
   border-top-left-radius: var(--radius);
   border-bottom-left-radius: var(--radius);
   transform: translateX(calc(100% + 20px));

package/dist/components/Link/Link.module.css

@@ -55,7 +55,7 @@
 }
 .link.button:hover {
   transform: translate(-2px, -2px);
-  box-shadow: 6px 6px 0px 0px var(--border-strong);
+  box-shadow: 6px 6px 0px 0px var(--shadow-base);
 }
 .link.button:hover {
   filter: brightness(1.1);

package/dist/components/Select/Select.module.css

@@ -27,7 +27,7 @@
 }
 .trigger:hover {
   transform: translate(-2px, -2px);
-  box-shadow: 6px 6px 0px 0px var(--border-strong);
+  box-shadow: 6px 6px 0px 0px var(--shadow-base);
 }
 .trigger:focus, .trigger:focus-visible, .trigger[aria-expanded=true] {
   outline: none;

package/dist/components/Sheet/Sheet.module.css

@@ -29,7 +29,7 @@
   border-top-right-radius: var(--radius);
   /* Brutalist Hard Shadow - Top anchored */
   /* Top-Right heavy shadow */
-  box-shadow: 8px -8px 0 0 var(--border-strong);
+  box-shadow: 8px -8px 0 0 var(--shadow-base);
   display: flex;
   flex-direction: column;
   z-index: var(--z-drawer);

package/dist/components/SplitButton/SplitButton.module.css

@@ -15,7 +15,7 @@
 }
 .container:hover {
   transform: translate(-2px, -2px);
-  box-shadow: 6px 6px 0px 0px var(--border-strong);
+  box-shadow: 6px 6px 0px 0px var(--shadow-base);
 }
 .container[data-state=open] {
   transform: translate(-2px, -2px);

package/dist/styles/globals.css

@@ -1789,17 +1789,17 @@ body {
 }
 body .shadow-top-hard {
   /* Top-Right heavy shadow */
-  box-shadow: 8px -8px 0 0 var(--border-strong);
+  box-shadow: 8px -8px 0 0 var(--shadow-base);
 }
 body .shadow-bottom-hard {
   /* Standard Bottom-Right shadow */
-  box-shadow: 8px 8px 0 0 var(--border-strong);
+  box-shadow: 8px 8px 0 0 var(--shadow-base);
 }
 body .shadow-left-hard {
   /* Bottom-Left shadow for right-anchored elements */
-  box-shadow: -8px 8px 0 0 var(--border-strong);
+  box-shadow: -8px 8px 0 0 var(--shadow-base);
 }
 body .shadow-right-hard {
   /* Bottom-Right shadow for left-anchored elements */
-  box-shadow: 8px 8px 0 0 var(--border-strong);
+  box-shadow: 8px 8px 0 0 var(--shadow-base);
 }

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

@@ -2,30 +2,31 @@ export declare const themes: {
     readonly default: {
         readonly name: "Default";
         readonly variables: {
+            readonly "--accent": "#ef4444";
             readonly "--background": "#e0e7ff";
-            readonly "--foreground": "#000000";
+            readonly "--border-strong": "#000000";
             readonly "--card-bg": "#ffffff";
             readonly "--card-border": "#000000";
-            readonly "--surface-accent": "#f1f5f9";
-            readonly "--border-strong": "#000000";
+            readonly "--error": "#ef4444";
+            readonly "--error-foreground": "#000000";
+            readonly "--foreground": "#000000";
+            readonly "--muted": "#9ca3af";
+            readonly "--muted-foreground": "#374151";
+            readonly "--on-surface": "#000000";
+            readonly "--on-surface-muted": "#374151";
             readonly "--primary": "#a855f7";
-            readonly "--primary-hover": "#9333ea";
             readonly "--primary-foreground": "#000000";
-            readonly "--shadow-primary": "#7e22ce";
+            readonly "--primary-hover": "#9333ea";
             readonly "--secondary": "#fbbf24";
             readonly "--secondary-foreground": "#000000";
-            readonly "--accent": "#ef4444";
-            readonly "--muted": "#9ca3af";
-            readonly "--muted-foreground": "#374151";
+            readonly "--shadow-base": "#000000";
+            readonly "--shadow-error": "#991b1b";
+            readonly "--shadow-primary": "#6b21a8";
             readonly "--success": "#22c55e";
             readonly "--success-foreground": "#000000";
+            readonly "--surface-accent": "#f1f5f9";
             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 "--text-xs": string;
             readonly "--text-sm": string;
             readonly "--text-base": string;
@@ -93,30 +94,31 @@ export declare const themes: {
     readonly doom: {
         readonly name: "DOOMSDAY";
         readonly variables: {
+            readonly "--accent": "#ef4444";
             readonly "--background": "#020617";
-            readonly "--foreground": "#e2e8f0";
+            readonly "--border-strong": "#334155";
             readonly "--card-bg": "#0f172a";
             readonly "--card-border": "#1e293b";
-            readonly "--border-strong": "#334155";
-            readonly "--surface-accent": "#0f172a";
+            readonly "--error": "#ef4444";
+            readonly "--error-foreground": "#000000";
+            readonly "--foreground": "#e2e8f0";
+            readonly "--muted": "#64748b";
+            readonly "--muted-foreground": "#94a3b8";
+            readonly "--on-surface": "#e2e8f0";
+            readonly "--on-surface-muted": "#94a3b8";
             readonly "--primary": "#10b981";
-            readonly "--primary-hover": "#059669";
             readonly "--primary-foreground": "#020617";
-            readonly "--shadow-primary": "#000000";
+            readonly "--primary-hover": "#059669";
             readonly "--secondary": "#475569";
             readonly "--secondary-foreground": "#F8FAFC";
-            readonly "--accent": "#ef4444";
-            readonly "--muted": "#64748b";
-            readonly "--muted-foreground": "#94a3b8";
+            readonly "--shadow-base": "rgba(0, 0, 0, 0.5)";
+            readonly "--shadow-error": "#991b1b";
+            readonly "--shadow-primary": "#14532d";
             readonly "--success": "#10b981";
             readonly "--success-foreground": "#020617";
+            readonly "--surface-accent": "#0f172a";
             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 "--text-xs": string;
             readonly "--text-sm": string;
             readonly "--text-base": string;
@@ -181,33 +183,34 @@ export declare const themes: {
             readonly "--shadow-lg": string;
         };
     };
-    readonly neighbor: {
+    readonly captain: {
         readonly name: "THE CAPTAIN";
         readonly variables: {
+            readonly "--accent": "#b91c1c";
             readonly "--background": "#F8FAFC";
-            readonly "--foreground": "#0f172a";
+            readonly "--border-strong": "#0f172a";
             readonly "--card-bg": "#ffffff";
             readonly "--card-border": "#000000";
-            readonly "--surface-accent": "#f1f5f9";
+            readonly "--error": "#b91c1c";
+            readonly "--error-foreground": "#ffffff";
+            readonly "--foreground": "#0f172a";
+            readonly "--muted": "#94a3b8";
+            readonly "--muted-foreground": "#475569";
+            readonly "--on-surface": "#0f172a";
+            readonly "--on-surface-muted": "#475569";
             readonly "--primary": "#2563eb";
-            readonly "--primary-hover": "#1d4ed8";
             readonly "--primary-foreground": "#ffffff";
-            readonly "--shadow-primary": "#1e40af";
+            readonly "--primary-hover": "#1d4ed8";
             readonly "--secondary": "#64748b";
             readonly "--secondary-foreground": "#ffffff";
-            readonly "--accent": "#b91c1c";
-            readonly "--muted": "#94a3b8";
-            readonly "--muted-foreground": "#475569";
+            readonly "--shadow-base": "#000000";
+            readonly "--shadow-error": "#7f1d1d";
+            readonly "--shadow-primary": "#1e3a8a";
             readonly "--success": "#10b981";
             readonly "--success-foreground": "#ffffff";
+            readonly "--surface-accent": "#f1f5f9";
             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;
@@ -275,30 +278,31 @@ export declare const themes: {
     readonly vigilante: {
         readonly name: "DARK KNIGHT";
         readonly variables: {
+            readonly "--accent": "#3B82F6";
             readonly "--background": "#0F1419";
-            readonly "--foreground": "#E8E9ED";
+            readonly "--border-strong": "#111827";
             readonly "--card-bg": "#1A1F29";
             readonly "--card-border": "#2D3748";
-            readonly "--border-strong": "#111827";
-            readonly "--surface-accent": "#111827";
+            readonly "--error": "#F56565";
+            readonly "--error-foreground": "#000000";
+            readonly "--foreground": "#E8E9ED";
+            readonly "--muted": "#6b7280";
+            readonly "--muted-foreground": "#9ca3af";
+            readonly "--on-surface": "#E8E9ED";
+            readonly "--on-surface-muted": "#9ca3af";
             readonly "--primary": "#F7B731";
-            readonly "--primary-hover": "#F5A623";
             readonly "--primary-foreground": "#0F1419";
-            readonly "--shadow-primary": "#000000";
+            readonly "--primary-hover": "#F5A623";
             readonly "--secondary": "#4b5563";
             readonly "--secondary-foreground": "#E8E9ED";
-            readonly "--accent": "#3B82F6";
-            readonly "--muted": "#6b7280";
-            readonly "--muted-foreground": "#9ca3af";
+            readonly "--shadow-base": "#000000";
+            readonly "--shadow-error": "#7f1d1d";
+            readonly "--shadow-primary": "#78350f";
             readonly "--success": "#4ade80";
             readonly "--success-foreground": "#0F1419";
+            readonly "--surface-accent": "#111827";
             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 "--text-xs": string;
             readonly "--text-sm": string;
             readonly "--text-base": string;

package/dist/styles/themes/definitions.js

@@ -2,18 +2,18 @@ import { palette, baseVariables } from "../tokens.js";
 export const themes = {
     default: {
         name: "Default",
-        variables: Object.assign(Object.assign({}, baseVariables), { "--background": palette.indigo[100], "--foreground": palette.common.black, "--card-bg": palette.common.white, "--card-border": palette.common.black, "--surface-accent": palette.slate[100], "--border-strong": palette.common.black, "--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] }),
+        variables: Object.assign(Object.assign({}, baseVariables), { "--accent": palette.red[500], "--background": palette.indigo[100], "--border-strong": palette.black[950], "--card-bg": palette.white[950], "--card-border": palette.black[950], "--error": palette.red[500], "--error-foreground": palette.black[950], "--foreground": palette.black[950], "--muted": palette.gray[400], "--muted-foreground": palette.gray[700], "--on-surface": palette.black[950], "--on-surface-muted": palette.gray[700], "--primary": palette.purple[500], "--primary-foreground": palette.black[950], "--primary-hover": palette.purple[600], "--secondary": palette.yellow[400], "--secondary-foreground": palette.black[950], "--shadow-base": palette.black[950], "--shadow-error": palette.red[800], "--shadow-primary": palette.purple[800], "--success": palette.green[500], "--success-foreground": palette.black[950], "--surface-accent": palette.slate[100], "--warning": palette.yellow[500], "--warning-foreground": palette.black[950] }),
     },
     doom: {
         name: "DOOMSDAY",
-        variables: Object.assign(Object.assign({}, baseVariables), { "--background": palette.slate[950], "--foreground": palette.slate[200], "--card-bg": palette.slate[900], "--card-border": palette.slate[800], "--border-strong": palette.slate[700], "--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 }),
+        variables: Object.assign(Object.assign({}, baseVariables), { "--accent": palette.red[500], "--background": palette.slate[950], "--border-strong": palette.slate[700], "--card-bg": palette.slate[900], "--card-border": palette.slate[800], "--error": palette.red[500], "--error-foreground": palette.black[950], "--foreground": palette.slate[200], "--muted": palette.slate[500], "--muted-foreground": palette.slate[400], "--on-surface": palette.slate[200], "--on-surface-muted": palette.slate[400], "--primary": palette.green[600], "--primary-foreground": palette.slate[950], "--primary-hover": palette.green[700], "--secondary": palette.slate[600], "--secondary-foreground": palette.slate[50], "--shadow-base": palette.black[500], "--shadow-error": palette.red[800], "--shadow-primary": palette.green[900], "--success": palette.green[600], "--success-foreground": palette.slate[950], "--surface-accent": palette.slate[900], "--warning": palette.yellow[500], "--warning-foreground": palette.slate[950] }),
     },
-    neighbor: {
+    captain: {
         name: "THE CAPTAIN",
-        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] }),
+        variables: Object.assign(Object.assign({}, baseVariables), { "--accent": palette.red[600], "--background": palette.slate[50], "--border-strong": palette.slate[900], "--card-bg": palette.white[950], "--card-border": palette.black[950], "--error": palette.red[600], "--error-foreground": palette.white[950], "--foreground": palette.slate[900], "--muted": palette.slate[400], "--muted-foreground": palette.slate[600], "--on-surface": palette.slate[900], "--on-surface-muted": palette.slate[600], "--primary": palette.blue[600], "--primary-foreground": palette.white[950], "--primary-hover": palette.blue[700], "--secondary": palette.slate[500], "--secondary-foreground": palette.white[950], "--shadow-base": palette.black[950], "--shadow-error": palette.red[900], "--shadow-primary": palette.blue[900], "--success": palette.green[600], "--success-foreground": palette.white[950], "--surface-accent": palette.slate[100], "--warning": palette.yellow[600], "--warning-foreground": palette.gray[950] }),
     },
     vigilante: {
         name: "DARK KNIGHT",
-        variables: Object.assign(Object.assign({}, baseVariables), { "--background": palette.gray[950], "--foreground": "#E8E9ED", "--card-bg": palette.gray[975], "--card-border": palette.gray[990], "--border-strong": palette.gray[900], "--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 }),
+        variables: Object.assign(Object.assign({}, baseVariables), { "--accent": palette.blue[500], "--background": palette.gray[950], "--border-strong": palette.gray[900], "--card-bg": palette.gray[975], "--card-border": palette.gray[990], "--error": palette.red[700], "--error-foreground": palette.black[950], "--foreground": "#E8E9ED", "--muted": palette.gray[500], "--muted-foreground": palette.gray[400], "--on-surface": "#E8E9ED", "--on-surface-muted": palette.gray[400], "--primary": palette.yellow[600], "--primary-foreground": palette.gray[950], "--primary-hover": palette.yellow[700], "--secondary": palette.gray[600], "--secondary-foreground": "#E8E9ED", "--shadow-base": palette.black[950], "--shadow-error": palette.red[900], "--shadow-primary": palette.yellow[900], "--success": palette.green[400], "--success-foreground": palette.gray[950], "--surface-accent": palette.gray[900], "--warning": palette.yellow[700], "--warning-foreground": palette.gray[950] }),
     },
 };

package/dist/styles/tokens.d.ts

@@ -1,7 +1,29 @@
 export declare const palette: {
-    readonly common: {
-        readonly black: "#000000";
-        readonly white: "#ffffff";
+    readonly black: {
+        readonly 50: "rgba(0, 0, 0, 0.05)";
+        readonly 100: "rgba(0, 0, 0, 0.1)";
+        readonly 200: "rgba(0, 0, 0, 0.2)";
+        readonly 300: "rgba(0, 0, 0, 0.3)";
+        readonly 400: "rgba(0, 0, 0, 0.4)";
+        readonly 500: "rgba(0, 0, 0, 0.5)";
+        readonly 600: "rgba(0, 0, 0, 0.6)";
+        readonly 700: "rgba(0, 0, 0, 0.7)";
+        readonly 800: "rgba(0, 0, 0, 0.8)";
+        readonly 900: "rgba(0, 0, 0, 0.9)";
+        readonly 950: "#000000";
+    };
+    readonly white: {
+        readonly 50: "rgba(255, 255, 255, 0.05)";
+        readonly 100: "rgba(255, 255, 255, 0.1)";
+        readonly 200: "rgba(255, 255, 255, 0.2)";
+        readonly 300: "rgba(255, 255, 255, 0.3)";
+        readonly 400: "rgba(255, 255, 255, 0.4)";
+        readonly 500: "rgba(255, 255, 255, 0.5)";
+        readonly 600: "rgba(255, 255, 255, 0.6)";
+        readonly 700: "rgba(255, 255, 255, 0.7)";
+        readonly 800: "rgba(255, 255, 255, 0.8)";
+        readonly 900: "rgba(255, 255, 255, 0.9)";
+        readonly 950: "#ffffff";
     };
     readonly slate: {
         readonly 50: "#F8FAFC";

package/dist/styles/tokens.js

@@ -1,7 +1,29 @@
 export const palette = {
-    common: {
-        black: "#000000",
-        white: "#ffffff",
+    black: {
+        50: "rgba(0, 0, 0, 0.05)",
+        100: "rgba(0, 0, 0, 0.1)",
+        200: "rgba(0, 0, 0, 0.2)",
+        300: "rgba(0, 0, 0, 0.3)",
+        400: "rgba(0, 0, 0, 0.4)",
+        500: "rgba(0, 0, 0, 0.5)",
+        600: "rgba(0, 0, 0, 0.6)",
+        700: "rgba(0, 0, 0, 0.7)",
+        800: "rgba(0, 0, 0, 0.8)",
+        900: "rgba(0, 0, 0, 0.9)",
+        950: "#000000",
+    },
+    white: {
+        50: "rgba(255, 255, 255, 0.05)",
+        100: "rgba(255, 255, 255, 0.1)",
+        200: "rgba(255, 255, 255, 0.2)",
+        300: "rgba(255, 255, 255, 0.3)",
+        400: "rgba(255, 255, 255, 0.4)",
+        500: "rgba(255, 255, 255, 0.5)",
+        600: "rgba(255, 255, 255, 0.6)",
+        700: "rgba(255, 255, 255, 0.7)",
+        800: "rgba(255, 255, 255, 0.8)",
+        900: "rgba(255, 255, 255, 0.9)",
+        950: "#ffffff",
     },
     slate: {
         50: "#F8FAFC",
@@ -175,15 +197,15 @@ export const baseVariables = {
     "--size-icon-lg": "32px",
     "--size-touch-target": "44px",
     // Common Colors
-    "--common-black": palette.common.black,
-    "--common-white": palette.common.white,
+    "--common-black": palette.black[950],
+    "--common-white": palette.white[950],
     // Functional Tokens (Structure)
-    "--border-strong": palette.common.black,
+    "--border-strong": palette.black[950],
     // Structural Standards (Global)
     "--border-width": "2px",
     "--radius": "4px",
-    "--shadow-hard": "4px 4px 0px 0px var(--border-strong)",
-    "--shadow-hover": "6px 6px 0px 0px var(--border-strong)",
+    "--shadow-hard": "4px 4px 0px 0px var(--shadow-base)",
+    "--shadow-hover": "6px 6px 0px 0px var(--shadow-base)",
     // Typography Standards (Global)
     "--font-heading": "var(--font-montserrat)",
     "--heading-transform": "uppercase",