@weasel-js/theme 0.7.2 → 1.0.0

package/dist/tokens.css

@@ -1,19 +1,9 @@
-/* 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
+/* GENERATED by packages/theme/scripts/build-tokens.ts — do not edit.
+ * Source: packages/theme/tokens/<theme>/
  */
-@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-50: #f5f5f6;
   --wzl-gray-100: #e6e7e9;
   --wzl-gray-200: #c9cbcf;
   --wzl-gray-300: #9ea1a8;
@@ -23,190 +13,132 @@
   --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-soft: #1d1454;
+  /* Midnight blue-violet. Deep and saturated; anchors primary actions on light and dark surfaces alike. */
+  --wzl-accent-base: #2e1f7a;
   --wzl-accent-strong: #5841b8;
-
-  --wzl-danger-base:  #d94a3f;
+  --wzl-danger-base: #d94a3f;
   --wzl-warning-base: #d99a3f;
   --wzl-success-base: #2ec27e;
-
-  /* Geometry */
+  --wzl-fg-on-accent: var(--wzl-gray-50);
+  /* Barely-there separators (table rows). */
+  --wzl-line-subtle: color-mix(in srgb, var(--wzl-fg) 10%, transparent);
+  /* Primary gridlines on sunken surfaces. */
+  --wzl-line: color-mix(in srgb, var(--wzl-fg) 20%, transparent);
+  /* Axes and emphasized dividers. */
+  --wzl-line-strong: color-mix(in srgb, var(--wzl-fg) 40%, transparent);
+  /* Drawn data curves. Routes through the bright accent because accent-base is too dim on sunken surfaces. */
+  --wzl-curve-color: var(--wzl-accent-strong);
+  --wzl-accent: var(--wzl-accent-base);
+  --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 tint. Components compose it as color-mix(in srgb, var(--wzl-glass-tint) 78%, transparent) with backdrop-filter: blur(3px). */
+  --wzl-glass-tint: var(--wzl-accent);
+  /* Hover wash over a raised surface. Same formula as line-subtle, different job — do not collapse them. */
+  --wzl-surface-hover: color-mix(in srgb, var(--wzl-fg) 10%, transparent);
+  /* Pressed wash over a raised surface. */
+  --wzl-surface-pressed: color-mix(in srgb, var(--wzl-fg) 18%, transparent);
+  /* First of ten categorical spot colors for plotting, status and data viz. Ordered — take them in sequence. Mode-invariant on purpose: a series keeps its color when the mode flips. */
+  --wzl-swatch-green: #2fdd18;
+  --wzl-swatch-pink: #ff5885;
+  --wzl-swatch-cyan: #00dfff;
+  --wzl-swatch-gold: #dcb700;
+  --wzl-swatch-amber: #ff8c00;
+  --wzl-swatch-violet: #a497ff;
+  --wzl-swatch-mint: #00e7af;
+  --wzl-swatch-sky: #00b8ff;
+  --wzl-swatch-orange: #ff6b00;
+  --wzl-swatch-magenta: #ff6eff;
   --wzl-radius-sm: 3px;
   --wzl-radius-md: 5px;
-  --wzl-border-w:  1px;
-  /* Standard height for a horizontal toolbar-shaped strip (ActionsBar,
-   * OptionsBar, ToggleBar, ToolOptionsBar). Was referenced by all four as
-   * `var(--wzl-tb-height, 28px)` without ever being defined here — the
-   * fallback was silently doing the token's job. Defined for real so a
-   * consumer overriding it in one place moves every bar consistently. */
+  --wzl-border-w: 1px;
+  /* Structural lines — gridlines, dividers, axes. */
+  --wzl-line-width: 2px;
+  /* Drawn data curves. Heavier than structural lines so data reads as primary content. */
+  --wzl-curve-width: 3px;
+  /* Height of a horizontal toolbar strip (ActionsBar, OptionsBar, ToggleBar, ToolOptionsBar). */
   --wzl-tb-height: 28px;
-
-  /* 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-radius-lg: 14px;
+  /* Height of an interactive control — button, input, select. Distinct from tb-height, which sizes the strip a row of them sits in. */
+  --wzl-control-h: 28px;
+  /* Backdrop blur radius for frosted surfaces. Pairs with glass-tint. */
+  --wzl-glass-blur: 3px;
+  --wzl-font-size: 13px;
+  --wzl-font-size-sm: 11px;
+  --wzl-space-xs: 4px;
+  --wzl-space-sm: 8px;
+  --wzl-space-md: 12px;
+  --wzl-space-lg: 16px;
+  --wzl-z-toolbar: 10;
+  --wzl-z-overlay: 20;
+  --wzl-z-modal: 30;
+  /* Layered backdrop fill for a page or lab root. `none` here; a theme with a signature background sets it. */
+  --wzl-backdrop: none;
+  /* Micro-interactions — hover, focus, pressed. */
+  --wzl-motion-fast: 120ms;
+  /* Entrances and exits — toasts, popovers, panels. */
   --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-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-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;
