color-map 2.2.0 → 2.3.1

package/esm/scale/scale.js

@@ -0,0 +1,152 @@
+import { toGamut } from "../color/gamut.js";
+import { toColor } from "../color/parse.js";
+import { componentsIn } from "../color/spaces.js";
+import { unknownName } from "../color/unknown-name.js";
+import { MATERIAL_TONES, toneColor } from "./tone.js";
+// src/scale/scale.ts
+const TW_L = [
+	.97,
+	.932,
+	.882,
+	.809,
+	.707,
+	.623,
+	.546,
+	.488,
+	.424,
+	.379,
+	.282
+];
+const TW_C = [
+	.014,
+	.032,
+	.059,
+	.105,
+	.165,
+	.214,
+	.245,
+	.243,
+	.199,
+	.146,
+	.091
+];
+const TW_H = [
+	254.604,
+	255.585,
+	254.128,
+	251.813,
+	254.624,
+	259.815,
+	262.881,
+	264.376,
+	265.638,
+	265.522,
+	267.935
+];
+const RADIX_L = [
+	.992,
+	.978,
+	.953,
+	.925,
+	.894,
+	.857,
+	.81,
+	.745,
+	.62,
+	.585,
+	.52,
+	.32
+];
+const RADIX_C = [
+	.04,
+	.08,
+	.2,
+	.32,
+	.43,
+	.52,
+	.6,
+	.75,
+	1,
+	.95,
+	.9,
+	.35
+];
+function even(n) {
+	const t = (i) => i / (n - 1);
+	const bell = (i) => Math.sin(Math.PI * (.05 + .9 * t(i)));
+	const anchor = Math.round((n - 1) / 2);
+	return {
+		lightness: Array.from({ length: n }, (_, i) => .97 - .72 * t(i)),
+		chroma: Array.from({ length: n }, (_, i) => bell(i) / bell(anchor)),
+		hueShift: Array.from({ length: n }, () => 0),
+		anchor
+	};
+}
+const PRESETS = {
+	__proto__: null,
+	"tailwind-11": {
+		lightness: TW_L,
+		chroma: TW_C.map((c) => c / TW_C[5]),
+		hueShift: TW_H.map((h) => h - TW_H[5]),
+		anchor: 5
+	},
+	"radix-12": {
+		lightness: RADIX_L,
+		chroma: RADIX_C,
+		hueShift: RADIX_L.map(() => 0),
+		anchor: 8
+	},
+	"tone-13": {
+		lightness: [...MATERIAL_TONES].reverse(),
+		chroma: MATERIAL_TONES.map(() => 1),
+		hueShift: MATERIAL_TONES.map(() => 0),
+		anchor: 6,
+		tone: true
+	}
+};
+function curveOf(steps) {
+	if (typeof steps === "number") {
+		if (!Number.isInteger(steps) || steps < 2) throw new Error(`steps must be an integer of at least 2, got ${steps}`);
+		return even(steps);
+	}
+	if (steps === "even") return even(11);
+	const curve = PRESETS[steps];
+	if (!curve) throw unknownName("scale preset", steps, [...Object.keys(PRESETS), "even"]);
+	return curve;
+}
+/**
+* Builds a scale from light to dark around `seed`: one color per step, in
+* OKLCH, mapped into `gamut`. The preset gives each step's lightness, chroma
+* (relative to the seed's) and hue drift; pass `lightness`, `chroma` or
+* `hueShift` to replace any of them.
+*/
+function createScale(options) {
+	const { seed, steps = "tailwind-11", gamut = "srgb" } = options;
+	const curve = curveOf(steps);
+	const n = curve.lightness.length;
+	const pick = (name, over, base) => {
+		if (over === void 0) return base;
+		if (over.length !== n) throw new Error(`${name} needs ${n} values, got ${over.length}`);
+		return over;
+	};
+	const lightness = pick("lightness", options.lightness, curve.lightness);
+	const chroma = pick("chroma", options.chroma, curve.chroma);
+	const hueShift = pick("hueShift", typeof options.hueShift === "number" ? curve.lightness.map(() => options.hueShift) : options.hueShift, curve.hueShift);
+	const [, seedC, seedH] = componentsIn(toColor(seed), "oklch");
+	const hue = seedH ?? 0;
+	return lightness.map((l, i) => {
+		const c = seedC * chroma[i];
+		const h = hue + hueShift[i];
+		return curve.tone ? toneColor(l, c, h, gamut) : toGamut({
+			colorSpace: "oklch",
+			components: [
+				l,
+				c,
+				h
+			]
+		}, { gamut });
+	});
+}
+export { createScale };
+
+//# sourceMappingURL=scale.js.map

