@weasel-js/theme 1.9.4 → 1.10.0
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.
- package/README.md +44 -4
- package/dist/{chunk-7LCRXZDY.js → chunk-2PY2YTDY.js} +5 -54
- package/dist/chunk-2PY2YTDY.js.map +1 -0
- package/dist/chunk-3NIEJ77B.js +245 -0
- package/dist/chunk-3NIEJ77B.js.map +1 -0
- package/dist/{chunk-EFGZ56CE.js → chunk-JX2OC444.js} +169 -159
- package/dist/chunk-JX2OC444.js.map +1 -0
- package/dist/chunk-P5F3GZV6.js +54 -0
- package/dist/chunk-P5F3GZV6.js.map +1 -0
- package/dist/{definition-GS7_Kz9D.d.ts → definition-CSeERbSL.d.ts} +79 -21
- package/dist/engine.d.ts +11 -15
- package/dist/engine.js +153 -2
- package/dist/engine.js.map +1 -1
- package/dist/index.d.ts +38 -3
- package/dist/index.js +46 -25
- package/dist/index.js.map +1 -1
- package/dist/react.d.ts +15 -4
- package/dist/react.js +16 -7
- package/dist/react.js.map +1 -1
- package/dist/themes/platinum.d.ts +22 -0
- package/dist/themes/platinum.js +802 -0
- package/dist/themes/platinum.js.map +1 -0
- package/dist/themes/win9x.d.ts +16 -0
- package/dist/themes/win9x.js +788 -0
- package/dist/themes/win9x.js.map +1 -0
- package/dist/tokens.css +24 -1
- package/package.json +11 -3
- package/dist/chunk-7LCRXZDY.js.map +0 -1
- package/dist/chunk-EFGZ56CE.js.map +0 -1
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { isPlainObject } from '@weasel-js/registry';
|
|
2
|
+
|
|
3
|
+
// src/axes.ts
|
|
4
|
+
function isByAxis(v) {
|
|
5
|
+
return isPlainObject(v) && typeof v.by === "string";
|
|
6
|
+
}
|
|
7
|
+
function fullSelection(axes, selection = {}) {
|
|
8
|
+
const out = {};
|
|
9
|
+
for (const [name, def] of Object.entries(axes)) {
|
|
10
|
+
const v = selection[name];
|
|
11
|
+
out[name] = v !== void 0 && v in def.values ? v : def.default;
|
|
12
|
+
}
|
|
13
|
+
return out;
|
|
14
|
+
}
|
|
15
|
+
function mergeAxes(parent, child) {
|
|
16
|
+
const out = { ...parent };
|
|
17
|
+
for (const [name, def] of Object.entries(child)) {
|
|
18
|
+
out[name] = { ...def, values: { ...parent[name]?.values, ...def.values } };
|
|
19
|
+
}
|
|
20
|
+
return out;
|
|
21
|
+
}
|
|
22
|
+
function enumerateSelections(axes) {
|
|
23
|
+
let out = [{}];
|
|
24
|
+
for (const [name, def] of Object.entries(axes)) {
|
|
25
|
+
out = out.flatMap((s) => Object.keys(def.values).map((v) => ({ ...s, [name]: v })));
|
|
26
|
+
}
|
|
27
|
+
return out;
|
|
28
|
+
}
|
|
29
|
+
function selectionKey(axes, selection) {
|
|
30
|
+
const full = fullSelection(axes, selection);
|
|
31
|
+
return Object.keys(axes).map((a) => `${a}=${full[a]}`).join(",");
|
|
32
|
+
}
|
|
33
|
+
function pick(v, selection) {
|
|
34
|
+
let cur = v;
|
|
35
|
+
while (isByAxis(cur)) {
|
|
36
|
+
const axis = cur.by;
|
|
37
|
+
const value = selection[axis];
|
|
38
|
+
if (value === void 0 || value === "by" || !(value in cur)) return { ok: false, axis, value: value ?? "" };
|
|
39
|
+
cur = cur[value];
|
|
40
|
+
}
|
|
41
|
+
return { ok: true, value: cur };
|
|
42
|
+
}
|
|
43
|
+
function pickAll(record, selection) {
|
|
44
|
+
const out = {};
|
|
45
|
+
for (const [name, v] of Object.entries(record)) {
|
|
46
|
+
const picked = pick(v, selection);
|
|
47
|
+
if (picked.ok) out[name] = picked.value;
|
|
48
|
+
}
|
|
49
|
+
return out;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
export { enumerateSelections, fullSelection, isByAxis, mergeAxes, pick, pickAll, selectionKey };
|
|
53
|
+
//# sourceMappingURL=chunk-P5F3GZV6.js.map
|
|
54
|
+
//# sourceMappingURL=chunk-P5F3GZV6.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/axes.ts"],"names":[],"mappings":"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","file":"chunk-P5F3GZV6.js","sourcesContent":["import { isPlainObject } from '@weasel-js/registry';\n\n/** One value of an axis. `scheme` becomes `color-scheme` in that value's CSS blocks. */\nexport interface AxisValue {\n readonly scheme?: 'dark' | 'light';\n}\n\n/** One variant dimension of a theme, such as `mode` or `density`. `default` must name one of `values`. */\nexport interface AxisDef {\n readonly default: string;\n readonly values: Readonly<Record<string, AxisValue>>;\n}\n\n/** Key order is declaration order, which selectors and selection keys follow. */\nexport type AxisDefs = Readonly<Record<string, AxisDef>>;\n\n/** A partial choice of axis values, e.g. `{ mode: 'light' }`. */\nexport type Selection = Readonly<Record<string, string>>;\n\n/** `{ by: 'mode', dark: …, light: … }`: a value that differs per axis value. */\nexport interface ByAxis<T> {\n readonly by: string;\n readonly [axisValue: string]: Varying<T> | string;\n}\n\n/** A value that is either the same everywhere or chosen per axis value. */\nexport type Varying<T> = T | ByAxis<T>;\n\nexport type Picked<T> = { ok: true; value: T } | { ok: false; axis: string; value: string };\n\n/** Whether `v` is a {@link ByAxis} value. */\nexport function isByAxis(v: unknown): v is ByAxis<unknown> {\n return isPlainObject(v) && typeof v.by === 'string';\n}\n\n/** Every axis given a known value; anything missing or unknown takes its default. */\nexport function fullSelection(axes: AxisDefs, selection: Selection = {}): Selection {\n const out: Record<string, string> = {};\n for (const [name, def] of Object.entries(axes)) {\n const v = selection[name];\n out[name] = v !== undefined && v in def.values ? v : def.default;\n }\n return out;\n}\n\n/** A child's axes over its parent's: an axis both declare keeps both sets of values, the child's entries and default winning. */\nexport function mergeAxes(parent: AxisDefs, child: AxisDefs): AxisDefs {\n const out: Record<string, AxisDef> = { ...parent };\n for (const [name, def] of Object.entries(child)) {\n out[name] = { ...def, values: { ...parent[name]?.values, ...def.values } };\n }\n return out;\n}\n\n/** Every full combination of axis values, the first axis varying slowest. */\nexport function enumerateSelections(axes: AxisDefs): Selection[] {\n let out: Record<string, string>[] = [{}];\n for (const [name, def] of Object.entries(axes)) {\n out = out.flatMap((s) => Object.keys(def.values).map((v) => ({ ...s, [name]: v })));\n }\n return out;\n}\n\n/** `mode=dark,density=compact`, axes in declaration order. */\nexport function selectionKey(axes: AxisDefs, selection: Selection): string {\n const full = fullSelection(axes, selection);\n return Object.keys(axes).map((a) => `${a}=${full[a]}`).join(',');\n}\n\nexport function pick<T>(v: Varying<T>, selection: Selection): Picked<T> {\n let cur: unknown = v;\n while (isByAxis(cur)) {\n const axis = cur.by;\n const value = selection[axis];\n if (value === undefined || value === 'by' || !(value in cur)) return { ok: false, axis, value: value ?? '' };\n cur = cur[value];\n }\n return { ok: true, value: cur as T };\n}\n\n/** Every entry of a varying record that has a value for this selection, in record order. */\nexport function pickAll<T>(record: Readonly<Record<string, Varying<T>>>, selection: Selection): Record<string, T> {\n const out: Record<string, T> = {};\n for (const [name, v] of Object.entries(record)) {\n const picked = pick(v, selection);\n if (picked.ok) out[name] = picked.value;\n }\n return out;\n}\n"]}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { ColorLiteral, ColorRef, ColorSource, Palette } from '@weasel-js/paint';
|
|
2
|
+
|
|
1
3
|
/** One value of an axis. `scheme` becomes `color-scheme` in that value's CSS blocks. */
|
|
2
4
|
interface AxisValue {
|
|
3
5
|
readonly scheme?: 'dark' | 'light';
|
|
@@ -72,7 +74,7 @@ declare function bakeChain(definition: ThemeDefinition, lookup?: Lookup): BakedT
|
|
|
72
74
|
|
|
73
75
|
/** Every design token the built-in themes declare, spelled as the CSS
|
|
74
76
|
* custom property it becomes. */
|
|
75
|
-
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';
|
|
77
|
+
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';
|
|
76
78
|
/** A built-in theme with its aliases already collapsed: every selection
|
|
77
79
|
* (keyed `mode=dark`, axes in declaration order) maps every token name to
|
|
78
80
|
* a final CSS value. */
|
|
@@ -164,6 +166,7 @@ declare const THEMES: {
|
|
|
164
166
|
readonly '--wzl-secondary-fg': "#dc9d15";
|
|
165
167
|
readonly '--wzl-fg-inverse': "#0e0f12";
|
|
166
168
|
readonly '--wzl-shadow': "rgba(0, 0, 0, 0.6)";
|
|
169
|
+
readonly '--wzl-scrim': "rgba(0, 0, 0, 0.4)";
|
|
167
170
|
readonly '--wzl-code-keyword': "#955cf9";
|
|
168
171
|
readonly '--wzl-code-string': "#48e628";
|
|
169
172
|
readonly '--wzl-code-number': "#e69628";
|
|
@@ -223,6 +226,7 @@ declare const THEMES: {
|
|
|
223
226
|
readonly '--wzl-fg-on-accent': "#f5f5f6";
|
|
224
227
|
readonly '--wzl-line': "rgba(230, 231, 233, 0.2)";
|
|
225
228
|
readonly '--wzl-line-strong': "rgba(230, 231, 233, 0.4)";
|
|
229
|
+
readonly '--wzl-border-on-sunken': "rgba(230, 231, 233, 0.12)";
|
|
226
230
|
readonly '--wzl-curve-color': "#8c94ee";
|
|
227
231
|
readonly '--wzl-accent-hover': "#8c94ee";
|
|
228
232
|
readonly '--wzl-secondary': "#dc9d15";
|
|
@@ -252,19 +256,26 @@ declare const THEMES: {
|
|
|
252
256
|
readonly '--wzl-handle-size': "9px";
|
|
253
257
|
readonly '--wzl-handle-size-sm': "7px";
|
|
254
258
|
readonly '--wzl-handle-size-lg': "10px";
|
|
259
|
+
readonly '--wzl-handle-dot-size': "8px";
|
|
260
|
+
readonly '--wzl-handle-dot-size-sm': "7px";
|
|
255
261
|
readonly '--wzl-checker-a': "#25272c";
|
|
256
262
|
readonly '--wzl-checker-b': "#181a1e";
|
|
257
263
|
readonly '--wzl-checker-size': "8px";
|
|
258
264
|
readonly '--wzl-workspace-surface': "#0e0f12";
|
|
259
265
|
readonly '--wzl-workspace-line': "rgba(230, 231, 233, 0.1)";
|
|
260
266
|
readonly '--wzl-field-pad-x': "8px";
|
|
267
|
+
readonly '--wzl-gloss': "0";
|
|
261
268
|
readonly '--wzl-font-size': "13px";
|
|
262
269
|
readonly '--wzl-tracking-none': "0";
|
|
263
270
|
readonly '--wzl-tracking-wide': "0.06em";
|
|
264
271
|
readonly '--wzl-tracking-wider': "0.08em";
|
|
265
272
|
readonly '--wzl-z-toolbar': "10";
|
|
266
273
|
readonly '--wzl-z-overlay': "20";
|
|
267
|
-
readonly '--wzl-z-
|
|
274
|
+
readonly '--wzl-z-hud': "900";
|
|
275
|
+
readonly '--wzl-z-modal': "1000";
|
|
276
|
+
readonly '--wzl-z-toast': "1100";
|
|
277
|
+
readonly '--wzl-z-popover': "1200";
|
|
278
|
+
readonly '--wzl-z-drag': "10000";
|
|
268
279
|
readonly '--wzl-leading-tight': "1";
|
|
269
280
|
readonly '--wzl-leading-snug': "1.2";
|
|
270
281
|
readonly '--wzl-leading': "1.4";
|
|
@@ -342,6 +353,7 @@ declare const THEMES: {
|
|
|
342
353
|
readonly '--wzl-secondary-fg': "#dc9d15";
|
|
343
354
|
readonly '--wzl-fg-inverse': "#0e0f12";
|
|
344
355
|
readonly '--wzl-shadow': "rgba(0, 0, 0, 0.6)";
|
|
356
|
+
readonly '--wzl-scrim': "rgba(0, 0, 0, 0.4)";
|
|
345
357
|
readonly '--wzl-code-keyword': "#955cf9";
|
|
346
358
|
readonly '--wzl-code-string': "#48e628";
|
|
347
359
|
readonly '--wzl-code-number': "#e69628";
|
|
@@ -401,6 +413,7 @@ declare const THEMES: {
|
|
|
401
413
|
readonly '--wzl-fg-on-accent': "#f5f5f6";
|
|
402
414
|
readonly '--wzl-line': "rgba(230, 231, 233, 0.2)";
|
|
403
415
|
readonly '--wzl-line-strong': "rgba(230, 231, 233, 0.4)";
|
|
416
|
+
readonly '--wzl-border-on-sunken': "rgba(230, 231, 233, 0.12)";
|
|
404
417
|
readonly '--wzl-curve-color': "#8c94ee";
|
|
405
418
|
readonly '--wzl-accent-hover': "#8c94ee";
|
|
406
419
|
readonly '--wzl-secondary': "#dc9d15";
|
|
@@ -430,19 +443,26 @@ declare const THEMES: {
|
|
|
430
443
|
readonly '--wzl-handle-size': "9px";
|
|
431
444
|
readonly '--wzl-handle-size-sm': "7px";
|
|
432
445
|
readonly '--wzl-handle-size-lg': "10px";
|
|
446
|
+
readonly '--wzl-handle-dot-size': "8px";
|
|
447
|
+
readonly '--wzl-handle-dot-size-sm': "7px";
|
|
433
448
|
readonly '--wzl-checker-a': "#25272c";
|
|
434
449
|
readonly '--wzl-checker-b': "#181a1e";
|
|
435
450
|
readonly '--wzl-checker-size': "8px";
|
|
436
451
|
readonly '--wzl-workspace-surface': "#0e0f12";
|
|
437
452
|
readonly '--wzl-workspace-line': "rgba(230, 231, 233, 0.1)";
|
|
438
453
|
readonly '--wzl-field-pad-x': "8px";
|
|
454
|
+
readonly '--wzl-gloss': "0";
|
|
439
455
|
readonly '--wzl-font-size': "15px";
|
|
440
456
|
readonly '--wzl-tracking-none': "0";
|
|
441
457
|
readonly '--wzl-tracking-wide': "0.06em";
|
|
442
458
|
readonly '--wzl-tracking-wider': "0.08em";
|
|
443
459
|
readonly '--wzl-z-toolbar': "10";
|
|
444
460
|
readonly '--wzl-z-overlay': "20";
|
|
445
|
-
readonly '--wzl-z-
|
|
461
|
+
readonly '--wzl-z-hud': "900";
|
|
462
|
+
readonly '--wzl-z-modal': "1000";
|
|
463
|
+
readonly '--wzl-z-toast': "1100";
|
|
464
|
+
readonly '--wzl-z-popover': "1200";
|
|
465
|
+
readonly '--wzl-z-drag': "10000";
|
|
446
466
|
readonly '--wzl-leading-tight': "1";
|
|
447
467
|
readonly '--wzl-leading-snug': "1.2";
|
|
448
468
|
readonly '--wzl-leading': "1.4";
|
|
@@ -520,6 +540,7 @@ declare const THEMES: {
|
|
|
520
540
|
readonly '--wzl-secondary-fg': "#dc9d15";
|
|
521
541
|
readonly '--wzl-fg-inverse': "#0e0f12";
|
|
522
542
|
readonly '--wzl-shadow': "rgba(0, 0, 0, 0.6)";
|
|
543
|
+
readonly '--wzl-scrim': "rgba(0, 0, 0, 0.4)";
|
|
523
544
|
readonly '--wzl-code-keyword': "#955cf9";
|
|
524
545
|
readonly '--wzl-code-string': "#48e628";
|
|
525
546
|
readonly '--wzl-code-number': "#e69628";
|
|
@@ -579,6 +600,7 @@ declare const THEMES: {
|
|
|
579
600
|
readonly '--wzl-fg-on-accent': "#f5f5f6";
|
|
580
601
|
readonly '--wzl-line': "rgba(230, 231, 233, 0.2)";
|
|
581
602
|
readonly '--wzl-line-strong': "rgba(230, 231, 233, 0.4)";
|
|
603
|
+
readonly '--wzl-border-on-sunken': "rgba(230, 231, 233, 0.12)";
|
|
582
604
|
readonly '--wzl-curve-color': "#8c94ee";
|
|
583
605
|
readonly '--wzl-accent-hover': "#8c94ee";
|
|
584
606
|
readonly '--wzl-secondary': "#dc9d15";
|
|
@@ -608,19 +630,26 @@ declare const THEMES: {
|
|
|
608
630
|
readonly '--wzl-handle-size': "9px";
|
|
609
631
|
readonly '--wzl-handle-size-sm': "7px";
|
|
610
632
|
readonly '--wzl-handle-size-lg': "10px";
|
|
633
|
+
readonly '--wzl-handle-dot-size': "8px";
|
|
634
|
+
readonly '--wzl-handle-dot-size-sm': "7px";
|
|
611
635
|
readonly '--wzl-checker-a': "#25272c";
|
|
612
636
|
readonly '--wzl-checker-b': "#181a1e";
|
|
613
637
|
readonly '--wzl-checker-size': "8px";
|
|
614
638
|
readonly '--wzl-workspace-surface': "#0e0f12";
|
|
615
639
|
readonly '--wzl-workspace-line': "rgba(230, 231, 233, 0.1)";
|
|
616
640
|
readonly '--wzl-field-pad-x': "8px";
|
|
641
|
+
readonly '--wzl-gloss': "0";
|
|
617
642
|
readonly '--wzl-font-size': "18px";
|
|
618
643
|
readonly '--wzl-tracking-none': "0";
|
|
619
644
|
readonly '--wzl-tracking-wide': "0.06em";
|
|
620
645
|
readonly '--wzl-tracking-wider': "0.08em";
|
|
621
646
|
readonly '--wzl-z-toolbar': "10";
|
|
622
647
|
readonly '--wzl-z-overlay': "20";
|
|
623
|
-
readonly '--wzl-z-
|
|
648
|
+
readonly '--wzl-z-hud': "900";
|
|
649
|
+
readonly '--wzl-z-modal': "1000";
|
|
650
|
+
readonly '--wzl-z-toast': "1100";
|
|
651
|
+
readonly '--wzl-z-popover': "1200";
|
|
652
|
+
readonly '--wzl-z-drag': "10000";
|
|
624
653
|
readonly '--wzl-leading-tight': "1";
|
|
625
654
|
readonly '--wzl-leading-snug': "1.2";
|
|
626
655
|
readonly '--wzl-leading': "1.4";
|
|
@@ -698,6 +727,7 @@ declare const THEMES: {
|
|
|
698
727
|
readonly '--wzl-secondary-fg': "#016458";
|
|
699
728
|
readonly '--wzl-fg-inverse': "#f5f5f6";
|
|
700
729
|
readonly '--wzl-shadow': "rgba(0, 0, 0, 0.18)";
|
|
730
|
+
readonly '--wzl-scrim': "rgba(0, 0, 0, 0.4)";
|
|
701
731
|
readonly '--wzl-code-keyword': "#6d28d9";
|
|
702
732
|
readonly '--wzl-code-string': "#15803d";
|
|
703
733
|
readonly '--wzl-code-number': "#b45309";
|
|
@@ -757,6 +787,7 @@ declare const THEMES: {
|
|
|
757
787
|
readonly '--wzl-fg-on-accent': "#f5f5f6";
|
|
758
788
|
readonly '--wzl-line': "rgba(14, 15, 18, 0.2)";
|
|
759
789
|
readonly '--wzl-line-strong': "rgba(14, 15, 18, 0.4)";
|
|
790
|
+
readonly '--wzl-border-on-sunken': "rgba(14, 15, 18, 0.12)";
|
|
760
791
|
readonly '--wzl-curve-color': "#6366f1";
|
|
761
792
|
readonly '--wzl-accent-hover': "#6366f1";
|
|
762
793
|
readonly '--wzl-secondary': "#3ee1cb";
|
|
@@ -786,19 +817,26 @@ declare const THEMES: {
|
|
|
786
817
|
readonly '--wzl-handle-size': "9px";
|
|
787
818
|
readonly '--wzl-handle-size-sm': "7px";
|
|
788
819
|
readonly '--wzl-handle-size-lg': "10px";
|
|
820
|
+
readonly '--wzl-handle-dot-size': "8px";
|
|
821
|
+
readonly '--wzl-handle-dot-size-sm': "7px";
|
|
789
822
|
readonly '--wzl-checker-a': "#c9cbcf";
|
|
790
823
|
readonly '--wzl-checker-b': "#f5f5f6";
|
|
791
824
|
readonly '--wzl-checker-size': "8px";
|
|
792
825
|
readonly '--wzl-workspace-surface': "#c9cbcf";
|
|
793
826
|
readonly '--wzl-workspace-line': "rgba(14, 15, 18, 0.1)";
|
|
794
827
|
readonly '--wzl-field-pad-x': "8px";
|
|
828
|
+
readonly '--wzl-gloss': "0";
|
|
795
829
|
readonly '--wzl-font-size': "13px";
|
|
796
830
|
readonly '--wzl-tracking-none': "0";
|
|
797
831
|
readonly '--wzl-tracking-wide': "0.06em";
|
|
798
832
|
readonly '--wzl-tracking-wider': "0.08em";
|
|
799
833
|
readonly '--wzl-z-toolbar': "10";
|
|
800
834
|
readonly '--wzl-z-overlay': "20";
|
|
801
|
-
readonly '--wzl-z-
|
|
835
|
+
readonly '--wzl-z-hud': "900";
|
|
836
|
+
readonly '--wzl-z-modal': "1000";
|
|
837
|
+
readonly '--wzl-z-toast': "1100";
|
|
838
|
+
readonly '--wzl-z-popover': "1200";
|
|
839
|
+
readonly '--wzl-z-drag': "10000";
|
|
802
840
|
readonly '--wzl-leading-tight': "1";
|
|
803
841
|
readonly '--wzl-leading-snug': "1.2";
|
|
804
842
|
readonly '--wzl-leading': "1.4";
|
|
@@ -876,6 +914,7 @@ declare const THEMES: {
|
|
|
876
914
|
readonly '--wzl-secondary-fg': "#016458";
|
|
877
915
|
readonly '--wzl-fg-inverse': "#f5f5f6";
|
|
878
916
|
readonly '--wzl-shadow': "rgba(0, 0, 0, 0.18)";
|
|
917
|
+
readonly '--wzl-scrim': "rgba(0, 0, 0, 0.4)";
|
|
879
918
|
readonly '--wzl-code-keyword': "#6d28d9";
|
|
880
919
|
readonly '--wzl-code-string': "#15803d";
|
|
881
920
|
readonly '--wzl-code-number': "#b45309";
|
|
@@ -935,6 +974,7 @@ declare const THEMES: {
|
|
|
935
974
|
readonly '--wzl-fg-on-accent': "#f5f5f6";
|
|
936
975
|
readonly '--wzl-line': "rgba(14, 15, 18, 0.2)";
|
|
937
976
|
readonly '--wzl-line-strong': "rgba(14, 15, 18, 0.4)";
|
|
977
|
+
readonly '--wzl-border-on-sunken': "rgba(14, 15, 18, 0.12)";
|
|
938
978
|
readonly '--wzl-curve-color': "#6366f1";
|
|
939
979
|
readonly '--wzl-accent-hover': "#6366f1";
|
|
940
980
|
readonly '--wzl-secondary': "#3ee1cb";
|
|
@@ -964,19 +1004,26 @@ declare const THEMES: {
|
|
|
964
1004
|
readonly '--wzl-handle-size': "9px";
|
|
965
1005
|
readonly '--wzl-handle-size-sm': "7px";
|
|
966
1006
|
readonly '--wzl-handle-size-lg': "10px";
|
|
1007
|
+
readonly '--wzl-handle-dot-size': "8px";
|
|
1008
|
+
readonly '--wzl-handle-dot-size-sm': "7px";
|
|
967
1009
|
readonly '--wzl-checker-a': "#c9cbcf";
|
|
968
1010
|
readonly '--wzl-checker-b': "#f5f5f6";
|
|
969
1011
|
readonly '--wzl-checker-size': "8px";
|
|
970
1012
|
readonly '--wzl-workspace-surface': "#c9cbcf";
|
|
971
1013
|
readonly '--wzl-workspace-line': "rgba(14, 15, 18, 0.1)";
|
|
972
1014
|
readonly '--wzl-field-pad-x': "8px";
|
|
1015
|
+
readonly '--wzl-gloss': "0";
|
|
973
1016
|
readonly '--wzl-font-size': "15px";
|
|
974
1017
|
readonly '--wzl-tracking-none': "0";
|
|
975
1018
|
readonly '--wzl-tracking-wide': "0.06em";
|
|
976
1019
|
readonly '--wzl-tracking-wider': "0.08em";
|
|
977
1020
|
readonly '--wzl-z-toolbar': "10";
|
|
978
1021
|
readonly '--wzl-z-overlay': "20";
|
|
979
|
-
readonly '--wzl-z-
|
|
1022
|
+
readonly '--wzl-z-hud': "900";
|
|
1023
|
+
readonly '--wzl-z-modal': "1000";
|
|
1024
|
+
readonly '--wzl-z-toast': "1100";
|
|
1025
|
+
readonly '--wzl-z-popover': "1200";
|
|
1026
|
+
readonly '--wzl-z-drag': "10000";
|
|
980
1027
|
readonly '--wzl-leading-tight': "1";
|
|
981
1028
|
readonly '--wzl-leading-snug': "1.2";
|
|
982
1029
|
readonly '--wzl-leading': "1.4";
|
|
@@ -1054,6 +1101,7 @@ declare const THEMES: {
|
|
|
1054
1101
|
readonly '--wzl-secondary-fg': "#016458";
|
|
1055
1102
|
readonly '--wzl-fg-inverse': "#f5f5f6";
|
|
1056
1103
|
readonly '--wzl-shadow': "rgba(0, 0, 0, 0.18)";
|
|
1104
|
+
readonly '--wzl-scrim': "rgba(0, 0, 0, 0.4)";
|
|
1057
1105
|
readonly '--wzl-code-keyword': "#6d28d9";
|
|
1058
1106
|
readonly '--wzl-code-string': "#15803d";
|
|
1059
1107
|
readonly '--wzl-code-number': "#b45309";
|
|
@@ -1113,6 +1161,7 @@ declare const THEMES: {
|
|
|
1113
1161
|
readonly '--wzl-fg-on-accent': "#f5f5f6";
|
|
1114
1162
|
readonly '--wzl-line': "rgba(14, 15, 18, 0.2)";
|
|
1115
1163
|
readonly '--wzl-line-strong': "rgba(14, 15, 18, 0.4)";
|
|
1164
|
+
readonly '--wzl-border-on-sunken': "rgba(14, 15, 18, 0.12)";
|
|
1116
1165
|
readonly '--wzl-curve-color': "#6366f1";
|
|
1117
1166
|
readonly '--wzl-accent-hover': "#6366f1";
|
|
1118
1167
|
readonly '--wzl-secondary': "#3ee1cb";
|
|
@@ -1142,19 +1191,26 @@ declare const THEMES: {
|
|
|
1142
1191
|
readonly '--wzl-handle-size': "9px";
|
|
1143
1192
|
readonly '--wzl-handle-size-sm': "7px";
|
|
1144
1193
|
readonly '--wzl-handle-size-lg': "10px";
|
|
1194
|
+
readonly '--wzl-handle-dot-size': "8px";
|
|
1195
|
+
readonly '--wzl-handle-dot-size-sm': "7px";
|
|
1145
1196
|
readonly '--wzl-checker-a': "#c9cbcf";
|
|
1146
1197
|
readonly '--wzl-checker-b': "#f5f5f6";
|
|
1147
1198
|
readonly '--wzl-checker-size': "8px";
|
|
1148
1199
|
readonly '--wzl-workspace-surface': "#c9cbcf";
|
|
1149
1200
|
readonly '--wzl-workspace-line': "rgba(14, 15, 18, 0.1)";
|
|
1150
1201
|
readonly '--wzl-field-pad-x': "8px";
|
|
1202
|
+
readonly '--wzl-gloss': "0";
|
|
1151
1203
|
readonly '--wzl-font-size': "18px";
|
|
1152
1204
|
readonly '--wzl-tracking-none': "0";
|
|
1153
1205
|
readonly '--wzl-tracking-wide': "0.06em";
|
|
1154
1206
|
readonly '--wzl-tracking-wider': "0.08em";
|
|
1155
1207
|
readonly '--wzl-z-toolbar': "10";
|
|
1156
1208
|
readonly '--wzl-z-overlay': "20";
|
|
1157
|
-
readonly '--wzl-z-
|
|
1209
|
+
readonly '--wzl-z-hud': "900";
|
|
1210
|
+
readonly '--wzl-z-modal': "1000";
|
|
1211
|
+
readonly '--wzl-z-toast': "1100";
|
|
1212
|
+
readonly '--wzl-z-popover': "1200";
|
|
1213
|
+
readonly '--wzl-z-drag': "10000";
|
|
1158
1214
|
readonly '--wzl-leading-tight': "1";
|
|
1159
1215
|
readonly '--wzl-leading-snug': "1.2";
|
|
1160
1216
|
readonly '--wzl-leading': "1.4";
|
|
@@ -1239,31 +1295,32 @@ interface GeneratedColors {
|
|
|
1239
1295
|
interface RampColors {
|
|
1240
1296
|
readonly ramp: string;
|
|
1241
1297
|
}
|
|
1298
|
+
/** One color of a list: a CSS color string, or a `ColorSource` resolved when it is read. */
|
|
1299
|
+
type ColorListItem = string | ColorSource;
|
|
1242
1300
|
/** The forms a theme definition can hold: everything but a function. */
|
|
1243
|
-
type SerializableColorList = readonly string[] | GeneratedColors | RampColors;
|
|
1301
|
+
type SerializableColorList = readonly (string | ColorLiteral | ColorRef)[] | GeneratedColors | RampColors;
|
|
1244
1302
|
/**
|
|
1245
|
-
* Several colors, read by index with `colorAt`, wrapping.
|
|
1246
|
-
* ramp's generator; a ramp of the active
|
|
1247
|
-
* function of the index.
|
|
1303
|
+
* Several colors, read by index with `colorAt`, wrapping. Items, each a CSS
|
|
1304
|
+
* string or a `ColorSource`; the swatch ramp's generator; a ramp of the active
|
|
1305
|
+
* theme, which follows the mode; or a function of the index.
|
|
1248
1306
|
*/
|
|
1249
|
-
type ColorList =
|
|
1307
|
+
type ColorList = readonly ColorListItem[] | GeneratedColors | RampColors | ((i: number) => ColorListItem);
|
|
1250
1308
|
/** What a `ColorList` resolves against. `useTheme()`'s value is one. */
|
|
1251
1309
|
interface ColorContext {
|
|
1252
1310
|
readonly theme: Theme;
|
|
1253
1311
|
readonly resolved: ResolvedTheme;
|
|
1254
1312
|
}
|
|
1313
|
+
/** What a `ColorSource` resolves against under a theme. `useTones()`'s value is one. */
|
|
1314
|
+
interface ColorSourceContext extends ColorContext {
|
|
1315
|
+
/** The list `{ ref: 'tone' }` indexes. Absent: the theme's own. */
|
|
1316
|
+
readonly tones?: ColorList;
|
|
1317
|
+
/** Names answered before the theme's. */
|
|
1318
|
+
readonly palette?: Palette;
|
|
1319
|
+
}
|
|
1255
1320
|
/** A ramp's step names, from the nearest theme in the chain that declares it. */
|
|
1256
1321
|
declare function rampSteps(theme: Theme, ramp: string): readonly string[];
|
|
1257
1322
|
/** The tone list a theme declares, from the nearest theme in its chain that has one. */
|
|
1258
1323
|
declare function themeTones(theme: Theme): ColorList;
|
|
1259
|
-
/** The `i`th color of `list`, wrapping. A ramp list reads the resolved theme, so the answer follows its mode. */
|
|
1260
|
-
declare function colorAt(list: ColorList, i: number, ctx?: ColorContext): string;
|
|
1261
|
-
/**
|
|
1262
|
-
* As `colorAt`, but a ramp list answers with its custom property —
|
|
1263
|
-
* `var(--wzl-swatch-sky)` — so a color written into CSS follows a mode change
|
|
1264
|
-
* without re-rendering, provider or not.
|
|
1265
|
-
*/
|
|
1266
|
-
declare function colorCssAt(list: ColorList, i: number, ctx?: ColorContext): string;
|
|
1267
1324
|
/** How many distinct colors `list` holds before it wraps; `undefined` for a function, which never does. */
|
|
1268
1325
|
declare function colorCount(list: ColorList, ctx?: ColorContext): number | undefined;
|
|
1269
1326
|
|
|
@@ -1335,6 +1392,7 @@ interface ScaleDef {
|
|
|
1335
1392
|
readonly description?: string;
|
|
1336
1393
|
readonly describe?: Readonly<Record<string, string>>;
|
|
1337
1394
|
}
|
|
1395
|
+
/** What every semantic rule may carry beside the way it derives its value. */
|
|
1338
1396
|
interface SemanticCommon {
|
|
1339
1397
|
readonly type?: string;
|
|
1340
1398
|
readonly description?: string;
|
|
@@ -1401,4 +1459,4 @@ interface ThemeDefinition {
|
|
|
1401
1459
|
readonly tones?: SerializableColorList;
|
|
1402
1460
|
}
|
|
1403
1461
|
|
|
1404
|
-
export {
|
|
1462
|
+
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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { OklchDeg, oklchDegToHex } from '@weasel-js/paint';
|
|
2
|
-
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-
|
|
3
|
-
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
|
|
2
|
+
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';
|
|
3
|
+
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';
|
|
4
4
|
|
|
5
5
|
/** A color in OKLCH: lightness 0–1, chroma, hue in degrees. paint's own type,
|
|
6
6
|
* under the name this engine has always called it. */
|
|
@@ -29,9 +29,7 @@ declare function toLab(hex: string): [number, number, number];
|
|
|
29
29
|
* what separates them is chroma. And it is not plain euclidean OKLab distance:
|
|
30
30
|
* OKLab's chroma range is small beside its lightness range, so an unweighted
|
|
31
31
|
* distance is almost all lightness, and it ranks a mid-gray as further from
|
|
32
|
-
* white than a pale blue is.
|
|
33
|
-
* unweighted OKLab put `#c1c1c1` at 0.160 and `#abd9ff` at 0.126 while CIELAB
|
|
34
|
-
* put them at 21.9 and 28.5 — opposite orders.
|
|
32
|
+
* white than a pale blue is.
|
|
35
33
|
*
|
|
36
34
|
* `CHROMA_WEIGHT` restores CIELAB's ordering. It is a weight, not a unit
|
|
37
35
|
* conversion, so these numbers do not transfer to or from CIELAB dE.
|
|
@@ -305,15 +303,16 @@ interface DtcgAxesExtension {
|
|
|
305
303
|
readonly overrides: Record<string, DtcgLayer>;
|
|
306
304
|
}
|
|
307
305
|
|
|
308
|
-
|
|
306
|
+
/** A DTCG group: tokens of one `$type`, by name. */
|
|
307
|
+
type DtcgGroup = Record<string, unknown> & {
|
|
309
308
|
$type: string;
|
|
310
309
|
};
|
|
311
310
|
/** A DTCG document as {@link toDTCG} writes it. */
|
|
312
311
|
interface DtcgExport {
|
|
313
312
|
readonly name: string;
|
|
314
313
|
readonly defaultMode?: string;
|
|
315
|
-
readonly primitives: Record<string,
|
|
316
|
-
readonly modes: Record<string, Record<string,
|
|
314
|
+
readonly primitives: Record<string, DtcgGroup>;
|
|
315
|
+
readonly modes: Record<string, Record<string, DtcgGroup>>;
|
|
317
316
|
readonly $extensions?: {
|
|
318
317
|
readonly [AXES_EXT]?: DtcgAxesExtension;
|
|
319
318
|
};
|
|
@@ -325,10 +324,8 @@ interface DtcgExport {
|
|
|
325
324
|
*
|
|
326
325
|
* DTCG has one variant dimension, so the plain groups hold mode, with every
|
|
327
326
|
* other axis at its default value: what a tool that ignores extensions reads.
|
|
328
|
-
* The other values travel under `$extensions["com.weasel.axes"]
|
|
329
|
-
*
|
|
330
|
-
* some token actually varies by — axes that vary independently cost one layer
|
|
331
|
-
* per value, not their cross-product.
|
|
327
|
+
* The other values travel under `$extensions["com.weasel.axes"]`, one override
|
|
328
|
+
* layer per combination of non-default values some token actually varies by.
|
|
332
329
|
*/
|
|
333
330
|
declare function toDTCG(theme: Theme): DtcgExport;
|
|
334
331
|
|
|
@@ -401,8 +398,7 @@ interface ThemeApi {
|
|
|
401
398
|
get(name: string): Promise<StoredTheme>;
|
|
402
399
|
put(name: string, definition: ThemeDefinition, baseHash: string | null): Promise<PutResult>;
|
|
403
400
|
}
|
|
404
|
-
type Fetch = (input: string, init?: RequestInit) => Promise<Response>;
|
|
405
401
|
/** The dev server's theme store, addressed relative to the page so the app's base path carries over. */
|
|
406
|
-
declare function httpThemeApi(base?: string, fetchImpl?:
|
|
402
|
+
declare function httpThemeApi(base?: string, fetchImpl?: (input: string, init?: RequestInit) => Promise<Response>): ThemeApi;
|
|
407
403
|
|
|
408
|
-
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 };
|
|
404
|
+
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 };
|