@rowkit/tokens 1.0.0-beta.0 → 1.0.0-beta.1

package/README.md

@@ -1,9 +1,9 @@
 # @rowkit/tokens
 
-[![npm](https://img.shields.io/npm/v/@rowkit/tokens/beta?color=000080)](https://www.npmjs.com/package/@rowkit/tokens)
+[![npm](https://img.shields.io/npm/v/@rowkit/tokens/beta?color=D63A1F)](https://www.npmjs.com/package/@rowkit/tokens)
 [![license](https://img.shields.io/npm/l/@rowkit/tokens)](https://github.com/NikolaiKushner/rowkit/blob/main/LICENSE)
 
-The design tokens behind [rowkit](https://www.npmjs.com/package/rowkit) — the Windows 98 palette, bevels, type, spacing, radii, layers and motion.
+The design tokens behind [rowkit](https://www.npmjs.com/package/rowkit) — colour, shadows, sizes, corners, type, layers and motion for its two themes: **Windows 98**, the default, and **modern**, in light and dark. Plus `defineTheme()`, to make a theme of your own (with rowkit installed, import it from `rowkit/theme` — the same function, matched to the components).
 
 Usable on its own. Nothing here depends on Vue, so a chart library, a design tool or an email template can read the same values the components use.
 
@@ -19,7 +19,7 @@ npm i @rowkit/tokens@beta
 
 **Primitives** are the raw palette — the VGA colours and Windows 98's system colours: `--color-vga-navy` is one specific blue and means nothing on its own. **Semantic** tokens name a role — `--color-card`, `--color-muted-foreground`, `--color-border` — and point at a primitive through `var()`.
 
-Rebranding is a matter of repointing semantic references rather than hunting hex codes. There is one theme; rowkit has no dark mode.
+Rebranding is a matter of repointing semantic references rather than hunting hex codes. The modern theme has a palette of its own (`--color-modern-*`) and points the same semantic names at it, once for light and once for dark.
 
 ## Use
 
@@ -30,7 +30,13 @@ As a Tailwind v4 theme:
 @import '@rowkit/tokens/css';
 ```
 
-Every token becomes a theme value, so `bg-card`, `text-ui`, `p-4` and `shadow-raised` resolve to the scales above.
+Every token becomes a theme value, so `bg-card`, `text-ui`, `p-4` and `shadow-raised` resolve to the scales above. The stylesheet also carries both themes. Pick one with an attribute on any element; themes nest:
+
+```html
+<html data-theme="modern" data-color-scheme="dark"></html>
+```
+
+Without `data-theme` a page is Windows 98. Without `data-color-scheme` the modern theme follows the system's light or dark setting.
 
 As CSS custom properties, for anything Tailwind does not cover:
 
@@ -51,17 +57,69 @@ tokens.color.vga.silver // '#c0c0c0' — the face of every window
 const series = [tokens.color.vga.navy, tokens.color.vga.green, tokens.color.vga.maroon]
 ```
 
-`tokens` is grouped by scale rather than flattened, so `tokens.color.vga.navy` narrows to its literal type and autocompletes at every level.
+`tokens` is grouped by scale rather than flattened, so `tokens.color.vga.navy` narrows to its literal type and autocompletes at every level. The scales are Windows 98's values.
+
+## Themes as data
+
+`tokens.themes` has each theme as the CSS variables it declares — every value a theme may set, by name:
+
+```ts
+import { tokens } from '@rowkit/tokens'
+
+tokens.themes.win98['--spacing-control-md'] // '28px'
+tokens.themes.modern.light['--spacing-control-md'] // '32px'
+tokens.themes.modern.dark // only what the dark scheme changes
+```
+
+## A theme of your own
+
+`defineTheme()` starts from `modern` (the default) or `win98`, lays your values over it and returns the stylesheet — every variable declared, and for a theme with a dark scheme, the dark rules too, following the system unless `data-color-scheme` fixes it. A token name rowkit does not have throws, so a typo fails the build.
+
+```ts
+import { defineTheme } from '@rowkit/tokens'
+
+export const acme = defineTheme({
+  name: 'acme', // <html data-theme="acme">
+  extends: 'modern',
+  light: { '--color-control-primary': '#5b3df5', '--radius-md': '10px' },
+  dark: { '--color-control-primary': '#7c66ff' },
+})
+```
+
+Write the string to a file imported after `rowkit/styles`, or into a `<style>` element at start-up. `themeRule(selector, scheme, values)` writes one rule, if you would rather assemble the stylesheet yourself:
+
+```ts
+import { themeRule, tokens } from '@rowkit/tokens'
+
+themeRule('.print', 'light', { ...tokens.themes.win98, '--color-background': '#ffffff' })
+```
+
+The whole guide, with a live builder: [Themes](https://rowkit.dev/foundations/themes).
+
+## Reference
+
+`@rowkit/tokens/reference` describes every token a theme sets: what it is for, which components read it, and its value in Windows 98 and in modern light and dark. A separate entry point, so the main one stays small.
+
+```ts
+import { tokenReference } from '@rowkit/tokens/reference'
+
+tokenReference.find((t) => t.name === '--color-control-primary')
+// { name, group: 'color', description: '…', components: ['Button'], values: { win98, modernLight, modernDark } }
+```
 
 ## Notes on the values
 
-**Colour is the exact Windows 98 palette.** Primitives are `#rrggbb` values from the VGA palette and the default Windows 98 scheme, named as in the design's Figma variables.
+**Windows 98's colour is the exact Windows 98 palette.** Primitives are `#rrggbb` values from the VGA palette and the default Windows 98 scheme, named as in the design's Figma variables. The modern palette follows the designer's Figma file.
+
+**Depth: bevels in Windows 98, soft shadows in modern.** In Windows 98, `shadow-raised`, `shadow-sunken`, `shadow-window` and the rest are hard inset lines in the four `bevel-*` colours. The modern theme sets the same names to soft shadows outside the box and hairline edges.
+
+**Corners: square in Windows 98, rounded in modern.** In Windows 98 the radius scale multiplies `--radius`, which is `0rem` until you set it. The modern theme sets each step as a length: 7px for a button or a field, 12px for a window.
 
-**Depth is bevels, not elevation.** `shadow-raised`, `shadow-sunken`, `shadow-window` and the rest are hard inset lines in the four `bevel-*` colours. Corners are square: the radius scale multiplies `--radius`, which is `0rem` until you set it.
+**Type: PT Sans and VT323 in Windows 98, the system's faces in modern.** Both set the interface at 13px (`text-ui`) — in Windows 98, its 8pt at Large Fonts. Windows 98 has two weights, regular and bold; modern's emphasis (`--font-weight-strong`) is semibold. The font files are not shipped: for Windows 98, load `@fontsource/pt-sans` and `@fontsource/vt323` in the app. The modern theme loads nothing.
 
-**Type is PT Sans and VT323.** The interface is set at 11px (`text-ui`). The font files are not shipped; load `@fontsource/pt-sans` and `@fontsource/vt323` in the app.
+**Motion: next to none in Windows 98, short in modern.** Windows 98 changes state at once; the modern theme uses transitions of 120–160ms.
 
-**Contrast is asserted, not claimed.** Every semantic text pairing is checked against WCAG AA, and every control boundary and focus ring against 3:1, in the package's own tests.
+**Contrast is asserted, not claimed.** Every semantic text pairing is checked against WCAG AA, and every control boundary and focus ring against 3:1, in every theme and scheme, in the package's own tests.
 
 **Spacing keys are multiples of 4px.** `4` is 1rem, `2` is 8px — the convention most Vue and Tailwind developers already carry.
 
@@ -71,4 +129,4 @@ const series = [tokens.color.vga.navy, tokens.color.vga.green, tokens.color.vga.
 
 MIT © Nikolai Kushner
 
-The visual language is a tribute to Windows 98. rowkit is not affiliated with or endorsed by Microsoft.
+The Windows 98 theme is a tribute to Windows 98. rowkit is not affiliated with or endorsed by Microsoft.

package/dist/color.d.ts

@@ -177,40 +177,157 @@ export declare const semanticColor: {
      * 11:1 on `#b5b5b5`.
      */
     readonly 'titlebar-inactive-foreground': `var(--color-${string})`;
+    /** Neutral fill: a solid neutral badge, and anything filled in the neutral colour. */
     readonly 'neutral-solid': `var(--color-${string})`;
+    /** Neutral fill under the pointer. */
     readonly 'neutral-solid-hover': `var(--color-${string})`;
+    /** Text and icons on the neutral fill. */
     readonly 'neutral-on-solid': `var(--color-${string})`;
+    /** Neutral tint: the face of a subtle neutral badge or callout. */
     readonly 'neutral-subtle': `var(--color-${string})`;
+    /** Neutral text and icons, on its tint and on the page. */
     readonly 'neutral-on-subtle': `var(--color-${string})`;
+    /** The edge of a subtle or outlined neutral badge. */
     readonly 'neutral-border': `var(--color-${string})`;
+    /** Primary fill — the accent: a solid primary badge, a selected item, the default action in a theme that colours it. */
     readonly 'primary-solid': `var(--color-${string})`;
+    /** Primary fill under the pointer. */
     readonly 'primary-solid-hover': `var(--color-${string})`;
+    /** Text and icons on the primary fill. */
     readonly 'primary-on-solid': `var(--color-${string})`;
+    /** Primary tint: the face of a subtle primary badge or callout. */
     readonly 'primary-subtle': `var(--color-${string})`;
+    /** Primary text and icons, on its tint and on the page. */
     readonly 'primary-on-subtle': `var(--color-${string})`;
+    /** The edge of a subtle or outlined primary badge. */
     readonly 'primary-border': `var(--color-${string})`;
+    /** Success fill: a solid success badge, and anything filled in the success colour. */
     readonly 'success-solid': `var(--color-${string})`;
+    /** Success fill under the pointer. */
     readonly 'success-solid-hover': `var(--color-${string})`;
+    /** Text and icons on the success fill. */
     readonly 'success-on-solid': `var(--color-${string})`;
+    /** Success tint: the face of a subtle success badge or callout. */
     readonly 'success-subtle': `var(--color-${string})`;
+    /** Success text and icons, on its tint and on the page. */
     readonly 'success-on-subtle': `var(--color-${string})`;
+    /** The edge of a subtle or outlined success badge. */
     readonly 'success-border': `var(--color-${string})`;
     /**
-     * Yellow carries black, never white: white on `#ffff00` is 1.07:1. Its edge
-     * is olive, because yellow on silver has almost no edge of its own.
+     * Warning fill: a solid warning badge, and anything filled in the warning colour. Yellow carries black, never white: white on `#ffff00` is 1.07:1;
+     * its edge is olive, because yellow on silver has almost no edge of its own.
      */
     readonly 'warning-solid': `var(--color-${string})`;
+    /** Warning fill under the pointer. */
     readonly 'warning-solid-hover': `var(--color-${string})`;
+    /** Text and icons on the warning fill. */
     readonly 'warning-on-solid': `var(--color-${string})`;
+    /** Warning tint: the face of a subtle warning badge or callout. */
     readonly 'warning-subtle': `var(--color-${string})`;
+    /** Warning text and icons, on its tint and on the page. */
     readonly 'warning-on-subtle': `var(--color-${string})`;
+    /** The edge of a subtle or outlined warning badge. */
     readonly 'warning-border': `var(--color-${string})`;
+    /** Danger fill: a solid danger badge, and anything filled in the danger colour. */
     readonly 'danger-solid': `var(--color-${string})`;
+    /** Danger fill under the pointer. */
     readonly 'danger-solid-hover': `var(--color-${string})`;
+    /** Text and icons on the danger fill. */
     readonly 'danger-on-solid': `var(--color-${string})`;
+    /** Danger tint: the face of a subtle danger badge or callout. */
     readonly 'danger-subtle': `var(--color-${string})`;
+    /** Danger text and icons, on its tint and on the page. */
     readonly 'danger-on-subtle': `var(--color-${string})`;
+    /** The edge of a subtle or outlined danger badge. */
     readonly 'danger-border': `var(--color-${string})`;
+    /** A plain button, a spin or drop button, a table's sort header. */
+    readonly control: `var(--color-${string})`;
+    /** Text and icons on a plain button. */
+    readonly 'control-foreground': `var(--color-${string})`;
+    /** A plain button under the pointer. */
+    readonly 'control-hover': `var(--color-${string})`;
+    /** A plain button while it is held. */
+    readonly 'control-active': `var(--color-${string})`;
+    /** The default button of a form or dialog — Enter's target. */
+    readonly 'control-primary': `var(--color-${string})`;
+    /** Text and icons on the default button. */
+    readonly 'control-primary-foreground': `var(--color-${string})`;
+    /** The default button under the pointer. */
+    readonly 'control-primary-hover': `var(--color-${string})`;
+    /** The default button while it is held. */
+    readonly 'control-primary-active': `var(--color-${string})`;
+    /** A flat toolbar button while hovered and while held. */
+    readonly 'control-ghost-hover': `var(--color-${string})`;
+    readonly 'control-ghost-active': `var(--color-${string})`;
+    /** The face of a latched toggle, under its pattern. */
+    readonly 'control-latched': `var(--color-${string})`;
+    /** A latched default button. A toggle is never the default, but if one latches it keeps its colour. */
+    readonly 'control-primary-latched': `var(--color-${string})`;
+    /** The box of a checked checkbox or radio, and the mark inside it. */
+    readonly checked: `var(--color-${string})`;
+    readonly 'on-checked': `var(--color-${string})`;
+    /** A list that drops from a trigger: a select's options. */
+    readonly popover: `var(--color-${string})`;
+    readonly 'popover-border': `var(--color-${string})`;
+    /** The ring a theme draws around a focused control, outside its edge. */
+    readonly 'focus-ring': `var(--color-${string})`;
+    /** A window's caption buttons; one fill per button, for themes that colour them. */
+    readonly caption: `var(--color-${string})`;
+    readonly 'caption-foreground': `var(--color-${string})`;
+    readonly 'caption-close': `var(--color-${string})`;
+    readonly 'caption-minimize': `var(--color-${string})`;
+    readonly 'caption-maximize': `var(--color-${string})`;
+    readonly 'caption-inactive': `var(--color-${string})`;
+    /** A data table's column headers. */
+    readonly 'table-header': `var(--color-${string})`;
+    readonly 'table-header-foreground': `var(--color-${string})`;
+    /** Every other row of a data table. Windows 98 does not stripe. */
+    readonly 'table-stripe': `var(--color-${string})`;
+    /** A data table row under the pointer. Windows 98 does not highlight it. */
+    readonly 'table-row-hover': `var(--color-${string})`;
+    /** The channel a progress bar or a scroll thumb runs in, and what fills it. */
+    readonly track: `var(--color-${string})`;
+    readonly progress: `var(--color-${string})`;
+    readonly 'scroll-thumb': `var(--color-${string})`;
+    /** The channel a scroll bar's thumb runs in, under its pattern. */
+    readonly 'scroll-track': `var(--color-${string})`;
+    /** The frame of a tooltip. */
+    readonly 'tooltip-border': `var(--color-${string})`;
+    /**
+     * The inside of a group box's frame, and the face around it — behind the
+     * legend and the frame's edge. Both the window's silver in Windows 98.
+     */
+    readonly groupbox: `var(--color-${string})`;
+    readonly 'groupbox-face': `var(--color-${string})`;
+    /** A toast's ✕: the caption button's silver in Windows 98, a soft grey disc elsewhere. */
+    readonly 'toast-close': `var(--color-${string})`;
+    readonly 'toast-close-foreground': `var(--color-${string})`;
+    /** «Loading…» in a dropped list: plain text in Windows 98, the subtle grey elsewhere. */
+    readonly 'loading-foreground': `var(--color-${string})`;
+    /** The strip that holds a searchable list's search box: the window face in Windows 98, nothing elsewhere. */
+    readonly 'select-search': `var(--color-${string})`;
+    /** A pager's buttons: raised command buttons in Windows 98, flat elsewhere. */
+    readonly pager: `var(--color-${string})`;
+    readonly 'pager-hover': `var(--color-${string})`;
+    readonly 'pager-active': `var(--color-${string})`;
+    /** The strip a filter bar sits on. */
+    readonly 'filter-bar': `var(--color-${string})`;
+    /** A filter chip: its face, its edge and its text. */
+    readonly chip: `var(--color-${string})`;
+    readonly 'chip-border': `var(--color-${string})`;
+    readonly 'chip-foreground': `var(--color-${string})`;
+    /** The face of a chip's ✕ at rest: the chip's own white in Windows 98. */
+    readonly 'chip-remove': `var(--color-${string})`;
+    /**
+     * The value of a read-only field that holds focus — a drop-down list's —
+     * highlighted the way Windows 98 marks it, and the text on it.
+     */
+    readonly 'field-highlight': `var(--color-${string})`;
+    readonly 'on-field-highlight': `var(--color-${string})`;
+    /** The text caret in a field. */
+    readonly 'field-caret': `var(--color-${string})`;
+    /** The buttons inside a field: a select's drop button, a number's spin buttons. */
+    readonly 'field-button': `var(--color-${string})`;
 };
 /** Names of every semantic colour token. */
 export type SemanticColorName = keyof typeof semanticColor;

package/dist/css.d.ts

@@ -5,8 +5,22 @@
  * the stylesheet from them, so the two cannot drift. `css.test.ts` asserts that
  * every token in every scale reaches the output.
  *
- * There is one theme. Semantic tokens point at primitives, so a consumer
- * rebrands by repointing a semantic token rather than editing a literal colour.
+ * Two themes. Windows 98 is the default, carried by `:root`; the modern theme
+ * is switched on by `data-theme="modern"` on any element, and its dark scheme
+ * by the system or by `data-color-scheme="dark"` on that same element. A theme
+ * is a set of custom property values and nothing else, so themes nest: a
+ * region marked `data-theme="win98"` inside a modern page is Windows 98.
+ *
+ * One thing makes that work, and it is easy to break. A custom property whose
+ * value contains `var()` is resolved on the element that declares it, and
+ * descendants inherit the result. A theme therefore re-declares every token it
+ * changes on its own element; repointing a primitive at `:root` would not reach
+ * a semantic token that has already been resolved there.
+ *
+ * Shadows take one more step. Tailwind copies a `--shadow-*` value into each
+ * `shadow-*` utility rather than referencing it, so a theme could never change
+ * one. The `@theme` entry is therefore `var(--rk-shadow-*)`, and the value
+ * lives in that variable.
  *
  * @returns The complete stylesheet, ready to write to disk.
  */

package/dist/index.d.ts

@@ -28,6 +28,12 @@ export { shadow, textShadow } from './shadow.js';
 export type { ShadowName, TextShadowName } from './shadow.js';
 export { spacing, spacingBase } from './spacing.js';
 export type { SpacingName } from './spacing.js';
+export { size } from './size.js';
+export type { SizeName } from './size.js';
+export { style } from './style.js';
+export type { StyleName } from './style.js';
+export { modernDarkColor, modernDarkShadow, modernDarkVars, modernFont, modernFontSize, modernFontWeight, modernLightColor, modernLightShadow, modernLightVars, modernPalette, modernRadius, modernSize, modernStyle, defineTheme, themeNames, themeRule, win98Vars, } from './themes/index.js';
+export type { ModernPaletteName, ThemeDefinition, ThemeName, ThemeTokenName, ThemeValues, ThemeVars, } from './themes/index.js';
 export { fontFamily, fontSize, fontWeight, letterSpacing, lineHeight } from './typography.js';
 export type { FontSizeName } from './typography.js';
 export { zIndex } from './z-index.js';
@@ -149,6 +155,56 @@ export declare const tokens: {
             readonly 'danger-subtle': `var(--color-${string})`;
             readonly 'danger-on-subtle': `var(--color-${string})`;
             readonly 'danger-border': `var(--color-${string})`;
+            readonly control: `var(--color-${string})`;
+            readonly 'control-foreground': `var(--color-${string})`;
+            readonly 'control-hover': `var(--color-${string})`;
+            readonly 'control-active': `var(--color-${string})`;
+            readonly 'control-primary': `var(--color-${string})`;
+            readonly 'control-primary-foreground': `var(--color-${string})`;
+            readonly 'control-primary-hover': `var(--color-${string})`;
+            readonly 'control-primary-active': `var(--color-${string})`;
+            readonly 'control-ghost-hover': `var(--color-${string})`;
+            readonly 'control-ghost-active': `var(--color-${string})`;
+            readonly 'control-latched': `var(--color-${string})`;
+            readonly 'control-primary-latched': `var(--color-${string})`;
+            readonly checked: `var(--color-${string})`;
+            readonly 'on-checked': `var(--color-${string})`;
+            readonly popover: `var(--color-${string})`;
+            readonly 'popover-border': `var(--color-${string})`;
+            readonly 'focus-ring': `var(--color-${string})`;
+            readonly caption: `var(--color-${string})`;
+            readonly 'caption-foreground': `var(--color-${string})`;
+            readonly 'caption-close': `var(--color-${string})`;
+            readonly 'caption-minimize': `var(--color-${string})`;
+            readonly 'caption-maximize': `var(--color-${string})`;
+            readonly 'caption-inactive': `var(--color-${string})`;
+            readonly 'table-header': `var(--color-${string})`;
+            readonly 'table-header-foreground': `var(--color-${string})`;
+            readonly 'table-stripe': `var(--color-${string})`;
+            readonly 'table-row-hover': `var(--color-${string})`;
+            readonly track: `var(--color-${string})`;
+            readonly progress: `var(--color-${string})`;
+            readonly 'scroll-thumb': `var(--color-${string})`;
+            readonly 'scroll-track': `var(--color-${string})`;
+            readonly 'tooltip-border': `var(--color-${string})`;
+            readonly groupbox: `var(--color-${string})`;
+            readonly 'groupbox-face': `var(--color-${string})`;
+            readonly 'toast-close': `var(--color-${string})`;
+            readonly 'toast-close-foreground': `var(--color-${string})`;
+            readonly 'loading-foreground': `var(--color-${string})`;
+            readonly 'select-search': `var(--color-${string})`;
+            readonly pager: `var(--color-${string})`;
+            readonly 'pager-hover': `var(--color-${string})`;
+            readonly 'pager-active': `var(--color-${string})`;
+            readonly 'filter-bar': `var(--color-${string})`;
+            readonly chip: `var(--color-${string})`;
+            readonly 'chip-border': `var(--color-${string})`;
+            readonly 'chip-foreground': `var(--color-${string})`;
+            readonly 'chip-remove': `var(--color-${string})`;
+            readonly 'field-highlight': `var(--color-${string})`;
+            readonly 'on-field-highlight': `var(--color-${string})`;
+            readonly 'field-caret': `var(--color-${string})`;
+            readonly 'field-button': `var(--color-${string})`;
         };
     };
     readonly spacing: {
@@ -168,6 +224,165 @@ export declare const tokens: {
         readonly 24: "6rem";
     };
     readonly spacingBase: "0.25rem";
+    readonly size: {
+        readonly 'control-xs': "21px";
+        readonly 'control-sm': "26px";
+        readonly 'control-md': "28px";
+        readonly 'control-lg': "33px";
+        readonly 'icon-xs': "25px";
+        readonly 'icon-sm': "27px";
+        readonly 'icon-md': "30px";
+        readonly 'icon-lg': "34px";
+        readonly 'button-min-xs': "3rem";
+        readonly 'button-min-sm': "4rem";
+        readonly 'button-min-md': "92px";
+        readonly 'button-min-lg': "108px";
+        readonly 'button-px-xs': "0.375rem";
+        readonly 'button-px-sm': "0.5rem";
+        readonly 'button-px-md': "0.75rem";
+        readonly 'button-px-lg': "1rem";
+        readonly 'field-px': "0.25rem";
+        readonly 'field-px-lg': "0.375rem";
+        readonly 'field-gap-sm': "0.25rem";
+        readonly 'field-gap-md': "0.375rem";
+        readonly 'field-gap-lg': "0.5rem";
+        readonly 'field-left-gap': "0.5rem";
+        readonly 'field-error-gap': "0.25rem";
+        readonly check: "13px";
+        readonly radio: "12px";
+        readonly 'check-gap': "4px";
+        readonly 'check-label-px': "1px";
+        readonly titlebar: "22px";
+        readonly 'caption-w': "20px";
+        readonly 'caption-h': "18px";
+        readonly 'caption-gap': "0px";
+        readonly 'caption-close-gap': "2px";
+        readonly 'titlebar-px': "2px";
+        readonly 'title-inset-start': "4px";
+        readonly 'title-inset-end': "28px";
+        readonly frame: "2px";
+        readonly 'dialog-px': "0.75rem";
+        readonly 'dialog-pt': "0.75rem";
+        readonly 'dialog-footer-pt': "0.5rem";
+        readonly 'dialog-footer-pb': "0.75rem";
+        readonly item: "22px";
+        readonly 'item-pl': "2px";
+        readonly 'item-pr': "0.25rem";
+        readonly 'item-check': "12px";
+        readonly 'item-gap': "2px";
+        readonly 'item-check-glyph': "7px";
+        readonly 'popover-inset': "1px";
+        readonly 'table-header-px': "0.25rem";
+        readonly 'table-cell-px': "0.375rem";
+        readonly 'row-sm': "22px";
+        readonly 'row-md': "27px";
+        readonly 'select-arrow': "8px";
+        readonly 'select-arrow-overlap': "0px";
+        readonly 'select-message-px': "6px";
+        readonly 'select-message-py': "6px";
+        readonly 'select-message-gap': "6px";
+        readonly 'select-search-p': "2px";
+        readonly 'select-search-gap': "0px";
+        readonly 'field-button-h-sm': "17px";
+        readonly 'field-button-h': "19px";
+        readonly 'field-button-h-lg': "23px";
+        readonly 'field-button-pr': "2px";
+        readonly 'field-drop-icon': "8px";
+        readonly 'select-pr': "2px";
+        readonly 'filter-bar-p': "0.25rem";
+        readonly 'filter-bar-gap': "0.25rem";
+        readonly 'chip-px': "0.375rem";
+        readonly 'chip-pr-remove': "0.125rem";
+        readonly 'toast-py': "0.5rem";
+        readonly 'toast-pl': "0.5rem";
+        readonly 'toast-pr': "0.25rem";
+        readonly 'toast-gap': "0.5rem";
+        readonly 'toast-body-gap': "0.25rem";
+        readonly 'toast-icon': "16px";
+        readonly 'toast-close-w': "20px";
+        readonly 'toast-close-h': "18px";
+        readonly 'pager-px': "0.25rem";
+        readonly 'pager-arrow': "8px";
+        readonly 'pager-focus-px': "1px";
+        readonly 'pager-min-sm': "0px";
+        readonly 'chip-sm': "23px";
+        readonly 'chip-md': "26px";
+        readonly 'badge-px-sm': "0.25rem";
+        readonly 'badge-px-md': "0.375rem";
+        readonly 'badge-dot': "5px";
+        readonly 'empty-p-sm': "0.75rem";
+        readonly 'empty-p-md': "1.5rem";
+        readonly 'empty-p-lg': "1.5rem";
+        readonly 'empty-gap': "1rem";
+        readonly 'tooltip-px': "0.25rem";
+        readonly 'tooltip-py': "1px";
+        readonly statusbar: "27px";
+        readonly 'statusbar-px': "2px";
+        readonly 'statusbar-py': "2px";
+        readonly 'statusbar-gap': "2px";
+        readonly 'statusbar-section-px': "0.25rem";
+        readonly 'statusbar-section-gap': "0.25rem";
+        readonly progress: "18px";
+        readonly 'progress-inset': "2px";
+        readonly 'progress-fill': "12px";
+        readonly 'progress-block': "8px";
+        readonly 'progress-period': "10px";
+        readonly 'progress-segment': "38px";
+        readonly scrollbar: "16px";
+        readonly 'scroll-button': "16px";
+        readonly 'scroll-inset': "0px";
+        readonly 'groupbox-top': "6px";
+        readonly 'groupbox-pt': "1rem";
+        readonly 'groupbox-legend-x': "0.5rem";
+        readonly 'groupbox-legend-px': "2px";
+    };
+    readonly style: {
+        readonly 'focus-label-width': "1px";
+        readonly 'focus-ring-width': "1px";
+        readonly 'focus-ring-style': "dotted";
+        readonly 'focus-outer-width': "0px";
+        readonly 'focus-outer-offset': "0px";
+        readonly 'press-shift': "1px";
+        readonly 'press-brightness': "1";
+        readonly 'dither-image': string;
+        readonly 'loading-image': string;
+        readonly 'animate-loading': "rk-dither 800ms steps(1) infinite";
+        readonly 'animate-busy': "none";
+        readonly 'animate-progress': "rk-progress-march calc(var(--rk-progress-steps, 18) * 100ms) steps(var(--rk-progress-steps, 18)) infinite";
+        readonly 'duration-control': "0ms";
+        readonly 'animate-overlay-in': "none";
+        readonly 'etch-width': "1px";
+        readonly 'caption-order': "0";
+        readonly 'close-order': "0";
+        readonly 'titlebar-icon': "flex";
+        readonly 'titlebar-align': "start";
+        readonly 'titlebar-balance': "0px";
+        readonly 'caption-glyph-opacity': "1";
+        readonly 'legend-weight': "400";
+        readonly 'link-decoration': "underline";
+        readonly 'invalid-width': "0px";
+        readonly 'field-error-align': "center";
+        readonly 'select-up': "none";
+        readonly 'footer-direction': "row";
+        readonly 'empty-direction': "row";
+        readonly 'empty-align': "start";
+        readonly 'overlay-bg': "transparent";
+        readonly 'popover-backdrop': "none";
+        readonly 'popover-border-width': "1px";
+        readonly 'scrollbar-buttons': "block";
+        readonly 'glyph-scale': "1";
+        readonly 'radio-fill': "0%";
+        readonly 'radio-dot-r': "0px";
+        readonly 'radio-edge': "0px";
+        readonly 'icon-pixels': "inline";
+        readonly 'icon-glyphs': "initial";
+        readonly 'icon-fill': "transparent";
+        readonly 'icon-tone-danger': "transparent";
+        readonly 'icon-tone-warning': "transparent";
+        readonly 'icon-tone-info': "transparent";
+        readonly 'icon-tone-success': "transparent";
+        readonly 'icon-tone-folder': "transparent";
+    };
     readonly font: {
         readonly family: {
             readonly sans: string;
@@ -210,6 +425,7 @@ export declare const tokens: {
         readonly weight: {
             readonly normal: "400";
             readonly bold: "700";
+            readonly strong: "700";
         };
         readonly letterSpacing: {
             readonly normal: "0em";
@@ -224,6 +440,7 @@ export declare const tokens: {
     };
     readonly radius: {
         readonly full: "9999px";
+        readonly pill: "0rem";
         readonly none: string;
         readonly xs: string;
         readonly sm: string;
@@ -242,6 +459,22 @@ export declare const tokens: {
         readonly status: string;
         readonly etched: string;
         readonly 'raised-thin': string;
+        readonly popover: "none";
+        readonly table: string;
+        readonly header: string;
+        readonly caption: string;
+        readonly statusbar: "none";
+        readonly titlebar: "none";
+        readonly checked: string;
+        readonly 'field-button-pressed': string;
+        readonly 'latched-ghost': string;
+        readonly 'checked-selected': string;
+        readonly 'toast-close': string;
+        readonly pager: string;
+        readonly 'pager-focus': string;
+        readonly 'pager-pressed': string;
+        readonly 'field-button': string;
+        readonly 'scroll-thumb': string;
         readonly 'scroll-x': "inset -1px 0 var(--color-bevel-shadow)";
         readonly 'sticky-header': "inset 0 -1px 0 var(--color-border)";
     };
@@ -272,6 +505,14 @@ export declare const tokens: {
             readonly exit: "cubic-bezier(0.4, 0, 1, 1)";
         };
     };
+    /** Each theme as the variables it declares. */
+    readonly themes: {
+        readonly win98: import('./themes').ThemeVars;
+        readonly modern: {
+            readonly light: import('./themes').ThemeVars;
+            readonly dark: import('./themes').ThemeVars;
+        };
+    };
 };
 /** The shape of {@link tokens}. */
 export type Tokens = typeof tokens;