@weasel-js/theme 1.7.0 → 1.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/react.js CHANGED
@@ -1,6 +1,6 @@
1
- import { isColorModePreference, weaselTheme, themeTones, applyTheme } from './chunk-3KMZGDV5.js';
2
- export { isColorModePreference } from './chunk-3KMZGDV5.js';
3
- import { themeAxes, fullSelection, selectionKey, resolveTheme } from './chunk-C3S4A65R.js';
1
+ import { isColorModePreference, weaselTheme, themeTones, applyTheme } from './chunk-CKB2MZRY.js';
2
+ export { isColorModePreference } from './chunk-CKB2MZRY.js';
3
+ import { themeAxes, fullSelection, selectionKey, resolveTheme } from './chunk-AN5JVL2S.js';
4
4
  import { createContext, useState, useEffect, useCallback, useRef, useMemo, useLayoutEffect, useContext } from 'react';
5
5
  import { jsx } from 'react/jsx-runtime';
6
6
 
package/dist/tokens.css CHANGED
@@ -33,17 +33,17 @@
33
33
  --wzl-swatch-rose: #fa4590;
34
34
  --wzl-swatch-violet: #955cf9;
35
35
  /* Shortcut keys and index badges. The floor for chrome text. */
36
- --wzl-font-size-2xs: 9px;
36
+ --wzl-font-size-2xs: 10px;
37
37
  /* Tool-button labels under an icon. */
38
- --wzl-font-size-xs: 10px;
38
+ --wzl-font-size-xs: 12px;
39
39
  /* Chrome labels, status readouts, section headings. */
40
- --wzl-font-size-sm: 11px;
40
+ --wzl-font-size-sm: 13px;
41
41
  /* Controls and body text. */
42
- --wzl-font-size-md: 13px;
42
+ --wzl-font-size-md: 15px;
43
43
  /* Panel and dialog titles. */
44
- --wzl-font-size-lg: 16px;
44
+ --wzl-font-size-lg: 18px;
45
45
  /* The largest chrome text — a lab or app title. */
46
- --wzl-font-size-xl: 20px;
46
+ --wzl-font-size-xl: 23px;
47
47
  --wzl-space-1: 2px;
48
48
  --wzl-space-2: 4px;
49
49
  --wzl-space-3: 6px;
@@ -149,15 +149,15 @@
149
149
  /* Drawn data curves. Heavier than structural lines so data reads as primary content. */
150
150
  --wzl-curve-width: 3px;
151
151
  /* Height of a horizontal toolbar strip (ButtonBar, OptionsBar, ToolOptionsBar). Taller than control-h so the controls inside a strip are not flush with its edges. */
152
- --wzl-tb-height: 28px;
152
+ --wzl-tb-height: 32px;
153
153
  /* Height of the smallest interactive control -- a stepper, a keycap, a swatch button in a dense row. The rank below control-h-sm. */
154
- --wzl-control-h-xs: 18px;
154
+ --wzl-control-h-xs: 22px;
155
155
  /* Height of a control in a dense inspector -- a Properties field, a small Button. The rank below control-h, which sizes a standalone control. */
156
- --wzl-control-h-sm: 20px;
156
+ --wzl-control-h-sm: 24px;
157
157
  /* Height of an interactive control — button, input, select, segmented control. Distinct from tb-height, which sizes the strip a row of them sits in. */
158
- --wzl-control-h: 24px;
158
+ --wzl-control-h: 28px;
159
159
  /* 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. */
160
- --wzl-icon-button-size: 22px;
160
+ --wzl-icon-button-size: 26px;
161
161
  /* Height of a linear range track. The kit's single-thumb ranges all wear this; Slider's default 24px canvas track does not. */
162
162
  --wzl-slider-track-h: 4px;
163
163
  /* Diameter of a linear range thumb. */
@@ -214,6 +214,8 @@
214
214
  --wzl-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
215
215
  /* Condensed UI/display face. The heavier cuts get blocky at any size, so the weight tokens stay in the 200-400 range. */
216
216
  --wzl-font-ui: Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif;
217
+ /* The UI face with equal-width digits, for numbers read down a column or updated in place. Oswald Tabular carries only 0-9 and the figure space (U+2007); every other character falls through to the UI face. */
218
+ --wzl-font-numeric: 'Oswald Tabular', var(--wzl-font-ui);
217
219
  --wzl-font-display: Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif;
218
220
  --wzl-font-body: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
219
221
  --wzl-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
@@ -329,24 +331,6 @@
329
331
 
330
332
  [data-wzl-theme='weasel'][data-wzl-density='compact'],
331
333
  [data-wzl-density='compact'] {
332
- --wzl-font-size-2xs: 7px;
333
- --wzl-font-size-xs: 8px;
334
- --wzl-font-size-sm: 9px;
335
- --wzl-font-size-md: 11px;
336
- --wzl-font-size-lg: 14px;
337
- --wzl-font-size-xl: 17px;
338
- --wzl-tb-height: 24px;
339
- --wzl-control-h-xs: 16px;
340
- --wzl-control-h-sm: 18px;
341
- --wzl-control-h: 20px;
342
- --wzl-icon-button-size: 20px;
343
- --wzl-panel-title-size: var(--wzl-font-size-lg);
344
- --wzl-stance-preview-title-size: var(--wzl-font-size-xs);
345
- --wzl-font-size: var(--wzl-font-size-md);
346
- }
347
-
348
- [data-wzl-theme='weasel'][data-wzl-density='comfortable'],
349
- [data-wzl-density='comfortable'] {
350
334
  --wzl-font-size-2xs: 9px;
351
335
  --wzl-font-size-xs: 10px;
352
336
  --wzl-font-size-sm: 11px;
@@ -363,8 +347,8 @@
363
347
  --wzl-font-size: var(--wzl-font-size-md);
364
348
  }
