@weasel-js/theme 1.9.3 → 1.10.0

package/dist/chunk-P5F3GZV6.js

@@ -0,0 +1,54 @@
+import { isPlainObject } from '@weasel-js/registry';
+
+// src/axes.ts
+function isByAxis(v) {
+  return isPlainObject(v) && typeof v.by === "string";
+}
+function fullSelection(axes, selection = {}) {
+  const out = {};
+  for (const [name, def] of Object.entries(axes)) {
+    const v = selection[name];
+    out[name] = v !== void 0 && v in def.values ? v : def.default;
+  }
+  return out;
+}
+function mergeAxes(parent, child) {
+  const out = { ...parent };
+  for (const [name, def] of Object.entries(child)) {
+    out[name] = { ...def, values: { ...parent[name]?.values, ...def.values } };
+  }
+  return out;
+}
+function enumerateSelections(axes) {
+  let out = [{}];
+  for (const [name, def] of Object.entries(axes)) {
+    out = out.flatMap((s) => Object.keys(def.values).map((v) => ({ ...s, [name]: v })));
+  }
+  return out;
+}
+function selectionKey(axes, selection) {
+  const full = fullSelection(axes, selection);
+  return Object.keys(axes).map((a) => `${a}=${full[a]}`).join(",");
+}
+function pick(v, selection) {
+  let cur = v;
+  while (isByAxis(cur)) {
+    const axis = cur.by;
+    const value = selection[axis];
+    if (value === void 0 || value === "by" || !(value in cur)) return { ok: false, axis, value: value ?? "" };
+    cur = cur[value];
+  }
+  return { ok: true, value: cur };
+}
+function pickAll(record, selection) {
+  const out = {};
+  for (const [name, v] of Object.entries(record)) {
+    const picked = pick(v, selection);
+    if (picked.ok) out[name] = picked.value;
+  }
+  return out;
+}
+
+export { enumerateSelections, fullSelection, isByAxis, mergeAxes, pick, pickAll, selectionKey };
+//# sourceMappingURL=chunk-P5F3GZV6.js.map
+//# sourceMappingURL=chunk-P5F3GZV6.js.map

package/dist/chunk-P5F3GZV6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/axes.ts"],"names":[],"mappings":"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","file":"chunk-P5F3GZV6.js","sourcesContent":["import { isPlainObject } from '@weasel-js/registry';\n\n/** One value of an axis. `scheme` becomes `color-scheme` in that value's CSS blocks. */\nexport interface AxisValue {\n  readonly scheme?: 'dark' | 'light';\n}\n\n/** One variant dimension of a theme, such as `mode` or `density`. `default` must name one of `values`. */\nexport interface AxisDef {\n  readonly default: string;\n  readonly values: Readonly<Record<string, AxisValue>>;\n}\n\n/** Key order is declaration order, which selectors and selection keys follow. */\nexport type AxisDefs = Readonly<Record<string, AxisDef>>;\n\n/** A partial choice of axis values, e.g. `{ mode: 'light' }`. */\nexport type Selection = Readonly<Record<string, string>>;\n\n/** `{ by: 'mode', dark: …, light: … }`: a value that differs per axis value. */\nexport interface ByAxis<T> {\n  readonly by: string;\n  readonly [axisValue: string]: Varying<T> | string;\n}\n\n/** A value that is either the same everywhere or chosen per axis value. */\nexport type Varying<T> = T | ByAxis<T>;\n\nexport type Picked<T> = { ok: true; value: T } | { ok: false; axis: string; value: string };\n\n/** Whether `v` is a {@link ByAxis} value. */\nexport function isByAxis(v: unknown): v is ByAxis<unknown> {\n  return isPlainObject(v) && typeof v.by === 'string';\n}\n\n/** Every axis given a known value; anything missing or unknown takes its default. */\nexport function fullSelection(axes: AxisDefs, selection: Selection = {}): Selection {\n  const out: Record<string, string> = {};\n  for (const [name, def] of Object.entries(axes)) {\n    const v = selection[name];\n    out[name] = v !== undefined && v in def.values ? v : def.default;\n  }\n  return out;\n}\n\n/** A child's axes over its parent's: an axis both declare keeps both sets of values, the child's entries and default winning. */\nexport function mergeAxes(parent: AxisDefs, child: AxisDefs): AxisDefs {\n  const out: Record<string, AxisDef> = { ...parent };\n  for (const [name, def] of Object.entries(child)) {\n    out[name] = { ...def, values: { ...parent[name]?.values, ...def.values } };\n  }\n  return out;\n}\n\n/** Every full combination of axis values, the first axis varying slowest. */\nexport function enumerateSelections(axes: AxisDefs): Selection[] {\n  let out: Record<string, string>[] = [{}];\n  for (const [name, def] of Object.entries(axes)) {\n    out = out.flatMap((s) => Object.keys(def.values).map((v) => ({ ...s, [name]: v })));\n  }\n  return out;\n}\n\n/** `mode=dark,density=compact`, axes in declaration order. */\nexport function selectionKey(axes: AxisDefs, selection: Selection): string {\n  const full = fullSelection(axes, selection);\n  return Object.keys(axes).map((a) => `${a}=${full[a]}`).join(',');\n}\n\nexport function pick<T>(v: Varying<T>, selection: Selection): Picked<T> {\n  let cur: unknown = v;\n  while (isByAxis(cur)) {\n    const axis = cur.by;\n    const value = selection[axis];\n    if (value === undefined || value === 'by' || !(value in cur)) return { ok: false, axis, value: value ?? '' };\n    cur = cur[value];\n  }\n  return { ok: true, value: cur as T };\n}\n\n/** Every entry of a varying record that has a value for this selection, in record order. */\nexport function pickAll<T>(record: Readonly<Record<string, Varying<T>>>, selection: Selection): Record<string, T> {\n  const out: Record<string, T> = {};\n  for (const [name, v] of Object.entries(record)) {\n    const picked = pick(v, selection);\n    if (picked.ok) out[name] = picked.value;\n  }\n  return out;\n}\n"]}

package/dist/{definition-DACR1H4A.d.ts → definition-CSeERbSL.d.ts}

