@momoi-labs/kiso 0.9.0 → 0.11.0

package/kiso/ui.css

@@ -298,6 +298,36 @@ a:hover, .link:hover { text-decoration: underline; }
 /* ===========================================================================
    Form controls
    =========================================================================== */
+/* Forms own composition; consumers own values, validation and submission. */
+.form { display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 100%; }
+.form-body { display: grid; gap: var(--spacing-xl); padding: var(--spacing-lg); min-inline-size: 0; }
+fieldset.form-body { border: 0; margin: 0; }
+.form-actions {
+  display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-md) var(--spacing-lg);
+  margin-block-start: auto;
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-block-start: 1px solid var(--color-border);
+  background: var(--color-card);
+  color: var(--color-card-foreground);
+  border-end-start-radius: inherit; border-end-end-radius: inherit;
+}
+.form-actions[data-sticky="true"] { position: sticky; inset-block-end: 0; z-index: 1; }
+.form-actions[data-tone="warning"] {
+  background: linear-gradient(var(--color-warning-surface), var(--color-warning-surface)), var(--color-card);
+  border-block-start-color: var(--color-warning-border);
+}
+.form-actions[data-tone="danger"] {
+  background: linear-gradient(var(--color-danger-surface), var(--color-danger-surface)), var(--color-card);
+  border-block-start-color: var(--color-danger-border);
+}
+.form-actions-message { flex: 1 1 12rem; min-inline-size: 0; overflow-wrap: anywhere; font-size: var(--type-size-label); }
+/* Keep the live region mounted and available to assistive technology. */
+.form-actions-message:empty { flex: 0 0 0; }
+.form-actions-message strong { font-weight: var(--type-weight-semibold); }
+.form-actions-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--spacing-sm); margin-inline-start: auto; }
+.form-scroll { min-block-size: 0; overflow: auto; scroll-padding-block-end: calc(var(--spacing-4xl) * 2); }
+.form :is(input, textarea, select, button, [tabindex]) { scroll-margin-block: var(--spacing-lg) calc(var(--spacing-4xl) * 2); }
+
 .field { display: grid; gap: var(--spacing-xs); }
 .field > label, .label {
   font-size: var(--type-size-label);
@@ -593,6 +623,12 @@ a:hover, .link:hover { text-decoration: underline; }
 }
 .stat-foot { font-size: var(--type-size-label); color: var(--color-muted-foreground); margin-block-start: var(--spacing-sm); }
 .stat-delta { display: inline-flex; align-items: center; gap: var(--spacing-xs); font-size: var(--type-size-metadata); font-weight: var(--type-weight-medium); }
+/* The delta keeps the outline treatment: only text and frame take the status
+   colour. Declared after .badge-outline so the variant wins the cascade. */
+.stat-delta.info    { color: var(--color-info);    border-color: var(--color-info-border); }
+.stat-delta.success { color: var(--color-success); border-color: var(--color-success-border); }
+.stat-delta.warning { color: var(--color-warning); border-color: var(--color-warning-border); }
+.stat-delta.danger  { color: var(--color-danger);  border-color: var(--color-danger-border); }
 
 /* ===========================================================================
    Table
@@ -1010,7 +1046,7 @@ pre code { display: block; overflow-x: auto; padding: 0; background: none; borde
 .logview .log-error{ color: var(--color-danger-on-dark); }
 .logview .log-info { color: var(--color-info-on-dark); }
 
-/* Sparkline / bar chart placeholders, neutral-only per the brand rules. */
+/* Legacy compact bars remain neutral. Framed charts use categorical roles. */
 .bars { display: flex; align-items: flex-end; gap: 3px; height: 40px; }
 .bars i { flex: 1; background: var(--color-border-strong); border-radius: var(--radius-xs); }
 .bars i.on { background: var(--color-primary); }
