@weasel-js/theme 1.5.0 → 1.5.2
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 +67 -14
- package/dist/chunk-LL2ERJPZ.js +175 -0
- package/dist/chunk-LL2ERJPZ.js.map +1 -0
- package/dist/chunk-PJMTWM34.js +6 -0
- package/dist/chunk-PJMTWM34.js.map +1 -0
- package/dist/chunk-XFCWYN2L.js +2401 -0
- package/dist/chunk-XFCWYN2L.js.map +1 -0
- package/dist/engine.d.ts +293 -0
- package/dist/engine.js +1789 -0
- package/dist/engine.js.map +1 -0
- package/dist/index.d.ts +49 -15
- package/dist/index.js +156 -116
- package/dist/index.js.map +1 -1
- package/dist/react.d.ts +7 -5
- package/dist/react.js +13 -18
- package/dist/react.js.map +1 -1
- package/dist/resolveTheme-CF8i5IHy.d.ts +766 -0
- package/dist/theme-DAZcQi_L.d.ts +191 -0
- package/dist/tokens.css +116 -42
- package/package.json +8 -1
- package/dist/chunk-VKZ4JIVX.js +0 -912
- package/dist/chunk-VKZ4JIVX.js.map +0 -1
- package/dist/resolveTheme-DiF2Ew25.d.ts +0 -296
package/dist/index.js
CHANGED
|
@@ -1,112 +1,147 @@
|
|
|
1
|
-
import { weaselTheme } from './chunk-
|
|
2
|
-
export { THEMES, THEME_SOURCES, applyTheme, defineTheme,
|
|
1
|
+
import { weaselTheme } from './chunk-XFCWYN2L.js';
|
|
2
|
+
export { BAKED_THEMES, THEMES, THEME_SOURCES, applyTheme, defineTheme, weaselTheme } from './chunk-XFCWYN2L.js';
|
|
3
|
+
import { ALPHA_EXT } from './chunk-PJMTWM34.js';
|
|
4
|
+
import { themeAxes } from './chunk-LL2ERJPZ.js';
|
|
5
|
+
export { enumerateSelections, fullSelection, isByAxis, parseTokenValue, resolveTheme, selectionKey, serializeTokenValue, themeAxes } from './chunk-LL2ERJPZ.js';
|
|
3
6
|
|
|
4
7
|
// src/generated/manifest.ts
|
|
5
8
|
var TOKEN_MANIFEST = [
|
|
6
|
-
{ name: "--wzl-gray-50", type: "color", group: "gray", defaultValue: "#f5f5f6", description: "" },
|
|
7
|
-
{ name: "--wzl-gray-100", type: "color", group: "gray", defaultValue: "#e6e7e9", description: "" },
|
|
8
|
-
{ name: "--wzl-gray-200", type: "color", group: "gray", defaultValue: "#c9cbcf", description: "" },
|
|
9
|
-
{ name: "--wzl-gray-300", type: "color", group: "gray", defaultValue: "#9ea1a8", description: "" },
|
|
10
|
-
{ name: "--wzl-gray-400", type: "color", group: "gray", defaultValue: "#6f737b", description: "" },
|
|
11
|
-
{ name: "--wzl-gray-500", type: "color", group: "gray", defaultValue: "#4d5058", description: "" },
|
|
12
|
-
{ name: "--wzl-gray-600", type: "color", group: "gray", defaultValue: "#383b42", description: "" },
|
|
13
|
-
{ name: "--wzl-gray-700", type: "color", group: "gray", defaultValue: "#25272c", description: "" },
|
|
14
|
-
{ name: "--wzl-gray-800", type: "color", group: "gray", defaultValue: "#181a1e", description: "" },
|
|
15
|
-
{ name: "--wzl-gray-900", type: "color", group: "gray", defaultValue: "#0e0f12", description: "" },
|
|
16
|
-
{ name: "--wzl-accent-soft", type: "color", group: "accent", defaultValue: "#1d1454", description: "" },
|
|
17
|
-
{ name: "--wzl-accent-base", type: "color", group: "accent", defaultValue: "#2e1f7a", description: "Midnight blue-violet. Deep and saturated; anchors primary actions on light and dark surfaces alike." },
|
|
18
|
-
{ name: "--wzl-accent-strong", type: "color", group: "accent", defaultValue: "#5841b8", description: "" },
|
|
19
|
-
{ name: "--wzl-
|
|
20
|
-
{ name: "--wzl-
|
|
21
|
-
{ name: "--wzl-
|
|
22
|
-
{ name: "--wzl-
|
|
23
|
-
{ name: "--wzl-
|
|
24
|
-
{ name: "--wzl-
|
|
25
|
-
{ name: "--wzl-
|
|
26
|
-
{ name: "--wzl-
|
|
27
|
-
{ name: "--wzl-
|
|
28
|
-
{ name: "--wzl-
|
|
29
|
-
{ name: "--wzl-
|
|
30
|
-
{ name: "--wzl-
|
|
31
|
-
{ name: "--wzl-
|
|
32
|
-
{ name: "--wzl-
|
|
33
|
-
{ name: "--wzl-
|
|
34
|
-
{ name: "--wzl-
|
|
35
|
-
{ name: "--wzl-
|
|
36
|
-
{ name: "--wzl-
|
|
37
|
-
{ name: "--wzl-
|
|
38
|
-
{ name: "--wzl-
|
|
39
|
-
{ name: "--wzl-
|
|
40
|
-
{ name: "--wzl-
|
|
41
|
-
{ name: "--wzl-
|
|
42
|
-
{ name: "--wzl-
|
|
43
|
-
{ name: "--wzl-
|
|
44
|
-
{ name: "--wzl-
|
|
45
|
-
{ name: "--wzl-
|
|
46
|
-
{ name: "--wzl-
|
|
47
|
-
{ name: "--wzl-
|
|
48
|
-
{ name: "--wzl-
|
|
49
|
-
{ name: "--wzl-
|
|
50
|
-
{ name: "--wzl-border-
|
|
51
|
-
{ name: "--wzl-
|
|
52
|
-
{ name: "--wzl-
|
|
53
|
-
{ name: "--wzl-
|
|
54
|
-
{ name: "--wzl-
|
|
55
|
-
{ name: "--wzl-
|
|
56
|
-
{ name: "--wzl-
|
|
57
|
-
{ name: "--wzl-
|
|
58
|
-
{ name: "--wzl-
|
|
59
|
-
{ name: "--wzl-
|
|
60
|
-
{ name: "--wzl-
|
|
61
|
-
{ name: "--wzl-
|
|
62
|
-
{ name: "--wzl-
|
|
63
|
-
{ name: "--wzl-
|
|
64
|
-
{ name: "--wzl-
|
|
65
|
-
{ name: "--wzl-
|
|
66
|
-
{ name: "--wzl-
|
|
67
|
-
{ name: "--wzl-
|
|
68
|
-
{ name: "--wzl-
|
|
69
|
-
{ name: "--wzl-
|
|
70
|
-
{ name: "--wzl-
|
|
71
|
-
{ name: "--wzl-
|
|
72
|
-
{ name: "--wzl-
|
|
73
|
-
{ name: "--wzl-
|
|
74
|
-
{ name: "--wzl-
|
|
75
|
-
{ name: "--wzl-
|
|
76
|
-
{ name: "--wzl-
|
|
77
|
-
{ name: "--wzl-
|
|
78
|
-
{ name: "--wzl-
|
|
79
|
-
{ name: "--wzl-
|
|
80
|
-
{ name: "--wzl-
|
|
81
|
-
{ name: "--wzl-
|
|
82
|
-
{ name: "--wzl-
|
|
83
|
-
{ name: "--wzl-
|
|
84
|
-
{ name: "--wzl-
|
|
85
|
-
{ name: "--wzl-
|
|
86
|
-
{ name: "--wzl-
|
|
87
|
-
{ name: "--wzl-
|
|
88
|
-
{ name: "--wzl-
|
|
89
|
-
{ name: "--wzl-
|
|
90
|
-
{ name: "--wzl-
|
|
91
|
-
{ name: "--wzl-
|
|
92
|
-
{ name: "--wzl-font-
|
|
93
|
-
{ name: "--wzl-
|
|
94
|
-
{ name: "--wzl-
|
|
95
|
-
{ name: "--wzl-
|
|
96
|
-
{ name: "--wzl-
|
|
97
|
-
{ name: "--wzl-
|
|
98
|
-
{ name: "--wzl-
|
|
99
|
-
{ name: "--wzl-
|
|
100
|
-
{ name: "--wzl-
|
|
101
|
-
{ name: "--wzl-
|
|
102
|
-
{ name: "--wzl-
|
|
103
|
-
{ name: "--wzl-
|
|
104
|
-
{ name: "--wzl-
|
|
105
|
-
{ name: "--wzl-
|
|
9
|
+
{ name: "--wzl-gray-50", type: "color", group: "gray", defaultValue: "#f5f5f6", description: "", hook: false },
|
|
10
|
+
{ name: "--wzl-gray-100", type: "color", group: "gray", defaultValue: "#e6e7e9", description: "", hook: false },
|
|
11
|
+
{ name: "--wzl-gray-200", type: "color", group: "gray", defaultValue: "#c9cbcf", description: "", hook: false },
|
|
12
|
+
{ name: "--wzl-gray-300", type: "color", group: "gray", defaultValue: "#9ea1a8", description: "", hook: false },
|
|
13
|
+
{ name: "--wzl-gray-400", type: "color", group: "gray", defaultValue: "#6f737b", description: "", hook: false },
|
|
14
|
+
{ name: "--wzl-gray-500", type: "color", group: "gray", defaultValue: "#4d5058", description: "", hook: false },
|
|
15
|
+
{ name: "--wzl-gray-600", type: "color", group: "gray", defaultValue: "#383b42", description: "", hook: false },
|
|
16
|
+
{ name: "--wzl-gray-700", type: "color", group: "gray", defaultValue: "#25272c", description: "", hook: false },
|
|
17
|
+
{ name: "--wzl-gray-800", type: "color", group: "gray", defaultValue: "#181a1e", description: "", hook: false },
|
|
18
|
+
{ name: "--wzl-gray-900", type: "color", group: "gray", defaultValue: "#0e0f12", description: "", hook: false },
|
|
19
|
+
{ name: "--wzl-accent-soft", type: "color", group: "accent", defaultValue: "#1d1454", description: "", hook: false },
|
|
20
|
+
{ name: "--wzl-accent-base", type: "color", group: "accent", defaultValue: "#2e1f7a", description: "Midnight blue-violet. Deep and saturated; anchors primary actions on light and dark surfaces alike.", hook: false },
|
|
21
|
+
{ name: "--wzl-accent-strong", type: "color", group: "accent", defaultValue: "#5841b8", description: "", hook: false },
|
|
22
|
+
{ name: "--wzl-swatch-fuchsia", type: "color", group: "swatch", defaultValue: "#f641f7", description: "First of ten categorical spot colors for plotting, status and data viz. Take them in sequence: the order is farthest-point over hue, so the first N are as separated as N colors can be (first three 87\xB0 apart, all ten 32\xB0). Mode-invariant on purpose \u2014 a series keeps its color when the mode flips, which is why they are tuned for a dark surface and clear only 1.5:1 on a light one.", hook: false },
|
|
23
|
+
{ name: "--wzl-swatch-green", type: "color", group: "swatch", defaultValue: "#48e628", description: "", hook: false },
|
|
24
|
+
{ name: "--wzl-swatch-sky", type: "color", group: "swatch", defaultValue: "#36bff2", description: "", hook: false },
|
|
25
|
+
{ name: "--wzl-swatch-amber", type: "color", group: "swatch", defaultValue: "#e69628", description: "", hook: false },
|
|
26
|
+
{ name: "--wzl-swatch-teal", type: "color", group: "swatch", defaultValue: "#3ee1cb", description: "", hook: false },
|
|
27
|
+
{ name: "--wzl-swatch-red", type: "color", group: "swatch", defaultValue: "#f75034", description: "", hook: false },
|
|
28
|
+
{ name: "--wzl-swatch-blue", type: "color", group: "swatch", defaultValue: "#407ef7", description: "", hook: false },
|
|
29
|
+
{ name: "--wzl-swatch-citron", type: "color", group: "swatch", defaultValue: "#d5d23a", description: "", hook: false },
|
|
30
|
+
{ name: "--wzl-swatch-rose", type: "color", group: "swatch", defaultValue: "#fa4590", description: "", hook: false },
|
|
31
|
+
{ name: "--wzl-swatch-violet", type: "color", group: "swatch", defaultValue: "#955cf9", description: "", hook: false },
|
|
32
|
+
{ name: "--wzl-font-size-2xs", type: "dimension", group: "font", defaultValue: "9px", description: "Shortcut keys and index badges. The floor for chrome text.", hook: false },
|
|
33
|
+
{ name: "--wzl-font-size-xs", type: "dimension", group: "font", defaultValue: "10px", description: "Tool-button labels under an icon.", hook: false },
|
|
34
|
+
{ name: "--wzl-font-size-sm", type: "dimension", group: "font", defaultValue: "11px", description: "Chrome labels, status readouts, section headings.", hook: false },
|
|
35
|
+
{ name: "--wzl-font-size-md", type: "dimension", group: "font", defaultValue: "13px", description: "Controls and body text.", hook: false },
|
|
36
|
+
{ name: "--wzl-font-size-lg", type: "dimension", group: "font", defaultValue: "16px", description: "Panel and dialog titles.", hook: false },
|
|
37
|
+
{ name: "--wzl-font-size-xl", type: "dimension", group: "font", defaultValue: "20px", description: "The largest chrome text \u2014 a lab or app title.", hook: false },
|
|
38
|
+
{ name: "--wzl-space-1", type: "dimension", group: "space", defaultValue: "2px", description: "", hook: false },
|
|
39
|
+
{ name: "--wzl-space-2", type: "dimension", group: "space", defaultValue: "4px", description: "", hook: false },
|
|
40
|
+
{ name: "--wzl-space-3", type: "dimension", group: "space", defaultValue: "6px", description: "", hook: false },
|
|
41
|
+
{ name: "--wzl-space-4", type: "dimension", group: "space", defaultValue: "8px", description: "", hook: false },
|
|
42
|
+
{ name: "--wzl-space-5", type: "dimension", group: "space", defaultValue: "10px", description: "", hook: false },
|
|
43
|
+
{ name: "--wzl-space-6", type: "dimension", group: "space", defaultValue: "12px", description: "", hook: false },
|
|
44
|
+
{ name: "--wzl-space-7", type: "dimension", group: "space", defaultValue: "14px", description: "", hook: false },
|
|
45
|
+
{ name: "--wzl-space-8", type: "dimension", group: "space", defaultValue: "16px", description: "", hook: false },
|
|
46
|
+
{ name: "--wzl-surface", type: "color", group: "surface", defaultValue: "#181a1e", description: "", hook: false },
|
|
47
|
+
{ name: "--wzl-surface-raised", type: "color", group: "surface", defaultValue: "#25272c", description: "", hook: false },
|
|
48
|
+
{ name: "--wzl-surface-sunken", type: "color", group: "surface", defaultValue: "#0e0f12", description: "", hook: false },
|
|
49
|
+
{ name: "--wzl-fg", type: "color", group: "fg", defaultValue: "#e6e7e9", description: "", hook: false },
|
|
50
|
+
{ name: "--wzl-fg-muted", type: "color", group: "fg", defaultValue: "#9ea1a8", description: "", hook: false },
|
|
51
|
+
{ name: "--wzl-fg-subtle", type: "color", group: "fg", defaultValue: "#6f737b", description: "", hook: false },
|
|
52
|
+
{ name: "--wzl-border", type: "color", group: "border", defaultValue: "#25272c", description: "", hook: false },
|
|
53
|
+
{ name: "--wzl-border-strong", type: "color", group: "border", defaultValue: "#6f737b", description: "The line that has to be seen: a control's edge, a raised surface's outline. Clears WCAG 1.4.11's 3:1 against every surface in both modes.", hook: false },
|
|
54
|
+
{ name: "--wzl-accent-fg", type: "color", group: "accent", defaultValue: "#5841b8", description: "Accent for foreground use \u2014 text, icons, selected labels drawn on a surface. accent is a fill; the midnight base is too dim to read as text on dark surfaces.", hook: false },
|
|
55
|
+
{ name: "--wzl-fg-inverse", type: "color", group: "fg", defaultValue: "#0e0f12", description: "Text drawn on a filled foreground-colored element (e.g. a slider thumb). Flips with the mode, so it is a semantic, not an alias to a primitive.", hook: false },
|
|
56
|
+
{ name: "--wzl-shadow", type: "color", group: "shadow", defaultValue: "rgba(0, 0, 0, 0.6)", description: "Elevation. Always darker than any surface \u2014 never derived from fg, which is near-white on dark.", hook: false },
|
|
57
|
+
{ name: "--wzl-danger-base", type: "color", group: "status", defaultValue: "#d94a3f", description: "", hook: false },
|
|
58
|
+
{ name: "--wzl-warning-base", type: "color", group: "status", defaultValue: "#d99a3f", description: "", hook: false },
|
|
59
|
+
{ name: "--wzl-success-base", type: "color", group: "status", defaultValue: "#2ec27e", description: "", hook: false },
|
|
60
|
+
{ name: "--wzl-fg-on-accent", type: "color", group: "fg", defaultValue: "#f5f5f6", description: "", hook: false },
|
|
61
|
+
{ name: "--wzl-line-subtle", type: "color", group: "line", defaultValue: "rgba(230, 231, 233, 0.1)", description: "Barely-there separators (table rows).", hook: false },
|
|
62
|
+
{ name: "--wzl-line", type: "color", group: "line", defaultValue: "rgba(230, 231, 233, 0.2)", description: "Primary gridlines on sunken surfaces.", hook: false },
|
|
63
|
+
{ name: "--wzl-line-strong", type: "color", group: "line", defaultValue: "rgba(230, 231, 233, 0.4)", description: "Axes and emphasized dividers.", hook: false },
|
|
64
|
+
{ name: "--wzl-curve-color", type: "color", group: "curve", defaultValue: "#5841b8", description: "Drawn data curves. Routes through the bright accent because accent-base is too dim on sunken surfaces.", hook: false },
|
|
65
|
+
{ name: "--wzl-accent", type: "color", group: "accent", defaultValue: "#2e1f7a", description: "", hook: false },
|
|
66
|
+
{ name: "--wzl-accent-hover", type: "color", group: "accent", defaultValue: "#5841b8", description: "", hook: false },
|
|
67
|
+
{ name: "--wzl-danger", type: "color", group: "status", defaultValue: "#d94a3f", description: "", hook: false },
|
|
68
|
+
{ name: "--wzl-warning", type: "color", group: "status", defaultValue: "#d99a3f", description: "", hook: false },
|
|
69
|
+
{ name: "--wzl-success", type: "color", group: "status", defaultValue: "#2ec27e", description: "", hook: false },
|
|
70
|
+
{ name: "--wzl-focus-ring", type: "color", group: "focus", defaultValue: "#5841b8", description: "", hook: false },
|
|
71
|
+
{ name: "--wzl-glass-tint", type: "color", group: "glass", defaultValue: "#2e1f7a", description: "Frosted-glass tint. Components compose it as color-mix(in srgb, var(--wzl-glass-tint) 78%, transparent) with backdrop-filter: blur(3px).", hook: false },
|
|
72
|
+
{ name: "--wzl-surface-hover", type: "color", group: "surface", defaultValue: "rgba(230, 231, 233, 0.1)", description: "Hover wash over a raised surface. Same formula as line-subtle, different job \u2014 do not collapse them.", hook: false },
|
|
73
|
+
{ name: "--wzl-surface-pressed", type: "color", group: "surface", defaultValue: "rgba(230, 231, 233, 0.18)", description: "Pressed wash over a raised surface.", hook: false },
|
|
74
|
+
{ name: "--wzl-radius-sm", type: "dimension", group: "radius", defaultValue: "3px", description: "", hook: false },
|
|
75
|
+
{ name: "--wzl-radius-md", type: "dimension", group: "radius", defaultValue: "5px", description: "", hook: false },
|
|
76
|
+
{ name: "--wzl-radius-lg", type: "dimension", group: "radius", defaultValue: "14px", description: "", hook: false },
|
|
77
|
+
{ name: "--wzl-radius-pill", type: "dimension", group: "radius", defaultValue: "999px", description: "Fully rounded ends \u2014 segmented controls, progress tracks.", hook: false },
|
|
78
|
+
{ name: "--wzl-border-w", type: "dimension", group: "border", defaultValue: "1px", description: "", hook: false },
|
|
79
|
+
{ name: "--wzl-line-width", type: "dimension", group: "line", defaultValue: "2px", description: "Structural lines \u2014 gridlines, dividers, axes.", hook: false },
|
|
80
|
+
{ name: "--wzl-curve-width", type: "dimension", group: "curve", defaultValue: "3px", description: "Drawn data curves. Heavier than structural lines so data reads as primary content.", hook: false },
|
|
81
|
+
{ name: "--wzl-tb-height", type: "dimension", group: "tb", defaultValue: "28px", description: "Height of a horizontal toolbar strip (ActionsBar, OptionsBar, ToolOptionsBar). Taller than control-h so the controls inside a strip are not flush with its edges.", hook: false },
|
|
82
|
+
{ name: "--wzl-control-h-xs", type: "dimension", group: "control", defaultValue: "18px", description: "Height of the smallest interactive control -- a stepper, a keycap, a swatch button in a dense row. The rank below control-h-sm.", hook: false },
|
|
83
|
+
{ name: "--wzl-control-h-sm", type: "dimension", group: "control", defaultValue: "20px", description: "Height of a control in a dense inspector -- a Properties field, a small Button. The rank below control-h, which sizes a standalone control.", hook: false },
|
|
84
|
+
{ name: "--wzl-control-h", type: "dimension", group: "control", defaultValue: "24px", description: "Height of an interactive control \u2014 button, input, select, segmented control. Distinct from tb-height, which sizes the strip a row of them sits in.", hook: false },
|
|
85
|
+
{ name: "--wzl-icon-button-size", type: "dimension", group: "icon", defaultValue: "22px", description: "Side of a square icon button -- a dialog close, a row remove, a field clear. Smaller than control-h because it carries a glyph rather than a label, and square, so it sizes both axes.", hook: false },
|
|
86
|
+
{ name: "--wzl-slider-track-h", type: "dimension", group: "slider", defaultValue: "4px", description: "Height of a linear range track. The kit's single-thumb ranges all wear this; Slider's default 24px canvas track does not.", hook: false },
|
|
87
|
+
{ name: "--wzl-slider-thumb-size", type: "dimension", group: "slider", defaultValue: "8px", description: "Diameter of a linear range thumb.", hook: false },
|
|
88
|
+
{ name: "--wzl-slider-track-mix", type: "dimension", group: "slider", defaultValue: "18%", description: "Accent proportion in a range track, as a color-mix percentage \u2014 not a color. Mixed into a real property, never into another custom property.", hook: false },
|
|
89
|
+
{ name: "--wzl-slider-thumb-mix", type: "dimension", group: "slider", defaultValue: "70%", description: "Accent proportion in a range thumb, as a color-mix percentage \u2014 not a color.", hook: false },
|
|
90
|
+
{ name: "--wzl-handle-size", type: "dimension", group: "handle", defaultValue: "9px", description: "Edge of a draggable handle on a plot or timeline \u2014 a keyframe diamond, a timeline key, an event mark. The default rank; -sm and -lg are the two deliberate departures from it.", hook: false },
|
|
91
|
+
{ name: "--wzl-handle-size-sm", type: "dimension", group: "handle", defaultValue: "7px", description: "A handle that is drawn but not draggable \u2014 a locked or pinned point. Smaller so it reads as inert next to a live one.", hook: false },
|
|
92
|
+
{ name: "--wzl-handle-size-lg", type: "dimension", group: "handle", defaultValue: "10px", description: "A handle that is a category of its own rather than one of a row \u2014 a curve's endpoint. Larger so it separates from the handles it sits in line with.", hook: false },
|
|
93
|
+
{ name: "--wzl-field-pad-x", type: "dimension", group: "field", defaultValue: "8px", description: "Horizontal padding inside a boxed field. Pairs with --wzl-field-h, which is a container override and has no :root default.", hook: false },
|
|
94
|
+
{ name: "--wzl-glass-blur", type: "dimension", group: "glass", defaultValue: "3px", description: "Backdrop blur radius for frosted surfaces. Pairs with glass-tint.", hook: false },
|
|
95
|
+
{ name: "--wzl-font-size", type: "dimension", group: "font", defaultValue: "13px", description: "Controls and body text.", hook: false },
|
|
96
|
+
{ name: "--wzl-tracking-none", type: "dimension", group: "tracking", defaultValue: "0", description: "", hook: false },
|
|
97
|
+
{ name: "--wzl-tracking-wide", type: "dimension", group: "tracking", defaultValue: "0.06em", description: "Uppercase section headings.", hook: false },
|
|
98
|
+
{ name: "--wzl-tracking-wider", type: "dimension", group: "tracking", defaultValue: "0.08em", description: "Uppercase at 11px and below.", hook: false },
|
|
99
|
+
{ name: "--wzl-z-toolbar", type: "number", group: "z", defaultValue: "10", description: "", hook: false },
|
|
100
|
+
{ name: "--wzl-z-overlay", type: "number", group: "z", defaultValue: "20", description: "", hook: false },
|
|
101
|
+
{ name: "--wzl-z-modal", type: "number", group: "z", defaultValue: "30", description: "", hook: false },
|
|
102
|
+
{ name: "--wzl-leading-tight", type: "number", group: "leading", defaultValue: "1", description: "Single-line controls; the box sets the height.", hook: false },
|
|
103
|
+
{ name: "--wzl-leading-snug", type: "number", group: "leading", defaultValue: "1.2", description: "Headings and two-line labels.", hook: false },
|
|
104
|
+
{ name: "--wzl-leading", type: "number", group: "leading", defaultValue: "1.4", description: "Body and anything that wraps.", hook: false },
|
|
105
|
+
{ name: "--wzl-backdrop", type: "gradient", group: "backdrop", defaultValue: "none", description: "Layered backdrop fill for a page or lab root. `none` here; a theme with a signature background sets it.", hook: false },
|
|
106
|
+
{ name: "--wzl-motion-fast", type: "duration", group: "motion", defaultValue: "120ms", description: "Micro-interactions \u2014 hover, focus, pressed.", hook: false },
|
|
107
|
+
{ name: "--wzl-motion-medium", type: "duration", group: "motion", defaultValue: "240ms", description: "Entrances and exits \u2014 toasts, popovers, panels.", hook: false },
|
|
108
|
+
{ name: "--wzl-ease-in-cubic", type: "cubicBezier", group: "ease", defaultValue: "cubic-bezier(0.32, 0, 0.67, 0)", description: "", hook: false },
|
|
109
|
+
{ name: "--wzl-ease-out-cubic", type: "cubicBezier", group: "ease", defaultValue: "cubic-bezier(0.33, 1, 0.68, 1)", description: "", hook: false },
|
|
110
|
+
{ name: "--wzl-ease-in-out-cubic", type: "cubicBezier", group: "ease", defaultValue: "cubic-bezier(0.65, 0, 0.35, 1)", description: "", hook: false },
|
|
111
|
+
{ name: "--wzl-ease-out-back", type: "cubicBezier", group: "ease", defaultValue: "cubic-bezier(0.34, 1.56, 0.64, 1)", description: "", hook: false },
|
|
112
|
+
{ name: "--wzl-font-ui", type: "fontFamily", group: "font", defaultValue: "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif", description: "Condensed UI/display face. The heavier cuts get blocky at any size, so the weight tokens stay in the 200-400 range.", hook: false },
|
|
113
|
+
{ name: "--wzl-font-display", type: "fontFamily", group: "font", defaultValue: "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif", description: "", hook: false },
|
|
114
|
+
{ name: "--wzl-font-body", type: "fontFamily", group: "font", defaultValue: "Inter, system-ui, -apple-system, 'Segoe UI', sans-serif", description: "", hook: false },
|
|
115
|
+
{ name: "--wzl-font-mono", type: "fontFamily", group: "font", defaultValue: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace", description: "", hook: false },
|
|
116
|
+
{ name: "--wzl-font-weight-light", type: "fontWeight", group: "font", defaultValue: "200", description: "", hook: false },
|
|
117
|
+
{ name: "--wzl-font-weight-normal", type: "fontWeight", group: "font", defaultValue: "300", description: "", hook: false },
|
|
118
|
+
{ name: "--wzl-font-weight-medium", type: "fontWeight", group: "font", defaultValue: "350", description: "", hook: false },
|
|
119
|
+
{ name: "--wzl-font-weight-bold", type: "fontWeight", group: "font", defaultValue: "400", description: "", hook: false },
|
|
120
|
+
{ name: "--wzl-space-xs", type: "dimension", group: "space", defaultValue: "4px", description: "Alias for space-2. The t-shirt names name every other rung of the ladder.", hook: false },
|
|
121
|
+
{ name: "--wzl-space-sm", type: "dimension", group: "space", defaultValue: "8px", description: "Alias for space-4. The t-shirt names name every other rung of the ladder.", hook: false },
|
|
122
|
+
{ name: "--wzl-space-md", type: "dimension", group: "space", defaultValue: "12px", description: "Alias for space-6. The t-shirt names name every other rung of the ladder.", hook: false },
|
|
123
|
+
{ name: "--wzl-space-lg", type: "dimension", group: "space", defaultValue: "16px", description: "Alias for space-8. The t-shirt names name every other rung of the ladder.", hook: false },
|
|
124
|
+
{ name: "--wzl-disclosure-gap", type: "dimension", group: "disclosure", defaultValue: "4px", description: "Gap between a Disclosure\u2019s twisty and its label.", hook: true },
|
|
125
|
+
{ name: "--wzl-disclosure-target", type: "dimension", group: "disclosure", defaultValue: "20px", description: "Hit-target square of a Disclosure twisty, and of a labkit LayerList row\u2019s.", hook: true },
|
|
126
|
+
{ name: "--wzl-number-field-width", type: "dimension", group: "number", defaultValue: "9ch", description: "Width of a NumberField\u2019s input.", hook: true },
|
|
127
|
+
{ name: "--wzl-prefs-column-width", type: "dimension", group: "prefs", defaultValue: "300px", description: "Width of the Prefs category column.", hook: true },
|
|
128
|
+
{ name: "--wzl-prop-number-width", type: "dimension", group: "prop", defaultValue: "9ch", description: "Width of a numeric field in the Properties panel.", hook: true },
|
|
129
|
+
{ name: "--wzl-prop-row-h", type: "dimension", group: "prop", defaultValue: "20px", description: "Floor under every Properties row, whatever control it holds. Unset, it is the panel\u2019s own field height, so it follows density \u2014 20px at the default one.", hook: true },
|
|
130
|
+
{ name: "--wzl-prop-text-width", type: "dimension", group: "prop", defaultValue: "16ch", description: "Width of a text field in the Properties panel.", hook: true },
|
|
131
|
+
{ name: "--wzl-property-readout-w", type: "dimension", group: "property", defaultValue: "2.8em", description: "Minimum width of a Properties row\u2019s value readout.", hook: true },
|
|
132
|
+
{ name: "--wzl-swatch-size", type: "dimension", group: "swatch", defaultValue: "28px", description: "Minimum cell of a swatch grid \u2014 PatternPicker, and any panel laying swatches out the same way.", hook: true },
|
|
133
|
+
{ name: "--wzl-timeline-label-w", type: "dimension", group: "timeline", defaultValue: "120px", description: "Width of the Timeline\u2019s track-label gutter.", hook: true },
|
|
134
|
+
{ name: "--wzl-timeline-value-axis-w", type: "dimension", group: "timeline", defaultValue: "32px", description: "Width reserved for the Timeline\u2019s value axis.", hook: true }
|
|
106
135
|
];
|
|
107
136
|
|
|
108
|
-
// src/
|
|
109
|
-
var
|
|
137
|
+
// src/tokenPx.ts
|
|
138
|
+
var DEFAULTS = new Map(TOKEN_MANIFEST.map((t) => [t.name, t.defaultValue]));
|
|
139
|
+
function tokenPx(name, resolved) {
|
|
140
|
+
const raw = resolved?.[name] ?? DEFAULTS.get(name);
|
|
141
|
+
const m = /^(-?\d*\.?\d+)px$/.exec((raw ?? "").trim());
|
|
142
|
+
if (!m) throw new Error(`tokenPx: ${name} is not a px length (${raw ?? "unknown token"})`);
|
|
143
|
+
return Number(m[1]);
|
|
144
|
+
}
|
|
110
145
|
|
|
111
146
|
// src/dtcg/flatten.ts
|
|
112
147
|
var isToken = (v) => typeof v === "object" && v !== null && "$value" in v;
|
|
@@ -145,20 +180,25 @@ function loadDTCG(doc) {
|
|
|
145
180
|
if (typeof doc.name !== "string" || doc.name === "") {
|
|
146
181
|
throw new Error('DTCG document needs a string "name"');
|
|
147
182
|
}
|
|
148
|
-
const modes = {};
|
|
149
|
-
for (const [mode, body] of Object.entries(doc.modes ?? {})) {
|
|
150
|
-
modes[mode] = flattenTokens(body);
|
|
151
|
-
}
|
|
152
183
|
const base = doc.extends === void 0 ? weaselTheme : doc.extends;
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
184
|
+
const primitives = flattenTokens(doc.primitives ?? {});
|
|
185
|
+
const modeNames = Object.keys(doc.modes ?? {});
|
|
186
|
+
const modes = Object.fromEntries(modeNames.map((m) => [m, flattenTokens(doc.modes[m])]));
|
|
187
|
+
const tokens = { ...primitives };
|
|
188
|
+
for (const name of new Set(modeNames.flatMap((m) => Object.keys(modes[m])))) {
|
|
189
|
+
const branch = { by: "mode" };
|
|
190
|
+
for (const m of modeNames) {
|
|
191
|
+
const t = modes[m][name] ?? primitives[name];
|
|
192
|
+
if (t) branch[m] = t;
|
|
193
|
+
}
|
|
194
|
+
tokens[name] = branch;
|
|
195
|
+
}
|
|
196
|
+
const inherited = base ? themeAxes(base).mode?.default : void 0;
|
|
197
|
+
const defaultMode = typeof doc.defaultMode === "string" ? doc.defaultMode : inherited ?? "dark";
|
|
198
|
+
const axes = modeNames.length > 0 ? { mode: { default: defaultMode, values: Object.fromEntries(modeNames.map((m) => [m, {}])) } } : {};
|
|
199
|
+
return { name: doc.name, extends: base, axes, tokens };
|
|
160
200
|
}
|
|
161
201
|
|
|
162
|
-
export { TOKEN_MANIFEST, loadDTCG };
|
|
202
|
+
export { TOKEN_MANIFEST, loadDTCG, tokenPx };
|
|
163
203
|
//# sourceMappingURL=index.js.map
|
|
164
204
|
//# sourceMappingURL=index.js.map
|