@senakster/senui-tokens 0.0.0-stage → 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,27 @@
+# @senakster/senui-tokens
+
+## 1.1.0
+
+### Minor Changes
+
+- e1cbee4: Adds `--senui-motion-duration-rotation` (960 ms): one turn of essential continuous rotation, such as a progress spinner, and nothing else. It has no reduced-motion value: slow it with the reduce factor instead, as `calc(var(--senui-motion-duration-rotation) * (4 - 3 * var(--senui-motion-reduce)))`, so a consumer who sets `--senui-motion-reduce` to `0` slows it too. The `motion.duration` descriptions now say that colour and opacity keep their duration under reduced motion.
+
+## 1.0.0
+
+### Major Changes
+
+- 7952797: The first stable release. From 1.0.0 on, a component, prop, value, class, token or export is renamed or removed only in a major version, after a minor that deprecates it: a deprecated prop warns once in development and says what to use instead, and the docs mark it. New tokens, components and props come in minor versions.
+
+  `@senakster/senui-tokens` is a peer dependency of `@senakster/senui`, so an app has exactly one copy of the tokens: install both packages, and load `@senakster/senui-tokens/tokens.css` before any component styles. A major version of the tokens is always a major version of the components too.
+
+  `tokens.css` declares the cascade layers `senui.tokens`, `senui.base` and `senui.components`, so your own unlayered styles override every token and component without raising specificity. Colours follow the page's colour scheme through `light-dark()`, and motion follows `prefers-reduced-motion`. Override a token on `:root, [data-theme]`; a subtree with `data-theme="light"` or `data-theme="dark"` gets its own background and text colour.
+
+  Load every component's styles with `@senakster/senui/styles.css`, or only the ones you use with `@senakster/senui/styles/<Name>.css`. A component's stylesheet loads the styles of the components it renders, so `styles/Dialog.css` brings Button's. Every module is its own file in the package, so a bundler keeps only the components you import.
+
+  Each component's accessibility is documented as a contract in `components.json` and on its docs page, including what your app must still do. Some manual screen-reader and keyboard runs predate later changes to their component; the docs mark those runs as not re-tested.
+
+### Minor Changes
+
+- 9459bf1: Add the `--senui-motion-easing-linear` token, for continuous motion such as the loading spinner.
+- 9459bf1: Add the `--senui-color-bg-backdrop` token (the scrim behind a modal) and `--senui-size-dialog-sm`, `-md` and `-lg` (dialog widths).
+- 9459bf1: Add the `--senui-size-illustration-sm` and `-lg` tokens (an illustration beside text, and above it).

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 senakster
+
+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

