@zeyos/zx 4.4.0 → 5.2.0

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

package/styles/tokens/semantic.css

@@ -1,14 +1,55 @@
 /*
  * Tier-2 semantic tokens — light theme (the default).
  *
- * The mapping uses white surfaces, restrained neutral hover/muted fills, quiet borders and inputs,
- * strong body text, and compact control geometry (32px controls, `--radius` corners, a 3px
- * translucent focus ring).
+ * The mapping uses a white canvas with a grey chrome tone beside it, translucent neutral
+ * hover/current fills, quiet borders and inputs, strong body text, a categorical tone palette
+ * apart from both the accent and the status colours, and one tight control geometry (30px
+ * controls, `--zx-radius` corners, a 3px translucent focus ring). There is a single geometry: an
+ * application that wants a different rhythm sets `--zx-space-unit` and `--zx-control-height`
+ * rather than switching a mode.
  *
- * The accent roles read `--zx-accent-*` rather than the green ramp directly, which is what lets
+ * The accent roles read `--zx-accent-*` rather than the emerald ramp directly, which is what lets
  * `tokens/themes.css` retheme them. Status colours keep their own ramps on purpose — see the note
  * in that file.
  */
+/*
+ * Geometry and material settings — every token here is theme-independent, so it is declared on
+ * :root ONLY and never restated on a `[data-zx-theme]` block. A custom property declared on a
+ * theme element shadows the inherited one, so a nested `[data-zx-theme="light"]` region would
+ * otherwise reset an application's own `:root { --zx-control-height: 40px }` back to the default
+ * while a dark region kept it. There is one geometry; the theme blocks below carry colours only,
+ * and `tests/unit/geometry-tokens.test.js` fails if a non-colour token moves back into one.
+ */
+:root {
+  --zx-control-height: 30px;
+  --zx-control-pad-x: 10px;
+  --zx-control-radius: var(--zx-radius-lg);
+  --zx-control-font-size: var(--zx-text-md);
+  --zx-control-font-weight: 500;
+  /* Blur applied behind a backdrop that asked for it. */
+  --zx-overlay-blur: 8px;
+  /* AppIcon is a dark chromatic lens: colour lives in its rim and low bloom, not a glossy fill.
+     Its strengths remain inherited, while each AppIcon mixes them with its own module colour. */
+  --zx-app-icon-core-strength: 52%;
+  --zx-app-icon-rim-strength: 58%;
+  --zx-app-icon-bloom-strength: 64%;
+  --zx-app-icon-specular-strength: 72%;
+  --zx-app-icon-halo-size: 14px;
+  --zx-app-icon-halo-strength: 22%;
+  --zx-overlay-specular-strength: 48%;
+  --zx-glass-blur: 8px;
+  --zx-glass-saturation: 130%;
+  --zx-glass-color-strength: 82%;
+  /* Material filters are roles, not component recipes. Aurora remains a separate canvas layer. */
+  --zx-glass-filter-icon: blur(4px) saturate(118%);
+  --zx-glass-filter-control: blur(6px) saturate(116%);
+  --zx-glass-filter-raised: blur(8px) saturate(120%);
+  --zx-glass-filter-chrome: blur(10px) saturate(122%);
+  --zx-glass-filter-overlay: blur(16px) saturate(140%);
+  --zx-glass-filter-panel: blur(14px) saturate(132%);
+}
+
+/* The light theme — colours only. */
 :root,
 [data-zx-theme="light"] {
   color-scheme: light;
@@ -16,15 +57,21 @@
   --zx-color-bg-surface: var(--zx-gray-0);
   --zx-color-bg-raised: var(--zx-gray-0);
   --zx-color-bg-control: var(--zx-gray-0);
+  /* Navigation and inspector columns: one clear step below the canvas, so tone rather than a
+     line separates them from the working area. */
+  --zx-color-bg-chrome: color-mix(in srgb, var(--zx-gray-100) 80%, var(--zx-gray-50));
   --zx-color-bg-muted: var(--zx-gray-100);
-  --zx-color-bg-hover: var(--zx-gray-100);
   --zx-color-bg-selected: color-mix(in srgb, var(--zx-accent-600) 10%, var(--zx-gray-0));
   --zx-color-bg-backdrop: color-mix(in srgb, var(--zx-gray-950) 50%, transparent);
   --zx-color-border: var(--zx-gray-200);
   --zx-color-border-strong: var(--zx-gray-300);
   --zx-color-border-control: var(--zx-gray-200);
   --zx-color-text: var(--zx-gray-950);
-  --zx-color-text-muted: var(--zx-gray-500);
+  /* Between the 500 and 600 stops, so secondary text holds 4.5:1 on the chrome tone and on a
+     current row there, not only on white. */
+  --zx-color-text-muted: color-mix(in srgb, var(--zx-gray-500) 50%, var(--zx-gray-600));
+  /* Icons and non-essential meta: at least 3:1 on the surface, the chrome, and a current row. */
+  --zx-color-text-subtle: color-mix(in srgb, var(--zx-gray-500) 70%, var(--zx-gray-400));
   --zx-color-text-placeholder: var(--zx-gray-400);
   --zx-color-text-invert: var(--zx-gray-50);
   --zx-color-app-icon-glyph: var(--zx-gray-0);
@@ -34,7 +81,15 @@
   --zx-color-accent-active: var(--zx-accent-700);
   --zx-color-accent-subtle: color-mix(in srgb, var(--zx-accent-600) 10%, var(--zx-gray-0));
   --zx-color-on-accent: var(--zx-gray-0);
-  --zx-color-danger: var(--zx-red-500);
+  /* The solid accent — the one primary action on a screen. Both themes fill it with the 600 stop
+     and white ink; `--zx-color-accent` stays the stop each theme reads best as text and marks. */
+  --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);
+  /* Status colours are ink as often as fill (badges, messages, field errors): each keeps 4.5:1 on
+     every surface and on its own tint. Red 500 does not, so danger takes the 600 step. */
+  --zx-color-danger: var(--zx-red-600);
   --zx-color-danger-bg: color-mix(in srgb, var(--zx-red-500) 10%, var(--zx-gray-0));
   --zx-color-warning: var(--zx-amber-600);
   --zx-color-warning-bg: color-mix(in srgb, var(--zx-amber-400) 18%, var(--zx-gray-0));
