@nadicodeai/design-system 0.5.1 → 0.5.3

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

@@ -104,6 +104,14 @@ colors:
   chart-4: "#cd212a"
   chart-5: "#00838f"
   chart-6: "#6f42c1"
+  chart-seq-1: "#7d99f2"
+  chart-seq-2: "#4f6ae6"
+  chart-seq-3: "#2743d8"
+  chart-seq-4: "#1d33ad"
+  chart-seq-5: "#16277f"
+  chart-div-warm: "#d98800"
+  chart-div-mid: "#8f8f8f"
+  chart-div-cool: "#7d99f2"
   dark-canvas: "#0a0a0a"
   dark-canvas-soft: "#171717"
   dark-canvas-soft-2: "#262626"
@@ -137,7 +145,19 @@ 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"
+  dark-chart-seq-1: "#4f6ae6"
+  dark-chart-seq-2: "#7d99f2"
+  dark-chart-seq-3: "#a9befa"
+  dark-chart-seq-4: "#cdd9fd"
+  dark-chart-seq-5: "#eef2ff"
+  dark-chart-div-warm: "#ffd97d"
+  dark-chart-div-mid: "#e6e6e6"
+  dark-chart-div-cool: "#cdd9fd"
 
 typography:
   display-xl:
@@ -493,8 +513,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
 
@@ -519,6 +539,37 @@ This grayscale-only discipline is not dark-specific: it governs the whole genera
 
 Do not delete a color because the current website kernel does not consume it. Prototype usage is not palette authority; removals require an explicit palette migration decision.
 
