@rowkit/tokens 0.4.0 → 1.0.0-beta.1

package/dist/shadow.d.ts

@@ -1,29 +1,75 @@
 /**
- * Elevation shadows.
+ * Bevels, and the two structural shadows a data table needs.
  *
- * Each shadow mixes from `--color-shadow`, a semantic token, rather than
- * hardcoding a colour — so dark mode swaps the base to pure black by
- * repointing one variable.
+ * Windows 98 has no elevation. Depth is drawn with bevels: two 1px lines on
+ * each side of a box, light on the top-left and dark on the bottom-right for a
+ * raised surface, the other way round for a sunken one. Each bevel here is a
+ * stack of hard inset shadows — no blur, no spread — built from the four
+ * `bevel-*` colours, so the frame lives inside the box and never changes its
+ * size.
  *
- * Dark mode leans on surface lightness for elevation rather than on shadows.
- * A shadow is a darker region, and on a near-black page there is very little
- * headroom left to darken; the raised surface colour does the work instead.
+ * The first shadow in the list paints on top, so the 1px outer edge is listed
+ * before the 2px inner one it overlaps. The values match the effect styles in
+ * the Figma file one for one.
  */
 export declare const shadow: {
-    /** No elevation. */
+    /** No bevel. */
     readonly none: "none";
-    /** Hairline lift — sticky table headers, input focus. */
-    readonly xs: "0 1px 2px 0 color-mix(in oklab, var(--color-shadow) 6%, transparent)";
-    /** Resting cards. */
-    readonly sm: "0 1px 3px 0 color-mix(in oklab, var(--color-shadow) 8%, transparent), 0 1px 2px -1px color-mix(in oklab, var(--color-shadow) 8%, transparent)";
-    /** Dropdowns, popovers. */
-    readonly md: "0 4px 6px -1px color-mix(in oklab, var(--color-shadow) 9%, transparent), 0 2px 4px -2px color-mix(in oklab, var(--color-shadow) 9%, transparent)";
-    /** Menus over content. */
-    readonly lg: "0 10px 15px -3px color-mix(in oklab, var(--color-shadow) 10%, transparent), 0 4px 6px -4px color-mix(in oklab, var(--color-shadow) 10%, transparent)";
-    /** Modal dialogs. */
-    readonly xl: "0 20px 25px -5px color-mix(in oklab, var(--color-shadow) 12%, transparent), 0 8px 10px -6px color-mix(in oklab, var(--color-shadow) 12%, transparent)";
-    /** Horizontal-scroll affordance on a sticky table column. */
-    readonly 'scroll-x': "12px 0 16px -8px color-mix(in oklab, var(--color-shadow) 22%, transparent)";
+    /** Buttons and raised panels. */
+    readonly raised: string;
+    /** A window's frame: like `raised`, with the bright white on the inner edge. */
+    readonly window: string;
+    /**
+     * The default button of a dialog: a 1px black frame around a raised bevel,
+     * so Enter's target is visible before anyone presses it.
+     */
+    readonly 'raised-default': string;
+    /** A button held down, or a toggle that is on. */
+    readonly pressed: string;
+    /** Text fields, lists and table bodies: the white well a value sits in. */
+    readonly sunken: string;
+    /** A thin sunken edge: status-bar sections, counters, Badge. */
+    readonly status: string;
+    /** An etched groove: group boxes and separators. */
+    readonly etched: string;
+    /** A thin raised edge: a flat toolbar button while hovered. */
+    readonly 'raised-thin': string;
+    /** A list dropped from a trigger. Windows 98 frames it with a border, not a shadow. */
+    readonly popover: "none";
+    /** A data table's frame: the sunken well its rows sit in. */
+    readonly table: string;
+    /** A data table's column header: a raised button. */
+    readonly header: string;
+    /** A window's caption button. */
+    readonly caption: string;
+    /** The strip of a status bar, behind its sections. */
+    readonly statusbar: "none";
+    /** The edge between a title bar and the window under it. */
+    readonly titlebar: "none";
+    /** A checked check box: the same sunken well as an unchecked one, in Windows 98. */
+    readonly checked: string;
+    /** A button inside a field while held, or while its list is open: pressed in, in Windows 98. */
+    readonly 'field-button-pressed': string;
+    /** A flat toolbar button that is latched on: pressed in, in Windows 98. */
+    readonly 'latched-ghost': string;
+    /** A checked check box in a selected table row: its usual well, in Windows 98. */
+    readonly 'checked-selected': string;
+    /** A toast's ✕: a caption button, raised, in Windows 98. */
+    readonly 'toast-close': string;
+    /**
+     * A pager's buttons: a raised command button, its focused frame, and pressed
+     * in while held or while it is the current page. Flat in a theme that draws
+     * the pager as a row of plain numbers.
+     */
+    readonly pager: string;
+    readonly 'pager-focus': string;
+    readonly 'pager-pressed': string;
+    /** A button inside a field: raised, in Windows 98. */
+    readonly 'field-button': string;
+    /** A scroll bar's thumb. */
+    readonly 'scroll-thumb': string;
+    /** The edge of a sticky table column while rows scroll under it. */
+    readonly 'scroll-x': "inset -1px 0 var(--color-bevel-shadow)";
     /**
      * The rule under a sticky table header, drawn as a shadow rather than a
      * border.
@@ -38,3 +84,13 @@ export declare const shadow: {
 };
 /** Names of every shadow token. */
 export type ShadowName = keyof typeof shadow;
+/**
+ * Text shadows. One: the emboss that makes disabled text read as disabled
+ * rather than as faint — grey text with a white copy one pixel right and
+ * down. Windows 98 never fades a disabled control with opacity.
+ */
+export declare const textShadow: {
+    readonly disabled: "1px 1px 0 var(--color-text-disabled-emboss)";
+};
+/** Names of every text shadow token. */
+export type TextShadowName = keyof typeof textShadow;

package/dist/size.d.ts

@@ -0,0 +1,194 @@
+/**
+ * Component sizes: the heights, widths and insets a theme sets.
+ *
+ * Emitted into Tailwind's spacing namespace (`--spacing-control-md`), so every
+ * sizing utility reads them by name — `h-control-md`, `min-w-button-md`,
+ * `size-check`, `p-frame` — and a theme that changes a value changes every
+ * control drawn with it.
+ *
+ * The values here are Windows 98's, in CSS pixels: the sizes the Figma file
+ * draws at Large Fonts. They are pixels rather than rems on purpose. A bevel is
+ * drawn in whole pixels, and a control whose height scaled with the root font
+ * size would land on fractional pixels and blur its edges.
+ */
+export declare const size: {
+    /** Control heights: buttons, fields, selects. Also the side of a square icon button's row. */
+    readonly 'control-xs': "21px";
+    readonly 'control-sm': "26px";
+    readonly 'control-md': "28px";
+    readonly 'control-lg': "33px";
+    /** Square icon buttons. A touch wider than the row they sit in, as Windows 98 drew them. */
+    readonly 'icon-xs': "25px";
+    readonly 'icon-sm': "27px";
+    readonly 'icon-md': "30px";
+    readonly 'icon-lg': "34px";
+    /** A button's minimum width, so a short label still makes a button worth aiming at. */
+    readonly 'button-min-xs': "3rem";
+    readonly 'button-min-sm': "4rem";
+    readonly 'button-min-md': "92px";
+    readonly 'button-min-lg': "108px";
+    /** A button's side padding. */
+    readonly 'button-px-xs': "0.375rem";
+    readonly 'button-px-sm': "0.5rem";
+    readonly 'button-px-md': "0.75rem";
+    readonly 'button-px-lg': "1rem";
+    /** A field's side padding, inside its edge. */
+    readonly 'field-px': "0.25rem";
+    readonly 'field-px-lg': "0.375rem";
+    /**
+     * A field's spacing: between label, control and message at each size, between
+     * a label and the control beside it, and between the error icon and its text.
+     */
+    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";
+    /** The side of a checkbox's box, and of an option button. */
+    readonly check: "13px";
+    readonly radio: "12px";
+    /** Between a check box or option button and its label, and the label's own inset (where the dotted ring sits). */
+    readonly 'check-gap': "4px";
+    readonly 'check-label-px': "1px";
+    /** A window's or a dialog's title bar. */
+    readonly titlebar: "22px";
+    /** A caption button: minimise, maximise, close. */
+    readonly 'caption-w': "20px";
+    readonly 'caption-h': "18px";
+    /** The gap between caption buttons, and the extra space before the close button. */
+    readonly 'caption-gap': "0px";
+    readonly 'caption-close-gap': "2px";
+    /** A title bar's side padding. */
+    readonly 'titlebar-px': "2px";
+    /**
+     * Where a dialog's title starts and ends in its title bar, clear of the
+     * close button. Equal values centre it.
+     */
+    readonly 'title-inset-start': "4px";
+    readonly 'title-inset-end': "28px";
+    /**
+     * The frame between a window's edge and its content: the width of the bevel.
+     * A theme whose windows have no bevel sets it to zero.
+     */
+    readonly frame: "2px";
+    /**
+     * A dialog's insets: the side padding of its header, body and footer, the
+     * room above the first line, and above and below the footer's buttons.
+     */
+    readonly 'dialog-px': "0.75rem";
+    readonly 'dialog-pt': "0.75rem";
+    readonly 'dialog-footer-pt': "0.5rem";
+    readonly 'dialog-footer-pb': "0.75rem";
+    /** One option in a list: a select's, a menu's. */
+    readonly item: "22px";
+    /** An option's padding either side, the column its check mark sits in, the gap after it, and the mark. */
+    readonly 'item-pl': "2px";
+    readonly 'item-pr': "0.25rem";
+    readonly 'item-check': "12px";
+    readonly 'item-gap': "2px";
+    readonly 'item-check-glyph': "7px";
+    /** The inset around a dropped list's options, inside its border: 1px in Windows 98, as Figma draws it. */
+    readonly 'popover-inset': "1px";
+    /**
+     * A data table's side padding: a header cell's, around the 1px its label's
+     * focus ring takes, and a body cell's.
+     */
+    readonly 'table-header-px': "0.25rem";
+    readonly 'table-cell-px': "0.375rem";
+    /** Data table rows, and the header that matches them. */
+    readonly 'row-sm': "22px";
+    readonly 'row-md': "27px";
+    /** A select's drop arrows, and how far the down arrow tucks under an up arrow above it. */
+    readonly 'select-arrow': "8px";
+    readonly 'select-arrow-overlap': "0px";
+    /** «Loading…» and «No results found» in a dropped list: padding, and the gap after the busy glyph. */
+    readonly 'select-message-px': "6px";
+    readonly 'select-message-py': "6px";
+    readonly 'select-message-gap': "6px";
+    /** The strip around a searchable list's search box, and the space under it. */
+    readonly 'select-search-p': "2px";
+    readonly 'select-search-gap': "0px";
+    /**
+     * The buttons inside a number, date or select field: their height at each
+     * size, centred in the field as Figma draws them; how far they sit from the
+     * field's right edge; and the date field's glyph. A select's arrows sit
+     * `select-pr` in.
+     */
+    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";
+    /** A filter bar's padding and the space between its items. */
+    readonly 'filter-bar-p': "0.25rem";
+    readonly 'filter-bar-gap': "0.25rem";
+    /** A filter chip's side padding, and its right padding beside the ✕. */
+    readonly 'chip-px': "0.375rem";
+    readonly 'chip-pr-remove': "0.125rem";
+    /** A toast's padding, the gap between its icon, text and ✕, and between its lines. */
+    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";
+    /** A toast's status icon, and its ✕. */
+    readonly 'toast-icon': "16px";
+    readonly 'toast-close-w': "20px";
+    readonly 'toast-close-h': "18px";
+    /** A page number's side padding. */
+    readonly 'pager-px': "0.25rem";
+    /**
+     * A pager's arrows, the inset of the dotted focus ring round a page label,
+     * and how narrow a small page button may get (Windows 98 lets it hug its
+     * number; a theme can keep it square).
+     */
+    readonly 'pager-arrow': "8px";
+    readonly 'pager-focus-px': "1px";
+    readonly 'pager-min-sm': "0px";
+    /** A filter chip. */
+    readonly 'chip-sm': "23px";
+    readonly 'chip-md': "26px";
+    /** A badge's side padding. */
+    readonly 'badge-px-sm': "0.25rem";
+    readonly 'badge-px-md': "0.375rem";
+    /** The side of a badge's status dot. */
+    readonly 'badge-dot': "5px";
+    /** An empty view's padding at each size, and the gap between its icon and its text at `md` and `lg`. */
+    readonly 'empty-p-sm': "0.75rem";
+    readonly 'empty-p-md': "1.5rem";
+    readonly 'empty-p-lg': "1.5rem";
+    readonly 'empty-gap': "1rem";
+    /** A tooltip's padding. */
+    readonly 'tooltip-px': "0.25rem";
+    readonly 'tooltip-py': "1px";
+    /** A status bar. */
+    readonly statusbar: "27px";
+    /** A status bar's padding and the space between its sections; a section's side padding and the space inside it. */
+    readonly 'statusbar-px': "2px";
+    readonly 'statusbar-py': "2px";
+    readonly 'statusbar-gap': "2px";
+    readonly 'statusbar-section-px': "0.25rem";
+    readonly 'statusbar-section-gap': "0.25rem";
+    /** A progress bar: its height, the inset around the fill, and the fill. */
+    readonly progress: "18px";
+    readonly 'progress-inset': "2px";
+    readonly 'progress-fill': "12px";
+    /** One block of the fill, and the block plus the gap after it. Equal values draw a solid bar. */
+    readonly 'progress-block': "8px";
+    readonly 'progress-period': "10px";
+    /** The segment an indeterminate bar moves along the track: four blocks in Windows 98. */
+    readonly 'progress-segment': "38px";
+    /** A scroll bar's thickness, and the side of its arrow buttons (zero hides them). */
+    readonly scrollbar: "16px";
+    readonly 'scroll-button': "16px";
+    /** The space between the thumb and the edge of its track. */
+    readonly 'scroll-inset': "0px";
+    /** A group box: where its frame starts, the room above its content, and its legend's offset. */
+    readonly 'groupbox-top': "6px";
+    readonly 'groupbox-pt': "1rem";
+    readonly 'groupbox-legend-x': "0.5rem";
+    readonly 'groupbox-legend-px': "2px";
+};
+/** Names of every size token. */
+export type SizeName = keyof typeof size;

package/dist/style.d.ts

@@ -0,0 +1,129 @@
+/**
+ * Style switches: how a theme draws a state, beyond its colours and sizes.
+ *
+ * Windows 98 and a modern theme differ in more than values. One marks focus
+ * with a dotted rectangle around a button's label, the other with a ring
+ * around the whole button; one shifts a held button's label a pixel, the other
+ * darkens its face; one fills a latched toggle with a checker pattern. Each of
+ * those differences is a variable here, emitted as `--rk-<name>`, and the
+ * components are written against the variables. A theme sets them; no
+ * component knows which theme it is drawn in.
+ *
+ * They are not Tailwind theme tokens — nothing generates a utility from them —
+ * so they are declared on `:root` and read with arbitrary values
+ * (`pr-(--rk-press-shift)`) or by the utilities in `rowkit/styles`.
+ *
+ * The values here are Windows 98's.
+ */
+export declare const style: {
+    /** The ring drawn around a control's label, inside it. Windows 98's dotted rectangle. */
+    readonly 'focus-label-width': "1px";
+    /** The ring drawn on the focused element itself — a row, a scrolling region, a toast. */
+    readonly 'focus-ring-width': "1px";
+    readonly 'focus-ring-style': "dotted";
+    /** The ring drawn around a control's edge, outside it. Windows 98 has none. */
+    readonly 'focus-outer-width': "0px";
+    readonly 'focus-outer-offset': "0px";
+    /** How far a held button's label moves down and right. */
+    readonly 'press-shift': "1px";
+    /** A brightness filter on a held caption button. `1` leaves it alone. */
+    readonly 'press-brightness': "1";
+    /** The pattern over a latched toggle and a scroll track. */
+    readonly 'dither-image': string;
+    /** The pattern of a loading placeholder, and how it moves. */
+    readonly 'loading-image': string;
+    readonly 'animate-loading': "rk-dither 800ms steps(1) infinite";
+    /**
+     * The busy mark in a loading button: Windows 98's hourglass stands still; a
+     * theme with a spinner glyph turns it.
+     */
+    readonly 'animate-busy': "none";
+    /**
+     * An indeterminate progress bar's segment travelling across the track.
+     * Windows 98 moves its four blocks one block every 100ms and starts again
+     * at the left; `ProgressBar` sets `--rk-progress-steps` to the number of
+     * steps that fit the track it measures.
+     */
+    readonly 'animate-progress': "rk-progress-march calc(var(--rk-progress-steps, 18) * 100ms) steps(var(--rk-progress-steps, 18)) infinite";
+    /** How long a control takes to change state. Windows 98 changes instantly. */
+    readonly 'duration-control': "0ms";
+    /** How a dialog, a list or a toast arrives. */
+    readonly 'animate-overlay-in': "none";
+    /** The light second line of an etched separator. Zero leaves a single line. */
+    readonly 'etch-width': "1px";
+    /** Where the caption buttons sit in the title bar: `0` after the title, `-1` before it. */
+    readonly 'caption-order': "0";
+    /** Where the close button sits among them: `0` last, `-1` first. */
+    readonly 'close-order': "0";
+    /** Whether a window shows its icon in the title bar: `flex`, or `none`. */
+    readonly 'titlebar-icon': "flex";
+    /** Where the title sits: `start`, or `center`. */
+    readonly 'titlebar-align': "start";
+    /** Space kept clear opposite the caption buttons, so a centred title is centred on the bar. */
+    readonly 'titlebar-balance': "0px";
+    /** The opacity of a caption button's glyph at rest; hovering the title bar shows it. */
+    readonly 'caption-glyph-opacity': "1";
+    /** The weight of a group box's legend. */
+    readonly 'legend-weight': "400";
+    /** The line under a link-styled button: `underline`, or `none`. */
+    readonly 'link-decoration': "underline";
+    /** The red frame inside an invalid field. Windows 98 marks it with the error icon only. */
+    readonly 'invalid-width': "0px";
+    /** Where a field's error icon sits beside a message that wraps: `center`, or `start`. */
+    readonly 'field-error-align': "center";
+    /** Whether a select's drop button shows an up arrow over its down arrow: `block`, or `none`. */
+    readonly 'select-up': "none";
+    /**
+     * The order of a dialog footer's buttons, written primary first: `row` keeps
+     * it, as Windows 98 does; `row-reverse` puts the primary button last.
+     */
+    readonly 'footer-direction': "row";
+    /**
+     * How an empty view lays out its icon and text: `row` puts the icon beside
+     * the text, `column` above it; `start` or `center` aligns the text.
+     */
+    readonly 'empty-direction': "row";
+    readonly 'empty-align': "start";
+    /** What a modal dialog lays over the page behind it. */
+    readonly 'overlay-bg': "transparent";
+    /** A backdrop filter behind a dropped list. */
+    readonly 'popover-backdrop': "none";
+    /**
+     * A dropped list's border. Windows 98 draws a black line; a theme that
+     * rings the list in its shadow (`--rk-shadow-popover`) sets it to zero.
+     */
+    readonly 'popover-border-width': "1px";
+    /** Whether a scroll bar has arrow buttons: `block`, or `none`. */
+    readonly 'scrollbar-buttons': "block";
+    /** A multiplier on small glyphs — a check mark, a caption glyph — for a theme whose glyphs are not pixel art. */
+    readonly 'glyph-scale': "1";
+    /**
+     * An option button drawn by CSS rather than by its pixels: how much of the
+     * well and the dot to paint (`0%` paints neither), the dot's radius and the
+     * edge's width.
+     */
+    readonly 'radio-fill': "0%";
+    readonly 'radio-dot-r': "0px";
+    readonly 'radio-edge': "0px";
+    /** `display` of a pixel icon's pixels. */
+    readonly 'icon-pixels': "inline";
+    /**
+     * Whether the glyphs mask the icons at all. `initial` makes every glyph mask
+     * invalid, so a Windows 98 icon has no mask and nothing of it is clipped;
+     * an empty value lets them through. It is prepended to each mask image.
+     */
+    readonly 'icon-glyphs': "initial";
+    /** The fill a theme's own glyph is painted in; transparent draws nothing. */
+    readonly 'icon-fill': "transparent";
+    /**
+     * The fills of the glyphs that keep a colour: status icons and folders.
+     * Transparent in Windows 98, whose pixel icons carry their own colours.
+     */
+    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";
+};
+/** Names of every style switch. */
+export type StyleName = keyof typeof style;

package/dist/themes/index.d.ts

@@ -0,0 +1,69 @@
+import { SemanticColorName } from '../color.js';
+import { RadiusName } from '../radius.js';
+import { ShadowName } from '../shadow.js';
+import { SizeName } from '../size.js';
+import { StyleName } from '../style.js';
+import { modernFontSize } from './modern.js';
+export { modernDarkColor, modernDarkShadow, modernFont, modernFontSize, modernFontWeight, modernLightColor, modernLightShadow, modernPalette, modernRadius, modernSize, modernStyle, } from './modern.js';
+export type { ModernPaletteName } from './modern.js';
+/** The themes rowkit ships. `win98` is the default: what `:root` carries. */
+export declare const themeNames: readonly ["win98", "modern"];
+export type ThemeName = (typeof themeNames)[number];
+/** A theme as the stylesheet declares it: custom property name → value. */
+export type ThemeVars = Record<`--${string}`, string>;
+/**
+ * The name of every variable a theme may set: the keys of {@link win98Vars},
+ * spelled out so an editor completes them and a typo fails the type check.
+ */
+export type ThemeTokenName = `--color-${SemanticColorName}` | `--rk-shadow-${ShadowName}` | `--spacing-${SizeName}` | `--radius-${Exclude<RadiusName, 'full'>}` | `--rk-${StyleName}` | '--font-sans' | '--font-mono' | `--text-${keyof typeof modernFontSize}` | `--text-${keyof typeof modernFontSize}--line-height` | '--font-weight-strong';
+/** Values for some of a theme's variables, by name: what {@link defineTheme} takes. */
+export type ThemeValues = Partial<Record<ThemeTokenName, string>>;
+/**
+ * Windows 98, as variables: every value a theme may change, at its Windows 98
+ * value. Declared on `[data-theme="win98"]` as well as being the default, so a
+ * Windows 98 region inside a page in another theme is drawn in Windows 98.
+ */
+export declare const win98Vars: ThemeVars;
+/** The modern theme in its light scheme. */
+export declare const modernLightVars: ThemeVars;
+/** What the dark scheme changes on top of the light one. */
+export declare const modernDarkVars: ThemeVars;
+/** A theme of your own, for {@link defineTheme}. */
+export interface ThemeDefinition {
+    /** Its name: the page switches to it with `data-theme="<name>"`. Lowercase, digits and dashes. */
+    name: string;
+    /**
+     * The theme it starts from. Every value it does not set comes from there,
+     * so a theme is as small as what it changes. Default `modern`.
+     */
+    extends?: ThemeName;
+    /** Values for the light scheme — for a theme without a dark one, its only scheme. */
+    light?: ThemeValues;
+    /**
+     * Values for the dark scheme, on top of the light ones. A theme built on
+     * `modern` inherits its dark scheme; set `dark: false` to have none.
+     */
+    dark?: ThemeValues | false;
+}
+/** A rule declaring a theme's values and its colour scheme. */
+export declare function themeRule(selector: string, scheme: 'light' | 'dark', values: ThemeVars): string;
+/**
+ * The stylesheet for a theme of your own.
+ *
+ * Every value is declared on the theme's element — the base theme's as well
+ * as yours — because a variable that uses `var()` is resolved where it is
+ * declared; that is also what lets themes nest. The dark scheme follows the
+ * system unless `data-color-scheme` on the same element fixes it, exactly as
+ * the modern theme's does.
+ *
+ * @example
+ * ```ts
+ * import { defineTheme } from '@rowkit/tokens'
+ *
+ * const css = defineTheme({
+ *   name: 'acme',
+ *   light: { '--color-control-primary': '#5b3df5', '--radius-md': '10px' },
+ * })
+ * ```
+ */
+export declare function defineTheme(theme: ThemeDefinition): string;

package/dist/themes/modern.d.ts

@@ -0,0 +1,139 @@
+import { SemanticColorName } from '../color.js';
+import { RadiusName } from '../radius.js';
+import { ShadowName } from '../shadow.js';
+import { SizeName } from '../size.js';
+import { StyleName } from '../style.js';
+/**
+ * The modern theme: the look of a current desktop operating system. White and
+ * light-grey surfaces, a blue accent, rounded corners, soft shadows, a ring
+ * around the focused control and short transitions. Light and dark.
+ *
+ * Switched on with `data-theme="modern"` on any element, `<html>` included.
+ * The colour scheme follows the system unless `data-color-scheme="light"` or
+ * `"dark"` on the same element fixes it.
+ *
+ * The values follow the designer's Figma file, mode for mode.
+ */
+/** The modern palette. Eight-digit values carry alpha. */
+export declare const modernPalette: {
+    readonly white: "#ffffff";
+    readonly black: "#000000";
+    readonly transparent: "#00000000";
+    readonly 'gray-50': "#f9f9fb";
+    readonly 'gray-100': "#f5f5f7";
+    readonly 'gray-150': "#efeff2";
+    readonly 'gray-200': "#e8e8ed";
+    readonly 'gray-250': "#e0e0e5";
+    readonly 'gray-300': "#d2d2d7";
+    readonly 'gray-400': "#aeaeb2";
+    readonly 'gray-500': "#86868b";
+    readonly 'gray-600': "#6e6e73";
+    readonly 'gray-700': "#515154";
+    readonly 'gray-750': "#48484a";
+    readonly 'gray-800': "#3a3a3c";
+    readonly 'gray-850': "#2c2c2e";
+    readonly 'gray-900': "#1d1d1f";
+    readonly 'gray-925': "#1c1c1e";
+    readonly 'gray-950': "#161617";
+    readonly blue: "#0071e3";
+    readonly 'blue-hover': "#0068d6";
+    readonly 'blue-active': "#0062c4";
+    readonly 'blue-link': "#0066cc";
+    readonly 'blue-link-dark': "#2997ff";
+    readonly 'blue-subtle': "#e8f1fc";
+    readonly 'blue-subtle-dark': "#0f2a47";
+    readonly 'blue-text': "#0058b0";
+    readonly 'blue-text-dark': "#6cb4ff";
+    readonly 'blue-border': "#b3d1f5";
+    readonly 'blue-border-dark': "#1f4b7a";
+    readonly 'blue-ring': "#0071e3cc";
+    readonly 'blue-ring-dark': "#2997ffcc";
+    readonly green: "#1f7a35";
+    readonly 'green-hover': "#1a6a2e";
+    readonly 'green-subtle': "#e7f6eb";
+    readonly 'green-subtle-dark': "#12301b";
+    readonly 'green-text': "#1b6e31";
+    readonly 'green-text-dark': "#5fd47e";
+    readonly 'green-border': "#b4e2c0";
+    readonly 'green-border-dark': "#245c33";
+    readonly orange: "#ff9f0a";
+    readonly 'orange-hover': "#f59300";
+    readonly 'orange-subtle': "#fff4e0";
+    readonly 'orange-subtle-dark': "#3a2a0c";
+    readonly 'orange-text': "#8a4b00";
+    readonly 'orange-text-dark': "#ffbe5c";
+    readonly 'orange-border': "#ffd59a";
+    readonly 'orange-border-dark': "#6b4a12";
+    readonly red: "#d70015";
+    readonly 'red-hover': "#c00013";
+    readonly 'red-subtle': "#fdeaea";
+    readonly 'red-subtle-dark': "#3d1416";
+    readonly 'red-text': "#b0000f";
+    readonly 'red-text-dark': "#ffa0a4";
+    readonly 'red-border': "#f5b5b9";
+    readonly 'red-border-dark': "#7a2329";
+    readonly 'traffic-red': "#ff5f57";
+    readonly 'traffic-yellow': "#febc2e";
+    readonly 'traffic-green': "#28c840";
+    readonly 'ink-4': "#0000000a";
+    readonly 'ink-6': "#0000000f";
+    readonly 'ink-8': "#00000014";
+    readonly 'ink-10': "#0000001a";
+    readonly 'ink-12': "#0000001f";
+    readonly 'ink-15': "#00000026";
+    readonly 'ink-25': "#00000040";
+    readonly 'ink-50': "#00000080";
+    readonly 'light-4': "#ffffff0a";
+    readonly 'light-8': "#ffffff14";
+    readonly 'light-12': "#ffffff1f";
+    readonly 'light-16': "#ffffff29";
+    readonly 'light-25': "#ffffff40";
+    readonly 'light-50': "#ffffff80";
+    readonly 'glass-light': "#ffffffd9";
+    readonly 'glass-dark': "#323234e0";
+    readonly 'desktop-light': "#c7d3e6";
+    readonly 'desktop-dark': "#101014";
+};
+export type ModernPaletteName = keyof typeof modernPalette;
+/** Semantic colours, light. Every semantic token is listed: the theme leaves nothing to Windows 98. */
+export declare const modernLightColor: Record<SemanticColorName, string>;
+/** Semantic colours, dark. */
+export declare const modernDarkColor: Record<SemanticColorName, string>;
+/** Shadows, light. Soft and outside the box, where Windows 98's bevels are hard and inside it. */
+export declare const modernLightShadow: Record<ShadowName, string>;
+/** Shadows, dark: edges drawn in light ink, because a dark shadow on a dark page shows nothing. */
+export declare const modernDarkShadow: Record<ShadowName, string>;
+/** Sizes. Roomier than Windows 98's, for a pointer and a finger alike. */
+export declare const modernSize: Record<SizeName, string>;
+/** Corner radii, set directly: each is a length here, not a multiple of `--radius`. */
+export declare const modernRadius: Record<Exclude<RadiusName, 'full'>, string>;
+/** Style switches. */
+export declare const modernStyle: Record<StyleName, string>;
+/** Typefaces: the platform's own. Nothing to load. */
+export declare const modernFont: {
+    readonly sans: string;
+    readonly mono: string;
+};
+/** Type sizes that differ from Windows 98's. Size and line height, as in `fontSize`. */
+export declare const modernFontSize: {
+    readonly ui: {
+        readonly size: "0.8125rem";
+        readonly lineHeight: "1.125rem";
+    };
+    readonly heading: {
+        readonly size: "0.9375rem";
+        readonly lineHeight: "1.25rem";
+    };
+    readonly mono: {
+        readonly size: "0.75rem";
+        readonly lineHeight: "1.125rem";
+    };
+    readonly 'doc-mono': {
+        readonly size: "0.875rem";
+        readonly lineHeight: "1.375rem";
+    };
+};
+/** Font weights that differ: emphasis is semibold. */
+export declare const modernFontWeight: {
+    readonly strong: "600";
+};