@zeyos/zx 4.4.0 → 5.0.0

package/src/zeyos/table.js

@@ -4,10 +4,16 @@ import { buildListQuery } from './query.js';
 import { fieldToZxColumn, resolveFields } from './schema.js';
 import { normalizeZeyosListResult } from './select.js';
 
+/** @typedef {import('../components/table/table.js').TableOptions} TableOptions */
+
 /**
  * @typedef {Object} ZeyosTableOptions
  * @property {string[]} [fields] Curated ordered field allow-list.
  * @property {Record<string, string>} [labels] Per-field label overrides.
+ * @property {Record<string, string>} [formats] Per-field semantic format overrides, such as
+ * `{ duedate: 'date' }` for a Unix-second field that holds a calendar day.
+ * @property {string} [timeZone] IANA time zone of the ZeyOS instance. Date-only columns show the
+ * calendar day their stored midnight names in this zone; defaults to the runtime's own zone.
  * @property {string|((row: Record<string, unknown>) => unknown)} [rowId='ID'] Row id accessor.
  * @property {number} [pageSize=50] Server page size.
  * @property {{id: string, dir: 'asc'|'desc'}|null} [sort=null] Initial server sort.
@@ -16,8 +22,42 @@ import { normalizeZeyosListResult } from './select.js';
  * @property {false|'single'|'multi'} [selectable=false] Row selection mode.
  * @property {number|string|null} [height=null] Table scroll-region height.
  * @property {(row: Record<string, unknown>, event: CustomEvent<Record<string, unknown>>) => void} [onRowClick] Row activation callback.
+ * @property {TableOptions['variant']} [variant='default'] Table frame treatment; `'plain'` for a
+ * table inside a pane or card that already draws the box.
+ * @property {boolean} [zebra=true] Whether alternate rows use the zebra background.
+ * @property {boolean} [stickyHeader=true] Whether column headers stick while scrolling.
+ * @property {TableOptions['responsive']} [responsive=false] Width below which rows stack.
+ * @property {TableOptions['growing']} [growing=false] Rows rendered at first from a loaded page.
+ * @property {TableOptions['emptyText']} [emptyText=null] What the table shows with no rows.
+ * @property {TableOptions['rowClass']} [rowClass=null] Additional row class callback.
+ * @property {TableOptions['rowKind']} [rowKind=null] Row property or callback naming each row's kind.
+ * @property {TableOptions['rowKinds']} [rowKinds=null] Presentation per row kind.
+ * @property {boolean} [columnVisibility=false] Whether a column visibility chooser is rendered.
+ * @property {boolean} [columnReorder=false] Whether the column chooser exposes reorder controls.
+ * @property {string[]} [hiddenColumns=[]] Initially hidden column ids.
+ * @property {TableOptions['onrowclick']} [onrowclick] Table `rowclick` listener, beside `onRowClick`.
+ * @property {TableOptions['onrowdblclick']} [onrowdblclick] Table `rowdblclick` listener.
+ * @property {TableOptions['onsort']} [onsort] Table `sort` listener; the binding reloads either way.
+ * @property {TableOptions['onselectionchange']} [onselectionchange] Table `selectionchange` listener.
+ * @property {TableOptions['ondatachange']} [ondatachange] Table `datachange` listener.
+ * @property {TableOptions['onstackedchange']} [onstackedchange] Table `stackedchange` listener.
+ * @property {TableOptions['ongrow']} [ongrow] Table `grow` listener.
+ * @property {TableOptions['oncolumnvisibilitychange']} [oncolumnvisibilitychange] Table `columnvisibilitychange` listener.
+ * @property {TableOptions['oncolumnorderchange']} [oncolumnorderchange] Table `columnorderchange` listener.
  */
 