+## Data Visualization
+
+### Entity-color assignment
+
+- **Entity-color assignment**: categorical hues (`{colors.chart-1}`…`{colors.chart-6}`) assign in fixed order to entities per page context, and the assignment follows the entity identity, never rank, sort position, or array index. One assignment map exists per surface; a filter or re-sort never repaints the entities that remain on screen. Beyond six entities, fold the tail into a single neutral "other" slot (`{colors.muted}` register), never a seventh hue.
+
+### Sequential ramp and diverging pair
+
+- **Sequential ramp** (`{colors.chart-seq-1}`…`{colors.chart-seq-5}`, light→dark on the `blue-cobalto` scale: `chart-seq-1` on `blue-cobalto-500`, `chart-seq-2` on `blue-cobalto-600`, `chart-seq-3` on `blue-cobalto-700`, `chart-seq-4` on `blue-cobalto-800`, `chart-seq-5` on `blue-cobalto-900`): ordered magnitude on one hue, never nominal categories, never a rainbow. `{colors.dark-chart-seq-1}`…`{colors.dark-chart-seq-5}` remap in the `.dark` scope like the categorical set, anchor flipped so `dark-chart-seq-1` is the dimmest step (`blue-cobalto-600`) and `dark-chart-seq-5` the brightest (`blue-cobalto-100`), each clearing the 3:1 WCAG 1.4.11 data-mark floor against `{colors.dark-canvas}`.
+- **Diverging pair** (`{colors.chart-div-warm}` on `amber-700`, `{colors.chart-div-mid}` on `gray-700`, `{colors.chart-div-cool}` on `blue-cobalto-500`; dark counterparts `{colors.dark-chart-div-warm}` on `amber-400`, `{colors.dark-chart-div-mid}` on `gray-300`, `{colors.dark-chart-div-cool}` on `blue-cobalto-300`, remapped in the `.dark` scope the same way): the warm and cool poles carry the sign, the neutral midpoint never carries hue. Meter tracks use a lighter step of the same ramp as their fill.
+
+### Meter and bullet grammar
+
+- **Meter and bullet grammar**: cap and included-usage bars carry a positional threshold tick at the product-configured warning fraction (80% is the common default; the fraction is a consumer input, never a constant of this contract) and a cap tick at 100%. Overflow renders as a distinct segment continuing past the cap tick, never clamped away. Severity state tokens (`{colors.state-*}`) reinforce position, never act as the sole signal. The current value reads at the bar tip. Every meter carries an accessible name, and its `aria` values clamp to the meter maximum.
+
+### Mark specs
+
+- **Mark specs**: bars and columns run at most 24px thick with 4px rounded data-ends anchored square at the baseline. Stacked segments and adjacent marks keep a 2px surface gap, one consistent gap width per chart. Lines run at least 2px with round joins and caps; point markers run at least 8px with a 2px surface ring. Area fills read as a light wash (roughly 10% opacity) under a full-strength line. Gridlines and axes are recessive 1px solid hairlines one step off the surface, never dashed. Chart text always carries ink tokens (`{colors.ink}`, `{colors.muted}`), never the series color. Marks render in real pixel space; a chart never scales its viewBox non-uniformly.
+
+### Delta and trend encoding
+
+- **Delta and trend encoding**: a change reads as a direction glyph (▲ ▼) plus a tone token, never bare signed text and never color alone. Tone follows direction crossed with whether up is good in that context. Sparklines normalize against a meaningful baseline, never the visible min-max span alone.
+
+### Legends and labels
+
+- **Legends and labels**: at two or more series, every series is identified — up to four series prefer direct labels, which then replace the legend; beyond four, or whenever direct labels are not feasible, a legend is required (ink-token text beside a color swatch; text never wears the series color). A single series is titled, not legended. Every chart names a table alternative. Tooltips enhance a chart and never gate a value.
+
+### Texture fallback
+
+- **Texture fallback**: under forced-colors, print, or an accessibility setting, series distinguish by one directional line texture at 45 or 135 degrees (tone-on-tone, a darker step of the fill's own ramp), ordered with magnitude on value scales, with the arm angle carrying the diverging sign. Texture is never on by default. The two brand-locked categorical pairs (`chart-2`/`chart-4`, `chart-1`/`chart-6`) always require redundant encoding, never hue alone, restating the Chart categoricals distinguishability rule.
+
 ## Typography
 
 Geist Sans carries all narrative and interface copy. Geist Mono is reserved for eyebrows, labels, status tags, code, traces, and small technical metadata.

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

@@ -101,6 +101,14 @@
   --nc-chart-4: #cd212a;
   --nc-chart-5: #00838f;
   --nc-chart-6: #6f42c1;
+  --nc-chart-seq-1: #7d99f2;
+  --nc-chart-seq-2: #4f6ae6;
+  --nc-chart-seq-3: #2743d8;
+  --nc-chart-seq-4: #1d33ad;
+  --nc-chart-seq-5: #16277f;
+  --nc-chart-div-warm: #d98800;
+  --nc-chart-div-mid: #8f8f8f;
+  --nc-chart-div-cool: #7d99f2;
   --nc-dark-canvas: #0a0a0a;
   --nc-dark-canvas-soft: #171717;
   --nc-dark-canvas-soft-2: #262626;
@@ -134,7 +142,19 @@
   --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;
+  --nc-dark-chart-seq-1: #4f6ae6;
+  --nc-dark-chart-seq-2: #7d99f2;
+  --nc-dark-chart-seq-3: #a9befa;
+  --nc-dark-chart-seq-4: #cdd9fd;
+  --nc-dark-chart-seq-5: #eef2ff;
+  --nc-dark-chart-div-warm: #ffd97d;
+  --nc-dark-chart-div-mid: #e6e6e6;
+  --nc-dark-chart-div-cool: #cdd9fd;
 
   /* Spacing */
   --nc-xxs: 4px;

package/dist/tailwind/nadicode.tailwind.json

@@ -98,6 +98,14 @@
         "chart-4": "#cd212a",
         "chart-5": "#00838f",
         "chart-6": "#6f42c1",
+        "chart-seq-1": "#7d99f2",
+        "chart-seq-2": "#4f6ae6",
+        "chart-seq-3": "#2743d8",
+        "chart-seq-4": "#1d33ad",
+        "chart-seq-5": "#16277f",
+        "chart-div-warm": "#d98800",
+        "chart-div-mid": "#8f8f8f",
+        "chart-div-cool": "#7d99f2",
         "dark-canvas": "#0a0a0a",
         "dark-canvas-soft": "#171717",
         "dark-canvas-soft-2": "#262626",
@@ -131,7 +139,19 @@
         "dark-selection-fg": "#0a0a0a",
         "dark-cross": "#6e6e6e",
         "dark-chart-1": "#7d99f2",
-        "dark-chart-6": "#9575cd"
+        "dark-chart-2": "#17b568",
+        "dark-chart-3": "#ffd97d",
+        "dark-chart-4": "#f28085",
+        "dark-chart-5": "#33d1cb",
+        "dark-chart-6": "#9575cd",
+        "dark-chart-seq-1": "#4f6ae6",
+        "dark-chart-seq-2": "#7d99f2",
+        "dark-chart-seq-3": "#a9befa",
+        "dark-chart-seq-4": "#cdd9fd",
+        "dark-chart-seq-5": "#eef2ff",
+        "dark-chart-div-warm": "#ffd97d",
+        "dark-chart-div-mid": "#e6e6e6",
+        "dark-chart-div-cool": "#cdd9fd"
       },
       "fontFamily": {
         "display-xl": [

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,20 @@
   --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);
+  --nc-chart-seq-1: var(--nc-dark-chart-seq-1);
+  --nc-chart-seq-2: var(--nc-dark-chart-seq-2);
+  --nc-chart-seq-3: var(--nc-dark-chart-seq-3);
+  --nc-chart-seq-4: var(--nc-dark-chart-seq-4);
+  --nc-chart-seq-5: var(--nc-dark-chart-seq-5);
+  --nc-chart-div-warm: var(--nc-dark-chart-div-warm);
+  --nc-chart-div-mid: var(--nc-dark-chart-div-mid);
+  --nc-chart-div-cool: var(--nc-dark-chart-div-cool);
 }
 
 :root {
@@ -243,6 +260,14 @@
   --color-chart-4: #cd212a;
   --color-chart-5: #00838f;
   --color-chart-6: #6f42c1;
+  --color-chart-seq-1: #7d99f2;
+  --color-chart-seq-2: #4f6ae6;
+  --color-chart-seq-3: #2743d8;
+  --color-chart-seq-4: #1d33ad;
+  --color-chart-seq-5: #16277f;
+  --color-chart-div-warm: #d98800;
+  --color-chart-div-mid: #8f8f8f;
+  --color-chart-div-cool: #7d99f2;
   --color-dark-canvas: #0a0a0a;
   --color-dark-canvas-soft: #171717;
   --color-dark-canvas-soft-2: #262626;
@@ -276,7 +301,19 @@
   --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-dark-chart-seq-1: #4f6ae6;
+  --color-dark-chart-seq-2: #7d99f2;
+  --color-dark-chart-seq-3: #a9befa;
+  --color-dark-chart-seq-4: #cdd9fd;
+  --color-dark-chart-seq-5: #eef2ff;
+  --color-dark-chart-div-warm: #ffd97d;
+  --color-dark-chart-div-mid: #e6e6e6;
+  --color-dark-chart-div-cool: #cdd9fd;
   --color-nadicode-muted: #888888;
   --color-nadicode-primary: #008c45;
   --color-nadicode-chart-1: #2743d8;

package/dist/tokens/nadicode.dtcg.json

@@ -1060,6 +1060,94 @@
           "hex": "#6f42c1"
         }
       },