@@ -42,29 +97,90 @@
   --zx-color-success-bg: color-mix(in srgb, var(--zx-green-600) 10%, var(--zx-gray-0));
   --zx-color-info: var(--zx-blue-600);
   --zx-color-info-bg: color-mix(in srgb, var(--zx-blue-500) 10%, var(--zx-gray-0));
-  --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-control-height: 32px;
-  --zx-control-pad-x: 10px;
-  --zx-control-radius: var(--zx-radius-lg);
-  --zx-control-font-size: var(--zx-text-md);
-  --zx-control-font-weight: 500;
+  --zx-color-tone-blue-fg: var(--zx-tone-blue-700);
+  --zx-color-tone-teal-fg: var(--zx-tone-teal-700);
+  --zx-color-tone-green-fg: var(--zx-tone-green-700);
+  --zx-color-tone-amber-fg: var(--zx-tone-amber-700);
+  --zx-color-tone-orange-fg: var(--zx-tone-orange-700);
+  --zx-color-tone-red-fg: var(--zx-tone-red-700);
+  --zx-color-tone-pink-fg: var(--zx-tone-pink-700);
+  --zx-color-tone-violet-fg: var(--zx-tone-violet-700);
+  --zx-color-tone-slate-fg: var(--zx-tone-slate-700);
+  /* Chart series, in assignment order. The order is what keeps neighbours apart (adjacent pairs
+     at ΔE ≥ 8 under protanopia and deuteranopia), and it deliberately does not open on the
+     accent. The 500 stops clear 3:1 against the light and the dark surface alike, so the dark
+     theme keeps this list. */
+  --zx-color-chart-1: var(--zx-tone-blue-500);
+  --zx-color-chart-2: var(--zx-tone-orange-500);
+  --zx-color-chart-3: var(--zx-tone-teal-500);
+  --zx-color-chart-4: var(--zx-tone-amber-500);
+  --zx-color-chart-5: var(--zx-tone-pink-500);
+  --zx-color-chart-6: var(--zx-tone-green-500);
+  --zx-color-chart-7: var(--zx-tone-violet-500);
+  --zx-color-chart-8: var(--zx-tone-red-500);
+  /* Solid identity fills — a module tile, an application icon — carrying the white icon glyph.
+     The 500 stops keep that glyph at 3:1 or better and read as the same tone on either theme,
+     so, like the chart series, the dark theme keeps this list. */
+  --zx-color-tone-blue-solid: var(--zx-tone-blue-500);
+  --zx-color-tone-teal-solid: var(--zx-tone-teal-500);
+  --zx-color-tone-green-solid: var(--zx-tone-green-500);
+  --zx-color-tone-amber-solid: var(--zx-tone-amber-500);
+  --zx-color-tone-orange-solid: var(--zx-tone-orange-500);
+  --zx-color-tone-red-solid: var(--zx-tone-red-500);
+  --zx-color-tone-pink-solid: var(--zx-tone-pink-500);
+  --zx-color-tone-violet-solid: var(--zx-tone-violet-500);
+  --zx-color-tone-slate-solid: var(--zx-tone-slate-500);
+  /* A resting surface one hair off what it sits on — a panel, an outlined card in a lane, a slider
+     thumb: a contact shadow only, far below an overlay or a dragged item. */
+  --zx-surface-shadow: var(--zx-shadow-1);
   --zx-overlay-shadow: var(--zx-shadow-3);
