@weasel-js/theme 0.5.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 orochi235
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,26 @@
+# @weasel-js/theme
+
+Design tokens shared by weasel-ui and weasel-hud — CSS variables + a parallel TS export.
+
+Part of [weasel](https://github.com/orochi235/weasel), a domain-agnostic 2D
+scene-graph canvas kit for React. See the
+[API reference](https://orochi235.github.io/weasel/api/).
+
+## Install
+
+```sh
+npm install @weasel-js/theme
+```
+
+## Usage
+
+```ts
+import { /* … */ } from '@weasel-js/theme';
+import '@weasel-js/theme/tokens.css';
+```
+
+The stylesheet is required — component styles ship as one bundled file.
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,86 @@
+/**
+ * Source of truth for token default values. Mirrors tokens.css exactly,
+ * with var(--*) references resolved to their literal target value (TS
+ * exports can't reference each other syntactically the way CSS can with
+ * var()). The parity test in tokens.test.ts catches drift.
+ *
+ * color-mix() expressions are resolved to plausible hex approximations
+ * — consumers that need exact mixed values should read getComputedStyle
+ * from the live DOM rather than relying on these defaults.
+ */
+declare const DEFAULT_TOKENS: {
+    readonly '--wzl-gray-50': "#f5f5f6";
+    readonly '--wzl-gray-100': "#e6e7e9";
+    readonly '--wzl-gray-200': "#c9cbcf";
+    readonly '--wzl-gray-300': "#9ea1a8";
+    readonly '--wzl-gray-400': "#6f737b";
+    readonly '--wzl-gray-500': "#4d5058";
+    readonly '--wzl-gray-600': "#383b42";
+    readonly '--wzl-gray-700': "#25272c";
+    readonly '--wzl-gray-800': "#181a1e";
+    readonly '--wzl-gray-900': "#0e0f12";
+    readonly '--wzl-accent-soft': "#1d1454";
+    readonly '--wzl-accent-base': "#2e1f7a";
+    readonly '--wzl-accent-strong': "#5841b8";
+    readonly '--wzl-danger-base': "#d94a3f";
+    readonly '--wzl-warning-base': "#d99a3f";
+    readonly '--wzl-success-base': "#2ec27e";
+    readonly '--wzl-radius-sm': "3px";
+    readonly '--wzl-radius-md': "5px";
+    readonly '--wzl-border-w': "1px";
+    readonly '--wzl-line-width': "2px";
+    readonly '--wzl-curve-width': "3px";
+    readonly '--wzl-motion-fast': "120ms";
+    readonly '--wzl-motion-medium': "240ms";
+    readonly '--wzl-ease-in-cubic': "cubic-bezier(0.32, 0, 0.67, 0)";
+    readonly '--wzl-ease-out-cubic': "cubic-bezier(0.33, 1, 0.68, 1)";
+    readonly '--wzl-ease-in-out-cubic': "cubic-bezier(0.65, 0, 0.35, 1)";
+    readonly '--wzl-ease-out-back': "cubic-bezier(0.34, 1.56, 0.64, 1)";
+    readonly '--wzl-line-subtle': "rgba(230, 231, 233, 0.10)";
+    readonly '--wzl-line': "rgba(230, 231, 233, 0.20)";
+    readonly '--wzl-line-strong': "rgba(230, 231, 233, 0.40)";
+    readonly '--wzl-curve-color': "#5841b8";
+    readonly '--wzl-font-ui': "'Oswald', 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
+    readonly '--wzl-font-display': "'Oswald', 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
+    readonly '--wzl-font-body': "'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif";
+    readonly '--wzl-font-mono': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+    readonly '--wzl-font-weight-light': "200";
+    readonly '--wzl-font-weight-normal': "300";
+    readonly '--wzl-font-weight-bold': "400";
+    readonly '--wzl-surface': "#181a1e";
+    readonly '--wzl-surface-raised': "#25272c";
+    readonly '--wzl-surface-sunken': "#0e0f12";
+    readonly '--wzl-fg': "#e6e7e9";
+    readonly '--wzl-fg-muted': "#9ea1a8";
+    readonly '--wzl-fg-subtle': "#6f737b";
+    readonly '--wzl-fg-on-accent': "#f5f5f6";
+    readonly '--wzl-border': "#25272c";
+    readonly '--wzl-border-strong': "#383b42";
+    readonly '--wzl-accent': "#2e1f7a";
+    readonly '--wzl-accent-fg': "#5841b8";
+    readonly '--wzl-accent-hover': "#5841b8";
+    readonly '--wzl-danger': "#d94a3f";
+    readonly '--wzl-warning': "#d99a3f";
+    readonly '--wzl-success': "#2ec27e";
+    readonly '--wzl-focus-ring': "#5841b8";
+    readonly '--wzl-glass-tint': "#2e1f7a";
+    readonly '--wzl-text': "#e6e7e9";
+    readonly '--wzl-text-muted': "#9ea1a8";
+    readonly '--wzl-bg': "#181a1e";
+    readonly '--wzl-muted': "#9ea1a8";
+    readonly '--wzl-panel-bg': "#181a1e";
+    readonly '--wzl-panel-border': "#25272c";
+    readonly '--wzl-input-bg': "#0e0f12";
+    readonly '--wzl-track-bg': "#0e0f12";
+    readonly '--wzl-track-border': "#25272c";
+    readonly '--wzl-thumb-fill': "#9ea1a8";
+    readonly '--wzl-thumb-border': "#383b42";
+    readonly '--wzl-thumb-text': "#0e0f12";
+    readonly '--wzl-button-fill': "#25272c";
+    readonly '--wzl-button-fill-hover': "#2f3138";
+    readonly '--wzl-button-fill-pressed': "#363941";
+    readonly '--wzl-button-text': "#e6e7e9";
+};
+type TokenName = keyof typeof DEFAULT_TOKENS;
+
+export { DEFAULT_TOKENS, type TokenName };

package/dist/index.js

@@ -0,0 +1,92 @@
+// src/tokens.ts
+var DEFAULT_TOKENS = {
+  // Primitive — grays
+  "--wzl-gray-50": "#f5f5f6",
+  "--wzl-gray-100": "#e6e7e9",
+  "--wzl-gray-200": "#c9cbcf",
+  "--wzl-gray-300": "#9ea1a8",
+  "--wzl-gray-400": "#6f737b",
+  "--wzl-gray-500": "#4d5058",
+  "--wzl-gray-600": "#383b42",
+  "--wzl-gray-700": "#25272c",
+  "--wzl-gray-800": "#181a1e",
+  "--wzl-gray-900": "#0e0f12",
+  // Primitive — accent + status
+  "--wzl-accent-soft": "#1d1454",
+  "--wzl-accent-base": "#2e1f7a",
+  "--wzl-accent-strong": "#5841b8",
+  "--wzl-danger-base": "#d94a3f",
+  "--wzl-warning-base": "#d99a3f",
+  "--wzl-success-base": "#2ec27e",
+  // Geometry
+  "--wzl-radius-sm": "3px",
+  "--wzl-radius-md": "5px",
+  "--wzl-border-w": "1px",
+  "--wzl-line-width": "2px",
+  "--wzl-curve-width": "3px",
+  // Motion — durations + CSS equivalents of the JS easing library
+  "--wzl-motion-fast": "120ms",
+  "--wzl-motion-medium": "240ms",
+  "--wzl-ease-in-cubic": "cubic-bezier(0.32, 0, 0.67, 0)",
+  "--wzl-ease-out-cubic": "cubic-bezier(0.33, 1, 0.68, 1)",
+  "--wzl-ease-in-out-cubic": "cubic-bezier(0.65, 0, 0.35, 1)",
+  "--wzl-ease-out-back": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+  // Structural lines — three opacity levels of fg. color-mix at runtime;
+  // hex approximations here resolve against the dark default fg.
+  "--wzl-line-subtle": "rgba(230, 231, 233, 0.10)",
+  "--wzl-line": "rgba(230, 231, 233, 0.20)",
+  "--wzl-line-strong": "rgba(230, 231, 233, 0.40)",
+  // Curve color — semantic alias for the accent.
+  "--wzl-curve-color": "#5841b8",
+  // Typography
+  "--wzl-font-ui": "'Oswald', 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif",
+  "--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",
+  "--wzl-font-weight-light": "200",
+  "--wzl-font-weight-normal": "300",
+  "--wzl-font-weight-bold": "400",
+  // Semantic — surfaces
+  "--wzl-surface": "#181a1e",
+  "--wzl-surface-raised": "#25272c",
+  "--wzl-surface-sunken": "#0e0f12",
+  // Semantic — text
+  "--wzl-fg": "#e6e7e9",
+  "--wzl-fg-muted": "#9ea1a8",
+  "--wzl-fg-subtle": "#6f737b",
+  "--wzl-fg-on-accent": "#f5f5f6",
+  // Semantic — borders
+  "--wzl-border": "#25272c",
+  "--wzl-border-strong": "#383b42",
+  // Semantic — interactive
+  "--wzl-accent": "#2e1f7a",
+  "--wzl-accent-fg": "#5841b8",
+  "--wzl-accent-hover": "#5841b8",
+  "--wzl-danger": "#d94a3f",
+  "--wzl-warning": "#d99a3f",
+  "--wzl-success": "#2ec27e",
+  "--wzl-focus-ring": "#5841b8",
+  // Semantic — glass
+  "--wzl-glass-tint": "#2e1f7a",
+  // Deprecated aliases (kept for older consumers)
+  "--wzl-text": "#e6e7e9",
+  "--wzl-text-muted": "#9ea1a8",
+  "--wzl-bg": "#181a1e",
+  "--wzl-muted": "#9ea1a8",
+  "--wzl-panel-bg": "#181a1e",
+  "--wzl-panel-border": "#25272c",
+  "--wzl-input-bg": "#0e0f12",
+  "--wzl-track-bg": "#0e0f12",
+  "--wzl-track-border": "#25272c",
+  "--wzl-thumb-fill": "#9ea1a8",
+  "--wzl-thumb-border": "#383b42",
+  "--wzl-thumb-text": "#0e0f12",
+  "--wzl-button-fill": "#25272c",
+  "--wzl-button-fill-hover": "#2f3138",
+  "--wzl-button-fill-pressed": "#363941",
+  "--wzl-button-text": "#e6e7e9"
+};
+
+export { DEFAULT_TOKENS };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Source of truth for token default values. Mirrors tokens.css exactly,\n * with var(--*) references resolved to their literal target value (TS\n * exports can't reference each other syntactically the way CSS can with\n * var()). The parity test in tokens.test.ts catches drift.\n *\n * color-mix() expressions are resolved to plausible hex approximations\n * — consumers that need exact mixed values should read getComputedStyle\n * from the live DOM rather than relying on these defaults.\n */\nexport const DEFAULT_TOKENS = {\n  // Primitive — grays\n  '--wzl-gray-50':  '#f5f5f6',\n  '--wzl-gray-100': '#e6e7e9',\n  '--wzl-gray-200': '#c9cbcf',\n  '--wzl-gray-300': '#9ea1a8',\n  '--wzl-gray-400': '#6f737b',\n  '--wzl-gray-500': '#4d5058',\n  '--wzl-gray-600': '#383b42',\n  '--wzl-gray-700': '#25272c',\n  '--wzl-gray-800': '#181a1e',\n  '--wzl-gray-900': '#0e0f12',\n\n  // Primitive — accent + status\n  '--wzl-accent-soft':   '#1d1454',\n  '--wzl-accent-base':   '#2e1f7a',\n  '--wzl-accent-strong': '#5841b8',\n  '--wzl-danger-base':   '#d94a3f',\n  '--wzl-warning-base':  '#d99a3f',\n  '--wzl-success-base':  '#2ec27e',\n\n  // Geometry\n  '--wzl-radius-sm':   '3px',\n  '--wzl-radius-md':   '5px',\n  '--wzl-border-w':    '1px',\n  '--wzl-line-width':  '2px',\n  '--wzl-curve-width': '3px',\n\n  // Motion — durations + CSS equivalents of the JS easing library\n  '--wzl-motion-fast':       '120ms',\n  '--wzl-motion-medium':     '240ms',\n  '--wzl-ease-in-cubic':     'cubic-bezier(0.32, 0, 0.67, 0)',\n  '--wzl-ease-out-cubic':    'cubic-bezier(0.33, 1, 0.68, 1)',\n  '--wzl-ease-in-out-cubic': 'cubic-bezier(0.65, 0, 0.35, 1)',\n  '--wzl-ease-out-back':     'cubic-bezier(0.34, 1.56, 0.64, 1)',\n\n  // Structural lines — three opacity levels of fg. color-mix at runtime;\n  // hex approximations here resolve against the dark default fg.\n  '--wzl-line-subtle': 'rgba(230, 231, 233, 0.10)',\n  '--wzl-line':        'rgba(230, 231, 233, 0.20)',\n  '--wzl-line-strong': 'rgba(230, 231, 233, 0.40)',\n\n  // Curve color — semantic alias for the accent.\n  '--wzl-curve-color': '#5841b8',\n\n  // Typography\n  '--wzl-font-ui':            \"'Oswald', 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif\",\n  '--wzl-font-display':       \"'Oswald', 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif\",\n  '--wzl-font-body':          \"'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif\",\n  '--wzl-font-mono':          'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',\n  '--wzl-font-weight-light':  '200',\n  '--wzl-font-weight-normal': '300',\n  '--wzl-font-weight-bold':   '400',\n\n  // Semantic — surfaces\n  '--wzl-surface':        '#181a1e',\n  '--wzl-surface-raised': '#25272c',\n  '--wzl-surface-sunken': '#0e0f12',\n\n  // Semantic — text\n  '--wzl-fg':           '#e6e7e9',\n  '--wzl-fg-muted':     '#9ea1a8',\n  '--wzl-fg-subtle':    '#6f737b',\n  '--wzl-fg-on-accent': '#f5f5f6',\n\n  // Semantic — borders\n  '--wzl-border':        '#25272c',\n  '--wzl-border-strong': '#383b42',\n\n  // Semantic — interactive\n  '--wzl-accent':       '#2e1f7a',\n  '--wzl-accent-fg':    '#5841b8',\n  '--wzl-accent-hover': '#5841b8',\n  '--wzl-danger':       '#d94a3f',\n  '--wzl-warning':      '#d99a3f',\n  '--wzl-success':      '#2ec27e',\n  '--wzl-focus-ring':   '#5841b8',\n\n  // Semantic — glass\n  '--wzl-glass-tint': '#2e1f7a',\n\n  // Deprecated aliases (kept for older consumers)\n  '--wzl-text':                '#e6e7e9',\n  '--wzl-text-muted':          '#9ea1a8',\n  '--wzl-bg':                  '#181a1e',\n  '--wzl-muted':               '#9ea1a8',\n  '--wzl-panel-bg':            '#181a1e',\n  '--wzl-panel-border':        '#25272c',\n  '--wzl-input-bg':            '#0e0f12',\n  '--wzl-track-bg':            '#0e0f12',\n  '--wzl-track-border':        '#25272c',\n  '--wzl-thumb-fill':          '#9ea1a8',\n  '--wzl-thumb-border':        '#383b42',\n  '--wzl-thumb-text':          '#0e0f12',\n  '--wzl-button-fill':         '#25272c',\n  '--wzl-button-fill-hover':   '#2f3138',\n  '--wzl-button-fill-pressed': '#363941',\n  '--wzl-button-text':         '#e6e7e9',\n} as const;\n\nexport type TokenName = keyof typeof DEFAULT_TOKENS;\n"]}

package/dist/tokens.css

@@ -0,0 +1,206 @@
+/* Design tokens for the weasel design system. Shared by weasel-ui (DOM)
+ * and weasel-hud (WebGL). Apps with their own design system should skip
+ * this file and define the variables themselves at the desired scope.
+ *
+ * Structure:
+ *   1. Primitive scale — raw values, not for direct consumption
+ *   2. Semantic tokens — what components reference
+ *   3. Deprecated aliases — kept so older components keep rendering
+ */
+@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400&display=swap');
+
+:root {
+  /* ---------- 1. Primitive scale ---------- */
+
+  /* Neutrals — perceptually-spaced gray ramp. */
+  --wzl-gray-50:  #f5f5f6;
+  --wzl-gray-100: #e6e7e9;
+  --wzl-gray-200: #c9cbcf;
+  --wzl-gray-300: #9ea1a8;
+  --wzl-gray-400: #6f737b;
+  --wzl-gray-500: #4d5058;
+  --wzl-gray-600: #383b42;
+  --wzl-gray-700: #25272c;
+  --wzl-gray-800: #181a1e;
+  --wzl-gray-900: #0e0f12;
+
+  /* Accent — midnight blue-violet. Deep and saturated; carries enough
+   * weight to anchor primary actions in both light and dark surfaces.
+   * Apps override at their own scope. */
+  --wzl-accent-soft:   #1d1454;
+  --wzl-accent-base:   #2e1f7a;
+  --wzl-accent-strong: #5841b8;
+
+  --wzl-danger-base:  #d94a3f;
+  --wzl-warning-base: #d99a3f;
+  --wzl-success-base: #2ec27e;
+
+  /* Geometry */
+  --wzl-radius-sm: 3px;
+  --wzl-radius-md: 5px;
+  --wzl-border-w:  1px;
+
+  /* Motion. Easing names mirror the kit's JS easing library
+   * (src/animation/easings.ts) so DOM chrome and canvas animation share
+   * one vocabulary — each cubic-bezier is the standard CSS approximation
+   * of the Penner curve of the same name.
+   *   fast   : micro-interactions — hover, focus, pressed states.
+   *   medium : entrances/exits — toasts, popovers, panels. */
+  --wzl-motion-fast:   120ms;
+  --wzl-motion-medium: 240ms;
+  --wzl-ease-in-cubic:     cubic-bezier(0.32, 0, 0.67, 0);
+  --wzl-ease-out-cubic:    cubic-bezier(0.33, 1, 0.68, 1);
+  --wzl-ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
+  --wzl-ease-out-back:     cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* Typography. UI/body defaults to Inter; display is Oswald and is loaded
+   * via the @import above (consumers either bring their own Inter or accept
+   * the system-ui fallback). */
+  /* UI / display face — Oswald condensed. Used for chrome labels, buttons,
+   * menus, and headings. Loaded weights are 200/300/400 only; the heavier
+   * cuts get too blocky for this face at any size. */
+  --wzl-font-ui:      'Oswald', 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif;
+  --wzl-font-display: 'Oswald', 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif;
+  /* Body face — Inter for paragraphs and long-form prose. Consumers must
+   * load the Inter webfont themselves (or accept the system-ui fallback). */
+  --wzl-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --wzl-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  /* Weight tokens are tuned to the UI face (Oswald 200/300/400). Body /
+   * prose text using Inter will typically hardcode its own weights (e.g.
+   * 400/700) rather than route through these. */
+  --wzl-font-weight-light:  200;
+  --wzl-font-weight-normal: 300;
+  --wzl-font-weight-bold:   400;
+
+  /* ---------- 2. Semantic tokens ---------- */
+
+  /* Surfaces — three depths. */
+  --wzl-surface:        var(--wzl-gray-800);
+  --wzl-surface-raised: var(--wzl-gray-700);
+  --wzl-surface-sunken: var(--wzl-gray-900);
+
+  /* Text */
+  --wzl-fg:           var(--wzl-gray-100);
+  --wzl-fg-muted:     var(--wzl-gray-300);
+  --wzl-fg-subtle:    var(--wzl-gray-400);
+  --wzl-fg-on-accent: var(--wzl-gray-50);
+
+  /* Borders */
+  --wzl-border:        var(--wzl-gray-700);
+  --wzl-border-strong: var(--wzl-gray-600);
+
+  /* Lines — for structural strokes (gridlines, dividers, plot axes).
+   * Distinct from borders, which enclose UI elements; lines partition
+   * content. Three alpha steps over `--wzl-fg` so the line auto-tints
+   * for whichever surface it's drawn on without needing per-mode values.
+   * Perceptual jobs: `subtle` = barely-there separators (table rows),
+   * default = primary gridlines on sunken surfaces, `strong` = axes /
+   * emphasized dividers. */
+  --wzl-line-subtle: color-mix(in srgb, var(--wzl-fg) 10%, transparent);
+  --wzl-line:        color-mix(in srgb, var(--wzl-fg) 20%, transparent);
+  --wzl-line-strong: color-mix(in srgb, var(--wzl-fg) 40%, transparent);
+  /* Stroke widths.
+   *   --wzl-line-width  : structural lines (gridlines, dividers, axes).
+   *   --wzl-curve-width : drawn data curves / signal traces. Heavier than
+   *                       structural lines so the data reads as primary
+   *                       content. Independently tunable. */
+  --wzl-line-width:  2px;
+  --wzl-curve-width: 3px;
+  /* Curve color — used by plot components (CurveEditor today; future
+   * waveform / chart widgets). Routes through the bright accent variant
+   * because --wzl-accent (midnight purple) is too dim on sunken
+   * surfaces. */
+  --wzl-curve-color: var(--wzl-accent-strong);
+
+  /* Interactive */
+  --wzl-accent:       var(--wzl-accent-base);
+  /* Accent for *foreground* use — text, icons, selected-state labels drawn
+   * directly on a surface. --wzl-accent is a fill; the midnight base is too
+   * dim to read as text against dark surfaces (same reason --wzl-curve-color
+   * routes through the strong variant). Flips to the deep base in light
+   * mode, where it's the legible one. */
+  --wzl-accent-fg:    var(--wzl-accent-strong);
+  --wzl-accent-hover: var(--wzl-accent-strong);
+  --wzl-danger:       var(--wzl-danger-base);
+  --wzl-warning:      var(--wzl-warning-base);
+  --wzl-success:      var(--wzl-success-base);
+  --wzl-focus-ring:   var(--wzl-accent-strong);
+
+  /* Frosted glass — the kit's signature treatment. Components compose:
+   *   background: color-mix(in srgb, var(--wzl-glass-tint) 78%, transparent);
+   *   backdrop-filter: blur(3px);
+   * Override `--wzl-glass-tint` at the component scope to tint glass
+   * with something other than the accent (e.g. danger). */
+  --wzl-glass-tint: var(--wzl-accent);
+
+  /* ---------- 3. Deprecated aliases ---------- *
+   * Older components still reference these names. New code should use
+   * the semantic tokens above. These will be removed once every
+   * component has been migrated.
+   */
+  --wzl-text:                var(--wzl-fg);
+  --wzl-text-muted:          var(--wzl-fg-muted);
+  --wzl-bg:                  var(--wzl-surface);
+  --wzl-muted:               var(--wzl-fg-muted);
+  --wzl-panel-bg:            var(--wzl-surface);
+  --wzl-panel-border:        var(--wzl-border);
+  --wzl-input-bg:            var(--wzl-surface-sunken);
+  --wzl-track-bg:            var(--wzl-surface-sunken);
+  --wzl-track-border:        var(--wzl-border);
+  --wzl-thumb-fill:          var(--wzl-fg-muted);
+  --wzl-thumb-border:        var(--wzl-border-strong);
+  --wzl-thumb-text:          var(--wzl-gray-900);
+  --wzl-button-fill:         var(--wzl-surface-raised);
+  --wzl-button-fill-hover:   color-mix(in srgb, var(--wzl-fg) 10%, transparent);
+  --wzl-button-fill-pressed: color-mix(in srgb, var(--wzl-fg) 18%, transparent);
+  --wzl-button-text:         var(--wzl-fg);
+}
+
+/* Default the document's UI font to the token. Apps that want a
+ * different face override at their own scope. */
+:root {
+  font-family: var(--wzl-font-ui);
+  font-weight: var(--wzl-font-weight-normal);
+}
+
+/* Explicit dark-mode rules so descendants with `data-theme="dark"` reassert
+ * the dark palette even when the document root is in light mode. Mirrors the
+ * dark values in `:root` for every semantic token that has a light override. */
+[data-theme='dark'] {
+  color-scheme: dark;
+  --wzl-surface:        var(--wzl-gray-800);
+  --wzl-surface-raised: var(--wzl-gray-700);
+  --wzl-surface-sunken: var(--wzl-gray-900);
+
+  --wzl-fg:             var(--wzl-gray-100);
+  --wzl-fg-muted:       var(--wzl-gray-300);
+  --wzl-fg-subtle:      var(--wzl-gray-400);
+
+  --wzl-border:         var(--wzl-gray-700);
+  --wzl-border-strong:  var(--wzl-gray-600);
+
+  --wzl-accent-fg:      var(--wzl-accent-strong);
+
+  --wzl-thumb-text:     var(--wzl-gray-900);
+}
+
+/* Light-mode overrides. Only the semantic surface/text/border tokens flip;
+ * the primitive scale and accent ramp stay constant. Toggle by setting
+ * `data-theme="light"` on `<html>` (or any ancestor — these cascade). */
+[data-theme='light'] {
+  color-scheme: light;
+  --wzl-surface:        var(--wzl-gray-50);
+  --wzl-surface-raised: var(--wzl-gray-100);
+  --wzl-surface-sunken: var(--wzl-gray-200);
+
+  --wzl-fg:             var(--wzl-gray-900);
+  --wzl-fg-muted:       var(--wzl-gray-600);
+  --wzl-fg-subtle:      var(--wzl-gray-500);
+
+  --wzl-border:         var(--wzl-gray-200);
+  --wzl-border-strong:  var(--wzl-gray-300);
+
+  --wzl-accent-fg:      var(--wzl-accent-base);
+
+  --wzl-thumb-text:     var(--wzl-gray-50);
+}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@weasel-js/theme",
+  "version": "0.5.0",
+  "description": "Design tokens shared by weasel-ui and weasel-hud — CSS variables + a parallel TS export.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./package.json": "./package.json"
+  },
+  "author": "orochi235",
+  "homepage": "https://orochi235.github.io/weasel/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/orochi235/weasel.git",
+    "directory": "packages/theme"
+  },
+  "bugs": {
+    "url": "https://github.com/orochi235/weasel/issues"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup && cp src/tokens.css dist/tokens.css"
+  }
+}