@momoi-labs/kiso 0.10.0 → 0.11.0

package/kiso/docs/patterns/crud.md

@@ -21,7 +21,7 @@ specified separately and must still run before destruction.
 | Page framing | [PageHeader](../components/page-header.md) | Title ("New connection", "Edit connection"); optional cancel secondary action |
 | Fields | [FormField](../components/form-field.md) | Each field = [Label](../components/label.md) + control ([Input](../components/input.md), [Textarea](../components/textarea.md), [Select](../components/select.md), [Checkbox](../components/checkbox.md), …) + optional [HelperText](../components/helper-text.md) + [ValidationMessage](../components/validation-message.md) |
 | Grouping | [Card](../components/card.md) or section headings | Related field groups (connection, credentials, advanced) |
-| Primary actions | [Button](../components/button.md) | Save / Create (primary); Cancel (secondary/ghost) |
+| Primary actions | [FormActions](../components/form-actions.md) + [Button](../components/button.md) | Save / Create (primary); Cancel (secondary/ghost) |
 | Overlays | [Modal / Dialog](../components/modal-dialog.md) or [Drawer](../components/drawer.md) | Compact create/edit; Drawer preferred on small viewports for the same task |
 | Inline errors | [ValidationMessage](../components/validation-message.md) on FormField | Field-level recovery; page [Alert](../components/alert.md) is for non-field failures |
 | Form / load errors | [Alert](../components/alert.md) | Submit or load failures that are not field-local (what / why / now) |
@@ -36,6 +36,19 @@ invalid fields and ValidationMessage use `--color-danger`, focus
 `--color-focus`, destructive Buttons use `--color-danger` per the Button
 contract.
 
+## Form actions
+
+Every explicit-submit form composes [Form](../components/form.md) and
+[FormActions](../components/form-actions.md). Place one primary submit action
+and any secondary actions after the fields. Use sticky actions when the form
+extends beyond the page or panel viewport. Follow the FormActions contract for
+scroll ownership, optional messages, and responsive layout.
+
+The product owns dirty tracking, validation, submission, and navigation.
+Discard restores the last saved values; Cancel leaves the task. Keep entries
+on failure. Announce feedback in the message region, not around the buttons.
+Immediate preferences and automatic filters do not require FormActions.
+
 ## Flow
 
 ### Create
@@ -87,7 +100,7 @@ Full-page create/edit:
 
 ```text
 ┌──────────────────────────────────────────────────────────────────────┐
-│ PageHeader: Edit connection                         [Cancel] [Save]  │
+│ PageHeader: Edit connection                                          │
 ├──────────────────────────────────────────────────────────────────────┤
 │ Alert (only if submit/load error — what / why / now)                 │
 │                                                                      │

package/kiso/docs/patterns/settings.md

@@ -15,13 +15,13 @@ immediate vs deferred persistence, and unambiguous save feedback.
 
 | Region | Compose with | Role |
 | --- | --- | --- |
-| Page framing | [PageHeader](../components/page-header.md) | "Settings" or section title; optional save actions when the page uses explicit save |
+| Page framing | [PageHeader](../components/page-header.md) | "Settings" or section title; section context; submit actions belong in FormActions |
 | Section nav | [Tabs](../components/tabs.md) or Sidebar sub-nav [Link](../components/link.md)s | Split General / Notifications / API, etc. |
 | Groups | [Card](../components/card.md) | One settings group per Card |
 | Text / choice fields | [FormField](../components/form-field.md) | [Label](../components/label.md) + [Input](../components/input.md) / [Select](../components/select.md) / [Textarea](../components/textarea.md) + [HelperText](../components/helper-text.md) + [ValidationMessage](../components/validation-message.md) |
 | Repeated values with their own options | [ChipInput](../components/chip-input.md) | One field for a list a person types, such as dependencies or scopes, instead of a form section per entry |
 | Booleans | [Switch](../components/switch.md) (immediate) or [Checkbox](../components/checkbox.md) inside FormField (part of a saved form) | Switch for single immediate preferences; Checkbox when the value submits with Save |
-| Actions | [Button](../components/button.md) | Save (primary), Reset/Cancel (secondary) for explicit-save sections |
+| Actions | [FormActions](../components/form-actions.md) + [Button](../components/button.md) | Save (primary), Reset/Cancel (secondary) for explicit-save sections |
 | Feedback | [Toast](../components/toast.md), [Alert](../components/alert.md), [ValidationMessage](../components/validation-message.md) | Saved confirmation; section errors; field errors |
 | Shell | [Application shell](application-shell.md) | Authenticated framing |
 
@@ -50,8 +50,27 @@ Three points bind here rather than there:
 ```text
 Card: Appearance
   Theme                                   [ ▣ ][ ☀ ][ ☾ ]