-  /* Blur applied behind a backdrop that asked for it. Theme-independent, so light defines it once. */
-  --zx-overlay-blur: 8px;
+  /* An item being dragged — a lifted card, a row in flight, a drag preview: a tight contact
+     shadow and a wide soft one, clearly higher than a resting card and lower than an overlay. */
+  --zx-drag-shadow: 0 2px 4px -1px color-mix(in srgb, var(--zx-gray-950) 10%, transparent),
+    0 12px 28px -6px color-mix(in srgb, var(--zx-gray-950) 22%, transparent);
   --zx-color-glass-border: color-mix(in srgb, var(--zx-gray-0) 24%, transparent);
   --zx-color-glass-highlight: color-mix(in srgb, var(--zx-gray-0) 24%, transparent);
   --zx-color-glass-highlight-strong: color-mix(in srgb, var(--zx-gray-0) 38%, transparent);
+  --zx-color-overlay-backdrop: color-mix(in srgb, var(--zx-gray-950) 28%, transparent);
+  --zx-glass-control-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 18%, transparent), var(--zx-shadow-1);
+  --zx-glass-chrome-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 16%, transparent), var(--zx-shadow-1);
+  --zx-header-bg: var(--zx-gray-900);
+  --zx-header-text: var(--zx-gray-50);
+}
+
+/*
+ * Colours derived from other theme colours — glass, overlays, focus, hover and current fills, the
+ * tone tints — are restated on every theme element, not only on :root. A custom property is
+ * resolved where it is declared and inherited as a finished value, so a dark region on a light
+ * page would otherwise inherit light glass and light overlays. The dark theme, which loads later,
+ * overrides the ones it derives differently. Geometry and the base palette stay on :root (the block
+ * at the top of this file and tokens/global.css), so an application's own overrides there still
+ * reach nested regions.
+ */
+:root,
+[data-zx-theme] {
+  /* Hover and current are translucent text, so they read on the canvas, the chrome, and a card
+     alike. "Current" (where you are) is neutral and stronger than hover; "selected" (what you
+     picked) keeps the accent tint. */
+  --zx-color-bg-hover: color-mix(in srgb, var(--zx-color-text) 4.5%, transparent);
+  --zx-color-bg-current: color-mix(in srgb, var(--zx-color-text) 8%, transparent);
+  /* Row and grid dividers, lighter than a frame. */
+  --zx-color-border-subtle: color-mix(in srgb, var(--zx-color-text) 7%, transparent);
+  /* Categorical tones — identity, not state: tags, chips, icon tiles, avatars. A soft fill (13%
+     of the tone over the surface) with ink at 4.5:1 or better on it. */
+  --zx-color-tone-blue-bg: color-mix(in srgb, var(--zx-tone-blue-500) 13%, var(--zx-color-bg-surface));
+  --zx-color-tone-teal-bg: color-mix(in srgb, var(--zx-tone-teal-500) 13%, var(--zx-color-bg-surface));
+  --zx-color-tone-green-bg: color-mix(in srgb, var(--zx-tone-green-500) 13%, var(--zx-color-bg-surface));
+  --zx-color-tone-amber-bg: color-mix(in srgb, var(--zx-tone-amber-500) 13%, var(--zx-color-bg-surface));
+  --zx-color-tone-orange-bg: color-mix(in srgb, var(--zx-tone-orange-500) 13%, var(--zx-color-bg-surface));
+  --zx-color-tone-red-bg: color-mix(in srgb, var(--zx-tone-red-500) 13%, var(--zx-color-bg-surface));
+  --zx-color-tone-pink-bg: color-mix(in srgb, var(--zx-tone-pink-500) 13%, var(--zx-color-bg-surface));
+  --zx-color-tone-violet-bg: color-mix(in srgb, var(--zx-tone-violet-500) 13%, var(--zx-color-bg-surface));
+  --zx-color-tone-slate-bg: color-mix(in srgb, var(--zx-tone-slate-500) 13%, var(--zx-color-bg-surface));
+  --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-color-app-icon-depth: color-mix(in srgb, var(--zx-color-app-icon-shade) 26%, transparent);
-  /* AppIcon is a dark chromatic lens: colour lives in its rim and low bloom, not a glossy fill. */
-  /* Strengths remain inherited, while each AppIcon mixes them with its own module colour. */
-  --zx-app-icon-core-strength: 52%;
-  --zx-app-icon-rim-strength: 58%;
-  --zx-app-icon-bloom-strength: 64%;
-  --zx-app-icon-specular-strength: 72%;
   --zx-app-icon-rim-base: var(--zx-color-glass-highlight);
-  --zx-app-icon-halo-size: 14px;
-  --zx-app-icon-halo-strength: 22%;
   --zx-color-glass-surface: color-mix(in srgb, var(--zx-color-bg-raised) 78%, transparent);
   /* Persistent application chrome is quieter and more opaque than a raised feature card. */
   --zx-color-glass-chrome: color-mix(in srgb, var(--zx-color-bg-surface) 90%, transparent);
@@ -76,13 +192,11 @@
   --zx-color-overlay-base: var(--zx-color-bg-raised);
   --zx-color-overlay-surface: color-mix(in srgb, var(--zx-color-overlay-base) 72%, transparent);
   --zx-color-overlay-panel: color-mix(in srgb, var(--zx-color-overlay-base) 80%, transparent);
-  --zx-color-overlay-backdrop: color-mix(in srgb, var(--zx-gray-950) 28%, transparent);
   --zx-color-overlay-border: color-mix(in srgb, var(--zx-color-text) 14%, transparent);
   --zx-color-overlay-hover: color-mix(in srgb, var(--zx-color-text) 8%, transparent);
   --zx-color-overlay-selected: color-mix(in srgb, var(--zx-color-accent) 18%, transparent);
   --zx-color-overlay-divider: color-mix(in srgb, var(--zx-color-text) 11%, transparent);
   --zx-color-overlay-scrim: color-mix(in srgb, var(--zx-color-overlay-base) 28%, transparent);
-  --zx-overlay-specular-strength: 48%;
   --zx-overlay-surface-image: linear-gradient(145deg,
     color-mix(in srgb, var(--zx-color-glass-highlight-strong) var(--zx-overlay-specular-strength), transparent) 0%,
     color-mix(in srgb, var(--zx-color-glass-highlight) 16%, transparent) 28%,
@@ -97,25 +211,11 @@
     color-mix(in srgb, var(--zx-color-accent) 5%, transparent), transparent 64%),
     linear-gradient(180deg, color-mix(in srgb, var(--zx-color-glass-highlight) 16%, transparent) 0%,
     transparent 28%);
-  --zx-glass-blur: 8px;
-  --zx-glass-saturation: 130%;
-  --zx-glass-color-strength: 82%;
-  /* Material filters are roles, not component recipes. Aurora remains a separate canvas layer. */
-  --zx-glass-filter-icon: blur(4px) saturate(118%);
-  --zx-glass-filter-control: blur(6px) saturate(116%);
-  --zx-glass-filter-raised: blur(8px) saturate(120%);
-  --zx-glass-filter-chrome: blur(10px) saturate(122%);
-  --zx-glass-filter-overlay: blur(16px) saturate(140%);
-  --zx-glass-filter-panel: blur(14px) saturate(132%);
   --zx-app-icon-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 14%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--zx-gray-950) 28%, transparent), 0 2px 6px color-mix(in srgb, var(--zx-color-app-icon-shade) 24%, transparent);
   --zx-app-icon-shadow-hover: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 20%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--zx-gray-950) 32%, transparent), 0 4px 10px color-mix(in srgb, var(--zx-color-app-icon-shade) 30%, transparent);