+      "chart-seq-1": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.49,
+            0.6,
+            0.949
+          ],
+          "hex": "#7d99f2"
+        }
+      },
+      "chart-seq-2": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.31,
+            0.416,
+            0.902
+          ],
+          "hex": "#4f6ae6"
+        }
+      },
+      "chart-seq-3": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.153,
+            0.263,
+            0.847
+          ],
+          "hex": "#2743d8"
+        }
+      },
+      "chart-seq-4": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.114,
+            0.2,
+            0.678
+          ],
+          "hex": "#1d33ad"
+        }
+      },
+      "chart-seq-5": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.086,
+            0.153,
+            0.498
+          ],
+          "hex": "#16277f"
+        }
+      },
+      "chart-div-warm": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.851,
+            0.533,
+            0
+          ],
+          "hex": "#d98800"
+        }
+      },
+      "chart-div-mid": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.561,
+            0.561,
+            0.561
+          ],
+          "hex": "#8f8f8f"
+        }
+      },
+      "chart-div-cool": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.49,
+            0.6,
+            0.949
+          ],
+          "hex": "#7d99f2"
+        }
+      },
       "dark-canvas": {
         "$value": {
           "colorSpace": "srgb",
@@ -1423,6 +1511,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",
@@ -1433,6 +1565,94 @@
           ],
           "hex": "#9575cd"
         }
+      },
+      "dark-chart-seq-1": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.31,
+            0.416,
+            0.902
+          ],
+          "hex": "#4f6ae6"
+        }
+      },
+      "dark-chart-seq-2": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.49,
+            0.6,
+            0.949
+          ],
+          "hex": "#7d99f2"
+        }
+      },
+      "dark-chart-seq-3": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.663,
+            0.745,
+            0.98
+          ],
+          "hex": "#a9befa"
+        }
+      },
+      "dark-chart-seq-4": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.804,
+            0.851,
+            0.992
+          ],
+          "hex": "#cdd9fd"
+        }
+      },
+      "dark-chart-seq-5": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.933,
+            0.949,
+            1
+          ],
+          "hex": "#eef2ff"
+        }
+      },
+      "dark-chart-div-warm": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            1,
+            0.851,
+            0.49
+          ],
+          "hex": "#ffd97d"
+        }
+      },
+      "dark-chart-div-mid": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.902,
+            0.902,
+            0.902
+          ],
+          "hex": "#e6e6e6"
+        }
+      },
+      "dark-chart-div-cool": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.804,
+            0.851,
+            0.992
+          ],
+          "hex": "#cdd9fd"
+        }
       }
     },
     "spacing": {

package/package.json

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