@rowkit/tokens 0.4.0 → 1.0.0-beta.1

package/dist/index.js

@@ -1,286 +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 = "0.4.0", t = { overlay: "4px" }, n = [
-	50,
-	100,
-	200,
-	300,
-	400,
-	500,
-	600,
-	700,
-	800,
-	900,
-	950
-], r = {
-	50: "oklch(0.984 0.003 264)",
-	100: "oklch(0.968 0.004 264)",
-	200: "oklch(0.928 0.006 264)",
-	300: "oklch(0.869 0.01 264)",
-	400: "oklch(0.704 0.018 264)",
-	500: "oklch(0.551 0.024 264)",
-	600: "oklch(0.446 0.027 264)",
-	700: "oklch(0.373 0.028 264)",
-	800: "oklch(0.279 0.03 264)",
-	900: "oklch(0.21 0.033 264)",
-	950: "oklch(0.13 0.036 264)"
-}, i = {
-	50: "oklch(0.975 0.011 255)",
-	100: "oklch(0.948 0.022 255)",
-	200: "oklch(0.90 0.034 255)",
-	300: "oklch(0.80 0.05 255)",
-	400: "oklch(0.68 0.07 255)",
-	500: "oklch(0.52 0.09 255)",
-	600: "oklch(0.44 0.095 255)",
-	700: "oklch(0.38 0.095 255)",
-	800: "oklch(0.32 0.09 255)",
-	900: "oklch(0.27 0.075 255)",
-	950: "oklch(0.19 0.05 255)"
-}, a = {
-	50: "oklch(0.97 0.014 152)",
-	100: "oklch(0.936 0.036 152)",
-	200: "oklch(0.885 0.064 152)",
-	300: "oklch(0.809 0.097 152)",
-	400: "oklch(0.715 0.145 152)",
-	500: "oklch(0.623 0.162 152)",
-	600: "oklch(0.546 0.142 152)",
-	700: "oklch(0.488 0.127 152)",
-	800: "oklch(0.442 0.115 152)",
-	900: "oklch(0.396 0.103 152)",
-	950: "oklch(0.282 0.073 152)"
-}, o = {
-	50: "oklch(0.97 0.016 75)",
-	100: "oklch(0.936 0.04 75)",
-	200: "oklch(0.885 0.071 75)",
-	300: "oklch(0.849 0.108 75)",
-	400: "oklch(0.785 0.162 75)",
-	500: "oklch(0.723 0.15 75)",
-	600: "oklch(0.616 0.128 75)",
-	700: "oklch(0.528 0.11 75)",
-	800: "oklch(0.442 0.092 75)",
-	900: "oklch(0.396 0.082 75)",
-	950: "oklch(0.282 0.059 75)"
-}, s = {
-	50: "oklch(0.97 0.014 25)",
-	100: "oklch(0.936 0.032 25)",
-	200: "oklch(0.885 0.06 25)",
-	300: "oklch(0.809 0.107 25)",
-	400: "oklch(0.715 0.17 25)",
-	500: "oklch(0.623 0.214 25)",
-	600: "oklch(0.546 0.218 25)",
-	700: "oklch(0.488 0.195 25)",
-	800: "oklch(0.442 0.165 25)",
-	900: "oklch(0.396 0.135 25)",
-	950: "oklch(0.282 0.086 25)"
-}, c = {
-	988: "oklch(0.988 0.002 264)",
-	985: "oklch(0.985 0 0)",
-	972: "oklch(0.972 0.003 264)",
-	970: "oklch(0.97 0 0)",
-	940: "oklch(0.940 0.004 264)",
-	922: "oklch(0.922 0 0)",
-	905: "oklch(0.905 0.006 264)",
-	870: "oklch(0.87 0 0)",
-	708: "oklch(0.708 0 0)",
-	635: "oklch(0.635 0 0)",
-	642: "oklch(0.642 0.012 264)",
-	556: "oklch(0.556 0 0)",
-	535: "oklch(0.535 0 0)",
-	371: "oklch(0.371 0 0)",
-	269: "oklch(0.269 0 0)",
-	205: "oklch(0.205 0 0)",
-	145: "oklch(0.145 0 0)"
-}, l = {
-	850: "oklch(0.85 0.08 25)",
-	577: "oklch(0.577 0.235 27.325)",
-	520: "oklch(0.52 0.212 27.325)",
-	350: "oklch(0.38 0.055 25)",
-	260: "oklch(0.32 0.045 25)"
-}, u = {
-	950: "oklch(0.95 0.05 152)",
-	880: "oklch(0.88 0.05 152)",
-	850: "oklch(0.85 0.12 152)",
-	550: "oklch(0.55 0.144 152)",
-	520: "oklch(0.52 0.136 152)",
-	400: "oklch(0.4 0.105 152)",
-	350: "oklch(0.35 0.092 152)",
-	260: "oklch(0.26 0.068 152)"
-}, d = {
-	950: "oklch(0.95 0.04 75)",
-	880: "oklch(0.88 0.05 75)",
-	850: "oklch(0.85 0.12 75)",
-	550: "oklch(0.55 0.116 75)",
-	520: "oklch(0.52 0.109 75)",
-	400: "oklch(0.4 0.084 75)",
-	350: "oklch(0.35 0.074 75)",
-	260: "oklch(0.26 0.055 75)"
-}, f = {
-	8: "oklch(1 0 0 / 8%)",
-	10: "oklch(1 0 0 / 10%)",
-	15: "oklch(1 0 0 / 15%)"
-}, p = {
-	white: "oklch(1 0 0)",
-	black: "oklch(0 0 0)",
-	...h("gray", c),
-	...h("red", l),
-	...h("green", u),
-	...h("amber", d),
-	...h("white-alpha", f),
-	...m("neutral", r),
-	...m("primary", i),
-	...m("success", a),
-	...m("warning", o),
-	...m("danger", s)
-};
-function m(e, t) {
-	let r = {};
-	for (let i of n) r[`${e}-${i}`] = t[i];
-	return r;
-}
-function h(e, t) {
-	let n = {};
-	for (let [r, i] of Object.entries(t)) n[`${e}-${r}`] = i;
-	return n;
-}
-var g = (e) => `var(--color-${e})`, _ = {
-	background: g("gray-988"),
-	card: g("white"),
-	muted: g("gray-972"),
-	accent: g("gray-972"),
-	"surface-active": g("gray-940"),
-	"surface-selected": g("primary-50"),
-	"surface-disabled": g("gray-972"),
-	skeleton: g("gray-972"),
-	foreground: g("gray-145"),
-	"muted-foreground": g("gray-535"),
-	"text-subtle": g("gray-635"),
-	"text-disabled": g("gray-708"),
-	border: g("gray-940"),
-	"border-strong": g("gray-905"),
-	"border-subtle": g("gray-972"),
-	input: g("gray-870"),
-	ring: g("gray-708"),
-	shadow: g("black"),
-	"neutral-solid": g("gray-972"),
-	"neutral-solid-hover": g("gray-940"),
-	"neutral-on-solid": g("gray-205"),
-	"neutral-subtle": g("gray-972"),
-	"neutral-on-subtle": g("gray-205"),
-	"neutral-border": g("gray-940"),
-	"primary-solid": g("primary-800"),
-	"primary-solid-hover": g("primary-900"),
-	"primary-on-solid": g("gray-985"),
-	"primary-subtle": g("primary-50"),
-	"primary-on-subtle": g("primary-900"),
-	"primary-border": g("primary-200"),
-	"success-solid": g("green-550"),
-	"success-solid-hover": g("green-520"),
-	"success-on-solid": g("white"),
-	"success-subtle": g("green-950"),
-	"success-on-subtle": g("green-400"),
-	"success-border": g("green-880"),
-	"warning-solid": g("amber-550"),
-	"warning-solid-hover": g("amber-520"),
-	"warning-on-solid": g("white"),
-	"warning-subtle": g("amber-950"),
-	"warning-on-subtle": g("amber-400"),
-	"warning-border": g("amber-880"),
-	"danger-solid": g("red-577"),
-	"danger-solid-hover": g("red-520"),
-	"danger-on-solid": g("white"),
-	"danger-subtle": g("danger-100"),
-	"danger-on-subtle": g("danger-700"),
-	"danger-border": g("danger-200")
-}, v = {
-	background: g("gray-145"),
-	card: g("gray-205"),
-	muted: g("gray-269"),
-	accent: g("gray-269"),
-	"surface-active": g("gray-371"),
-	"surface-selected": g("gray-269"),
-	"surface-disabled": g("gray-269"),
-	skeleton: g("gray-269"),
-	foreground: g("gray-985"),
-	"muted-foreground": g("gray-708"),
-	"text-subtle": g("gray-556"),
-	"text-disabled": g("gray-556"),
-	border: g("white-alpha-8"),
-	"border-strong": g("white-alpha-15"),
-	"border-subtle": g("white-alpha-8"),
-	input: g("white-alpha-15"),
-	ring: g("white-alpha-15"),
-	shadow: g("black"),
-	"neutral-solid": g("gray-269"),
-	"neutral-solid-hover": g("gray-371"),
-	"neutral-on-solid": g("gray-985"),
-	"neutral-subtle": g("gray-269"),
-	"neutral-on-subtle": g("gray-985"),
-	"neutral-border": g("gray-371"),
-	"primary-solid": g("primary-100"),
-	"primary-solid-hover": g("primary-50"),
-	"primary-on-solid": g("primary-900"),
-	"primary-subtle": g("primary-900"),
-	"primary-on-subtle": g("primary-200"),
-	"primary-border": g("primary-700"),
-	"success-solid": g("green-550"),
-	"success-solid-hover": g("green-520"),
-	"success-on-solid": g("white"),
-	"success-subtle": g("green-260"),
-	"success-on-subtle": g("green-850"),
-	"success-border": g("green-350"),
-	"warning-solid": g("amber-550"),
-	"warning-solid-hover": g("amber-520"),
-	"warning-on-solid": g("white"),
-	"warning-subtle": g("amber-260"),
-	"warning-on-subtle": g("amber-850"),
-	"warning-border": g("amber-350"),
-	"danger-solid": g("red-577"),
-	"danger-solid-hover": g("red-520"),
-	"danger-on-solid": g("white"),
-	"danger-subtle": g("red-260"),
-	"danger-on-subtle": g("red-850"),
-	"danger-border": g("red-350")
-}, y = {
+var N = "1.0.0-beta.1", P = {
 	instant: "0ms",
 	fast: "120ms",
 	normal: "200ms",
 	slow: "320ms"
-}, b = {
+}, 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)"
-}, x = "0.5rem", S = {
-	none: 0,
-	xs: .4,
-	sm: .6,
-	md: .8,
-	lg: 1,
-	xl: 1.4
-}, C = "9999px", w = {
-	...Object.fromEntries(Object.entries(S).map(([e, t]) => [e, E(t)])),
-	full: C
-}, T = {
-	...Object.fromEntries(Object.entries(S).map(([e, t]) => [e, D(t)])),
-	full: C
-};
-function E(e) {
-	return e === 0 ? "0rem" : `${Number((Number.parseFloat(x) * e).toFixed(6))}rem`;
-}
-function D(e) {
-	return e === 0 ? "0rem" : e === 1 ? "var(--radius)" : `calc(var(--radius) * ${e})`;
-}
-//#endregion
-//#region src/shadow.ts
-var O = {
-	none: "none",
-	xs: "0 1px 2px 0 color-mix(in oklab, var(--color-shadow) 6%, transparent)",
-	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)",
-	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)",
-	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)",
-	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)",
-	"scroll-x": "12px 0 16px -8px color-mix(in oklab, var(--color-shadow) 22%, transparent)",
-	"sticky-header": "inset 0 -1px 0 var(--color-border)"
-}, k = {
+}, I = {
 	0: "0rem",
 	px: "1px",
 	1: "0.25rem",
@@ -295,74 +25,7 @@ var O = {
 	16: "4rem",
 	20: "5rem",
 	24: "6rem"
-}, A = "0.25rem", j = {
-	sans: [
-		"\"Geist Variable\"",
-		"Geist",
-		"ui-sans-serif",
-		"system-ui",
-		"-apple-system",
-		"Segoe UI",
-		"Roboto",
-		"Helvetica Neue",
-		"Arial",
-		"sans-serif"
-	].join(", "),
-	mono: [
-		"\"Geist Mono Variable\"",
-		"Geist Mono",
-		"ui-monospace",
-		"SFMono-Regular",
-		"Menlo",
-		"Consolas",
-		"Liberation Mono",
-		"monospace"
-	].join(", ")
-}, M = {
-	xs: {
-		size: "0.75rem",
-		lineHeight: "1rem"
-	},
-	sm: {
-		size: "0.875rem",
-		lineHeight: "1.25rem"
-	},
-	base: {
-		size: "1rem",
-		lineHeight: "1.5rem"
-	},
-	lg: {
-		size: "1.125rem",
-		lineHeight: "1.75rem"
-	},
-	xl: {
-		size: "1.25rem",
-		lineHeight: "1.75rem"
-	},
-	"2xl": {
-		size: "1.5rem",
-		lineHeight: "2rem"
-	},
-	"3xl": {
-		size: "1.875rem",
-		lineHeight: "2.25rem"
-	}
-}, N = {
-	normal: "400",
-	medium: "500",
-	semibold: "600",
-	bold: "700"
-}, P = {
-	tight: "-0.015em",
-	normal: "0em",
-	wide: "0.04em"
-}, F = {
-	none: "1",
-	tight: "1.25",
-	snug: "1.375",
-	normal: "1.5",
-	relaxed: "1.625"
-}, I = {
+}, L = "0.25rem", R = {
 	base: "0",
 	sticky: "100",
 	dropdown: "200",
@@ -374,60 +37,80 @@ var O = {
 };
 //#endregion
 //#region src/css.ts
-function L() {
+function z() {
 	return [
-		R(),
-		"",
-		"@custom-variant dark (&:where(.dark, .dark *));",
+		V(),
 		"",
 		"@theme {",
-		z("colour primitives — the only literal colours in rowkit"),
-		...B(p, (e) => `--color-${e}`),
+		H("colour primitives — the only literal colours in rowkit"),
+		...U(e, (e) => `--color-${e}`),
 		"",
-		z("semantic colours — light (defaults)"),
-		...B(_, (e) => `--color-${e}`),
+		H("semantic colours"),
+		...U(v, (e) => `--color-${e}`),
 		"",
-		z("spacing"),
-		`  --spacing: ${A};`,
-		...B(k, (e) => `--spacing-${e}`),
+		H("spacing"),
+		`  --spacing: ${L};`,
+		...U(I, (e) => `--spacing-${e}`),
 		"",
-		z("typography"),
-		...B(j, (e) => `--font-${e}`),
-		...V(),
-		...B(N, (e) => `--font-weight-${e}`),
-		...B(P, (e) => `--tracking-${e}`),
-		...B(F, (e) => `--leading-${e}`),
+		H("component sizes — in the spacing namespace, so h-control-md and friends exist"),
+		...U(A, (e) => `--spacing-${e}`),
 		"",
-		z("radii — multiples of --radius, declared in :root below"),
-		...B(T, (e) => `--radius-${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}`),
 		"",
-		z("blur"),
-		...B(t, (e) => `--blur-${e}`),
+		H("radii — multiples of --radius, declared in :root below"),
+		...U(y, (e) => `--radius-${e}`),
 		"",
-		z("shadows"),
-		...B(O, (e) => `--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}`),
 		"",
-		z("motion"),
-		...B(y, (e) => `--transition-duration-${e}`),
-		...B(b, (e) => `--ease-${e}`),
+		H("motion"),
+		...U(P, (e) => `--transition-duration-${e}`),
+		...U(F, (e) => `--ease-${e}`),
 		"",
-		z("stacking layers"),
-		...B(I, (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: ${x};`,
+		`  --radius: ${o};`,
 		"}",
 		"",
-		"/* Dark mode repoints semantic tokens only. Primitives are theme-agnostic. */",
-		".dark {",
-		...B(v, (e) => `--color-${e}`),
+		"/* 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 R() {
+function B(e) {
+	return e.split("\n").map((e) => `  ${e}`).join("\n");
+}
+function V() {
 	return [
 		"/*",
 		" * rowkit design tokens.",
@@ -438,55 +121,53 @@ function R() {
 		" */"
 	].join("\n");
 }
-function z(e) {
+function H(e) {
 	return `  /* ${e} */`;
 }
-function B(e, t) {
+function U(e, t) {
 	return Object.entries(e).map(([e, n]) => `  ${t(e)}: ${n};`);
 }
-function V() {
+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 H = {
+var G = {
 	color: {
-		gray: c,
-		green: u,
-		amber: d,
-		whiteAlpha: f,
-		neutral: r,
-		primary: i,
-		red: l,
-		success: a,
-		warning: o,
-		danger: s,
-		primitives: p,
-		semantic: {
-			light: _,
-			dark: v
-		}
+		vga: i,
+		win98: a,
+		primitives: e,
+		semantic: v
 	},
-	spacing: k,
-	spacingBase: A,
+	spacing: I,
+	spacingBase: L,
+	size: A,
+	style: t,
 	font: {
-		family: j,
+		family: k,
 		size: M,
-		weight: N,
-		letterSpacing: P,
-		lineHeight: F
+		weight: d,
+		letterSpacing: j,
+		lineHeight: s
 	},
-	radius: w,
-	radiusBase: x,
-	blur: t,
-	shadow: O,
-	zIndex: I,
+	radius: n,
+	radiusBase: o,
+	shadow: c,
+	textShadow: r,
+	zIndex: R,
 	motion: {
-		duration: y,
-		easing: b
+		duration: P,
+		easing: F
+	},
+	themes: {
+		win98: C,
+		modern: {
+			light: T,
+			dark: S
+		}
 	}
-}, U = e;
+}, K = N;
 //#endregion
-export { d as amber, t as blur, L as buildThemeCss, p as colorPrimitives, n as colorSteps, s as danger, y as duration, b as easing, j as fontFamily, M as fontSize, N as fontWeight, c as gray, u as green, P as letterSpacing, F as lineHeight, r as neutral, i as primary, w as radius, x as radiusBase, l as red, v as semanticColorDark, _ as semanticColorLight, O as shadow, k as spacing, A as spacingBase, a as success, H as tokens, U as version, o as warning, f as whiteAlpha, I 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