@vadimcomanescu/nadicode-design-system 4.0.7 → 4.0.9

package/src/lib/tokens.config.js

@@ -3,32 +3,32 @@
 export const colorScales = {
   dark: {
     gray: {
-      1:  '#101114',
-      2:  '#16191D',
-      3:  '#202328',
-      4:  '#292D33',
-      5:  '#33373E',
-      6:  '#45494F',
-      7:  '#5B5E61',
-      8:  '#6E7782',
-      9:  '#89919B',
-      10: '#C4C6CC',
-      11: '#E0E1E5',
-      12: '#F4F4F6',
+      1:  '#0A0A0A',
+      2:  '#141414',
+      3:  '#1E1E1E',
+      4:  '#282828',
+      5:  '#333333',
+      6:  '#454545',
+      7:  '#5C5C5C',
+      8:  '#737373',
+      9:  '#8A8A8A',
+      10: '#C4C4C4',
+      11: '#E0E0E0',
+      12: '#F4F4F4',
     },
     grayAlpha: {
-      1:  'rgba(200, 220, 240, 0.02)',
-      2:  'rgba(200, 220, 240, 0.04)',
-      3:  'rgba(200, 220, 240, 0.06)',
-      4:  'rgba(200, 220, 240, 0.09)',
-      5:  'rgba(200, 220, 240, 0.12)',
-      6:  'rgba(200, 220, 240, 0.16)',
-      7:  'rgba(200, 220, 240, 0.22)',
-      8:  'rgba(200, 220, 240, 0.32)',
-      9:  'rgba(200, 220, 240, 0.45)',
-      10: 'rgba(200, 220, 240, 0.66)',
-      11: 'rgba(200, 220, 240, 0.82)',
-      12: 'rgba(200, 220, 240, 0.97)',
+      1:  'rgba(210, 210, 210, 0.02)',
+      2:  'rgba(210, 210, 210, 0.04)',
+      3:  'rgba(210, 210, 210, 0.06)',
+      4:  'rgba(210, 210, 210, 0.09)',
+      5:  'rgba(210, 210, 210, 0.12)',
+      6:  'rgba(210, 210, 210, 0.16)',
+      7:  'rgba(210, 210, 210, 0.22)',
+      8:  'rgba(210, 210, 210, 0.32)',
+      9:  'rgba(210, 210, 210, 0.45)',
+      10: 'rgba(210, 210, 210, 0.66)',
+      11: 'rgba(210, 210, 210, 0.82)',
+      12: 'rgba(210, 210, 210, 0.97)',
     },
     gold: {
       1:  '#0E0C08',
@@ -117,32 +117,32 @@ export const colorScales = {
   },
   light: {
     gray: {
-      1:  '#F7F7F8',
-      2:  '#ECEDEE',
-      3:  '#DEE1E3',
-      4:  '#CDD2D5',
-      5:  '#B7BDC2',
-      6:  '#9AA5AC',
-      7:  '#7B8993',
-      8:  '#5F6D77',
-      9:  '#4A565E',
-      10: '#384147',
-      11: '#262D31',
-      12: '#181D20',
+      1:  '#FAFAFA',
+      2:  '#F0F0F0',
+      3:  '#E5E5E5',
+      4:  '#D4D4D4',
+      5:  '#B5B5B5',
+      6:  '#9A9A9A',
+      7:  '#787878',
+      8:  '#5E5E5E',
+      9:  '#4A4A4A',
+      10: '#383838',
+      11: '#262626',
+      12: '#171717',
     },
     grayAlpha: {
-      1:  'rgba(0, 30, 60, 0.02)',
-      2:  'rgba(0, 30, 60, 0.04)',
-      3:  'rgba(0, 30, 60, 0.07)',
-      4:  'rgba(0, 30, 60, 0.11)',
-      5:  'rgba(0, 30, 60, 0.15)',
-      6:  'rgba(0, 30, 60, 0.20)',
-      7:  'rgba(0, 30, 60, 0.29)',
-      8:  'rgba(0, 30, 60, 0.41)',
-      9:  'rgba(0, 30, 60, 0.58)',
-      10: 'rgba(0, 30, 60, 0.66)',
-      11: 'rgba(0, 30, 60, 0.76)',
-      12: 'rgba(0, 30, 60, 0.90)',
+      1:  'rgba(0, 0, 0, 0.02)',
+      2:  'rgba(0, 0, 0, 0.04)',
+      3:  'rgba(0, 0, 0, 0.07)',
+      4:  'rgba(0, 0, 0, 0.11)',
+      5:  'rgba(0, 0, 0, 0.15)',
+      6:  'rgba(0, 0, 0, 0.20)',
+      7:  'rgba(0, 0, 0, 0.29)',
+      8:  'rgba(0, 0, 0, 0.41)',
+      9:  'rgba(0, 0, 0, 0.58)',
+      10: 'rgba(0, 0, 0, 0.66)',
+      11: 'rgba(0, 0, 0, 0.76)',
+      12: 'rgba(0, 0, 0, 0.90)',
     },
     gold: {
       1:  '#FDFAF3',
@@ -271,29 +271,45 @@ export const bloomScales = {
   },
 };
 
+// Semantic role for each step in a 12-step Radix-style color scale
+export const scaleSemantics = {
+  1:  { name: 'app-bg',          role: 'Page backgrounds' },
+  2:  { name: 'subtle-bg',       role: 'Subtle section backgrounds' },
+  3:  { name: 'element-bg',      role: 'Card/component backgrounds' },
+  4:  { name: 'element-bg-hover', role: 'Hover state for components' },
+  5:  { name: 'element-bg-active', role: 'Active/pressed state' },
+  6:  { name: 'border-subtle',   role: 'Subtle borders, separators' },
+  7:  { name: 'border-default',  role: 'Default borders' },
+  8:  { name: 'border-strong',   role: 'Strong borders, focus rings' },
+  9:  { name: 'solid-bg',        role: 'Solid backgrounds (badges, buttons)' },
+  10: { name: 'solid-bg-hover',  role: 'Hover for solid backgrounds' },
+  11: { name: 'text-low',        role: 'Low-contrast text' },
+  12: { name: 'text-high',       role: 'High-contrast text' },
+};
+
 // Semantic color tokens mapped from scales
 export const colorTokens = {
   dark: {
     background: '#000000',       // true black
     surface: {
-      DEFAULT: '#080C0A',        // jade-tinted near-black
-      hover: '#101A15',          // jade.2 brightened for tonal depth delta>=3
-      active: '#16201C',         // jade.3
-      raised: '#1E2A24',         // jade.4
+      DEFAULT: '#141414',        // gray.2
+      hover: '#1E1E1E',          // gray.3
+      active: '#282828',         // gray.4
+      raised: '#1E1E1E',         // gray.3
     },
     border: {
-      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)',
+      DEFAULT: '#454545',        // gray.6
+      hover: '#5C5C5C',          // gray.7
+      subtle: 'rgba(255, 255, 255, 0.08)',
+      'subtle-hover': 'rgba(255, 255, 255, 0.15)',
     },
     primary: {
-      DEFAULT: '#E2E8F0',        // cool white
+      DEFAULT: '#EDEDED',        // neutral white
       foreground: '#000000',
     },
     secondary: {
-      DEFAULT: '#16201C',        // jade.3
-      foreground: '#E2E8F0',
+      DEFAULT: '#1E1E1E',        // gray.3
+      foreground: '#EDEDED',
     },
     accent: {
       DEFAULT: '#0A9E6F',        // jade green
@@ -316,8 +332,8 @@ export const colorTokens = {
       foreground: '#FFFFFF',
     },
     muted: {
-      DEFAULT: '#16201C',        // jade.3
-      foreground: '#B4C0C8',     // muted text
+      DEFAULT: '#1E1E1E',        // gray.3
+      foreground: '#A1A1A1',     // muted text (neutral)
     },
     slider: {
       fill: 'rgba(255, 255, 255, 0.10)',
@@ -325,37 +341,37 @@ export const colorTokens = {
     },
     overlay: '#000000',
     text: {
-      primary: '#E2E8F0',
-      secondary: '#A0AEBA',
-      tertiary: '#A8B8C8',
+      primary: '#EDEDED',
+      secondary: '#A1A1A1',
+      tertiary: '#8B8B8B',
     },
     focusRing: '#0A9E6F',        // jade
     link: '#34D399',             // bright jade
-    input: '#16201C',            // jade.3
-    disabled: '#344E40',         // jade border hover
-    disabledForeground: '#A8B8C8', // tertiary text
+    input: '#1E1E1E',            // gray.3
+    disabled: '#454545',         // gray.6
+    disabledForeground: '#8B8B8B', // tertiary text (neutral)
   },
   light: {
-    background: '#F7F7F8',       // gray.1
+    background: '#FAFAFA',       // gray.1
     surface: {
-      DEFAULT: '#ECEDEE',        // gray.2
-      hover: '#DEE1E3',          // gray.3
-      active: '#CDD2D5',         // gray.4
-      raised: '#ECEDEE',         // gray.2
+      DEFAULT: '#F0F0F0',        // gray.2
+      hover: '#E5E5E5',          // gray.3
+      active: '#D4D4D4',         // gray.4
+      raised: '#F0F0F0',         // gray.2
     },
     border: {
-      DEFAULT: '#9AA5AC',        // gray.6
-      hover: '#7B8993',          // gray.7
-      subtle: 'rgba(0, 30, 60, 0.07)',    // grayAlpha.3
-      'subtle-hover': 'rgba(0, 30, 60, 0.15)', // grayAlpha.5
+      DEFAULT: '#9A9A9A',        // gray.6
+      hover: '#787878',          // gray.7
+      subtle: 'rgba(0, 0, 0, 0.07)',      // grayAlpha.3
+      'subtle-hover': 'rgba(0, 0, 0, 0.15)', // grayAlpha.5
     },
     primary: {
-      DEFAULT: '#181D20',        // gray.12
-      foreground: '#F7F7F8',     // gray.1
+      DEFAULT: '#171717',        // gray.12
+      foreground: '#FAFAFA',     // gray.1
     },
     secondary: {
-      DEFAULT: '#DEE1E3',        // gray.3
-      foreground: '#181D20',     // gray.12
+      DEFAULT: '#E5E5E5',        // gray.3
+      foreground: '#171717',     // gray.12
     },
     accent: {
       DEFAULT: '#059669',        // jade green (light)
@@ -378,8 +394,8 @@ export const colorTokens = {
       foreground: '#FFFFFF',
     },
     muted: {
-      DEFAULT: '#DEE1E3',        // gray.3
-      foreground: '#262D31',     // gray.11
+      DEFAULT: '#E5E5E5',        // gray.3
+      foreground: '#4F4F4F',     // neutral secondary
     },
     slider: {
       fill: 'rgba(0, 0, 0, 0.25)',
@@ -387,15 +403,15 @@ export const colorTokens = {
     },
     overlay: '#000000',
     text: {
-      primary: '#181D20',        // gray.12
-      secondary: '#262D31',      // gray.11
-      tertiary: '#384147',       // gray.10
+      primary: '#171717',        // gray.12
+      secondary: '#4F4F4F',      // ~gray.8
+      tertiary: '#666666',       // ~gray.7
     },
     focusRing: '#059669',        // jade
     link: '#047854',             // dark jade
-    input: '#DEE1E3',            // gray.3
-    disabled: '#9AA5AC',         // gray.6
-    disabledForeground: '#5F6D77', // gray.8
+    input: '#E5E5E5',            // gray.3
+    disabled: '#9A9A9A',         // gray.6
+    disabledForeground: '#5E5E5E', // gray.8
   },
   bloom: {
     background: '#FEFDFB',         // sand.1 (warm white)

package/tailwind.config.js

@@ -135,6 +135,9 @@ const config = {
       letterSpacing: {
         tighter: 'var(--tracking-tighter)',
         tight: 'var(--tracking-tight)',
+        display: '-0.04em',
+        section: '-0.03em',
+        sub: '-0.02em',
         normal: 'var(--tracking-normal)',
         wide: 'var(--tracking-wide)',
         wider: 'var(--tracking-wider)',