@zeyos/zx 4.3.4 → 5.0.0

package/styles/tokens/semantic.css

@@ -1,11 +1,14 @@
 /*
  * 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.
  */
@@ -16,15 +19,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 +43,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 +59,100 @@
   --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-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);
+  --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;
   --zx-overlay-shadow: var(--zx-shadow-3);
+  /* 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);
   /* Blur applied behind a backdrop that asked for it. Theme-independent, so light defines it once. */
   --zx-overlay-blur: 8px;
   --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-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-overlay-backdrop: color-mix(in srgb, var(--zx-gray-950) 28%, transparent);
+  --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%);
+  --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, 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);
+  --zx-app-icon-rim-base: var(--zx-color-glass-highlight);
   --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 +164,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 +183,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 +196,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 +233,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 +266,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");
@@ -18,6 +17,7 @@
 @import url("../src/components/skeleton/skeleton.css");
 @import url("../src/components/copy/copy-button.css");
 @import url("../src/components/copy/copy-input.css");
+@import url("../src/components/code-editor/code-editor.css");
 @import url("../src/components/toolbar/toolbar.css");
 @import url("../src/components/toggle/toggle.css");
 @import url("../src/components/groupbox/groupbox.css");
@@ -31,6 +31,11 @@
 @import url("../src/components/app-icon/app-icon.css");
 @import url("../src/components/launcher/launcher.css");
 @import url("../src/components/avatar/avatar.css");
+@import url("../src/components/entity-ref/entity-ref.css");
+@import url("../src/components/file-item/file-item.css");
+@import url("../src/components/file-list/file-list.css");
+@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/app-rail/app-rail.css");
 @import url("../src/components/app-sidebar/app-sidebar.css");
@@ -60,6 +65,7 @@
 @import url("../src/components/view/record-view.css");
 @import url("../src/components/table/table.css");
 @import url("../src/components/table-view/table-view.css");
+@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/grid/grid.css");
@@ -67,7 +73,10 @@
 @import url("../src/components/tree/tree.css");
 @import url("../src/components/finder/finder.css");
 @import url("../src/components/data-filter/data-filter.css");
+@import url("../src/components/filter-panel/filter-panel.css");
+@import url("../src/components/list-toolbar/list-toolbar.css");
 @import url("../src/components/filter/filter.css");
+@import url("../src/components/sort-control/sort-control.css");
 @import url("../src/components/pagination/pagination.css");
 @import url("../src/components/stepper/stepper.css");
 @import url("../src/components/breadcrumb/breadcrumb.css");
@@ -78,3 +87,4 @@
 @import url("../src/components/multi-value-editor/multi-value-editor.css");
 @import url("../src/components/field-upload/field-upload.css");
 @import url("../src/components/questionnaire/questionnaire.css");
+@import url("./print.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;
-}