-  --zx-glass-control-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 18%, transparent), var(--zx-shadow-1);
-  --zx-glass-chrome-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 16%, transparent), var(--zx-shadow-1);
   --zx-glass-raised-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 18%, transparent), var(--zx-overlay-shadow);
   --zx-glass-overlay-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-color-glass-highlight-strong) 42%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--zx-color-glass-highlight) 20%, transparent), var(--zx-overlay-shadow);
   --zx-glass-panel-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-color-glass-highlight-strong) 34%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--zx-color-glass-highlight) 14%, transparent), var(--zx-overlay-shadow);
-  --zx-header-bg: var(--zx-gray-900);
-  --zx-header-text: var(--zx-gray-50);
 }
 
 /* Preferences are resolved at the token seam so every material consumer, including application
@@ -124,7 +224,6 @@
   :root,
   .zx-scope,
   [data-zx-theme],
-  [data-zx-density],
   [data-zx-preset] {
     --zx-color-glass-chrome: var(--zx-color-bg-surface) !important;
     --zx-color-glass-surface: var(--zx-color-bg-raised) !important;
@@ -162,7 +261,6 @@
   :root,
   .zx-scope,
   [data-zx-theme],
-  [data-zx-density],
   [data-zx-preset] {
     --zx-color-glass-chrome: Canvas !important;
     --zx-color-glass-surface: Canvas !important;
@@ -196,7 +294,6 @@
   :root,
   .zx-scope,
   [data-zx-theme],
-  [data-zx-density],
   [data-zx-preset] {
     --zx-color-overlay-surface: var(--zx-color-bg-raised) !important;
     --zx-color-overlay-panel: var(--zx-color-bg-raised) !important;

package/styles/tokens/themes.css

@@ -2,9 +2,9 @@
  * Standard theme presets.
  *
  * A preset repoints the tier-1 accent ramp — nothing else. The semantic tier picks its own stop
- * off that ramp per polarity (600/700 on light surfaces, 300/400/500 on dark ones), so five
- * declarations retheme light, dark, and auto at once, and every component follows without a
- * second mapping to keep in sync.
+ * off that ramp per polarity (600/700 on light surfaces, 300/400/500 on dark ones, and 600/700
+ * for the solid primary fill in both), so five declarations retheme light, dark, and auto at
+ * once, and every component follows without a second mapping to keep in sync.
  *
  * Set the preset alongside the theme: `<html data-zx-theme="dark" data-zx-preset="ocean">`.
  * `zx` is the default and never needs stating; the attribute exists so an application can pin it.
@@ -14,10 +14,11 @@
  * an application with no reliable way to say "this failed".
  *
  * Every 600 clears 4.5:1 against white and against the light page, and every 400 clears it
- * against the dark page, which is what keeps `--zx-color-on-accent` correct in both polarities.
+ * against the dark page and every dark surface step, which is what keeps `--zx-color-on-accent`
+ * and `--zx-color-on-accent-solid` correct in both polarities and accent text legible on dark.
  */
 
