@nadicodeai/design-system 0.5.1 → 0.5.2

package/AGENTS.md

@@ -41,7 +41,7 @@ Generated-artifact and runtime-JS prohibitions live in the Forbidden Patterns ta
 | --- | --- | --- | --- |
 | Design token, contract, or token-pipeline change | `DESIGN.md`, `scripts/sd/config.ts`, `scripts/sd/transforms.ts`, `scripts/sd/format-token-layer.ts`, `scripts/sd/format-tailwind-v4-theme.ts` | `npm exec -- design.md spec`, `scripts/build.ts`, `tests/token-structural-parity.test.ts`, `tests/consumer-css-discipline.test.ts`, `tests/tailwind-v4-theme.test.ts` | `npm run lint:design && npm run build && npm run test` |
 | Kernel geometry or component work | `DESIGN.md` Layout and Components | `src/css/index.css`, `src/css/layout.css`, `src/css/primitives.css`, `src/css/components/*.css`, `src/css/motion.css`, `tests/kernel-css-architecture.test.ts`, `tests/kernel-rendered-geometry.test.ts` | from design-system/: `npx vitest run tests/kernel-css-architecture.test.ts tests/kernel-rendered-geometry.test.ts` |
-| CSS component or `examples/` specimen work | `DESIGN.md` Layout and Components | `src/css/components/`, `examples/`, `../skills/nadicodeai-brand-copy/SKILL.md`, `../skills/nadicodeai-brand-copy/references/brand-voice-profile.md`, `../skills/nadicodeai-brand-copy/references/voice-examples.md`, `../skills/nadicodeai-brand-copy/references/anti-slop-patterns.md` | `npm run test -- tests/examples-package-coherence.test.ts` |
+| CSS component or `examples/` specimen work | `DESIGN.md` Layout and Components | `src/css/components/`, `examples/`, `../skills/nadicodeai-brand-copy/SKILL.md`, `../skills/nadicodeai-brand-copy/references/writing-craft.md`, `../skills/nadicodeai-brand-copy/references/brand-voice-profile.md`, `../skills/nadicodeai-brand-copy/references/voice-examples.md` | `npm run test -- tests/examples-package-coherence.test.ts` |
 | Package consumption or export surface | `README.md` | `package.json`, `scripts/build.ts`, `dist/tailwind/`, `dist/tokens/` | `npm run build && npm run test -- tests/build-produces-exports.test.ts tests/tailwind-v4-theme.test.ts` |
 
 ## DESIGN.md Authoring

package/DESIGN.md

@@ -137,6 +137,10 @@ colors:
   dark-selection-fg: "#0a0a0a"
   dark-cross: "#6e6e6e"
   dark-chart-1: "#7d99f2"
+  dark-chart-2: "#17b568"
+  dark-chart-3: "#ffd97d"
+  dark-chart-4: "#f28085"
+  dark-chart-5: "#33d1cb"
   dark-chart-6: "#9575cd"
 
 typography:
@@ -493,8 +497,8 @@ Backgrounds are `{colors.background-100}` (page default, white) and `{colors.bac
 
 ### Chart categoricals (functional tier)
 
-- **Charts** (`{colors.chart-1}`…`{colors.chart-6}`): the categorical series palette — cobalto, verde, ambra, rosso, plus a functional-only teal and viola. Functional only: never place chart colours on marketing surfaces, campi, or generated imagery. On the dark canvas the deep cobalto and viola drop below the 3:1 WCAG 1.4.11 floor for data marks, so they carry dark-tuned steps (`{colors.dark-chart-1}` on `blue-cobalto-500`, `{colors.dark-chart-6}` a lighter viola); the four mid/high-luminance series (verde, ambra, rosso, teal) already clear 3:1 and stay saturated in both modes.
-- **Categorical distinguishability**: the same-family neighbours are held apart — `chart-3`/`chart-4` (ambra/rosso) and `chart-2`/`chart-5` (verde/teal) each clear a CIEDE2000 ≥ 20 normal / ≥ 15 deuteranopia-simulated floor. Two proximities are brand-locked and exempt from the numeric floor: `chart-2`/`chart-4` (verde/rosso, the flag pair, which collapses under red-green deficiency by identity) and `chart-1`/`chart-6` (cobalto/viola, adjacent blue-violet). Charts using the full six must carry redundant encoding (direct labels, position, or pattern), never hue alone, so these two pairs stay readable under colour-vision deficiency.
+- **Charts** (`{colors.chart-1}`…`{colors.chart-6}`): the categorical series palette — cobalto, verde, ambra, rosso, plus a functional-only teal and viola. Functional only: never place chart colours on marketing surfaces, campi, or generated imagery. On the dark canvas all six series carry dark-tuned steps, remapped in the `.dark` scope so any consumer reading the semantic token gets the right hue in both modes: `{colors.dark-chart-1}` on `blue-cobalto-500`, `{colors.dark-chart-2}` on `green-italia-600`, `{colors.dark-chart-3}` on `amber-400`, `{colors.dark-chart-4}` on `red-italia-500`, `{colors.dark-chart-5}` on the `dark-cyan` value, `{colors.dark-chart-6}` a lighter viola. Clearing the 3:1 WCAG 1.4.11 data-mark floor is necessary but not sufficient on the near-black canvas: the full-saturation light hues read as loud saturated blocks there, so each dark step lightens or desaturates its hue while keeping series identity, and all six clear 3:1 against `{colors.dark-canvas}`. Verde takes the one-step move to `green-italia-600` (not the mint `green-italia-500`) so the verde/teal separation survives in normal vision.
+- **Categorical distinguishability**: the same-family neighbours are held apart — `chart-3`/`chart-4` (ambra/rosso) and `chart-2`/`chart-5` (verde/teal) each clear a CIEDE2000 ≥ 20 normal / ≥ 15 deuteranopia-simulated floor, in the light set and in the dark-tuned set alike. Two proximities are brand-locked and exempt from the numeric floor: `chart-2`/`chart-4` (verde/rosso, the flag pair, which collapses under red-green deficiency by identity) and `chart-1`/`chart-6` (cobalto/viola, adjacent blue-violet). Charts using the full six must carry redundant encoding (direct labels, position, or pattern), never hue alone, so these two pairs stay readable under colour-vision deficiency.
 
 ### Brand tier — i campi
 

package/README.md

@@ -11,7 +11,7 @@ For Tailwind CSS v4 CSS-first projects, `npm run build` also emits `dist/tailwin
 @import "@nadicodeai/design-system/tailwind/theme.css";
 ```
 
-The CSS adapter provides shadcn-compatible semantic utilities such as `bg-background`, `text-foreground`, `bg-primary`, `text-primary-foreground`, `border-border`, and `ring-ring`. It publishes both `:root` light roles and `.dark` dark roles; consuming apps opt into dark mode by applying a `.dark` ancestor, normally through their own theme provider. NadicodeAI-specific spacing utilities are namespaced, for example `p-nadicode-lg` and `h-nadicode-h-cell-sm`, so standard Tailwind/shadcn classes such as `max-w-3xl` keep their normal Tailwind behavior. React consumers normally get this through `@nadicodeai/ui/globals.css`.
+The CSS adapter provides shadcn-compatible semantic utilities such as `bg-background`, `text-foreground`, `bg-primary`, `text-primary-foreground`, `border-border`, and `ring-ring`. It publishes both `:root` light roles and `.dark` dark roles; consuming apps opt into dark mode by applying a `.dark` ancestor, normally through their own theme provider. The raw `--nc-*` brand-token remaps (the state, selection, cross, and chart families) are the one exception: they are emitted at `:root.dark`, so they flip only when the `dark` class sits on the root element itself (the next-themes `attribute="class"` default), not on an inner wrapper. NadicodeAI-specific spacing utilities are namespaced, for example `p-nadicode-lg` and `h-nadicode-h-cell-sm`, so standard Tailwind/shadcn classes such as `max-w-3xl` keep their normal Tailwind behavior. React consumers normally get this through `@nadicodeai/ui/globals.css`.
 
 Geist and Geist Mono (SIL Open Font License 1.1) ship inside the package under `src/assets/fonts/`. Consumers can pull the `@font-face` shim directly:
 

package/dist/css/components/state-tag.css

@@ -36,7 +36,7 @@
  * dark-grounded, not a light chip on the dark canvas. Scoped to the component
  * because canvas/ink/line are global neutrals that must not be remapped in the
  * unscoped .dark block. The variant state colors flip separately via the
- * generated .dark --nc-state-* remap in the Tailwind theme map. Direct
+ * generated :root.dark --nc-state-* remap in the Tailwind theme map. Direct
  * counterparts: the tag stays a canvas-grounded chip in both themes.
  */
 .dark .nc-state-tag {

package/dist/css/tokens.generated.css

@@ -134,6 +134,10 @@
   --nc-dark-selection-fg: #0a0a0a;
   --nc-dark-cross: #6e6e6e;
   --nc-dark-chart-1: #7d99f2;
+  --nc-dark-chart-2: #17b568;
+  --nc-dark-chart-3: #ffd97d;
+  --nc-dark-chart-4: #f28085;
+  --nc-dark-chart-5: #33d1cb;
   --nc-dark-chart-6: #9575cd;
 
   /* Spacing */

package/dist/tailwind/nadicode.tailwind.json

@@ -131,6 +131,10 @@
         "dark-selection-fg": "#0a0a0a",
         "dark-cross": "#6e6e6e",
         "dark-chart-1": "#7d99f2",
+        "dark-chart-2": "#17b568",
+        "dark-chart-3": "#ffd97d",
+        "dark-chart-4": "#f28085",
+        "dark-chart-5": "#33d1cb",
         "dark-chart-6": "#9575cd"
       },
       "fontFamily": {

package/dist/tailwind/nadicode.theme.css

@@ -60,10 +60,10 @@
   --input: var(--color-dark-input);
   --ring: var(--color-dark-link);
   --chart-1: var(--color-dark-chart-1);
-  --chart-2: var(--color-nadicode-chart-2);
-  --chart-3: var(--color-nadicode-chart-3);
-  --chart-4: var(--color-nadicode-chart-4);
-  --chart-5: var(--color-nadicode-chart-5);
+  --chart-2: var(--color-dark-chart-2);
+  --chart-3: var(--color-dark-chart-3);
+  --chart-4: var(--color-dark-chart-4);
+  --chart-5: var(--color-dark-chart-5);
   --sidebar: var(--color-dark-canvas);
   --sidebar-foreground: var(--color-dark-ink);
   --sidebar-primary: var(--color-dark-primary);
@@ -72,6 +72,9 @@
   --sidebar-accent-foreground: var(--color-dark-ink);
   --sidebar-border: var(--color-dark-line);
   --sidebar-ring: var(--color-dark-link);
+}
+
+:root.dark {
   --nc-state-ready: var(--nc-dark-state-ready);
   --nc-state-running: var(--nc-dark-state-running);
   --nc-state-review: var(--nc-dark-state-review);
@@ -80,6 +83,12 @@
   --nc-selection-bg: var(--nc-dark-selection-bg);
   --nc-selection-fg: var(--nc-dark-selection-fg);
   --nc-cross: var(--nc-dark-cross);
+  --nc-chart-1: var(--nc-dark-chart-1);
+  --nc-chart-2: var(--nc-dark-chart-2);
+  --nc-chart-3: var(--nc-dark-chart-3);
+  --nc-chart-4: var(--nc-dark-chart-4);
+  --nc-chart-5: var(--nc-dark-chart-5);
+  --nc-chart-6: var(--nc-dark-chart-6);
 }
 
 :root {
@@ -276,6 +285,10 @@
   --color-dark-selection-fg: #0a0a0a;
   --color-dark-cross: #6e6e6e;
   --color-dark-chart-1: #7d99f2;
+  --color-dark-chart-2: #17b568;
+  --color-dark-chart-3: #ffd97d;
+  --color-dark-chart-4: #f28085;
+  --color-dark-chart-5: #33d1cb;
   --color-dark-chart-6: #9575cd;
   --color-nadicode-muted: #888888;
   --color-nadicode-primary: #008c45;

package/dist/tokens/nadicode.dtcg.json

@@ -1423,6 +1423,50 @@
           "hex": "#7d99f2"
         }
       },
+      "dark-chart-2": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.09,
+            0.71,
+            0.408
+          ],
+          "hex": "#17b568"
+        }
+      },
+      "dark-chart-3": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            1,
+            0.851,
+            0.49
+          ],
+          "hex": "#ffd97d"
+        }
+      },
+      "dark-chart-4": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.949,
+            0.502,
+            0.522
+          ],
+          "hex": "#f28085"
+        }
+      },
+      "dark-chart-5": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.2,
+            0.82,
+            0.796
+          ],
+          "hex": "#33d1cb"
+        }
+      },
       "dark-chart-6": {
         "$value": {
           "colorSpace": "srgb",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/design-system",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "type": "module",
   "publishConfig": {
     "access": "public"