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

package/dist/index.js

@@ -1,157 +1,16 @@
+import { A as e, C as t, D as n, E as r, M as i, N as a, O as o, S as s, T as c, _ as l, a as u, b as d, c as f, d as p, f as m, g as h, h as g, i as _, j as v, k as y, l as b, m as x, n as S, o as C, p as w, r as T, s as E, t as D, u as O, v as k, w as A, x as j, y as M } from "./themes-B0J8E0xq.js";
 //#region package.json
-var e = "1.0.0-beta.0", t = {
-	black: "#000000",
-	white: "#ffffff",
-	silver: "#c0c0c0",
-	gray: "#808080",
-	navy: "#000080",
-	blue: "#0000ff",
-	teal: "#008080",
-	green: "#008000",
-	olive: "#808000",
-	yellow: "#ffff00",
-	maroon: "#800000",
-	red: "#ff0000"
-}, n = {
-	light: "#dfdfdf",
-	"dark-gray": "#404040",
-	"title-blue": "#1084d0",
-	"title-gray": "#b5b5b5",
-	info: "#ffffe1"
-}, r = {
-	...i("vga", t),
-	...i("win98", n)
-};
-function i(e, t) {
-	let n = {};
-	for (let [r, i] of Object.entries(t)) n[`${e}-${r}`] = i;
-	return n;
-}
-var a = (e) => `var(--color-${e})`, o = {
-	background: a("vga-silver"),
-	desktop: a("vga-teal"),
-	card: a("vga-silver"),
-	muted: a("vga-silver"),
-	accent: a("vga-silver"),
-	"surface-active": a("vga-silver"),
-	"surface-selected": a("vga-navy"),
-	"surface-disabled": a("vga-silver"),
-	skeleton: a("vga-gray"),
-	input: a("vga-white"),
-	"tooltip-bg": a("win98-info"),
-	foreground: a("vga-black"),
-	"muted-foreground": a("vga-black"),
-	"text-subtle": a("win98-dark-gray"),
-	"text-disabled": a("vga-gray"),
-	"text-disabled-emboss": a("vga-white"),
-	"on-selected": a("vga-white"),
-	link: a("vga-blue"),
-	border: a("vga-gray"),
-	"border-strong": a("vga-black"),
-	"border-subtle": a("win98-light"),
-	ring: a("vga-black"),
-	shadow: a("vga-black"),
-	"bevel-highlight": a("vga-white"),
-	"bevel-light": a("win98-light"),
-	"bevel-shadow": a("vga-gray"),
-	"bevel-dark": a("vga-black"),
-	"titlebar-from": a("vga-navy"),
-	"titlebar-to": a("win98-title-blue"),
-	"titlebar-inactive-from": a("vga-gray"),
-	"titlebar-inactive-to": a("win98-title-gray"),
-	"titlebar-foreground": a("vga-white"),
-	"titlebar-inactive-foreground": a("vga-black"),
-	"neutral-solid": a("vga-black"),
-	"neutral-solid-hover": a("vga-black"),
-	"neutral-on-solid": a("vga-white"),
-	"neutral-subtle": a("vga-white"),
-	"neutral-on-subtle": a("vga-black"),
-	"neutral-border": a("vga-gray"),
-	"primary-solid": a("vga-navy"),
-	"primary-solid-hover": a("vga-navy"),
-	"primary-on-solid": a("vga-white"),
-	"primary-subtle": a("vga-white"),
-	"primary-on-subtle": a("vga-navy"),
-	"primary-border": a("vga-navy"),
-	"success-solid": a("vga-green"),
-	"success-solid-hover": a("vga-green"),
-	"success-on-solid": a("vga-white"),
-	"success-subtle": a("vga-white"),
-	"success-on-subtle": a("vga-green"),
-	"success-border": a("vga-green"),
-	"warning-solid": a("vga-yellow"),
-	"warning-solid-hover": a("vga-yellow"),
-	"warning-on-solid": a("vga-black"),
-	"warning-subtle": a("vga-white"),
-	"warning-on-subtle": a("vga-black"),
-	"warning-border": a("vga-olive"),
-	"danger-solid": a("vga-maroon"),
-	"danger-solid-hover": a("vga-maroon"),
-	"danger-on-solid": a("vga-white"),
-	"danger-subtle": a("vga-white"),
-	"danger-on-subtle": a("vga-maroon"),
-	"danger-border": a("vga-maroon")
-}, s = {
+var N = "1.0.0-beta.1", P = {
 	instant: "0ms",
 	fast: "120ms",
 	normal: "200ms",
 	slow: "320ms"
-}, c = {
+}, F = {
 	linear: "linear",
 	standard: "cubic-bezier(0.2, 0, 0, 1)",
 	enter: "cubic-bezier(0, 0, 0.2, 1)",
 	exit: "cubic-bezier(0.4, 0, 1, 1)"
-}, l = "0rem", u = {
-	none: 0,
-	xs: .4,
-	sm: .6,
-	md: .8,
-	lg: 1,
-	xl: 1.4
-}, d = "9999px", f = {
-	...Object.fromEntries(Object.entries(u).map(([e, t]) => [e, m(t)])),
-	full: d
-}, p = {
-	...Object.fromEntries(Object.entries(u).map(([e, t]) => [e, h(t)])),
-	full: d
-};
-function m(e) {
-	return e === 0 ? "0rem" : `${Number((Number.parseFloat(l) * e).toFixed(6))}rem`;
-}
-function h(e) {
-	return e === 0 ? "0rem" : e === 1 ? "var(--radius)" : `calc(var(--radius) * ${e})`;
-}
-//#endregion
-//#region src/shadow.ts
-var g = "var(--color-bevel-highlight)", _ = "var(--color-bevel-light)", v = "var(--color-bevel-shadow)", y = "var(--color-bevel-dark)";
-function b(e, t) {
-	let [n, r] = e, i = [`inset -1px -1px ${r}`, `inset 1px 1px ${n}`];
-	if (t) {
-		let [e, n] = t;
-		i.push(`inset -2px -2px ${n}`, `inset 2px 2px ${e}`);
-	}
-	return i.join(", ");
-}
-var x = {
-	none: "none",
-	raised: b([g, y], [_, v]),
-	window: b([_, y], [g, v]),
-	"raised-default": [
-		`inset -1px -1px ${y}`,
-		`inset 1px 1px ${y}`,
-		`inset -2px -2px ${y}`,
-		`inset 2px 2px ${g}`,
-		`inset -3px -3px ${v}`,
-		`inset 3px 3px ${_}`
-	].join(", "),
-	pressed: b([y, g], [v, _]),
-	sunken: b([v, g], [y, _]),
-	status: b([v, g]),
-	etched: b([v, g], [g, v]),
-	"raised-thin": b([g, v]),
-	"scroll-x": `inset -1px 0 ${v}`,
-	"sticky-header": "inset 0 -1px 0 var(--color-border)"
-}, S = { disabled: "1px 1px 0 var(--color-text-disabled-emboss)" }, C = {
+}, I = {
 	0: "0rem",
 	px: "1px",
 	1: "0.25rem",
@@ -166,66 +25,7 @@ var x = {
 	16: "4rem",
 	20: "5rem",
 	24: "6rem"
-}, w = "0.25rem", T = {
-	sans: [
-		"\"PT Sans\"",
-		"Tahoma",
-		"\"Microsoft Sans Serif\"",
-		"\"MS Sans Serif\"",
-		"Verdana",
-		"Arial",
-		"sans-serif"
-	].join(", "),
-	mono: [
-		"VT323",
-		"\"Lucida Console\"",
-		"\"Courier New\"",
-		"ui-monospace",
-		"monospace"
-	].join(", ")
-}, E = {
-	ui: {
-		size: "0.8125rem",
-		lineHeight: "1rem"
-	},
-	heading: {
-		size: "1rem",
-		lineHeight: "1.25rem"
-	},
-	mono: {
-		size: "1rem",
-		lineHeight: "1rem"
-	},
-	doc: {
-		size: "1rem",
-		lineHeight: "1.625rem"
-	},
-	"doc-mono": {
-		size: "1.25rem",
-		lineHeight: "1.25rem"
-	},
-	"doc-h1": {
-		size: "1.625rem",
-		lineHeight: "1.875rem"
-	},
-	"doc-h2": {
-		size: "1.1875rem",
-		lineHeight: "1.5rem"
-	},
-	"doc-h3": {
-		size: "0.9375rem",
-		lineHeight: "1.25rem"
-	}
-}, D = {
-	normal: "400",
-	bold: "700"
-}, O = { normal: "0em" }, k = {
-	none: "1",
-	tight: "1.25",
-	snug: "1.375",
-	normal: "1.5",
-	relaxed: "1.625"
-}, A = {
+}, L = "0.25rem", R = {
 	base: "0",
 	sticky: "100",
 	dropdown: "200",
@@ -237,51 +37,80 @@ var x = {
 };
 //#endregion
 //#region src/css.ts
-function j() {
+function z() {
 	return [
-		M(),
+		V(),
 		"",
 		"@theme {",
-		N("colour primitives — the only literal colours in rowkit"),
-		...P(r, (e) => `--color-${e}`),
+		H("colour primitives — the only literal colours in rowkit"),
+		...U(e, (e) => `--color-${e}`),
+		"",
+		H("semantic colours"),
+		...U(v, (e) => `--color-${e}`),
 		"",
-		N("semantic colours"),
-		...P(o, (e) => `--color-${e}`),
+		H("spacing"),
+		`  --spacing: ${L};`,
+		...U(I, (e) => `--spacing-${e}`),
 		"",
-		N("spacing"),
-		`  --spacing: ${w};`,
-		...P(C, (e) => `--spacing-${e}`),
+		H("component sizes — in the spacing namespace, so h-control-md and friends exist"),
+		...U(A, (e) => `--spacing-${e}`),
 		"",
-		N("typography"),
-		...P(T, (e) => `--font-${e}`),
-		...F(),
-		...P(D, (e) => `--font-weight-${e}`),
-		...P(O, (e) => `--tracking-${e}`),
-		...P(k, (e) => `--leading-${e}`),
+		H("typography"),
+		...U(k, (e) => `--font-${e}`),
+		...W(),
+		...U(d, (e) => `--font-weight-${e}`),
+		...U(j, (e) => `--tracking-${e}`),
+		...U(s, (e) => `--leading-${e}`),
 		"",
-		N("radii — multiples of --radius, declared in :root below"),
-		...P(p, (e) => `--radius-${e}`),
+		H("radii — multiples of --radius, declared in :root below"),
+		...U(y, (e) => `--radius-${e}`),
 		"",
-		N("bevels — box shadows"),
-		...P(x, (e) => `--shadow-${e}`),
-		...P(S, (e) => `--text-shadow-${e}`),
+		H("bevels — box shadows, each read from --rk-shadow-* so a theme can change it"),
+		...Object.keys(c).map((e) => `  --shadow-${e}: var(--rk-shadow-${e});`),
+		...U(r, (e) => `--text-shadow-${e}`),
 		"",
-		N("motion"),
-		...P(s, (e) => `--transition-duration-${e}`),
-		...P(c, (e) => `--ease-${e}`),
+		H("motion"),
+		...U(P, (e) => `--transition-duration-${e}`),
+		...U(F, (e) => `--ease-${e}`),
 		"",
-		N("stacking layers"),
-		...P(A, (e) => `--z-index-${e}`),
+		H("stacking layers"),
+		...U(R, (e) => `--z-index-${e}`),
 		"}",
 		"",
 		"/* The one length the radius scale multiplies. Override to retune every corner. */",
 		":root {",
-		`  --radius: ${l};`,
+		`  --radius: ${o};`,
+		"}",
+		"",
+		"/* The values behind the shadow tokens, and the style switches. Windows 98's. */",
+		":root {",
+		...U(c, (e) => `--rk-shadow-${e}`),
+		...U(t, (e) => `--rk-${e}`),
+		"}",
+		"",
+		"/* The modern palette. Only the modern theme references it. */",
+		":root {",
+		...U(x, (e) => `--color-modern-${e}`),
 		"}",
+		"",
+		"/* Windows 98 inside a page in another theme. */",
+		u("[data-theme=\"win98\"]", "light", C),
+		"",
+		"/* The modern theme. */",
+		u("[data-theme=\"modern\"]", "light", T),
+		"",
+		"@media (prefers-color-scheme: dark) {",
+		B(u("[data-theme=\"modern\"]:not([data-color-scheme=\"light\"])", "dark", S)),
+		"}",
+		"",
+		u("[data-theme=\"modern\"][data-color-scheme=\"dark\"]", "dark", S),
 		""
 	].join("\n");
 }
-function M() {
+function B(e) {
+	return e.split("\n").map((e) => `  ${e}`).join("\n");
+}
+function V() {
 	return [
 		"/*",
 		" * rowkit design tokens.",
@@ -292,44 +121,53 @@ function M() {
 		" */"
 	].join("\n");
 }
-function N(e) {
+function H(e) {
 	return `  /* ${e} */`;
 }
-function P(e, t) {
+function U(e, t) {
 	return Object.entries(e).map(([e, n]) => `  ${t(e)}: ${n};`);
 }
-function F() {
-	return Object.entries(E).flatMap(([e, t]) => [`  --text-${e}: ${t.size};`, `  --text-${e}--line-height: ${t.lineHeight};`]);
+function W() {
+	return Object.entries(M).flatMap(([e, t]) => [`  --text-${e}: ${t.size};`, `  --text-${e}--line-height: ${t.lineHeight};`]);
 }
 //#endregion
 //#region src/index.ts
-var I = {
+var G = {
 	color: {
-		vga: t,
-		win98: n,
-		primitives: r,
-		semantic: o
+		vga: i,
+		win98: a,
+		primitives: e,
+		semantic: v
 	},
-	spacing: C,
-	spacingBase: w,
+	spacing: I,
+	spacingBase: L,
+	size: A,
+	style: t,
 	font: {
-		family: T,
-		size: E,
-		weight: D,
-		letterSpacing: O,
-		lineHeight: k
+		family: k,
+		size: M,
+		weight: d,
+		letterSpacing: j,
+		lineHeight: s
 	},
-	radius: f,
-	radiusBase: l,
-	shadow: x,
-	textShadow: S,
-	zIndex: A,
+	radius: n,
+	radiusBase: o,
+	shadow: c,
+	textShadow: r,
+	zIndex: R,
 	motion: {
-		duration: s,
-		easing: c
+		duration: P,
+		easing: F
+	},
+	themes: {
+		win98: C,
+		modern: {
+			light: T,
+			dark: S
+		}
 	}
-}, L = e;
+}, K = N;
 //#endregion
-export { j as buildThemeCss, r as colorPrimitives, s as duration, c as easing, T as fontFamily, E as fontSize, D as fontWeight, O as letterSpacing, k as lineHeight, f as radius, l as radiusBase, o as semanticColor, x as shadow, C as spacing, w as spacingBase, S as textShadow, I as tokens, L as version, t as vga, n as win98, A as zIndex };
+export { z as buildThemeCss, e as colorPrimitives, D as defineTheme, P as duration, F as easing, k as fontFamily, M as fontSize, d as fontWeight, j as letterSpacing, s as lineHeight, E as modernDarkColor, f as modernDarkShadow, S as modernDarkVars, b as modernFont, O as modernFontSize, p as modernFontWeight, m as modernLightColor, w as modernLightShadow, T as modernLightVars, x as modernPalette, g as modernRadius, h as modernSize, l as modernStyle, n as radius, o as radiusBase, v as semanticColor, c as shadow, A as size, I as spacing, L as spacingBase, t as style, r as textShadow, _ as themeNames, u as themeRule, G as tokens, K as version, i as vga, a as win98, C as win98Vars, R as zIndex };
 
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../package.json","../src/color.ts","../src/motion.ts","../src/radius.ts","../src/shadow.ts","../src/spacing.ts","../src/typography.ts","../src/z-index.ts","../src/css.ts","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@rowkit/tokens\",\n  \"version\": \"1.0.0-beta.0\",\n  \"description\": \"Design tokens for rowkit — consumable without importing components.\",\n  \"license\": \"MIT\",\n  \"author\": \"Nikolai Kushner\",\n  \"homepage\": \"https://rowkit.dev\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/NikolaiKushner/rowkit.git\",\n    \"directory\": \"packages/tokens\"\n  },\n  \"bugs\": \"https://github.com/NikolaiKushner/rowkit/issues\",\n  \"keywords\": [\n    \"design-tokens\",\n    \"design-system\",\n    \"rowkit\"\n  ],\n  \"type\": \"module\",\n  \"sideEffects\": false,\n  \"files\": [\n    \"dist\"\n  ],\n  \"main\": \"./dist/index.js\",\n  \"module\": \"./dist/index.js\",\n  \"types\": \"./dist/index.d.ts\",\n  \"exports\": {\n    \".\": {\n      \"types\": \"./dist/index.d.ts\",\n      \"import\": \"./dist/index.js\"\n    },\n    \"./css\": \"./dist/tokens.css\",\n    \"./package.json\": \"./package.json\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\",\n    \"provenance\": true\n  },\n  \"engines\": {\n    \"node\": \">=20.19.0\"\n  },\n  \"scripts\": {\n    \"build\": \"vue-tsc -b tsconfig.lib.json --force && vite build && node scripts/fix-dts-specifiers.mjs && node scripts/emit-css.mjs\",\n    \"typecheck\": \"vue-tsc -b --force\"\n  }\n}\n","/**\n * Colour primitives and semantic mappings — the Windows 98 palette.\n *\n * ## Where the values come from\n *\n * The primitives are the sixteen-colour VGA palette Windows 98 was drawn in,\n * plus the handful of system colours the default \"Windows Standard\" scheme\n * added on top of it: the light bevel grey, the title-bar gradient ends and\n * the tooltip yellow. They are written as the exact sRGB hex values, not\n * converted to another space: these colours are defined by their eight-bit\n * channels, and a round trip through OKLCH would only add rounding to values\n * that are already exact.\n *\n * The names and values mirror the Figma file's `primitives` collection, and\n * the semantic map mirrors its `semantic` collection token for token, so a\n * colour picked in the design is the colour the component paints.\n *\n * Contrast for every semantic pair a component produces is asserted in\n * `contrast.test.ts` — the ratios are a build gate, not a claim in a comment.\n */\n\n/** The sixteen-colour VGA palette, as Windows 98 used it. Only the twelve the design uses are listed. */\nexport const vga = {\n  black: '#000000',\n  white: '#ffffff',\n  /** The face of every window, button and dialog. */\n  silver: '#c0c0c0',\n  /** Bevel shadows, disabled text, the borders of a field. */\n  gray: '#808080',\n  /** Selection, the active title bar, the default primary. */\n  navy: '#000080',\n  /** Hyperlinks. */\n  blue: '#0000ff',\n  /** The desktop. */\n  teal: '#008080',\n  green: '#008000',\n  olive: '#808000',\n  yellow: '#ffff00',\n  maroon: '#800000',\n  red: '#ff0000',\n} as const\n\n/** The system colours Windows 98 added on top of VGA. */\nexport const win98 = {\n  /** The inner light edge of a raised bevel (`3D Light`). */\n  light: '#dfdfdf',\n  /** Secondary text a step lighter than black. */\n  'dark-gray': '#404040',\n  /** The light end of the active title-bar gradient. */\n  'title-blue': '#1084d0',\n  /** The light end of the inactive title-bar gradient. */\n  'title-gray': '#b5b5b5',\n  /** Tooltip background (`Info`). */\n  info: '#ffffe1',\n} as const\n\n/**\n * Every primitive colour, keyed by the CSS custom property it becomes:\n * `--color-vga-silver`, `--color-win98-info`.\n *\n * These are the only place a literal colour value appears in rowkit. Everything\n * else — semantic tokens, component variants — references one of these.\n */\nexport const colorPrimitives = {\n  ...prefixKeys('vga', vga),\n  ...prefixKeys('win98', win98),\n} as const\n\n/** Prefixes every key of a palette with its family name. */\nfunction prefixKeys<N extends string, S extends Record<string, string>>(\n  name: N,\n  scale: S\n): { [K in keyof S & string as `${N}-${K}`]: S[K] } {\n  const out: Record<string, string> = {}\n  for (const [key, value] of Object.entries(scale)) out[`${name}-${key}`] = value\n  return out as { [K in keyof S & string as `${N}-${K}`]: S[K] }\n}\n\n/** A reference to a primitive colour, as a CSS `var()` expression. */\nexport type ColorRef = `var(--color-${string})`\n\nconst ref = (token: keyof typeof colorPrimitives): ColorRef => `var(--color-${token})`\n\n/**\n * Semantic colours.\n *\n * Semantic tokens never hold a literal colour — each one points at a primitive\n * through `var()`, so re-theming means repointing references rather than\n * hunting down hex codes. `color.test.ts` enforces this.\n *\n * Windows 98 is a grey world: most surfaces are the same silver, and depth\n * comes from bevels rather than from a lighter or darker fill. So several\n * surface tokens below share a value. They stay separate tokens because they\n * are separate override points — a theme that wants a hovered row to change\n * colour repoints `accent` without touching `muted`.\n */\nexport const semanticColor = {\n  // Surfaces\n\n  /** The face of a window: the page behind the content. */\n  background: ref('vga-silver'),\n  /** The desktop a window sits on. Docs and demo backdrops. */\n  desktop: ref('vga-teal'),\n  /** Panels and dialogs. Same face as the window; the bevel separates them. */\n  card: ref('vga-silver'),\n  /** Toolbars and table headers. */\n  muted: ref('vga-silver'),\n  /** Row hover. Windows 98 has none — the token is here to be repointed. */\n  accent: ref('vga-silver'),\n  /** A pressed row or toggle. The pressed bevel carries the state, not the fill. */\n  'surface-active': ref('vga-silver'),\n  /** A selected row or list item: navy, with `on-selected` text. */\n  'surface-selected': ref('vga-navy'),\n  /** A disabled control keeps the face colour; its text goes grey and embossed. */\n  'surface-disabled': ref('vga-silver'),\n  /**\n   * Loading placeholder fill.\n   *\n   * Exempt from contrast rules: skeletons are `aria-hidden` decoration standing\n   * in for content that has not arrived, so WCAG 1.4.11 does not apply.\n   */\n  skeleton: ref('vga-gray'),\n  /** The inside of a text field, list or table body: white inside a sunken bevel. */\n  input: ref('vga-white'),\n  /** Tooltip bubble. */\n  'tooltip-bg': ref('win98-info'),\n\n  // Text\n\n  /** Body and heading text. */\n  foreground: ref('vga-black'),\n  /**\n   * Secondary text. Black, like body text: Windows 98 never greys out text\n   * that can still be read and acted on — grey means disabled.\n   */\n  'muted-foreground': ref('vga-black'),\n  /** Placeholders and de-emphasised metadata. */\n  'text-subtle': ref('win98-dark-gray'),\n  /** Disabled text, always drawn with {@link semanticColor['text-disabled-emboss']} under it. */\n  'text-disabled': ref('vga-gray'),\n  /** The white copy, one pixel right and down, that embosses disabled text. */\n  'text-disabled-emboss': ref('vga-white'),\n  /** Text on a selected row. */\n  'on-selected': ref('vga-white'),\n  /** Hyperlinks. */\n  link: ref('vga-blue'),\n\n  // Borders and bevels\n\n  /** Separators and the frame of a group. Decorative, below 3:1 on purpose. */\n  border: ref('vga-gray'),\n  /** A frame that has to read as an edge: the outline of a default button. */\n  'border-strong': ref('vga-black'),\n  /** The faintest rule, inside a dense group. */\n  'border-subtle': ref('win98-light'),\n  /**\n   * Focus. Drawn as a 1px dotted ring inside the control, around its label.\n   * Black, so it clears 3:1 on every surface rowkit paints.\n   */\n  ring: ref('vga-black'),\n  /** Base colour for shadows. */\n  shadow: ref('vga-black'),\n\n  /** Outer light edge of a raised bevel, inner one of a sunken bevel. */\n  'bevel-highlight': ref('vga-white'),\n  /** Inner light edge of a raised bevel. */\n  'bevel-light': ref('win98-light'),\n  /** Inner dark edge of a raised bevel. */\n  'bevel-shadow': ref('vga-gray'),\n  /**\n   * Outer dark edge of a raised bevel. Being black, it is what gives every\n   * control a boundary of well over 3:1 against the face (WCAG 1.4.11).\n   */\n  'bevel-dark': ref('vga-black'),\n\n  // Window title bar\n\n  /** Active title bar, left end of the gradient. The title text sits on this end. */\n  'titlebar-from': ref('vga-navy'),\n  /** Active title bar, right end of the gradient. */\n  'titlebar-to': ref('win98-title-blue'),\n  /** Inactive title bar, left end of the gradient. */\n  'titlebar-inactive-from': ref('vga-gray'),\n  /** Inactive title bar, right end of the gradient. */\n  'titlebar-inactive-to': ref('win98-title-gray'),\n  /** Active title text. */\n  'titlebar-foreground': ref('vga-white'),\n  /**\n   * Inactive title text. Black, not Windows 98's silver: silver on the grey\n   * gradient is about 2:1 and fails 4.5:1; black is 5.3:1 on `#808080` and\n   * 11:1 on `#b5b5b5`.\n   */\n  'titlebar-inactive-foreground': ref('vga-black'),\n\n  // Status families. A solid is a filled badge or a button; a subtle is a\n  // white chip with coloured text. No status colour is ever used without an\n  // icon or a word that says the same thing.\n  //\n  // `neutral` completes the family so a component's variant matrix has no\n  // special case: a neutral Badge reads the same token names as a danger one.\n  'neutral-solid': ref('vga-black'),\n  'neutral-solid-hover': ref('vga-black'),\n  'neutral-on-solid': ref('vga-white'),\n  'neutral-subtle': ref('vga-white'),\n  'neutral-on-subtle': ref('vga-black'),\n  'neutral-border': ref('vga-gray'),\n\n  'primary-solid': ref('vga-navy'),\n  'primary-solid-hover': ref('vga-navy'),\n  'primary-on-solid': ref('vga-white'),\n  'primary-subtle': ref('vga-white'),\n  'primary-on-subtle': ref('vga-navy'),\n  'primary-border': ref('vga-navy'),\n\n  'success-solid': ref('vga-green'),\n  'success-solid-hover': ref('vga-green'),\n  'success-on-solid': ref('vga-white'),\n  'success-subtle': ref('vga-white'),\n  'success-on-subtle': ref('vga-green'),\n  'success-border': ref('vga-green'),\n\n  /**\n   * Yellow carries black, never white: white on `#ffff00` is 1.07:1. Its edge\n   * is olive, because yellow on silver has almost no edge of its own.\n   */\n  'warning-solid': ref('vga-yellow'),\n  'warning-solid-hover': ref('vga-yellow'),\n  'warning-on-solid': ref('vga-black'),\n  'warning-subtle': ref('vga-white'),\n  'warning-on-subtle': ref('vga-black'),\n  'warning-border': ref('vga-olive'),\n\n  'danger-solid': ref('vga-maroon'),\n  'danger-solid-hover': ref('vga-maroon'),\n  'danger-on-solid': ref('vga-white'),\n  'danger-subtle': ref('vga-white'),\n  'danger-on-subtle': ref('vga-maroon'),\n  'danger-border': ref('vga-maroon'),\n} as const\n\n/** Names of every semantic colour token. */\nexport type SemanticColorName = keyof typeof semanticColor\n","/**\n * Motion durations and easing curves.\n *\n * Durations are short. In a working interface an animation is feedback, not\n * decoration: the user is scanning rows, and anything past ~200ms reads as the\n * interface lagging rather than responding.\n *\n * Every consumer of these tokens is still responsible for honouring\n * `prefers-reduced-motion` — a token cannot express that.\n */\nexport const duration = {\n  /** No transition. */\n  instant: '0ms',\n  /** Hover and focus states — must feel immediate. */\n  fast: '120ms',\n  /** Dropdowns, popovers, most enter/exit transitions. */\n  normal: '200ms',\n  /** Dialogs and large surfaces, where more travel needs more time. */\n  slow: '320ms',\n} as const\n\n/** Easing curves. */\nexport const easing = {\n  /** Linear. Progress indicators only. */\n  linear: 'linear',\n  /**\n   * The default for anything that both enters and leaves. Fast out of the\n   * gate, gentle at rest.\n   */\n  standard: 'cubic-bezier(0.2, 0, 0, 1)',\n  /** Entering the screen: decelerate into place. */\n  enter: 'cubic-bezier(0, 0, 0.2, 1)',\n  /** Leaving the screen: accelerate away. */\n  exit: 'cubic-bezier(0.4, 0, 1, 1)',\n} as const\n\n/** Names of every duration token. */\nexport type DurationName = keyof typeof duration\n/** Names of every easing token. */\nexport type EasingName = keyof typeof easing\n","/**\n * Corner radii, derived from one variable.\n *\n * Every step is a multiple of `--radius`, following the reference scale. One\n * declaration retunes every corner in the library:\n *\n * ```css\n * :root { --radius: 0.25rem; }\n * ```\n *\n * The factors are the source of truth, not the resulting lengths. Two things\n * are generated from them and cannot drift: {@link radius}, which resolves to\n * real `rem` values so a TypeScript consumer gets a number it can use, and\n * {@link radiusCss}, which keeps the `calc()` so a consumer's override of\n * `--radius` still cascades through the whole scale.\n */\n\n/**\n * The single length the scale multiplies.\n *\n * Zero: Windows 98 has no rounded corners, and every `radius/*` token in the\n * design is 0. The scale is kept rather than deleted so that corners stay one\n * decision away — set `--radius` in a consumer and every control follows,\n * without touching a component.\n */\nexport const radiusBase = '0rem'\n\n/**\n * Multiples of `--radius`. All of them compute to 0 with the default base;\n * the factors decide how a consumer's own `--radius` spreads across controls.\n */\nexport const radiusFactor = {\n  /** Always square, whatever `--radius` is: table cells, anything that tiles. */\n  none: 0,\n  /** Checkboxes and tags inside a cell. */\n  xs: 0.4,\n  /** Badges and small controls. */\n  sm: 0.6,\n  /** Buttons, inputs and panels. */\n  md: 0.8,\n  /** Windows, dialogs and popovers. */\n  lg: 1,\n  /** Large empty-state panels. */\n  xl: 1.4,\n} as const\n\n/** A radius that is not a multiple of the base. */\nconst PILL = '9999px'\n\n/**\n * Resolved lengths, for TypeScript consumers and for the contrast of reading\n * an actual size in the docs table.\n */\nexport const radius = {\n  ...(Object.fromEntries(\n    Object.entries(radiusFactor).map(([name, factor]) => [name, resolve(factor)])\n  ) as { [K in keyof typeof radiusFactor]: string }),\n  /** Circle. The only rounded shape Windows 98 draws: radio buttons, and a round skeleton. */\n  full: PILL,\n} as const\n\n/**\n * The same scale as CSS expressions, for the emitted `@theme` block.\n *\n * `lg` is bare `var(--radius)` rather than `calc(var(--radius) * 1)` because\n * the multiplication is noise at a factor of one.\n */\nexport const radiusCss = {\n  ...(Object.fromEntries(\n    Object.entries(radiusFactor).map(([name, factor]) => [name, expression(factor)])\n  ) as { [K in keyof typeof radiusFactor]: string }),\n  full: PILL,\n} as const\n\n/** Names of every radius token. */\nexport type RadiusName = keyof typeof radius\n\nfunction resolve(factor: number): string {\n  if (factor === 0) return '0rem'\n  const base = Number.parseFloat(radiusBase)\n  // Six places, then trailing zeros stripped: 0.5 * 1.4 is clean in decimal\n  // but floating point still needs the round-trip so docs stay readable.\n  return `${Number((base * factor).toFixed(6))}rem`\n}\n\nfunction expression(factor: number): string {\n  if (factor === 0) return '0rem'\n  if (factor === 1) return 'var(--radius)'\n  return `calc(var(--radius) * ${factor})`\n}\n","/**\n * Bevels, and the two structural shadows a data table needs.\n *\n * Windows 98 has no elevation. Depth is drawn with bevels: two 1px lines on\n * each side of a box, light on the top-left and dark on the bottom-right for a\n * raised surface, the other way round for a sunken one. Each bevel here is a\n * stack of hard inset shadows — no blur, no spread — built from the four\n * `bevel-*` colours, so the frame lives inside the box and never changes its\n * size.\n *\n * The first shadow in the list paints on top, so the 1px outer edge is listed\n * before the 2px inner one it overlaps. The values match the effect styles in\n * the Figma file one for one.\n */\n\nconst hl = 'var(--color-bevel-highlight)'\nconst light = 'var(--color-bevel-light)'\nconst sh = 'var(--color-bevel-shadow)'\nconst dark = 'var(--color-bevel-dark)'\n\n/** Builds an inset bevel from its outer and inner edge colours. */\nfunction bevel(outer: [string, string], inner?: [string, string]): string {\n  const [outerTopLeft, outerBottomRight] = outer\n  const layers = [`inset -1px -1px ${outerBottomRight}`, `inset 1px 1px ${outerTopLeft}`]\n  if (inner) {\n    const [innerTopLeft, innerBottomRight] = inner\n    layers.push(`inset -2px -2px ${innerBottomRight}`, `inset 2px 2px ${innerTopLeft}`)\n  }\n  return layers.join(', ')\n}\n\nexport const shadow = {\n  /** No bevel. */\n  none: 'none',\n  /** Buttons and raised panels. */\n  raised: bevel([hl, dark], [light, sh]),\n  /** A window's frame: like `raised`, with the bright white on the inner edge. */\n  window: bevel([light, dark], [hl, sh]),\n  /**\n   * The default button of a dialog: a 1px black frame around a raised bevel,\n   * so Enter's target is visible before anyone presses it.\n   */\n  'raised-default': [\n    `inset -1px -1px ${dark}`,\n    `inset 1px 1px ${dark}`,\n    `inset -2px -2px ${dark}`,\n    `inset 2px 2px ${hl}`,\n    `inset -3px -3px ${sh}`,\n    `inset 3px 3px ${light}`,\n  ].join(', '),\n  /** A button held down, or a toggle that is on. */\n  pressed: bevel([dark, hl], [sh, light]),\n  /** Text fields, lists and table bodies: the white well a value sits in. */\n  sunken: bevel([sh, hl], [dark, light]),\n  /** A thin sunken edge: status-bar sections, counters, Badge. */\n  status: bevel([sh, hl]),\n  /** An etched groove: group boxes and separators. */\n  etched: bevel([sh, hl], [hl, sh]),\n  /** A thin raised edge: a flat toolbar button while hovered. */\n  'raised-thin': bevel([hl, sh]),\n\n  /** The edge of a sticky table column while rows scroll under it. */\n  'scroll-x': `inset -1px 0 ${sh}`,\n  /**\n   * The rule under a sticky table header, drawn as a shadow rather than a\n   * border.\n   *\n   * Under `border-collapse` a border belongs to the table's grid, not to any\n   * cell, so a `position: sticky` header leaves its border behind and scrolls\n   * away from it — the rows then slide under a header with nothing between\n   * them, which is the one thing a sticky header exists to prevent. A shadow\n   * belongs to the element and travels with it.\n   */\n  'sticky-header': 'inset 0 -1px 0 var(--color-border)',\n} as const\n\n/** Names of every shadow token. */\nexport type ShadowName = keyof typeof shadow\n\n/**\n * Text shadows. One: the emboss that makes disabled text read as disabled\n * rather than as faint — grey text with a white copy one pixel right and\n * down. Windows 98 never fades a disabled control with opacity.\n */\nexport const textShadow = {\n  disabled: '1px 1px 0 var(--color-text-disabled-emboss)',\n} as const\n\n/** Names of every text shadow token. */\nexport type TextShadowName = keyof typeof textShadow\n","/**\n * Spacing scale.\n *\n * Keys are multiples of the 4px base unit, matching the convention most Vue and\n * Tailwind developers already carry in their heads: `4` is 1rem, `2` is 8px.\n * Fractional steps are deliberately absent — they would need escaped CSS custom\n * property names (`--spacing-0\\.5`), and Tailwind v4 already derives arbitrary\n * fractions from {@link spacingBase}.\n *\n * The low end is dense on purpose. A table cell padded at `2`/`3` is the\n * difference between a grid that shows twenty rows and one that shows twelve.\n */\nexport const spacing = {\n  /** Zero. */\n  0: '0rem',\n  /** 1px — hairline offsets and optical nudges, not layout. */\n  px: '1px',\n  /** 4px — icon-to-label gap. */\n  1: '0.25rem',\n  /** 8px — dense table cell padding. */\n  2: '0.5rem',\n  /** 12px — default table cell padding, compact control padding. */\n  3: '0.75rem',\n  /** 16px — default control padding, tight card padding. */\n  4: '1rem',\n  /** 20px */\n  5: '1.25rem',\n  /** 24px — card padding, gap between form fields. */\n  6: '1.5rem',\n  /** 32px — section spacing. */\n  8: '2rem',\n  /** 40px */\n  10: '2.5rem',\n  /** 48px — gap between major page regions. */\n  12: '3rem',\n  /** 64px — page gutters. */\n  16: '4rem',\n  /** 80px */\n  20: '5rem',\n  /** 96px — empty-state vertical padding. */\n  24: '6rem',\n} as const\n\n/**\n * The base unit Tailwind v4 multiplies for dynamic spacing utilities.\n *\n * Emitting this as `--spacing` keeps `p-7` and `mt-3.5` working even though\n * neither has a named token above.\n */\nexport const spacingBase = '0.25rem'\n\n/** Names of every spacing token. */\nexport type SpacingName = keyof typeof spacing\n","/**\n * Typography.\n *\n * Two registers, as in the design: the interface, and long text for\n * documentation. The interface is set at 13px — Windows 98's 8pt in its\n * \"Large Fonts\" mode (120 DPI), which the system offered for exactly this\n * reason: at 96 DPI 8pt is 11px, and on today's screens, whose pixels are far\n * smaller than a 1998 monitor's, 11px is too small to read for long. The sizes\n * are named after the Figma text styles (`ui/body` is `text-ui`, `doc/h1` is\n * `text-doc-h1`), so a style picked in the design maps to one utility.\n *\n * Sizes are in `rem`, so a reader who raised their browser's base size gets\n * larger text; at the default 16px base they land on the design's pixels.\n */\n\n/**\n * Font families.\n *\n * The interface face is **PT Sans** (ParaType, OFL): the closest open match\n * to Tahoma, which succeeded MS Sans Serif, and compact enough for dense\n * tables. It covers Latin and Cyrillic in regular and bold. The fixed-width\n * face is **VT323** (OFL), drawn after the Fixedsys terminal font.\n *\n * rowkit does not ship either font file: the app loads them, one import each\n * from `@fontsource/pt-sans` and `@fontsource/vt323`. Without them the stacks\n * fall through to Tahoma and the faces operating systems already ship.\n */\nexport const fontFamily = {\n  /** UI and body text. */\n  sans: [\n    '\"PT Sans\"',\n    'Tahoma',\n    '\"Microsoft Sans Serif\"',\n    '\"MS Sans Serif\"',\n    'Verdana',\n    'Arial',\n    'sans-serif',\n  ].join(', '),\n  /** Code, IDs and numbers that must align in a column. */\n  mono: ['VT323', '\"Lucida Console\"', '\"Courier New\"', 'ui-monospace', 'monospace'].join(', '),\n} as const\n\n/**\n * Font sizes, each paired with the line height the design sets it in.\n *\n * Pairing them prevents the most common typographic bug in a dense table:\n * changing the size without the leading, so rows stay tall and the density\n * the size was meant to buy evaporates.\n */\nexport const fontSize = {\n  /** 13/16 — every control, label, menu and table cell. Bold for titles and the default button. */\n  ui: { size: '0.8125rem', lineHeight: '1rem' },\n  /** 16/20, bold — the heading of an empty state or a group. */\n  heading: { size: '1rem', lineHeight: '1.25rem' },\n  /**\n   * 16/16 — the fixed-width face beside interface text. VT323's x-height is\n   * 0.4em to PT Sans's 0.5em, so 16px VT323 stands exactly as tall as 13px\n   * PT Sans.\n   */\n  mono: { size: '1rem', lineHeight: '1rem' },\n  /** 16/26 — documentation paragraphs, about seventy characters to a line. */\n  doc: { size: '1rem', lineHeight: '1.625rem' },\n  /** 20/20 — code beside documentation text: as tall as 16px PT Sans, for the same reason as `mono`. */\n  'doc-mono': { size: '1.25rem', lineHeight: '1.25rem' },\n  /** 26/30, bold — a documentation page title. */\n  'doc-h1': { size: '1.625rem', lineHeight: '1.875rem' },\n  /** 19/24, bold — a documentation section. */\n  'doc-h2': { size: '1.1875rem', lineHeight: '1.5rem' },\n  /** 15/20, bold — a documentation subsection. */\n  'doc-h3': { size: '0.9375rem', lineHeight: '1.25rem' },\n} as const\n\n/**\n * Font weights. Two, because PT Sans has two: anything in between would be\n * synthesised by the browser, and a faked weight is blurrier than either real\n * one.\n */\nexport const fontWeight = {\n  /** Body text. */\n  normal: '400',\n  /** Window titles, headings, the default button. */\n  bold: '700',\n} as const\n\n/** Letter spacing. Windows 98 sets every size at the face's own spacing. */\nexport const letterSpacing = {\n  normal: '0em',\n} as const\n\n/** Standalone line heights, for when text is not using a paired {@link fontSize}. */\nexport const lineHeight = {\n  none: '1',\n  tight: '1.25',\n  snug: '1.375',\n  normal: '1.5',\n  relaxed: '1.625',\n} as const\n\n/** Names of every font size token. */\nexport type FontSizeName = keyof typeof fontSize\n","/**\n * Stacking layers.\n *\n * Spaced by 100 so a consumer can slot their own chrome — an app header, a\n * cookie banner — between two rowkit layers without editing rowkit or starting\n * a `z-index: 99999` arms race.\n *\n * The ordering is not arbitrary. A tooltip must outrank a toast, because a\n * toast can carry an action button that itself has a tooltip. A popover must\n * outrank a modal, because a select inside a dialog opens a popover.\n */\nexport const zIndex = {\n  /** Default flow. */\n  base: '0',\n  /** Sticky table header and pinned columns. */\n  sticky: '100',\n  /** Dropdown menus attached to page-level content. */\n  dropdown: '200',\n  /** Backdrop behind a modal. */\n  overlay: '300',\n  /** Dialog surface. */\n  modal: '400',\n  /** Popovers and selects — must sit above a dialog to work inside one. */\n  popover: '500',\n  /** Toast queue. */\n  toast: '600',\n  /** Tooltips outrank everything, including toasts. */\n  tooltip: '700',\n} as const\n\n/** Names of every z-index token. */\nexport type ZIndexName = keyof typeof zIndex\n","import { colorPrimitives, semanticColor } from './color'\nimport { duration, easing } from './motion'\nimport { radiusBase, radiusCss } from './radius'\nimport { shadow, textShadow } from './shadow'\nimport { spacing, spacingBase } from './spacing'\nimport { fontFamily, fontSize, fontWeight, letterSpacing, lineHeight } from './typography'\nimport { zIndex } from './z-index'\n\n/**\n * Emits the Tailwind v4 `@theme` block for the rowkit token set.\n *\n * The TypeScript objects are the single source of truth; this function derives\n * the stylesheet from them, so the two cannot drift. `css.test.ts` asserts that\n * every token in every scale reaches the output.\n *\n * There is one theme. Semantic tokens point at primitives, so a consumer\n * rebrands by repointing a semantic token rather than editing a literal colour.\n *\n * @returns The complete stylesheet, ready to write to disk.\n */\nexport function buildThemeCss(): string {\n  return [\n    header(),\n    '',\n    '@theme {',\n    section('colour primitives — the only literal colours in rowkit'),\n    ...entries(colorPrimitives, (k) => `--color-${k}`),\n    '',\n    section('semantic colours'),\n    ...entries(semanticColor, (k) => `--color-${k}`),\n    '',\n    section('spacing'),\n    `  --spacing: ${spacingBase};`,\n    ...entries(spacing, (k) => `--spacing-${k}`),\n    '',\n    section('typography'),\n    ...entries(fontFamily, (k) => `--font-${k}`),\n    ...fontSizeEntries(),\n    ...entries(fontWeight, (k) => `--font-weight-${k}`),\n    ...entries(letterSpacing, (k) => `--tracking-${k}`),\n    ...entries(lineHeight, (k) => `--leading-${k}`),\n    '',\n    section('radii — multiples of --radius, declared in :root below'),\n    ...entries(radiusCss, (k) => `--radius-${k}`),\n    '',\n    section('bevels — box shadows'),\n    ...entries(shadow, (k) => `--shadow-${k}`),\n    ...entries(textShadow, (k) => `--text-shadow-${k}`),\n    '',\n    section('motion'),\n    // Tailwind v4's namespaces are `--transition-duration-*` and `--ease-*`.\n    // A name outside a namespace it recognises is not an error — it simply\n    // generates no utility, which is why `duration-fast` silently produced\n    // nothing until the compile test in packages/ui went looking for it.\n    ...entries(duration, (k) => `--transition-duration-${k}`),\n    ...entries(easing, (k) => `--ease-${k}`),\n    '',\n    section('stacking layers'),\n    ...entries(zIndex, (k) => `--z-index-${k}`),\n    '}',\n    '',\n    /*\n     * Outside `@theme` on purpose.\n     *\n     * The radius scale is `calc(var(--radius) * f)`, so `--radius` has to\n     * resolve wherever a `rounded-*` utility lands. Tailwind only emits the\n     * theme variables its generated utilities reference, and nothing generates\n     * a utility from a bare `--radius` — left inside `@theme` it can be dropped,\n     * and every `calc()` above then references an undefined variable. That is\n     * not an error in CSS: `border-radius` simply computes to nothing and every\n     * corner in the library goes square, with no warning anywhere.\n     *\n     * Declaring it here also makes it the documented override point: a consumer\n     * sets `--radius` once and the whole scale follows.\n     */\n    '/* The one length the radius scale multiplies. Override to retune every corner. */',\n    ':root {',\n    `  --radius: ${radiusBase};`,\n    '}',\n    '',\n  ].join('\\n')\n}\n\nfunction header(): string {\n  return [\n    '/*',\n    ' * rowkit design tokens.',\n    ' *',\n    ' * GENERATED FILE — DO NOT EDIT.',\n    ' * Source of truth: packages/tokens/src/*.ts',\n    ' * Regenerate with: pnpm --filter @rowkit/tokens build',\n    ' */',\n  ].join('\\n')\n}\n\nfunction section(label: string): string {\n  return `  /* ${label} */`\n}\n\n/** Renders `key: value` pairs as indented custom property declarations. */\nfunction entries(scale: Record<string, string>, toVar: (key: string) => string): string[] {\n  return Object.entries(scale).map(([key, value]) => `  ${toVar(key)}: ${value};`)\n}\n\n/**\n * Font sizes use Tailwind v4's paired form, where `--text-sm--line-height`\n * supplies the leading that ships with `text-sm`.\n */\nfunction fontSizeEntries(): string[] {\n  return Object.entries(fontSize).flatMap(([key, value]) => [\n    `  --text-${key}: ${value.size};`,\n    `  --text-${key}--line-height: ${value.lineHeight};`,\n  ])\n}\n","/**\n * `@rowkit/tokens` — the design token layer behind rowkit.\n *\n * Consumable on its own: import {@link tokens} for a fully typed object, or\n * `@rowkit/tokens/css` for the Tailwind v4 `@theme` block. Nothing here depends\n * on Vue, so a design tool, a docs site, or a chart library can read the same\n * values the components use.\n *\n * @example Typed access to a primitive\n * ```ts\n * import { tokens } from '@rowkit/tokens'\n * tokens.color.vga.silver // '#c0c0c0' — the face of every window\n * ```\n *\n * @example The stylesheet\n * ```css\n * @import 'tailwindcss';\n * @import '@rowkit/tokens/css';\n * ```\n */\n\nimport { version as pkgVersion } from '../package.json' with { type: 'json' }\nimport { colorPrimitives, semanticColor, vga, win98 } from './color'\nimport { duration, easing } from './motion'\nimport { radius, radiusBase } from './radius'\nimport { shadow, textShadow } from './shadow'\nimport { spacing, spacingBase } from './spacing'\nimport { fontFamily, fontSize, fontWeight, letterSpacing, lineHeight } from './typography'\nimport { zIndex } from './z-index'\n\nexport { colorPrimitives, semanticColor, vga, win98 } from './color'\nexport type { ColorRef, SemanticColorName } from './color'\n\nexport { duration, easing } from './motion'\nexport type { DurationName, EasingName } from './motion'\n\nexport { radius, radiusBase } from './radius'\nexport type { RadiusName } from './radius'\n\nexport { shadow, textShadow } from './shadow'\nexport type { ShadowName, TextShadowName } from './shadow'\n\nexport { spacing, spacingBase } from './spacing'\nexport type { SpacingName } from './spacing'\n\nexport { fontFamily, fontSize, fontWeight, letterSpacing, lineHeight } from './typography'\nexport type { FontSizeName } from './typography'\n\nexport { zIndex } from './z-index'\nexport type { ZIndexName } from './z-index'\n\nexport { buildThemeCss } from './css'\n\n/**\n * Every rowkit token in one object.\n *\n * Grouped by scale rather than flattened, so `tokens.color.vga.navy` narrows\n * to its literal type and autocompletes each level.\n */\nexport const tokens = {\n  color: {\n    /** The VGA palette Windows 98 is drawn in. */\n    vga,\n    /** The system colours Windows 98 added to it. */\n    win98,\n    /** Flat map of every primitive, keyed by CSS custom property suffix. */\n    primitives: colorPrimitives,\n    /** Semantic tokens, which reference primitives via `var()`. */\n    semantic: semanticColor,\n  },\n  spacing,\n  spacingBase,\n  font: {\n    family: fontFamily,\n    size: fontSize,\n    weight: fontWeight,\n    letterSpacing,\n    lineHeight,\n  },\n  radius,\n  radiusBase,\n  shadow,\n  textShadow,\n  zIndex,\n  motion: {\n    duration,\n    easing,\n  },\n} as const\n\n/** The shape of {@link tokens}. */\nexport type Tokens = typeof tokens\n\n/**\n * The `@rowkit/tokens` version this build was produced from.\n *\n * Read from `package.json` rather than written out. A literal here went stale\n * the moment Changesets bumped the manifest — it edits `package.json` and\n * nothing was updating the constant, so the first release broke its own test.\n * Rollup tree-shakes the JSON down to this one string, so nothing else ships.\n */\nexport const version: string = pkgVersion\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../package.json","../src/motion.ts","../src/spacing.ts","../src/z-index.ts","../src/css.ts","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@rowkit/tokens\",\n  \"version\": \"1.0.0-beta.1\",\n  \"description\": \"Design tokens for rowkit — consumable without importing components.\",\n  \"license\": \"MIT\",\n  \"author\": \"Nikolai Kushner\",\n  \"homepage\": \"https://rowkit.dev\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/NikolaiKushner/rowkit.git\",\n    \"directory\": \"packages/tokens\"\n  },\n  \"bugs\": \"https://github.com/NikolaiKushner/rowkit/issues\",\n  \"keywords\": [\n    \"design-tokens\",\n    \"design-system\",\n    \"rowkit\"\n  ],\n  \"type\": \"module\",\n  \"sideEffects\": false,\n  \"files\": [\n    \"dist\"\n  ],\n  \"main\": \"./dist/index.js\",\n  \"module\": \"./dist/index.js\",\n  \"types\": \"./dist/index.d.ts\",\n  \"exports\": {\n    \".\": {\n      \"types\": \"./dist/index.d.ts\",\n      \"import\": \"./dist/index.js\"\n    },\n    \"./reference\": {\n      \"types\": \"./dist/reference.d.ts\",\n      \"import\": \"./dist/reference.js\"\n    },\n    \"./css\": \"./dist/tokens.css\",\n    \"./package.json\": \"./package.json\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\",\n    \"provenance\": true\n  },\n  \"engines\": {\n    \"node\": \">=20.19.0\"\n  },\n  \"scripts\": {\n    \"build\": \"vue-tsc -b tsconfig.lib.json --force && vite build && node scripts/fix-dts-specifiers.mjs && node scripts/emit-css.mjs\",\n    \"typecheck\": \"vue-tsc -b --force\",\n    \"docs:reference\": \"node scripts/generate-reference.mjs\"\n  }\n}\n","/**\n * Motion durations and easing curves.\n *\n * Durations are short. In a working interface an animation is feedback, not\n * decoration: the user is scanning rows, and anything past ~200ms reads as the\n * interface lagging rather than responding.\n *\n * Every consumer of these tokens is still responsible for honouring\n * `prefers-reduced-motion` — a token cannot express that.\n */\nexport const duration = {\n  /** No transition. */\n  instant: '0ms',\n  /** Hover and focus states — must feel immediate. */\n  fast: '120ms',\n  /** Dropdowns, popovers, most enter/exit transitions. */\n  normal: '200ms',\n  /** Dialogs and large surfaces, where more travel needs more time. */\n  slow: '320ms',\n} as const\n\n/** Easing curves. */\nexport const easing = {\n  /** Linear. Progress indicators only. */\n  linear: 'linear',\n  /**\n   * The default for anything that both enters and leaves. Fast out of the\n   * gate, gentle at rest.\n   */\n  standard: 'cubic-bezier(0.2, 0, 0, 1)',\n  /** Entering the screen: decelerate into place. */\n  enter: 'cubic-bezier(0, 0, 0.2, 1)',\n  /** Leaving the screen: accelerate away. */\n  exit: 'cubic-bezier(0.4, 0, 1, 1)',\n} as const\n\n/** Names of every duration token. */\nexport type DurationName = keyof typeof duration\n/** Names of every easing token. */\nexport type EasingName = keyof typeof easing\n","/**\n * Spacing scale.\n *\n * Keys are multiples of the 4px base unit, matching the convention most Vue and\n * Tailwind developers already carry in their heads: `4` is 1rem, `2` is 8px.\n * Fractional steps are deliberately absent — they would need escaped CSS custom\n * property names (`--spacing-0\\.5`), and Tailwind v4 already derives arbitrary\n * fractions from {@link spacingBase}.\n *\n * The low end is dense on purpose. A table cell padded at `2`/`3` is the\n * difference between a grid that shows twenty rows and one that shows twelve.\n */\nexport const spacing = {\n  /** Zero. */\n  0: '0rem',\n  /** 1px — hairline offsets and optical nudges, not layout. */\n  px: '1px',\n  /** 4px — icon-to-label gap. */\n  1: '0.25rem',\n  /** 8px — dense table cell padding. */\n  2: '0.5rem',\n  /** 12px — default table cell padding, compact control padding. */\n  3: '0.75rem',\n  /** 16px — default control padding, tight card padding. */\n  4: '1rem',\n  /** 20px */\n  5: '1.25rem',\n  /** 24px — card padding, gap between form fields. */\n  6: '1.5rem',\n  /** 32px — section spacing. */\n  8: '2rem',\n  /** 40px */\n  10: '2.5rem',\n  /** 48px — gap between major page regions. */\n  12: '3rem',\n  /** 64px — page gutters. */\n  16: '4rem',\n  /** 80px */\n  20: '5rem',\n  /** 96px — empty-state vertical padding. */\n  24: '6rem',\n} as const\n\n/**\n * The base unit Tailwind v4 multiplies for dynamic spacing utilities.\n *\n * Emitting this as `--spacing` keeps `p-7` and `mt-3.5` working even though\n * neither has a named token above.\n */\nexport const spacingBase = '0.25rem'\n\n/** Names of every spacing token. */\nexport type SpacingName = keyof typeof spacing\n","/**\n * Stacking layers.\n *\n * Spaced by 100 so a consumer can slot their own chrome — an app header, a\n * cookie banner — between two rowkit layers without editing rowkit or starting\n * a `z-index: 99999` arms race.\n *\n * The ordering is not arbitrary. A tooltip must outrank a toast, because a\n * toast can carry an action button that itself has a tooltip. A popover must\n * outrank a modal, because a select inside a dialog opens a popover.\n */\nexport const zIndex = {\n  /** Default flow. */\n  base: '0',\n  /** Sticky table header and pinned columns. */\n  sticky: '100',\n  /** Dropdown menus attached to page-level content. */\n  dropdown: '200',\n  /** Backdrop behind a modal. */\n  overlay: '300',\n  /** Dialog surface. */\n  modal: '400',\n  /** Popovers and selects — must sit above a dialog to work inside one. */\n  popover: '500',\n  /** Toast queue. */\n  toast: '600',\n  /** Tooltips outrank everything, including toasts. */\n  tooltip: '700',\n} as const\n\n/** Names of every z-index token. */\nexport type ZIndexName = keyof typeof zIndex\n","import { colorPrimitives, semanticColor } from './color'\nimport { duration, easing } from './motion'\nimport { radiusBase, radiusCss } from './radius'\nimport { shadow, textShadow } from './shadow'\nimport { size } from './size'\nimport { spacing, spacingBase } from './spacing'\nimport { style } from './style'\nimport { modernDarkVars, modernLightVars, modernPalette, themeRule, win98Vars } from './themes'\nimport { fontFamily, fontSize, fontWeight, letterSpacing, lineHeight } from './typography'\nimport { zIndex } from './z-index'\n\n/**\n * Emits the Tailwind v4 `@theme` block for the rowkit token set.\n *\n * The TypeScript objects are the single source of truth; this function derives\n * the stylesheet from them, so the two cannot drift. `css.test.ts` asserts that\n * every token in every scale reaches the output.\n *\n * Two themes. Windows 98 is the default, carried by `:root`; the modern theme\n * is switched on by `data-theme=\"modern\"` on any element, and its dark scheme\n * by the system or by `data-color-scheme=\"dark\"` on that same element. A theme\n * is a set of custom property values and nothing else, so themes nest: a\n * region marked `data-theme=\"win98\"` inside a modern page is Windows 98.\n *\n * One thing makes that work, and it is easy to break. A custom property whose\n * value contains `var()` is resolved on the element that declares it, and\n * descendants inherit the result. A theme therefore re-declares every token it\n * changes on its own element; repointing a primitive at `:root` would not reach\n * a semantic token that has already been resolved there.\n *\n * Shadows take one more step. Tailwind copies a `--shadow-*` value into each\n * `shadow-*` utility rather than referencing it, so a theme could never change\n * one. The `@theme` entry is therefore `var(--rk-shadow-*)`, and the value\n * lives in that variable.\n *\n * @returns The complete stylesheet, ready to write to disk.\n */\nexport function buildThemeCss(): string {\n  return [\n    header(),\n    '',\n    '@theme {',\n    section('colour primitives — the only literal colours in rowkit'),\n    ...entries(colorPrimitives, (k) => `--color-${k}`),\n    '',\n    section('semantic colours'),\n    ...entries(semanticColor, (k) => `--color-${k}`),\n    '',\n    section('spacing'),\n    `  --spacing: ${spacingBase};`,\n    ...entries(spacing, (k) => `--spacing-${k}`),\n    '',\n    section('component sizes — in the spacing namespace, so h-control-md and friends exist'),\n    ...entries(size, (k) => `--spacing-${k}`),\n    '',\n    section('typography'),\n    ...entries(fontFamily, (k) => `--font-${k}`),\n    ...fontSizeEntries(),\n    ...entries(fontWeight, (k) => `--font-weight-${k}`),\n    ...entries(letterSpacing, (k) => `--tracking-${k}`),\n    ...entries(lineHeight, (k) => `--leading-${k}`),\n    '',\n    section('radii — multiples of --radius, declared in :root below'),\n    ...entries(radiusCss, (k) => `--radius-${k}`),\n    '',\n    section('bevels — box shadows, each read from --rk-shadow-* so a theme can change it'),\n    ...Object.keys(shadow).map((k) => `  --shadow-${k}: var(--rk-shadow-${k});`),\n    ...entries(textShadow, (k) => `--text-shadow-${k}`),\n    '',\n    section('motion'),\n    // Tailwind v4's namespaces are `--transition-duration-*` and `--ease-*`.\n    // A name outside a namespace it recognises is not an error — it simply\n    // generates no utility, which is why `duration-fast` silently produced\n    // nothing until the compile test in packages/ui went looking for it.\n    ...entries(duration, (k) => `--transition-duration-${k}`),\n    ...entries(easing, (k) => `--ease-${k}`),\n    '',\n    section('stacking layers'),\n    ...entries(zIndex, (k) => `--z-index-${k}`),\n    '}',\n    '',\n    /*\n     * Outside `@theme` on purpose.\n     *\n     * The radius scale is `calc(var(--radius) * f)`, so `--radius` has to\n     * resolve wherever a `rounded-*` utility lands. Tailwind only emits the\n     * theme variables its generated utilities reference, and nothing generates\n     * a utility from a bare `--radius` — left inside `@theme` it can be dropped,\n     * and every `calc()` above then references an undefined variable. That is\n     * not an error in CSS: `border-radius` simply computes to nothing and every\n     * corner in the library goes square, with no warning anywhere.\n     *\n     * Declaring it here also makes it the documented override point: a consumer\n     * sets `--radius` once and the whole scale follows.\n     */\n    '/* The one length the radius scale multiplies. Override to retune every corner. */',\n    ':root {',\n    `  --radius: ${radiusBase};`,\n    '}',\n    '',\n    \"/* The values behind the shadow tokens, and the style switches. Windows 98's. */\",\n    ':root {',\n    ...entries(shadow, (k) => `--rk-shadow-${k}`),\n    ...entries(style, (k) => `--rk-${k}`),\n    '}',\n    '',\n    '/* The modern palette. Only the modern theme references it. */',\n    ':root {',\n    ...entries(modernPalette, (k) => `--color-modern-${k}`),\n    '}',\n    '',\n    '/* Windows 98 inside a page in another theme. */',\n    themeRule('[data-theme=\"win98\"]', 'light', win98Vars),\n    '',\n    '/* The modern theme. */',\n    themeRule('[data-theme=\"modern\"]', 'light', modernLightVars),\n    '',\n    '@media (prefers-color-scheme: dark) {',\n    indent(\n      themeRule('[data-theme=\"modern\"]:not([data-color-scheme=\"light\"])', 'dark', modernDarkVars)\n    ),\n    '}',\n    '',\n    themeRule('[data-theme=\"modern\"][data-color-scheme=\"dark\"]', 'dark', modernDarkVars),\n    '',\n  ].join('\\n')\n}\n\nfunction indent(text: string): string {\n  return text\n    .split('\\n')\n    .map((line) => `  ${line}`)\n    .join('\\n')\n}\n\nfunction header(): string {\n  return [\n    '/*',\n    ' * rowkit design tokens.',\n    ' *',\n    ' * GENERATED FILE — DO NOT EDIT.',\n    ' * Source of truth: packages/tokens/src/*.ts',\n    ' * Regenerate with: pnpm --filter @rowkit/tokens build',\n    ' */',\n  ].join('\\n')\n}\n\nfunction section(label: string): string {\n  return `  /* ${label} */`\n}\n\n/** Renders `key: value` pairs as indented custom property declarations. */\nfunction entries(scale: Record<string, string>, toVar: (key: string) => string): string[] {\n  return Object.entries(scale).map(([key, value]) => `  ${toVar(key)}: ${value};`)\n}\n\n/**\n * Font sizes use Tailwind v4's paired form, where `--text-sm--line-height`\n * supplies the leading that ships with `text-sm`.\n */\nfunction fontSizeEntries(): string[] {\n  return Object.entries(fontSize).flatMap(([key, value]) => [\n    `  --text-${key}: ${value.size};`,\n    `  --text-${key}--line-height: ${value.lineHeight};`,\n  ])\n}\n","/**\n * `@rowkit/tokens` — the design token layer behind rowkit.\n *\n * Consumable on its own: import {@link tokens} for a fully typed object, or\n * `@rowkit/tokens/css` for the Tailwind v4 `@theme` block. Nothing here depends\n * on Vue, so a design tool, a docs site, or a chart library can read the same\n * values the components use.\n *\n * @example Typed access to a primitive\n * ```ts\n * import { tokens } from '@rowkit/tokens'\n * tokens.color.vga.silver // '#c0c0c0' — the face of every window\n * ```\n *\n * @example The stylesheet\n * ```css\n * @import 'tailwindcss';\n * @import '@rowkit/tokens/css';\n * ```\n */\n\nimport { version as pkgVersion } from '../package.json' with { type: 'json' }\nimport { colorPrimitives, semanticColor, vga, win98 } from './color'\nimport { duration, easing } from './motion'\nimport { radius, radiusBase } from './radius'\nimport { shadow, textShadow } from './shadow'\nimport { size } from './size'\nimport { spacing, spacingBase } from './spacing'\nimport { style } from './style'\nimport { modernDarkVars, modernLightVars, win98Vars } from './themes'\nimport { fontFamily, fontSize, fontWeight, letterSpacing, lineHeight } from './typography'\nimport { zIndex } from './z-index'\n\nexport { colorPrimitives, semanticColor, vga, win98 } from './color'\nexport type { ColorRef, SemanticColorName } from './color'\n\nexport { duration, easing } from './motion'\nexport type { DurationName, EasingName } from './motion'\n\nexport { radius, radiusBase } from './radius'\nexport type { RadiusName } from './radius'\n\nexport { shadow, textShadow } from './shadow'\nexport type { ShadowName, TextShadowName } from './shadow'\n\nexport { spacing, spacingBase } from './spacing'\nexport type { SpacingName } from './spacing'\n\nexport { size } from './size'\nexport type { SizeName } from './size'\n\nexport { style } from './style'\nexport type { StyleName } from './style'\n\nexport {\n  modernDarkColor,\n  modernDarkShadow,\n  modernDarkVars,\n  modernFont,\n  modernFontSize,\n  modernFontWeight,\n  modernLightColor,\n  modernLightShadow,\n  modernLightVars,\n  modernPalette,\n  modernRadius,\n  modernSize,\n  modernStyle,\n  defineTheme,\n  themeNames,\n  themeRule,\n  win98Vars,\n} from './themes'\nexport type {\n  ModernPaletteName,\n  ThemeDefinition,\n  ThemeName,\n  ThemeTokenName,\n  ThemeValues,\n  ThemeVars,\n} from './themes'\n\nexport { fontFamily, fontSize, fontWeight, letterSpacing, lineHeight } from './typography'\nexport type { FontSizeName } from './typography'\n\nexport { zIndex } from './z-index'\nexport type { ZIndexName } from './z-index'\n\nexport { buildThemeCss } from './css'\n\n/**\n * Every rowkit token in one object.\n *\n * Grouped by scale rather than flattened, so `tokens.color.vga.navy` narrows\n * to its literal type and autocompletes each level.\n */\nexport const tokens = {\n  color: {\n    /** The VGA palette Windows 98 is drawn in. */\n    vga,\n    /** The system colours Windows 98 added to it. */\n    win98,\n    /** Flat map of every primitive, keyed by CSS custom property suffix. */\n    primitives: colorPrimitives,\n    /** Semantic tokens, which reference primitives via `var()`. */\n    semantic: semanticColor,\n  },\n  spacing,\n  spacingBase,\n  size,\n  style,\n  font: {\n    family: fontFamily,\n    size: fontSize,\n    weight: fontWeight,\n    letterSpacing,\n    lineHeight,\n  },\n  radius,\n  radiusBase,\n  shadow,\n  textShadow,\n  zIndex,\n  motion: {\n    duration,\n    easing,\n  },\n  /** Each theme as the variables it declares. */\n  themes: {\n    win98: win98Vars,\n    modern: { light: modernLightVars, dark: modernDarkVars },\n  },\n} as const\n\n/** The shape of {@link tokens}. */\nexport type Tokens = typeof tokens\n\n/**\n * The `@rowkit/tokens` version this build was produced from.\n *\n * Read from `package.json` rather than written out. A literal here went stale\n * the moment Changesets bumped the manifest — it edits `package.json` and\n * nothing was updating the constant, so the first release broke its own test.\n * Rollup tree-shakes the JSON down to this one string, so nothing else ships.\n */\nexport const version: string = pkgVersion\n"],"mappings":"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"}

package/dist/radius.d.ts

@@ -48,6 +48,11 @@ export declare const radiusFactor: {
 export declare const radius: {
     /** Circle. The only rounded shape Windows 98 draws: radio buttons, and a round skeleton. */
     readonly full: "9999px";
+    /**
+     * A capsule, where the theme draws one: a chip, a progress bar, a caption
+     * button. Square in Windows 98, whatever `--radius` is.
+     */
+    readonly pill: "0rem";
     readonly none: string;
     readonly xs: string;
     readonly sm: string;
@@ -63,6 +68,7 @@ export declare const radius: {
  */
 export declare const radiusCss: {
     readonly full: "9999px";
+    readonly pill: "0rem";
     readonly none: string;
     readonly xs: string;
     readonly sm: string;

package/dist/reference.d.ts

@@ -0,0 +1,20 @@
+/** The kinds of token a theme sets. */
+export type TokenGroup = 'color' | 'shadow' | 'size' | 'radius' | 'style' | 'font';
+/** One token a theme may set. */
+export interface TokenReference {
+    /** The CSS variable a theme declares. */
+    name: `--${string}`;
+    group: TokenGroup;
+    /** What it is for: the comment beside its value. */
+    description: string;
+    /** The components that read it; empty for one every component shares, like the type scale. */
+    components: string[];
+    /** Its value in each theme. The dark scheme lists the light value where it changes nothing. */
+    values: {
+        win98: string;
+        modernLight: string;
+        modernDark: string;
+    };
+}
+/** Every token a theme may set, in the order the source declares them. */
+export declare const tokenReference: TokenReference[];

package/dist/reference.data.d.ts

@@ -0,0 +1,2 @@
+/** Each token a theme may set: its group and what it is for. */
+export declare const tokenDescriptions: Record<string, readonly [group: string, description: string]>;