-/* ZeyOS — the ZeyOS brand green on Xenon's emerald ramp. The default. */
+/* ZeyOS — the ZeyOS brand green, restating the emerald ramp in tokens/global.css. The default. */
 [data-zx-preset="zx"] {
   --zx-accent-300: #5ee9b5;
   --zx-accent-400: #21cc75;
@@ -31,7 +32,7 @@
   --zx-accent-300: #ffd9a8;
   --zx-accent-400: #f7bc60;
   --zx-accent-500: #d0952f;
-  --zx-accent-600: #96690f;
+  --zx-accent-600: #916510;
   --zx-accent-700: #6f4e0b;
 }
 

package/styles/zx.css

@@ -2,7 +2,6 @@
 @import url("./tokens/themes.css");
 @import url("./tokens/semantic.css");
 @import url("./tokens/dark.css");
-@import url("./tokens/density.css");
 @import url("./tokens/modules.css");
 @import url("./base.css");
 @import url("./icons.css");
@@ -38,7 +37,9 @@
 @import url("../src/components/activity-item/activity-item.css");
 @import url("../src/components/activity-list/activity-list.css");
 @import url("../src/components/account-menu/account-menu.css");
+@import url("../src/components/workspace-switcher/workspace-switcher.css");
 @import url("../src/components/app-rail/app-rail.css");
+@import url("../src/components/module-bar/module-bar.css");
 @import url("../src/components/app-sidebar/app-sidebar.css");
 @import url("../src/components/message/message.css");
 @import url("../src/components/modal/modal.css");
@@ -69,6 +70,7 @@
 @import url("../src/components/stat-tile/stat-tile.css");
 @import url("../src/components/card-view/card-view.css");
 @import url("../src/components/kanban-view/kanban-view.css");
+@import url("../src/components/view-settings/view-settings.css");
 @import url("../src/components/grid/grid.css");
 @import url("../src/components/chart/chart.css");
 @import url("../src/components/tree/tree.css");

package/styles/tokens/density.css

@@ -1,9 +0,0 @@
-[data-zx-density="compact"] {
-  --zx-control-height: 28px;
-  --zx-control-pad-x: var(--zx-space-2);
-  --zx-text-md: 13px;
-  --zx-space-1: 3px;
-  --zx-space-2: 6px;
-  --zx-space-3: 10px;
-  --zx-space-4: 14px;
-}