doom-design-system 0.5.0 → 0.6.0

package/dist/styles/palettes.d.ts

@@ -138,8 +138,3 @@ export declare const palette: {
         readonly 990: "#2D3748";
     };
 };
-export declare const baseVariables: {
-    "--common-black": "#000000";
-    "--common-white": "#ffffff";
-    "--border-strong": "#000000";
-};

package/dist/styles/palettes.js

@@ -138,11 +138,3 @@ export const palette = {
         990: "#2D3748",
     },
 };
-// All tokens have been moved to styles/_tokens.css
-// This file now only exports color palettes
-export const baseVariables = {
-    // Common Colors (still needed for JS theme injection)
-    "--common-black": palette.black[950],
-    "--common-white": palette.white[950],
-    "--border-strong": palette.black[950],
-};

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

@@ -29,8 +29,6 @@ export declare const themes: {
             readonly "--surface-accent": "#f1f5f9";
             readonly "--warning": "#f59e0b";
             readonly "--warning-foreground": "#000000";
-            readonly "--common-black": "#000000";
-            readonly "--common-white": "#ffffff";
         };
         readonly solid: {
             "--solid-bg": string;
@@ -70,8 +68,6 @@ export declare const themes: {
             readonly "--surface-accent": "#0f172a";
             readonly "--warning": "#f59e0b";
             readonly "--warning-foreground": "#020617";
-            readonly "--common-black": "#000000";
-            readonly "--common-white": "#ffffff";
         };
         readonly solid: {
             "--solid-bg": string;
@@ -111,8 +107,6 @@ export declare const themes: {
             readonly "--surface-accent": "#f1f5f9";
             readonly "--warning": "#F7B731";
             readonly "--warning-foreground": "#0F1419";
-            readonly "--common-black": "#000000";
-            readonly "--common-white": "#ffffff";
         };
         readonly solid: {
             "--solid-bg": string;
@@ -152,8 +146,6 @@ export declare const themes: {
             readonly "--surface-accent": "#111827";
             readonly "--warning": "#F5A623";
             readonly "--warning-foreground": "#0F1419";
-            readonly "--common-black": "#000000";
-            readonly "--common-white": "#ffffff";
         };
         readonly solid: {
             "--solid-bg": string;

package/dist/styles/themes/definitions.js

@@ -1,9 +1,37 @@
-import { baseVariables, palette } from "../palettes.js";
+import { palette } from "../palettes.js";
 import { createSolidTokens } from "./solid-tokens.js";
 export const themes = {
     default: {
         name: "Default",
-        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], "--surface-brand": palette.purple[500], "--surface-brand-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] }),
+        variables: {
+            "--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],
+            "--surface-brand": palette.purple[500],
+            "--surface-brand-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],
+        },
         solid: createSolidTokens(palette.purple[500], palette.black[950], {
             success: palette.green[500],
             error: palette.red[500],
@@ -12,7 +40,35 @@ export const themes = {
     },
     doom: {
         name: "DOOMSDAY",
-        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], "--surface-brand": palette.green[600], "--surface-brand-foreground": palette.slate[950], "--primary-hover": palette.green[700], "--secondary": palette.slate[600], "--secondary-foreground": palette.slate[50], "--shadow-base": palette.black[950], "--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] }),
+        variables: {
+            "--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],
+            "--surface-brand": palette.green[600],
+            "--surface-brand-foreground": palette.slate[950],
+            "--primary-hover": palette.green[700],
+            "--secondary": palette.slate[600],
+            "--secondary-foreground": palette.slate[50],
+            "--shadow-base": palette.black[950],
+            "--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],
+        },
         solid: createSolidTokens(palette.green[600], palette.black[950], {
             success: palette.green[600],
             error: palette.red[500],
@@ -21,7 +77,35 @@ export const themes = {
     },
     captain: {
         name: "THE CAPTAIN",
-        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[500], "--primary-foreground": palette.black[950], "--surface-brand": palette.blue[500], "--surface-brand-foreground": palette.black[950], "--primary-hover": palette.blue[600], "--secondary": palette.slate[500], "--secondary-foreground": palette.white[950], "--shadow-base": palette.black[950], "--shadow-error": palette.red[900], "--shadow-primary": palette.blue[800], "--success": palette.green[600], "--success-foreground": palette.black[950], "--surface-accent": palette.slate[100], "--warning": palette.yellow[600], "--warning-foreground": palette.gray[950] }),
+        variables: {
+            "--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[500],
+            "--primary-foreground": palette.black[950],
+            "--surface-brand": palette.blue[500],
+            "--surface-brand-foreground": palette.black[950],
+            "--primary-hover": palette.blue[600],
+            "--secondary": palette.slate[500],
+            "--secondary-foreground": palette.white[950],
+            "--shadow-base": palette.black[950],
+            "--shadow-error": palette.red[900],
+            "--shadow-primary": palette.blue[800],
+            "--success": palette.green[600],
+            "--success-foreground": palette.black[950],
+            "--surface-accent": palette.slate[100],
+            "--warning": palette.yellow[600],
+            "--warning-foreground": palette.gray[950],
+        },
         solid: createSolidTokens(palette.blue[500], palette.black[950], {
             success: palette.green[600],
             error: palette.red[600],
@@ -30,7 +114,35 @@ export const themes = {
     },
     vigilante: {
         name: "DARK KNIGHT",
-        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], "--surface-brand": palette.yellow[600], "--surface-brand-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] }),
+        variables: {
+            "--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],
+            "--surface-brand": palette.yellow[600],
+            "--surface-brand-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],
+        },
         solid: createSolidTokens(palette.yellow[600], palette.gray[950], {
             success: palette.green[400],
             error: palette.red[700],

package/dist/styles/types.d.ts

@@ -0,0 +1,2 @@
+export type ControlSize = "sm" | "md" | "lg";
+export declare const DEFAULT_CONTROL_SIZE: ControlSize;

package/dist/styles/types.js

@@ -0,0 +1 @@
+export const DEFAULT_CONTROL_SIZE = "md";