+/**
+ * Table options a binding passes through unchanged: presentation and listeners. The binding owns
+ * `columns`, `data`, and `sortMode`; editing, row reordering, and `hierarchy` are left out because
+ * they rearrange or change rows the server pages and never persists.
+ */
+const TABLE_OPTION_KEYS = [
+  'variant', 'zebra', 'stickyHeader', 'responsive', 'growing', 'emptyText', 'rowClass', 'rowKind',
+  'rowKinds', 'columnVisibility', 'columnReorder', 'hiddenColumns', 'onrowdblclick', 'onsort',
+  'onselectionchange', 'ondatachange', 'onstackedchange', 'ongrow', 'oncolumnvisibilitychange',
+  'oncolumnorderchange'
+];
+
 /**
  * @typedef {Object} ZeyosTableConfig
  * @property {Record<string, any>[]} fieldMeta Ordered normalized schema metadata.
@@ -59,7 +99,8 @@ import { normalizeZeyosListResult } from './select.js';
  * Builds the DOM-free schema-derived columns and Table options used by {@link zeyosTable}. Entity
  * projections include an `<field>_label` alias from a real label field on the referenced resource.
  * Amount fields use each row's real `currency` value for display while retaining the WP14 typed
- * column strategy and right alignment.
+ * column strategy and right alignment. Enum columns show labels, date-only columns calendar days in
+ * `timeZone`, and Table presentation options and listeners pass through to `tableOptions`.
  * @param {Record<string, any>} client Injected ZeyOS client instance.
  * @param {string} resource Resource name such as `transactions`.
  * @param {ZeyosTableOptions} [opts={}] Schema, table, and initial query options.
@@ -68,7 +109,9 @@ import { normalizeZeyosListResult } from './select.js';
 export function buildZeyosTableConfig(client, resource, opts = {}) {
   const fieldMeta = resolveFields(client, resource, {
     fields: opts.fields,
-    labels: opts.labels
+    labels: opts.labels,
+    formats: opts.formats,
+    timeZone: opts.timeZone
   });
   const projection = {};
   const columns = fieldMeta.map((sourceMeta) => {
@@ -94,11 +137,16 @@ export function buildZeyosTableConfig(client, resource, opts = {}) {
   if (typeof rowId === 'string' && !Object.prototype.hasOwnProperty.call(projection, rowId)) {
     projection[rowId] = rowId;
   }
+  const passed = {};
+  for (const key of TABLE_OPTION_KEYS) {
+    if (opts[key] !== undefined) passed[key] = opts[key];
+  }
   return {
     fieldMeta,
     columns,
     projection,
     tableOptions: {
+      ...passed,
       columns,
       data: [],
       rowId,
@@ -106,9 +154,7 @@ export function buildZeyosTableConfig(client, resource, opts = {}) {
       sortMode: 'server',
       selectable: opts.selectable ?? false,
       height: opts.height ?? null,
-      onrowclick: typeof opts.onRowClick === 'function'
-        ? (event) => opts.onRowClick(event.detail.row, event)
-        : undefined
+      onrowclick: rowClickListener(opts)
     }
   };
 }
@@ -117,6 +163,8 @@ export function buildZeyosTableConfig(client, resource, opts = {}) {
  * Generates a server-backed Zx Table. Sorting automatically reloads page zero. `load({page: 0})`
  * replaces data, higher pages append it, and `loadMore()` uses `limit`/`offset` plus the returned
  * count. DataFilter callers can map state with `dataFilterStateToFilters` before `setFilters()`.
+ * Table presentation options (`variant`, `zebra`, `stickyHeader`, `responsive`, `emptyText`, …) and
+ * listeners are passed through to the generated Table.
  * @param {Record<string, any>} client Injected ZeyOS client instance.
  * @param {string} resource Resource name such as `transactions`.
  * @param {ZeyosTableOptions} [opts={}] Schema, table, and initial query options.
@@ -204,6 +252,21 @@ export function zeyosTable(client, resource, opts = {}) {
   return binding;
 }
 
+/**
+ * Combines the Table-style `onrowclick` listener with the binding's row-first `onRowClick`.
+ * @param {ZeyosTableOptions} opts
+ * @returns {((event: CustomEvent<Record<string, any>>) => void)|undefined}
+ */
+function rowClickListener(opts) {
+  const listener = typeof opts.onrowclick === 'function' ? opts.onrowclick : null;
+  const callback = typeof opts.onRowClick === 'function' ? opts.onRowClick : null;
+  if (!listener && !callback) return undefined;
+  return (event) => {
+    listener?.(event);
+    callback?.(event.detail.row, event);
+  };
+}
+
 /** @param {Record<string, any>} meta @returns {string|null} */
 function referencedResourceFor(meta) {
   for (const value of [meta.entity, meta.fk, meta.relation, meta.reference, meta.references]) {

package/src/zeyos/view.js

@@ -26,6 +26,10 @@ import { buildZeyosTableConfig } from './table.js';
  * @property {string[]} [fields] Curated ordered schema field allow-list.
  * @property {string[]} [exclude] Schema fields to omit.
  * @property {Record<string, string>} [labels] Per-field label overrides.
+ * @property {Record<string, string>} [formats] Per-field semantic format overrides, such as
+ * `{ duedate: 'date' }` for a Unix-second field that holds a calendar day.
+ * @property {string} [timeZone] IANA time zone of the ZeyOS instance; date-only fields show the
+ * calendar day their stored midnight names in it. Defaults to the runtime's own zone.
  * @property {Record<string, Partial<ViewField>>} [fieldOverrides] View descriptor overrides.
  * @property {string|((record:Record<string,unknown>)=>unknown)} [recordId='ID'] Record id accessor.
  * @property {number} [pageSize=50] Server page size.
@@ -134,6 +138,8 @@ export function buildZeyosViewConfig(client, resource, opts = {}) {
   const table = buildZeyosTableConfig(client, resource, {
     fields: requested,
     labels: opts.labels,
+    formats: opts.formats,
+    timeZone: opts.timeZone,
     rowId: opts.recordId ?? 'ID',
     sort: opts.sort ?? null
   });

package/styles/base.css

@@ -12,6 +12,11 @@
   color: var(--zx-color-text);
   font-family: var(--zx-font-sans);
   font-size: var(--zx-text-md);
+  /* Inter at 13–14px reads better a touch tight. `cv11` is Inter's single-storey a: at interface
+     sizes it is rounder and calmer than the double-storey form, and it tells a from o and e
+     apart at least as well. Fonts without the feature ignore it. */
+  font-feature-settings: "cv11";
+  letter-spacing: var(--zx-tracking-tight);
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
   scrollbar-gutter: stable;
@@ -67,6 +72,41 @@
   background: var(--zx-color-bg-hover);
 }
 
+/* Quiet fields. Inside `[data-zx-fields="quiet"]` — a property panel, an inspector, an inline
+   record — native text inputs, selects, and textareas drop their border and fill so the values
+   read as text, and show that they are editable on hover (the hover fill) and on focus (the
+   normal border, the control fill, and the focus ring). Read-only and disabled fields never
+   light up. Zero specificity, like the defaults above: a component that styles its own inner
+   input keeps doing so. Composite controls opt in through their own stylesheets. */
+:where(.zx-scope[data-zx-fields="quiet"], .zx-scope [data-zx-fields="quiet"]) :where(
+  input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"],
+    [type="button"], [type="submit"], [type="reset"], [type="image"]),
+  select,
+  textarea
+) {
+  border-color: transparent;
+  background: transparent;
+}
+
+:where(.zx-scope[data-zx-fields="quiet"], .zx-scope [data-zx-fields="quiet"]) :where(
+  input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"],
+    [type="button"], [type="submit"], [type="reset"], [type="image"]),
+  select,
+  textarea
+):where(:hover:not(:focus, :disabled, [readonly])) {
+  background: var(--zx-color-bg-hover);
+}
+
+:where(.zx-scope[data-zx-fields="quiet"], .zx-scope [data-zx-fields="quiet"]) :where(
+  input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"],
+    [type="button"], [type="submit"], [type="reset"], [type="image"]),
+  select,
+  textarea
+):where(:focus:not([readonly])) {
+  border-color: var(--zx-color-border-control);
+  background: var(--zx-color-bg-control);
+}
+
 /* Ghost icon button: a borderless, transparent hit target for small glyph actions
    (notification close, closable tab ×, field clear). Square, no chrome until hovered. */
 .zx-scope .zx-icon-btn {
@@ -122,3 +162,19 @@
     transition-duration: 0.01ms !important;
   }
 }