package/esm/scale/scale.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scale.js","names":[],"sources":["../../src/scale/scale.ts"],"sourcesContent":["import type { GamutId } from '../color/gamut.js'\nimport { toGamut } from '../color/gamut.js'\nimport { toColor } from '../color/parse.js'\nimport { componentsIn } from '../color/spaces.js'\nimport type { Color } from '../color/types.js'\nimport { unknownName } from '../color/unknown-name.js'\nimport { MATERIAL_TONES, toneColor } from './tone.js'\n\n/** The built-in step curves. */\nexport type ScalePreset = 'tailwind-11' | 'radix-12' | 'tone-13' | 'even'\n\n/** A step curve. `chroma` and `hueShift` are relative to the step at `anchor`, which takes the seed's own. */\ninterface Curve {\n\t/** OKLCH lightness 0 to 1, or CIE L* tones 0 to 100 when `tone` is set. */\n\tlightness: number[]\n\tchroma: number[]\n\thueShift: number[]\n\tanchor: number\n\ttone?: boolean\n}\n\n// Tailwind v4 blue, 50 to 950. The preset is this one hand-tuned scale, so a\n// seed of blue-500 gives Tailwind's blue back, and other hues get its shape.\n// biome-ignore lint/suspicious/noApproximativeNumericConstant: 0.707 is Tailwind blue-400's lightness, not 1/sqrt(2)\nconst TW_L = [0.97, 0.932, 0.882, 0.809, 0.707, 0.623, 0.546, 0.488, 0.424, 0.379, 0.282]\nconst TW_C = [0.014, 0.032, 0.059, 0.105, 0.165, 0.214, 0.245, 0.243, 0.199, 0.146, 0.091]\nconst TW_H = [254.604, 255.585, 254.128, 251.813, 254.624, 259.815, 262.881, 264.376, 265.638, 265.522, 267.935]\n\n// Radix-like light scale: step 9 is the pure solid, 11 and 12 are text.\nconst RADIX_L = [0.992, 0.978, 0.953, 0.925, 0.894, 0.857, 0.81, 0.745, 0.62, 0.585, 0.52, 0.32]\nconst RADIX_C = [0.04, 0.08, 0.2, 0.32, 0.43, 0.52, 0.6, 0.75, 1, 0.95, 0.9, 0.35]\n\nfunction even(n: number): Curve {\n\tconst t = (i: number) => i / (n - 1)\n\tconst bell = (i: number) => Math.sin(Math.PI * (0.05 + 0.9 * t(i)))\n\tconst anchor = Math.round((n - 1) / 2)\n\treturn {\n\t\tlightness: Array.from({ length: n }, (_, i) => 0.97 - 0.72 * t(i)),\n\t\tchroma: Array.from({ length: n }, (_, i) => bell(i) / bell(anchor)),\n\t\thueShift: Array.from({ length: n }, () => 0),\n\t\tanchor\n\t}\n}\n\nconst PRESETS: Record<string, Curve> = {\n\t__proto__: null as never,\n\t'tailwind-11': {\n\t\tlightness: TW_L,\n\t\tchroma: TW_C.map((c) => c / TW_C[5]),\n\t\thueShift: TW_H.map((h) => h - TW_H[5]),\n\t\tanchor: 5\n\t},\n\t'radix-12': {\n\t\tlightness: RADIX_L,\n\t\tchroma: RADIX_C,\n\t\thueShift: RADIX_L.map(() => 0),\n\t\tanchor: 8\n\t},\n\t'tone-13': {\n\t\tlightness: [...MATERIAL_TONES].reverse(),\n\t\tchroma: MATERIAL_TONES.map(() => 1),\n\t\thueShift: MATERIAL_TONES.map(() => 0),\n\t\tanchor: 6,\n\t\ttone: true\n\t}\n}\n\n/** Options for `createScale`. Only `seed` is required. */\nexport interface ScaleOptions {\n\t/** The color the scale is built around. Its hue and chroma set the anchor step. */\n\tseed: Color | string\n\t/**\n\t * A preset, or a number of steps for an even scale. Default `tailwind-11`.\n\t * `tone-13` steps are CIE L* tones, so any two steps whose tones differ by\n\t * 40 reach contrast 3 and by 50 about 4.5.\n\t */\n\tsteps?: ScalePreset | number\n\t/** Overrides the curve's lightness, one per step: OKLCH L 0 to 1 (L* tones 0 to 100 for `tone-13`). */\n\tlightness?: number[]\n\t/** Overrides chroma, as a multiplier of the seed's chroma, one per step. */\n\tchroma?: number[]\n\t/** Overrides hue drift, as degrees added to the seed's hue, one per step; a number is applied to every step. */\n\thueShift?: number[] | number\n\t/** The gamut every step must fit. Default `srgb`. */\n\tgamut?: GamutId\n}\n\nfunction curveOf(steps: ScalePreset | number): Curve {\n\tif (typeof steps === 'number') {\n\t\tif (!Number.isInteger(steps) || steps < 2) throw new Error(`steps must be an integer of at least 2, got ${steps}`)\n\t\treturn even(steps)\n\t}\n\tif (steps === 'even') return even(11)\n\tconst curve = PRESETS[steps]\n\tif (!curve) throw unknownName('scale preset', steps, [...Object.keys(PRESETS), 'even'])\n\treturn curve\n}\n\n/**\n * Builds a scale from light to dark around `seed`: one color per step, in\n * OKLCH, mapped into `gamut`. The preset gives each step's lightness, chroma\n * (relative to the seed's) and hue drift; pass `lightness`, `chroma` or\n * `hueShift` to replace any of them.\n */\nexport function createScale(options: ScaleOptions): Color[] {\n\tconst { seed, steps = 'tailwind-11', gamut = 'srgb' } = options\n\tconst curve = curveOf(steps)\n\tconst n = curve.lightness.length\n\tconst pick = <T>(name: string, over: T[] | undefined, base: T[]): T[] => {\n\t\tif (over === undefined) return base\n\t\tif (over.length !== n) throw new Error(`${name} needs ${n} values, got ${over.length}`)\n\t\treturn over\n\t}\n\tconst lightness = pick('lightness', options.lightness, curve.lightness)\n\tconst chroma = pick('chroma', options.chroma, curve.chroma)\n\tconst drift =\n\t\ttypeof options.hueShift === 'number' ? curve.lightness.map(() => options.hueShift as number) : options.hueShift\n\tconst hueShift = pick('hueShift', drift, curve.hueShift)\n\n\tconst [, seedC, seedH] = componentsIn(toColor(seed), 'oklch') as [number, number, number | null]\n\tconst hue = seedH ?? 0\n\treturn lightness.map((l, i) => {\n\t\tconst c = seedC * (chroma[i] as number)\n\t\tconst h = hue + (hueShift[i] as number)\n\t\treturn curve.tone ? toneColor(l, c, h, gamut) : toGamut({ colorSpace: 'oklch', components: [l, c, h] }, { gamut })\n\t})\n}\n"],"mappings":"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"}

package/esm/scale/tone.d.ts

@@ -0,0 +1,25 @@
+import { GamutId } from "../color/gamut.js";
+import { Color } from "../color/types.js";
+/** CIE L* (0 to 100) of a color: its relative luminance on the CIELAB lightness curve. */
+export declare function lstar(color: Color): number;
+/** Material's tones: 0 is black, 100 is white. */
+export declare const MATERIAL_TONES: readonly number[];
+/** Options for `tonalPalette`. */
+export interface TonalPaletteOptions {
+  /** The gamut the colors must fit. Default `srgb`. */
+  gamut?: GamutId;
+}
+/**
+ * The color at CIE L* `tone` with the given OKLCH hue and chroma, mapped into
+ * the gamut. OKLCH lightness is searched until the *mapped* color lands on
+ * `tone`, so chroma tapers where the gamut narrows and the tone stays true.
+ */
+export declare function toneColor(tone: number, chroma: number, hue: number, gamut?: GamutId): Color;
+/**
+ * A tonal palette, as in Material: one OKLCH hue and chroma held across L*
+ * tones. Two colors whose tones differ by 40 or more reach WCAG 2 contrast 3,
+ * and by 50 or more about 4.5 (4.48 at the worst pair, 100 against 50), so a
+ * pair can be picked by tone alone. Default tones are Material's 13.
+ */
+export declare function tonalPalette(hue: number, chroma: number, tones?: readonly number[], options?: TonalPaletteOptions): Color[];
+//# sourceMappingURL=tone.d.ts.map

package/esm/scale/tone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tone.d.ts","names":[],"sources":["../../src/scale/tone.ts"],"mappings":";;;wBAKgB,MAAM,OAAO;;qBAMhB;;iBAGI;;EAEhB,QAAQ;;;;;;;wBAQO,UAAU,cAAc,gBAAgB,aAAa,QAAO,UAAmB;;;;;;;wBAqC/E,aACf,aACA,gBACA,2BACA,UAAS,sBACP"}

package/esm/scale/tone.js

