@weasel-js/theme 1.7.0 → 1.7.2

package/dist/react.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { a as Theme, S as Selection, o as ResolvedTheme, v as ColorList } from './definition-Dqt5o6LR.js';
+import { a as Theme, S as Selection, o as ResolvedTheme, v as ColorList } from './definition-DxvV2RH3.js';
 import { a as ColorModePreference, C as ColorMode } from './colorMode-CoklZomJ.js';
 export { i as isColorModePreference } from './colorMode-CoklZomJ.js';
 

package/dist/react.js

@@ -1,6 +1,6 @@
-import { isColorModePreference, weaselTheme, themeTones, applyTheme } from './chunk-3KMZGDV5.js';
-export { isColorModePreference } from './chunk-3KMZGDV5.js';
-import { themeAxes, fullSelection, selectionKey, resolveTheme } from './chunk-C3S4A65R.js';
+import { isColorModePreference, weaselTheme, themeTones, applyTheme } from './chunk-HO2AM2OB.js';
+export { isColorModePreference } from './chunk-HO2AM2OB.js';
+import { themeAxes, fullSelection, selectionKey, resolveTheme } from './chunk-AN5JVL2S.js';
 import { createContext, useState, useEffect, useCallback, useRef, useMemo, useLayoutEffect, useContext } from 'react';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/tokens.css

@@ -33,17 +33,17 @@
   --wzl-swatch-rose: #fa4590;
   --wzl-swatch-violet: #955cf9;
   /* Shortcut keys and index badges. The floor for chrome text. */
-  --wzl-font-size-2xs: 9px;
+  --wzl-font-size-2xs: 10px;
   /* Tool-button labels under an icon. */
-  --wzl-font-size-xs: 10px;
+  --wzl-font-size-xs: 12px;
   /* Chrome labels, status readouts, section headings. */
-  --wzl-font-size-sm: 11px;
+  --wzl-font-size-sm: 13px;
   /* Controls and body text. */
-  --wzl-font-size-md: 13px;
+  --wzl-font-size-md: 15px;
   /* Panel and dialog titles. */
-  --wzl-font-size-lg: 16px;
+  --wzl-font-size-lg: 18px;
   /* The largest chrome text — a lab or app title. */
-  --wzl-font-size-xl: 20px;
+  --wzl-font-size-xl: 23px;
   --wzl-space-1: 2px;
   --wzl-space-2: 4px;
   --wzl-space-3: 6px;
@@ -149,19 +149,23 @@
   /* Drawn data curves. Heavier than structural lines so data reads as primary content. */
   --wzl-curve-width: 3px;
   /* 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. */
-  --wzl-tb-height: 28px;
+  --wzl-tb-height: 32px;
   /* Height of the smallest interactive control -- a stepper, a keycap, a swatch button in a dense row. The rank below control-h-sm. */
-  --wzl-control-h-xs: 18px;
+  --wzl-control-h-xs: 22px;
   /* Height of a control in a dense inspector -- a Properties field, a small Button. The rank below control-h, which sizes a standalone control. */
-  --wzl-control-h-sm: 20px;
+  --wzl-control-h-sm: 24px;
   /* Height of an interactive control — button, input, select, segmented control. Distinct from tb-height, which sizes the strip a row of them sits in. */
-  --wzl-control-h: 24px;
+  --wzl-control-h: 28px;
   /* 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. */
-  --wzl-icon-button-size: 22px;
+  --wzl-icon-button-size: 26px;
   /* Height of a linear range track. The kit's single-thumb ranges all wear this; Slider's default 24px canvas track does not. */
   --wzl-slider-track-h: 4px;
   /* Diameter of a linear range thumb. */
   --wzl-slider-thumb-size: 8px;
