@nadicodeai/design-system 0.5.3 → 0.7.0

package/dist/tailwind/nadicode.theme.css

@@ -10,19 +10,22 @@
   --card-foreground: var(--color-ink);
   --popover: var(--color-canvas);
   --popover-foreground: var(--color-ink);
-  --primary: var(--color-nadicode-primary);
-  --primary-foreground: var(--color-on-primary);
+  --primary: var(--color-action);
+  --primary-foreground: var(--color-action-foreground);
+  --primary-hover: var(--color-action-hover);
+  --primary-active: var(--color-action-active);
   --secondary: var(--color-canvas-soft);
   --secondary-foreground: var(--color-ink);
   --muted: var(--color-canvas-soft);
-  --muted-foreground: var(--color-nadicode-muted);
+  --muted-foreground: var(--color-body);
   --accent: var(--color-canvas-soft-2);
   --accent-foreground: var(--color-ink);
   --destructive: var(--color-error);
   --destructive-foreground: var(--color-on-primary);
   --border: var(--color-line);
-  --input: var(--color-line);
-  --ring: var(--color-link);
+  --input: var(--color-nadicode-input);
+  --ring: var(--color-focus-ring);
+  --scrim: var(--color-nadicode-scrim);
   --chart-1: var(--color-nadicode-chart-1);
   --chart-2: var(--color-nadicode-chart-2);
   --chart-3: var(--color-nadicode-chart-3);
@@ -35,7 +38,7 @@
   --sidebar-accent: var(--color-canvas-soft-2);
   --sidebar-accent-foreground: var(--color-ink);
   --sidebar-border: var(--color-line);