@@ -0,0 +1,96 @@
+import { inGamut } from "../color/gamut.js";
+import { componentsIn } from "../color/spaces.js";
+// src/scale/tone.ts
+/** CIE L* (0 to 100) of a color: its relative luminance on the CIELAB lightness curve. */
+function lstar(color) {
+	const y = Math.max(0, componentsIn(color, "xyz-d65")[1]);
+	return y > 216 / 24389 ? 116 * Math.cbrt(y) - 16 : 24389 / 27 * y;
+}
+/** Material's tones: 0 is black, 100 is white. */
+const MATERIAL_TONES = [
+	0,
+	10,
+	20,
+	30,
+	40,
+	50,
+	60,
+	70,
+	80,
+	90,
+	95,
+	99,
+	100
+];
+/**
+* The color at CIE L* `tone` with the given OKLCH hue and chroma, mapped into
+* the gamut. OKLCH lightness is searched until the *mapped* color lands on
+* `tone`, so chroma tapers where the gamut narrows and the tone stays true.
+*/
+function toneColor(tone, chroma, hue, gamut = "srgb") {
+	if (tone <= 0) return {
+		colorSpace: "oklch",
+		components: [
+			0,
+			0,
+			hue
+		]
+	};
+	if (tone >= 100) return {
+		colorSpace: "oklch",
+		components: [
+			1,
+			0,
+			hue
+		]
+	};
+	const r = hue * Math.PI / 180;
+	const cos = Math.cos(r);
+	const sin = Math.sin(r);
+	const lab = (l, c) => ({
+		colorSpace: "oklab",
+		components: [
+			l,
+			c * cos,
+			c * sin
+		]
+	});
+	const chromaAt = (l) => {
+		if (inGamut(lab(l, chroma), gamut)) return chroma;
+		let [lo, hi] = [0, chroma];
+		for (let i = 0; i < 24; i++) {
+			const mid = (lo + hi) / 2;
+			if (inGamut(lab(l, mid), gamut)) lo = mid;
+			else hi = mid;
+		}
+		return lo;
+	};
+	let lo = 0;
+	let hi = 1;
+	for (let i = 0; i < 40; i++) {
+		const mid = (lo + hi) / 2;
+		if (lstar(lab(mid, chromaAt(mid))) < tone) lo = mid;
+		else hi = mid;
+	}
+	const l = (lo + hi) / 2;
+	return {
+		colorSpace: "oklch",
+		components: [
+			l,
+			chromaAt(l),
+			hue
+		]
+	};
+}
+/**
+* A tonal palette, as in Material: one OKLCH hue and chroma held across L*
+* tones. Two colors whose tones differ by 40 or more reach WCAG 2 contrast 3,
+* and by 50 or more about 4.5 (4.48 at the worst pair, 100 against 50), so a
+* pair can be picked by tone alone. Default tones are Material's 13.
+*/
+function tonalPalette(hue, chroma, tones = MATERIAL_TONES, options = {}) {
+	return tones.map((t) => toneColor(t, chroma, hue, options.gamut));
+}
+export { MATERIAL_TONES, lstar, tonalPalette, toneColor };
+
+//# sourceMappingURL=tone.js.map