@@ -1131,10 +1167,8 @@ pre::after {
 .splitter::after { content: ""; position: absolute; inset-block: 0; inset-inline: -3px; }
 .splitter:hover, .splitter.dragging { background: var(--color-ring); }
 
-/* Chart frame: deliberate presentation, one featured series in primary,
-   gridlines at border strength. The area is the line color at low opacity, a
-   flat token fill: no document-level gradient id for a component to forget
-   to define. Supporting, incidental series belong in `.sparkline` instead. */
+/* Legacy single-series SVG helpers. Interactive metrics use .framed-chart
+   below; these selectors remain compatible with existing consumers. */
 .chart { width: 100%; height: 200px; display: block; overflow: visible; color: var(--color-primary); }
 .chart .grid { stroke: var(--color-border); stroke-width: 1; }
 .chart .line { fill: none; stroke: currentColor; stroke-width: 1.5; }
@@ -1152,3 +1186,122 @@ pre::after {
 .sparkline { display: block; width: 100%; color: var(--color-border-strong); }
 .sparkline.primary { color: var(--color-primary); }
 .sparkline svg { display: block; overflow: visible; }
+
+/* Metrics dashboard, issue #93. Series colors encode identity, not status. */
+.framed-chart { margin: 0; display: grid; gap: var(--spacing-sm); min-width: 0; }
+.chart-help { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.chart-plot { width: 100%; min-width: 0; font-size: var(--type-size-metadata); }
+.chart-plot :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
+.chart-empty { display: grid; place-items: center; padding: var(--spacing-md); color: var(--color-muted-foreground); }
+.chart-table-scroll { max-width: 100%; overflow-x: auto; }
+.chart-table { width: 100%; border-collapse: collapse; font-size: var(--type-size-label); font-variant-numeric: tabular-nums; }
+.chart-table caption { text-align: start; color: var(--color-muted-foreground); padding-block: var(--spacing-xs); }
+.chart-table th, .chart-table td { padding: var(--spacing-xs) var(--spacing-sm); border-bottom: 1px solid var(--color-border); white-space: nowrap; text-align: end; }
+.chart-table th:first-child { text-align: start; }
+.chart-table th { font-weight: var(--type-weight-medium); }
+.chart-series-label { display: inline-flex; align-items: center; gap: var(--spacing-xs); }
+.chart-series-label svg { flex: none; }
+.chart-inspection { padding: var(--spacing-sm); border: 1px solid var(--color-border); background: var(--color-elevated-surface); color: var(--color-foreground); box-shadow: var(--shadow-md); font-size: var(--type-size-label); }
+.chart-inspection dl { display: grid; grid-template-columns: auto auto; gap: var(--spacing-xs) var(--spacing-md); margin-block: var(--spacing-xs) 0; }
+.chart-inspection dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }
+.meter, .bar-gauge { display: grid; gap: var(--spacing-sm); min-width: 0; }
+.bar-gauge { gap: var(--spacing-md); }
+.meter-label { display: flex; justify-content: space-between; gap: var(--spacing-md); font-size: var(--type-size-label); }
+.meter-label > :last-child { text-align: end; font-variant-numeric: tabular-nums; }
+.meter-track { height: calc(var(--spacing-xs) + var(--spacing-2xs)); border-radius: var(--radius-xs); background-color: var(--color-secondary); overflow: hidden; }
+.meter-track > span { display: block; height: 100%; background: var(--color-secondary-foreground); }
+.disclosure { min-width: 0; }
+.disclosure > summary { padding: var(--spacing-sm) 0; cursor: pointer; font-weight: var(--type-weight-medium); }
+.disclosure > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
+.disclosure-content { padding: var(--spacing-sm) 0; }
+.time-range-trigger { justify-self: start; width: fit-content; max-width: 100%; white-space: normal; height: auto; min-height: var(--size-control-md); text-align: start; }
+.time-range-content { width: min(26rem, calc(100vw - 2 * var(--spacing-md))); }
+.time-range-presets { display: grid; gap: var(--spacing-xs); }
+.time-range-presets > button { height: auto; min-height: var(--size-touch-min); display: flex; align-items: flex-start; flex-direction: column; text-align: start; }
+.time-range-presets small { color: var(--color-muted-foreground); font-weight: var(--type-weight-regular); }
+.meter[data-slot="progress"] .meter-track > span { background: var(--color-chart-1); }
+.dashboard-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--spacing-lg); }
+.dashboard-panel { grid-column: span var(--dashboard-span, 6); min-width: 0; display: grid; } /* the panel is a grid so its single child stretches to the row */
+@media (max-width: 1024px) {
+  .dashboard-panel { grid-column: span 6; }
+  .dashboard-panel[data-span="12"] { grid-column: span 12; }
+}
+@media (max-width: 640px) {
+  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
+  .dashboard-panel, .dashboard-panel[data-span="12"] { grid-column: 1; }
+}
+@media (pointer: coarse) {
+  .disclosure > summary { min-height: var(--size-touch-min); display: list-item; align-content: center; }
+}
+
+/* StepList and StepBar, issue #98. A run's steps, walked by a machine and
+   read by a person. The rail is the progress: each connector takes the state
+   of the step below it, so the line fills as the run advances. Running is the
+   success colour because it is alive; neutral is what is not happening. */
+.step-list { list-style: none; margin: 0; padding: 0; display: grid; }
+.step { display: grid; grid-template-columns: var(--spacing-xl) minmax(0, 1fr); column-gap: var(--spacing-sm); }
+.step-rail { position: relative; display: grid; justify-items: center; }
+.step-rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; translate: -50% 0; background: var(--color-secondary); }
+.step:first-child .step-rail::before { top: 12px; }
+.step:last-child .step-rail::before { bottom: auto; height: 12px; }
+.step[data-state="done"] .step-rail::before, .step[data-state="skipped"] .step-rail::before { background: var(--color-success); }
+.step[data-state="running"] .step-rail::before { background: linear-gradient(var(--color-success) 0 12px, var(--color-secondary) 12px 100%); }
+.step[data-state="failed"] .step-rail::before { background: linear-gradient(var(--color-success) 0 12px, var(--color-danger) 12px 100%); }
+.step-mark { position: relative; z-index: 1; width: 12px; height: 12px; margin-top: 6px; border-radius: var(--radius-full); background: var(--color-card); border: 3px solid var(--color-border-strong); }
+.step[data-state="done"] .step-mark { background: var(--color-success); border-color: var(--color-success); }
+.step[data-state="skipped"] .step-mark { border-color: var(--color-success); }
+.step[data-state="running"] .step-mark { border-color: var(--color-success); box-shadow: 0 0 0 4px var(--color-success-surface); animation: step-pulse 1.4s var(--motion-easing-standard) infinite; }
+.step[data-state="failed"] .step-mark { background: var(--color-danger); border-color: var(--color-danger); }
+/* 12px dot plus 6px of glow fits the 24px rail column, which a Pane clips at its edge. */
+@keyframes step-pulse { 50% { box-shadow: 0 0 0 6px transparent; } }
+.step-body { min-width: 0; padding-bottom: var(--spacing-sm); }
+.step-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-md); width: 100%; min-height: 24px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; }
+button.step-row { cursor: pointer; }
+button.step-row:hover .step-label { text-decoration: underline; text-underline-offset: var(--spacing-2xs); }
+button.step-row:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
+.step-label { font-size: var(--type-size-label); font-weight: var(--type-weight-medium); }
+.step[data-state="pending"] .step-label, .step[data-state="skipped"] .step-label { color: var(--color-muted-foreground); font-weight: var(--type-weight-regular); }
+.step[data-state="running"] .step-label, .step[data-state="failed"] .step-label { font-weight: var(--type-weight-semibold); }
+.step[data-state="failed"] .step-label { color: var(--color-danger); }
+.step-row[aria-pressed="true"] .step-label { text-decoration: underline; text-underline-offset: var(--spacing-2xs); }
+.step-meta { font-family: var(--font-mono); font-size: var(--type-size-label); color: var(--color-muted-foreground); white-space: nowrap; font-variant-numeric: tabular-nums; }
+.step-detail { margin-top: var(--spacing-sm); }
+@media (pointer: coarse) {
+  button.step-row { min-height: var(--size-touch-min); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .step[data-state="running"] .step-mark { animation: none; }
+}
+
+.step-bar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--spacing-2xs); height: var(--spacing-xs); min-width: 0; }
+.step-bar > span { border-radius: var(--radius-xs); background: var(--color-secondary); }
+.step-bar > span[data-state="done"] { background: var(--color-success); }
+.step-bar > span[data-state="running"] { background: linear-gradient(90deg, var(--color-success) 0 var(--step-progress, 100%), var(--color-success-surface) var(--step-progress, 100%) 100%); }
+.step-bar > span[data-state="skipped"] { background: repeating-linear-gradient(45deg, var(--color-success) 0 2px, transparent 2px 5px); }
+.step-bar > span[data-state="failed"] { background: var(--color-danger); }
+
+/* Chart presentation options. Exact values remain available in every layout. */
+.chart-body, .chart-plots { min-width: 0; }
+.framed-chart[data-legend="sidebar"] .chart-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 180px); gap: var(--spacing-lg); }
+.framed-chart[data-layout="compact"] { gap: var(--spacing-xs); }
+.chart-lane + .chart-lane { margin-top: var(--spacing-sm); }
+.chart-lane-heading { display: flex; justify-content: space-between; gap: var(--spacing-sm); font-size: var(--type-size-label); font-variant-numeric: tabular-nums; }
+.chart-legend { font-size: var(--type-size-label); }
+.chart-legend-caption { color: var(--color-muted-foreground); overflow-wrap: anywhere; }
+.chart-legend dl { margin: 0; }
+.chart-legend dl > div { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); }
+.chart-legend dd { margin: 0; font-variant-numeric: tabular-nums; }
+.chart-legend-inline { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-sm) var(--spacing-md); }
+.chart-legend-inline dl { display: flex; flex-wrap: wrap; gap: var(--spacing-sm) var(--spacing-lg); }
+.chart-legend-sidebar { border-left: 1px solid var(--color-border); padding-left: var(--spacing-md); }
+.chart-legend-sidebar dl { display: grid; gap: var(--spacing-sm); margin-top: var(--spacing-sm); }
+.chart-series-button { display: inline-flex; align-items: center; padding: var(--spacing-2xs) 0; border: 0; background: transparent; color: var(--color-foreground); font: inherit; text-align: start; cursor: pointer; }
+.chart-series-button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: var(--spacing-2xs); }
+.chart-series-button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
+@media (max-width: 640px) {
+  .framed-chart[data-legend="sidebar"] .chart-body { grid-template-columns: minmax(0, 1fr); }
+  .chart-legend-sidebar { border-left: 0; padding-left: 0; border-top: 1px solid var(--color-border); padding-top: var(--spacing-sm); }
+}
+@media (pointer: coarse) {
+  .chart-series-button { min-height: var(--size-touch-min); min-width: var(--size-touch-min); }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momoi-labs/kiso",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "Kiso design-system contracts and generated design tokens",
   "license": "MIT",
   "repository": {

package/tokens/build/tokens.css

@@ -15,21 +15,6 @@
   --color-neutral-800: #26252b;
   --color-neutral-900: #1b1a1e;
   --color-neutral-950: #131217;
-  --color-accent-50: #f7f4ff;
-  --color-accent-200: #ede8fd;
-  --color-accent-300: #ded5fb;
-  --color-accent-400: #c4b4f5;
-  --color-accent-500: #a690ea;
-  --color-accent-600: #7d68d1;
-  --color-accent-700: #6552b8;
-  --color-accent-800: #46309e;
-  --color-accent-900: #2e2170;
-  --color-accent-950: #211741;
-  --color-accent-base: light-dark(#5b3fc4, #a793f4);
-  --color-status-success: light-dark(#0c6b43, #5bd295);
-  --color-status-warning: light-dark(#7a5000, #efc05b);
-  --color-status-danger: light-dark(#ad2f29, #f5807f);
-  --color-status-info: light-dark(#15559e, #75c4fa);
   --color-dark-50: #f8f6f3;
   --color-dark-100: #eeece9;
   --color-dark-200: #d9d7d3;
@@ -42,6 +27,65 @@
   --color-dark-800: #2d2b28;
   --color-dark-900: #211f1c;
   --color-dark-950: #151411;
+  --color-violet-50: #f7f4ff;
+  --color-violet-200: #ede8fd;
+  --color-violet-300: #ded5fb;
+  --color-violet-400: #c4b4f5;
+  --color-violet-500: #a690ea;
+  --color-violet-600: #7d68d1;
+  --color-violet-700: #6552b8;
+  --color-violet-800: #46309e;
+  --color-violet-900: #2e2170;
+  --color-violet-950: #211741;
+  --color-violet-base: light-dark(#5b3fc4, #a793f4);
+  --color-terracotta-50: #fef4ef;
+  --color-terracotta-200: #fde6db;
+  --color-terracotta-300: #f9d2be;
+  --color-terracotta-400: #f1ae8c;
+  --color-terracotta-500: #e28655;
+  --color-terracotta-600: #c3590b;
+  --color-terracotta-700: #a44700;
+  --color-terracotta-800: #783100;
+  --color-terracotta-900: #561f00;
+  --color-terracotta-950: #3b1100;
+  --color-terracotta-base: light-dark(#974000, #ef8c56);
+  --color-teal-50: #ecfaf7;
+  --color-teal-200: #d7f2ee;
+  --color-teal-300: #b6e7e0;
+  --color-teal-400: #75d3c7;
+  --color-teal-500: #08baab;
+  --color-teal-600: #009084;
+  --color-teal-700: #00776d;
+  --color-teal-800: #00564e;
+  --color-teal-900: #003c36;
+  --color-teal-950: #002723;
+  --color-teal-base: light-dark(#006d64, #05c3b4);
+  --color-cobalt-50: #f1f7ff;
+  --color-cobalt-200: #e1edfe;
+  --color-cobalt-300: #c7ddfe;
+  --color-cobalt-400: #9bc2fb;
+  --color-cobalt-500: #6ca2f1;
+  --color-cobalt-600: #3b7bd7;
+  --color-cobalt-700: #2463bd;
+  --color-cobalt-800: #00449b;
+  --color-cobalt-900: #002d72;
+  --color-cobalt-950: #051f43;
+  --color-cobalt-base: light-dark(#0057c1, #71aafe);
+  --color-accent-50: var(--color-violet-50);
+  --color-accent-200: var(--color-violet-200);
+  --color-accent-300: var(--color-violet-300);
+  --color-accent-400: var(--color-violet-400);
+  --color-accent-500: var(--color-violet-500);
+  --color-accent-600: var(--color-violet-600);
+  --color-accent-700: var(--color-violet-700);
+  --color-accent-800: var(--color-violet-800);
+  --color-accent-900: var(--color-violet-900);
+  --color-accent-950: var(--color-violet-950);
+  --color-accent-base: var(--color-violet-base);
+  --color-status-success: light-dark(#0c6b43, #5bd295);
+  --color-status-warning: light-dark(#7a5000, #efc05b);
+  --color-status-danger: light-dark(#ad2f29, #f5807f);
+  --color-status-info: light-dark(#15559e, #75c4fa);
   --color-background: light-dark(var(--color-neutral-200), var(--color-dark-900));
   --color-surface: light-dark(var(--color-neutral-100), var(--color-dark-800));
   --color-elevated-surface: light-dark(var(--color-white), var(--color-dark-700));
@@ -96,6 +140,11 @@
   --color-warning-on-dark: #efc05b;
   --color-danger-on-dark: #f5807f;
   --color-info-on-dark: #75c4fa;
+  --color-chart-1: var(--color-violet-base);
+  --color-chart-2: var(--color-status-success);
+  --color-chart-3: var(--color-status-warning);
+  --color-chart-4: var(--color-status-info);
+  --color-chart-5: var(--color-status-danger);
   --font-heading: Inter, system-ui, sans-serif;
   --font-body: Inter, system-ui, sans-serif;
   --font-mono: JetBrains Mono, ui-monospace, monospace;
@@ -207,6 +256,125 @@
   color-scheme: dark;
 }
 
+[data-accent="violet"] {
+  --color-accent-50: var(--color-violet-50);
+  --color-accent-200: var(--color-violet-200);
+  --color-accent-300: var(--color-violet-300);
+  --color-accent-400: var(--color-violet-400);
+  --color-accent-500: var(--color-violet-500);
+  --color-accent-600: var(--color-violet-600);
+  --color-accent-700: var(--color-violet-700);
+  --color-accent-800: var(--color-violet-800);
+  --color-accent-900: var(--color-violet-900);
+  --color-accent-950: var(--color-violet-950);
+  --color-accent-base: var(--color-violet-base);
+  --color-primary: light-dark(var(--color-violet-base), #684bb5);
+  --color-primary-hover: light-dark(var(--color-violet-800), #795dc9);
+  --color-primary-foreground: light-dark(var(--color-white), #f7f5fe);
+  --color-accent-surface: light-dark(var(--color-violet-50), #2d2843);
+  --color-accent-surface-hover: light-dark(var(--color-violet-200), #3a3356);
+  --color-selected: light-dark(var(--color-violet-300), #49406d);
+}
+
+[data-accent="terracotta"] {
+  --color-accent-50: var(--color-terracotta-50);
+  --color-accent-200: var(--color-terracotta-200);
+  --color-accent-300: var(--color-terracotta-300);
+  --color-accent-400: var(--color-terracotta-400);
+  --color-accent-500: var(--color-terracotta-500);
+  --color-accent-600: var(--color-terracotta-600);
+  --color-accent-700: var(--color-terracotta-700);
+  --color-accent-800: var(--color-terracotta-800);
+  --color-accent-900: var(--color-terracotta-900);
+  --color-accent-950: var(--color-terracotta-950);
+  --color-accent-base: var(--color-terracotta-base);
+  --color-primary: light-dark(var(--color-terracotta-base), #9f4400);
+  --color-primary-hover: light-dark(var(--color-terracotta-800), #b95100);
+  --color-primary-foreground: light-dark(var(--color-white), #fef4f0);
+  --color-accent-surface: light-dark(var(--color-terracotta-50), #402516);
+  --color-accent-surface-hover: light-dark(var(--color-terracotta-200), #532f1c);
+  --color-selected: light-dark(var(--color-terracotta-300), #683a22);
+}
+
+[data-accent="teal"] {
+  --color-accent-50: var(--color-teal-50);
+  --color-accent-200: var(--color-teal-200);
+  --color-accent-300: var(--color-teal-300);
+  --color-accent-400: var(--color-teal-400);
+  --color-accent-500: var(--color-teal-500);
+  --color-accent-600: var(--color-teal-600);
+  --color-accent-700: var(--color-teal-700);
+  --color-accent-800: var(--color-teal-800);
+  --color-accent-900: var(--color-teal-900);
+  --color-accent-950: var(--color-teal-950);
+  --color-accent-base: var(--color-teal-base);
+  --color-primary: light-dark(var(--color-teal-base), #00736a);
+  --color-primary-hover: light-dark(var(--color-teal-800), #00877c);
+  --color-primary-foreground: light-dark(var(--color-white), #eef9f7);
+  --color-accent-surface: light-dark(var(--color-teal-50), #053430);
+  --color-accent-surface-hover: light-dark(var(--color-teal-200), #00433d);
+  --color-selected: light-dark(var(--color-teal-300), #00544d);
+}
+
+[data-accent="cobalt"] {
+  --color-accent-50: var(--color-cobalt-50);
+  --color-accent-200: var(--color-cobalt-200);
+  --color-accent-300: var(--color-cobalt-300);
+  --color-accent-400: var(--color-cobalt-400);
+  --color-accent-500: var(--color-cobalt-500);
+  --color-accent-600: var(--color-cobalt-600);
+  --color-accent-700: var(--color-cobalt-700);
+  --color-accent-800: var(--color-cobalt-800);
+  --color-accent-900: var(--color-cobalt-900);
+  --color-accent-950: var(--color-cobalt-950);
+  --color-accent-base: var(--color-cobalt-base);
+  --color-primary: light-dark(var(--color-cobalt-base), #1c5fbc);
+  --color-primary-hover: light-dark(var(--color-cobalt-800), #2f72d0);
+  --color-primary-foreground: light-dark(var(--color-white), #f2f7ff);
+  --color-accent-surface: light-dark(var(--color-cobalt-50), #1d2d45);
+  --color-accent-surface-hover: light-dark(var(--color-cobalt-200), #253a59);
+  --color-selected: light-dark(var(--color-cobalt-300), #2d4870);
+}
+
+[data-accent="nocturne"] {
+  --color-accent-50: var(--color-violet-50);
+  --color-accent-200: var(--color-violet-200);
+  --color-accent-300: var(--color-violet-300);
+  --color-accent-400: var(--color-violet-400);
+  --color-accent-500: var(--color-violet-500);
+  --color-accent-600: var(--color-violet-600);
+  --color-accent-700: var(--color-violet-700);
+  --color-accent-800: var(--color-violet-800);
+  --color-accent-900: var(--color-violet-900);
+  --color-accent-950: var(--color-violet-950);
+  --color-accent-base: light-dark(#5348ab, #b4a9e6);
+  --color-primary: light-dark(#5f52ba, #6d5fc2);
+  --color-primary-hover: light-dark(var(--color-violet-800), #7e71d6);
+  --color-primary-foreground: light-dark(var(--color-white), #f7f5fe);
+  --color-accent-surface: light-dark(var(--color-violet-50), #2a2944);
+  --color-accent-surface-hover: light-dark(var(--color-violet-200), #373457);
+  --color-selected: light-dark(#ddd8f5, #372f6b);
+  --color-focus: light-dark(#5f52ba, #9184d9);
+  --color-background: light-dark(#f2f3f8, #161826);
+  --color-surface: light-dark(#ffffff, #232532);
+  --color-elevated-surface: light-dark(#ffffff, #292b31);
+  --color-muted: light-dark(#ebe7f0, #292b31);
+  --color-sidebar: light-dark(#ffffff, #0d0e1b);
+  --color-card: var(--color-surface);
+  --color-popover: var(--color-elevated-surface);
+  --color-foreground: light-dark(#1b1c24, #e9e9ed);
+  --color-muted-foreground: light-dark(#4d4954, #9a9aa6);
+  --color-subtle-foreground: light-dark(#6a6572, #74747f);
+  --color-border: light-dark(#ded9e4, #3f424d);
+  --color-border-strong: light-dark(#84858d, #8f919f);
+  --color-secondary: light-dark(#dadce5, #363743);
+  --color-secondary-hover: light-dark(#b1b2bb, #454752);
+  --color-disabled: light-dark(#b1b2bb, #454752);
+  --color-disabled-surface: light-dark(#f1f2f8, #292b35);
+  --color-skeleton: light-dark(#dadce5, #363743);
+  --color-hatch: light-dark(#dadce5, #363743);
+}
+
 @media (prefers-reduced-motion: reduce) {
   :root {
     --motion-duration-fast: 0s;

package/tokens/build/tokens.d.ts

@@ -19,6 +19,79 @@ export const colorNeutral800: string;
 export const colorNeutral900: string;
 /** Darkest neutral. Retained for compatibility; the dark theme's sidebar is dark.950. */
 export const colorNeutral950: string;
+/** Lightest dark-ramp step. */
+export const colorDark50: string;
+/** Foreground on dark. Text-eligible: passes WCAG AA 4.5:1 on every dark surface. */
+export const colorDark100: string;
+export const colorDark200: string;
+export const colorDark300: string;
+/** Muted foreground on dark. */
+export const colorDark400: string;
+/** Half step. Strong lines and subtle text share it on dark (border-strong, subtle-foreground), as neutral.500 does for both roles on light: dark.500 misses the 3:1 non-text gate on dark.800 and dark.700. */
+export const colorDark450: string;
+/** Free step between the 450 split and the border pair. Not referenced by the semantic layer: 2.6:1 on dark.800 fails the 3:1 non-text gate. */
+export const colorDark500: string;
+/** Borders and inputs on dark. */
+export const colorDark600: string;
+/** Elevated surfaces, muted and secondary fills on dark. */
+export const colorDark700: string;
+/** Surface and card on dark. */
+export const colorDark800: string;
+/** Background on dark. */
+export const colorDark900: string;
+/** Darkest step. Sidebar on dark, and danger-foreground on a danger fill. */
+export const colorDark950: string;
+/** Lightest lilac. Light-theme tinted surface (row hover, ghost hover). */
+export const colorViolet50: string;
+export const colorViolet200: string;
+export const colorViolet300: string;
+export const colorViolet400: string;
+/** Mid lilac. Closes the ramp between 400 and 600; accent.base stays the mode-aware base. */
+export const colorViolet500: string;
+export const colorViolet600: string;
+export const colorViolet700: string;
+export const colorViolet800: string;
+export const colorViolet900: string;
+/** Darkest lilac. Retained ramp step; the dark accent tints are dedicated literals on the semantic layer. */
+export const colorViolet950: string;
+/** Base accent primitive and the theme ink: deeper violet on light (6.36:1 on background), light lilac on dark (6.36:1 on background, 5.5:1 on surface). Flows into link and focus; the deep fill role lives on semantic.primary. */
+export const colorVioletBase: string;
+export const colorTerracotta50: string;
+export const colorTerracotta200: string;
+export const colorTerracotta300: string;
+export const colorTerracotta400: string;
+export const colorTerracotta500: string;
+export const colorTerracotta600: string;
+export const colorTerracotta700: string;
+export const colorTerracotta800: string;
+export const colorTerracotta900: string;
+export const colorTerracotta950: string;
+/** The terracotta ink: text-eligible in both themes. */
+export const colorTerracottaBase: string;
+export const colorTeal50: string;
+export const colorTeal200: string;
+export const colorTeal300: string;
+export const colorTeal400: string;
+export const colorTeal500: string;
+export const colorTeal600: string;
+export const colorTeal700: string;
+export const colorTeal800: string;
+export const colorTeal900: string;
+export const colorTeal950: string;
+/** The teal ink: text-eligible in both themes. */
+export const colorTealBase: string;
+export const colorCobalt50: string;
+export const colorCobalt200: string;
+export const colorCobalt300: string;
+export const colorCobalt400: string;
+export const colorCobalt500: string;
+export const colorCobalt600: string;
+export const colorCobalt700: string;
+export const colorCobalt800: string;
+export const colorCobalt900: string;
+export const colorCobalt950: string;
+/** The cobalt ink: text-eligible in both themes. */
+export const colorCobaltBase: string;
 /** Lightest lilac. Light-theme tinted surface (row hover, ghost hover). */
 export const colorAccent50: string;
 export const colorAccent200: string;
@@ -42,28 +115,6 @@ export const colorStatusWarning: string;
 export const colorStatusDanger: string;
 /** Info status primitive. */
 export const colorStatusInfo: string;
-/** Lightest dark-ramp step. */
-export const colorDark50: string;
-/** Foreground on dark. Text-eligible: passes WCAG AA 4.5:1 on every dark surface. */
-export const colorDark100: string;
-export const colorDark200: string;
-export const colorDark300: string;
-/** Muted foreground on dark. */
-export const colorDark400: string;
-/** Half step. Strong lines and subtle text share it on dark (border-strong, subtle-foreground), as neutral.500 does for both roles on light: dark.500 misses the 3:1 non-text gate on dark.800 and dark.700. */
-export const colorDark450: string;
-/** Free step between the 450 split and the border pair. Not referenced by the semantic layer: 2.6:1 on dark.800 fails the 3:1 non-text gate. */
-export const colorDark500: string;
-/** Borders and inputs on dark. */
-export const colorDark600: string;
-/** Elevated surfaces, muted and secondary fills on dark. */
-export const colorDark700: string;
-/** Surface and card on dark. */
-export const colorDark800: string;
-/** Background on dark. */
-export const colorDark900: string;
-/** Darkest step. Sidebar on dark, and danger-foreground on a danger fill. */
-export const colorDark950: string;
 /** App canvas. Surface role, never text. */
 export const semanticBackground: string;
 /** Cards, panels, table rows. Surface role. */
@@ -172,6 +223,126 @@ export const semanticWarningOnDark: string;
 export const semanticDangerOnDark: string;
 /** Info on a permanently dark surface (log view, terminal). Theme-invariant on purpose: the surface does not follow color-scheme, so neither can the text. */
 export const semanticInfoOnDark: string;
+/** Categorical chart series 1. Identity only, never status. Pair with its numbered label, interactive highlighting, and exact values. Pinned to the violet ink: chart series do not follow the accent, so the palette stays distinguishable from the status series under every accent. */
+export const semanticChart1: string;
+/** Categorical chart series 2. Identity only, never status. Pair with its numbered label, interactive highlighting, and exact values. */
+export const semanticChart2: string;
+/** Categorical chart series 3. Identity only, never status. Pair with its numbered label, interactive highlighting, and exact values. */
+export const semanticChart3: string;
+/** Categorical chart series 4. Identity only, never status. Pair with its numbered label, interactive highlighting, and exact values. */
+export const semanticChart4: string;
+/** Categorical chart series 5. Identity only, never status. Pair with its numbered label, interactive highlighting, and exact values. */
+export const semanticChart5: string;
+export const accentVioletAccent50: string;
+export const accentVioletAccent200: string;
+export const accentVioletAccent300: string;
+export const accentVioletAccent400: string;
+export const accentVioletAccent500: string;
+export const accentVioletAccent600: string;
+export const accentVioletAccent700: string;
+export const accentVioletAccent800: string;
+export const accentVioletAccent900: string;
+export const accentVioletAccent950: string;
+export const accentVioletAccentBase: string;
+/** The primary fill. Light: the ink. Dark: a deeper fill that is not text-eligible. */
+export const accentVioletPrimary: string;
+export const accentVioletPrimaryHover: string;
+export const accentVioletPrimaryForeground: string;
+export const accentVioletAccentSurface: string;
+export const accentVioletAccentSurfaceHover: string;
+export const accentVioletSelected: string;
+export const accentTerracottaAccent50: string;
+export const accentTerracottaAccent200: string;
+export const accentTerracottaAccent300: string;
+export const accentTerracottaAccent400: string;
+export const accentTerracottaAccent500: string;
+export const accentTerracottaAccent600: string;
+export const accentTerracottaAccent700: string;
+export const accentTerracottaAccent800: string;
+export const accentTerracottaAccent900: string;
+export const accentTerracottaAccent950: string;
+export const accentTerracottaAccentBase: string;
+/** The primary fill. Light: the ink. Dark: a deeper fill that is not text-eligible. */
+export const accentTerracottaPrimary: string;
+export const accentTerracottaPrimaryHover: string;
+export const accentTerracottaPrimaryForeground: string;
+export const accentTerracottaAccentSurface: string;
+export const accentTerracottaAccentSurfaceHover: string;
+export const accentTerracottaSelected: string;
+export const accentTealAccent50: string;
+export const accentTealAccent200: string;
+export const accentTealAccent300: string;
+export const accentTealAccent400: string;
+export const accentTealAccent500: string;
+export const accentTealAccent600: string;
+export const accentTealAccent700: string;
+export const accentTealAccent800: string;
+export const accentTealAccent900: string;
+export const accentTealAccent950: string;
+export const accentTealAccentBase: string;
+/** The primary fill. Light: the ink. Dark: a deeper fill that is not text-eligible. */
+export const accentTealPrimary: string;
+export const accentTealPrimaryHover: string;
+export const accentTealPrimaryForeground: string;
+export const accentTealAccentSurface: string;
+export const accentTealAccentSurfaceHover: string;
+export const accentTealSelected: string;
+export const accentCobaltAccent50: string;
+export const accentCobaltAccent200: string;
+export const accentCobaltAccent300: string;
+export const accentCobaltAccent400: string;
+export const accentCobaltAccent500: string;
+export const accentCobaltAccent600: string;
+export const accentCobaltAccent700: string;
+export const accentCobaltAccent800: string;
+export const accentCobaltAccent900: string;
+export const accentCobaltAccent950: string;
+export const accentCobaltAccentBase: string;
+/** The primary fill. Light: the ink. Dark: a deeper fill that is not text-eligible. */
+export const accentCobaltPrimary: string;
+export const accentCobaltPrimaryHover: string;
+export const accentCobaltPrimaryForeground: string;
+export const accentCobaltAccentSurface: string;
+export const accentCobaltAccentSurfaceHover: string;
+export const accentCobaltSelected: string;
+export const accentNocturneAccent50: string;
+export const accentNocturneAccent200: string;
+export const accentNocturneAccent300: string;
+export const accentNocturneAccent400: string;
+export const accentNocturneAccent500: string;
+export const accentNocturneAccent600: string;
+export const accentNocturneAccent700: string;
+export const accentNocturneAccent800: string;
+export const accentNocturneAccent900: string;
+export const accentNocturneAccent950: string;
+/** The nocturne ink: the site's link colour, text-eligible in both themes. */
+export const accentNocturneAccentBase: string;
+/** The site's primary fill. */
+export const accentNocturnePrimary: string;
+export const accentNocturnePrimaryHover: string;
+export const accentNocturnePrimaryForeground: string;
+export const accentNocturneAccentSurface: string;
+export const accentNocturneAccentSurfaceHover: string;
+export const accentNocturneSelected: string;
+export const accentNocturneFocus: string;
+export const accentNocturneBackground: string;
+export const accentNocturneSurface: string;
+export const accentNocturneElevatedSurface: string;
+export const accentNocturneMuted: string;
+export const accentNocturneSidebar: string;
+export const accentNocturneCard: string;
+export const accentNocturnePopover: string;
+export const accentNocturneForeground: string;
+export const accentNocturneMutedForeground: string;
+export const accentNocturneSubtleForeground: string;
+export const accentNocturneBorder: string;
+export const accentNocturneBorderStrong: string;
+export const accentNocturneSecondary: string;
+export const accentNocturneSecondaryHover: string;
+export const accentNocturneDisabled: string;
+export const accentNocturneDisabledSurface: string;
+export const accentNocturneSkeleton: string;
+export const accentNocturneHatch: string;
 /** Heading family. Inter, same as body; headings differentiate by size and weight. */
 export const fontHeading: string;
 /** Body family. Inter for interface text. */