@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
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,20 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export {
|
|
1
|
+
import { o as ColorList, p as ColorSourceContext, q as TokenName, r as ResolvedTheme, a as Theme, S as Selection, s as TokenValue } from './definition-CSeERbSL.js';
|
|
2
|
+
export { t as AxisDef, A as AxisDefs, u as AxisValue, v as BAKED_THEMES, B as BakedTheme, w as ByAxis, x as ColorContext, y as ColorListItem, F as FlatTokens, G as GeneratedColors, z as GeneratedTheme, P as PinObject, e as PinValue, D as RampColors, R as RawToken, E as SerializableColorList, H as THEMES, I as THEME_SOURCES, T as ThemeDefinition, J as ThemeInput, V as Varying, K as colorCount, M as defineTheme, Q as enumerateSelections, U as fullSelection, W as isByAxis, X as rampSteps, Y as resolveTheme, Z as selectionKey, _ as themeAxes, $ as themeTones, a0 as weaselTheme } from './definition-CSeERbSL.js';
|
|
3
3
|
export { C as ColorMode, a as ColorModePreference, i as isColorModePreference } from './colorMode-CoklZomJ.js';
|
|
4
|
+
import { ColorSource, ColorLiteral } from '@weasel-js/paint';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* The `i`th color of `list`, wrapping. A ramp list reads the resolved theme, so
|
|
8
|
+
* the answer follows its mode; a `ColorSource` item resolves against the
|
|
9
|
+
* context's palette, then its theme. Throws on an item nothing answers.
|
|
10
|
+
*/
|
|
11
|
+
declare function colorAt(list: ColorList, i: number, ctx?: ColorSourceContext): string;
|
|
12
|
+
/**
|
|
13
|
+
* As `colorAt`, but a ramp list, and an item that names the theme, answers
|
|
14
|
+
* with its custom property (`var(--wzl-swatch-sky)`), so a color written into
|
|
15
|
+
* CSS follows a mode change without re-rendering, provider or not.
|
|
16
|
+
*/
|
|
17
|
+
declare function colorCssAt(list: ColorList, i: number, ctx?: ColorSourceContext): string;
|
|
4
18
|
|
|
5
19
|
/** One row of `TOKEN_MANIFEST`: a token, its DTCG type, the name-prefix
|
|
6
20
|
* group it belongs to, its value in the default theme and selection, and
|
|
@@ -66,6 +80,7 @@ declare function applyTheme(el: HTMLElement, theme: Theme, selection?: Selection
|
|
|
66
80
|
*/
|
|
67
81
|
declare function resolveCurrentColor(value: string, current: string): string;
|
|
68
82
|
|
|
83
|
+
/** What `loadDTCG` reads: a `toDTCG` export, or a document shaped like one. */
|
|
69
84
|
interface DtcgDocument {
|
|
70
85
|
name?: unknown;
|
|
71
86
|
defaultMode?: unknown;
|
|
@@ -96,6 +111,26 @@ declare function serializeTokenValue(type: string, value: TokenValue): string;
|
|
|
96
111
|
*/
|
|
97
112
|
declare function parseTokenValue(type: string, text: string): TokenValue;
|
|
98
113
|
|
|
114
|
+
/** The name the tone list answers to: `{ ref: 'tone', index: 2 }` is the third tone, wrapping. */
|
|
115
|
+
declare const TONE_REF = "tone";
|
|
116
|
+
|
|
117
|
+
/**
|
|
118
|
+
* Resolve `source` to a literal, for a surface drawn without the cascade. A ref
|
|
119
|
+
* names an entry of the context's palette first, then the theme: `tone` with an
|
|
120
|
+
* index into the tone list, a token by its name without the `--wzl-` prefix, a
|
|
121
|
+
* ramp by its name with the index of a step, or a custom property spelled out.
|
|
122
|
+
* `null` for a name nothing answers, a token that is not a color, and a custom
|
|
123
|
+
* property the theme does not define.
|
|
124
|
+
*/
|
|
125
|
+
declare function colorSourceLiteral(source: ColorSource, ctx?: ColorSourceContext): ColorLiteral | null;
|
|
126
|
+
/**
|
|
127
|
+
* `source` as a CSS color, naming what `colorSourceLiteral` resolves. A ref the
|
|
128
|
+
* theme answers is written as its custom property, so it follows the cascade
|
|
129
|
+
* with no re-render and a property spelled out need not be the theme's;
|
|
130
|
+
* everything else is written as the literal it resolves to.
|
|
131
|
+
*/
|
|
132
|
+
declare function colorSourceCss(source: ColorSource, ctx?: ColorSourceContext): string | null;
|
|
133
|
+
|
|
99
134
|
/**
|
|
100
135
|
* The vocabulary of stances, and the slots a theme styles a stanced surface with.
|
|
101
136
|
*
|
|
@@ -140,4 +175,4 @@ interface StanceLookup<S extends string> {
|
|
|
140
175
|
*/
|
|
141
176
|
declare function resolveStanceSlots<S extends string>(tokens: Readonly<Record<string, string>>, base: Readonly<Record<S, string>>, { stance, nested, stanced }?: StanceLookup<S>): Record<S, string>;
|
|
142
177
|
|
|
143
|
-
export { ResolvedTheme, STANCES, STANCE_SLOTS, Selection, type Stance, type StanceLookup, type StanceSlot, TOKEN_MANIFEST, Theme, type TokenManifestEntry, TokenName, TokenValue, applyTheme, loadDTCG, parseTokenValue, resolveCurrentColor, resolveStanceSlots, serializeTokenValue, stanceSlotNames, tokenPx };
|
|
178
|
+
export { ColorList, ColorSourceContext, type DtcgDocument, ResolvedTheme, STANCES, STANCE_SLOTS, Selection, type Stance, type StanceLookup, type StanceSlot, TOKEN_MANIFEST, TONE_REF, Theme, type TokenManifestEntry, TokenName, TokenValue, applyTheme, colorAt, colorCssAt, colorSourceCss, colorSourceLiteral, loadDTCG, parseTokenValue, resolveCurrentColor, resolveStanceSlots, serializeTokenValue, stanceSlotNames, tokenPx };
|
package/dist/index.js
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
export { BAKED_THEMES, THEMES, THEME_SOURCES, applyTheme, colorAt, colorCount, colorCssAt, defineTheme, isColorModePreference, rampSteps, themeTones, weaselTheme } from './chunk-EFGZ56CE.js';
|
|
1
|
+
export { TONE_REF, applyTheme, colorAt, colorCount, colorCssAt, colorSourceCss, colorSourceLiteral, isColorModePreference, rampSteps, resolveCurrentColor, themeTones } from './chunk-3NIEJ77B.js';
|
|
3
2
|
import { AXES_EXT, overrideKey, ALPHA_EXT } from './chunk-Z675UQ26.js';
|
|
4
|
-
import {
|
|
5
|
-
export {
|
|
3
|
+
import { themeAxes } from './chunk-2PY2YTDY.js';
|
|
4
|
+
export { parseTokenValue, resolveTheme, serializeTokenValue, themeAxes } from './chunk-2PY2YTDY.js';
|
|
5
|
+
import { weaselTheme } from './chunk-JX2OC444.js';
|
|
6
|
+
export { BAKED_THEMES, THEMES, THEME_SOURCES, defineTheme, weaselTheme } from './chunk-JX2OC444.js';
|
|
7
|
+
import { mergeAxes } from './chunk-P5F3GZV6.js';
|
|
8
|
+
export { enumerateSelections, fullSelection, isByAxis, selectionKey } from './chunk-P5F3GZV6.js';
|
|
6
9
|
import { isPlainObject } from '@weasel-js/registry';
|
|
7
10
|
|
|
8
11
|
// src/generated/manifest.ts
|
|
@@ -62,6 +65,7 @@ var TOKEN_MANIFEST = [
|
|
|
62
65
|
{ name: "--wzl-secondary-fg", type: "color", group: "secondary", defaultValue: "#dc9d15", description: "Secondary accent for foreground use: a second voice beside the accent, such as a value the panel derived rather than one the user set. Picked from the ramp so it clears 4.5:1 on the surface in both modes.", hook: false },
|
|
63
66
|
{ 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 },
|
|
64
67
|
{ 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 },
|
|
68
|
+
{ name: "--wzl-scrim", type: "color", group: "scrim", defaultValue: "rgba(0, 0, 0, 0.4)", description: "What a modal dims the page behind it with.", hook: false },
|
|
65
69
|
{ name: "--wzl-code-keyword", type: "color", group: "code", defaultValue: "#955cf9", description: "Keywords in highlighted code.", hook: false },
|
|
66
70
|
{ name: "--wzl-code-string", type: "color", group: "code", defaultValue: "#48e628", description: "String literals in highlighted code.", hook: false },
|
|
67
71
|
{ name: "--wzl-code-number", type: "color", group: "code", defaultValue: "#e69628", description: "Numbers in highlighted code.", hook: false },
|
|
@@ -114,6 +118,7 @@ var TOKEN_MANIFEST = [
|
|
|
114
118
|
{ name: "--wzl-line-subtle", type: "color", group: "line", defaultValue: "rgba(230, 231, 233, 0.1)", description: "Barely-there separators (table rows).", hook: false },
|
|
115
119
|
{ name: "--wzl-line", type: "color", group: "line", defaultValue: "rgba(230, 231, 233, 0.2)", description: "Primary gridlines on sunken surfaces.", hook: false },
|
|
116
120
|
{ name: "--wzl-line-strong", type: "color", group: "line", defaultValue: "rgba(230, 231, 233, 0.4)", description: "Axes and emphasized dividers.", hook: false },
|
|
121
|
+
{ name: "--wzl-border-on-sunken", type: "color", group: "border", defaultValue: "rgba(230, 231, 233, 0.12)", description: "The edge of a box filled with surface-sunken. Stepped from the text color, because light mode's border is the sunken fill's own gray.", hook: false },
|
|
117
122
|
{ name: "--wzl-curve-color", type: "color", group: "curve", defaultValue: "#8c94ee", description: "Drawn data curves. Routes through the bright accent because accent-base is too dim on sunken surfaces.", hook: false },
|
|
118
123
|
{ name: "--wzl-accent", type: "color", group: "accent", defaultValue: "#5b63c9", description: "", hook: false },
|
|
119
124
|
{ name: "--wzl-accent-hover", type: "color", group: "accent", defaultValue: "#8c94ee", description: "", hook: false },
|
|
@@ -146,20 +151,27 @@ var TOKEN_MANIFEST = [
|
|
|
146
151
|
{ 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 },
|
|
147
152
|
{ 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 },
|
|
148
153
|
{ 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 },
|
|
154
|
+
{ name: "--wzl-handle-dot-size", type: "dimension", group: "handle", defaultValue: "8px", description: "Diameter of a round handle \u2014 a plain anchor on a curve. Its own rank beside handle-size, because a circle and a diamond of one edge do not read as one size.", hook: false },
|
|
155
|
+
{ name: "--wzl-handle-dot-size-sm", type: "dimension", group: "handle", defaultValue: "7px", description: "A round handle that belongs to another point \u2014 a bezier control handle at the end of its stem.", hook: false },
|
|
149
156
|
{ name: "--wzl-checker-a", type: "color", group: "checker", defaultValue: "#25272c", description: "One square of the transparency checker drawn under a paint that is empty, mixed or translucent. Paint it as repeating-conic-gradient(var(--wzl-checker-a) 0% 25%, var(--wzl-checker-b) 0% 50%) 50% / var(--wzl-checker-size) var(--wzl-checker-size).", hook: false },
|
|
150
157
|
{ name: "--wzl-checker-b", type: "color", group: "checker", defaultValue: "#181a1e", description: "The other square of the transparency checker.", hook: false },
|
|
151
158
|
{ name: "--wzl-checker-size", type: "dimension", group: "checker", defaultValue: "8px", description: "Edge of one repeat of the transparency checker: two squares by two.", hook: false },
|
|
152
159
|
{ name: "--wzl-workspace-surface", type: "color", group: "workspace", defaultValue: "#0e0f12", description: "Ground of a canvas app's workspace \u2014 the area around the document page.", hook: false },
|
|
153
160
|
{ name: "--wzl-workspace-line", type: "color", group: "workspace", defaultValue: "rgba(230, 231, 233, 0.1)", description: "Marks drawn over workspace-surface, such as its diagonal stripes, so the page reads as the thing on top.", hook: false },
|
|
154
161
|
{ 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 },
|
|
162
|
+
{ name: "--wzl-gloss", type: "number", group: "gloss", defaultValue: "0", description: "How much glass a boxed button and a selected segment wear, from 0 to 1: at 0 a flat fill, at 1 the full ramp, specular gloss, rim, and drop shadow.", hook: false },
|
|
155
163
|
{ name: "--wzl-glass-blur", type: "dimension", group: "glass", defaultValue: "3px", description: "Backdrop blur radius for frosted surfaces. Pairs with glass-tint.", hook: false },
|
|
156
164
|
{ name: "--wzl-font-size", type: "dimension", group: "font", defaultValue: "15px", description: "Controls and body text.", hook: false },
|
|
157
165
|
{ name: "--wzl-tracking-none", type: "dimension", group: "tracking", defaultValue: "0", description: "", hook: false },
|
|
158
166
|
{ name: "--wzl-tracking-wide", type: "dimension", group: "tracking", defaultValue: "0.06em", description: "Uppercase section headings.", hook: false },
|
|
159
167
|
{ name: "--wzl-tracking-wider", type: "dimension", group: "tracking", defaultValue: "0.08em", description: "Uppercase at 11px and below.", hook: false },
|
|
160
|
-
{ name: "--wzl-z-toolbar", type: "number", group: "z", defaultValue: "10", description: "", hook: false },
|
|
161
|
-
{ name: "--wzl-z-overlay", type: "number", group: "z", defaultValue: "20", description: "", hook: false },
|
|
162
|
-
{ name: "--wzl-z-
|
|
168
|
+
{ name: "--wzl-z-toolbar", type: "number", group: "z", defaultValue: "10", description: "Chrome pinned over a workspace.", hook: false },
|
|
169
|
+
{ name: "--wzl-z-overlay", type: "number", group: "z", defaultValue: "20", description: "A panel or readout floating over the chrome.", hook: false },
|
|
170
|
+
{ name: "--wzl-z-hud", type: "number", group: "z", defaultValue: "900", description: "Debug readouts, over the app and under anything modal.", hook: false },
|
|
171
|
+
{ name: "--wzl-z-modal", type: "number", group: "z", defaultValue: "1000", description: "A dialog or lightbox and its scrim.", hook: false },
|
|
172
|
+
{ name: "--wzl-z-toast", type: "number", group: "z", defaultValue: "1100", description: "Toasts, which stay readable over a dialog.", hook: false },
|
|
173
|
+
{ name: "--wzl-z-popover", type: "number", group: "z", defaultValue: "1200", description: "Tooltips and callouts, which a dialog or a toast can open.", hook: false },
|
|
174
|
+
{ name: "--wzl-z-drag", type: "number", group: "z", defaultValue: "10000", description: "A drag ghost, over everything it can be dragged across.", hook: false },
|
|
163
175
|
{ name: "--wzl-leading-tight", type: "number", group: "leading", defaultValue: "1", description: "Single-line controls; the box sets the height.", hook: false },
|
|
164
176
|
{ name: "--wzl-leading-snug", type: "number", group: "leading", defaultValue: "1.2", description: "Headings and two-line labels.", hook: false },
|
|
165
177
|
{ name: "--wzl-leading", type: "number", group: "leading", defaultValue: "1.4", description: "Body and anything that wraps.", hook: false },
|
|
@@ -183,11 +195,25 @@ var TOKEN_MANIFEST = [
|
|
|
183
195
|
{ 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 },
|
|
184
196
|
{ 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 },
|
|
185
197
|
{ 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 },
|
|
198
|
+
{ name: "--wzl-bevel-pressed", type: "shadow", group: "bevel", defaultValue: "none", description: "Box shadow of a Button held down, or of a Button or a toolbar\u2019s button that stays down. Unset, a Button draws its own inset (--btn-relief-pressed) and a toolbar\u2019s button none.", hook: true },
|
|
199
|
+
{ name: "--wzl-bevel-raised", type: "shadow", group: "bevel", defaultValue: "none", description: "Box shadow of a raised face: a Button, a PropertyPanel, a menu, popover, tooltip, or Dialog, a thumb, the chosen segment of a segmented control, a toolbar\u2019s strip, and every edge of a tab but the one its panel is on. A theme that draws its edges in relief declares it; unset, each keeps the shadow it draws for itself, which for most is none.", hook: true },
|
|
200
|
+
{ name: "--wzl-bevel-sunken", type: "shadow", group: "bevel", defaultValue: "none", description: "Box shadow of a well: the frame a field draws its value in, a checkbox, a radio, the track of a switch, a slider, or a segmented control, and a cell of a flat one.", hook: true },
|
|
201
|
+
{ name: "--wzl-button-gloss", type: "number", group: "button", defaultValue: "1", description: "Opacity of the specular sheen over a Button\u2019s upper half. 0 for a flat face.", hook: true },
|
|
202
|
+
{ name: "--wzl-button-pressed-surface", type: "color", group: "button", defaultValue: "var(--btn-glass-pressed)", description: "Background of a secondary Button while it is held down.", hook: true },
|
|
203
|
+
{ name: "--wzl-button-primary-bevel", type: "shadow", group: "button", defaultValue: "var(--wzl-bevel-raised)", description: "Box shadow of a primary Button, where it differs from --wzl-bevel-raised: the heavier frame of a default button.", hook: true },
|
|
204
|
+
{ name: "--wzl-button-primary-fg", type: "color", group: "button", defaultValue: "var(--wzl-fg-on-accent)", description: "Text color of a primary Button, for a theme whose --wzl-button-primary-surface is not an accent fill.", hook: true },
|
|
205
|
+
{ name: "--wzl-button-primary-pressed-surface", type: "color", group: "button", defaultValue: "var(--btn-glass-pressed)", description: "Background of a primary Button while it is held down.", hook: true },
|
|
206
|
+
{ name: "--wzl-button-primary-surface", type: "color", group: "button", defaultValue: "var(--btn-glass)", description: "Background of a primary Button. Unset, glass tinted with --wzl-accent.", hook: true },
|
|
207
|
+
{ name: "--wzl-button-radius", type: "dimension", group: "button", defaultValue: "calc(var(--btn-height) * 0.1)", description: "Corner radius of a Button. Unset, a tenth of its height.", hook: true },
|
|
208
|
+
{ name: "--wzl-button-surface", type: "color", group: "button", defaultValue: "var(--btn-glass)", description: "Background of a secondary Button. Unset, neutral glass mixed from the surfaces.", hook: true },
|
|
209
|
+
{ name: "--wzl-button-text-shadow", type: "shadow", group: "button", defaultValue: "var(--btn-engraving)", description: "Text shadow of a primary or secondary Button\u2019s label. Unset, an engraving stamp under the glyphs in dark mode.", hook: true },
|
|
186
210
|
{ name: "--wzl-detail-figure-min-width", type: "dimension", group: "detail", defaultValue: "8ch", description: 'Least width of a value cell in a `values="figures"` DetailList.', hook: true },
|
|
187
211
|
{ name: "--wzl-dialog-max-width", type: "dimension", group: "dialog", defaultValue: "900px", description: "Widest a Dialog grows, modal or inline, before its contents wrap or scroll.", hook: true },
|
|
188
212
|
{ name: "--wzl-disclosure-fill", type: "color", group: "disclosure", defaultValue: "var(--wzl-accent-fg)", description: "Fill of a Disclosure\u2019s fold mark.", hook: true },
|
|
189
213
|
{ name: "--wzl-disclosure-gap", type: "dimension", group: "disclosure", defaultValue: "4px", description: "Gap between a Disclosure\u2019s twisty and its label.", hook: true },
|
|
190
214
|
{ name: "--wzl-disclosure-target", type: "dimension", group: "disclosure", defaultValue: "20px", description: "Hit-target square of a Disclosure twisty, and the twisty column of a LayerList row.", hook: true },
|
|
215
|
+
{ name: "--wzl-field-border", type: "border", group: "field", defaultValue: "1px solid var(--wzl-border)", description: "Border of a field\u2019s frame. A theme whose --wzl-bevel-sunken draws the edge sets it to a border of no width.", hook: true },
|
|
216
|
+
{ name: "--wzl-field-focus-shadow", type: "shadow", group: "field", defaultValue: "0 0 0 1px var(--wzl-focus-ring)", description: "Box shadow of a field\u2019s frame while it holds focus. It replaces --wzl-bevel-sunken there, so a beveled theme restates the bevel in it.", hook: true },
|
|
191
217
|
{ name: "--wzl-input-surface", type: "color", group: "input", defaultValue: "var(--wzl-surface-sunken)", description: "Surface a field\u2019s frame sits on \u2014 Input, NumberField, ComboBox, Select, MenuButton, ListEditor and the property rows. Set it on any container whose own background is the default \u2014 a sunken rail or panel \u2014 where an unset field is the same color as what is behind it.", hook: true },
|
|
192
218
|
{ name: "--wzl-number-field-width", type: "dimension", group: "number", defaultValue: "9ch", description: "Width of a NumberField\u2019s input.", hook: true },
|
|
193
219
|
{ name: "--wzl-params-label-align", type: "string", group: "params", defaultValue: "start", description: "Text alignment of row labels in PropertyPanel, Prefs and labkit\u2019s ControlPanel.", hook: true },
|
|
@@ -198,7 +224,9 @@ var TOKEN_MANIFEST = [
|
|
|
198
224
|
{ name: "--wzl-prefs-column-width", type: "dimension", group: "prefs", defaultValue: "300px", description: "Width of the Prefs category column.", hook: true },
|
|
199
225
|
{ name: "--wzl-prefs-control-min", type: "dimension", group: "prefs", defaultValue: "80px", description: "Narrowest a PrefsForm row\u2019s control gets in a two-across pane before the row wraps it under its label.", hook: true },
|
|
200
226
|
{ name: "--wzl-prefs-rail-width", type: "dimension", group: "prefs", defaultValue: "216px", description: "Width of the Prefs navigation rail.", hook: true },
|
|
227
|
+
{ name: "--wzl-prop-columns", type: "string", group: "prop", defaultValue: "1fr 1fr", description: "Column tracks of a Properties list, group body, and subpanel. A container too narrow for two columns sets `minmax(0, 1fr)` to stack every row.", hook: true },
|
|
201
228
|
{ name: "--wzl-prop-number-width", type: "dimension", group: "prop", defaultValue: "9ch", description: "Width of a numeric field in the Properties panel.", hook: true },
|
|
229
|
+
{ name: "--wzl-prop-panel-actions-align", type: "string", group: "prop", defaultValue: "center", description: "How a PropertyPanel\u2019s title row lines its actions up with the title: center, or baseline for actions that are text.", hook: true },
|
|
202
230
|
{ name: "--wzl-prop-panel-actions-basis", type: "dimension", group: "prop", defaultValue: "auto", description: "Width a PropertyPanel\u2019s title row gives its actions. Set, it holds that width whatever the actions are.", hook: true },
|
|
203
231
|
{ 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 },
|
|
204
232
|
{ name: "--wzl-prop-text-width", type: "dimension", group: "prop", defaultValue: "16ch", description: "Width of a text field in the Properties panel.", hook: true },
|
|
@@ -208,10 +236,19 @@ var TOKEN_MANIFEST = [
|
|
|
208
236
|
{ 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 },
|
|
209
237
|
{ name: "--wzl-timeline-label-w", type: "dimension", group: "timeline", defaultValue: "120px", description: "Width of the Timeline\u2019s track-label gutter.", hook: true },
|
|
210
238
|
{ name: "--wzl-timeline-value-axis-w", type: "dimension", group: "timeline", defaultValue: "32px", description: "Width reserved for the Timeline\u2019s value axis.", hook: true },
|
|
239
|
+
{ name: "--wzl-titlebar-align", type: "string", group: "titlebar", defaultValue: "start", description: "Text alignment of a `titlebar` frame\u2019s title along its strip.", hook: true },
|
|
240
|
+
{ name: "--wzl-titlebar-border", type: "border", group: "titlebar", defaultValue: "1px solid var(--_edge)", description: "Border of a `titlebar` frame. A theme whose --wzl-bevel-raised draws the edge sets it to a border of no width.", hook: true },
|
|
241
|
+
{ name: "--wzl-titlebar-fg", type: "color", group: "titlebar", defaultValue: "var(--_edge-ink)", description: "Text color on a `titlebar` frame\u2019s strip. Unset, black or white, whichever reads on the edge color.", hook: true },
|
|
242
|
+
{ name: "--wzl-titlebar-inset", type: "dimension", group: "titlebar", defaultValue: "0", description: "Padding between a `titlebar` frame\u2019s edge and its strip and body: the width of the bevel a theme draws there.", hook: true },
|
|
243
|
+
{ name: "--wzl-titlebar-label-pad", type: "dimension", group: "titlebar", defaultValue: "0", description: "Inline padding of the patch --wzl-titlebar-label-surface paints behind a `titlebar` frame\u2019s title.", hook: true },
|
|
244
|
+
{ name: "--wzl-titlebar-label-surface", type: "color", group: "titlebar", defaultValue: "transparent", description: "Background behind a `titlebar` frame\u2019s title alone, for a strip drawn in stripes that must not run through the letters.", hook: true },
|
|
245
|
+
{ name: "--wzl-titlebar-surface", type: "color", group: "titlebar", defaultValue: "var(--_edge)", description: "Background of the strip a `titlebar` frame carries its title in: a color, a gradient, or stripes. Unset, the frame\u2019s edge color. A frame that names a tone paints the tone instead.", hook: true },
|
|
246
|
+
{ name: "--wzl-titlebar-weight", type: "fontWeight", group: "titlebar", defaultValue: "var(--wzl-font-weight-bold)", description: "Font weight of a `titlebar` frame\u2019s title.", hook: true },
|
|
211
247
|
{ name: "--wzl-tree-fold-size", type: "dimension", group: "tree", defaultValue: "16px", description: "Size of the leading glyph a Tree folds a branch by, where its branches fold by their glyphs.", hook: true },
|
|
212
248
|
{ name: "--wzl-tree-font-size", type: "dimension", group: "tree", defaultValue: "var(--wzl-font-size-sm)", description: "Size of a Tree row\u2019s text.", hook: true },
|
|
213
249
|
{ name: "--wzl-tree-guide", type: "color", group: "tree", defaultValue: "var(--wzl-fg-subtle)", description: "Color of the bracket a Tree draws down a branch.", hook: true },
|
|
214
|
-
{ name: "--wzl-tree-indent", type: "dimension", group: "tree", defaultValue: "calc(var(--wzl-control-h-xs) + var(--wzl-space-2))", description: "Indent of each Tree level. Unset, it is one twisty and one gap, so a child\u2019s twisty sits under its parent\u2019s label.", hook: true }
|
|
250
|
+
{ name: "--wzl-tree-indent", type: "dimension", group: "tree", defaultValue: "calc(var(--wzl-control-h-xs) + var(--wzl-space-2))", description: "Indent of each Tree level. Unset, it is one twisty and one gap, so a child\u2019s twisty sits under its parent\u2019s label.", hook: true },
|
|
251
|
+
{ name: "--wzl-tree-leaf-indent", type: "dimension", group: "tree", defaultValue: "0", description: "How far in from its branches' glyphs a Tree with guides sets a row that folds nothing.", hook: true }
|
|
215
252
|
];
|
|
216
253
|
|
|
217
254
|
// src/tokenPx.ts
|
|
@@ -223,22 +260,6 @@ function tokenPx(name, resolved) {
|
|
|
223
260
|
return Number(m[1]);
|
|
224
261
|
}
|
|
225
262
|
|
|
226
|
-
// src/currentColor.ts
|
|
227
|
-
var NUMBER = String.raw`(\d*\.?\d+)(%?)`;
|
|
228
|
-
var RELATIVE = new RegExp(String.raw`^rgb\(\s*from\s+currentcolor\s+r\s+g\s+b\s*/\s*${NUMBER}\s*\)$`, "i");
|
|
229
|
-
var MIX = new RegExp(String.raw`^color-mix\(\s*in\s+[\w-]+\s*,\s*currentcolor\s+${NUMBER}\s*,\s*transparent\s*\)$`, "i");
|
|
230
|
-
var fraction = (n, pct) => Number(n) / (pct ? 100 : 1);
|
|
231
|
-
function resolveCurrentColor(value, current) {
|
|
232
|
-
const v = value.trim();
|
|
233
|
-
if (!/currentcolor/i.test(v)) return value;
|
|
234
|
-
if (/^currentcolor$/i.test(v)) return current;
|
|
235
|
-
const rel = RELATIVE.exec(v);
|
|
236
|
-
if (rel) return atAlpha(current, fraction(rel[1], rel[2]));
|
|
237
|
-
const mix = MIX.exec(v);
|
|
238
|
-
if (mix && mix[2] === "%") return withAlpha(current, fraction(mix[1], mix[2]));
|
|
239
|
-
throw new Error(`resolveCurrentColor: cannot flatten "${value}"`);
|
|
240
|
-
}
|
|
241
|
-
|
|
242
263
|
// src/dtcg/flatten.ts
|
|
243
264
|
var isToken = (v) => typeof v === "object" && v !== null && "$value" in v;
|
|
244
265
|
function flattenTokens(doc) {
|
|
@@ -388,6 +409,6 @@ function resolveStanceSlots(tokens, base, { stance, nested, stanced } = {}) {
|
|
|
388
409
|
return out;
|
|
389
410
|
}
|
|
390
411
|
|
|
391
|
-
export { STANCES, STANCE_SLOTS, TOKEN_MANIFEST, loadDTCG,
|
|
412
|
+
export { STANCES, STANCE_SLOTS, TOKEN_MANIFEST, loadDTCG, resolveStanceSlots, stanceSlotNames, tokenPx };
|
|
392
413
|
//# sourceMappingURL=index.js.map
|
|
393
414
|
//# sourceMappingURL=index.js.map
|