-  --sidebar-ring: var(--color-link);
+  --sidebar-ring: var(--color-focus-ring);
 }
 
 .dark {
@@ -46,19 +49,22 @@
   --card-foreground: var(--color-dark-ink);
   --popover: var(--color-dark-canvas);
   --popover-foreground: var(--color-dark-ink);
-  --primary: var(--color-dark-primary);
-  --primary-foreground: var(--color-dark-on-primary);
+  --primary: var(--color-dark-action);
+  --primary-foreground: var(--color-dark-action-foreground);
+  --primary-hover: var(--color-dark-action-hover);
+  --primary-active: var(--color-dark-action-active);
   --secondary: var(--color-dark-canvas-soft);
   --secondary-foreground: var(--color-dark-ink);
   --muted: var(--color-dark-canvas-soft);
-  --muted-foreground: var(--color-dark-muted);
+  --muted-foreground: var(--color-dark-body);
   --accent: var(--color-dark-canvas-soft-2);
   --accent-foreground: var(--color-dark-ink);
   --destructive: var(--color-dark-error);
   --destructive-foreground: var(--color-dark-on-primary);
   --border: var(--color-dark-line);
   --input: var(--color-dark-input);
-  --ring: var(--color-dark-link);
+  --ring: var(--color-dark-focus-ring);
+  --scrim: var(--color-dark-scrim);
   --chart-1: var(--color-dark-chart-1);
   --chart-2: var(--color-dark-chart-2);
   --chart-3: var(--color-dark-chart-3);
@@ -71,10 +77,17 @@
   --sidebar-accent: var(--color-dark-canvas-soft-2);
   --sidebar-accent-foreground: var(--color-dark-ink);
   --sidebar-border: var(--color-dark-line);
-  --sidebar-ring: var(--color-dark-link);
+  --sidebar-ring: var(--color-dark-focus-ring);
 }
 
 :root.dark {
+  --nc-action: var(--nc-dark-action);
+  --nc-action-foreground: var(--nc-dark-action-foreground);
+  --nc-action-hover: var(--nc-dark-action-hover);
+  --nc-action-active: var(--nc-dark-action-active);
+  --nc-input: var(--nc-dark-input);
+  --nc-focus-ring: var(--nc-dark-focus-ring);
+  --nc-scrim: var(--nc-dark-scrim);
   --nc-state-ready: var(--nc-dark-state-ready);
   --nc-state-running: var(--nc-dark-state-running);
   --nc-state-review: var(--nc-dark-state-review);
@@ -114,6 +127,10 @@
   --nadicode-spacing-6xl: var(--spacing-nadicode-6xl);
   --nadicode-spacing-section: var(--spacing-nadicode-section);
   --nadicode-spacing-guide: var(--spacing-nadicode-guide);
+  --nadicode-spacing-focus-ring-width: var(--spacing-nadicode-focus-ring-width);
+  --nadicode-spacing-control-height: var(--spacing-nadicode-control-height);
+  --nadicode-spacing-control-padding-inline: var(--spacing-nadicode-control-padding-inline);
+  --nadicode-spacing-touch-target: var(--spacing-nadicode-touch-target);
   --nadicode-spacing-page-pad: var(--spacing-nadicode-page-pad);
   --nadicode-spacing-page-max-mobile: var(--spacing-nadicode-page-max-mobile);
   --nadicode-spacing-page-max-tablet: var(--spacing-nadicode-page-max-tablet);
@@ -166,6 +183,10 @@
 @theme {
   --color-primary: #008c45;
   --color-on-primary: #ffffff;
+  --color-action: #007a3c;
+  --color-action-foreground: #ffffff;
+  --color-action-hover: #00602f;
+  --color-action-active: #00301a;
   --color-ink: #171717;
   --color-body: #4d4d4d;
   --color-muted: #888888;
@@ -173,8 +194,11 @@
   --color-canvas-soft: #fafafa;
   --color-canvas-soft-2: #f5f5f5;
   --color-line: #e5e5e5;
+  --color-input: #8f8f8f;
   --color-seam: #e4e7ec;
   --color-cross: #a1a1a1;
+  --color-focus-ring: #007a3c;
+  --color-scrim: #171717;
   --color-link: #007a3c;
   --color-link-deep: #00602f;
   --color-link-bg-soft: #d9f6e4;
@@ -279,9 +303,15 @@
   --color-dark-seam: #1f1f1f;
   --color-dark-primary: #ededed;
   --color-dark-on-primary: #0a0a0a;
+  --color-dark-action: #ededed;
+  --color-dark-action-foreground: #0a0a0a;
+  --color-dark-action-hover: #d4d4d4;
+  --color-dark-action-active: #a3a3a3;
   --color-dark-link: #9fe6bc;
   --color-dark-link-deep: #c3f0d4;
   --color-dark-link-bg-soft: #00301a;
+  --color-dark-focus-ring: #9fe6bc;
+  --color-dark-scrim: #f5f5f5;
   --color-dark-error: #f7b3b5;
   --color-dark-error-soft: #4a000e;
   --color-dark-error-deep: #fad3d4;
@@ -314,8 +344,10 @@
   --color-dark-chart-div-warm: #ffd97d;
   --color-dark-chart-div-mid: #e6e6e6;
   --color-dark-chart-div-cool: #cdd9fd;
+  --color-nadicode-input: #8f8f8f;
   --color-nadicode-muted: #888888;
   --color-nadicode-primary: #008c45;
+  --color-nadicode-scrim: #171717;
   --color-nadicode-chart-1: #2743d8;
   --color-nadicode-chart-2: #008c45;
   --color-nadicode-chart-3: #f5a623;
@@ -334,6 +366,7 @@
   --font-body-sm: Geist, Inter, system-ui, -apple-system, sans-serif;
   --font-body-sm-strong: Geist, Inter, system-ui, -apple-system, sans-serif;
   --font-caption: Geist, Inter, system-ui, -apple-system, sans-serif;
+  --font-caption-strong: Geist, Inter, system-ui, -apple-system, sans-serif;
   --font-caption-mono: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
   --font-code: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
   --font-button-md: Geist, Inter, system-ui, -apple-system, sans-serif;
@@ -429,6 +462,13 @@
   --tracking-caption: 0px;
   --text-caption--font-weight: 400;
   --font-weight-caption: 400;
+  --text-caption-strong: 12px;
+  --text-caption-strong--line-height: 16px;
+  --leading-caption-strong: 16px;
+  --text-caption-strong--letter-spacing: 0px;
+  --tracking-caption-strong: 0px;
+  --text-caption-strong--font-weight: 500;
+  --font-weight-caption-strong: 500;
   --text-caption-mono: 12px;
   --text-caption-mono--line-height: 16px;
   --leading-caption-mono: 16px;
@@ -463,9 +503,17 @@
   --radius-md: 6px;
   --radius-lg: 8px;
   --radius-xl: 10px;
+  --radius-2xl: 12px;
+  --radius-3xl: 16px;
   --radius-pill-sm: 64px;
   --radius-pill: 100px;
   --radius-full: 9999px;
+  --ring-width-focus: var(--spacing-nadicode-focus-ring-width);
+  --opacity-scrim: var(--nc-material-scrim-opacity);
+  --shadow-tooltip: var(--nc-material-shadow-tooltip);
+  --shadow-menu: var(--nc-material-shadow-menu);
+  --shadow-dialog: var(--nc-material-shadow-dialog);
+  --shadow-sheet: var(--nc-material-shadow-sheet);
   --spacing-nadicode-xxs: 4px;
   --spacing-nadicode-filter-chip-gap: 6px;
   --spacing-nadicode-xs: 8px;
@@ -480,6 +528,10 @@
   --spacing-nadicode-6xl: 128px;
   --spacing-nadicode-section: 192px;
   --spacing-nadicode-guide: 1px;
+  --spacing-nadicode-focus-ring-width: 3px;
+  --spacing-nadicode-control-height: 32px;
+  --spacing-nadicode-control-padding-inline: 10px;
+  --spacing-nadicode-touch-target: 44px;
   --spacing-nadicode-page-pad: 24px;
   --spacing-nadicode-page-max-mobile: 448px;
   --spacing-nadicode-page-max-tablet: 624px;
@@ -526,4 +578,7 @@
   --spacing-nadicode-h-bento-strip: 20px;
   --spacing-nadicode-filter-chip-height: 28px;
   --spacing-nadicode-filter-chip-icon: 14px;
+  --spacing-control-height: var(--spacing-nadicode-control-height);
+  --spacing-control-padding-inline: var(--spacing-nadicode-control-padding-inline);
+  --spacing-touch-target: var(--spacing-nadicode-touch-target);
 }

package/dist/tokens/nadicode.dtcg.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
-  "$description": "Reusable design-system contract for NadicodeAI: engineered page geometry, neutral high-contrast surfaces, AI-agent work artifacts, and strict 12-column/10-column composition rules for the public website and package token exports.",
+  "$description": "Reusable design-system contract for NadicodeAI: engineered page geometry, neutral high-contrast product surfaces, AI-agent work artifacts, strict 12-column/10-column public-page composition, and the package token exports shared by every NadicodeAI interface.",
   "nadicode": {
     "color": {
       "$type": "color",
@@ -26,6 +26,50 @@
           "hex": "#ffffff"
         }
       },
+      "action": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0,
+            0.478,
+            0.235
+          ],
+          "hex": "#007a3c"
+        }
+      },
+      "action-foreground": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            1,
+            1,
+            1
+          ],
+          "hex": "#ffffff"
+        }
+      },
+      "action-hover": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0,
+            0.376,
+            0.184
+          ],
+          "hex": "#00602f"
+        }
+      },
+      "action-active": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0,
+            0.188,
+            0.102
+          ],
+          "hex": "#00301a"
+        }
+      },
       "ink": {
         "$value": {
           "colorSpace": "srgb",
@@ -103,6 +147,17 @@
           "hex": "#e5e5e5"
         }
       },