+  /* How far past a range track's edge a press still lands on it. Invisible, and overlaps whatever sits beside the track rather than taking layout space. */
+  --wzl-slider-track-slop: 6px;
+  /* How far past a range thumb's edge a press still grabs the thumb rather than landing on the track. Sits over the track's own slop. */
+  --wzl-slider-thumb-slop: 6px;
   /* Accent proportion in a range track, as a color-mix percentage — not a color. Mixed into a real property, never into another custom property. */
   --wzl-slider-track-mix: 18%;
   /* Accent proportion in a range thumb, as a color-mix percentage — not a color. */
@@ -214,6 +218,8 @@
   --wzl-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
   /* Condensed UI/display face. The heavier cuts get blocky at any size, so the weight tokens stay in the 200-400 range. */
   --wzl-font-ui: Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif;
+  /* 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. */
+  --wzl-font-numeric: 'Oswald Tabular', var(--wzl-font-ui);
   --wzl-font-display: Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif;
   --wzl-font-body: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
   --wzl-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
@@ -329,24 +335,6 @@
 
 [data-wzl-theme='weasel'][data-wzl-density='compact'],
 [data-wzl-density='compact'] {
-  --wzl-font-size-2xs: 7px;
-  --wzl-font-size-xs: 8px;
-  --wzl-font-size-sm: 9px;
-  --wzl-font-size-md: 11px;
-  --wzl-font-size-lg: 14px;
-  --wzl-font-size-xl: 17px;
-  --wzl-tb-height: 24px;
-  --wzl-control-h-xs: 16px;
-  --wzl-control-h-sm: 18px;
-  --wzl-control-h: 20px;
-  --wzl-icon-button-size: 20px;
-  --wzl-panel-title-size: var(--wzl-font-size-lg);
-  --wzl-stance-preview-title-size: var(--wzl-font-size-xs);
-  --wzl-font-size: var(--wzl-font-size-md);
-}
-
-[data-wzl-theme='weasel'][data-wzl-density='comfortable'],
-[data-wzl-density='comfortable'] {
   --wzl-font-size-2xs: 9px;
   --wzl-font-size-xs: 10px;
   --wzl-font-size-sm: 11px;
@@ -363,8 +351,8 @@
   --wzl-font-size: var(--wzl-font-size-md);
 }
 
