@weasel-js/theme 1.5.2 → 1.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,8 +1,72 @@
1
- import { B as BakedTheme, b as AxisDefs, f as ThemeDefinition, T as Theme, S as Selection } from './theme-DAZcQi_L.js';
1
+ /** One value of an axis. `scheme` becomes `color-scheme` in that value's CSS blocks. */
2
+ interface AxisValue {
3
+ readonly scheme?: 'dark' | 'light';
4
+ }
5
+ interface AxisDef {
6
+ readonly default: string;
7
+ readonly values: Readonly<Record<string, AxisValue>>;
8
+ }
9
+ /** Key order is declaration order, which selectors and selection keys follow. */
10
+ type AxisDefs = Readonly<Record<string, AxisDef>>;
11
+ /** A partial choice of axis values, e.g. `{ mode: 'light' }`. */
12
+ type Selection = Readonly<Record<string, string>>;
13
+ /** `{ by: 'mode', dark: …, light: … }`: a value that differs per axis value. */
14
+ interface ByAxis<T> {
15
+ readonly by: string;
16
+ readonly [axisValue: string]: Varying<T> | string;
17
+ }
18
+ type Varying<T> = T | ByAxis<T>;
19
+ declare function isByAxis(v: unknown): v is ByAxis<unknown>;
20
+ /** Every axis given a known value; anything missing or unknown takes its default. */
21
+ declare function fullSelection(axes: AxisDefs, selection?: Selection): Selection;
22
+ declare function enumerateSelections(axes: AxisDefs): Selection[];
23
+ /** `mode=dark,density=compact`, axes in declaration order. */
24
+ declare function selectionKey(axes: AxisDefs, selection: Selection): string;
25
+
26
+ type TokenValue = string | number | readonly (string | number)[];
27
+ /**
28
+ * A single design token as authored, before aliases are resolved: a DTCG-shaped
29
+ * `{ type, value }` pair where `value` may still be a `{ref}` to another token.
30
+ */
31
+ interface RawToken {
32
+ readonly type: string;
33
+ readonly value: TokenValue;
34
+ /** Render the referenced color at this alpha, 0–1. */
35
+ readonly alpha?: number | undefined;
36
+ readonly description?: string | undefined;
37
+ }
38
+ /** A token graph flattened to one level, keyed by token name (no `--wzl-`
39
+ * prefix). Still unresolved — see `ResolvedTokenMap` for the output side. */
40
+ type FlatTokens = Record<string, RawToken>;
41
+
42
+ type Lookup = (name: string) => ThemeDefinition | undefined;
43
+ /** The definition with its whole `extends` chain folded in, child entries winning. */
44
+ declare function mergeChain(def: ThemeDefinition, lookup?: Lookup, seen?: ReadonlySet<string>): ThemeDefinition;
45
+
46
+ /**
47
+ * A definition with every rule run: plain or `by`-varying tokens, references intact.
48
+ * A branch `derive` could not produce is left out, so at runtime it falls through to the parent; definitions with
49
+ * issues still bake, because the editor bakes mid-edit and the build refuses them before baking. Cycles and dangling
50
+ * references still throw, as they do in `derive`.
51
+ */
52
+ interface BakedTheme {
53
+ readonly name: string;
54
+ readonly extends: string | null;
55
+ readonly axes: AxisDefs;
56
+ /** In layer order, then definition order. */
57
+ readonly tokens: Readonly<Record<string, Varying<RawToken>>>;
58
+ /** Each ramp this definition declares → its step names in order, which the tokens alone do not keep. */
59
+ readonly ramps?: Readonly<Record<string, readonly string[]>>;
60
+ readonly tones?: SerializableColorList;
61
+ }
62
+ /** Derive `definition` at every selection and fold the results into one record of tokens with no rules left. */
63
+ declare function bake(definition: ThemeDefinition, lookup?: Lookup): BakedTheme;
64
+ /** `definition` and every theme it extends, baked, root first. */
65
+ declare function bakeChain(definition: ThemeDefinition, lookup?: Lookup): BakedTheme[];
2
66
 
3
67
  /** Every design token the built-in themes declare, spelled as the CSS
4
68
  * custom property it becomes. */
5
- 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-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-on-accent' | '--wzl-fg-subtle' | '--wzl-field-pad-x' | '--wzl-focus-ring' | '--wzl-font-body' | '--wzl-font-display' | '--wzl-font-mono' | '--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-radius-lg' | '--wzl-radius-md' | '--wzl-radius-pill' | '--wzl-radius-sm' | '--wzl-shadow' | '--wzl-slider-thumb-mix' | '--wzl-slider-thumb-size' | '--wzl-slider-track-h' | '--wzl-slider-track-mix' | '--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-success' | '--wzl-success-base' | '--wzl-surface' | '--wzl-surface-hover' | '--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-z-modal' | '--wzl-z-overlay' | '--wzl-z-toolbar';
69
+ 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-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-on-accent' | '--wzl-fg-subtle' | '--wzl-field-pad-x' | '--wzl-focus-ring' | '--wzl-font-body' | '--wzl-font-display' | '--wzl-font-mono' | '--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-track-h' | '--wzl-slider-track-mix' | '--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-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';
6
70
  /** A built-in theme with its aliases already collapsed: every selection
7
71
  * (keyed `mode=dark`, axes in declaration order) maps every token name to
8
72
  * a final CSS value. */