+      "input": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.561,
+            0.561,
+            0.561
+          ],
+          "hex": "#8f8f8f"
+        }
+      },
       "seam": {
         "$value": {
           "colorSpace": "srgb",
@@ -125,6 +180,28 @@
           "hex": "#a1a1a1"
         }
       },
+      "focus-ring": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0,
+            0.478,
+            0.235
+          ],
+          "hex": "#007a3c"
+        }
+      },
+      "scrim": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.09,
+            0.09,
+            0.09
+          ],
+          "hex": "#171717"
+        }
+      },
       "link": {
         "$value": {
           "colorSpace": "srgb",
@@ -1269,6 +1346,50 @@
           "hex": "#0a0a0a"
         }
       },
+      "dark-action": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.929,
+            0.929,
+            0.929
+          ],
+          "hex": "#ededed"
+        }
+      },
+      "dark-action-foreground": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.039,
+            0.039,
+            0.039
+          ],
+          "hex": "#0a0a0a"
+        }
+      },
+      "dark-action-hover": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.831,
+            0.831,
+            0.831
+          ],
+          "hex": "#d4d4d4"
+        }
+      },
+      "dark-action-active": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.639,
+            0.639,
+            0.639
+          ],
+          "hex": "#a3a3a3"
+        }
+      },
       "dark-link": {
         "$value": {
           "colorSpace": "srgb",
@@ -1302,6 +1423,28 @@
           "hex": "#00301a"
         }
       },
