@vadimcomanescu/nadicode-design-system 2.0.6 → 2.0.7

package/scripts/ds-check.mjs

@@ -442,6 +442,14 @@ function checkSourceRepo(packageJson) {
       'package.json must include src/messages in the ds:lint-shipped command.',
     );
   }
+
+  if (existsSync(join(root, "src", "seed-palette.css"))) {
+    addIssue(
+      "src/seed-palette.css",
+      "source-repo-no-seed-palette",
+      "seed-palette.css must not exist in the DS repo. It is a consumer-only file. Sidebar tokens derive from semantic tokens via var() aliases in index.css.",
+    );
+  }
 }
 
 function checkSourceI18nContract() {

package/src/lib/tokens.config.js

@@ -274,50 +274,50 @@ export const bloomScales = {
 // Semantic color tokens mapped from scales
 export const colorTokens = {
   dark: {
-    background: '#101114',       // gray.1
+    background: '#000000',       // true black
     surface: {
-      DEFAULT: '#16191D',        // gray.2
-      hover: '#202328',          // gray.3
-      active: '#292D33',         // gray.4
-      raised: '#33373E',         // gray.5
+      DEFAULT: '#080C0A',        // jade-tinted near-black
+      hover: '#101A15',          // jade.2 brightened for tonal depth delta>=3
+      active: '#16201C',         // jade.3
+      raised: '#1E2A24',         // jade.4
     },
     border: {
-      DEFAULT: '#45494F',        // gray.6
-      hover: '#5B5E61',          // gray.7
-      subtle: 'rgba(200, 220, 240, 0.06)',  // grayAlpha.3
-      'subtle-hover': 'rgba(200, 220, 240, 0.12)', // grayAlpha.5
+      DEFAULT: '#263A30',        // jade-tinted border
+      hover: '#344E40',          // jade-tinted border hover
+      subtle: 'rgba(10, 158, 111, 0.08)',
+      'subtle-hover': 'rgba(10, 158, 111, 0.15)',
     },
     primary: {
-      DEFAULT: '#F4F4F6',        // gray.12
-      foreground: '#101114',     // gray.1
+      DEFAULT: '#E2E8F0',        // cool white
+      foreground: '#000000',
     },
     secondary: {
-      DEFAULT: '#292D33',        // gray.4
-      foreground: '#F4F4F6',     // gray.12
+      DEFAULT: '#16201C',        // jade.3
+      foreground: '#E2E8F0',
     },
     accent: {
-      DEFAULT: '#E8A020',        // gold.9
-      foreground: '#101114',     // gray.1
+      DEFAULT: '#0A9E6F',        // jade green
+      foreground: '#000000',
     },
     destructive: {
-      DEFAULT: '#E8444A',        // warmer crimson
+      DEFAULT: '#DC2626',        // red
       foreground: '#FFFFFF',
     },
     success: {
-      DEFAULT: '#34D474',        // emerald
-      foreground: '#0D1512',     // green.1
+      DEFAULT: '#16A34A',        // green
+      foreground: '#FFFFFF',
     },
     warning: {
-      DEFAULT: '#F28C38',        // true orange
-      foreground: '#16120B',     // dark text
+      DEFAULT: '#D97706',        // amber
+      foreground: '#000000',
     },
     info: {
-      DEFAULT: '#4A9EF8',        // periwinkle-blue
-      foreground: '#0F1520',     // blue.1
+      DEFAULT: '#2563EB',        // blue
+      foreground: '#FFFFFF',
     },
     muted: {
-      DEFAULT: '#292D33',        // gray.4
-      foreground: '#E0E1E5',     // gray.11
+      DEFAULT: '#16201C',        // jade.3
+      foreground: '#B4C0C8',     // muted text
     },
     slider: {
       fill: 'rgba(255, 255, 255, 0.10)',
@@ -325,15 +325,15 @@ export const colorTokens = {
     },
     overlay: '#000000',
     text: {
-      primary: '#F4F4F6',        // gray.12
-      secondary: '#E0E1E5',      // gray.11
-      tertiary: '#C4C6CC',       // gray.10
-    },
-    focusRing: '#E8A020',        // gold.9
-    link: '#F5C96A',             // gold.11
-    input: '#292D33',            // gray.4
-    disabled: '#5B5E61',         // gray.7
-    disabledForeground: '#C4C6CC', // gray.10
+      primary: '#E2E8F0',
+      secondary: '#A0AEBA',
+      tertiary: '#A8B8C8',
+    },
+    focusRing: '#0A9E6F',        // jade
+    link: '#34D399',             // bright jade
+    input: '#16201C',            // jade.3
+    disabled: '#344E40',         // jade border hover
+    disabledForeground: '#A8B8C8', // tertiary text
   },
   light: {
     background: '#F7F7F8',       // gray.1
@@ -358,23 +358,23 @@ export const colorTokens = {
       foreground: '#181D20',     // gray.12
     },
     accent: {
-      DEFAULT: '#8A5E08',        // dark gold
+      DEFAULT: '#059669',        // jade green (light)
       foreground: '#FFFFFF',
     },
     destructive: {
-      DEFAULT: '#C62832',        // warmer crimson
+      DEFAULT: '#C62832',        // crimson
       foreground: '#FFFFFF',
     },
     success: {
-      DEFAULT: '#1A8F4E',        // emerald
+      DEFAULT: '#16A34A',        // green
       foreground: '#FFFFFF',
     },
     warning: {
-      DEFAULT: '#A84A08',        // true orange
+      DEFAULT: '#CA5808',        // orange
       foreground: '#FFFFFF',
     },
     info: {
-      DEFAULT: '#2970DC',        // periwinkle-blue
+      DEFAULT: '#2563EB',        // blue
       foreground: '#FFFFFF',
     },
     muted: {
@@ -391,8 +391,8 @@ export const colorTokens = {
       secondary: '#262D31',      // gray.11
       tertiary: '#384147',       // gray.10
     },
-    focusRing: '#8A5E08',        // dark gold
-    link: '#7A5210',             // gold.11
+    focusRing: '#059669',        // jade
+    link: '#047854',             // dark jade
     input: '#DEE1E3',            // gray.3
     disabled: '#9AA5AC',         // gray.6
     disabledForeground: '#5F6D77', // gray.8
@@ -467,7 +467,7 @@ export const styleTokens = {
     radius: { sm: '4px', md: '8px', lg: '16px' },
     shadows: {
       'glow': '0 0 20px -5px rgba(255, 255, 255, 0.1)',
-      'glow-accent': '0 0 20px -5px rgba(232, 160, 32, 0.15)',
+      'glow-accent': '0 0 20px -5px rgba(10, 158, 111, 0.15)',
     },
     glass: {
       saturate: 1.15,
@@ -559,3 +559,25 @@ export const tokens = {
     'glow-accent': '0 0 20px -5px rgba(232, 160, 32, 0.15)',
   }
 };
+
+/**
+ * Sidebar token derivations. Maps sidebar CSS vars to semantic token CSS vars.
+ * The generator emits var() references so consumer overrides cascade automatically.
+ */
+export const sidebarTokens = {
+  base: {
+    'sidebar-background':         '--color-background',
+    'sidebar-foreground':         '--color-text-secondary',
+    'sidebar-primary':            '--color-primary',
+    'sidebar-primary-foreground': '--color-primary-foreground',
+    'sidebar-accent':             '--color-secondary',
+    'sidebar-accent-foreground':  '--color-secondary-foreground',
+    'sidebar-border':             '--color-border',
+    'sidebar-ring':               '--color-focus-ring',
+  },
+  overrides: {
+    dark: {
+      'sidebar-foreground': '--color-primary',
+    },
+  },
+};