+  Accent                                  [ ● ][ ● ][ ● ][ ● ]
 ```
 
+The accent is the second row of the same card, with
+[AccentSelector](../components/accent-selector.md). It follows the same three
+points: `violet` is the default, the choice is local and instant, and it
+persists under `kiso-accent` outside the section's Save button.
+
+## Form actions
+
+Every explicit-submit form composes [Form](../components/form.md) and
+[FormActions](../components/form-actions.md). Place one primary submit action
+and any secondary actions after the fields. Use sticky actions when the form
+extends beyond the page or panel viewport. Follow the FormActions contract for
+scroll ownership, optional messages, and responsive layout.
+
+The product owns dirty tracking, validation, submission, and navigation.
+Discard restores the last saved values; Cancel leaves the task. Keep entries
+on failure. Announce feedback in the message region, not around the buttons.
+Immediate preferences and automatic filters do not require FormActions.
+
 ## Flow
 
 ### Explicit save (default for multi-field sections)

package/kiso/docs/tokens.md

@@ -157,10 +157,68 @@ dark because `dark.500` misses the 3:1 non-text and large-text gates on
 `dark.800` and `dark.700`; they share a step on dark exactly as they share
 `neutral.500` on light.
 
+## Accents
+
+The accent is a second axis over the same custom properties, orthogonal to the
+theme. Five accents ship: `violet` (the default), `terracotta`, `teal`,
+`cobalt`, and `nocturne`. The first four are hue turns: each is a primitive
+ramp (`color.violet.*`, `color.terracotta.*`, and so on) with the same
+lightness per step, so every role keeps the contrast it was gated at.
+`color.accent.*` is the *active* ramp: an alias layer that points at violet by
+default.
+
+`nocturne` is different in kind. It is the marketing site's palette: the
+violet ramp and ink over cool slate neutrals (hue 278) instead of the warm
+ones. It is the one accent that restates the neutral roles, surfaces, text,
+borders, and neutral fills alike, because the slate is the palette, not a
+tint on it. A hue accent nested inside a nocturne container keeps the slate
+and changes only the accent. Its surface, text, and accent values are the
+site's own, gated like every other accent; the roles the site never named are
+Kiso's lightness in the slate hue.
+
+An accent is chosen with `data-accent` on `<html>`, or on any container:
+
+```html
+<html data-accent="teal">
+```
+
+No attribute means violet. The build emits one `[data-accent="<name>"]` block
+per accent from the `accent.<name>` group in `tokens/tokens.json`. That block
+restates only the roles that follow the hue:
+
+- the active ramp, `--color-accent-50` to `--color-accent-950` and
+  `--color-accent-base`, remapped to the named ramp. `link`, `focus`, `ring`,
+  `accent`, and the light-theme tints alias the ramp, so they follow without
+  being restated;
+- the raw-hex dark fills: `primary`, `primary-hover`, `primary-foreground`,
+  `accent-surface`, `accent-surface-hover`, and `selected`.
+
+The neutral roles are not restated. The warm grey carries the interface under
+every hue accent, and only the accent changes: a teal product and a violet
+product share the same canvas, text, and borders. Tinting the neutrals toward
+the hue was tried and rejected; at any visible strength it reads as a filter
+over the screen rather than as a colour choice.
+
+Values inside the block still use `light-dark()`, so accent and theme compose
+without a cross product: five accents and two themes are five blocks, not
+ten. Nesting resets cleanly: a `data-accent="violet"` container inside a
+teal page is violet again.
+
+Chart series do not follow the accent. `chart-1` is pinned to the violet ink
+because a terracotta, teal, or cobalt series collapses into the warning, success,
+or info series; see [Categorical chart colors](#categorical-chart-colors).
+Status roles do not follow it either. Red, amber, and green were rejected as
+accents for the same reason: a primary button in the danger hue reads as
+destructive.
+
+Applications own the choice and its persistence, exactly as with the theme.
+Use [AccentSelector](components/accent-selector.md) for the control.
+
 ## AA gate
 
 `scripts/check-contrast.mjs` is the build-time AA gate. In both dark and light
-themes it resolves the semantic aliases and checks:
+themes, for the default and for every accent, it resolves the semantic aliases
+and checks:
 
 - `foreground`, `muted-foreground`, `link`, `accent`, `success`, `warning`,
   `danger`, and `info` at **4.5:1** or better against `background`, `surface`,
@@ -315,8 +373,10 @@ tokens to the same version.
 ## Categorical chart colors
 
 Issue #93 adds `--color-chart-1` through `--color-chart-5` for series identity.
-The roles derive from accent.base, status.success, status.warning, status.info,
-and status.danger, in that order. Their meaning inside a chart is categorical,
+The roles derive from violet.base, status.success, status.warning, status.info,
+and status.danger, in that order. `chart-1` is the violet ink under every
+accent, not the active accent: a series must stay distinguishable from the
+status series whatever the product's accent is. Their meaning inside a chart is categorical,
 never health or severity. Existing status roles keep their meaning elsewhere.
 
 Each slot meets 3:1 on background, surface, and elevated-surface in both
@@ -335,5 +395,5 @@ Keep the canonical slot order in stacks; changing adjacency needs review.
 
 The calculation uses [Oklab](https://bottosson.github.io/posts/oklab/) and
 [Machado's simulation model](https://pubmed.ncbi.nlm.nih.gov/19834201/).
-Run `node scripts/check-chart-palette.mjs` for both themes. Numbered labels,
+Run `node scripts/check-chart-palette.mjs` for both themes and every accent. Numbered labels,
 highlighting, and tables remain required even when these checks pass.

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
@@ -1185,7 +1221,7 @@ pre::after {
 .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; }
+.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; }
@@ -1198,6 +1234,52 @@ pre::after {
   .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); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momoi-labs/kiso",
-  "version": "0.10.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,7 +140,7 @@
   --color-warning-on-dark: #efc05b;
   --color-danger-on-dark: #f5807f;
   --color-info-on-dark: #75c4fa;
-  --color-chart-1: var(--color-accent-base);
+  --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);
@@ -212,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;