-[data-wzl-theme='weasel'][data-wzl-density='roomy'],
-[data-wzl-density='roomy'] {
+[data-wzl-theme='weasel'][data-wzl-density='comfortable'],
+[data-wzl-density='comfortable'] {
   --wzl-font-size-2xs: 10px;
   --wzl-font-size-xs: 12px;
   --wzl-font-size-sm: 13px;
@@ -380,3 +368,21 @@
   --wzl-stance-preview-title-size: var(--wzl-font-size-xs);
   --wzl-font-size: var(--wzl-font-size-md);
 }
+
+[data-wzl-theme='weasel'][data-wzl-density='roomy'],
+[data-wzl-density='roomy'] {
+  --wzl-font-size-2xs: 12px;
+  --wzl-font-size-xs: 14px;
+  --wzl-font-size-sm: 15px;
+  --wzl-font-size-md: 18px;
+  --wzl-font-size-lg: 22px;
+  --wzl-font-size-xl: 28px;
+  --wzl-tb-height: 38px;
+  --wzl-control-h-xs: 26px;
+  --wzl-control-h-sm: 28px;
+  --wzl-control-h: 34px;
+  --wzl-icon-button-size: 32px;
+  --wzl-panel-title-size: var(--wzl-font-size-lg);
+  --wzl-stance-preview-title-size: var(--wzl-font-size-xs);
+  --wzl-font-size: var(--wzl-font-size-md);
+}

package/fonts/README.md

@@ -1,11 +1,12 @@
 # Bundled fonts
 
-Two OFL-1.1 faces, vendored so the kit never fetches a stylesheet from a
+OFL-1.1 faces, vendored so the kit never fetches a stylesheet from a
 third-party host at runtime.
 
 | file | token | role |
 |---|---|---|
 | `oswald-latin-variable.woff2` | `--wzl-font-ui`, `--wzl-font-display` | condensed UI/display face, variable `wght 200–700` |
+| `oswald-tabular-digits.woff2` | `--wzl-font-numeric` | Oswald's digits 0–9, plus (U+002B) and minus (U+2212), each centered in the widest digit's advance at every weight, and a figure space (U+2007) that wide, as family `Oswald Tabular` |
 | `inter-latin.woff2` | `--wzl-font-body` | body/prose face, weight 400 |
 
 Loading them is opt-in: `import '@weasel-js/theme/fonts.css'`, or
@@ -19,7 +20,7 @@ with no error anywhere.
 
 ## Tooling
 
-Both commands need `fontTools` **with the Brotli extension** — without it,
+These commands need `fontTools` **with the Brotli extension** — without it,
 `--flavor=woff2` fails with `ImportError: No module named brotli`. Homebrew's
 `fonttools` formula does not include it, so use a throwaway venv:
 
@@ -53,6 +54,29 @@ in the kit reads hints.
 Oswald's OFL notice carries **no Reserved Font Name**, so a subset may keep the
 family name.
 
+## Provenance — Oswald Tabular
+
+Built from `oswald-latin-variable.woff2` by `scripts/oswald-tabular.py` (same
+venv): subset to U+0030–0039, U+002B and U+2212 with no layout features, then
+every digit and sign gets the widest digit's advance at the default weight and
+at each `wght` master, its outline shifted by half the difference so it stays
+centered, and `HVAR` is rebuilt from the patched `gvar`. The minus is rebuilt
+from the plus's crossbar first: Oswald draws it shorter than that arm, which a
+column of signed figures would show. U+2212 rather than the hyphen, so a hyphen
+in a date stays a hyphen; `@weasel-js/quantity` writes negatives with U+2212. A blank U+2007 of the same width is added, because
+Oswald has none and `Jog` and `DetailList` pad numbers with it. Oswald ships no `tnum` feature, so this is the
+only way its figures line up in a column. The widest digit is `0` at every
+weight, so no digit is padded past Oswald's own widest.
+
+```sh
+/tmp/fontvenv/bin/python packages/theme/scripts/oswald-tabular.py
+```
+
+It is a separate family rather than a patched Oswald so that only text asking
+for `--wzl-font-numeric` gets tabular digits; running text keeps Oswald's
+proportional ones. The face covers digits, the two signs and the figure space alone, so the browser takes every
+other character from the next family in the stack.
+
 ## Provenance — Inter
 
 Re-flavored from `assets/fonts/inter/inter.ttf`, which is already Inter v4.1
@@ -70,6 +94,6 @@ README for the original command):
 
 ## License
 
-Both faces are SIL Open Font License 1.1 — `OFL-Oswald.txt` and `OFL-Inter.txt`,
+All three faces are SIL Open Font License 1.1 — `OFL-Oswald.txt` and `OFL-Inter.txt`,
 redistributed with the fonts as the license requires. The OFL covers these font
 binaries only; the package's code is MIT (see `../LICENSE`).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weasel-js/theme",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "description": "Design tokens shared by weasel-ui and weasel-hud — CSS variables + a parallel TS export.",
   "license": "MIT",
   "type": "module",
@@ -26,10 +26,11 @@
     "./tokens.css": "./dist/tokens.css",
     "./fonts.css": "./dist/fonts.css",
     "./faces.css": "./dist/faces.css",
+    "./numeric.module.css": "./dist/numeric.module.css",
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@weasel-js/paint": "1.7.0"
+    "@weasel-js/paint": "1.7.2"
   },
   "peerDependencies": {
     "react": ">=18"
@@ -61,7 +62,7 @@
   ],
   "scripts": {
     "gen:tokens": "tsx scripts/build-tokens.ts",
-    "build": "npm run gen:tokens && tsup && cp src/generated/tokens.css dist/tokens.css && cp src/fonts.css src/faces.css dist/"
+    "build": "npm run gen:tokens && tsup && cp src/generated/tokens.css dist/tokens.css && cp src/fonts.css src/faces.css src/numeric.module.css dist/"
   },
   "publishConfig": {
     "access": "public",