@@ -1,3 +1,5 @@
+import { ColorLiteral, ColorRef, ColorSource, Palette } from '@weasel-js/paint';
+
 /** One value of an axis. `scheme` becomes `color-scheme` in that value's CSS blocks. */
 interface AxisValue {
     readonly scheme?: 'dark' | 'light';
@@ -72,7 +74,7 @@ declare function bakeChain(definition: ThemeDefinition, lookup?: Lookup): BakedT
 
 /** Every design token the built-in themes declare, spelled as the CSS
  *  custom property it becomes. */
-type TokenName = '--wzl-accent' | '--wzl-accent-base' | '--wzl-accent-fg' | '--wzl-accent-hover' | '--wzl-accent-soft' | '--wzl-accent-strong' | '--wzl-backdrop' | '--wzl-border' | '--wzl-border-strong' | '--wzl-border-w' | '--wzl-checker-a' | '--wzl-checker-b' | '--wzl-checker-size' | '--wzl-code-constant' | '--wzl-code-keyword' | '--wzl-code-name' | '--wzl-code-number' | '--wzl-code-property' | '--wzl-code-string' | '--wzl-control-h' | '--wzl-control-h-sm' | '--wzl-control-h-xs' | '--wzl-curve-color' | '--wzl-curve-width' | '--wzl-danger' | '--wzl-danger-base' | '--wzl-ease-in-cubic' | '--wzl-ease-in-out-cubic' | '--wzl-ease-out-back' | '--wzl-ease-out-cubic' | '--wzl-fg' | '--wzl-fg-inverse' | '--wzl-fg-muted' | '--wzl-fg-muted-on-accent' | '--wzl-fg-on-accent' | '--wzl-fg-subtle' | '--wzl-fg-subtle-on-accent' | '--wzl-field-pad-x' | '--wzl-focus-ring' | '--wzl-font-body' | '--wzl-font-display' | '--wzl-font-mono' | '--wzl-font-numeric' | '--wzl-font-size' | '--wzl-font-size-2xs' | '--wzl-font-size-lg' | '--wzl-font-size-md' | '--wzl-font-size-sm' | '--wzl-font-size-xl' | '--wzl-font-size-xs' | '--wzl-font-ui' | '--wzl-font-weight-bold' | '--wzl-font-weight-light' | '--wzl-font-weight-medium' | '--wzl-font-weight-normal' | '--wzl-glass-blur' | '--wzl-glass-tint' | '--wzl-gray-100' | '--wzl-gray-200' | '--wzl-gray-300' | '--wzl-gray-400' | '--wzl-gray-50' | '--wzl-gray-500' | '--wzl-gray-600' | '--wzl-gray-700' | '--wzl-gray-800' | '--wzl-gray-900' | '--wzl-handle-size' | '--wzl-handle-size-lg' | '--wzl-handle-size-sm' | '--wzl-icon-button-size' | '--wzl-leading' | '--wzl-leading-snug' | '--wzl-leading-tight' | '--wzl-line' | '--wzl-line-strong' | '--wzl-line-subtle' | '--wzl-line-width' | '--wzl-motion-fast' | '--wzl-motion-medium' | '--wzl-panel-blur' | '--wzl-panel-border-color' | '--wzl-panel-border-style' | '--wzl-panel-border-width' | '--wzl-panel-pad' | '--wzl-panel-radius' | '--wzl-panel-surface' | '--wzl-panel-title-case' | '--wzl-panel-title-color' | '--wzl-panel-title-font' | '--wzl-panel-title-inset' | '--wzl-panel-title-size' | '--wzl-panel-title-tracking' | '--wzl-panel-title-weight' | '--wzl-panel-tone-mix' | '--wzl-radius-lg' | '--wzl-radius-md' | '--wzl-radius-pill' | '--wzl-radius-sm' | '--wzl-secondary' | '--wzl-secondary-base' | '--wzl-secondary-fg' | '--wzl-secondary-soft' | '--wzl-secondary-strong' | '--wzl-shadow' | '--wzl-slider-thumb-mix' | '--wzl-slider-thumb-size' | '--wzl-slider-thumb-slop' | '--wzl-slider-track-h' | '--wzl-slider-track-mix' | '--wzl-slider-track-slop' | '--wzl-space-1' | '--wzl-space-2' | '--wzl-space-3' | '--wzl-space-4' | '--wzl-space-5' | '--wzl-space-6' | '--wzl-space-7' | '--wzl-space-8' | '--wzl-space-lg' | '--wzl-space-md' | '--wzl-space-sm' | '--wzl-space-xs' | '--wzl-stance-advanced-title-color' | '--wzl-stance-aside-blur' | '--wzl-stance-aside-border-color' | '--wzl-stance-aside-surface' | '--wzl-stance-aside-title-color' | '--wzl-stance-danger-border-color' | '--wzl-stance-danger-title-color' | '--wzl-stance-danger-tone' | '--wzl-stance-debug-border-style' | '--wzl-stance-debug-title-case' | '--wzl-stance-debug-title-font' | '--wzl-stance-important-border-color' | '--wzl-stance-important-title-color' | '--wzl-stance-notice-tone' | '--wzl-stance-notice-tone-mix' | '--wzl-stance-preview-pad' | '--wzl-stance-preview-title-case' | '--wzl-stance-preview-title-inset' | '--wzl-stance-preview-title-size' | '--wzl-stance-scope-border-width' | '--wzl-stance-scope-nested-radius' | '--wzl-stance-scope-nested-surface' | '--wzl-stance-scope-radius' | '--wzl-stance-scope-tone-mix' | '--wzl-success' | '--wzl-success-base' | '--wzl-surface' | '--wzl-surface-hover' | '--wzl-surface-popover' | '--wzl-surface-pressed' | '--wzl-surface-raised' | '--wzl-surface-sunken' | '--wzl-swatch-amber' | '--wzl-swatch-blue' | '--wzl-swatch-citron' | '--wzl-swatch-fuchsia' | '--wzl-swatch-green' | '--wzl-swatch-red' | '--wzl-swatch-rose' | '--wzl-swatch-sky' | '--wzl-swatch-teal' | '--wzl-swatch-violet' | '--wzl-tb-height' | '--wzl-tracking-none' | '--wzl-tracking-wide' | '--wzl-tracking-wider' | '--wzl-warning' | '--wzl-warning-base' | '--wzl-workspace-line' | '--wzl-workspace-surface' | '--wzl-z-modal' | '--wzl-z-overlay' | '--wzl-z-toolbar';
+type TokenName = '--wzl-accent' | '--wzl-accent-base' | '--wzl-accent-fg' | '--wzl-accent-hover' | '--wzl-accent-soft' | '--wzl-accent-strong' | '--wzl-backdrop' | '--wzl-border' | '--wzl-border-on-sunken' | '--wzl-border-strong' | '--wzl-border-w' | '--wzl-checker-a' | '--wzl-checker-b' | '--wzl-checker-size' | '--wzl-code-constant' | '--wzl-code-keyword' | '--wzl-code-name' | '--wzl-code-number' | '--wzl-code-property' | '--wzl-code-string' | '--wzl-control-h' | '--wzl-control-h-sm' | '--wzl-control-h-xs' | '--wzl-curve-color' | '--wzl-curve-width' | '--wzl-danger' | '--wzl-danger-base' | '--wzl-ease-in-cubic' | '--wzl-ease-in-out-cubic' | '--wzl-ease-out-back' | '--wzl-ease-out-cubic' | '--wzl-fg' | '--wzl-fg-inverse' | '--wzl-fg-muted' | '--wzl-fg-muted-on-accent' | '--wzl-fg-on-accent' | '--wzl-fg-subtle' | '--wzl-fg-subtle-on-accent' | '--wzl-field-pad-x' | '--wzl-focus-ring' | '--wzl-font-body' | '--wzl-font-display' | '--wzl-font-mono' | '--wzl-font-numeric' | '--wzl-font-size' | '--wzl-font-size-2xs' | '--wzl-font-size-lg' | '--wzl-font-size-md' | '--wzl-font-size-sm' | '--wzl-font-size-xl' | '--wzl-font-size-xs' | '--wzl-font-ui' | '--wzl-font-weight-bold' | '--wzl-font-weight-light' | '--wzl-font-weight-medium' | '--wzl-font-weight-normal' | '--wzl-glass-blur' | '--wzl-glass-tint' | '--wzl-gloss' | '--wzl-gray-100' | '--wzl-gray-200' | '--wzl-gray-300' | '--wzl-gray-400' | '--wzl-gray-50' | '--wzl-gray-500' | '--wzl-gray-600' | '--wzl-gray-700' | '--wzl-gray-800' | '--wzl-gray-900' | '--wzl-handle-dot-size' | '--wzl-handle-dot-size-sm' | '--wzl-handle-size' | '--wzl-handle-size-lg' | '--wzl-handle-size-sm' | '--wzl-icon-button-size' | '--wzl-leading' | '--wzl-leading-snug' | '--wzl-leading-tight' | '--wzl-line' | '--wzl-line-strong' | '--wzl-line-subtle' | '--wzl-line-width' | '--wzl-motion-fast' | '--wzl-motion-medium' | '--wzl-panel-blur' | '--wzl-panel-border-color' | '--wzl-panel-border-style' | '--wzl-panel-border-width' | '--wzl-panel-pad' | '--wzl-panel-radius' | '--wzl-panel-surface' | '--wzl-panel-title-case' | '--wzl-panel-title-color' | '--wzl-panel-title-font' | '--wzl-panel-title-inset' | '--wzl-panel-title-size' | '--wzl-panel-title-tracking' | '--wzl-panel-title-weight' | '--wzl-panel-tone-mix' | '--wzl-radius-lg' | '--wzl-radius-md' | '--wzl-radius-pill' | '--wzl-radius-sm' | '--wzl-scrim' | '--wzl-secondary' | '--wzl-secondary-base' | '--wzl-secondary-fg' | '--wzl-secondary-soft' | '--wzl-secondary-strong' | '--wzl-shadow' | '--wzl-slider-thumb-mix' | '--wzl-slider-thumb-size' | '--wzl-slider-thumb-slop' | '--wzl-slider-track-h' | '--wzl-slider-track-mix' | '--wzl-slider-track-slop' | '--wzl-space-1' | '--wzl-space-2' | '--wzl-space-3' | '--wzl-space-4' | '--wzl-space-5' | '--wzl-space-6' | '--wzl-space-7' | '--wzl-space-8' | '--wzl-space-lg' | '--wzl-space-md' | '--wzl-space-sm' | '--wzl-space-xs' | '--wzl-stance-advanced-title-color' | '--wzl-stance-aside-blur' | '--wzl-stance-aside-border-color' | '--wzl-stance-aside-surface' | '--wzl-stance-aside-title-color' | '--wzl-stance-danger-border-color' | '--wzl-stance-danger-title-color' | '--wzl-stance-danger-tone' | '--wzl-stance-debug-border-style' | '--wzl-stance-debug-title-case' | '--wzl-stance-debug-title-font' | '--wzl-stance-important-border-color' | '--wzl-stance-important-title-color' | '--wzl-stance-notice-tone' | '--wzl-stance-notice-tone-mix' | '--wzl-stance-preview-pad' | '--wzl-stance-preview-title-case' | '--wzl-stance-preview-title-inset' | '--wzl-stance-preview-title-size' | '--wzl-stance-scope-border-width' | '--wzl-stance-scope-nested-radius' | '--wzl-stance-scope-nested-surface' | '--wzl-stance-scope-radius' | '--wzl-stance-scope-tone-mix' | '--wzl-success' | '--wzl-success-base' | '--wzl-surface' | '--wzl-surface-hover' | '--wzl-surface-popover' | '--wzl-surface-pressed' | '--wzl-surface-raised' | '--wzl-surface-sunken' | '--wzl-swatch-amber' | '--wzl-swatch-blue' | '--wzl-swatch-citron' | '--wzl-swatch-fuchsia' | '--wzl-swatch-green' | '--wzl-swatch-red' | '--wzl-swatch-rose' | '--wzl-swatch-sky' | '--wzl-swatch-teal' | '--wzl-swatch-violet' | '--wzl-tb-height' | '--wzl-tracking-none' | '--wzl-tracking-wide' | '--wzl-tracking-wider' | '--wzl-warning' | '--wzl-warning-base' | '--wzl-workspace-line' | '--wzl-workspace-surface' | '--wzl-z-drag' | '--wzl-z-hud' | '--wzl-z-modal' | '--wzl-z-overlay' | '--wzl-z-popover' | '--wzl-z-toast' | '--wzl-z-toolbar';
 /** A built-in theme with its aliases already collapsed: every selection
  *  (keyed `mode=dark`, axes in declaration order) maps every token name to
  *  a final CSS value. */
@@ -164,6 +166,7 @@ declare const THEMES: {
                 readonly '--wzl-secondary-fg': "#dc9d15";
                 readonly '--wzl-fg-inverse': "#0e0f12";
                 readonly '--wzl-shadow': "rgba(0, 0, 0, 0.6)";
+                readonly '--wzl-scrim': "rgba(0, 0, 0, 0.4)";
                 readonly '--wzl-code-keyword': "#955cf9";
                 readonly '--wzl-code-string': "#48e628";
                 readonly '--wzl-code-number': "#e69628";
@@ -223,6 +226,7 @@ declare const THEMES: {
                 readonly '--wzl-fg-on-accent': "#f5f5f6";
                 readonly '--wzl-line': "rgba(230, 231, 233, 0.2)";
                 readonly '--wzl-line-strong': "rgba(230, 231, 233, 0.4)";
+                readonly '--wzl-border-on-sunken': "rgba(230, 231, 233, 0.12)";
                 readonly '--wzl-curve-color': "#8c94ee";
                 readonly '--wzl-accent-hover': "#8c94ee";
                 readonly '--wzl-secondary': "#dc9d15";
@@ -247,24 +251,31 @@ declare const THEMES: {
                 readonly '--wzl-slider-thumb-size': "8px";
                 readonly '--wzl-slider-track-slop': "6px";
                 readonly '--wzl-slider-thumb-slop': "6px";
-                readonly '--wzl-slider-track-mix': "18%";
-                readonly '--wzl-slider-thumb-mix': "70%";
+                readonly '--wzl-slider-track-mix': "40%";
+                readonly '--wzl-slider-thumb-mix': "100%";
                 readonly '--wzl-handle-size': "9px";
                 readonly '--wzl-handle-size-sm': "7px";
                 readonly '--wzl-handle-size-lg': "10px";
+                readonly '--wzl-handle-dot-size': "8px";
+                readonly '--wzl-handle-dot-size-sm': "7px";
                 readonly '--wzl-checker-a': "#25272c";
                 readonly '--wzl-checker-b': "#181a1e";
                 readonly '--wzl-checker-size': "8px";
                 readonly '--wzl-workspace-surface': "#0e0f12";
                 readonly '--wzl-workspace-line': "rgba(230, 231, 233, 0.1)";
                 readonly '--wzl-field-pad-x': "8px";
+                readonly '--wzl-gloss': "0";
                 readonly '--wzl-font-size': "13px";
                 readonly '--wzl-tracking-none': "0";
                 readonly '--wzl-tracking-wide': "0.06em";
                 readonly '--wzl-tracking-wider': "0.08em";
                 readonly '--wzl-z-toolbar': "10";
                 readonly '--wzl-z-overlay': "20";
-                readonly '--wzl-z-modal': "30";
+                readonly '--wzl-z-hud': "900";
+                readonly '--wzl-z-modal': "1000";
+                readonly '--wzl-z-toast': "1100";
+                readonly '--wzl-z-popover': "1200";
+                readonly '--wzl-z-drag': "10000";
                 readonly '--wzl-leading-tight': "1";
                 readonly '--wzl-leading-snug': "1.2";
                 readonly '--wzl-leading': "1.4";
@@ -342,6 +353,7 @@ declare const THEMES: {
                 readonly '--wzl-secondary-fg': "#dc9d15";
                 readonly '--wzl-fg-inverse': "#0e0f12";
                 readonly '--wzl-shadow': "rgba(0, 0, 0, 0.6)";
+                readonly '--wzl-scrim': "rgba(0, 0, 0, 0.4)";
                 readonly '--wzl-code-keyword': "#955cf9";
                 readonly '--wzl-code-string': "#48e628";
                 readonly '--wzl-code-number': "#e69628";
@@ -401,6 +413,7 @@ declare const THEMES: {
                 readonly '--wzl-fg-on-accent': "#f5f5f6";
                 readonly '--wzl-line': "rgba(230, 231, 233, 0.2)";
                 readonly '--wzl-line-strong': "rgba(230, 231, 233, 0.4)";
+                readonly '--wzl-border-on-sunken': "rgba(230, 231, 233, 0.12)";
                 readonly '--wzl-curve-color': "#8c94ee";
                 readonly '--wzl-accent-hover': "#8c94ee";
                 readonly '--wzl-secondary': "#dc9d15";
@@ -425,24 +438,31 @@ declare const THEMES: {
                 readonly '--wzl-slider-thumb-size': "8px";
                 readonly '--wzl-slider-track-slop': "6px";
                 readonly '--wzl-slider-thumb-slop': "6px";
-                readonly '--wzl-slider-track-mix': "18%";
-                readonly '--wzl-slider-thumb-mix': "70%";
+                readonly '--wzl-slider-track-mix': "40%";
+                readonly '--wzl-slider-thumb-mix': "100%";
                 readonly '--wzl-handle-size': "9px";
                 readonly '--wzl-handle-size-sm': "7px";
                 readonly '--wzl-handle-size-lg': "10px";
+                readonly '--wzl-handle-dot-size': "8px";
+                readonly '--wzl-handle-dot-size-sm': "7px";
                 readonly '--wzl-checker-a': "#25272c";
                 readonly '--wzl-checker-b': "#181a1e";
                 readonly '--wzl-checker-size': "8px";
                 readonly '--wzl-workspace-surface': "#0e0f12";
                 readonly '--wzl-workspace-line': "rgba(230, 231, 233, 0.1)";
                 readonly '--wzl-field-pad-x': "8px";
+                readonly '--wzl-gloss': "0";
                 readonly '--wzl-font-size': "15px";
                 readonly '--wzl-tracking-none': "0";
                 readonly '--wzl-tracking-wide': "0.06em";
                 readonly '--wzl-tracking-wider': "0.08em";
                 readonly '--wzl-z-toolbar': "10";
                 readonly '--wzl-z-overlay': "20";
-                readonly '--wzl-z-modal': "30";
+                readonly '--wzl-z-hud': "900";
+                readonly '--wzl-z-modal': "1000";
+                readonly '--wzl-z-toast': "1100";
+                readonly '--wzl-z-popover': "1200";
+                readonly '--wzl-z-drag': "10000";
                 readonly '--wzl-leading-tight': "1";
                 readonly '--wzl-leading-snug': "1.2";
                 readonly '--wzl-leading': "1.4";
@@ -520,6 +540,7 @@ declare const THEMES: {
                 readonly '--wzl-secondary-fg': "#dc9d15";
                 readonly '--wzl-fg-inverse': "#0e0f12";
                 readonly '--wzl-shadow': "rgba(0, 0, 0, 0.6)";
+                readonly '--wzl-scrim': "rgba(0, 0, 0, 0.4)";
                 readonly '--wzl-code-keyword': "#955cf9";
                 readonly '--wzl-code-string': "#48e628";
                 readonly '--wzl-code-number': "#e69628";
@@ -579,6 +600,7 @@ declare const THEMES: {
                 readonly '--wzl-fg-on-accent': "#f5f5f6";
                 readonly '--wzl-line': "rgba(230, 231, 233, 0.2)";
                 readonly '--wzl-line-strong': "rgba(230, 231, 233, 0.4)";
+                readonly '--wzl-border-on-sunken': "rgba(230, 231, 233, 0.12)";
                 readonly '--wzl-curve-color': "#8c94ee";
                 readonly '--wzl-accent-hover': "#8c94ee";
                 readonly '--wzl-secondary': "#dc9d15";
@@ -603,24 +625,31 @@ declare const THEMES: {
                 readonly '--wzl-slider-thumb-size': "8px";
                 readonly '--wzl-slider-track-slop': "6px";
                 readonly '--wzl-slider-thumb-slop': "6px";
-                readonly '--wzl-slider-track-mix': "18%";
-                readonly '--wzl-slider-thumb-mix': "70%";
+                readonly '--wzl-slider-track-mix': "40%";
+                readonly '--wzl-slider-thumb-mix': "100%";
                 readonly '--wzl-handle-size': "9px";
                 readonly '--wzl-handle-size-sm': "7px";
                 readonly '--wzl-handle-size-lg': "10px";
+                readonly '--wzl-handle-dot-size': "8px";
+                readonly '--wzl-handle-dot-size-sm': "7px";
                 readonly '--wzl-checker-a': "#25272c";
                 readonly '--wzl-checker-b': "#181a1e";
                 readonly '--wzl-checker-size': "8px";
                 readonly '--wzl-workspace-surface': "#0e0f12";
                 readonly '--wzl-workspace-line': "rgba(230, 231, 233, 0.1)";
                 readonly '--wzl-field-pad-x': "8px";
+                readonly '--wzl-gloss': "0";
                 readonly '--wzl-font-size': "18px";
                 readonly '--wzl-tracking-none': "0";
                 readonly '--wzl-tracking-wide': "0.06em";
                 readonly '--wzl-tracking-wider': "0.08em";
                 readonly '--wzl-z-toolbar': "10";
                 readonly '--wzl-z-overlay': "20";
-                readonly '--wzl-z-modal': "30";
+                readonly '--wzl-z-hud': "900";
+                readonly '--wzl-z-modal': "1000";
+                readonly '--wzl-z-toast': "1100";
+                readonly '--wzl-z-popover': "1200";
+                readonly '--wzl-z-drag': "10000";
                 readonly '--wzl-leading-tight': "1";
                 readonly '--wzl-leading-snug': "1.2";
                 readonly '--wzl-leading': "1.4";
@@ -698,6 +727,7 @@ declare const THEMES: {
                 readonly '--wzl-secondary-fg': "#016458";
                 readonly '--wzl-fg-inverse': "#f5f5f6";
                 readonly '--wzl-shadow': "rgba(0, 0, 0, 0.18)";
+                readonly '--wzl-scrim': "rgba(0, 0, 0, 0.4)";
                 readonly '--wzl-code-keyword': "#6d28d9";
                 readonly '--wzl-code-string': "#15803d";
                 readonly '--wzl-code-number': "#b45309";
@@ -757,6 +787,7 @@ declare const THEMES: {
                 readonly '--wzl-fg-on-accent': "#f5f5f6";
                 readonly '--wzl-line': "rgba(14, 15, 18, 0.2)";
                 readonly '--wzl-line-strong': "rgba(14, 15, 18, 0.4)";
+                readonly '--wzl-border-on-sunken': "rgba(14, 15, 18, 0.12)";
                 readonly '--wzl-curve-color': "#6366f1";
                 readonly '--wzl-accent-hover': "#6366f1";
                 readonly '--wzl-secondary': "#3ee1cb";
@@ -786,19 +817,26 @@ declare const THEMES: {
                 readonly '--wzl-handle-size': "9px";
                 readonly '--wzl-handle-size-sm': "7px";
                 readonly '--wzl-handle-size-lg': "10px";
+                readonly '--wzl-handle-dot-size': "8px";
+                readonly '--wzl-handle-dot-size-sm': "7px";
                 readonly '--wzl-checker-a': "#c9cbcf";
                 readonly '--wzl-checker-b': "#f5f5f6";
                 readonly '--wzl-checker-size': "8px";
                 readonly '--wzl-workspace-surface': "#c9cbcf";
                 readonly '--wzl-workspace-line': "rgba(14, 15, 18, 0.1)";
                 readonly '--wzl-field-pad-x': "8px";
+                readonly '--wzl-gloss': "0";
                 readonly '--wzl-font-size': "13px";
                 readonly '--wzl-tracking-none': "0";
                 readonly '--wzl-tracking-wide': "0.06em";
                 readonly '--wzl-tracking-wider': "0.08em";
                 readonly '--wzl-z-toolbar': "10";
                 readonly '--wzl-z-overlay': "20";
-                readonly '--wzl-z-modal': "30";
+                readonly '--wzl-z-hud': "900";
+                readonly '--wzl-z-modal': "1000";
+                readonly '--wzl-z-toast': "1100";
+                readonly '--wzl-z-popover': "1200";
+                readonly '--wzl-z-drag': "10000";
                 readonly '--wzl-leading-tight': "1";
                 readonly '--wzl-leading-snug': "1.2";
                 readonly '--wzl-leading': "1.4";
@@ -876,6 +914,7 @@ declare const THEMES: {
                 readonly '--wzl-secondary-fg': "#016458";
                 readonly '--wzl-fg-inverse': "#f5f5f6";
                 readonly '--wzl-shadow': "rgba(0, 0, 0, 0.18)";
+                readonly '--wzl-scrim': "rgba(0, 0, 0, 0.4)";
                 readonly '--wzl-code-keyword': "#6d28d9";
                 readonly '--wzl-code-string': "#15803d";
                 readonly '--wzl-code-number': "#b45309";
@@ -935,6 +974,7 @@ declare const THEMES: {
                 readonly '--wzl-fg-on-accent': "#f5f5f6";
                 readonly '--wzl-line': "rgba(14, 15, 18, 0.2)";
                 readonly '--wzl-line-strong': "rgba(14, 15, 18, 0.4)";
+                readonly '--wzl-border-on-sunken': "rgba(14, 15, 18, 0.12)";
                 readonly '--wzl-curve-color': "#6366f1";
                 readonly '--wzl-accent-hover': "#6366f1";
                 readonly '--wzl-secondary': "#3ee1cb";
@@ -964,19 +1004,26 @@ declare const THEMES: {
                 readonly '--wzl-handle-size': "9px";
                 readonly '--wzl-handle-size-sm': "7px";
                 readonly '--wzl-handle-size-lg': "10px";
+                readonly '--wzl-handle-dot-size': "8px";
+                readonly '--wzl-handle-dot-size-sm': "7px";
                 readonly '--wzl-checker-a': "#c9cbcf";
                 readonly '--wzl-checker-b': "#f5f5f6";
                 readonly '--wzl-checker-size': "8px";
                 readonly '--wzl-workspace-surface': "#c9cbcf";
                 readonly '--wzl-workspace-line': "rgba(14, 15, 18, 0.1)";
                 readonly '--wzl-field-pad-x': "8px";
+                readonly '--wzl-gloss': "0";
                 readonly '--wzl-font-size': "15px";
                 readonly '--wzl-tracking-none': "0";
                 readonly '--wzl-tracking-wide': "0.06em";
                 readonly '--wzl-tracking-wider': "0.08em";
                 readonly '--wzl-z-toolbar': "10";
                 readonly '--wzl-z-overlay': "20";
-                readonly '--wzl-z-modal': "30";
+                readonly '--wzl-z-hud': "900";
+                readonly '--wzl-z-modal': "1000";
+                readonly '--wzl-z-toast': "1100";
+                readonly '--wzl-z-popover': "1200";
+                readonly '--wzl-z-drag': "10000";
                 readonly '--wzl-leading-tight': "1";
                 readonly '--wzl-leading-snug': "1.2";
                 readonly '--wzl-leading': "1.4";
@@ -1054,6 +1101,7 @@ declare const THEMES: {
                 readonly '--wzl-secondary-fg': "#016458";
                 readonly '--wzl-fg-inverse': "#f5f5f6";
                 readonly '--wzl-shadow': "rgba(0, 0, 0, 0.18)";
+                readonly '--wzl-scrim': "rgba(0, 0, 0, 0.4)";
                 readonly '--wzl-code-keyword': "#6d28d9";
                 readonly '--wzl-code-string': "#15803d";
                 readonly '--wzl-code-number': "#b45309";
@@ -1113,6 +1161,7 @@ declare const THEMES: {
                 readonly '--wzl-fg-on-accent': "#f5f5f6";
                 readonly '--wzl-line': "rgba(14, 15, 18, 0.2)";
                 readonly '--wzl-line-strong': "rgba(14, 15, 18, 0.4)";
+                readonly '--wzl-border-on-sunken': "rgba(14, 15, 18, 0.12)";
                 readonly '--wzl-curve-color': "#6366f1";
                 readonly '--wzl-accent-hover': "#6366f1";
                 readonly '--wzl-secondary': "#3ee1cb";
@@ -1142,19 +1191,26 @@ declare const THEMES: {
                 readonly '--wzl-handle-size': "9px";
                 readonly '--wzl-handle-size-sm': "7px";
                 readonly '--wzl-handle-size-lg': "10px";
+                readonly '--wzl-handle-dot-size': "8px";
+                readonly '--wzl-handle-dot-size-sm': "7px";
                 readonly '--wzl-checker-a': "#c9cbcf";
                 readonly '--wzl-checker-b': "#f5f5f6";
                 readonly '--wzl-checker-size': "8px";
                 readonly '--wzl-workspace-surface': "#c9cbcf";
                 readonly '--wzl-workspace-line': "rgba(14, 15, 18, 0.1)";
                 readonly '--wzl-field-pad-x': "8px";
+                readonly '--wzl-gloss': "0";
                 readonly '--wzl-font-size': "18px";
                 readonly '--wzl-tracking-none': "0";
                 readonly '--wzl-tracking-wide': "0.06em";
                 readonly '--wzl-tracking-wider': "0.08em";
                 readonly '--wzl-z-toolbar': "10";
                 readonly '--wzl-z-overlay': "20";
-                readonly '--wzl-z-modal': "30";
+                readonly '--wzl-z-hud': "900";
+                readonly '--wzl-z-modal': "1000";
+                readonly '--wzl-z-toast': "1100";
+                readonly '--wzl-z-popover': "1200";
+                readonly '--wzl-z-drag': "10000";
                 readonly '--wzl-leading-tight': "1";
                 readonly '--wzl-leading-snug': "1.2";
                 readonly '--wzl-leading': "1.4";
@@ -1221,7 +1277,8 @@ declare function themeAxes(theme: Theme): AxisDefs;
 /**
  * Merge the extends chain at a selection, resolve every alias, and key the
  * result by CSS custom-property name. A missing or unknown axis value takes the
- * axis default.
+ * axis default, and a theme in the chain reads a value it never declared at its
+ * own default for that axis.
  *
  * Pure — no DOM. An unresolvable reference throws rather than falling back.
  */
@@ -1238,31 +1295,32 @@ interface GeneratedColors {
 interface RampColors {
     readonly ramp: string;
 }
+/** One color of a list: a CSS color string, or a `ColorSource` resolved when it is read. */
+type ColorListItem = string | ColorSource;
 /** The forms a theme definition can hold: everything but a function. */
-type SerializableColorList = readonly string[] | GeneratedColors | RampColors;
+type SerializableColorList = readonly (string | ColorLiteral | ColorRef)[] | GeneratedColors | RampColors;
 /**
- * Several colors, read by index with `colorAt`, wrapping. Literals; the swatch
- * ramp's generator; a ramp of the active theme, which follows the mode; or a
- * function of the index.
+ * Several colors, read by index with `colorAt`, wrapping. Items, each a CSS
+ * string or a `ColorSource`; the swatch ramp's generator; a ramp of the active
+ * theme, which follows the mode; or a function of the index.
  */
-type ColorList = SerializableColorList | ((i: number) => string);
+type ColorList = readonly ColorListItem[] | GeneratedColors | RampColors | ((i: number) => ColorListItem);
 /** What a `ColorList` resolves against. `useTheme()`'s value is one. */
 interface ColorContext {
     readonly theme: Theme;
     readonly resolved: ResolvedTheme;
 }
+/** What a `ColorSource` resolves against under a theme. `useTones()`'s value is one. */
+interface ColorSourceContext extends ColorContext {
+    /** The list `{ ref: 'tone' }` indexes. Absent: the theme's own. */
+    readonly tones?: ColorList;
+    /** Names answered before the theme's. */
+    readonly palette?: Palette;
+}
 /** A ramp's step names, from the nearest theme in the chain that declares it. */
 declare function rampSteps(theme: Theme, ramp: string): readonly string[];
 /** The tone list a theme declares, from the nearest theme in its chain that has one. */
 declare function themeTones(theme: Theme): ColorList;
-/** The `i`th color of `list`, wrapping. A ramp list reads the resolved theme, so the answer follows its mode. */
-declare function colorAt(list: ColorList, i: number, ctx?: ColorContext): string;
-/**
- * As `colorAt`, but a ramp list answers with its custom property —
- * `var(--wzl-swatch-sky)` — so a color written into CSS follows a mode change
- * without re-rendering, provider or not.
- */
-declare function colorCssAt(list: ColorList, i: number, ctx?: ColorContext): string;
 /** How many distinct colors `list` holds before it wraps; `undefined` for a function, which never does. */
 declare function colorCount(list: ColorList, ctx?: ColorContext): number | undefined;
 
@@ -1334,6 +1392,7 @@ interface ScaleDef {
     readonly description?: string;
     readonly describe?: Readonly<Record<string, string>>;
 }
+/** What every semantic rule may carry beside the way it derives its value. */
 interface SemanticCommon {
     readonly type?: string;
     readonly description?: string;
@@ -1400,4 +1459,4 @@ interface ThemeDefinition {
     readonly tones?: SerializableColorList;
 }
 
-export { weaselTheme as $, type AxisDefs as A, type BakedTheme as B, type CategoricalRampDef as C, THEME_SOURCES as D, type ThemeInput as E, type FlatTokens as F, type GeneratedColors as G, colorAt as H, colorCount as I, colorCssAt as J, defineTheme as K, type Lookup as L, enumerateSelections as M, type NumberParam as N, type OffsetRule as O, type PinObject as P, fullSelection as Q, type RawToken as R, type Selection as S, type ThemeDefinition as T, isByAxis as U, type Varying as V, rampSteps as W, resolveTheme as X, selectionKey as Y, themeAxes as Z, themeTones as _, type Theme as a, type ContrastRule as b, type LightnessRampDef as c, type LiteralRule as d, type PinValue as e, type RampDef as f, type RefRule as g, type ScaleDef as h, type SemanticRule as i, type StepRule as j, bake as k, bakeChain as l, mergeChain as m, type TokenName as n, type ResolvedTheme as o, type TokenValue as p, type AxisDef as q, type AxisValue as r, BAKED_THEMES as s, type ByAxis as t, type ColorContext as u, type ColorList as v, type GeneratedTheme as w, type RampColors as x, type SerializableColorList as y, THEMES as z };
+export { themeTones as $, type AxisDefs as A, type BakedTheme as B, type CategoricalRampDef as C, type RampColors as D, type SerializableColorList as E, type FlatTokens as F, type GeneratedColors as G, THEMES as H, THEME_SOURCES as I, type ThemeInput as J, colorCount as K, type Lookup as L, defineTheme as M, type NumberParam as N, type OffsetRule as O, type PinObject as P, enumerateSelections as Q, type RawToken as R, type Selection as S, type ThemeDefinition as T, fullSelection as U, type Varying as V, isByAxis as W, rampSteps as X, resolveTheme as Y, selectionKey as Z, themeAxes as _, type Theme as a, weaselTheme as a0, type ContrastRule as b, type LightnessRampDef as c, type LiteralRule as d, type PinValue as e, type RampDef as f, type RefRule as g, type ScaleDef as h, type SemanticCommon as i, type SemanticRule as j, type StepRule as k, bake as l, bakeChain as m, mergeChain as n, type ColorList as o, type ColorSourceContext as p, type TokenName as q, type ResolvedTheme as r, type TokenValue as s, type AxisDef as t, type AxisValue as u, BAKED_THEMES as v, type ByAxis as w, type ColorContext as x, type ColorListItem as y, type GeneratedTheme as z };

package/dist/engine.d.ts

@@ -1,12 +1,12 @@
 import { OklchDeg, oklchDegToHex } from '@weasel-js/paint';
-import { T as ThemeDefinition, L as Lookup, F as FlatTokens, R as RawToken, S as Selection, B as BakedTheme, A as AxisDefs, a as Theme } from './definition-DACR1H4A.js';
-export { C as CategoricalRampDef, b as ContrastRule, c as LightnessRampDef, d as LiteralRule, N as NumberParam, O as OffsetRule, P as PinObject, e as PinValue, f as RampDef, g as RefRule, h as ScaleDef, i as SemanticRule, j as StepRule, k as bake, l as bakeChain, m as mergeChain } from './definition-DACR1H4A.js';
+import { T as ThemeDefinition, L as Lookup, F as FlatTokens, R as RawToken, S as Selection, B as BakedTheme, A as AxisDefs, a as Theme } from './definition-CSeERbSL.js';
+export { C as CategoricalRampDef, b as ContrastRule, c as LightnessRampDef, d as LiteralRule, N as NumberParam, O as OffsetRule, P as PinObject, e as PinValue, f as RampDef, g as RefRule, h as ScaleDef, i as SemanticCommon, j as SemanticRule, k as StepRule, l as bake, m as bakeChain, n as mergeChain } from './definition-CSeERbSL.js';
 
 /** A color in OKLCH: lightness 0–1, chroma, hue in degrees. paint's own type,
  *  under the name this engine has always called it. */
 type Lch = OklchDeg;
-/** `#rrggbb` to 0–255 channels. */
-declare function hexToRgb(hex: string): [number, number, number];
+/** A hex color to 0–255 channels, its alpha dropped. Throws on anything else. */
+declare const hexToRgb: (hex: string) => [number, number, number];
 /** OKLCH (lightness 0–1, chroma, hue in degrees) to `#rrggbb`. Chroma past the gamut is clipped at constant lightness. */
 declare const toHex: typeof oklchDegToHex;
 /** `#rrggbb` to OKLCH, hue in 0–360. */
@@ -29,9 +29,7 @@ declare function toLab(hex: string): [number, number, number];
  * what separates them is chroma. And it is not plain euclidean OKLab distance:
  * OKLab's chroma range is small beside its lightness range, so an unweighted
  * distance is almost all lightness, and it ranks a mid-gray as further from
- * white than a pale blue is. Measured against CIELAB dE on the same colors,
- * unweighted OKLab put `#c1c1c1` at 0.160 and `#abd9ff` at 0.126 while CIELAB
- * put them at 21.9 and 28.5 — opposite orders.
+ * white than a pale blue is.
  *
  * `CHROMA_WEIGHT` restores CIELAB's ordering. It is a weight, not a unit
  * conversion, so these numbers do not transfer to or from CIELAB dE.
@@ -305,15 +303,16 @@ interface DtcgAxesExtension {
     readonly overrides: Record<string, DtcgLayer>;
 }
 
-type Group = Record<string, unknown> & {
+/** A DTCG group: tokens of one `$type`, by name. */
+type DtcgGroup = Record<string, unknown> & {
     $type: string;
 };
 /** A DTCG document as {@link toDTCG} writes it. */
 interface DtcgExport {
     readonly name: string;
     readonly defaultMode?: string;
-    readonly primitives: Record<string, Group>;
-    readonly modes: Record<string, Record<string, Group>>;
+    readonly primitives: Record<string, DtcgGroup>;
+    readonly modes: Record<string, Record<string, DtcgGroup>>;
     readonly $extensions?: {
         readonly [AXES_EXT]?: DtcgAxesExtension;
     };
@@ -325,10 +324,8 @@ interface DtcgExport {
  *
  * DTCG has one variant dimension, so the plain groups hold mode, with every
  * other axis at its default value: what a tool that ignores extensions reads.
- * The other values travel under `$extensions["com.weasel.axes"]` (see
- * `DtcgAxesExtension`), one override layer per combination of non-default values
- * some token actually varies by — axes that vary independently cost one layer
- * per value, not their cross-product.
+ * The other values travel under `$extensions["com.weasel.axes"]`, one override
+ * layer per combination of non-default values some token actually varies by.
  */
 declare function toDTCG(theme: Theme): DtcgExport;
 
@@ -401,8 +398,7 @@ interface ThemeApi {
     get(name: string): Promise<StoredTheme>;
     put(name: string, definition: ThemeDefinition, baseHash: string | null): Promise<PutResult>;
 }
-type Fetch = (input: string, init?: RequestInit) => Promise<Response>;
 /** The dev server's theme store, addressed relative to the page so the app's base path carries over. */
-declare function httpThemeApi(base?: string, fetchImpl?: Fetch): ThemeApi;
+declare function httpThemeApi(base?: string, fetchImpl?: (input: string, init?: RequestInit) => Promise<Response>): ThemeApi;
 
-export { type Anchor, type AxisDependency, BakedTheme, CHROMA_WEIGHT, type Constraints, DEFAULT_CONSTRAINTS, type DeriveResult, type DtcgExport, type EmitInput, type GeneratedTokens, type Issue, type IssueReport, type Layer, type Lch, type LightnessParams, Lookup, type Palette, type Provenance, type PutResult, type ScaleParams, type Stats, type StoredTheme, type Swatch, type ThemeApi, ThemeDefinition, type ThemesInput, anchorFromHex, axisDependencies, categoricalRamp, chromaCap, contrast, cssValue, declaredSteps, deltaE, derive, emitCss, emitManifest, emitThemes, floorDegrees, generate, generateTokens, hexToRgb, httpThemeApi, hueGap, hueName, lightnessRamp, luminance, scale, serializeDefinition, toDTCG, toHex, toHexPreview, toLab, toLch, vividAt };
+export { type Anchor, type AxisDependency, BakedTheme, CHROMA_WEIGHT, type Constraints, DEFAULT_CONSTRAINTS, type DeriveResult, type DtcgAxesExtension, type DtcgExport, type DtcgGroup, type DtcgLayer, type EmitInput, type GeneratedTokens, type Issue, type IssueReport, type Layer, type Lch, type LightnessParams, Lookup, type Palette, type Provenance, type PutResult, type ScaleParams, type Stats, type StoredTheme, type Swatch, type ThemeApi, ThemeDefinition, type ThemesInput, anchorFromHex, axisDependencies, categoricalRamp, chromaCap, contrast, cssValue, declaredSteps, deltaE, derive, emitCss, emitManifest, emitThemes, floorDegrees, generate, generateTokens, hexToRgb, httpThemeApi, hueGap, hueName, lightnessRamp, luminance, scale, serializeDefinition, toDTCG, toHex, toHexPreview, toLab, toLch, vividAt };