+      "dark-focus-ring": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.624,
+            0.902,
+            0.737
+          ],
+          "hex": "#9fe6bc"
+        }
+      },
+      "dark-scrim": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.961,
+            0.961,
+            0.961
+          ],
+          "hex": "#f5f5f5"
+        }
+      },
       "dark-error": {
         "$value": {
           "colorSpace": "srgb",
@@ -1741,6 +1884,30 @@
           "unit": "px"
         }
       },
+      "focus-ring-width": {
+        "$value": {
+          "value": 3,
+          "unit": "px"
+        }
+      },
+      "control-height": {
+        "$value": {
+          "value": 32,
+          "unit": "px"
+        }
+      },
+      "control-padding-inline": {
+        "$value": {
+          "value": 10,
+          "unit": "px"
+        }
+      },
+      "touch-target": {
+        "$value": {
+          "value": 44,
+          "unit": "px"
+        }
+      },
       "page-pad": {
         "$value": {
           "value": 24,
@@ -2056,6 +2223,18 @@
           "unit": "px"
         }
       },
+      "2xl": {
+        "$value": {
+          "value": 12,
+          "unit": "px"
+        }
+      },
+      "3xl": {
+        "$value": {
+          "value": 16,
+          "unit": "px"
+        }
+      },
       "pill-sm": {
         "$value": {
           "value": 64,
@@ -2284,6 +2463,22 @@
           "lineHeight": 16
         }
       },
+      "caption-strong": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Geist, Inter, system-ui, -apple-system, sans-serif",
+          "fontSize": {
+            "value": 12,
+            "unit": "px"
+          },
+          "fontWeight": 500,
+          "letterSpacing": {
+            "value": 0,
+            "unit": "px"
+          },
+          "lineHeight": 16
+        }
+      },
       "caption-mono": {
         "$type": "typography",
         "$value": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/design-system",
-  "version": "0.5.3",
+  "version": "0.7.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -45,7 +45,7 @@
     "build": "tsx scripts/build.ts",
     "generate:icons": "tsx scripts/generate-icons.ts",
     "generate:favicons": "tsx scripts/generate-favicons.ts",
-    "lint:design": "npm exec -- design.md lint DESIGN.md",
+    "lint:design": "design.md lint DESIGN.md",
     "test": "vitest run",
     "test:visual": "vitest run --config vitest.visual.config.ts",
     "prepublishOnly": "npm run build"