@weasel-js/theme 1.9.4 → 1.10.1

package/dist/{definition-GS7_Kz9D.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";
@@ -252,19 +256,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': "#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";
@@ -430,19 +443,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': "#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";
@@ -608,19 +630,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': "#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";
@@ -1239,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;
 
@@ -1335,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;
@@ -1401,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,6 +1,6 @@
 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-GS7_Kz9D.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-GS7_Kz9D.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. */
@@ -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 };

package/dist/engine.js

@@ -1,6 +1,8 @@
 import { overrideKey, AXES_EXT, ALPHA_EXT } from './chunk-Z675UQ26.js';
-import { mergeAxes, toLch, toHex, generate, DEFAULT_CONSTRAINTS, fullSelection, pick, enumerateSelections, resolveTokens, mixAlpha, pickAll, themeAxes, tokensAt, selectionKey, isByAxis, contrast, tokenAt } from './chunk-7LCRXZDY.js';
-export { CHROMA_WEIGHT, DEFAULT_CONSTRAINTS, anchorFromHex, chromaCap, contrast, deltaE, floorDegrees, generate, hexToRgb, hueGap, hueName, luminance, toHex, toHexPreview, toLab, toLch, vividAt } from './chunk-7LCRXZDY.js';
+import { toLch, toHex, generate, DEFAULT_CONSTRAINTS, contrast } from './chunk-S7MJPFDP.js';
+export { CHROMA_WEIGHT, DEFAULT_CONSTRAINTS, anchorFromHex, chromaCap, contrast, deltaE, floorDegrees, generate, hexToRgb, hueGap, hueName, luminance, toHex, toHexPreview, toLab, toLch, vividAt } from './chunk-S7MJPFDP.js';
+import { resolveTokens, mixAlpha, themeAxes, tokensAt, tokenAt } from './chunk-32JKTYS2.js';
+import { mergeAxes, fullSelection, pick, enumerateSelections, pickAll, selectionKey, isByAxis } from './chunk-P5F3GZV6.js';
 import { isPlainObject } from '@weasel-js/registry';
 
 // src/engine/steps.ts