package/esm/scale/tone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tone.js","names":[],"sources":["../../src/scale/tone.ts"],"sourcesContent":["import { type GamutId, inGamut } from '../color/gamut.js'\nimport { componentsIn } from '../color/spaces.js'\nimport type { Color } from '../color/types.js'\n\n/** CIE L* (0 to 100) of a color: its relative luminance on the CIELAB lightness curve. */\nexport function lstar(color: Color): number {\n\tconst y = Math.max(0, componentsIn(color, 'xyz-d65')[1] as number)\n\treturn y > 216 / 24389 ? 116 * Math.cbrt(y) - 16 : (24389 / 27) * y\n}\n\n/** Material's tones: 0 is black, 100 is white. */\nexport const MATERIAL_TONES: readonly number[] = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100]\n\n/** Options for `tonalPalette`. */\nexport interface TonalPaletteOptions {\n\t/** The gamut the colors must fit. Default `srgb`. */\n\tgamut?: GamutId\n}\n\n/**\n * The color at CIE L* `tone` with the given OKLCH hue and chroma, mapped into\n * the gamut. OKLCH lightness is searched until the *mapped* color lands on\n * `tone`, so chroma tapers where the gamut narrows and the tone stays true.\n */\nexport function toneColor(tone: number, chroma: number, hue: number, gamut: GamutId = 'srgb'): Color {\n\tif (tone <= 0) return { colorSpace: 'oklch', components: [0, 0, hue] }\n\tif (tone >= 100) return { colorSpace: 'oklch', components: [1, 0, hue] }\n\t// The hue is fixed, so its cosine and sine are taken once: OKLCH converts by\n\t// way of OKLab with exactly these products, so the results are the same.\n\tconst r = (hue * Math.PI) / 180\n\tconst cos = Math.cos(r)\n\tconst sin = Math.sin(r)\n\tconst lab = (l: number, c: number): Color => ({ colorSpace: 'oklab', components: [l, c * cos, c * sin] })\n\t// The most chroma, up to `chroma`, that fits at this lightness; no clipping, so L* is monotone in L.\n\tconst chromaAt = (l: number): number => {\n\t\tif (inGamut(lab(l, chroma), gamut)) return chroma\n\t\tlet [lo, hi] = [0, chroma]\n\t\tfor (let i = 0; i < 24; i++) {\n\t\t\tconst mid = (lo + hi) / 2\n\t\t\tif (inGamut(lab(l, mid), gamut)) lo = mid\n\t\t\telse hi = mid\n\t\t}\n\t\treturn lo\n\t}\n\tlet lo = 0\n\tlet hi = 1\n\tfor (let i = 0; i < 40; i++) {\n\t\tconst mid = (lo + hi) / 2\n\t\tif (lstar(lab(mid, chromaAt(mid))) < tone) lo = mid\n\t\telse hi = mid\n\t}\n\tconst l = (lo + hi) / 2\n\treturn { colorSpace: 'oklch', components: [l, chromaAt(l), hue] }\n}\n\n/**\n * A tonal palette, as in Material: one OKLCH hue and chroma held across L*\n * tones. Two colors whose tones differ by 40 or more reach WCAG 2 contrast 3,\n * and by 50 or more about 4.5 (4.48 at the worst pair, 100 against 50), so a\n * pair can be picked by tone alone. Default tones are Material's 13.\n */\nexport function tonalPalette(\n\thue: number,\n\tchroma: number,\n\ttones: readonly number[] = MATERIAL_TONES,\n\toptions: TonalPaletteOptions = {}\n): Color[] {\n\treturn tones.map((t) => toneColor(t, chroma, hue, options.gamut))\n}\n"],"mappings":";;;;AAKA,SAAgB,MAAM,OAAsB;CAC3C,MAAM,IAAI,KAAK,IAAI,GAAG,aAAa,OAAO,SAAS,CAAC,CAAC,EAAY;CACjE,OAAO,IAAI,MAAM,QAAQ,MAAM,KAAK,KAAK,CAAC,IAAI,KAAM,QAAQ,KAAM;AACnE;;AAGA,MAAa,iBAAoC;CAAC;CAAG;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;AAAG;;;;;;AAapG,SAAgB,UAAU,MAAc,QAAgB,KAAa,QAAiB,QAAe;CACpG,IAAI,QAAQ,GAAG,OAAO;EAAE,YAAY;EAAS,YAAY;GAAC;GAAG;GAAG;EAAG;CAAE;CACrE,IAAI,QAAQ,KAAK,OAAO;EAAE,YAAY;EAAS,YAAY;GAAC;GAAG;GAAG;EAAG;CAAE;CAGvE,MAAM,IAAK,MAAM,KAAK,KAAM;CAC5B,MAAM,MAAM,KAAK,IAAI,CAAC;CACtB,MAAM,MAAM,KAAK,IAAI,CAAC;CACtB,MAAM,OAAO,GAAW,OAAsB;EAAE,YAAY;EAAS,YAAY;GAAC;GAAG,IAAI;GAAK,IAAI;EAAG;CAAE;CAEvG,MAAM,YAAY,MAAsB;EACvC,IAAI,QAAQ,IAAI,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO;EAC3C,IAAI,CAAC,IAAI,MAAM,CAAC,GAAG,MAAM;EACzB,KAAK,IAAI,IAAI,GAAG,IAAI,IAAI,KAAK;GAC5B,MAAM,OAAO,KAAK,MAAM;GACxB,IAAI,QAAQ,IAAI,GAAG,GAAG,GAAG,KAAK,GAAG,KAAK;QACjC,KAAK;EACX;EACA,OAAO;CACR;CACA,IAAI,KAAK;CACT,IAAI,KAAK;CACT,KAAK,IAAI,IAAI,GAAG,IAAI,IAAI,KAAK;EAC5B,MAAM,OAAO,KAAK,MAAM;EACxB,IAAI,MAAM,IAAI,KAAK,SAAS,GAAG,CAAC,CAAC,IAAI,MAAM,KAAK;OAC3C,KAAK;CACX;CACA,MAAM,KAAK,KAAK,MAAM;CACtB,OAAO;EAAE,YAAY;EAAS,YAAY;GAAC;GAAG,SAAS,CAAC;GAAG;EAAG;CAAE;AACjE;;;;;;;AAQA,SAAgB,aACf,KACA,QACA,QAA2B,gBAC3B,UAA+B,CAAC,GACtB;CACV,OAAO,MAAM,KAAK,MAAM,UAAU,GAAG,QAAQ,KAAK,QAAQ,KAAK,CAAC;AACjE"}

package/esm/tokens/css.d.ts

@@ -0,0 +1,18 @@
+import { ToCssOptions } from "../color/serialize.js";
+import { ColorSpaceId } from "../color/types.js";
+import { TokenTree } from "./tokens.js";
+/** Options for `toCssVariables`. It also takes the options of `toCss`. */
+export interface CssVariablesOptions extends ToCssOptions {
+  /** The first part of every name. Default `color`, so `primary.500` becomes `--color-primary-500`. */
+  prefix?: string;
+  /** The rule's selector. Default `:root`. */
+  selector?: string;
+  /** Convert every color to this space first. Default: print each in its own space. */
+  space?: ColorSpaceId;
+}
+/**
+ * Exports colors as CSS custom properties in one rule:
+ * `:root {\n\t--color-primary-500: oklch(0.62 0.19 260);\n}`.
+ */
+export declare function toCssVariables(tree: TokenTree, options?: CssVariablesOptions): string;
+//# sourceMappingURL=css.d.ts.map

package/esm/tokens/css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.d.ts","names":[],"sources":["../../src/tokens/css.ts"],"mappings":";;;;iBAMiB,4BAA4B;;EAE5C;;EAEA;;EAEA,QAAQ;;;;;;wBAeO,eAAe,MAAM,WAAW,UAAS"}

package/esm/tokens/css.js

@@ -0,0 +1,23 @@
+import { toCss } from "../color/serialize.js";
+import { convert } from "../color/spaces.js";
+import { cssNames, flatten } from "./tokens.js";
+// src/tokens/css.ts
+/** Prints one `--name: value;` line per color. */
+function declarations(tree, options) {
+	const { prefix, space, ...css } = options;
+	return [...cssNames(flatten(tree), prefix)].map(([name, color]) => `${name}: ${toCss(space ? convert(color, space) : color, css)};`);
+}
+/**
+* Exports colors as CSS custom properties in one rule:
+* `:root {\n\t--color-primary-500: oklch(0.62 0.19 260);\n}`.
+*/
+function toCssVariables(tree, options = {}) {
+	const { selector = ":root", prefix = "color", ...rest } = options;
+	return `${selector} {\n${declarations(tree, {
+		...rest,
+		prefix
+	}).map((l) => `\t${l}\n`).join("")}}\n`;
+}
+export { declarations, toCssVariables };
+
+//# sourceMappingURL=css.js.map

package/esm/tokens/css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.js","names":[],"sources":["../../src/tokens/css.ts"],"sourcesContent":["import { type ToCssOptions, toCss } from '../color/serialize.js'\nimport { convert } from '../color/spaces.js'\nimport type { ColorSpaceId } from '../color/types.js'\nimport { cssNames, flatten, type TokenTree } from './tokens.js'\n\n/** Options for `toCssVariables`. It also takes the options of `toCss`. */\nexport interface CssVariablesOptions extends ToCssOptions {\n\t/** The first part of every name. Default `color`, so `primary.500` becomes `--color-primary-500`. */\n\tprefix?: string\n\t/** The rule's selector. Default `:root`. */\n\tselector?: string\n\t/** Convert every color to this space first. Default: print each in its own space. */\n\tspace?: ColorSpaceId\n}\n\n/** Prints one `--name: value;` line per color. */\nexport function declarations(tree: TokenTree, options: CssVariablesOptions & { prefix: string }): string[] {\n\tconst { prefix, space, ...css } = options\n\treturn [...cssNames(flatten(tree), prefix)].map(\n\t\t([name, color]) => `${name}: ${toCss(space ? convert(color, space) : color, css)};`\n\t)\n}\n\n/**\n * Exports colors as CSS custom properties in one rule:\n * `:root {\\n\\t--color-primary-500: oklch(0.62 0.19 260);\\n}`.\n */\nexport function toCssVariables(tree: TokenTree, options: CssVariablesOptions = {}): string {\n\tconst { selector = ':root', prefix = 'color', ...rest } = options\n\tconst lines = declarations(tree, { ...rest, prefix })\n\treturn `${selector} {\\n${lines.map((l) => `\\t${l}\\n`).join('')}}\\n`\n}\n"],"mappings":";;;;;AAgBA,SAAgB,aAAa,MAAiB,SAA6D;CAC1G,MAAM,EAAE,QAAQ,OAAO,GAAG,QAAQ;CAClC,OAAO,CAAC,GAAG,SAAS,QAAQ,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC,KAC1C,CAAC,MAAM,WAAW,GAAG,KAAK,IAAI,MAAM,QAAQ,QAAQ,OAAO,KAAK,IAAI,OAAO,GAAG,EAAE,EAClF;AACD;;;;;AAMA,SAAgB,eAAe,MAAiB,UAA+B,CAAC,GAAW;CAC1F,MAAM,EAAE,WAAW,SAAS,SAAS,SAAS,GAAG,SAAS;CAE1D,OAAO,GAAG,SAAS,MADL,aAAa,MAAM;EAAE,GAAG;EAAM;CAAO,CACtB,CAAC,CAAC,KAAK,MAAM,KAAK,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;AAChE"}

package/esm/tokens/dtcg.d.ts

@@ -0,0 +1,33 @@
+import { Color, ColorSpaceId } from "../color/types.js";
+import { TokenTree } from "./tokens.js";
+/** Options for `toDtcg` and `toDtcgValue`. */
+export interface DtcgOptions {
+  /** Add the `hex` fallback (an sRGB `#rrggbb`, gamut-mapped when the color is outside sRGB). Default `true`. */
+  hex?: boolean;
+}
+/** A color value as DTCG 2025.10 defines it. */
+export interface DtcgColorValue {
+  colorSpace: Exclude<ColorSpaceId, 'display-p3-linear'>;
+  components: (number | 'none')[];
+  alpha?: number | 'none';
+  hex?: string;
+}
+/** A DTCG color token: a `$type` of `color` and its {@link DtcgColorValue}. */
+export interface DtcgToken {
+  $type: 'color';
+  $value: DtcgColorValue;
+}
+/** A DTCG group: named tokens and nested groups, as `toDtcg` returns for a token tree. */
+export interface DtcgGroup {
+  [name: string]: DtcgToken | DtcgGroup;
+}
+/** One color as a DTCG color value. `display-p3-linear` is not a DTCG space, so it becomes `display-p3`. */
+export declare function toDtcgValue(color: Color, options?: DtcgOptions): DtcgColorValue;
+/**
+ * Exports colors as a DTCG 2025.10 token file: nested groups whose leaves are
+ * `{ "$type": "color", "$value": { colorSpace, components, alpha?, hex? } }`.
+ * `none` components print as `"none"`, as the format asks. The result is plain
+ * JSON, so `JSON.stringify` writes the file.
+ */
+export declare function toDtcg(tree: TokenTree, options?: DtcgOptions): DtcgGroup;
+//# sourceMappingURL=dtcg.d.ts.map

package/esm/tokens/dtcg.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dtcg.d.ts","names":[],"sources":["../../src/tokens/dtcg.ts"],"mappings":";;;iBAOiB;;EAEhB;;;iBAIgB;EAChB,YAAY,QAAQ;EACpB;EACA;EACA;;;iBAIgB;EAChB;EACA,QAAQ;;;iBAIQ;GACf,eAAe,YAAY;;;wBAMb,YAAY,OAAO,OAAO,UAAS,cAAmB;;;;;;;wBAiBtD,OAAO,MAAM,WAAW,UAAS,cAAmB"}

package/esm/tokens/dtcg.js

@@ -0,0 +1,42 @@
+import { toGamut } from "../color/gamut.js";
+import { toHex } from "../color/serialize.js";
+import { convert } from "../color/spaces.js";
+import { flatten } from "./tokens.js";
+// src/tokens/dtcg.ts
+const none = (c) => c === null ? "none" : c;
+/** One color as a DTCG color value. `display-p3-linear` is not a DTCG space, so it becomes `display-p3`. */
+function toDtcgValue(color, options = {}) {
+	const c = color.colorSpace === "display-p3-linear" ? convert(color, "display-p3") : color;
+	const value = {
+		colorSpace: c.colorSpace,
+		components: c.components.map(none)
+	};
+	if (c.alpha !== void 0 && c.alpha !== 1) value.alpha = none(c.alpha);
+	if (options.hex !== false) value.hex = toHex(toGamut({
+		...c,
+		alpha: 1
+	}, { gamut: "srgb" }));
+	return value;
+}
+/**
+* Exports colors as a DTCG 2025.10 token file: nested groups whose leaves are
+* `{ "$type": "color", "$value": { colorSpace, components, alpha?, hex? } }`.
+* `none` components print as `"none"`, as the format asks. The result is plain
+* JSON, so `JSON.stringify` writes the file.
+*/
+function toDtcg(tree, options = {}) {
+	const root = Object.create(null);
+	for (const { path, color } of flatten(tree)) {
+		if (!path.length) throw new TypeError("A DTCG file needs a name for each token: pass an object, not a single color");
+		let group = root;
+		for (const name of path.slice(0, -1)) group = group[name] ??= Object.create(null);
+		group[path[path.length - 1]] = {
+			$type: "color",
+			$value: toDtcgValue(color, options)
+		};
+	}
+	return root;
+}
+export { toDtcg, toDtcgValue };
+
+//# sourceMappingURL=dtcg.js.map

package/esm/tokens/dtcg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dtcg.js","names":[],"sources":["../../src/tokens/dtcg.ts"],"sourcesContent":["import { toGamut } from '../color/gamut.js'\nimport { toHex } from '../color/serialize.js'\nimport { convert } from '../color/spaces.js'\nimport type { Color, ColorSpaceId, Component } from '../color/types.js'\nimport { flatten, type TokenTree } from './tokens.js'\n\n/** Options for `toDtcg` and `toDtcgValue`. */\nexport interface DtcgOptions {\n\t/** Add the `hex` fallback (an sRGB `#rrggbb`, gamut-mapped when the color is outside sRGB). Default `true`. */\n\thex?: boolean\n}\n\n/** A color value as DTCG 2025.10 defines it. */\nexport interface DtcgColorValue {\n\tcolorSpace: Exclude<ColorSpaceId, 'display-p3-linear'>\n\tcomponents: (number | 'none')[]\n\talpha?: number | 'none'\n\thex?: string\n}\n\n/** A DTCG color token: a `$type` of `color` and its {@link DtcgColorValue}. */\nexport interface DtcgToken {\n\t$type: 'color'\n\t$value: DtcgColorValue\n}\n\n/** A DTCG group: named tokens and nested groups, as `toDtcg` returns for a token tree. */\nexport interface DtcgGroup {\n\t[name: string]: DtcgToken | DtcgGroup\n}\n\nconst none = (c: Component): number | 'none' => (c === null ? 'none' : c)\n\n/** One color as a DTCG color value. `display-p3-linear` is not a DTCG space, so it becomes `display-p3`. */\nexport function toDtcgValue(color: Color, options: DtcgOptions = {}): DtcgColorValue {\n\tconst c = color.colorSpace === 'display-p3-linear' ? convert(color, 'display-p3') : color\n\tconst value: DtcgColorValue = {\n\t\tcolorSpace: c.colorSpace as DtcgColorValue['colorSpace'],\n\t\tcomponents: c.components.map(none)\n\t}\n\tif (c.alpha !== undefined && c.alpha !== 1) value.alpha = none(c.alpha)\n\tif (options.hex !== false) value.hex = toHex(toGamut({ ...c, alpha: 1 }, { gamut: 'srgb' }))\n\treturn value\n}\n\n/**\n * Exports colors as a DTCG 2025.10 token file: nested groups whose leaves are\n * `{ \"$type\": \"color\", \"$value\": { colorSpace, components, alpha?, hex? } }`.\n * `none` components print as `\"none\"`, as the format asks. The result is plain\n * JSON, so `JSON.stringify` writes the file.\n */\nexport function toDtcg(tree: TokenTree, options: DtcgOptions = {}): DtcgGroup {\n\t// Groups have no prototype, so a token named `__proto__` or `constructor` is an ordinary key.\n\tconst root: DtcgGroup = Object.create(null)\n\tfor (const { path, color } of flatten(tree)) {\n\t\tif (!path.length) throw new TypeError('A DTCG file needs a name for each token: pass an object, not a single color')\n\t\tlet group = root\n\t\tfor (const name of path.slice(0, -1)) group = (group[name] ??= Object.create(null)) as DtcgGroup\n\t\tgroup[path[path.length - 1] as string] = { $type: 'color', $value: toDtcgValue(color, options) }\n\t}\n\treturn root\n}\n"],"mappings":";;;;;AA+BA,MAAM,QAAQ,MAAmC,MAAM,OAAO,SAAS;;AAGvE,SAAgB,YAAY,OAAc,UAAuB,CAAC,GAAmB;CACpF,MAAM,IAAI,MAAM,eAAe,sBAAsB,QAAQ,OAAO,YAAY,IAAI;CACpF,MAAM,QAAwB;EAC7B,YAAY,EAAE;EACd,YAAY,EAAE,WAAW,IAAI,IAAI;CAClC;CACA,IAAI,EAAE,UAAU,KAAA,KAAa,EAAE,UAAU,GAAG,MAAM,QAAQ,KAAK,EAAE,KAAK;CACtE,IAAI,QAAQ,QAAQ,OAAO,MAAM,MAAM,MAAM,QAAQ;EAAE,GAAG;EAAG,OAAO;CAAE,GAAG,EAAE,OAAO,OAAO,CAAC,CAAC;CAC3F,OAAO;AACR;;;;;;;AAQA,SAAgB,OAAO,MAAiB,UAAuB,CAAC,GAAc;CAE7E,MAAM,OAAkB,OAAO,OAAO,IAAI;CAC1C,KAAK,MAAM,EAAE,MAAM,WAAW,QAAQ,IAAI,GAAG;EAC5C,IAAI,CAAC,KAAK,QAAQ,MAAM,IAAI,UAAU,6EAA6E;EACnH,IAAI,QAAQ;EACZ,KAAK,MAAM,QAAQ,KAAK,MAAM,GAAG,EAAE,GAAG,QAAS,MAAM,UAAU,OAAO,OAAO,IAAI;EACjF,MAAM,KAAK,KAAK,SAAS,MAAgB;GAAE,OAAO;GAAS,QAAQ,YAAY,OAAO,OAAO;EAAE;CAChG;CACA,OAAO;AACR"}

package/esm/tokens/index.d.ts

@@ -0,0 +1,5 @@
+import { CssVariablesOptions, toCssVariables } from "./css.js";
+import { DtcgColorValue, DtcgGroup, DtcgOptions, DtcgToken, toDtcg, toDtcgValue } from "./dtcg.js";
+import { TailwindThemeOptions, toTailwindTheme } from "./tailwind.js";
+import { TokenTree } from "./tokens.js";
+export { type CssVariablesOptions, type DtcgColorValue, type DtcgGroup, type DtcgOptions, type DtcgToken, type TailwindThemeOptions, type TokenTree, toCssVariables, toDtcg, toDtcgValue, toTailwindTheme };

package/esm/tokens/index.js

@@ -0,0 +1,4 @@
+import { toCssVariables } from "./css.js";
+import { toDtcg, toDtcgValue } from "./dtcg.js";
+import { toTailwindTheme } from "./tailwind.js";
+export { toCssVariables, toDtcg, toDtcgValue, toTailwindTheme };

package/esm/tokens/tailwind.d.ts

@@ -0,0 +1,19 @@
+import { ColorSpaceId } from "../color/types.js";
+import { CssVariablesOptions } from "./css.js";
+import { TokenTree } from "./tokens.js";
+/** Options for `toTailwindTheme`. It also takes the options of `toCss`. */
+export interface TailwindThemeOptions extends Omit<CssVariablesOptions, 'selector' | 'prefix'> {
+  /** The theme variable namespace. Default `color`, which makes `bg-primary-500` and `text-primary-500` work. */
+  namespace?: string;
+  /** Write `@theme inline`, so utilities hold the value instead of a `var()` reference. */
+  inline?: boolean;
+  /** Default `oklch`, the space Tailwind v4's own palette uses. */
+  space?: ColorSpaceId;
+}
+/**
+ * Exports colors as a Tailwind v4 `@theme` block. Paste it into the CSS file
+ * that has `@import "tailwindcss"`. An array of 11 colors gets the keys
+ * 50 to 950, so a `tailwind-11` scale reads like Tailwind's own.
+ */
+export declare function toTailwindTheme(tree: TokenTree, options?: TailwindThemeOptions): string;
+//# sourceMappingURL=tailwind.d.ts.map

package/esm/tokens/tailwind.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind.d.ts","names":[],"sources":["../../src/tokens/tailwind.ts"],"mappings":";;;;iBAKiB,6BAA6B,KAAK;;EAElD;;EAEA;;EAEA,QAAQ;;;;;;;wBAQO,gBAAgB,MAAM,WAAW,UAAS"}

package/esm/tokens/tailwind.js

@@ -0,0 +1,19 @@
+import { declarations } from "./css.js";
+// src/tokens/tailwind.ts
+/**
+* Exports colors as a Tailwind v4 `@theme` block. Paste it into the CSS file
+* that has `@import "tailwindcss"`. An array of 11 colors gets the keys
+* 50 to 950, so a `tailwind-11` scale reads like Tailwind's own.
+*/
+function toTailwindTheme(tree, options = {}) {
+	const { namespace = "color", inline = false, space = "oklch", ...rest } = options;
+	const lines = declarations(tree, {
+		...rest,
+		space,
+		prefix: namespace
+	});
+	return `@theme${inline ? " inline" : ""} {\n${lines.map((l) => `\t${l}\n`).join("")}}\n`;
+}
+export { toTailwindTheme };
+
+//# sourceMappingURL=tailwind.js.map

package/esm/tokens/tailwind.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind.js","names":[],"sources":["../../src/tokens/tailwind.ts"],"sourcesContent":["import type { ColorSpaceId } from '../color/types.js'\nimport { type CssVariablesOptions, declarations } from './css.js'\nimport type { TokenTree } from './tokens.js'\n\n/** Options for `toTailwindTheme`. It also takes the options of `toCss`. */\nexport interface TailwindThemeOptions extends Omit<CssVariablesOptions, 'selector' | 'prefix'> {\n\t/** The theme variable namespace. Default `color`, which makes `bg-primary-500` and `text-primary-500` work. */\n\tnamespace?: string\n\t/** Write `@theme inline`, so utilities hold the value instead of a `var()` reference. */\n\tinline?: boolean\n\t/** Default `oklch`, the space Tailwind v4's own palette uses. */\n\tspace?: ColorSpaceId\n}\n\n/**\n * Exports colors as a Tailwind v4 `@theme` block. Paste it into the CSS file\n * that has `@import \"tailwindcss\"`. An array of 11 colors gets the keys\n * 50 to 950, so a `tailwind-11` scale reads like Tailwind's own.\n */\nexport function toTailwindTheme(tree: TokenTree, options: TailwindThemeOptions = {}): string {\n\tconst { namespace = 'color', inline = false, space = 'oklch', ...rest } = options\n\tconst lines = declarations(tree, { ...rest, space, prefix: namespace })\n\treturn `@theme${inline ? ' inline' : ''} {\\n${lines.map((l) => `\\t${l}\\n`).join('')}}\\n`\n}\n"],"mappings":";;;;;;;AAmBA,SAAgB,gBAAgB,MAAiB,UAAgC,CAAC,GAAW;CAC5F,MAAM,EAAE,YAAY,SAAS,SAAS,OAAO,QAAQ,SAAS,GAAG,SAAS;CAC1E,MAAM,QAAQ,aAAa,MAAM;EAAE,GAAG;EAAM;EAAO,QAAQ;CAAU,CAAC;CACtE,OAAO,SAAS,SAAS,YAAY,GAAG,MAAM,MAAM,KAAK,MAAM,KAAK,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;AACrF"}

package/esm/tokens/tokens.d.ts

@@ -0,0 +1,11 @@
+import { Color } from "../color/types.js";
+import { SemanticPalette } from "../palette/semantic.js";
+/**
+ * What the exporters accept: a color, a CSS color string, an array of them (a
+ * scale), or an object of any of these nested to any depth. A `SemanticPalette`
+ * works as is: its `scales` and its role pairs export, its `meta` and ratios do not.
+ */
+export type TokenTree = SemanticPalette | Color | string | readonly TokenTree[] | {
+  readonly [name: string]: TokenTree;
+};
+//# sourceMappingURL=tokens.d.ts.map

package/esm/tokens/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","names":[],"sources":["../../src/tokens/tokens.ts"],"mappings":";;;;;;;YASY,YAAY,kBAAkB,0BAA0B;YAA0B,eAAe"}

package/esm/tokens/tokens.js

@@ -0,0 +1,77 @@
+import { parse } from "../color/parse.js";
+// src/tokens/tokens.ts
+const TAILWIND_STEPS = [
+	50,
+	100,
+	200,
+	300,
+	400,
+	500,
+	600,
+	700,
+	800,
+	900,
+	950
+];
+const isColor = (v) => typeof v === "object" && v !== null && typeof v.colorSpace === "string" && Array.isArray(v.components);
+function dropMeasures(tree) {
+	const { meta: _meta, scales, roles, ...rest } = tree;
+	const pairs = Object.fromEntries(Object.entries(roles).map(([name, p]) => [name, {
+		bg: p.bg,
+		fg: p.fg
+	}]));
+	return {
+		...rest,
+		...scales,
+		roles: pairs
+	};
+}
+const isSemantic = (v) => "roles" in v && "scales" in v && "meta" in v;
+/**
+* Walks a token tree into a flat list. An array gets the Tailwind keys
+* (50 to 950) when it has 11 colors and 1-based numbers otherwise; pass an
+* object to choose the keys. A value that is not a color, a string, an array
+* or an object throws with its path.
+*/
+function flatten(tree) {
+	const out = [];
+	const walk = (node, path) => {
+		if (typeof node === "string") return void out.push({
+			path,
+			color: parse(node)
+		});
+		if (isColor(node)) return void out.push({
+			path,
+			color: node
+		});
+		if (Array.isArray(node)) {
+			node.forEach((v, i) => {
+				walk(v, [...path, String(node.length === TAILWIND_STEPS.length ? TAILWIND_STEPS[i] : i + 1)]);
+			});
+			return;
+		}
+		if (typeof node === "object" && node !== null) {
+			const obj = isSemantic(node) ? dropMeasures(node) : node;
+			for (const [k, v] of Object.entries(obj)) walk(v, [...path, k]);
+			return;
+		}
+		throw new TypeError(`${path.join(".") || "(root)"} is not a color, a string, an array or an object`);
+	};
+	walk(tree, []);
+	return out;
+}
+/** `primaryContainer` and `Primary Container` both become `primary-container`. */
+const kebab = (name) => name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[^a-zA-Z0-9]+/g, "-").replace(/^-+|-+$/g, "").toLowerCase();
+/** Names tokens for CSS: kebab-case segments joined by `-` after `prefix`. Two tokens with one name throw. */
+function cssNames(tokens, prefix) {
+	const out = /* @__PURE__ */ new Map();
+	for (const { path, color } of tokens) {
+		const name = `--${[prefix, ...path].map(kebab).filter(Boolean).join("-")}`;
+		if (out.has(name)) throw new Error(`${name} is produced by more than one token`);
+		out.set(name, color);
+	}
+	return out;
+}
+export { cssNames, flatten, kebab };
+
+//# sourceMappingURL=tokens.js.map

package/esm/tokens/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/tokens/tokens.ts"],"sourcesContent":["import { parse } from '../color/parse.js'\nimport type { Color } from '../color/types.js'\nimport type { SemanticPalette } from '../palette/semantic.js'\n\n/**\n * What the exporters accept: a color, a CSS color string, an array of them (a\n * scale), or an object of any of these nested to any depth. A `SemanticPalette`\n * works as is: its `scales` and its role pairs export, its `meta` and ratios do not.\n */\nexport type TokenTree = SemanticPalette | Color | string | readonly TokenTree[] | { readonly [name: string]: TokenTree }\n\n/** A color and the path of names that leads to it. */\nexport interface Token {\n\tpath: string[]\n\tcolor: Color\n}\n\nconst TAILWIND_STEPS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]\n\nconst isColor = (v: unknown): v is Color =>\n\ttypeof v === 'object' &&\n\tv !== null &&\n\ttypeof (v as Color).colorSpace === 'string' &&\n\tArray.isArray((v as Color).components)\n\n// A semantic palette carries numbers (`ratio`, `target`, `meta`) that are not colors.\nfunction dropMeasures(tree: Record<string, unknown>): Record<string, unknown> {\n\tconst { meta: _meta, scales, roles, ...rest } = tree\n\tconst pairs = Object.fromEntries(\n\t\tObject.entries(roles as Record<string, { bg: Color; fg: Color }>).map(([name, p]) => [name, { bg: p.bg, fg: p.fg }])\n\t)\n\treturn { ...rest, ...(scales as object), roles: pairs }\n}\n\nconst isSemantic = (v: object): boolean => 'roles' in v && 'scales' in v && 'meta' in v\n\n/**\n * Walks a token tree into a flat list. An array gets the Tailwind keys\n * (50 to 950) when it has 11 colors and 1-based numbers otherwise; pass an\n * object to choose the keys. A value that is not a color, a string, an array\n * or an object throws with its path.\n */\nexport function flatten(tree: TokenTree): Token[] {\n\tconst out: Token[] = []\n\tconst walk = (node: unknown, path: string[]): void => {\n\t\tif (typeof node === 'string') return void out.push({ path, color: parse(node) })\n\t\tif (isColor(node)) return void out.push({ path, color: node })\n\t\tif (Array.isArray(node)) {\n\t\t\tnode.forEach((v, i) => {\n\t\t\t\twalk(v, [...path, String(node.length === TAILWIND_STEPS.length ? TAILWIND_STEPS[i] : i + 1)])\n\t\t\t})\n\t\t\treturn\n\t\t}\n\t\tif (typeof node === 'object' && node !== null) {\n\t\t\tconst obj = isSemantic(node) ? dropMeasures(node as Record<string, unknown>) : (node as Record<string, unknown>)\n\t\t\tfor (const [k, v] of Object.entries(obj)) walk(v, [...path, k])\n\t\t\treturn\n\t\t}\n\t\tthrow new TypeError(`${path.join('.') || '(root)'} is not a color, a string, an array or an object`)\n\t}\n\twalk(tree, [])\n\treturn out\n}\n\n/** `primaryContainer` and `Primary Container` both become `primary-container`. */\nexport const kebab = (name: string): string =>\n\tname\n\t\t.replace(/([a-z0-9])([A-Z])/g, '$1-$2')\n\t\t.replace(/[^a-zA-Z0-9]+/g, '-')\n\t\t.replace(/^-+|-+$/g, '')\n\t\t.toLowerCase()\n\n/** Names tokens for CSS: kebab-case segments joined by `-` after `prefix`. Two tokens with one name throw. */\nexport function cssNames(tokens: Token[], prefix: string): Map<string, Color> {\n\tconst out = new Map<string, Color>()\n\tfor (const { path, color } of tokens) {\n\t\tconst name = `--${[prefix, ...path].map(kebab).filter(Boolean).join('-')}`\n\t\tif (out.has(name)) throw new Error(`${name} is produced by more than one token`)\n\t\tout.set(name, color)\n\t}\n\treturn out\n}\n"],"mappings":";;AAiBA,MAAM,iBAAiB;CAAC;CAAI;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;AAAG;AAE5E,MAAM,WAAW,MAChB,OAAO,MAAM,YACb,MAAM,QACN,OAAQ,EAAY,eAAe,YACnC,MAAM,QAAS,EAAY,UAAU;AAGtC,SAAS,aAAa,MAAwD;CAC7E,MAAM,EAAE,MAAM,OAAO,QAAQ,OAAO,GAAG,SAAS;CAChD,MAAM,QAAQ,OAAO,YACpB,OAAO,QAAQ,KAAiD,CAAC,CAAC,KAAK,CAAC,MAAM,OAAO,CAAC,MAAM;EAAE,IAAI,EAAE;EAAI,IAAI,EAAE;CAAG,CAAC,CAAC,CACpH;CACA,OAAO;EAAE,GAAG;EAAM,GAAI;EAAmB,OAAO;CAAM;AACvD;AAEA,MAAM,cAAc,MAAuB,WAAW,KAAK,YAAY,KAAK,UAAU;;;;;;;AAQtF,SAAgB,QAAQ,MAA0B;CACjD,MAAM,MAAe,CAAC;CACtB,MAAM,QAAQ,MAAe,SAAyB;EACrD,IAAI,OAAO,SAAS,UAAU,OAAO,KAAK,IAAI,KAAK;GAAE;GAAM,OAAO,MAAM,IAAI;EAAE,CAAC;EAC/E,IAAI,QAAQ,IAAI,GAAG,OAAO,KAAK,IAAI,KAAK;GAAE;GAAM,OAAO;EAAK,CAAC;EAC7D,IAAI,MAAM,QAAQ,IAAI,GAAG;GACxB,KAAK,SAAS,GAAG,MAAM;IACtB,KAAK,GAAG,CAAC,GAAG,MAAM,OAAO,KAAK,WAAW,eAAe,SAAS,eAAe,KAAK,IAAI,CAAC,CAAC,CAAC;GAC7F,CAAC;GACD;EACD;EACA,IAAI,OAAO,SAAS,YAAY,SAAS,MAAM;GAC9C,MAAM,MAAM,WAAW,IAAI,IAAI,aAAa,IAA+B,IAAK;GAChF,KAAK,MAAM,CAAC,GAAG,MAAM,OAAO,QAAQ,GAAG,GAAG,KAAK,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC;GAC9D;EACD;EACA,MAAM,IAAI,UAAU,GAAG,KAAK,KAAK,GAAG,KAAK,SAAS,iDAAiD;CACpG;CACA,KAAK,MAAM,CAAC,CAAC;CACb,OAAO;AACR;;AAGA,MAAa,SAAS,SACrB,KACE,QAAQ,sBAAsB,OAAO,CAAC,CACtC,QAAQ,kBAAkB,GAAG,CAAC,CAC9B,QAAQ,YAAY,EAAE,CAAC,CACvB,YAAY;;AAGf,SAAgB,SAAS,QAAiB,QAAoC;CAC7E,MAAM,sBAAM,IAAI,IAAmB;CACnC,KAAK,MAAM,EAAE,MAAM,WAAW,QAAQ;EACrC,MAAM,OAAO,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EACvE,IAAI,IAAI,IAAI,IAAI,GAAG,MAAM,IAAI,MAAM,GAAG,KAAK,oCAAoC;EAC/E,IAAI,IAAI,MAAM,KAAK;CACpB;CACA,OAAO;AACR"}