@@ -52,6 +116,9 @@ declare const THEMES: {
52
116
  readonly '--wzl-accent-soft': "#1d1454";
53
117
  readonly '--wzl-accent-base': "#2e1f7a";
54
118
  readonly '--wzl-accent-strong': "#5841b8";
119
+ readonly '--wzl-secondary-soft': "#704e09";
120
+ readonly '--wzl-secondary-base': "#dc9d15";
121
+ readonly '--wzl-secondary-strong': "#f1cb8d";
55
122
  readonly '--wzl-swatch-fuchsia': "#f641f7";
56
123
  readonly '--wzl-swatch-green': "#48e628";
57
124
  readonly '--wzl-swatch-sky': "#36bff2";
@@ -85,19 +152,65 @@ declare const THEMES: {
85
152
  readonly '--wzl-border': "#25272c";
86
153
  readonly '--wzl-border-strong': "#6f737b";
87
154
  readonly '--wzl-accent-fg': "#5841b8";
155
+ readonly '--wzl-secondary-fg': "#dc9d15";
88
156
  readonly '--wzl-fg-inverse': "#0e0f12";
89
157
  readonly '--wzl-shadow': "rgba(0, 0, 0, 0.6)";
158
+ readonly '--wzl-panel-surface': "#25272c";
159
+ readonly '--wzl-panel-border-color': "#25272c";
160
+ readonly '--wzl-panel-border-style': "solid";
161
+ readonly '--wzl-panel-border-width': "1px";
162
+ readonly '--wzl-radius-lg': "14px";
163
+ readonly '--wzl-panel-radius': "14px";
164
+ readonly '--wzl-panel-pad': "14px 16px";
165
+ readonly '--wzl-glass-blur': "3px";
166
+ readonly '--wzl-panel-blur': "3px";
167
+ readonly '--wzl-panel-tone-mix': "14%";
168
+ readonly '--wzl-font-display': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
169
+ readonly '--wzl-panel-title-font': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
170
+ readonly '--wzl-font-weight-light': "200";
171
+ readonly '--wzl-panel-title-weight': "200";
172
+ readonly '--wzl-panel-title-size': "14px";
173
+ readonly '--wzl-panel-title-case': "none";
174
+ readonly '--wzl-panel-title-tracking': "0.01em";
175
+ readonly '--wzl-panel-title-color': "#e6e7e9";
176
+ readonly '--wzl-panel-title-inset': "0";
177
+ readonly '--wzl-stance-scope-border-width': "0";
178
+ readonly '--wzl-stance-scope-radius': "8px";
179
+ readonly '--wzl-stance-scope-tone-mix': "22%";
180
+ readonly '--wzl-stance-scope-nested-radius': "6px";
181
+ readonly '--wzl-stance-scope-nested-surface': "#181a1e";
182
+ readonly '--wzl-stance-aside-surface': "transparent";
183
+ readonly '--wzl-line-subtle': "rgba(230, 231, 233, 0.1)";
184
+ readonly '--wzl-stance-aside-border-color': "rgba(230, 231, 233, 0.1)";
185
+ readonly '--wzl-stance-aside-blur': "0px";
186
+ readonly '--wzl-stance-aside-title-color': "#6f737b";
187
+ readonly '--wzl-stance-advanced-title-color': "#6f737b";
188
+ readonly '--wzl-stance-debug-border-style': "dashed";
189
+ readonly '--wzl-font-mono': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
190
+ readonly '--wzl-stance-debug-title-font': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
191
+ readonly '--wzl-stance-debug-title-case': "none";
90
192
  readonly '--wzl-danger-base': "#d94a3f";
193
+ readonly '--wzl-danger': "#d94a3f";
194
+ readonly '--wzl-stance-danger-tone': "#d94a3f";
195
+ readonly '--wzl-stance-danger-border-color': "#d94a3f";
196
+ readonly '--wzl-stance-danger-title-color': "#d94a3f";
197
+ readonly '--wzl-accent': "#2e1f7a";
198
+ readonly '--wzl-stance-notice-tone': "#2e1f7a";
199
+ readonly '--wzl-stance-notice-tone-mix': "8%";
200
+ readonly '--wzl-stance-important-border-color': "#5841b8";
201
+ readonly '--wzl-stance-important-title-color': "#5841b8";
202
+ readonly '--wzl-stance-preview-pad': "0";
203
+ readonly '--wzl-stance-preview-title-size': "8px";
204
+ readonly '--wzl-stance-preview-title-case': "none";
205
+ readonly '--wzl-stance-preview-title-inset': "6px 10px 0";
91
206
  readonly '--wzl-warning-base': "#d99a3f";
92
207
  readonly '--wzl-success-base': "#2ec27e";
93
208
  readonly '--wzl-fg-on-accent': "#f5f5f6";
94
- readonly '--wzl-line-subtle': "rgba(230, 231, 233, 0.1)";
95
209
  readonly '--wzl-line': "rgba(230, 231, 233, 0.2)";
96
210
  readonly '--wzl-line-strong': "rgba(230, 231, 233, 0.4)";
97
211
  readonly '--wzl-curve-color': "#5841b8";
98
- readonly '--wzl-accent': "#2e1f7a";
99
212
  readonly '--wzl-accent-hover': "#5841b8";
100
- readonly '--wzl-danger': "#d94a3f";
213
+ readonly '--wzl-secondary': "#dc9d15";
101
214
  readonly '--wzl-warning': "#d99a3f";
102
215
  readonly '--wzl-success': "#2ec27e";
103
216
  readonly '--wzl-focus-ring': "#5841b8";
@@ -106,7 +219,6 @@ declare const THEMES: {
106
219
  readonly '--wzl-surface-pressed': "rgba(230, 231, 233, 0.18)";
107
220
  readonly '--wzl-radius-sm': "3px";
108
221
  readonly '--wzl-radius-md': "5px";
109
- readonly '--wzl-radius-lg': "14px";
110
222
  readonly '--wzl-radius-pill': "999px";
111
223
  readonly '--wzl-border-w': "1px";
112
224
  readonly '--wzl-line-width': "2px";
@@ -123,8 +235,12 @@ declare const THEMES: {
123
235
  readonly '--wzl-handle-size': "9px";
124
236
  readonly '--wzl-handle-size-sm': "7px";
125
237
  readonly '--wzl-handle-size-lg': "10px";
238
+ readonly '--wzl-checker-a': "#25272c";
239
+ readonly '--wzl-checker-b': "#181a1e";
240
+ readonly '--wzl-checker-size': "8px";
241
+ readonly '--wzl-workspace-surface': "#0e0f12";
242
+ readonly '--wzl-workspace-line': "rgba(230, 231, 233, 0.1)";
126
243
  readonly '--wzl-field-pad-x': "8px";
127
- readonly '--wzl-glass-blur': "3px";
128
244
  readonly '--wzl-font-size': "11px";
129
245
  readonly '--wzl-tracking-none': "0";
130
246
  readonly '--wzl-tracking-wide': "0.06em";
@@ -143,10 +259,7 @@ declare const THEMES: {
143
259
  readonly '--wzl-ease-in-out-cubic': "cubic-bezier(0.65, 0, 0.35, 1)";
144
260
  readonly '--wzl-ease-out-back': "cubic-bezier(0.34, 1.56, 0.64, 1)";
145
261
  readonly '--wzl-font-ui': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
146
- readonly '--wzl-font-display': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
147
262
  readonly '--wzl-font-body': "Inter, system-ui, -apple-system, 'Segoe UI', sans-serif";
148
- readonly '--wzl-font-mono': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
149
- readonly '--wzl-font-weight-light': "200";
150
263
  readonly '--wzl-font-weight-normal': "300";
151
264
  readonly '--wzl-font-weight-medium': "350";
152
265
  readonly '--wzl-font-weight-bold': "400";
@@ -169,6 +282,9 @@ declare const THEMES: {
169
282
  readonly '--wzl-accent-soft': "#1d1454";
170
283
  readonly '--wzl-accent-base': "#2e1f7a";
171
284
  readonly '--wzl-accent-strong': "#5841b8";
285
+ readonly '--wzl-secondary-soft': "#704e09";
286
+ readonly '--wzl-secondary-base': "#dc9d15";
287
+ readonly '--wzl-secondary-strong': "#f1cb8d";
172
288
  readonly '--wzl-swatch-fuchsia': "#f641f7";
173
289
  readonly '--wzl-swatch-green': "#48e628";
174
290
  readonly '--wzl-swatch-sky': "#36bff2";
@@ -202,19 +318,65 @@ declare const THEMES: {
202
318
  readonly '--wzl-border': "#25272c";
203
319
  readonly '--wzl-border-strong': "#6f737b";
204
320
  readonly '--wzl-accent-fg': "#5841b8";
321
+ readonly '--wzl-secondary-fg': "#dc9d15";
205
322
  readonly '--wzl-fg-inverse': "#0e0f12";
206
323
  readonly '--wzl-shadow': "rgba(0, 0, 0, 0.6)";
324
+ readonly '--wzl-panel-surface': "#25272c";
325
+ readonly '--wzl-panel-border-color': "#25272c";
326
+ readonly '--wzl-panel-border-style': "solid";
327
+ readonly '--wzl-panel-border-width': "1px";
328
+ readonly '--wzl-radius-lg': "14px";
329
+ readonly '--wzl-panel-radius': "14px";
330
+ readonly '--wzl-panel-pad': "14px 16px";
331
+ readonly '--wzl-glass-blur': "3px";
332
+ readonly '--wzl-panel-blur': "3px";
333
+ readonly '--wzl-panel-tone-mix': "14%";
334
+ readonly '--wzl-font-display': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
335
+ readonly '--wzl-panel-title-font': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
336
+ readonly '--wzl-font-weight-light': "200";
337
+ readonly '--wzl-panel-title-weight': "200";
338
+ readonly '--wzl-panel-title-size': "16px";
339
+ readonly '--wzl-panel-title-case': "none";
340
+ readonly '--wzl-panel-title-tracking': "0.01em";
341
+ readonly '--wzl-panel-title-color': "#e6e7e9";
342
+ readonly '--wzl-panel-title-inset': "0";
343
+ readonly '--wzl-stance-scope-border-width': "0";
344
+ readonly '--wzl-stance-scope-radius': "8px";
345
+ readonly '--wzl-stance-scope-tone-mix': "22%";
346
+ readonly '--wzl-stance-scope-nested-radius': "6px";
347
+ readonly '--wzl-stance-scope-nested-surface': "#181a1e";
348
+ readonly '--wzl-stance-aside-surface': "transparent";
349
+ readonly '--wzl-line-subtle': "rgba(230, 231, 233, 0.1)";
350
+ readonly '--wzl-stance-aside-border-color': "rgba(230, 231, 233, 0.1)";
351
+ readonly '--wzl-stance-aside-blur': "0px";
352
+ readonly '--wzl-stance-aside-title-color': "#6f737b";
353
+ readonly '--wzl-stance-advanced-title-color': "#6f737b";
354
+ readonly '--wzl-stance-debug-border-style': "dashed";
355
+ readonly '--wzl-font-mono': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
356
+ readonly '--wzl-stance-debug-title-font': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
357
+ readonly '--wzl-stance-debug-title-case': "none";
207
358
  readonly '--wzl-danger-base': "#d94a3f";
359
+ readonly '--wzl-danger': "#d94a3f";
360
+ readonly '--wzl-stance-danger-tone': "#d94a3f";
361
+ readonly '--wzl-stance-danger-border-color': "#d94a3f";
362
+ readonly '--wzl-stance-danger-title-color': "#d94a3f";
363
+ readonly '--wzl-accent': "#2e1f7a";
364
+ readonly '--wzl-stance-notice-tone': "#2e1f7a";
365
+ readonly '--wzl-stance-notice-tone-mix': "8%";
366
+ readonly '--wzl-stance-important-border-color': "#5841b8";
367
+ readonly '--wzl-stance-important-title-color': "#5841b8";
368
+ readonly '--wzl-stance-preview-pad': "0";
369
+ readonly '--wzl-stance-preview-title-size': "10px";
370
+ readonly '--wzl-stance-preview-title-case': "none";
371
+ readonly '--wzl-stance-preview-title-inset': "6px 10px 0";
208
372
  readonly '--wzl-warning-base': "#d99a3f";
209
373
  readonly '--wzl-success-base': "#2ec27e";
210
374
  readonly '--wzl-fg-on-accent': "#f5f5f6";
211
- readonly '--wzl-line-subtle': "rgba(230, 231, 233, 0.1)";
212
375
  readonly '--wzl-line': "rgba(230, 231, 233, 0.2)";
213
376
  readonly '--wzl-line-strong': "rgba(230, 231, 233, 0.4)";
214
377
  readonly '--wzl-curve-color': "#5841b8";
215
- readonly '--wzl-accent': "#2e1f7a";
216
378
  readonly '--wzl-accent-hover': "#5841b8";
217
- readonly '--wzl-danger': "#d94a3f";
379
+ readonly '--wzl-secondary': "#dc9d15";
218
380
  readonly '--wzl-warning': "#d99a3f";
219
381
  readonly '--wzl-success': "#2ec27e";
220
382
  readonly '--wzl-focus-ring': "#5841b8";
@@ -223,7 +385,6 @@ declare const THEMES: {
223
385
  readonly '--wzl-surface-pressed': "rgba(230, 231, 233, 0.18)";
224
386
  readonly '--wzl-radius-sm': "3px";
225
387
  readonly '--wzl-radius-md': "5px";
226
- readonly '--wzl-radius-lg': "14px";
227
388
  readonly '--wzl-radius-pill': "999px";
228
389
  readonly '--wzl-border-w': "1px";
229
390
  readonly '--wzl-line-width': "2px";
@@ -240,8 +401,12 @@ declare const THEMES: {
240
401
  readonly '--wzl-handle-size': "9px";
241
402
  readonly '--wzl-handle-size-sm': "7px";
242
403
  readonly '--wzl-handle-size-lg': "10px";
404
+ readonly '--wzl-checker-a': "#25272c";
405
+ readonly '--wzl-checker-b': "#181a1e";
406
+ readonly '--wzl-checker-size': "8px";
407
+ readonly '--wzl-workspace-surface': "#0e0f12";
408
+ readonly '--wzl-workspace-line': "rgba(230, 231, 233, 0.1)";
243
409
  readonly '--wzl-field-pad-x': "8px";
244
- readonly '--wzl-glass-blur': "3px";
245
410
  readonly '--wzl-font-size': "13px";
246
411
  readonly '--wzl-tracking-none': "0";
247
412
  readonly '--wzl-tracking-wide': "0.06em";
@@ -260,10 +425,7 @@ declare const THEMES: {
260
425
  readonly '--wzl-ease-in-out-cubic': "cubic-bezier(0.65, 0, 0.35, 1)";
261
426
  readonly '--wzl-ease-out-back': "cubic-bezier(0.34, 1.56, 0.64, 1)";
262
427
  readonly '--wzl-font-ui': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
263
- readonly '--wzl-font-display': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
264
428
  readonly '--wzl-font-body': "Inter, system-ui, -apple-system, 'Segoe UI', sans-serif";
265
- readonly '--wzl-font-mono': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
266
- readonly '--wzl-font-weight-light': "200";
267
429
  readonly '--wzl-font-weight-normal': "300";
268
430
  readonly '--wzl-font-weight-medium': "350";
269
431
  readonly '--wzl-font-weight-bold': "400";
@@ -286,6 +448,9 @@ declare const THEMES: {
286
448
  readonly '--wzl-accent-soft': "#1d1454";
287
449
  readonly '--wzl-accent-base': "#2e1f7a";
288
450
  readonly '--wzl-accent-strong': "#5841b8";
451
+ readonly '--wzl-secondary-soft': "#704e09";
452
+ readonly '--wzl-secondary-base': "#dc9d15";
453
+ readonly '--wzl-secondary-strong': "#f1cb8d";
289
454
  readonly '--wzl-swatch-fuchsia': "#f641f7";
290
455
  readonly '--wzl-swatch-green': "#48e628";
291
456
  readonly '--wzl-swatch-sky': "#36bff2";
@@ -319,19 +484,65 @@ declare const THEMES: {
319
484
  readonly '--wzl-border': "#25272c";
320
485
  readonly '--wzl-border-strong': "#6f737b";
321
486
  readonly '--wzl-accent-fg': "#5841b8";
487
+ readonly '--wzl-secondary-fg': "#dc9d15";
322
488
  readonly '--wzl-fg-inverse': "#0e0f12";
323
489
  readonly '--wzl-shadow': "rgba(0, 0, 0, 0.6)";
490
+ readonly '--wzl-panel-surface': "#25272c";
491
+ readonly '--wzl-panel-border-color': "#25272c";
492
+ readonly '--wzl-panel-border-style': "solid";
493
+ readonly '--wzl-panel-border-width': "1px";
494
+ readonly '--wzl-radius-lg': "14px";
495
+ readonly '--wzl-panel-radius': "14px";
496
+ readonly '--wzl-panel-pad': "14px 16px";
497
+ readonly '--wzl-glass-blur': "3px";
498
+ readonly '--wzl-panel-blur': "3px";
499
+ readonly '--wzl-panel-tone-mix': "14%";
500
+ readonly '--wzl-font-display': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
501
+ readonly '--wzl-panel-title-font': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
502
+ readonly '--wzl-font-weight-light': "200";
503
+ readonly '--wzl-panel-title-weight': "200";
504
+ readonly '--wzl-panel-title-size': "18px";
505
+ readonly '--wzl-panel-title-case': "none";
506
+ readonly '--wzl-panel-title-tracking': "0.01em";
507
+ readonly '--wzl-panel-title-color': "#e6e7e9";
508
+ readonly '--wzl-panel-title-inset': "0";
509
+ readonly '--wzl-stance-scope-border-width': "0";
510
+ readonly '--wzl-stance-scope-radius': "8px";
511
+ readonly '--wzl-stance-scope-tone-mix': "22%";
512
+ readonly '--wzl-stance-scope-nested-radius': "6px";
513
+ readonly '--wzl-stance-scope-nested-surface': "#181a1e";
514
+ readonly '--wzl-stance-aside-surface': "transparent";
515
+ readonly '--wzl-line-subtle': "rgba(230, 231, 233, 0.1)";
516
+ readonly '--wzl-stance-aside-border-color': "rgba(230, 231, 233, 0.1)";
517
+ readonly '--wzl-stance-aside-blur': "0px";
518
+ readonly '--wzl-stance-aside-title-color': "#6f737b";
519
+ readonly '--wzl-stance-advanced-title-color': "#6f737b";
520
+ readonly '--wzl-stance-debug-border-style': "dashed";
521
+ readonly '--wzl-font-mono': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
522
+ readonly '--wzl-stance-debug-title-font': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
523
+ readonly '--wzl-stance-debug-title-case': "none";
324
524
  readonly '--wzl-danger-base': "#d94a3f";
525
+ readonly '--wzl-danger': "#d94a3f";
526
+ readonly '--wzl-stance-danger-tone': "#d94a3f";
527
+ readonly '--wzl-stance-danger-border-color': "#d94a3f";
528
+ readonly '--wzl-stance-danger-title-color': "#d94a3f";
529
+ readonly '--wzl-accent': "#2e1f7a";
530
+ readonly '--wzl-stance-notice-tone': "#2e1f7a";
531
+ readonly '--wzl-stance-notice-tone-mix': "8%";
532
+ readonly '--wzl-stance-important-border-color': "#5841b8";
533
+ readonly '--wzl-stance-important-title-color': "#5841b8";
534
+ readonly '--wzl-stance-preview-pad': "0";
535
+ readonly '--wzl-stance-preview-title-size': "12px";
536
+ readonly '--wzl-stance-preview-title-case': "none";
537
+ readonly '--wzl-stance-preview-title-inset': "6px 10px 0";
325
538
  readonly '--wzl-warning-base': "#d99a3f";
326
539
  readonly '--wzl-success-base': "#2ec27e";
327
540
  readonly '--wzl-fg-on-accent': "#f5f5f6";
328
- readonly '--wzl-line-subtle': "rgba(230, 231, 233, 0.1)";
329
541
  readonly '--wzl-line': "rgba(230, 231, 233, 0.2)";
330
542
  readonly '--wzl-line-strong': "rgba(230, 231, 233, 0.4)";
331
543
  readonly '--wzl-curve-color': "#5841b8";
332
- readonly '--wzl-accent': "#2e1f7a";
333
544
  readonly '--wzl-accent-hover': "#5841b8";
334
- readonly '--wzl-danger': "#d94a3f";
545
+ readonly '--wzl-secondary': "#dc9d15";
335
546
  readonly '--wzl-warning': "#d99a3f";
336
547
  readonly '--wzl-success': "#2ec27e";
337
548
  readonly '--wzl-focus-ring': "#5841b8";
@@ -340,7 +551,6 @@ declare const THEMES: {
340
551
  readonly '--wzl-surface-pressed': "rgba(230, 231, 233, 0.18)";
341
552
  readonly '--wzl-radius-sm': "3px";
342
553
  readonly '--wzl-radius-md': "5px";
343
- readonly '--wzl-radius-lg': "14px";
344
554
  readonly '--wzl-radius-pill': "999px";
345
555
  readonly '--wzl-border-w': "1px";
346
556
  readonly '--wzl-line-width': "2px";
@@ -357,8 +567,12 @@ declare const THEMES: {
357
567
  readonly '--wzl-handle-size': "9px";
358
568
  readonly '--wzl-handle-size-sm': "7px";
359
569
  readonly '--wzl-handle-size-lg': "10px";
570
+ readonly '--wzl-checker-a': "#25272c";
571
+ readonly '--wzl-checker-b': "#181a1e";
572
+ readonly '--wzl-checker-size': "8px";
573
+ readonly '--wzl-workspace-surface': "#0e0f12";
574
+ readonly '--wzl-workspace-line': "rgba(230, 231, 233, 0.1)";
360
575
  readonly '--wzl-field-pad-x': "8px";
361
- readonly '--wzl-glass-blur': "3px";
362
576
  readonly '--wzl-font-size': "15px";
363
577
  readonly '--wzl-tracking-none': "0";
364
578
  readonly '--wzl-tracking-wide': "0.06em";
@@ -377,10 +591,7 @@ declare const THEMES: {
377
591
  readonly '--wzl-ease-in-out-cubic': "cubic-bezier(0.65, 0, 0.35, 1)";
378
592
  readonly '--wzl-ease-out-back': "cubic-bezier(0.34, 1.56, 0.64, 1)";
379
593
  readonly '--wzl-font-ui': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
380
- readonly '--wzl-font-display': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
381
594
  readonly '--wzl-font-body': "Inter, system-ui, -apple-system, 'Segoe UI', sans-serif";
382
- readonly '--wzl-font-mono': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
383
- readonly '--wzl-font-weight-light': "200";
384
595
  readonly '--wzl-font-weight-normal': "300";
385
596
  readonly '--wzl-font-weight-medium': "350";
386
597
  readonly '--wzl-font-weight-bold': "400";
@@ -403,6 +614,9 @@ declare const THEMES: {
403
614
  readonly '--wzl-accent-soft': "#1d1454";
404
615
  readonly '--wzl-accent-base': "#2e1f7a";
405
616
  readonly '--wzl-accent-strong': "#5841b8";
617
+ readonly '--wzl-secondary-soft': "#016458";
618
+ readonly '--wzl-secondary-base': "#3ee1cb";
619
+ readonly '--wzl-secondary-strong': "#94e3d5";
406
620
  readonly '--wzl-swatch-fuchsia': "#f641f7";
407
621
  readonly '--wzl-swatch-green': "#48e628";
408
622
  readonly '--wzl-swatch-sky': "#36bff2";
@@ -436,19 +650,65 @@ declare const THEMES: {
436
650
  readonly '--wzl-border': "#c9cbcf";
437
651
  readonly '--wzl-border-strong': "#4d5058";
438
652
  readonly '--wzl-accent-fg': "#2e1f7a";
653
+ readonly '--wzl-secondary-fg': "#016458";
439
654
  readonly '--wzl-fg-inverse': "#f5f5f6";
440
655
  readonly '--wzl-shadow': "rgba(0, 0, 0, 0.18)";
656
+ readonly '--wzl-panel-surface': "#e6e7e9";
657
+ readonly '--wzl-panel-border-color': "#c9cbcf";
658
+ readonly '--wzl-panel-border-style': "solid";
659
+ readonly '--wzl-panel-border-width': "1px";
660
+ readonly '--wzl-radius-lg': "14px";
661
+ readonly '--wzl-panel-radius': "14px";
662
+ readonly '--wzl-panel-pad': "14px 16px";
663
+ readonly '--wzl-glass-blur': "3px";
664
+ readonly '--wzl-panel-blur': "3px";
665
+ readonly '--wzl-panel-tone-mix': "14%";
666
+ readonly '--wzl-font-display': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
667
+ readonly '--wzl-panel-title-font': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
668
+ readonly '--wzl-font-weight-light': "200";
669
+ readonly '--wzl-panel-title-weight': "200";
670
+ readonly '--wzl-panel-title-size': "14px";
671
+ readonly '--wzl-panel-title-case': "none";
672
+ readonly '--wzl-panel-title-tracking': "0.01em";
673
+ readonly '--wzl-panel-title-color': "#0e0f12";
674
+ readonly '--wzl-panel-title-inset': "0";
675
+ readonly '--wzl-stance-scope-border-width': "0";
676
+ readonly '--wzl-stance-scope-radius': "8px";
677
+ readonly '--wzl-stance-scope-tone-mix': "22%";
678
+ readonly '--wzl-stance-scope-nested-radius': "6px";
679
+ readonly '--wzl-stance-scope-nested-surface': "#f5f5f6";
680
+ readonly '--wzl-stance-aside-surface': "transparent";
681
+ readonly '--wzl-line-subtle': "rgba(14, 15, 18, 0.1)";
682
+ readonly '--wzl-stance-aside-border-color': "rgba(14, 15, 18, 0.1)";
683
+ readonly '--wzl-stance-aside-blur': "0px";
684
+ readonly '--wzl-stance-aside-title-color': "#4d5058";
685
+ readonly '--wzl-stance-advanced-title-color': "#4d5058";
686
+ readonly '--wzl-stance-debug-border-style': "dashed";
687
+ readonly '--wzl-font-mono': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
688
+ readonly '--wzl-stance-debug-title-font': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
689
+ readonly '--wzl-stance-debug-title-case': "none";
441
690
  readonly '--wzl-danger-base': "#d94a3f";
691
+ readonly '--wzl-danger': "#d94a3f";
692
+ readonly '--wzl-stance-danger-tone': "#d94a3f";
693
+ readonly '--wzl-stance-danger-border-color': "#d94a3f";
694
+ readonly '--wzl-stance-danger-title-color': "#d94a3f";
695
+ readonly '--wzl-accent': "#2e1f7a";
696
+ readonly '--wzl-stance-notice-tone': "#2e1f7a";
697
+ readonly '--wzl-stance-notice-tone-mix': "8%";
698
+ readonly '--wzl-stance-important-border-color': "#2e1f7a";
699
+ readonly '--wzl-stance-important-title-color': "#2e1f7a";
700
+ readonly '--wzl-stance-preview-pad': "0";
701
+ readonly '--wzl-stance-preview-title-size': "8px";
702
+ readonly '--wzl-stance-preview-title-case': "none";
703
+ readonly '--wzl-stance-preview-title-inset': "6px 10px 0";
442
704
  readonly '--wzl-warning-base': "#d99a3f";
443
705
  readonly '--wzl-success-base': "#2ec27e";
444
706
  readonly '--wzl-fg-on-accent': "#f5f5f6";
445
- readonly '--wzl-line-subtle': "rgba(14, 15, 18, 0.1)";
446
707
  readonly '--wzl-line': "rgba(14, 15, 18, 0.2)";
447
708
  readonly '--wzl-line-strong': "rgba(14, 15, 18, 0.4)";
448
709
  readonly '--wzl-curve-color': "#5841b8";
449
- readonly '--wzl-accent': "#2e1f7a";
450
710
  readonly '--wzl-accent-hover': "#5841b8";
451
- readonly '--wzl-danger': "#d94a3f";
711
+ readonly '--wzl-secondary': "#3ee1cb";
452
712
  readonly '--wzl-warning': "#d99a3f";
453
713
  readonly '--wzl-success': "#2ec27e";
454
714
  readonly '--wzl-focus-ring': "#5841b8";
@@ -457,7 +717,6 @@ declare const THEMES: {
457
717
  readonly '--wzl-surface-pressed': "rgba(14, 15, 18, 0.18)";
458
718
  readonly '--wzl-radius-sm': "3px";
459
719
  readonly '--wzl-radius-md': "5px";
460
- readonly '--wzl-radius-lg': "14px";
461
720
  readonly '--wzl-radius-pill': "999px";
462
721
  readonly '--wzl-border-w': "1px";
463
722
  readonly '--wzl-line-width': "2px";
@@ -474,8 +733,12 @@ declare const THEMES: {
474
733
  readonly '--wzl-handle-size': "9px";
475
734
  readonly '--wzl-handle-size-sm': "7px";
476
735
  readonly '--wzl-handle-size-lg': "10px";
736
+ readonly '--wzl-checker-a': "#c9cbcf";
737
+ readonly '--wzl-checker-b': "#f5f5f6";
738
+ readonly '--wzl-checker-size': "8px";
739
+ readonly '--wzl-workspace-surface': "#c9cbcf";
740
+ readonly '--wzl-workspace-line': "rgba(14, 15, 18, 0.1)";
477
741
  readonly '--wzl-field-pad-x': "8px";
478
- readonly '--wzl-glass-blur': "3px";
479
742
  readonly '--wzl-font-size': "11px";
480
743
  readonly '--wzl-tracking-none': "0";
481
744
  readonly '--wzl-tracking-wide': "0.06em";
@@ -494,10 +757,7 @@ declare const THEMES: {
494
757
  readonly '--wzl-ease-in-out-cubic': "cubic-bezier(0.65, 0, 0.35, 1)";
495
758
  readonly '--wzl-ease-out-back': "cubic-bezier(0.34, 1.56, 0.64, 1)";
496
759
  readonly '--wzl-font-ui': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
497
- readonly '--wzl-font-display': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
498
760
  readonly '--wzl-font-body': "Inter, system-ui, -apple-system, 'Segoe UI', sans-serif";
499
- readonly '--wzl-font-mono': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
500
- readonly '--wzl-font-weight-light': "200";
501
761
  readonly '--wzl-font-weight-normal': "300";
502
762
  readonly '--wzl-font-weight-medium': "350";
503
763
  readonly '--wzl-font-weight-bold': "400";
@@ -520,6 +780,9 @@ declare const THEMES: {
520
780
  readonly '--wzl-accent-soft': "#1d1454";
521
781
  readonly '--wzl-accent-base': "#2e1f7a";
522
782
  readonly '--wzl-accent-strong': "#5841b8";
783
+ readonly '--wzl-secondary-soft': "#016458";
784
+ readonly '--wzl-secondary-base': "#3ee1cb";
785
+ readonly '--wzl-secondary-strong': "#94e3d5";
523
786
  readonly '--wzl-swatch-fuchsia': "#f641f7";
524
787
  readonly '--wzl-swatch-green': "#48e628";
525
788
  readonly '--wzl-swatch-sky': "#36bff2";
@@ -553,19 +816,65 @@ declare const THEMES: {
553
816
  readonly '--wzl-border': "#c9cbcf";
554
817
  readonly '--wzl-border-strong': "#4d5058";
555
818
  readonly '--wzl-accent-fg': "#2e1f7a";
819
+ readonly '--wzl-secondary-fg': "#016458";
556
820
  readonly '--wzl-fg-inverse': "#f5f5f6";
557
821
  readonly '--wzl-shadow': "rgba(0, 0, 0, 0.18)";
822
+ readonly '--wzl-panel-surface': "#e6e7e9";
823
+ readonly '--wzl-panel-border-color': "#c9cbcf";
824
+ readonly '--wzl-panel-border-style': "solid";
825
+ readonly '--wzl-panel-border-width': "1px";
826
+ readonly '--wzl-radius-lg': "14px";
827
+ readonly '--wzl-panel-radius': "14px";
828
+ readonly '--wzl-panel-pad': "14px 16px";
829
+ readonly '--wzl-glass-blur': "3px";
830
+ readonly '--wzl-panel-blur': "3px";
831
+ readonly '--wzl-panel-tone-mix': "14%";
832
+ readonly '--wzl-font-display': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
833
+ readonly '--wzl-panel-title-font': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
834
+ readonly '--wzl-font-weight-light': "200";
835
+ readonly '--wzl-panel-title-weight': "200";
836
+ readonly '--wzl-panel-title-size': "16px";
837
+ readonly '--wzl-panel-title-case': "none";
838
+ readonly '--wzl-panel-title-tracking': "0.01em";
839
+ readonly '--wzl-panel-title-color': "#0e0f12";
840
+ readonly '--wzl-panel-title-inset': "0";
841
+ readonly '--wzl-stance-scope-border-width': "0";
842
+ readonly '--wzl-stance-scope-radius': "8px";
843
+ readonly '--wzl-stance-scope-tone-mix': "22%";
844
+ readonly '--wzl-stance-scope-nested-radius': "6px";
845
+ readonly '--wzl-stance-scope-nested-surface': "#f5f5f6";
846
+ readonly '--wzl-stance-aside-surface': "transparent";
847
+ readonly '--wzl-line-subtle': "rgba(14, 15, 18, 0.1)";
848
+ readonly '--wzl-stance-aside-border-color': "rgba(14, 15, 18, 0.1)";
849
+ readonly '--wzl-stance-aside-blur': "0px";
850
+ readonly '--wzl-stance-aside-title-color': "#4d5058";
851
+ readonly '--wzl-stance-advanced-title-color': "#4d5058";
852
+ readonly '--wzl-stance-debug-border-style': "dashed";
853
+ readonly '--wzl-font-mono': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
854
+ readonly '--wzl-stance-debug-title-font': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
855
+ readonly '--wzl-stance-debug-title-case': "none";
558
856
  readonly '--wzl-danger-base': "#d94a3f";
857
+ readonly '--wzl-danger': "#d94a3f";
858
+ readonly '--wzl-stance-danger-tone': "#d94a3f";
859
+ readonly '--wzl-stance-danger-border-color': "#d94a3f";
860
+ readonly '--wzl-stance-danger-title-color': "#d94a3f";
861
+ readonly '--wzl-accent': "#2e1f7a";
862
+ readonly '--wzl-stance-notice-tone': "#2e1f7a";
863
+ readonly '--wzl-stance-notice-tone-mix': "8%";
864
+ readonly '--wzl-stance-important-border-color': "#2e1f7a";
865
+ readonly '--wzl-stance-important-title-color': "#2e1f7a";
866
+ readonly '--wzl-stance-preview-pad': "0";
867
+ readonly '--wzl-stance-preview-title-size': "10px";
868
+ readonly '--wzl-stance-preview-title-case': "none";
869
+ readonly '--wzl-stance-preview-title-inset': "6px 10px 0";
559
870
  readonly '--wzl-warning-base': "#d99a3f";
560
871
  readonly '--wzl-success-base': "#2ec27e";
561
872
  readonly '--wzl-fg-on-accent': "#f5f5f6";
562
- readonly '--wzl-line-subtle': "rgba(14, 15, 18, 0.1)";
563
873
  readonly '--wzl-line': "rgba(14, 15, 18, 0.2)";
564
874
  readonly '--wzl-line-strong': "rgba(14, 15, 18, 0.4)";
565
875
  readonly '--wzl-curve-color': "#5841b8";
566
- readonly '--wzl-accent': "#2e1f7a";
567
876
  readonly '--wzl-accent-hover': "#5841b8";
568
- readonly '--wzl-danger': "#d94a3f";
877
+ readonly '--wzl-secondary': "#3ee1cb";
569
878
  readonly '--wzl-warning': "#d99a3f";
570
879
  readonly '--wzl-success': "#2ec27e";
571
880
  readonly '--wzl-focus-ring': "#5841b8";
@@ -574,7 +883,6 @@ declare const THEMES: {
574
883
  readonly '--wzl-surface-pressed': "rgba(14, 15, 18, 0.18)";
575
884
  readonly '--wzl-radius-sm': "3px";
576
885
  readonly '--wzl-radius-md': "5px";
577
- readonly '--wzl-radius-lg': "14px";
578
886
  readonly '--wzl-radius-pill': "999px";
579
887
  readonly '--wzl-border-w': "1px";
580
888
  readonly '--wzl-line-width': "2px";
@@ -591,8 +899,12 @@ declare const THEMES: {
591
899
  readonly '--wzl-handle-size': "9px";
592
900
  readonly '--wzl-handle-size-sm': "7px";
593
901
  readonly '--wzl-handle-size-lg': "10px";
902
+ readonly '--wzl-checker-a': "#c9cbcf";
903
+ readonly '--wzl-checker-b': "#f5f5f6";
904
+ readonly '--wzl-checker-size': "8px";
905
+ readonly '--wzl-workspace-surface': "#c9cbcf";
906
+ readonly '--wzl-workspace-line': "rgba(14, 15, 18, 0.1)";
594
907
  readonly '--wzl-field-pad-x': "8px";
595
- readonly '--wzl-glass-blur': "3px";
596
908
  readonly '--wzl-font-size': "13px";
597
909
  readonly '--wzl-tracking-none': "0";
598
910
  readonly '--wzl-tracking-wide': "0.06em";
@@ -611,10 +923,7 @@ declare const THEMES: {
611
923
  readonly '--wzl-ease-in-out-cubic': "cubic-bezier(0.65, 0, 0.35, 1)";
612
924
  readonly '--wzl-ease-out-back': "cubic-bezier(0.34, 1.56, 0.64, 1)";
613
925
  readonly '--wzl-font-ui': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
614
- readonly '--wzl-font-display': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
615
926
  readonly '--wzl-font-body': "Inter, system-ui, -apple-system, 'Segoe UI', sans-serif";
616
- readonly '--wzl-font-mono': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
617
- readonly '--wzl-font-weight-light': "200";
618
927
  readonly '--wzl-font-weight-normal': "300";
619
928
  readonly '--wzl-font-weight-medium': "350";
620
929
  readonly '--wzl-font-weight-bold': "400";
@@ -637,6 +946,9 @@ declare const THEMES: {
637
946
  readonly '--wzl-accent-soft': "#1d1454";
638
947
  readonly '--wzl-accent-base': "#2e1f7a";
639
948
  readonly '--wzl-accent-strong': "#5841b8";
949
+ readonly '--wzl-secondary-soft': "#016458";
950
+ readonly '--wzl-secondary-base': "#3ee1cb";
951
+ readonly '--wzl-secondary-strong': "#94e3d5";
640
952
  readonly '--wzl-swatch-fuchsia': "#f641f7";
641
953
  readonly '--wzl-swatch-green': "#48e628";
642
954
  readonly '--wzl-swatch-sky': "#36bff2";
@@ -670,19 +982,65 @@ declare const THEMES: {
670
982
  readonly '--wzl-border': "#c9cbcf";
671
983
  readonly '--wzl-border-strong': "#4d5058";
672
984
  readonly '--wzl-accent-fg': "#2e1f7a";
985
+ readonly '--wzl-secondary-fg': "#016458";
673
986
  readonly '--wzl-fg-inverse': "#f5f5f6";
674
987
  readonly '--wzl-shadow': "rgba(0, 0, 0, 0.18)";
988
+ readonly '--wzl-panel-surface': "#e6e7e9";
989
+ readonly '--wzl-panel-border-color': "#c9cbcf";
990
+ readonly '--wzl-panel-border-style': "solid";
991
+ readonly '--wzl-panel-border-width': "1px";
992
+ readonly '--wzl-radius-lg': "14px";
993
+ readonly '--wzl-panel-radius': "14px";
994
+ readonly '--wzl-panel-pad': "14px 16px";
995
+ readonly '--wzl-glass-blur': "3px";
996
+ readonly '--wzl-panel-blur': "3px";
997
+ readonly '--wzl-panel-tone-mix': "14%";
998
+ readonly '--wzl-font-display': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
999
+ readonly '--wzl-panel-title-font': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
1000
+ readonly '--wzl-font-weight-light': "200";
1001
+ readonly '--wzl-panel-title-weight': "200";
1002
+ readonly '--wzl-panel-title-size': "18px";
1003
+ readonly '--wzl-panel-title-case': "none";
1004
+ readonly '--wzl-panel-title-tracking': "0.01em";
1005
+ readonly '--wzl-panel-title-color': "#0e0f12";
1006
+ readonly '--wzl-panel-title-inset': "0";
1007
+ readonly '--wzl-stance-scope-border-width': "0";
1008
+ readonly '--wzl-stance-scope-radius': "8px";
1009
+ readonly '--wzl-stance-scope-tone-mix': "22%";
1010
+ readonly '--wzl-stance-scope-nested-radius': "6px";
1011
+ readonly '--wzl-stance-scope-nested-surface': "#f5f5f6";
1012
+ readonly '--wzl-stance-aside-surface': "transparent";
1013
+ readonly '--wzl-line-subtle': "rgba(14, 15, 18, 0.1)";
1014
+ readonly '--wzl-stance-aside-border-color': "rgba(14, 15, 18, 0.1)";
1015
+ readonly '--wzl-stance-aside-blur': "0px";
1016
+ readonly '--wzl-stance-aside-title-color': "#4d5058";
1017
+ readonly '--wzl-stance-advanced-title-color': "#4d5058";
1018
+ readonly '--wzl-stance-debug-border-style': "dashed";
1019
+ readonly '--wzl-font-mono': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
1020
+ readonly '--wzl-stance-debug-title-font': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
1021
+ readonly '--wzl-stance-debug-title-case': "none";
675
1022
  readonly '--wzl-danger-base': "#d94a3f";
1023
+ readonly '--wzl-danger': "#d94a3f";
1024
+ readonly '--wzl-stance-danger-tone': "#d94a3f";
1025
+ readonly '--wzl-stance-danger-border-color': "#d94a3f";
1026
+ readonly '--wzl-stance-danger-title-color': "#d94a3f";
1027
+ readonly '--wzl-accent': "#2e1f7a";
1028
+ readonly '--wzl-stance-notice-tone': "#2e1f7a";
1029
+ readonly '--wzl-stance-notice-tone-mix': "8%";
1030
+ readonly '--wzl-stance-important-border-color': "#2e1f7a";
1031
+ readonly '--wzl-stance-important-title-color': "#2e1f7a";
1032
+ readonly '--wzl-stance-preview-pad': "0";
1033
+ readonly '--wzl-stance-preview-title-size': "12px";
1034
+ readonly '--wzl-stance-preview-title-case': "none";
1035
+ readonly '--wzl-stance-preview-title-inset': "6px 10px 0";
676
1036
  readonly '--wzl-warning-base': "#d99a3f";
677
1037
  readonly '--wzl-success-base': "#2ec27e";
678
1038
  readonly '--wzl-fg-on-accent': "#f5f5f6";
679
- readonly '--wzl-line-subtle': "rgba(14, 15, 18, 0.1)";
680
1039
  readonly '--wzl-line': "rgba(14, 15, 18, 0.2)";
681
1040
  readonly '--wzl-line-strong': "rgba(14, 15, 18, 0.4)";
682
1041
  readonly '--wzl-curve-color': "#5841b8";
683
- readonly '--wzl-accent': "#2e1f7a";
684
1042
  readonly '--wzl-accent-hover': "#5841b8";
685
- readonly '--wzl-danger': "#d94a3f";
1043
+ readonly '--wzl-secondary': "#3ee1cb";
686
1044
  readonly '--wzl-warning': "#d99a3f";
687
1045
  readonly '--wzl-success': "#2ec27e";
688
1046
  readonly '--wzl-focus-ring': "#5841b8";
@@ -691,7 +1049,6 @@ declare const THEMES: {
691
1049
  readonly '--wzl-surface-pressed': "rgba(14, 15, 18, 0.18)";
692
1050
  readonly '--wzl-radius-sm': "3px";
693
1051
  readonly '--wzl-radius-md': "5px";
694
- readonly '--wzl-radius-lg': "14px";
695
1052
  readonly '--wzl-radius-pill': "999px";
696
1053
  readonly '--wzl-border-w': "1px";
697
1054
  readonly '--wzl-line-width': "2px";
@@ -708,8 +1065,12 @@ declare const THEMES: {
708
1065
  readonly '--wzl-handle-size': "9px";
709
1066
  readonly '--wzl-handle-size-sm': "7px";
710
1067
  readonly '--wzl-handle-size-lg': "10px";
1068
+ readonly '--wzl-checker-a': "#c9cbcf";
1069
+ readonly '--wzl-checker-b': "#f5f5f6";
1070
+ readonly '--wzl-checker-size': "8px";
1071
+ readonly '--wzl-workspace-surface': "#c9cbcf";
1072
+ readonly '--wzl-workspace-line': "rgba(14, 15, 18, 0.1)";
711
1073
  readonly '--wzl-field-pad-x': "8px";
712
- readonly '--wzl-glass-blur': "3px";
713
1074
  readonly '--wzl-font-size': "15px";
714
1075
  readonly '--wzl-tracking-none': "0";
715
1076
  readonly '--wzl-tracking-wide': "0.06em";
@@ -728,10 +1089,7 @@ declare const THEMES: {
728
1089
  readonly '--wzl-ease-in-out-cubic': "cubic-bezier(0.65, 0, 0.35, 1)";
729
1090
  readonly '--wzl-ease-out-back': "cubic-bezier(0.34, 1.56, 0.64, 1)";
730
1091
  readonly '--wzl-font-ui': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
731
- readonly '--wzl-font-display': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
732
1092
  readonly '--wzl-font-body': "Inter, system-ui, -apple-system, 'Segoe UI', sans-serif";
733
- readonly '--wzl-font-mono': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
734
- readonly '--wzl-font-weight-light': "200";
735
1093
  readonly '--wzl-font-weight-normal': "300";
736
1094
  readonly '--wzl-font-weight-medium': "350";
737
1095
  readonly '--wzl-font-weight-bold': "400";
@@ -749,6 +1107,34 @@ declare const THEME_SOURCES: Readonly<Record<string, ThemeDefinition>>;
749
1107
  * what `weaselTheme` is built from, so the runtime entry bundles no generator. */
750
1108
  declare const BAKED_THEMES: Readonly<Record<string, BakedTheme>>;
751
1109
 
1110
+ /**
1111
+ * A theme ready to resolve: its axes and its tokens, each plain or varying by
1112
+ * axis, references intact. A `by` that leaves a value out contributes nothing
1113
+ * for that selection, so the theme it extends supplies it.
1114
+ */
1115
+ interface Theme {
1116
+ readonly name: string;
1117
+ readonly extends: Theme | null;
1118
+ readonly axes: AxisDefs;
1119
+ readonly tokens: Readonly<Record<string, Varying<RawToken>>>;
1120
+ /** Ramp name → step names in order, for the ramps this theme declares itself. */
1121
+ readonly ramps?: Readonly<Record<string, readonly string[]>>;
1122
+ /** The colors a `tone` index picks from. Absent: the nearest theme it extends that has one. */
1123
+ readonly tones?: SerializableColorList;
1124
+ }
1125
+ /** What `defineTheme` accepts: a definition whose `extends` is a `Theme`, holding pins and components only. */
1126
+ type ThemeInput = Omit<ThemeDefinition, 'extends'> & {
1127
+ readonly extends?: Theme | null;
1128
+ };
1129
+ /** The built-in theme, from the baked output of themes/weasel.json. */
1130
+ declare const weaselTheme: Theme;
1131
+ /**
1132
+ * Build a theme from pins. Unless `extends` says otherwise the result layers
1133
+ * onto `weaselTheme`, so a theme only names what it changes. A definition with
1134
+ * seeds, ramps, scales or semantics needs deriving first.
1135
+ */
1136
+ declare function defineTheme(input: ThemeInput): Theme;
1137
+
752
1138
  /** The output of `resolveTheme`: every token of a theme, for one selection, keyed
753
1139
  * by CSS custom-property name and flattened to a final CSS value. */
754
1140
  type ResolvedTheme = Readonly<Record<TokenName, string>>;
@@ -763,4 +1149,151 @@ declare function themeAxes(theme: Theme): AxisDefs;
763
1149
  */
764
1150
  declare function resolveTheme(theme: Theme, selection?: Selection): ResolvedTheme;
765
1151
 
766
- export { BAKED_THEMES as B, type GeneratedTheme as G, type ResolvedTheme as R, type TokenName as T, THEMES as a, THEME_SOURCES as b, resolveTheme as r, themeAxes as t };
1152
+ /** The categorical generator the swatch ramp uses, asked for `count` colors. */
1153
+ interface GeneratedColors {
1154
+ readonly generate: {
1155
+ readonly count: number;
1156
+ readonly gates?: CategoricalRampDef['gates'];
1157
+ };
1158
+ }
1159
+ /** A ramp of the active theme, by name — `{ ramp: 'swatch' }` walks its steps in order. */
1160
+ interface RampColors {
1161
+ readonly ramp: string;
1162
+ }
1163
+ /** The forms a theme definition can hold: everything but a function. */
1164
+ type SerializableColorList = readonly string[] | GeneratedColors | RampColors;
1165
+ /**
1166
+ * Several colors, read by index with `colorAt`, wrapping. Literals; the swatch
1167
+ * ramp's generator; a ramp of the active theme, which follows the mode; or a
1168
+ * function of the index.
1169
+ */
1170
+ type ColorList = SerializableColorList | ((i: number) => string);
1171
+ /** What a `ColorList` resolves against. `useTheme()`'s value is one. */
1172
+ interface ColorContext {
1173
+ readonly theme: Theme;
1174
+ readonly resolved: ResolvedTheme;
1175
+ }
1176
+ /** A ramp's step names, from the nearest theme in the chain that declares it. */
1177
+ declare function rampSteps(theme: Theme, ramp: string): readonly string[];
1178
+ /** The tone list a theme declares, from the nearest theme in its chain that has one. */
1179
+ declare function themeTones(theme: Theme): ColorList;
1180
+ /** The `i`th color of `list`, wrapping. A ramp list reads the resolved theme, so the answer follows its mode. */
1181
+ declare function colorAt(list: ColorList, i: number, ctx?: ColorContext): string;
1182
+ /**
1183
+ * As `colorAt`, but a ramp list answers with its custom property —
1184
+ * `var(--wzl-swatch-sky)` — so a color written into CSS follows a mode change
1185
+ * without re-rendering, provider or not.
1186
+ */
1187
+ declare function colorCssAt(list: ColorList, i: number, ctx?: ColorContext): string;
1188
+ /** How many distinct colors `list` holds before it wraps; `undefined` for a function, which never does. */
1189
+ declare function colorCount(list: ColorList, ctx?: ColorContext): number | undefined;
1190
+
1191
+ /** A number, or `{seeds.name}`. */
1192
+ type NumberParam = Varying<number | string>;
1193
+ interface PinObject {
1194
+ readonly value: TokenValue;
1195
+ readonly type?: string;
1196
+ readonly description?: string;
1197
+ readonly alpha?: number;
1198
+ }
1199
+ /** A bare value or `{ value, type?, description?, alpha? }`. The value may be a `{token}` reference. */
1200
+ type PinValue = TokenValue | PinObject;
1201
+ interface LightnessRampDef {
1202
+ readonly kind: 'lightness';
1203
+ readonly steps: Varying<readonly string[]>;
1204
+ /** First and last step's OKLCH lightness. */
1205
+ readonly lightness: Varying<readonly [NumberParam, NumberParam]>;
1206
+ /** 0 walks evenly; 1 follows a smoothstep S. */
1207
+ readonly curve?: NumberParam;
1208
+ /** Degrees. Ignored when an anchor is given. */
1209
+ readonly hue?: NumberParam;
1210
+ readonly chroma?: Varying<{
1211
+ readonly peak: NumberParam;
1212
+ readonly lightBias?: NumberParam;
1213
+ readonly darkBias?: NumberParam;
1214
+ }>;
1215
+ /**
1216
+ * Step name → exact hex (or `{seeds.name}`). An anchor's hue and chroma replace `hue` and `chroma.peak`; with several,
1217
+ * both blend by step between consecutive anchors, and steps outside them take the nearest anchor's.
1218
+ */
1219
+ readonly anchor?: Varying<Readonly<Record<string, Varying<string>>>>;
1220
+ readonly description?: string;
1221
+ readonly describe?: Readonly<Record<string, string>>;
1222
+ }
1223
+ interface CategoricalRampDef {
1224
+ readonly kind: 'categorical';
1225
+ readonly steps: Varying<readonly string[]>;
1226
+ /** Any of the palette generator's `Constraints` except `count` and `anchors`. */
1227
+ readonly gates?: Varying<Readonly<Record<string, Varying<number | string>>>>;
1228
+ readonly anchors?: readonly {
1229
+ readonly name: string;
1230
+ readonly hue: number;
1231
+ readonly lightness: number;
1232
+ readonly chroma?: number;
1233
+ }[];
1234
+ readonly description?: string;
1235
+ readonly describe?: Readonly<Record<string, string>>;
1236
+ }
1237
+ type RampDef = LightnessRampDef | CategoricalRampDef;
1238
+ interface ScaleDef {
1239
+ readonly steps: Varying<readonly string[]>;
1240
+ readonly base: NumberParam;
1241
+ /** Linear: `base + step × i`. */
1242
+ readonly step?: NumberParam;
1243
+ /** Geometric: `base × ratio^i`. */
1244
+ readonly ratio?: NumberParam;
1245
+ /** Explicit: `base × factors[i]`, one per step. For a ramp no single rule fits. */
1246
+ readonly factors?: Varying<readonly NumberParam[]>;
1247
+ readonly description?: string;
1248
+ readonly describe?: Readonly<Record<string, string>>;
1249
+ }
1250
+ interface SemanticCommon {
1251
+ readonly type?: string;
1252
+ readonly description?: string;
1253
+ /** Audited, never applied. */
1254
+ readonly check?: {
1255
+ readonly contrast: number;
1256
+ readonly against: readonly string[];
1257
+ };
1258
+ }
1259
+ type StepRule = SemanticCommon & {
1260
+ readonly ramp: string;
1261
+ readonly step: Varying<string>;
1262
+ };
1263
+ type OffsetRule = SemanticCommon & {
1264
+ readonly from: string;
1265
+ readonly offset: number;
1266
+ readonly dir: 'lighter' | 'darker' | 'away';
1267
+ };
1268
+ type ContrastRule = SemanticCommon & {
1269
+ readonly ramp: string;
1270
+ readonly contrast: {
1271
+ readonly min: number;
1272
+ readonly against: readonly string[];
1273
+ };
1274
+ };
1275
+ type RefRule = SemanticCommon & {
1276
+ readonly ref: string;
1277
+ readonly alpha?: number;
1278
+ };
1279
+ type LiteralRule = SemanticCommon & {
1280
+ readonly value: TokenValue;
1281
+ };
1282
+ type SemanticRule = StepRule | OffsetRule | ContrastRule | RefRule | LiteralRule;
1283
+ interface ThemeDefinition {
1284
+ readonly name: string;
1285
+ /** Another definition's name. Absent or null: extends nothing. */
1286
+ readonly extends?: string | null;
1287
+ readonly description?: string;
1288
+ readonly axes?: AxisDefs;
1289
+ readonly seeds?: Readonly<Record<string, Varying<number | string>>>;
1290
+ readonly ramps?: Readonly<Record<string, RampDef>>;
1291
+ readonly scales?: Readonly<Record<string, ScaleDef>>;
1292
+ readonly semantics?: Readonly<Record<string, Varying<SemanticRule>>>;
1293
+ readonly components?: Readonly<Record<string, Varying<PinValue>>>;
1294
+ readonly pins?: Readonly<Record<string, Varying<PinValue>>>;
1295
+ /** The colors a `tone` index picks from. Absent: the nearest theme it extends that has one, else the swatch ramp. */
1296
+ readonly tones?: SerializableColorList;
1297
+ }
1298
+
1299
+ 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 };