@@ -1249,6 +1251,138 @@ function toDTCG(theme) {
 
 // src/hooks.ts
 var TOKEN_HOOKS = [
+  {
+    name: "titlebar-surface",
+    type: "color",
+    value: "var(--_edge)",
+    description: "Background of the strip a `titlebar` frame carries its title in: a color, a gradient, or stripes. Unset, the frame\u2019s edge color. A frame that names a tone paints the tone instead."
+  },
+  {
+    name: "titlebar-fg",
+    type: "color",
+    value: "var(--_edge-ink)",
+    description: "Text color on a `titlebar` frame\u2019s strip. Unset, black or white, whichever reads on the edge color."
+  },
+  {
+    name: "titlebar-align",
+    type: "string",
+    value: "start",
+    description: "Text alignment of a `titlebar` frame\u2019s title along its strip."
+  },
+  {
+    name: "titlebar-weight",
+    type: "fontWeight",
+    value: "var(--wzl-font-weight-bold)",
+    description: "Font weight of a `titlebar` frame\u2019s title."
+  },
+  {
+    name: "titlebar-label-surface",
+    type: "color",
+    value: "transparent",
+    description: "Background behind a `titlebar` frame\u2019s title alone, for a strip drawn in stripes that must not run through the letters."
+  },
+  {
+    name: "titlebar-label-pad",
+    type: "dimension",
+    value: "0",
+    description: "Inline padding of the patch --wzl-titlebar-label-surface paints behind a `titlebar` frame\u2019s title."
+  },
+  {
+    name: "titlebar-border",
+    type: "border",
+    value: "1px solid var(--_edge)",
+    description: "Border of a `titlebar` frame. A theme whose --wzl-bevel-raised draws the edge sets it to a border of no width."
+  },
+  {
+    name: "titlebar-inset",
+    type: "dimension",
+    value: "0",
+    description: "Padding between a `titlebar` frame\u2019s edge and its strip and body: the width of the bevel a theme draws there."
+  },
+  {
+    name: "bevel-raised",
+    type: "shadow",
+    value: "none",
+    description: "Box shadow of a raised face: a Button, a PropertyPanel, a menu, popover, tooltip, or Dialog, a thumb, the chosen segment of a segmented control, a toolbar\u2019s strip, and every edge of a tab but the one its panel is on. A theme that draws its edges in relief declares it; unset, each keeps the shadow it draws for itself, which for most is none."
+  },
+  {
+    name: "bevel-pressed",
+    type: "shadow",
+    value: "none",
+    description: "Box shadow of a Button held down, or of a Button or a toolbar\u2019s button that stays down. Unset, a Button draws its own inset (--btn-relief-pressed) and a toolbar\u2019s button none."
+  },
+  {
+    name: "bevel-sunken",
+    type: "shadow",
+    value: "none",
+    description: "Box shadow of a well: the frame a field draws its value in, a checkbox, a radio, the track of a switch, a slider, or a segmented control, and a cell of a flat one."
+  },
+  {
+    name: "field-border",
+    type: "border",
+    value: "1px solid var(--wzl-border)",
+    description: "Border of a field\u2019s frame. A theme whose --wzl-bevel-sunken draws the edge sets it to a border of no width."
+  },
+  {
+    name: "field-focus-shadow",
+    type: "shadow",
+    value: "0 0 0 1px var(--wzl-focus-ring)",
+    description: "Box shadow of a field\u2019s frame while it holds focus. It replaces --wzl-bevel-sunken there, so a beveled theme restates the bevel in it."
+  },
+  {
+    name: "button-radius",
+    type: "dimension",
+    value: "calc(var(--btn-height) * 0.1)",
+    description: "Corner radius of a Button. Unset, a tenth of its height."
+  },
+  {
+    name: "button-surface",
+    type: "color",
+    value: "var(--btn-glass)",
+    description: "Background of a secondary Button. Unset, neutral glass mixed from the surfaces."
+  },
+  {
+    name: "button-pressed-surface",
+    type: "color",
+    value: "var(--btn-glass-pressed)",
+    description: "Background of a secondary Button while it is held down."
+  },
+  {
+    name: "button-primary-surface",
+    type: "color",
+    value: "var(--btn-glass)",
+    description: "Background of a primary Button. Unset, glass tinted with --wzl-accent."
+  },
+  {
+    name: "button-primary-pressed-surface",
+    type: "color",
+    value: "var(--btn-glass-pressed)",
+    description: "Background of a primary Button while it is held down."
+  },
+  {
+    name: "button-primary-fg",
+    type: "color",
+    value: "var(--wzl-fg-on-accent)",
+    description: "Text color of a primary Button, for a theme whose --wzl-button-primary-surface is not an accent fill."
+  },
+  {
+    name: "button-primary-bevel",
+    type: "shadow",
+    value: "var(--wzl-bevel-raised)",
+    description: "Box shadow of a primary Button, where it differs from --wzl-bevel-raised: the heavier frame of a default button."
+  },
+  {
+    name: "button-gloss",
+    type: "number",
+    value: "1",
+    description: "Opacity of the specular sheen over a Button\u2019s upper half. 0 for a flat face."
+  },
+  {
+    name: "button-text-shadow",
+    type: "shadow",
+    value: "var(--btn-engraving)",
+    description: "Text shadow of a primary or secondary Button\u2019s label. Unset, an engraving stamp under the glyphs in dark mode."
+  },
   {
     name: "detail-figure-min-width",
     type: "dimension",
@@ -1321,6 +1455,12 @@ var TOKEN_HOOKS = [
     value: "300px",
     description: "Width of the Prefs category column."
   },
+  {
+    name: "prop-columns",
+    type: "string",
+    value: "1fr 1fr",
+    description: "Column tracks of a Properties list, group body, and subpanel. A container too narrow for two columns sets `minmax(0, 1fr)` to stack every row."
+  },
   {
     name: "prop-number-width",
     type: "dimension",
@@ -1399,6 +1539,12 @@ var TOKEN_HOOKS = [
     value: "var(--wzl-fg-subtle)",
     description: "Color of the bracket a Tree draws down a branch."
   },
+  {
+    name: "tree-leaf-indent",
+    type: "dimension",
+    value: "0",
+    description: "How far in from its branches' glyphs a Tree with guides sets a row that folds nothing."
+  },
   {
     name: "dialog-max-width",
     type: "dimension",
@@ -1422,6 +1568,12 @@ var TOKEN_HOOKS = [
     type: "dimension",
     value: "auto",
     description: "Width a PropertyPanel\u2019s title row gives its actions. Set, it holds that width whatever the actions are."
+  },
+  {
+    name: "prop-panel-actions-align",
+    type: "string",
+    value: "center",
+    description: "How a PropertyPanel\u2019s title row lines its actions up with the title: center, or baseline for actions that are text."
   }
 ];