365
349
 
366
- [data-wzl-theme='weasel'][data-wzl-density='roomy'],
367
- [data-wzl-density='roomy'] {
350
+ [data-wzl-theme='weasel'][data-wzl-density='comfortable'],
351
+ [data-wzl-density='comfortable'] {
368
352
  --wzl-font-size-2xs: 10px;
369
353
  --wzl-font-size-xs: 12px;
370
354
  --wzl-font-size-sm: 13px;
@@ -380,3 +364,21 @@
380
364
  --wzl-stance-preview-title-size: var(--wzl-font-size-xs);
381
365
  --wzl-font-size: var(--wzl-font-size-md);
382
366
  }
367
+
368
+ [data-wzl-theme='weasel'][data-wzl-density='roomy'],
369
+ [data-wzl-density='roomy'] {
370
+ --wzl-font-size-2xs: 12px;
371
+ --wzl-font-size-xs: 14px;
372
+ --wzl-font-size-sm: 15px;
373
+ --wzl-font-size-md: 18px;
374
+ --wzl-font-size-lg: 22px;
375
+ --wzl-font-size-xl: 28px;
376
+ --wzl-tb-height: 38px;
377
+ --wzl-control-h-xs: 26px;
378
+ --wzl-control-h-sm: 28px;
379
+ --wzl-control-h: 34px;
380
+ --wzl-icon-button-size: 32px;
381
+ --wzl-panel-title-size: var(--wzl-font-size-lg);
382
+ --wzl-stance-preview-title-size: var(--wzl-font-size-xs);
383
+ --wzl-font-size: var(--wzl-font-size-md);
384
+ }
package/fonts/README.md CHANGED
@@ -1,11 +1,12 @@
1
1
  # Bundled fonts
2
2
 
3
- Two OFL-1.1 faces, vendored so the kit never fetches a stylesheet from a
3
+ OFL-1.1 faces, vendored so the kit never fetches a stylesheet from a
4
4
  third-party host at runtime.
5
5
 
6
6
  | file | token | role |
7
7
  |---|---|---|
8
8
  | `oswald-latin-variable.woff2` | `--wzl-font-ui`, `--wzl-font-display` | condensed UI/display face, variable `wght 200–700` |
9
+ | `oswald-tabular-digits.woff2` | `--wzl-font-numeric` | Oswald's digits 0–9, each centered in the widest digit's advance at every weight, and a figure space (U+2007) that wide, as family `Oswald Tabular` |
9
10
  | `inter-latin.woff2` | `--wzl-font-body` | body/prose face, weight 400 |
10
11
 
11
12
  Loading them is opt-in: `import '@weasel-js/theme/fonts.css'`, or
@@ -19,7 +20,7 @@ with no error anywhere.
19
20
 
20
21
  ## Tooling
21
22
 
22
- Both commands need `fontTools` **with the Brotli extension** — without it,
23
+ These commands need `fontTools` **with the Brotli extension** — without it,
23
24
  `--flavor=woff2` fails with `ImportError: No module named brotli`. Homebrew's
24
25
  `fonttools` formula does not include it, so use a throwaway venv:
25
26
 
@@ -53,6 +54,26 @@ in the kit reads hints.
53
54
  Oswald's OFL notice carries **no Reserved Font Name**, so a subset may keep the
54
55
  family name.
55
56
 
57
+ ## Provenance — Oswald Tabular
58
+
59
+ Built from `oswald-latin-variable.woff2` by `scripts/oswald-tabular.py` (same
60
+ venv): subset to U+0030–0039 with no layout features, then every digit gets the
61
+ widest digit's advance at the default weight and at each `wght` master, its
62
+ outline shifted by half the difference so it stays centered, and `HVAR` is
63
+ rebuilt from the patched `gvar`. A blank U+2007 of the same width is added, because
64
+ Oswald has none and `Jog` and `DetailList` pad numbers with it. Oswald ships no `tnum` feature, so this is the
65
+ only way its figures line up in a column. The widest digit is `0` at every
66
+ weight, so no digit is padded past Oswald's own widest.
67
+
68
+ ```sh
69
+ /tmp/fontvenv/bin/python packages/theme/scripts/oswald-tabular.py
70
+ ```
71
+
72
+ It is a separate family rather than a patched Oswald so that only text asking
73
+ for `--wzl-font-numeric` gets tabular digits; running text keeps Oswald's
74
+ proportional ones. The face covers digits and the figure space alone, so the browser takes every
75
+ other character from the next family in the stack.
76
+
56
77
  ## Provenance — Inter
57
78
 
58
79
  Re-flavored from `assets/fonts/inter/inter.ttf`, which is already Inter v4.1
@@ -70,6 +91,6 @@ README for the original command):
70
91
 
71
92
  ## License
72
93
 
73
- Both faces are SIL Open Font License 1.1 — `OFL-Oswald.txt` and `OFL-Inter.txt`,
94
+ All three faces are SIL Open Font License 1.1 — `OFL-Oswald.txt` and `OFL-Inter.txt`,
74
95
  redistributed with the fonts as the license requires. The OFL covers these font
75
96
  binaries only; the package's code is MIT (see `../LICENSE`).
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@weasel-js/theme",
3
- "version": "1.7.0",
3
+ "version": "1.7.1",
4
4
  "description": "Design tokens shared by weasel-ui and weasel-hud — CSS variables + a parallel TS export.",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -29,7 +29,7 @@
29
29
  "./package.json": "./package.json"
30
30
  },
31
31
  "dependencies": {
32
- "@weasel-js/paint": "1.7.0"
32
+ "@weasel-js/paint": "1.7.1"
33
33
  },
34
34
  "peerDependencies": {
35
35
  "react": ">=18"