+  --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;
-
-  /* ---------- 2. Semantic tokens ---------- */
-
-  /* Surfaces — three depths. */
-  --wzl-surface:        var(--wzl-gray-800);
+  --wzl-font-weight-medium: 350;
+  --wzl-font-weight-bold: 400;
+  --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-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);
-
-  /* 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);
+  /* Accent for foreground use — 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. */
+  --wzl-accent-fg: var(--wzl-accent-strong);
+  /* 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. */
+  --wzl-fg-inverse: var(--wzl-gray-900);
 }
 
-/* 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'] {
+[data-wzl-theme='weasel'][data-wzl-mode='dark'],
+[data-wzl-mode='dark'] {
   color-scheme: dark;
-  --wzl-surface:        var(--wzl-gray-800);
+  --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);
+  --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-fg-inverse: 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'] {
+[data-wzl-theme='weasel'][data-wzl-mode='light'],
+[data-wzl-mode='light'] {
   color-scheme: light;
-  --wzl-surface:        var(--wzl-gray-50);
+  --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);
+  --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-fg-inverse: var(--wzl-gray-50);
 }

package/fonts/OFL-Inter.txt

@@ -0,0 +1,92 @@
+Copyright (c) 2016 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION AND CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/fonts/OFL-Oswald.txt

@@ -0,0 +1,93 @@
+Copyright 2016 The Oswald Project Authors (https://github.com/googlefonts/OswaldFont)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/fonts/README.md

@@ -0,0 +1,70 @@
+# Bundled fonts
+
+Two 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` |
+| `inter-latin.woff2` | `--wzl-font-body` | body/prose face, weight 400 |
+
+Loading them is opt-in: `import '@weasel-js/theme/fonts.css'`. Skip it and the
+token font stacks fall back to `system-ui`.
+
+## Tooling
+
+Both 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:
+
+```sh
+python3 -m venv /tmp/fontvenv
+/tmp/fontvenv/bin/pip install fonttools brotli
+```
+
+## Provenance — Oswald
+
+Upstream `fonts/variable/Oswald[wght].ttf` from
+https://github.com/googlefonts/OswaldFont, subset to the Google Fonts `latin`
+range plus the three combining marks labkit's `@font-face` declares
+(`U+0304`, `U+0308`, `U+0329`):
+
+```sh
+/tmp/fontvenv/bin/pyftsubset "Oswald[wght].ttf" \
+  --unicodes="U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD" \
+  --layout-features="kern" \
+  --no-hinting \
+  --flavor=woff2 \
+  --output-file=oswald-latin-variable.woff2
+```
+
+172 kB → 26 kB. The `wght` axis survives subsetting at its full 200–700 range,
+which is what `fonts.css` declares. Oswald has no weights outside that range;
+anything asking for 100 or 900 is clamped.
+
+`--no-hinting` matches the treatment of `assets/fonts/inter/inter.ttf`; nothing
+in the kit reads hints.
+
+Oswald's OFL notice carries **no Reserved Font Name**, so a subset may keep the
+family name.
+
+## Provenance — Inter
+
+Re-flavored from `assets/fonts/inter/inter.ttf`, which is already Inter v4.1
+`Inter-Regular.ttf` subset to U+0020–00FF and de-hinted (see that directory's
+README for the original command):
+
+```sh
+/tmp/fontvenv/bin/pyftsubset assets/fonts/inter/inter.ttf \
+  --unicodes="U+0020-00FF" \
+  --layout-features="kern" \
+  --no-hinting \
+  --flavor=woff2 \
+  --output-file=inter-latin.woff2
+```
+
+## License
+
+Both 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": "0.7.2",
+  "version": "1.0.0",
   "description": "Design tokens shared by weasel-ui and weasel-hud — CSS variables + a parallel TS export.",
   "license": "MIT",
   "type": "module",
@@ -15,9 +15,22 @@
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
+    "./react": {
+      "import": "./dist/react.js",
+      "types": "./dist/react.d.ts"
+    },
     "./tokens.css": "./dist/tokens.css",
+    "./fonts.css": "./dist/fonts.css",
     "./package.json": "./package.json"
   },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
   "author": "orochi235",
   "homepage": "https://orochi235.github.io/weasel/",
   "repository": {
@@ -33,14 +46,20 @@
   },
   "files": [
     "dist",
+    "fonts",
+    "NOTICE",
     "README.md",
     "LICENSE"
   ],
   "scripts": {
-    "build": "tsup && cp src/tokens.css dist/tokens.css"
+    "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 dist/fonts.css"
   },
   "publishConfig": {
     "access": "public",
     "provenance": true
+  },
+  "devDependencies": {
+    "tsx": "^4.23.11"
   }
 }