@rowkit/tokens 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,5 +1,5 @@
 //#region package.json
-var e = "0.1.0", t = [
+var e = "0.2.0", t = { overlay: "4px" }, n = [
 	50,
 	100,
 	200,
@@ -11,7 +11,7 @@ var e = "0.1.0", t = [
 	800,
 	900,
 	950
-], n = {
+], r = {
 	50: "oklch(0.984 0.003 264)",
 	100: "oklch(0.968 0.004 264)",
 	200: "oklch(0.928 0.006 264)",
@@ -23,7 +23,7 @@ var e = "0.1.0", t = [
 	800: "oklch(0.279 0.03 264)",
 	900: "oklch(0.21 0.033 264)",
 	950: "oklch(0.13 0.036 264)"
-}, r = {
+}, i = {
 	50: "oklch(0.97 0.014 259)",
 	100: "oklch(0.936 0.03 259)",
 	200: "oklch(0.885 0.055 259)",
@@ -35,7 +35,7 @@ var e = "0.1.0", t = [
 	800: "oklch(0.442 0.165 259)",
 	900: "oklch(0.396 0.135 259)",
 	950: "oklch(0.282 0.086 259)"
-}, i = {
+}, a = {
 	50: "oklch(0.97 0.014 152)",
 	100: "oklch(0.936 0.036 152)",
 	200: "oklch(0.885 0.064 152)",
@@ -47,7 +47,7 @@ var e = "0.1.0", t = [
 	800: "oklch(0.442 0.115 152)",
 	900: "oklch(0.396 0.103 152)",
 	950: "oklch(0.282 0.073 152)"
-}, a = {
+}, o = {
 	50: "oklch(0.97 0.016 75)",
 	100: "oklch(0.936 0.04 75)",
 	200: "oklch(0.885 0.071 75)",
@@ -59,7 +59,7 @@ var e = "0.1.0", t = [
 	800: "oklch(0.442 0.092 75)",
 	900: "oklch(0.396 0.082 75)",
 	950: "oklch(0.282 0.059 75)"
-}, o = {
+}, s = {
 	50: "oklch(0.97 0.014 25)",
 	100: "oklch(0.936 0.032 25)",
 	200: "oklch(0.885 0.06 25)",
@@ -71,145 +71,213 @@ var e = "0.1.0", t = [
 	800: "oklch(0.442 0.165 25)",
 	900: "oklch(0.396 0.135 25)",
 	950: "oklch(0.282 0.086 25)"
-}, s = {
+}, 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 = {
+	577: "oklch(0.577 0.235 27.325)",
+	520: "oklch(0.52 0.212 27.325)"
+}, 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)",
-	...c("neutral", n),
-	...c("primary", r),
-	...c("success", i),
-	...c("warning", a),
-	...c("danger", o)
+	...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 c(e, n) {
+function m(e, t) {
 	let r = {};
-	for (let i of t) r[`${e}-${i}`] = n[i];
+	for (let i of n) r[`${e}-${i}`] = t[i];
 	return r;
 }
-var l = (e) => `var(--color-${e})`, u = {
-	background: l("neutral-50"),
-	surface: l("white"),
-	"surface-subtle": l("neutral-100"),
-	"surface-hover": l("neutral-100"),
-	"surface-active": l("neutral-200"),
-	"surface-selected": l("primary-50"),
-	"surface-disabled": l("neutral-100"),
-	skeleton: l("neutral-200"),
-	text: l("neutral-900"),
-	"text-muted": l("neutral-600"),
-	"text-subtle": l("neutral-400"),
-	"text-disabled": l("neutral-400"),
-	border: l("neutral-200"),
-	"border-strong": l("neutral-300"),
-	"border-subtle": l("neutral-100"),
-	"border-control": l("neutral-500"),
-	"focus-ring": l("primary-600"),
-	shadow: l("neutral-950"),
-	"neutral-solid": l("neutral-700"),
-	"neutral-solid-hover": l("neutral-800"),
-	"neutral-on-solid": l("white"),
-	"neutral-subtle": l("neutral-100"),
-	"neutral-on-subtle": l("neutral-700"),
-	"neutral-border": l("neutral-200"),
-	"primary-solid": l("primary-600"),
-	"primary-solid-hover": l("primary-700"),
-	"primary-on-solid": l("white"),
-	"primary-subtle": l("primary-50"),
-	"primary-on-subtle": l("primary-700"),
-	"primary-border": l("primary-200"),
-	"success-solid": l("success-600"),
-	"success-solid-hover": l("success-700"),
-	"success-on-solid": l("white"),
-	"success-subtle": l("success-50"),
-	"success-on-subtle": l("success-700"),
-	"success-border": l("success-200"),
-	"warning-solid": l("warning-600"),
-	"warning-solid-hover": l("warning-500"),
-	"warning-on-solid": l("neutral-900"),
-	"warning-subtle": l("warning-50"),
-	"warning-on-subtle": l("warning-700"),
-	"warning-border": l("warning-200"),
-	"danger-solid": l("danger-600"),
-	"danger-solid-hover": l("danger-700"),
-	"danger-on-solid": l("white"),
-	"danger-subtle": l("danger-50"),
-	"danger-on-subtle": l("danger-700"),
-	"danger-border": l("danger-200")
-}, d = {
-	background: l("neutral-950"),
-	surface: l("neutral-900"),
-	"surface-subtle": l("neutral-800"),
-	"surface-hover": l("neutral-800"),
-	"surface-active": l("neutral-700"),
-	"surface-selected": l("primary-950"),
-	"surface-disabled": l("neutral-800"),
-	skeleton: l("neutral-800"),
-	text: l("neutral-50"),
-	"text-muted": l("neutral-400"),
-	"text-subtle": l("neutral-500"),
-	"text-disabled": l("neutral-600"),
-	border: l("neutral-800"),
-	"border-strong": l("neutral-700"),
-	"border-subtle": l("neutral-900"),
-	"border-control": l("neutral-500"),
-	"focus-ring": l("primary-400"),
-	shadow: l("black"),
-	"neutral-solid": l("neutral-400"),
-	"neutral-solid-hover": l("neutral-300"),
-	"neutral-on-solid": l("neutral-950"),
-	"neutral-subtle": l("neutral-800"),
-	"neutral-on-subtle": l("neutral-200"),
-	"neutral-border": l("neutral-700"),
-	"primary-solid": l("primary-400"),
-	"primary-solid-hover": l("primary-300"),
-	"primary-on-solid": l("neutral-950"),
-	"primary-subtle": l("primary-950"),
-	"primary-on-subtle": l("primary-300"),
-	"primary-border": l("primary-800"),
-	"success-solid": l("success-400"),
-	"success-solid-hover": l("success-300"),
-	"success-on-solid": l("neutral-950"),
-	"success-subtle": l("success-950"),
-	"success-on-subtle": l("success-300"),
-	"success-border": l("success-800"),
-	"warning-solid": l("warning-400"),
-	"warning-solid-hover": l("warning-300"),
-	"warning-on-solid": l("neutral-950"),
-	"warning-subtle": l("warning-950"),
-	"warning-on-subtle": l("warning-300"),
-	"warning-border": l("warning-800"),
-	"danger-solid": l("danger-400"),
-	"danger-solid-hover": l("danger-300"),
-	"danger-on-solid": l("neutral-950"),
-	"danger-subtle": l("danger-950"),
-	"danger-on-subtle": l("danger-300"),
-	"danger-border": l("danger-800")
-}, f = {
+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-642"),
+	ring: g("primary-600"),
+	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-600"),
+	"primary-solid-hover": g("primary-700"),
+	"primary-on-solid": g("white"),
+	"primary-subtle": g("primary-50"),
+	"primary-on-subtle": g("primary-700"),
+	"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-50"),
+	"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("primary-950"),
+	"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("primary-400"),
+	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-400"),
+	"primary-solid-hover": g("primary-300"),
+	"primary-on-solid": g("gray-145"),
+	"primary-subtle": g("primary-950"),
+	"primary-on-subtle": g("primary-300"),
+	"primary-border": g("primary-800"),
+	"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("danger-950"),
+	"danger-on-subtle": g("danger-300"),
+	"danger-border": g("danger-800")
+}, y = {
 	instant: "0ms",
 	fast: "120ms",
 	normal: "200ms",
 	slow: "320ms"
-}, p = {
+}, b = {
 	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)"
-}, m = {
-	none: "0rem",
-	xs: "0.125rem",
-	sm: "0.25rem",
-	md: "0.375rem",
-	lg: "0.5rem",
-	xl: "0.75rem",
-	full: "9999px"
-}, h = {
+}, x = "0.625rem", 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": "8px 0 8px -8px color-mix(in oklab, var(--color-shadow) 15%, transparent)"
-}, g = {
+	"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 = {
 	0: "0rem",
 	px: "1px",
 	1: "0.25rem",
@@ -224,7 +292,7 @@ var l = (e) => `var(--color-${e})`, u = {
 	16: "4rem",
 	20: "5rem",
 	24: "6rem"
-}, _ = "0.25rem", v = {
+}, A = "0.25rem", j = {
 	sans: [
 		"ui-sans-serif",
 		"system-ui",
@@ -243,7 +311,7 @@ var l = (e) => `var(--color-${e})`, u = {
 		"Liberation Mono",
 		"monospace"
 	].join(", ")
-}, y = {
+}, M = {
 	xs: {
 		size: "0.75rem",
 		lineHeight: "1rem"
@@ -272,22 +340,22 @@ var l = (e) => `var(--color-${e})`, u = {
 		size: "1.875rem",
 		lineHeight: "2.25rem"
 	}
-}, b = {
+}, N = {
 	normal: "400",
 	medium: "500",
 	semibold: "600",
 	bold: "700"
-}, x = {
+}, P = {
 	tight: "-0.015em",
 	normal: "0em",
 	wide: "0.04em"
-}, S = {
+}, F = {
 	none: "1",
 	tight: "1.25",
 	snug: "1.375",
 	normal: "1.5",
 	relaxed: "1.625"
-}, C = {
+}, I = {
 	base: "0",
 	sticky: "100",
 	dropdown: "200",
@@ -299,52 +367,60 @@ var l = (e) => `var(--color-${e})`, u = {
 };
 //#endregion
 //#region src/css.ts
-function w() {
+function L() {
 	return [
-		T(),
+		R(),
 		"",
 		"@custom-variant dark (&:where(.dark, .dark *));",
 		"",
 		"@theme {",
-		E("colour primitives — the only literal colours in rowkit"),
-		...D(s, (e) => `--color-${e}`),
+		z("colour primitives — the only literal colours in rowkit"),
+		...B(p, (e) => `--color-${e}`),
+		"",
+		z("semantic colours — light (defaults)"),
+		...B(_, (e) => `--color-${e}`),
 		"",
-		E("semantic colours — light (defaults)"),
-		...D(u, (e) => `--color-${e}`),
+		z("spacing"),
+		`  --spacing: ${A};`,
+		...B(k, (e) => `--spacing-${e}`),
 		"",
-		E("spacing"),
-		`  --spacing: ${_};`,
-		...D(g, (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}`),
 		"",
-		E("typography"),
-		...D(v, (e) => `--font-${e}`),
-		...O(),
-		...D(b, (e) => `--font-weight-${e}`),
-		...D(x, (e) => `--tracking-${e}`),
-		...D(S, (e) => `--leading-${e}`),
+		z("radii — multiples of --radius, declared in :root below"),
+		...B(T, (e) => `--radius-${e}`),
 		"",
-		E("radii"),
-		...D(m, (e) => `--radius-${e}`),
+		z("blur"),
+		...B(t, (e) => `--blur-${e}`),
 		"",
-		E("shadows"),
-		...D(h, (e) => `--shadow-${e}`),
+		z("shadows"),
+		...B(O, (e) => `--shadow-${e}`),
 		"",
-		E("motion"),
-		...D(f, (e) => `--transition-duration-${e}`),
-		...D(p, (e) => `--ease-${e}`),
+		z("motion"),
+		...B(y, (e) => `--transition-duration-${e}`),
+		...B(b, (e) => `--ease-${e}`),
 		"",
-		E("stacking layers"),
-		...D(C, (e) => `--z-index-${e}`),
+		z("stacking layers"),
+		...B(I, (e) => `--z-index-${e}`),
+		"}",
+		"",
+		"/* The one length the radius scale multiplies. Override to retune every corner. */",
+		":root {",
+		`  --radius: ${x};`,
 		"}",
 		"",
 		"/* Dark mode repoints semantic tokens only. Primitives are theme-agnostic. */",
 		".dark {",
-		...D(d, (e) => `--color-${e}`),
+		...B(v, (e) => `--color-${e}`),
 		"}",
 		""
 	].join("\n");
 }
-function T() {
+function R() {
 	return [
 		"/*",
 		" * rowkit design tokens.",
@@ -355,48 +431,55 @@ function T() {
 		" */"
 	].join("\n");
 }
-function E(e) {
+function z(e) {
 	return `  /* ${e} */`;
 }
-function D(e, t) {
+function B(e, t) {
 	return Object.entries(e).map(([e, n]) => `  ${t(e)}: ${n};`);
 }
-function O() {
-	return Object.entries(y).flatMap(([e, t]) => [`  --text-${e}: ${t.size};`, `  --text-${e}--line-height: ${t.lineHeight};`]);
+function V() {
+	return Object.entries(M).flatMap(([e, t]) => [`  --text-${e}: ${t.size};`, `  --text-${e}--line-height: ${t.lineHeight};`]);
 }
 //#endregion
 //#region src/index.ts
-var k = {
+var H = {
 	color: {
-		neutral: n,
-		primary: r,
-		success: i,
-		warning: a,
-		danger: o,
-		primitives: s,
+		gray: c,
+		green: u,
+		amber: d,
+		whiteAlpha: f,
+		neutral: r,
+		primary: i,
+		red: l,
+		success: a,
+		warning: o,
+		danger: s,
+		primitives: p,
 		semantic: {
-			light: u,
-			dark: d
+			light: _,
+			dark: v
 		}
 	},
-	spacing: g,
-	spacingBase: _,
+	spacing: k,
+	spacingBase: A,
 	font: {
-		family: v,
-		size: y,
-		weight: b,
-		letterSpacing: x,
-		lineHeight: S
+		family: j,
+		size: M,
+		weight: N,
+		letterSpacing: P,
+		lineHeight: F
 	},
-	radius: m,
-	shadow: h,
-	zIndex: C,
+	radius: w,
+	radiusBase: x,
+	blur: t,
+	shadow: O,
+	zIndex: I,
 	motion: {
-		duration: f,
-		easing: p
+		duration: y,
+		easing: b
 	}
-}, A = e;
+}, U = e;
 //#endregion
-export { w as buildThemeCss, s as colorPrimitives, t as colorSteps, o as danger, f as duration, p as easing, v as fontFamily, y as fontSize, b as fontWeight, x as letterSpacing, S as lineHeight, n as neutral, r as primary, m as radius, d as semanticColorDark, u as semanticColorLight, h as shadow, g as spacing, _ as spacingBase, i as success, k as tokens, A as version, a as warning, C as zIndex };
+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 };
 
 //# sourceMappingURL=index.js.map