@@ -1,3 +1,164 @@
-# Temporary Holding Version
+# @senakster/senui-tokens
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Design tokens for senui: CSS custom properties in `@layer senui.tokens`, plus a typed JS map.
+
+```css
+@import '@senakster/senui-tokens/tokens.css';
+```
+
+```ts
+import { tokens } from '@senakster/senui-tokens';
+tokens['color.fg.default'].cssVar; // '--senui-color-fg-default'
+```
+
+Every token in `tokens.css` is public API. Renaming or removing one is a major version.
+
+## Writing tokens
+
+Tokens are written by hand in `src/*.tokens.json`, in the
+[DTCG 2025.10](https://www.designtokens.org/tr/2025.10/format/) format, and built by
+`pnpm build` (`node sd.config.mjs && tsdown`). The pipeline is described in ADR-0004.
+
+[`examples/example.tokens.json`](examples/example.tokens.json) is a complete example covering
+every category and every `$extensions.senui` key. It isn't built or shipped, but a test builds it,
+so it always passes the pipeline's checks. Copy from it freely; the values are placeholders.
+
+### Tiers
+
+- **Primitives** go under a top-level `primitive` group: `primitive.color.blue.600`. They are
+  never emitted. A token that aliases one compiles to its resolved value, so consumers can't
+  depend on primitive names.
+- **Semantic tokens** are every other top-level group (`color`, `space`, `radius`, `font`,
+  `motion`, `elevation`, `size`). The path becomes the custom property: `color.fg.danger` →
+  `--senui-color-fg-danger`.
+- **Component tokens** (`--senui-button-bg`) are not defined here. Each component defines its own
+  with semantic defaults.
+
+**State variants are suffixed siblings, never children** (ADR-0005): `color.bg.accent`,
+`color.bg.accent-hover`, `color.bg.accent-active`. A base token stays a leaf, so adding a state
+never renames it.
+
+### Values
+
+Use the DTCG object forms:
+
+```json
+{ "$type": "color", "$value": { "colorSpace": "oklch", "components": [0.55, 0.2, 260] } }
+{ "$type": "dimension", "$value": { "value": 12, "unit": "px" } }
+{ "$type": "duration", "$value": { "value": 120, "unit": "ms" } }
+```
+
+Colours are authored in oklch and emitted as `oklch()`. Any colour space DTCG allows also works,
+and it is kept as authored.
+
+Make a shadow's `color` a reference to a public colour token (`"{color.shadow}"`). It is then
+emitted as `var(--senui-color-shadow)`, so the shadow follows that token's dark value. A
+primitive reference or an inline colour is resolved to a single value and stays the same in both
+themes.
+
+### `$extensions.senui`
+
+| Key             | On                  | Meaning                                                                                      |
+| --------------- | ------------------- | -------------------------------------------------------------------------------------------- |
+| `dark`          | every public colour | Required. The dark-theme value or alias; the build emits `light-dark(<$value>, <dark>)`.     |
+| `contrast`      | public colours      | `[{ "against": "{color.bg.default}", "min": 4.5 }, …]`: at least one pair, unless `surface`. |
+| `surface`       | public colours      | `true` opts the colour out of contrast pairs. For backgrounds and WCAG-exempt colours only.  |
+| `reducedMotion` | any token           | The value under `prefers-reduced-motion: reduce`.                                            |
+
+`dark` is only allowed on colour tokens, because `light-dark()` only takes colours.
+
+Every public colour needs either contrast pairs or `"surface": true` (ADR-0005). Use `surface` for
+backgrounds and fills, and for colours WCAG exempts: disabled controls, decorative dividers and
+shadows. Say which in the token's `$description`, because opting out has to be visible.
+
+Each `contrast` pair is checked in both themes, after compositing translucent colours. An
+out-of-sRGB colour is measured both gamut-mapped and clipped, and the lower ratio counts. Use 4.5
+for text and 3 for non-text (borders, focus rings, icons). A pair below its minimum fails the build
+and names the token, the background, the theme and the ratio, to three decimals. So does a
+malformed pair, such as a missing or misspelled `min`.
+
+### Rules the CSS adds
+
+- **Themed subtrees are self-contained.** `tokens.css` sets `background-color`, `color` and
+  `accent-color` on every `[data-theme]` element, in `@layer senui.base`. A token set must define
+  `color.bg.default`, `color.fg.default` and `color.fg.accent`, or the build fails.
+- **Motion is multiplied by `--senui-motion-reduce`**, which is `1` normally and `0` under reduced
+  motion. Components write `calc(var(--senui-motion-distance-md) * var(--senui-motion-reduce))`, so
+  a consumer who overrides a distance can't bring motion back.
+- **Focus rings** are drawn as `outline: var(--senui-focus-ring-width) solid
+var(--senui-color-focus-ring)` with `outline-offset: var(--senui-focus-ring-offset)`. That puts
+  the ring on the page background, which is what its contrast pairs are checked against. Never use
+  `box-shadow` for a ring: forced-colours mode removes it.
+- **Elevated surfaces** (`bg.raised` plus an `elevation` shadow) also need a border, for the same
+  reason.
+
+Example:
+
+```json
+{
+  "primitive": {
+    "color": {
+      "ink": {
+        "$type": "color",
+        "$value": { "colorSpace": "oklch", "components": [0.2, 0.02, 260] }
+      },
+      "paper": {
+        "$type": "color",
+        "$value": { "colorSpace": "oklch", "components": [0.98, 0.005, 260] }
+      }
+    }
+  },
+  "color": {
+    "bg": {
+      "default": {
+        "$type": "color",
+        "$value": "{primitive.color.paper}",
+        "$extensions": { "senui": { "dark": "{primitive.color.ink}", "surface": true } }
+      }
+    },
+    "fg": {
+      "default": {
+        "$type": "color",
+        "$description": "Body text",
+        "$value": "{primitive.color.ink}",
+        "$extensions": {
+          "senui": {
+            "dark": "{primitive.color.paper}",
+            "contrast": [{ "against": "{color.bg.default}", "min": 4.5 }]
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+## Theming
+
+`color-scheme: light dark` is set on `:where(:root)`, so the default follows the operating system.
+`data-theme="light"` or `data-theme="dark"` on any element fixes the theme for that subtree, and
+that element gets its own background and text colour.
+
+A light-only app opts out of dark mode with one unlayered rule:
+
+```css
+:root {
+  color-scheme: light;
+}
+```
+
+To override a colour, give both themes. A single value replaces the dark value too, and it skips
+the contrast check that the token passed:
+
+```css
+:root,
+[data-theme] {
+  --senui-color-fg-accent: light-dark(oklch(50% 0.15 150), oklch(75% 0.15 150));
+}
+```
+
+Tokens are declared on `:root` and again on every `[data-theme]` element (ADR-0010). Build tools
+that don't yet target `light-dark()`, including Vite's default production build, rewrite it into
+variables that resolve where the token is declared; declaring it on each themed subtree keeps those
+subtrees correct. The cost is that an override on `:root` alone stops at the first `data-theme`
+element, so include `[data-theme]` in your selector.

package/dist/index.d.ts

@@ -0,0 +1,469 @@
+//#region src/generated/tokens.d.ts
+export declare const tokens: {
+  readonly "border.width.default": {
+    readonly cssVar: "--senui-border-width-default";
+    readonly type: "dimension";
+    readonly value: "1px";
+  };
+  readonly "border.width.strong": {
+    readonly cssVar: "--senui-border-width-strong";
+    readonly type: "dimension";
+    readonly value: "2px";
+    readonly description: "Invalid and selected controls, so state is not shown by colour alone.";
+  };
+  readonly "color.bg.accent": {
+    readonly cssVar: "--senui-color-bg-accent";
+    readonly type: "color";
+    readonly value: "oklch(52% 0.18 260)";
+    readonly description: "Fill for primary actions.";
+    readonly dark: "oklch(72% 0.14 255)";
+  };
+  readonly "color.bg.accent-active": {
+    readonly cssVar: "--senui-color-bg-accent-active";
+    readonly type: "color";
+    readonly value: "oklch(40% 0.15 260)";
+    readonly description: "bg.accent while pressed.";
+    readonly dark: "oklch(86% 0.07 255)";
+  };
+  readonly "color.bg.accent-hover": {
+    readonly cssVar: "--senui-color-bg-accent-hover";
+    readonly type: "color";
+    readonly value: "oklch(46% 0.17 260)";
+    readonly description: "bg.accent under the pointer.";
+    readonly dark: "oklch(80% 0.11 255)";
+  };
+  readonly "color.bg.backdrop": {
+    readonly cssVar: "--senui-color-bg-backdrop";
+    readonly type: "color";
+    readonly value: "rgb(0% 0% 0% / 0.5)";
+    readonly description: "The scrim behind a modal (the dialog's ::backdrop). Translucent, so the page stays visible but recedes. Darker in dark mode, where the page is already dark. Never a text background.";
+    readonly dark: "rgb(0% 0% 0% / 0.7)";
+  };
+  readonly "color.bg.danger": {
+    readonly cssVar: "--senui-color-bg-danger";
+    readonly type: "color";
+    readonly value: "oklch(53% 0.2 27)";
+    readonly description: "Fill for destructive actions.";
+    readonly dark: "oklch(72% 0.16 25)";
+  };
+  readonly "color.bg.danger-active": {
+    readonly cssVar: "--senui-color-bg-danger-active";
+    readonly type: "color";
+    readonly value: "oklch(41% 0.17 27)";
+    readonly description: "bg.danger while pressed.";
+    readonly dark: "oklch(86% 0.07 25)";
+  };
+  readonly "color.bg.danger-hover": {
+    readonly cssVar: "--senui-color-bg-danger-hover";
+    readonly type: "color";
+    readonly value: "oklch(47% 0.19 27)";
+    readonly description: "bg.danger under the pointer.";
+    readonly dark: "oklch(80% 0.11 25)";
+  };
+  readonly "color.bg.default": {
+    readonly cssVar: "--senui-color-bg-default";
+    readonly type: "color";
+    readonly value: "oklch(99% 0.003 260)";
+    readonly description: "Page and surface background.";
+    readonly dark: "oklch(16% 0.012 260)";
+  };
+  readonly "color.bg.disabled": {
+    readonly cssVar: "--senui-color-bg-disabled";
+    readonly type: "color";
+    readonly value: "oklch(97% 0.005 260)";
+    readonly description: "Fill of a disabled control. Exempt from contrast (WCAG 1.4.3, 1.4.11).";
+    readonly dark: "oklch(22% 0.015 260)";
+  };
+  readonly "color.bg.raised": {
+    readonly cssVar: "--senui-color-bg-raised";
+    readonly type: "color";
+    readonly value: "oklch(99% 0.003 260)";
+    readonly description: "Popovers, menus, dialogs. Lighter than bg.default in dark mode, because shadows barely show there. Pair with a border: forced-colours mode removes shadows.";
+    readonly dark: "oklch(19% 0.013 260)";
+  };
+  readonly "color.bg.subtle": {
+    readonly cssVar: "--senui-color-bg-subtle";
+    readonly type: "color";
+    readonly value: "oklch(97% 0.005 260)";
+    readonly description: "Recessed areas: wells, table stripes, secondary buttons.";
+    readonly dark: "oklch(22% 0.015 260)";
+  };
+  readonly "color.bg.subtle-active": {
+    readonly cssVar: "--senui-color-bg-subtle-active";
+    readonly type: "color";
+    readonly value: "oklch(91% 0.008 260)";
+    readonly description: "bg.subtle while pressed.";
+    readonly dark: "oklch(30% 0.015 260)";
+  };
+  readonly "color.bg.subtle-hover": {
+    readonly cssVar: "--senui-color-bg-subtle-hover";
+    readonly type: "color";
+    readonly value: "oklch(94% 0.007 260)";
+    readonly description: "bg.subtle under the pointer.";
+    readonly dark: "oklch(26% 0.015 260)";
+  };
+  readonly "color.border.danger": {
+    readonly cssVar: "--senui-color-border-danger";
+    readonly type: "color";
+    readonly value: "oklch(53% 0.2 27)";
+    readonly description: "Outline of an invalid field (WCAG 1.4.11). Use with border.width.strong and an error message, never alone (1.4.1).";
+    readonly dark: "oklch(72% 0.16 25)";
+  };
+  readonly "color.border.default": {
+    readonly cssVar: "--senui-color-border-default";
+    readonly type: "color";
+    readonly value: "oklch(85% 0.01 260)";
+    readonly description: "Decorative dividers. Too faint to identify a control; use border.strong for that.";
+    readonly dark: "oklch(30% 0.015 260)";
+  };
+  readonly "color.border.disabled": {
+    readonly cssVar: "--senui-color-border-disabled";
+    readonly type: "color";
+    readonly value: "oklch(85% 0.01 260)";
+    readonly description: "Outline of a disabled control. Exempt from contrast (WCAG 1.4.11).";
+    readonly dark: "oklch(30% 0.015 260)";
+  };
+  readonly "color.border.strong": {
+    readonly cssVar: "--senui-color-border-strong";
+    readonly type: "color";
+    readonly value: "oklch(60% 0.015 260)";
+    readonly description: "Borders that identify a control, such as input outlines (WCAG 1.4.11).";
+    readonly dark: "oklch(60% 0.015 260)";
+  };
+  readonly "color.fg.accent": {
+    readonly cssVar: "--senui-color-fg-accent";
+    readonly type: "color";
+    readonly value: "oklch(52% 0.18 260)";
+    readonly description: "Links and accent text.";
+    readonly dark: "oklch(72% 0.14 255)";
+  };
+  readonly "color.fg.danger": {
+    readonly cssVar: "--senui-color-fg-danger";
+    readonly type: "color";
+    readonly value: "oklch(53% 0.2 27)";
+    readonly description: "Error messages. Colour alone must never carry an error (WCAG 1.4.1): pair it with text or an icon.";
+    readonly dark: "oklch(72% 0.16 25)";
+  };
+  readonly "color.fg.default": {
+    readonly cssVar: "--senui-color-fg-default";
+    readonly type: "color";
+    readonly value: "oklch(22% 0.015 260)";
+    readonly description: "Body text.";
+    readonly dark: "oklch(97% 0.005 260)";
+  };
+  readonly "color.fg.disabled": {
+    readonly cssVar: "--senui-color-fg-disabled";
+    readonly type: "color";
+    readonly value: "oklch(60% 0.015 260)";
+    readonly description: "Text of a disabled control. Exempt from contrast (WCAG 1.4.3).";
+    readonly dark: "oklch(50% 0.015 260)";
+  };
+  readonly "color.fg.muted": {
+    readonly cssVar: "--senui-color-fg-muted";
+    readonly type: "color";
+    readonly value: "oklch(50% 0.015 260)";
+    readonly description: "Secondary text: hints, captions, placeholders.";
+    readonly dark: "oklch(85% 0.01 260)";
+  };
+  readonly "color.fg.on-accent": {
+    readonly cssVar: "--senui-color-fg-on-accent";
+    readonly type: "color";
+    readonly value: "oklch(99% 0.003 260)";
+    readonly description: "Text and icons on the accent fills.";
+    readonly dark: "oklch(16% 0.012 260)";
+  };
+  readonly "color.fg.on-danger": {
+    readonly cssVar: "--senui-color-fg-on-danger";
+    readonly type: "color";
+    readonly value: "oklch(99% 0.003 260)";
+    readonly description: "Text and icons on the danger fills.";
+    readonly dark: "oklch(16% 0.012 260)";
+  };
+  readonly "color.focus.ring": {
+    readonly cssVar: "--senui-color-focus-ring";
+    readonly type: "color";
+    readonly value: "oklch(52% 0.18 260)";
+    readonly description: "Focus indicator (WCAG 1.4.11, 2.4.7). Drawn as an outline offset by focus.ring-offset, so it sits on the page background, never on a fill (ADR-0005).";
+    readonly dark: "oklch(72% 0.14 255)";
+  };
+  readonly "color.shadow": {
+    readonly cssVar: "--senui-color-shadow";
+    readonly type: "color";
+    readonly value: "rgb(0% 0% 0% / 0.12)";
+    readonly description: "Shadow colour used by the elevation tokens. Decorative.";
+    readonly dark: "rgb(0% 0% 0% / 0.5)";
+  };
+  readonly "elevation.1": {
+    readonly cssVar: "--senui-elevation-1";
+    readonly type: "shadow";
+    readonly value: "0px 1px 2px 0px var(--senui-color-shadow)";
+  };
+  readonly "elevation.2": {
+    readonly cssVar: "--senui-elevation-2";
+    readonly type: "shadow";
+    readonly value: "0px 4px 12px 0px var(--senui-color-shadow)";
+  };
+  readonly "focus.ring-offset": {
+    readonly cssVar: "--senui-focus-ring-offset";
+    readonly type: "dimension";
+    readonly value: "2px";
+    readonly description: "Gap between a control and its focus ring, so the ring sits on the page background (ADR-0005).";
+  };
+  readonly "focus.ring-width": {
+    readonly cssVar: "--senui-focus-ring-width";
+    readonly type: "dimension";
+    readonly value: "2px";
+    readonly description: "Outline width of the focus ring.";
+  };
+  readonly "font.family.mono": {
+    readonly cssVar: "--senui-font-family-mono";
+    readonly type: "fontFamily";
+    readonly value: "ui-monospace, 'SF Mono', Menlo, Consolas, 'Cascadia Mono', 'Liberation Mono', monospace";
+  };
+  readonly "font.family.sans": {
+    readonly cssVar: "--senui-font-family-sans";
+    readonly type: "fontFamily";
+    readonly value: "system-ui, sans-serif";
+  };
+  readonly "font.line-height.normal": {
+    readonly cssVar: "--senui-font-line-height-normal";
+    readonly type: "number";
+    readonly value: "1.5";
+  };
+  readonly "font.line-height.tight": {
+    readonly cssVar: "--senui-font-line-height-tight";
+    readonly type: "number";
+    readonly value: "1.25";
+  };
+  readonly "font.size.lg": {
+    readonly cssVar: "--senui-font-size-lg";
+    readonly type: "dimension";
+    readonly value: "1.25rem";
+  };
+  readonly "font.size.md": {
+    readonly cssVar: "--senui-font-size-md";
+    readonly type: "dimension";
+    readonly value: "1rem";
+  };
+  readonly "font.size.sm": {
+    readonly cssVar: "--senui-font-size-sm";
+    readonly type: "dimension";
+    readonly value: "0.875rem";
+  };
+  readonly "font.weight.bold": {
+    readonly cssVar: "--senui-font-weight-bold";
+    readonly type: "fontWeight";
+    readonly value: "700";
+  };
+  readonly "font.weight.medium": {
+    readonly cssVar: "--senui-font-weight-medium";
+    readonly type: "fontWeight";
+    readonly value: "500";
+  };
+  readonly "font.weight.regular": {
+    readonly cssVar: "--senui-font-weight-regular";
+    readonly type: "fontWeight";
+    readonly value: "400";
+  };
+  readonly "motion.distance.md": {
+    readonly cssVar: "--senui-motion-distance-md";
+    readonly type: "dimension";
+    readonly value: "8px";
+    readonly reducedMotion: "0px";
+  };
+  readonly "motion.distance.sm": {
+    readonly cssVar: "--senui-motion-distance-sm";
+    readonly type: "dimension";
+    readonly value: "4px";
+    readonly reducedMotion: "0px";
+  };
+  readonly "motion.duration.fast": {
+    readonly cssVar: "--senui-motion-duration-fast";
+    readonly type: "duration";
+    readonly value: "120ms";
+  };
+  readonly "motion.duration.moderate": {
+    readonly cssVar: "--senui-motion-duration-moderate";
+    readonly type: "duration";
+    readonly value: "200ms";
+  };
+  readonly "motion.duration.rotation": {
+    readonly cssVar: "--senui-motion-duration-rotation";
+    readonly type: "duration";
+    readonly value: "960ms";
+    readonly description: "One turn of essential continuous rotation (a progress spinner), and nothing else. Slow it by the factor rather than stopping it: × (4 − 3 × motion.reduce) (ADR-0017, ADR-0024).";
+  };
+  readonly "motion.duration.slow": {
+    readonly cssVar: "--senui-motion-duration-slow";
+    readonly type: "duration";
+    readonly value: "320ms";
+  };
+  readonly "motion.easing.enter": {
+    readonly cssVar: "--senui-motion-easing-enter";
+    readonly type: "cubicBezier";
+    readonly value: "cubic-bezier(0, 0, 0, 1)";
+  };
+  readonly "motion.easing.exit": {
+    readonly cssVar: "--senui-motion-easing-exit";
+    readonly type: "cubicBezier";
+    readonly value: "cubic-bezier(0.3, 0, 1, 1)";
+  };
+  readonly "motion.easing.linear": {
+    readonly cssVar: "--senui-motion-easing-linear";
+    readonly type: "cubicBezier";
+    readonly value: "cubic-bezier(0, 0, 1, 1)";
+    readonly description: "Constant speed, for continuous motion such as a loading spinner.";
+  };
+  readonly "motion.easing.standard": {
+    readonly cssVar: "--senui-motion-easing-standard";
+    readonly type: "cubicBezier";
+    readonly value: "cubic-bezier(0.2, 0, 0, 1)";
+  };
+  readonly "motion.reduce": {
+    readonly cssVar: "--senui-motion-reduce";
+    readonly type: "number";
+    readonly value: "1";
+    readonly description: "1 normally, 0 under prefers-reduced-motion. Multiply every movement by it, so an override of a distance can't bring motion back (ADR-0005).";
+    readonly reducedMotion: "0";
+  };
+  readonly "motion.scale.enter": {
+    readonly cssVar: "--senui-motion-scale-enter";
+    readonly type: "number";
+    readonly value: "0.96";
+    readonly description: "Starting scale for elements that grow in. 1 under reduced motion; apply as 1 - (1 - scale) × motion.reduce.";
+    readonly reducedMotion: "1";
+  };
+  readonly "radius.full": {
+    readonly cssVar: "--senui-radius-full";
+    readonly type: "dimension";
+    readonly value: "9999px";
+  };
+  readonly "radius.lg": {
+    readonly cssVar: "--senui-radius-lg";
+    readonly type: "dimension";
+    readonly value: "12px";
+  };
+  readonly "radius.md": {
+    readonly cssVar: "--senui-radius-md";
+    readonly type: "dimension";
+    readonly value: "8px";
+  };
+  readonly "radius.sm": {
+    readonly cssVar: "--senui-radius-sm";
+    readonly type: "dimension";
+    readonly value: "4px";
+  };
+  readonly "size.control.lg": {
+    readonly cssVar: "--senui-size-control-lg";
+    readonly type: "dimension";
+    readonly value: "2.5rem";
+  };
+  readonly "size.control.md": {
+    readonly cssVar: "--senui-size-control-md";
+    readonly type: "dimension";
+    readonly value: "2rem";
+  };
+  readonly "size.control.sm": {
+    readonly cssVar: "--senui-size-control-sm";
+    readonly type: "dimension";
+    readonly value: "1.5rem";
+  };
+  readonly "size.dialog.lg": {
+    readonly cssVar: "--senui-size-dialog-lg";
+    readonly type: "dimension";
+    readonly value: "48rem";
+  };
+  readonly "size.dialog.md": {
+    readonly cssVar: "--senui-size-dialog-md";
+    readonly type: "dimension";
+    readonly value: "32rem";
+  };
+  readonly "size.dialog.sm": {
+    readonly cssVar: "--senui-size-dialog-sm";
+    readonly type: "dimension";
+    readonly value: "24rem";
+  };
+  readonly "size.illustration.lg": {
+    readonly cssVar: "--senui-size-illustration-lg";
+    readonly type: "dimension";
+    readonly value: "5rem";
+  };
+  readonly "size.illustration.sm": {
+    readonly cssVar: "--senui-size-illustration-sm";
+    readonly type: "dimension";
+    readonly value: "2.5rem";
+  };
+  readonly "size.target.min": {
+    readonly cssVar: "--senui-size-target-min";
+    readonly type: "dimension";
+    readonly value: "24px";
+    readonly description: "Smallest allowed pointer target (WCAG 2.5.8). In px, because WCAG measures in CSS px.";
+  };
+  readonly "space.1": {
+    readonly cssVar: "--senui-space-1";
+    readonly type: "dimension";
+    readonly value: "0.25rem";
+  };
+  readonly "space.10": {
+    readonly cssVar: "--senui-space-10";
+    readonly type: "dimension";
+    readonly value: "2.5rem";
+  };
+  readonly "space.12": {
+    readonly cssVar: "--senui-space-12";
+    readonly type: "dimension";
+    readonly value: "3rem";
+  };
+  readonly "space.2": {
+    readonly cssVar: "--senui-space-2";
+    readonly type: "dimension";
+    readonly value: "0.5rem";
+  };
+  readonly "space.3": {
+    readonly cssVar: "--senui-space-3";
+    readonly type: "dimension";
+    readonly value: "0.75rem";
+  };
+  readonly "space.4": {
+    readonly cssVar: "--senui-space-4";
+    readonly type: "dimension";
+    readonly value: "1rem";
+  };
+  readonly "space.5": {
+    readonly cssVar: "--senui-space-5";
+    readonly type: "dimension";
+    readonly value: "1.25rem";
+  };
+  readonly "space.6": {
+    readonly cssVar: "--senui-space-6";
+    readonly type: "dimension";
+    readonly value: "1.5rem";
+  };
+  readonly "space.8": {
+    readonly cssVar: "--senui-space-8";
+    readonly type: "dimension";
+    readonly value: "2rem";
+  };
+};
+//#endregion
+//#region src/types.d.ts
+/** One public design token, as it appears in `tokens.css` (ADR-0004). */
+interface Token {
+  /** The custom property to use in CSS, e.g. `--senui-color-fg-danger`. */
+  readonly cssVar: `--senui-${string}`;
+  /** The DTCG `$type`, e.g. `color`, `dimension`, `duration`. */
+  readonly type: string;
+  /** The CSS value; for colours, the light-theme value. */
+  readonly value: string;
+  /** The dark-theme value. Present on every colour token. */
+  readonly dark?: string;
+  /** The value under `prefers-reduced-motion: reduce`, where it differs. */
+  readonly reducedMotion?: string;
+  readonly description?: string;
+}
+//#endregion
+//#region src/index.d.ts
+/** The key of a public token, e.g. `'color.fg.danger'`. */
+export type TokenKey = keyof typeof tokens;
+//#endregion
+export type { Token };

package/dist/index.js

@@ -0,0 +1,449 @@
+//#region src/generated/tokens.ts
+const tokens = {
+	"border.width.default": {
+		"cssVar": "--senui-border-width-default",
+		"type": "dimension",
+		"value": "1px"
+	},
+	"border.width.strong": {
+		"cssVar": "--senui-border-width-strong",
+		"type": "dimension",
+		"value": "2px",
+		"description": "Invalid and selected controls, so state is not shown by colour alone."
+	},
+	"color.bg.accent": {
+		"cssVar": "--senui-color-bg-accent",
+		"type": "color",
+		"value": "oklch(52% 0.18 260)",
+		"description": "Fill for primary actions.",
+		"dark": "oklch(72% 0.14 255)"
+	},
+	"color.bg.accent-active": {
+		"cssVar": "--senui-color-bg-accent-active",
+		"type": "color",
+		"value": "oklch(40% 0.15 260)",
+		"description": "bg.accent while pressed.",
+		"dark": "oklch(86% 0.07 255)"
+	},
+	"color.bg.accent-hover": {
+		"cssVar": "--senui-color-bg-accent-hover",
+		"type": "color",
+		"value": "oklch(46% 0.17 260)",
+		"description": "bg.accent under the pointer.",
+		"dark": "oklch(80% 0.11 255)"
+	},
+	"color.bg.backdrop": {
+		"cssVar": "--senui-color-bg-backdrop",
+		"type": "color",
+		"value": "rgb(0% 0% 0% / 0.5)",
+		"description": "The scrim behind a modal (the dialog's ::backdrop). Translucent, so the page stays visible but recedes. Darker in dark mode, where the page is already dark. Never a text background.",
+		"dark": "rgb(0% 0% 0% / 0.7)"
+	},
+	"color.bg.danger": {
+		"cssVar": "--senui-color-bg-danger",
+		"type": "color",
+		"value": "oklch(53% 0.2 27)",
+		"description": "Fill for destructive actions.",
+		"dark": "oklch(72% 0.16 25)"
+	},
+	"color.bg.danger-active": {
+		"cssVar": "--senui-color-bg-danger-active",
+		"type": "color",
+		"value": "oklch(41% 0.17 27)",
+		"description": "bg.danger while pressed.",
+		"dark": "oklch(86% 0.07 25)"
+	},
+	"color.bg.danger-hover": {
+		"cssVar": "--senui-color-bg-danger-hover",
+		"type": "color",
+		"value": "oklch(47% 0.19 27)",
+		"description": "bg.danger under the pointer.",
+		"dark": "oklch(80% 0.11 25)"
+	},
+	"color.bg.default": {
+		"cssVar": "--senui-color-bg-default",
+		"type": "color",
+		"value": "oklch(99% 0.003 260)",
+		"description": "Page and surface background.",
+		"dark": "oklch(16% 0.012 260)"
+	},
+	"color.bg.disabled": {
+		"cssVar": "--senui-color-bg-disabled",
+		"type": "color",
+		"value": "oklch(97% 0.005 260)",
+		"description": "Fill of a disabled control. Exempt from contrast (WCAG 1.4.3, 1.4.11).",
+		"dark": "oklch(22% 0.015 260)"
+	},
+	"color.bg.raised": {
+		"cssVar": "--senui-color-bg-raised",
+		"type": "color",
+		"value": "oklch(99% 0.003 260)",
+		"description": "Popovers, menus, dialogs. Lighter than bg.default in dark mode, because shadows barely show there. Pair with a border: forced-colours mode removes shadows.",
+		"dark": "oklch(19% 0.013 260)"
+	},
+	"color.bg.subtle": {
+		"cssVar": "--senui-color-bg-subtle",
+		"type": "color",
+		"value": "oklch(97% 0.005 260)",
+		"description": "Recessed areas: wells, table stripes, secondary buttons.",
+		"dark": "oklch(22% 0.015 260)"
+	},
+	"color.bg.subtle-active": {
+		"cssVar": "--senui-color-bg-subtle-active",
+		"type": "color",
+		"value": "oklch(91% 0.008 260)",
+		"description": "bg.subtle while pressed.",
+		"dark": "oklch(30% 0.015 260)"
+	},
+	"color.bg.subtle-hover": {
+		"cssVar": "--senui-color-bg-subtle-hover",
+		"type": "color",
+		"value": "oklch(94% 0.007 260)",
+		"description": "bg.subtle under the pointer.",
+		"dark": "oklch(26% 0.015 260)"
+	},
+	"color.border.danger": {
+		"cssVar": "--senui-color-border-danger",
+		"type": "color",
+		"value": "oklch(53% 0.2 27)",
+		"description": "Outline of an invalid field (WCAG 1.4.11). Use with border.width.strong and an error message, never alone (1.4.1).",
+		"dark": "oklch(72% 0.16 25)"
+	},
+	"color.border.default": {
+		"cssVar": "--senui-color-border-default",
+		"type": "color",
+		"value": "oklch(85% 0.01 260)",
+		"description": "Decorative dividers. Too faint to identify a control; use border.strong for that.",
+		"dark": "oklch(30% 0.015 260)"
+	},
+	"color.border.disabled": {
+		"cssVar": "--senui-color-border-disabled",
+		"type": "color",
+		"value": "oklch(85% 0.01 260)",
+		"description": "Outline of a disabled control. Exempt from contrast (WCAG 1.4.11).",
+		"dark": "oklch(30% 0.015 260)"
+	},
+	"color.border.strong": {
+		"cssVar": "--senui-color-border-strong",
+		"type": "color",
+		"value": "oklch(60% 0.015 260)",
+		"description": "Borders that identify a control, such as input outlines (WCAG 1.4.11).",
+		"dark": "oklch(60% 0.015 260)"
+	},
+	"color.fg.accent": {
+		"cssVar": "--senui-color-fg-accent",
+		"type": "color",
+		"value": "oklch(52% 0.18 260)",
+		"description": "Links and accent text.",
+		"dark": "oklch(72% 0.14 255)"
+	},
+	"color.fg.danger": {
+		"cssVar": "--senui-color-fg-danger",
+		"type": "color",
+		"value": "oklch(53% 0.2 27)",
+		"description": "Error messages. Colour alone must never carry an error (WCAG 1.4.1): pair it with text or an icon.",
+		"dark": "oklch(72% 0.16 25)"
+	},
+	"color.fg.default": {
+		"cssVar": "--senui-color-fg-default",
+		"type": "color",
+		"value": "oklch(22% 0.015 260)",
+		"description": "Body text.",
+		"dark": "oklch(97% 0.005 260)"
+	},
+	"color.fg.disabled": {
+		"cssVar": "--senui-color-fg-disabled",
+		"type": "color",
+		"value": "oklch(60% 0.015 260)",
+		"description": "Text of a disabled control. Exempt from contrast (WCAG 1.4.3).",
+		"dark": "oklch(50% 0.015 260)"
+	},
+	"color.fg.muted": {
+		"cssVar": "--senui-color-fg-muted",
+		"type": "color",
+		"value": "oklch(50% 0.015 260)",
+		"description": "Secondary text: hints, captions, placeholders.",
+		"dark": "oklch(85% 0.01 260)"
+	},
+	"color.fg.on-accent": {
+		"cssVar": "--senui-color-fg-on-accent",
+		"type": "color",
+		"value": "oklch(99% 0.003 260)",
+		"description": "Text and icons on the accent fills.",
+		"dark": "oklch(16% 0.012 260)"
+	},
+	"color.fg.on-danger": {
+		"cssVar": "--senui-color-fg-on-danger",
+		"type": "color",
+		"value": "oklch(99% 0.003 260)",
+		"description": "Text and icons on the danger fills.",
+		"dark": "oklch(16% 0.012 260)"
+	},
+	"color.focus.ring": {
+		"cssVar": "--senui-color-focus-ring",
+		"type": "color",
+		"value": "oklch(52% 0.18 260)",
+		"description": "Focus indicator (WCAG 1.4.11, 2.4.7). Drawn as an outline offset by focus.ring-offset, so it sits on the page background, never on a fill (ADR-0005).",
+		"dark": "oklch(72% 0.14 255)"
+	},
+	"color.shadow": {
+		"cssVar": "--senui-color-shadow",
+		"type": "color",
+		"value": "rgb(0% 0% 0% / 0.12)",
+		"description": "Shadow colour used by the elevation tokens. Decorative.",
+		"dark": "rgb(0% 0% 0% / 0.5)"
+	},
+	"elevation.1": {
+		"cssVar": "--senui-elevation-1",
+		"type": "shadow",
+		"value": "0px 1px 2px 0px var(--senui-color-shadow)"
+	},
+	"elevation.2": {
+		"cssVar": "--senui-elevation-2",
+		"type": "shadow",
+		"value": "0px 4px 12px 0px var(--senui-color-shadow)"
+	},
+	"focus.ring-offset": {
+		"cssVar": "--senui-focus-ring-offset",
+		"type": "dimension",
+		"value": "2px",
+		"description": "Gap between a control and its focus ring, so the ring sits on the page background (ADR-0005)."
+	},
+	"focus.ring-width": {
+		"cssVar": "--senui-focus-ring-width",
+		"type": "dimension",
+		"value": "2px",
+		"description": "Outline width of the focus ring."
+	},
+	"font.family.mono": {
+		"cssVar": "--senui-font-family-mono",
+		"type": "fontFamily",
+		"value": "ui-monospace, 'SF Mono', Menlo, Consolas, 'Cascadia Mono', 'Liberation Mono', monospace"
+	},
+	"font.family.sans": {
+		"cssVar": "--senui-font-family-sans",
+		"type": "fontFamily",
+		"value": "system-ui, sans-serif"
+	},
+	"font.line-height.normal": {
+		"cssVar": "--senui-font-line-height-normal",
+		"type": "number",
+		"value": "1.5"
+	},
+	"font.line-height.tight": {
+		"cssVar": "--senui-font-line-height-tight",
+		"type": "number",
+		"value": "1.25"
+	},
+	"font.size.lg": {
+		"cssVar": "--senui-font-size-lg",
+		"type": "dimension",
+		"value": "1.25rem"
+	},
+	"font.size.md": {
+		"cssVar": "--senui-font-size-md",
+		"type": "dimension",
+		"value": "1rem"
+	},
+	"font.size.sm": {
+		"cssVar": "--senui-font-size-sm",
+		"type": "dimension",
+		"value": "0.875rem"
+	},
+	"font.weight.bold": {
+		"cssVar": "--senui-font-weight-bold",
+		"type": "fontWeight",
+		"value": "700"
+	},
+	"font.weight.medium": {
+		"cssVar": "--senui-font-weight-medium",
+		"type": "fontWeight",
+		"value": "500"
+	},
+	"font.weight.regular": {
+		"cssVar": "--senui-font-weight-regular",
+		"type": "fontWeight",
+		"value": "400"
+	},
+	"motion.distance.md": {
+		"cssVar": "--senui-motion-distance-md",
+		"type": "dimension",
+		"value": "8px",
+		"reducedMotion": "0px"
+	},
+	"motion.distance.sm": {
+		"cssVar": "--senui-motion-distance-sm",
+		"type": "dimension",
+		"value": "4px",
+		"reducedMotion": "0px"
+	},
+	"motion.duration.fast": {
+		"cssVar": "--senui-motion-duration-fast",
+		"type": "duration",
+		"value": "120ms"
+	},
+	"motion.duration.moderate": {
+		"cssVar": "--senui-motion-duration-moderate",
+		"type": "duration",
+		"value": "200ms"
+	},
+	"motion.duration.rotation": {
+		"cssVar": "--senui-motion-duration-rotation",
+		"type": "duration",
+		"value": "960ms",
+		"description": "One turn of essential continuous rotation (a progress spinner), and nothing else. Slow it by the factor rather than stopping it: × (4 − 3 × motion.reduce) (ADR-0017, ADR-0024)."
+	},
+	"motion.duration.slow": {
+		"cssVar": "--senui-motion-duration-slow",
+		"type": "duration",
+		"value": "320ms"
+	},
+	"motion.easing.enter": {
+		"cssVar": "--senui-motion-easing-enter",
+		"type": "cubicBezier",
+		"value": "cubic-bezier(0, 0, 0, 1)"
+	},
+	"motion.easing.exit": {
+		"cssVar": "--senui-motion-easing-exit",
+		"type": "cubicBezier",
+		"value": "cubic-bezier(0.3, 0, 1, 1)"
+	},
+	"motion.easing.linear": {
+		"cssVar": "--senui-motion-easing-linear",
+		"type": "cubicBezier",
+		"value": "cubic-bezier(0, 0, 1, 1)",
+		"description": "Constant speed, for continuous motion such as a loading spinner."
+	},
+	"motion.easing.standard": {
+		"cssVar": "--senui-motion-easing-standard",
+		"type": "cubicBezier",
+		"value": "cubic-bezier(0.2, 0, 0, 1)"
+	},
+	"motion.reduce": {
+		"cssVar": "--senui-motion-reduce",
+		"type": "number",
+		"value": "1",
+		"description": "1 normally, 0 under prefers-reduced-motion. Multiply every movement by it, so an override of a distance can't bring motion back (ADR-0005).",
+		"reducedMotion": "0"
+	},
+	"motion.scale.enter": {
+		"cssVar": "--senui-motion-scale-enter",
+		"type": "number",
+		"value": "0.96",
+		"description": "Starting scale for elements that grow in. 1 under reduced motion; apply as 1 - (1 - scale) × motion.reduce.",
+		"reducedMotion": "1"
+	},
+	"radius.full": {
+		"cssVar": "--senui-radius-full",
+		"type": "dimension",
+		"value": "9999px"
+	},
+	"radius.lg": {
+		"cssVar": "--senui-radius-lg",
+		"type": "dimension",
+		"value": "12px"
+	},
+	"radius.md": {
+		"cssVar": "--senui-radius-md",
+		"type": "dimension",
+		"value": "8px"
+	},
+	"radius.sm": {
+		"cssVar": "--senui-radius-sm",
+		"type": "dimension",
+		"value": "4px"
+	},
+	"size.control.lg": {
+		"cssVar": "--senui-size-control-lg",
+		"type": "dimension",
+		"value": "2.5rem"
+	},
+	"size.control.md": {
+		"cssVar": "--senui-size-control-md",
+		"type": "dimension",
+		"value": "2rem"
+	},
+	"size.control.sm": {
+		"cssVar": "--senui-size-control-sm",
+		"type": "dimension",
+		"value": "1.5rem"
+	},
+	"size.dialog.lg": {
+		"cssVar": "--senui-size-dialog-lg",
+		"type": "dimension",
+		"value": "48rem"
+	},
+	"size.dialog.md": {
+		"cssVar": "--senui-size-dialog-md",
+		"type": "dimension",
+		"value": "32rem"
+	},
+	"size.dialog.sm": {
+		"cssVar": "--senui-size-dialog-sm",
+		"type": "dimension",
+		"value": "24rem"
+	},
+	"size.illustration.lg": {
+		"cssVar": "--senui-size-illustration-lg",
+		"type": "dimension",
+		"value": "5rem"
+	},
+	"size.illustration.sm": {
+		"cssVar": "--senui-size-illustration-sm",
+		"type": "dimension",
+		"value": "2.5rem"
+	},
+	"size.target.min": {
+		"cssVar": "--senui-size-target-min",
+		"type": "dimension",
+		"value": "24px",
+		"description": "Smallest allowed pointer target (WCAG 2.5.8). In px, because WCAG measures in CSS px."
+	},
+	"space.1": {
+		"cssVar": "--senui-space-1",
+		"type": "dimension",
+		"value": "0.25rem"
+	},
+	"space.10": {
+		"cssVar": "--senui-space-10",
+		"type": "dimension",
+		"value": "2.5rem"
+	},
+	"space.12": {
+		"cssVar": "--senui-space-12",
+		"type": "dimension",
+		"value": "3rem"
+	},
+	"space.2": {
+		"cssVar": "--senui-space-2",
+		"type": "dimension",
+		"value": "0.5rem"
+	},
+	"space.3": {
+		"cssVar": "--senui-space-3",
+		"type": "dimension",
+		"value": "0.75rem"
+	},
+	"space.4": {
+		"cssVar": "--senui-space-4",
+		"type": "dimension",
+		"value": "1rem"
+	},
+	"space.5": {
+		"cssVar": "--senui-space-5",
+		"type": "dimension",
+		"value": "1.25rem"
+	},
+	"space.6": {
+		"cssVar": "--senui-space-6",
+		"type": "dimension",
+		"value": "1.5rem"
+	},
+	"space.8": {
+		"cssVar": "--senui-space-8",
+		"type": "dimension",
+		"value": "2rem"
+	}
+};
+//#endregion
+export { tokens };

package/dist/tokens.css

@@ -0,0 +1,112 @@
+/* Generated by @senakster/senui-tokens. Do not edit; change src/*.tokens.json instead. */
+@layer senui.tokens, senui.base, senui.components;
+
+@layer senui.tokens {
+  :where(:root) {
+    color-scheme: light dark;
+  }
+
+  :where([data-theme="light"]) {
+    color-scheme: light;
+  }
+
+  :where([data-theme="dark"]) {
+    color-scheme: dark;
+  }
+
+  :where(:root, [data-theme]) {
+    --senui-border-width-default: 1px;
+    --senui-border-width-strong: 2px;
+    --senui-color-bg-accent: light-dark(oklch(52% 0.18 260), oklch(72% 0.14 255));
+    --senui-color-bg-accent-active: light-dark(oklch(40% 0.15 260), oklch(86% 0.07 255));
+    --senui-color-bg-accent-hover: light-dark(oklch(46% 0.17 260), oklch(80% 0.11 255));
+    --senui-color-bg-backdrop: light-dark(rgb(0% 0% 0% / 0.5), rgb(0% 0% 0% / 0.7));
+    --senui-color-bg-danger: light-dark(oklch(53% 0.2 27), oklch(72% 0.16 25));
+    --senui-color-bg-danger-active: light-dark(oklch(41% 0.17 27), oklch(86% 0.07 25));
+    --senui-color-bg-danger-hover: light-dark(oklch(47% 0.19 27), oklch(80% 0.11 25));
+    --senui-color-bg-default: light-dark(oklch(99% 0.003 260), oklch(16% 0.012 260));
+    --senui-color-bg-disabled: light-dark(oklch(97% 0.005 260), oklch(22% 0.015 260));
+    --senui-color-bg-raised: light-dark(oklch(99% 0.003 260), oklch(19% 0.013 260));
+    --senui-color-bg-subtle: light-dark(oklch(97% 0.005 260), oklch(22% 0.015 260));
+    --senui-color-bg-subtle-active: light-dark(oklch(91% 0.008 260), oklch(30% 0.015 260));
+    --senui-color-bg-subtle-hover: light-dark(oklch(94% 0.007 260), oklch(26% 0.015 260));
+    --senui-color-border-danger: light-dark(oklch(53% 0.2 27), oklch(72% 0.16 25));
+    --senui-color-border-default: light-dark(oklch(85% 0.01 260), oklch(30% 0.015 260));
+    --senui-color-border-disabled: light-dark(oklch(85% 0.01 260), oklch(30% 0.015 260));
+    --senui-color-border-strong: light-dark(oklch(60% 0.015 260), oklch(60% 0.015 260));
+    --senui-color-fg-accent: light-dark(oklch(52% 0.18 260), oklch(72% 0.14 255));
+    --senui-color-fg-danger: light-dark(oklch(53% 0.2 27), oklch(72% 0.16 25));
+    --senui-color-fg-default: light-dark(oklch(22% 0.015 260), oklch(97% 0.005 260));
+    --senui-color-fg-disabled: light-dark(oklch(60% 0.015 260), oklch(50% 0.015 260));
+    --senui-color-fg-muted: light-dark(oklch(50% 0.015 260), oklch(85% 0.01 260));
+    --senui-color-fg-on-accent: light-dark(oklch(99% 0.003 260), oklch(16% 0.012 260));
+    --senui-color-fg-on-danger: light-dark(oklch(99% 0.003 260), oklch(16% 0.012 260));
+    --senui-color-focus-ring: light-dark(oklch(52% 0.18 260), oklch(72% 0.14 255));
+    --senui-color-shadow: light-dark(rgb(0% 0% 0% / 0.12), rgb(0% 0% 0% / 0.5));
+    --senui-elevation-1: 0px 1px 2px 0px var(--senui-color-shadow);
+    --senui-elevation-2: 0px 4px 12px 0px var(--senui-color-shadow);
+    --senui-focus-ring-offset: 2px;
+    --senui-focus-ring-width: 2px;
+    --senui-font-family-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Cascadia Mono', 'Liberation Mono', monospace;
+    --senui-font-family-sans: system-ui, sans-serif;
+    --senui-font-line-height-normal: 1.5;
+    --senui-font-line-height-tight: 1.25;
+    --senui-font-size-lg: 1.25rem;
+    --senui-font-size-md: 1rem;
+    --senui-font-size-sm: 0.875rem;
+    --senui-font-weight-bold: 700;
+    --senui-font-weight-medium: 500;
+    --senui-font-weight-regular: 400;
+    --senui-motion-distance-md: 8px;
+    --senui-motion-distance-sm: 4px;
+    --senui-motion-duration-fast: 120ms;
+    --senui-motion-duration-moderate: 200ms;
+    --senui-motion-duration-rotation: 960ms;
+    --senui-motion-duration-slow: 320ms;
+    --senui-motion-easing-enter: cubic-bezier(0, 0, 0, 1);
+    --senui-motion-easing-exit: cubic-bezier(0.3, 0, 1, 1);
+    --senui-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
+    --senui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+    --senui-motion-reduce: 1;
+    --senui-motion-scale-enter: 0.96;
+    --senui-radius-full: 9999px;
+    --senui-radius-lg: 12px;
+    --senui-radius-md: 8px;
+    --senui-radius-sm: 4px;
+    --senui-size-control-lg: 2.5rem;
+    --senui-size-control-md: 2rem;
+    --senui-size-control-sm: 1.5rem;
+    --senui-size-dialog-lg: 48rem;
+    --senui-size-dialog-md: 32rem;
+    --senui-size-dialog-sm: 24rem;
+    --senui-size-illustration-lg: 5rem;
+    --senui-size-illustration-sm: 2.5rem;
+    --senui-size-target-min: 24px;
+    --senui-space-1: 0.25rem;
+    --senui-space-10: 2.5rem;
+    --senui-space-12: 3rem;
+    --senui-space-2: 0.5rem;
+    --senui-space-3: 0.75rem;
+    --senui-space-4: 1rem;
+    --senui-space-5: 1.25rem;
+    --senui-space-6: 1.5rem;
+    --senui-space-8: 2rem;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(:root, [data-theme]) {
+      --senui-motion-distance-md: 0px;
+      --senui-motion-distance-sm: 0px;
+      --senui-motion-reduce: 0;
+      --senui-motion-scale-enter: 1;
+    }
+  }
+}
+
+@layer senui.base {
+  :where([data-theme]) {
+    background-color: var(--senui-color-bg-default);
+    color: var(--senui-color-fg-default);
+    accent-color: var(--senui-color-fg-accent);
+  }
+}

package/package.json

@@ -1,6 +1,40 @@
 {
   "name": "@senakster/senui-tokens",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.1.0",
+  "description": "Design tokens for senui: CSS custom properties and a typed JS map.",
+  "license": "MIT",
+  "homepage": "https://senakster.github.io/senui/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/senakster/senui.git",
+    "directory": "packages/tokens"
+  },
+  "bugs": "https://github.com/senakster/senui/issues",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "CHANGELOG.md"
+  ],
+  "exports": {
+    ".": "./dist/index.js",
+    "./tokens.css": "./dist/tokens.css",
+    "./package.json": "./package.json"
+  },
+  "devDependencies": {
+    "colorjs.io": "0.5.2",
+    "publint": "0.3.25",
+    "style-dictionary": "5.6.1",
+    "tsdown": "0.23.1",
+    "typescript": "6.0.3",
+    "vite": "8.3.4",
+    "vitest": "5.0.4"
+  },
+  "scripts": {
+    "build": "node sd.config.mjs && tsdown",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  }
 }