@zeyos/zx 4.3.4 → 5.0.0

package/styles/print.css

@@ -0,0 +1,192 @@
+/*
+ * Paper.
+ *
+ * Imported last from `styles/zx.css`, and everything in it lives inside the one `@media print`
+ * block below — so on screen this file contributes nothing at all, and on paper it is the last
+ * word. Consumers print invoices, delivery notes and reports out of these components, and until
+ * this file existed a printed table took its sticky header, its zebra stripes and whatever row
+ * the pointer happened to be over along with it.
+ *
+ * Paper differs from a screen in four ways, and every rule here answers one of them:
+ *
+ *   - There is no viewport, so nothing may stick and nothing may scroll. A sticky header pins
+ *     itself to the top of a sheet of paper, and a scroller prints exactly one screenful.
+ *   - There is no pointer and no focus, so hover fills, focus rings and drag affordances are
+ *     noise that costs toner.
+ *   - There is no second page for the half of a card that did not fit, so blocks that read as one
+ *     thing say where they may be cut, and a table repeats its header on every page.
+ *   - Ink is not free and a fill is not a colour. Backgrounds come off; the one exception is a
+ *     status badge, whose fill carries meaning its text alone does not.
+ *
+ * Semantic tokens only, as everywhere else. The borders are the interesting case: the light
+ * theme's `--zx-color-border` is a very pale grey that a printer renders as nothing, so the
+ * border roles are repointed — once, at the top — to a mix of the text colour, which prints.
+ */
+@media print {
+  /*
+   * Hairlines. `--zx-color-text` rather than a fixed grey so the mix follows the theme it is
+   * printed from, and both selectors are single-class so this beats the theme block that sets the
+   * same roles on the same element: this file is imported last, and on a tie the last one wins.
+   */
+  .zx-scope,
+  [data-zx-theme] {
+    --zx-color-border: color-mix(in srgb, var(--zx-color-text) 45%, transparent);
+    --zx-color-border-strong: color-mix(in srgb, var(--zx-color-text) 65%, transparent);
+    --zx-color-border-control: color-mix(in srgb, var(--zx-color-text) 45%, transparent);
+    --zx-color-overlay-border: color-mix(in srgb, var(--zx-color-text) 45%, transparent);
+    --zx-color-overlay-divider: color-mix(in srgb, var(--zx-color-text) 45%, transparent);
+    /* The glass rim is a light tint of the page, which on white paper is the paper. */
+    --zx-color-glass-border: color-mix(in srgb, var(--zx-color-text) 45%, transparent);
+  }
+
+  /*
+   * A fill is a boundary too, and the filled variants drew theirs with one: their border is
+   * `transparent` because the surface underneath said where the card ended. With the fill gone
+   * they would arrive on paper as loose text, so they take the hairline instead.
+   */
+  .zx-scope .zx-card[data-variant="filled"],
+  .zx-scope .zx-record-card[data-variant="filled"] {
+    border-color: var(--zx-color-border);
+  }
+
+  /*
+   * Fills off. A badge is excluded by the selector rather than overridden afterwards, because its
+   * eleven kind/variant fills would otherwise have to be restated here one by one, and the copy
+   * would rot the first time badge.css gained a kind.
+   */
+  .zx-scope,
+  .zx-scope *:not(.zx-badge, .zx-badge *),
+  .zx-scope *:not(.zx-badge, .zx-badge *)::before,
+  .zx-scope *:not(.zx-badge, .zx-badge *)::after {
+    background-color: transparent !important;
+    background-image: none !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+    -webkit-backdrop-filter: none !important;
+    backdrop-filter: none !important;
+  }
+
+  /* The exception: a badge's colour is half of what it says, so it is asked for explicitly. */
+  .zx-scope .zx-badge {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  /*
+   * A solid button's label is the colour that reads on its fill — white on the accent. With the
+   * fill gone that label is white on white, so the two kinds that have one take the page's text
+   * colour and a hairline of their own. Buttons are not hidden: a printed form or an approval
+   * sheet is read by someone who needs to see what the screen offered.
+   */
+  .zx-scope .zx-btn[data-kind="primary"],
+  .zx-scope .zx-btn[data-kind="danger"] {
+    border-color: var(--zx-color-border);
+    color: var(--zx-color-text);
+  }
+
+  /* Nothing sticks to a sheet of paper. Everything below stacks where it was written instead. */
+  .zx-scope .zx-table th,
+  .zx-scope .zx-table__scroll[data-sticky-header="true"] th,
+  .zx-scope .zx-select__group,
+  .zx-scope .zx-calendar__agenda-heading,
+  .zx-scope .zx-toolbar,
+  .zx-scope .zx-list-toolbar {
+    position: static;
+  }
+
+  /*
+   * Nothing scrolls either: a scroller prints the rows that happen to be inside it and drops the
+   * rest, which on an invoice is a silently short invoice.
+   */
+  .zx-scope .zx-table__scroll,
+  .zx-scope .zx-tree,
+  .zx-scope .zx-card-view,
+  .zx-scope .zx-record-view {
+    overflow: visible;
+    max-block-size: none;
+  }
+
+  /* No pointer, no focus, no zebra — three states that only ever existed on a screen. */
+  .zx-scope .zx-table__scroll[data-zebra="true"] .zx-table__body tr:nth-child(even),
+  .zx-scope .zx-table__body tr[data-row]:hover,
+  .zx-scope .zx-table__body tr[aria-selected="true"] {
+    background: transparent;
+  }
+
+  .zx-scope :focus,
+  .zx-scope :focus-visible {
+    outline: none;
+    box-shadow: none;
+  }
+
+  /* Chrome and overlays: navigation a reader cannot follow, and panels floating over the page. */
+  .zx-scope .zx-navigation-bar,
+  .zx-scope .zx-app-rail,
+  .zx-scope .zx-app-sidebar,
+  .zx-modal,
+  .zx-dialog,
+  .zx-sheet,
+  .zx-dropdown,
+  .zx-context-menu,
+  .zx-tooltip,
+  .zx-launcher,
+  .zx-message-region,
+  [popover]:popover-open {
+    display: none !important;
+  }
+
+  ::backdrop {
+    display: none;
+  }
+
+  /* A table that runs over a page break reintroduces itself on the next one. */
+  .zx-scope .zx-table thead {
+    display: table-header-group;
+  }
+
+  .zx-scope .zx-table tfoot {
+    display: table-footer-group;
+  }
+
+  /* Things that read as one object are not cut in half if they can be moved whole. */
+  .zx-scope .zx-card,
+  .zx-scope .zx-record-card,
+  .zx-scope .zx-stat-tile,
+  .zx-scope .zx-table__body tr {
+    break-inside: avoid;
+  }
+
+  /*
+   * A link on paper is a dead end unless it says where it goes — in prose. Inside a table cell or
+   * on a button the appended URL is not information, it is a wrecked column, so those take it back
+   * off. Each of those selectors outranks the one above on specificity rather than on source
+   * order, so reordering the list cannot quietly turn one of them back on.
+   */
+  .zx-scope a[href^="http"]::after {
+    content: " (" attr(href) ")";
+    font-size: var(--zx-text-sm);
+    font-weight: 400;
+    word-break: break-all;
+  }
+
+  .zx-scope a[href]:empty::after,
+  .zx-scope a[href].zx-icon-btn::after,
+  .zx-scope a:has(> .zx-icon:only-child)::after,
+  .zx-scope th a[href]::after,
+  .zx-scope td a[href]::after,
+  .zx-scope button a[href]::after,
+  .zx-scope a[href].zx-btn::after,
+  .zx-scope .zx-btn a[href]::after,
+  .zx-scope .zx-table a[href]::after,
+  .zx-scope .zx-badge a[href]::after,
+  .zx-scope a[href].zx-badge::after,
+  .zx-scope a[href].zx-entity-ref::after,
+  .zx-scope .zx-entity-ref a[href]::after,
+  .zx-scope .zx-breadcrumb a[href]::after,
+  .zx-scope a[href].zx-stat-tile::after,
+  .zx-scope .zx-tabbox a[href]::after,
+  .zx-scope .zx-tree a[href]::after,
+  .zx-scope .zx-file-item a[href]::after {
+    content: none;
+  }
+}

package/styles/tokens/dark.css

@@ -1,49 +1,92 @@
 /*
- * Tier-2 semantic tokens — dark theme: a near-black page, raised neutral surfaces, muted fills,
- * translucent white borders (10%) and inputs (15%), and restrained secondary text.
+ * Tier-2 semantic tokens — dark theme: a charcoal page lifted off black, a chrome tone and four
+ * surface steps above it, translucent white borders (9%) and inputs (14%), text softened to about
+ * 90% white, and restrained secondary text.
  *
- * The accent roles take the light end of the `--zx-accent-*` ramp (300/400/500) where the light
- * theme takes the dark end, so a preset that repoints the ramp lands correctly in both.
+ * The accent roles take the light end of the `--zx-accent-*` ramp (300/400/500) for text, marks,
+ * and the focus ring, where the light theme takes the dark end, so a preset that repoints the ramp
+ * lands correctly in both. The solid accent is the exception: the primary button keeps the 600 stop
+ * with white ink in both themes rather than turning into a bright 400 slab.
+ *
+ * Every role that mixes another theme-dependent role (hover and current mix the text colour, tones
+ * and status fills mix the surface) is restated here, because a custom property resolves where it
+ * is declared: inherited from the light block, it would carry light values into a dark region.
  *
  * The `[data-zx-theme="auto"]` block below repeats these assignments under a
  * `prefers-color-scheme` query; CSS has no way to share a declaration block across a media
- * boundary, so the two lists must be kept in sync.
+ * boundary, so the two lists must be kept in sync — `tests/unit/tokens.test.js` fails if they drift.
  */
 [data-zx-theme="dark"] {
   color-scheme: dark;
-  --zx-color-bg-page: var(--zx-gray-950);
-  --zx-color-bg-surface: var(--zx-gray-900);
-  --zx-color-bg-raised: var(--zx-gray-800);
+  /* The ramp is lifted off black: page, chrome, surface, raised, and the overlay base ascend in
+     that order, each mixed from two Zinc stops so a tinted neutral ramp carries through. */
+  --zx-color-bg-page: color-mix(in srgb, var(--zx-gray-900) 80%, var(--zx-gray-800));
+  /* Chrome sits just above the page and below the canvas: as in light, the working area is the
+     brightest column and the navigation and inspector recede. */
+  --zx-color-bg-chrome: color-mix(in srgb, var(--zx-color-bg-page) 75%, var(--zx-color-bg-surface));
+  --zx-color-bg-surface: color-mix(in srgb, var(--zx-gray-900) 40%, var(--zx-gray-800));
+  --zx-color-bg-raised: color-mix(in srgb, var(--zx-gray-800) 90%, var(--zx-gray-700));
   --zx-color-bg-control: color-mix(in srgb, var(--zx-gray-0) 5%, transparent);
-  --zx-color-bg-muted: var(--zx-gray-800);
-  --zx-color-bg-hover: color-mix(in srgb, var(--zx-gray-0) 8%, transparent);
-  --zx-color-bg-selected: color-mix(in srgb, var(--zx-accent-400) 18%, var(--zx-gray-900));
+  --zx-color-bg-muted: var(--zx-color-bg-raised);
+  --zx-color-bg-hover: color-mix(in srgb, var(--zx-color-text) 5%, transparent);
+  --zx-color-bg-current: color-mix(in srgb, var(--zx-color-text) 9%, transparent);
+  /* Picked, not current: a tint light enough that muted text on it keeps 4.5:1 under every preset. */
+  --zx-color-bg-selected: color-mix(in srgb, var(--zx-accent-400) 13%, var(--zx-color-bg-surface));
   --zx-color-bg-backdrop: color-mix(in srgb, var(--zx-gray-950) 75%, transparent);
-  --zx-color-overlay-base: color-mix(in srgb, var(--zx-color-bg-raised) 42%, var(--zx-color-bg-page));
+  --zx-color-overlay-base: color-mix(in srgb, var(--zx-gray-800) 60%, var(--zx-gray-700));
   --zx-color-overlay-backdrop: color-mix(in srgb, var(--zx-gray-950) 38%, transparent);
-  --zx-color-border: color-mix(in srgb, var(--zx-gray-0) 10%, transparent);
-  --zx-color-border-strong: color-mix(in srgb, var(--zx-gray-0) 28%, transparent);
-  --zx-color-border-control: color-mix(in srgb, var(--zx-gray-0) 15%, transparent);
-  --zx-color-text: var(--zx-gray-50);
+  --zx-color-border: color-mix(in srgb, var(--zx-gray-0) 9%, transparent);
+  --zx-color-border-subtle: color-mix(in srgb, var(--zx-gray-0) 6%, transparent);
+  --zx-color-border-strong: color-mix(in srgb, var(--zx-gray-0) 24%, transparent);
+  --zx-color-border-control: color-mix(in srgb, var(--zx-gray-0) 14%, transparent);
+  /* Text is softened off pure white (about 90%), secondary text sits near 63%. */
+  --zx-color-text: var(--zx-gray-200);
   --zx-color-text-muted: var(--zx-gray-400);
+  --zx-color-text-subtle: color-mix(in srgb, var(--zx-gray-500) 50%, var(--zx-gray-400));
   --zx-color-text-placeholder: var(--zx-gray-500);
   --zx-color-text-invert: var(--zx-gray-950);
   --zx-color-accent: var(--zx-accent-400);
   --zx-color-accent-hover: var(--zx-accent-300);
   --zx-color-accent-active: var(--zx-accent-500);
-  --zx-color-accent-subtle: color-mix(in srgb, var(--zx-accent-400) 16%, var(--zx-gray-900));
+  --zx-color-accent-subtle: color-mix(in srgb, var(--zx-accent-400) 16%, var(--zx-color-bg-surface));
   --zx-color-on-accent: var(--zx-gray-950);
+  /* The primary button does not glow: it keeps the 600 stop and white ink, as in light. */
+  --zx-color-accent-solid: var(--zx-accent-600);
+  --zx-color-accent-solid-hover: var(--zx-accent-700);
+  --zx-color-accent-solid-active: color-mix(in srgb, var(--zx-accent-700) 82%, var(--zx-gray-950));
+  --zx-color-on-accent-solid: var(--zx-gray-0);
+  /* Danger's tint is a little lighter than the other statuses' so its ink keeps 4.5:1 on it. */
   --zx-color-danger: var(--zx-red-400);
-  --zx-color-danger-bg: color-mix(in srgb, var(--zx-red-400) 16%, var(--zx-gray-900));
+  --zx-color-danger-bg: color-mix(in srgb, var(--zx-red-400) 13%, var(--zx-color-bg-surface));
   --zx-color-warning: var(--zx-amber-400);
-  --zx-color-warning-bg: color-mix(in srgb, var(--zx-amber-400) 16%, var(--zx-gray-900));
+  --zx-color-warning-bg: color-mix(in srgb, var(--zx-amber-400) 16%, var(--zx-color-bg-surface));
   --zx-color-success: var(--zx-green-400);
-  --zx-color-success-bg: color-mix(in srgb, var(--zx-green-400) 16%, var(--zx-gray-900));
+  --zx-color-success-bg: color-mix(in srgb, var(--zx-green-400) 16%, var(--zx-color-bg-surface));
   --zx-color-info: var(--zx-blue-400);
-  --zx-color-info-bg: color-mix(in srgb, var(--zx-blue-400) 16%, var(--zx-gray-900));
+  --zx-color-info-bg: color-mix(in srgb, var(--zx-blue-400) 16%, var(--zx-color-bg-surface));
+  --zx-color-tone-blue-bg: color-mix(in srgb, var(--zx-tone-blue-500) 20%, var(--zx-color-bg-surface));
+  --zx-color-tone-blue-fg: var(--zx-tone-blue-300);
+  --zx-color-tone-teal-bg: color-mix(in srgb, var(--zx-tone-teal-500) 20%, var(--zx-color-bg-surface));
+  --zx-color-tone-teal-fg: var(--zx-tone-teal-300);
+  --zx-color-tone-green-bg: color-mix(in srgb, var(--zx-tone-green-500) 20%, var(--zx-color-bg-surface));
+  --zx-color-tone-green-fg: var(--zx-tone-green-300);
+  --zx-color-tone-amber-bg: color-mix(in srgb, var(--zx-tone-amber-500) 20%, var(--zx-color-bg-surface));
+  --zx-color-tone-amber-fg: var(--zx-tone-amber-300);
+  --zx-color-tone-orange-bg: color-mix(in srgb, var(--zx-tone-orange-500) 20%, var(--zx-color-bg-surface));
+  --zx-color-tone-orange-fg: var(--zx-tone-orange-300);
+  --zx-color-tone-red-bg: color-mix(in srgb, var(--zx-tone-red-500) 20%, var(--zx-color-bg-surface));
+  --zx-color-tone-red-fg: var(--zx-tone-red-300);
+  --zx-color-tone-pink-bg: color-mix(in srgb, var(--zx-tone-pink-500) 20%, var(--zx-color-bg-surface));
+  --zx-color-tone-pink-fg: var(--zx-tone-pink-300);
+  --zx-color-tone-violet-bg: color-mix(in srgb, var(--zx-tone-violet-500) 20%, var(--zx-color-bg-surface));
+  --zx-color-tone-violet-fg: var(--zx-tone-violet-300);
+  --zx-color-tone-slate-bg: color-mix(in srgb, var(--zx-tone-slate-500) 20%, var(--zx-color-bg-surface));
+  --zx-color-tone-slate-fg: var(--zx-tone-slate-300);
   --zx-color-ring: var(--zx-color-accent);
   --zx-focus-ring: 0 0 0 3px color-mix(in srgb, var(--zx-color-ring) 45%, transparent);
   --zx-overlay-shadow: 0 12px 36px rgb(0 0 0 / 45%);
+  /* A shadow alone barely reads on a dark canvas, so the lifted item also gets a faint light rim. */
+  --zx-drag-shadow: 0 0 0 1px color-mix(in srgb, var(--zx-gray-0) 7%, transparent), 0 2px 6px -1px rgb(0 0 0 / 40%), 0 14px 32px -6px rgb(0 0 0 / 60%);
   --zx-header-bg: var(--zx-gray-900);
   --zx-header-text: var(--zx-gray-50);
 }
@@ -51,39 +94,72 @@
 @media (prefers-color-scheme: dark) {
   [data-zx-theme="auto"] {
     color-scheme: dark;
-    --zx-color-bg-page: var(--zx-gray-950);
-    --zx-color-bg-surface: var(--zx-gray-900);
-    --zx-color-bg-raised: var(--zx-gray-800);
+    /* The ramp is lifted off black: page, chrome, surface, raised, and the overlay base ascend in
+       that order, each mixed from two Zinc stops so a tinted neutral ramp carries through. */
+    --zx-color-bg-page: color-mix(in srgb, var(--zx-gray-900) 80%, var(--zx-gray-800));
+    /* Chrome sits just above the page and below the canvas: as in light, the working area is the
+       brightest column and the navigation and inspector recede. */
+    --zx-color-bg-chrome: color-mix(in srgb, var(--zx-color-bg-page) 75%, var(--zx-color-bg-surface));
+    --zx-color-bg-surface: color-mix(in srgb, var(--zx-gray-900) 40%, var(--zx-gray-800));
+    --zx-color-bg-raised: color-mix(in srgb, var(--zx-gray-800) 90%, var(--zx-gray-700));
     --zx-color-bg-control: color-mix(in srgb, var(--zx-gray-0) 5%, transparent);
-    --zx-color-bg-muted: var(--zx-gray-800);
-    --zx-color-bg-hover: color-mix(in srgb, var(--zx-gray-0) 8%, transparent);
-    --zx-color-bg-selected: color-mix(in srgb, var(--zx-accent-400) 18%, var(--zx-gray-900));
+    --zx-color-bg-muted: var(--zx-color-bg-raised);
+    --zx-color-bg-hover: color-mix(in srgb, var(--zx-color-text) 5%, transparent);
+    --zx-color-bg-current: color-mix(in srgb, var(--zx-color-text) 9%, transparent);
+    --zx-color-bg-selected: color-mix(in srgb, var(--zx-accent-400) 13%, var(--zx-color-bg-surface));
     --zx-color-bg-backdrop: color-mix(in srgb, var(--zx-gray-950) 75%, transparent);
-    --zx-color-overlay-base: color-mix(in srgb, var(--zx-color-bg-raised) 42%, var(--zx-color-bg-page));
+    --zx-color-overlay-base: color-mix(in srgb, var(--zx-gray-800) 60%, var(--zx-gray-700));
     --zx-color-overlay-backdrop: color-mix(in srgb, var(--zx-gray-950) 38%, transparent);
-    --zx-color-border: color-mix(in srgb, var(--zx-gray-0) 10%, transparent);
-    --zx-color-border-strong: color-mix(in srgb, var(--zx-gray-0) 28%, transparent);
-    --zx-color-border-control: color-mix(in srgb, var(--zx-gray-0) 15%, transparent);
-    --zx-color-text: var(--zx-gray-50);
+    --zx-color-border: color-mix(in srgb, var(--zx-gray-0) 9%, transparent);
+    --zx-color-border-subtle: color-mix(in srgb, var(--zx-gray-0) 6%, transparent);
+    --zx-color-border-strong: color-mix(in srgb, var(--zx-gray-0) 24%, transparent);
+    --zx-color-border-control: color-mix(in srgb, var(--zx-gray-0) 14%, transparent);
+    /* Text is softened off pure white (about 90%), secondary text sits near 63%. */
+    --zx-color-text: var(--zx-gray-200);
     --zx-color-text-muted: var(--zx-gray-400);
+    --zx-color-text-subtle: color-mix(in srgb, var(--zx-gray-500) 50%, var(--zx-gray-400));
     --zx-color-text-placeholder: var(--zx-gray-500);
     --zx-color-text-invert: var(--zx-gray-950);
     --zx-color-accent: var(--zx-accent-400);
     --zx-color-accent-hover: var(--zx-accent-300);
     --zx-color-accent-active: var(--zx-accent-500);
-    --zx-color-accent-subtle: color-mix(in srgb, var(--zx-accent-400) 16%, var(--zx-gray-900));
+    --zx-color-accent-subtle: color-mix(in srgb, var(--zx-accent-400) 16%, var(--zx-color-bg-surface));
     --zx-color-on-accent: var(--zx-gray-950);
+    /* The primary button does not glow: it keeps the 600 stop and white ink, as in light. */
+    --zx-color-accent-solid: var(--zx-accent-600);
+    --zx-color-accent-solid-hover: var(--zx-accent-700);
+    --zx-color-accent-solid-active: color-mix(in srgb, var(--zx-accent-700) 82%, var(--zx-gray-950));
+    --zx-color-on-accent-solid: var(--zx-gray-0);
     --zx-color-danger: var(--zx-red-400);
-    --zx-color-danger-bg: color-mix(in srgb, var(--zx-red-400) 16%, var(--zx-gray-900));
+    --zx-color-danger-bg: color-mix(in srgb, var(--zx-red-400) 13%, var(--zx-color-bg-surface));
     --zx-color-warning: var(--zx-amber-400);
-    --zx-color-warning-bg: color-mix(in srgb, var(--zx-amber-400) 16%, var(--zx-gray-900));
+    --zx-color-warning-bg: color-mix(in srgb, var(--zx-amber-400) 16%, var(--zx-color-bg-surface));
     --zx-color-success: var(--zx-green-400);
-    --zx-color-success-bg: color-mix(in srgb, var(--zx-green-400) 16%, var(--zx-gray-900));
+    --zx-color-success-bg: color-mix(in srgb, var(--zx-green-400) 16%, var(--zx-color-bg-surface));
     --zx-color-info: var(--zx-blue-400);
-    --zx-color-info-bg: color-mix(in srgb, var(--zx-blue-400) 16%, var(--zx-gray-900));
+    --zx-color-info-bg: color-mix(in srgb, var(--zx-blue-400) 16%, var(--zx-color-bg-surface));
+    --zx-color-tone-blue-bg: color-mix(in srgb, var(--zx-tone-blue-500) 20%, var(--zx-color-bg-surface));
+    --zx-color-tone-blue-fg: var(--zx-tone-blue-300);
+    --zx-color-tone-teal-bg: color-mix(in srgb, var(--zx-tone-teal-500) 20%, var(--zx-color-bg-surface));
+    --zx-color-tone-teal-fg: var(--zx-tone-teal-300);
+    --zx-color-tone-green-bg: color-mix(in srgb, var(--zx-tone-green-500) 20%, var(--zx-color-bg-surface));
+    --zx-color-tone-green-fg: var(--zx-tone-green-300);
+    --zx-color-tone-amber-bg: color-mix(in srgb, var(--zx-tone-amber-500) 20%, var(--zx-color-bg-surface));
+    --zx-color-tone-amber-fg: var(--zx-tone-amber-300);
+    --zx-color-tone-orange-bg: color-mix(in srgb, var(--zx-tone-orange-500) 20%, var(--zx-color-bg-surface));
+    --zx-color-tone-orange-fg: var(--zx-tone-orange-300);
+    --zx-color-tone-red-bg: color-mix(in srgb, var(--zx-tone-red-500) 20%, var(--zx-color-bg-surface));
+    --zx-color-tone-red-fg: var(--zx-tone-red-300);
+    --zx-color-tone-pink-bg: color-mix(in srgb, var(--zx-tone-pink-500) 20%, var(--zx-color-bg-surface));
+    --zx-color-tone-pink-fg: var(--zx-tone-pink-300);
+    --zx-color-tone-violet-bg: color-mix(in srgb, var(--zx-tone-violet-500) 20%, var(--zx-color-bg-surface));
+    --zx-color-tone-violet-fg: var(--zx-tone-violet-300);
+    --zx-color-tone-slate-bg: color-mix(in srgb, var(--zx-tone-slate-500) 20%, var(--zx-color-bg-surface));
+    --zx-color-tone-slate-fg: var(--zx-tone-slate-300);
     --zx-color-ring: var(--zx-color-accent);
     --zx-focus-ring: 0 0 0 3px color-mix(in srgb, var(--zx-color-ring) 45%, transparent);
     --zx-overlay-shadow: 0 12px 36px rgb(0 0 0 / 45%);
+    --zx-drag-shadow: 0 0 0 1px color-mix(in srgb, var(--zx-gray-0) 7%, transparent), 0 2px 6px -1px rgb(0 0 0 / 40%), 0 14px 32px -6px rgb(0 0 0 / 60%);
     --zx-header-bg: var(--zx-gray-900);
     --zx-header-text: var(--zx-gray-50);
   }

package/styles/tokens/global.css

@@ -2,8 +2,8 @@
  * Tier-1 palette and primitives.
  *
  * The neutral ramp uses Zinc-like values; the accent ramp uses an emerald progression anchored at
- * 400 to the ZeyOS brand green #21cc75. Inter and a compact radius scale support dense business
- * interfaces without coupling the token contract to another UI toolkit.
+ * 400 to the ZeyOS brand green #21cc75. Inter, one spacing unit, and small proportional radii
+ * support dense business interfaces without coupling the token contract to another UI toolkit.
  *
  * Only tier-2 semantic tokens (tokens/semantic.css, tokens/dark.css) may reference these.
  * Component CSS must never use them directly — tests/lint-tokens.js enforces that.
@@ -24,12 +24,12 @@
   --zx-gray-900: #18181b;
   --zx-gray-950: #09090b;
 
-  /* Accent — an emerald ramp with the ZeyOS brand green at 400 */
-  --zx-green-300: #5ee9b5;
-  --zx-green-400: #21cc75;
-  --zx-green-500: #009966;
-  --zx-green-600: #007a55;
-  --zx-green-700: #006045;
+  /* Brand — an emerald ramp with the ZeyOS brand green at 400. The accent, never a status. */
+  --zx-emerald-300: #5ee9b5;
+  --zx-emerald-400: #21cc75;
+  --zx-emerald-500: #009966;
+  --zx-emerald-600: #007a55;
+  --zx-emerald-700: #006045;
 
   /*
    * Accent ramp — the indirection the semantic tier reads. It defaults to the Emerald ramp
@@ -37,13 +37,21 @@
    * every semantic mapping: `tokens/themes.css` repoints these, and light, dark, and auto all
    * follow because each of them picks its own stop off the ramp.
    */
-  --zx-accent-300: var(--zx-green-300);
-  --zx-accent-400: var(--zx-green-400);
-  --zx-accent-500: var(--zx-green-500);
-  --zx-accent-600: var(--zx-green-600);
-  --zx-accent-700: var(--zx-green-700);
+  --zx-accent-300: var(--zx-emerald-300);
+  --zx-accent-400: var(--zx-emerald-400);
+  --zx-accent-500: var(--zx-emerald-500);
+  --zx-accent-600: var(--zx-emerald-600);
+  --zx-accent-700: var(--zx-emerald-700);
 
-  /* Status */
+  /*
+   * Status. Green is a yellow-green (OKLCH hue 130) so that "succeeded" never reads as the
+   * brand: the default accent sits at hue 155–165, and the two are told apart at a glance.
+   */
+  --zx-green-300: #b3e87a;
+  --zx-green-400: #90cd40;
+  --zx-green-500: #6ba211;
+  --zx-green-600: #4d7800;
+  --zx-green-700: #3d5e06;
   --zx-red-400: #ff6467;
   --zx-red-500: #e7000b;
   --zx-red-600: #c10007;
@@ -54,21 +62,67 @@
   --zx-blue-500: #2b7fff;
   --zx-blue-600: #155dfc;
 
-  --zx-space-1: 4px;
-  --zx-space-2: 8px;
-  --zx-space-3: 12px;
-  --zx-space-4: 16px;
-  --zx-space-5: 20px;
-  --zx-space-6: 24px;
-  --zx-space-7: 32px;
-  --zx-space-8: 40px;
+  /*
+   * Tone ramps — the categorical palette behind tags, chips, icon tiles, avatars, and chart
+   * series. It is deliberately neither the accent nor the status set: nine hues built on one
+   * recipe in OKLCH (300 at L 0.86, 500 at L 0.60, 700 at L 0.46, moderate chroma), so every
+   * tone carries the same visual weight and none of them shouts. The semantic tier mixes 500 into
+   * the surface for a tone's fill and takes 700 (light) or 300 (dark) for its ink.
+   */
+  --zx-tone-blue-300: #b3d4ff;
+  --zx-tone-blue-500: #3a81d7;
+  --zx-tone-blue-700: #1d589d;
+  --zx-tone-teal-300: #a8ddda;
+  --zx-tone-teal-500: #009390;
+  --zx-tone-teal-700: #006663;
+  --zx-tone-green-300: #b5deb5;
+  --zx-tone-green-500: #419547;
+  --zx-tone-green-700: #226929;
+  --zx-tone-amber-300: #eacc9b;
+  --zx-tone-amber-500: #a77600;
+  --zx-tone-amber-700: #745100;
+  --zx-tone-orange-300: #fbc3a7;
+  --zx-tone-orange-500: #c55f1d;
+  --zx-tone-orange-700: #8e3c00;
+  --zx-tone-red-300: #ffbfb8;
+  --zx-tone-red-500: #ca5551;
+  --zx-tone-red-700: #923432;
+  --zx-tone-pink-300: #f6bfd7;
+  --zx-tone-pink-500: #bc598c;
+  --zx-tone-pink-700: #873761;
+  --zx-tone-violet-300: #d4c8fe;
+  --zx-tone-violet-500: #886acf;
+  --zx-tone-violet-700: #5e4697;
+  --zx-tone-slate-300: #cad2dd;
+  --zx-tone-slate-500: #728295;
+  --zx-tone-slate-700: #4d5969;
+
+  /*
+   * Spacing — one unit, eight steps. Every step is a multiple of `--zx-space-unit`, so an
+   * application tightens or loosens its whole rhythm with one declaration rather than eight.
+   * At the default unit the steps are 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40px.
+   */
+  --zx-space-unit: 4px;
+  --zx-space-1: calc(var(--zx-space-unit) * 1);
+  --zx-space-2: calc(var(--zx-space-unit) * 2);
+  --zx-space-3: calc(var(--zx-space-unit) * 3);
+  --zx-space-4: calc(var(--zx-space-unit) * 4);
+  --zx-space-5: calc(var(--zx-space-unit) * 5);
+  --zx-space-6: calc(var(--zx-space-unit) * 6);
+  --zx-space-7: calc(var(--zx-space-unit) * 8);
+  --zx-space-8: calc(var(--zx-space-unit) * 10);
 
-  /* Radius — a 0.45rem base with compact derived steps */
-  --zx-radius: 0.45rem;
-  --zx-radius-sm: calc(var(--zx-radius) - 4px);
-  --zx-radius-md: calc(var(--zx-radius) - 2px);
+  /*
+   * Radius — one base, proportional steps, so a theme that scales `--zx-radius` keeps the
+   * relationship between a menu item, a control, and the panel around them. At the default base
+   * the steps are 2 / 3 / 4 / 6px. `-full` is for shapes whose roundness is the meaning: badges,
+   * avatars, toggles, progress tracks.
+   */
+  --zx-radius: 4px;
+  --zx-radius-sm: calc(var(--zx-radius) * .5);
+  --zx-radius-md: calc(var(--zx-radius) * .75);
   --zx-radius-lg: var(--zx-radius);
-  --zx-radius-xl: calc(var(--zx-radius) + 4px);
+  --zx-radius-xl: calc(var(--zx-radius) * 1.5);
   --zx-radius-full: 999px;
 
   --zx-font-sans: Inter, "Inter Variable", ui-sans-serif, system-ui, -apple-system,
@@ -81,12 +135,52 @@
   --zx-text-lg: 16px;
   --zx-text-xl: 18px;
   --zx-text-2xl: 24px;
+  --zx-text-3xl: 30px;
+
+  /*
+   * Weight and tracking. Interface text sits at the mid weights — medium for labels and rows,
+   * semibold for headings and the current item; heavier is for titles and figures only. UI text
+   * runs slightly tight (the root sets it), titles a little tighter.
+   */
+  --zx-weight-medium: 500;
+  --zx-weight-semibold: 600;
+  --zx-tracking-tight: -0.01em;
+  --zx-tracking-title: -0.015em;
 
   --zx-shadow-1: 0 1px 2px 0 rgb(9 9 11 / 5%);
   --zx-shadow-2: 0 1px 3px 0 rgb(9 9 11 / 10%), 0 1px 2px -1px rgb(9 9 11 / 10%);
   --zx-shadow-3: 0 10px 15px -3px rgb(9 9 11 / 10%), 0 4px 6px -4px rgb(9 9 11 / 10%);
 
+  /*
+   * Motion. Two durations and three named curves: `--zx-ease` for state changes (hover, colour,
+   * a fade), `--zx-ease-spring` for things that pop in — a small overshoot of about 3%, never a
+   * bounce — and `--zx-ease-drawer` for panels that slide: a decisive ease-out that covers most of
+   * the distance at once and settles, so a drawer feels like it arrives rather than drifts.
+   */
   --zx-dur-fast: 120ms;
   --zx-dur-base: 180ms;
   --zx-ease: cubic-bezier(.2, .6, .3, 1);
+  --zx-ease-spring: cubic-bezier(.34, 1.32, .64, 1);
+  --zx-ease-drawer: cubic-bezier(.32, .72, 0, 1);
+}
+
+/*
+ * Motion as a setting. `data-zx-motion="reduced"` on any element — usually `<html>`, from an
+ * application's own preference — stops movement inside it: every duration becomes 0ms here, and
+ * `base.css` stops the CSS animations and transitions that do not read a token. The operating
+ * system's reduced-motion preference does the same for the whole page. There is deliberately no
+ * value that turns motion back on: a person who asked their system for less motion gets less,
+ * whatever an application or a region says. `src/core/motion.js` answers the same question for
+ * script (`prefersReducedMotion`, `watchMotion`).
+ */
+[data-zx-motion="reduced"] {
+  --zx-dur-fast: 0ms;
+  --zx-dur-base: 0ms;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --zx-dur-fast: 0ms;
+    --zx-dur-base: 0ms;
+  }
 }