+
+/* Motion as a setting: the same stop inside any `data-zx-motion="reduced"` region, whatever the
+   operating system says (`tokens/global.css` zeroes the duration tokens there too). Only movement
+   stops — every transition and animation still runs to its end state, at once, and still fires its
+   end event, so a menu still opens and a toast still leaves; a spinner stops turning. There is no
+   value that re-enables motion inside a reduced region. */
+[data-zx-motion="reduced"],
+[data-zx-motion="reduced"] *,
+[data-zx-motion="reduced"] *::before,
+[data-zx-motion="reduced"] *::after,
+[data-zx-motion="reduced"] *::backdrop {
+  scroll-behavior: auto !important;
+  animation-duration: 0.01ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 0.01ms !important;
+}

package/styles/icons.css

@@ -1,7 +1,14 @@
 /* Icons.
    Every icon `icon()` builds carries `.zx-icon`, whether it is one of the bundled inline SVG
    glyphs or a Font Awesome element, so the rules below (and component rules) style both. Font
-   Awesome icons are sized by font-size and occupy exactly one em. */
+   Awesome icons are sized by font-size and occupy exactly one em.
+
+   The bundled glyphs are outlines: the `<svg>` carries `fill="none"`, `stroke="currentColor"`,
+   round caps and joins, and a stroke width in view-box units (1.75 of 24, never under one CSS
+   pixel), and the path inherits all of it. The width therefore scales with the box an icon is
+   drawn in and needs no `vector-effect`. Glyphs registered as `[viewBox, path]` pairs stay filled.
+   Paint is presentation attributes, so plain CSS on `.zx-icon` overrides it: `fill: currentColor`
+   turns an outline into its solid form (a set star, a liked heart). */
 
 .zx-icon {
   flex: none;
@@ -17,6 +24,9 @@ i.zx-icon {
 
 svg.zx-icon {
   vertical-align: middle;
+  /* A stroke centred on a path near the view-box edge reaches past it; small icons thicken the
+     line to stay at one pixel, so let it draw instead of clipping the outer half. */
+  overflow: visible;
 }
 
 /* ZeyOS identity hook. `moduleChip()` now delegates vessel geometry and material entirely to

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;
+  }
 }