@tenphi/tasty 0.0.0-snapshot.27b6708 → 0.0.0-snapshot.28eb83c

package/dist/chunks/dsl-CXvoaLnj.js

@@ -0,0 +1,2097 @@
+import { a as warnOnceDev, o as isDevEnv } from "./shared-utils-OIg0N_dp.js";
+//#region src/parser/const.ts
+const VALUE_KEYWORDS = new Set([
+	"auto",
+	"max-content",
+	"min-content",
+	"fit-content",
+	"stretch",
+	"initial",
+	"inherit",
+	"revert",
+	"unset",
+	"revert-layer"
+]);
+const CSS_WIDE_KEYWORDS = new Set([
+	"initial",
+	"inherit",
+	"revert",
+	"unset",
+	"revert-layer"
+]);
+/**
+* Color functions that *derive* a color from other colors. They take no alpha
+* channel, so opacity has to wrap the whole call in `color-mix()` instead of
+* being appended after a slash.
+*/
+const DERIVED_COLOR_FUNCS_LIST = [
+	"color-mix",
+	"color-contrast",
+	"contrast-color",
+	"light-dark"
+];
+const DERIVED_COLOR_FUNCS = new Set(DERIVED_COLOR_FUNCS_LIST);
+/**
+* Every color function the parser recognizes. The ones outside
+* `DERIVED_COLOR_FUNCS` take channels as arguments, optionally followed by
+* `/ <alpha>` — which is where an opacity suffix writes.
+*/
+const COLOR_FUNCS = new Set([
+	"rgb",
+	"rgba",
+	"hsl",
+	"hsla",
+	"hwb",
+	"lab",
+	"lch",
+	"oklab",
+	"oklch",
+	"color",
+	"device-cmyk",
+	"gray",
+	...DERIVED_COLOR_FUNCS_LIST
+]);
+/** A value that is a single `name(args)` call: captures the name and the args. */
+const RE_FUNC_CALL = /^([a-z][a-z0-9-]*)\((.+)\)$/i;
+const RE_UNIT_NUM = /^[+-]?(?:\d*\.\d+|\d+)([a-z][a-z0-9]*)$/;
+const RE_NUMBER = /^[+-]?(?:\d*\.\d+|\d+)$/;
+const RE_HEX = /^(?:[0-9a-f]{3,4}|[0-9a-f]{6}(?:[0-9a-f]{2})?)$/;
+const RE_RAW_UNIT = /^([+-]?(?:\d*\.\d+|\d+))([a-z%]+)$/;
+const CANONICAL_FUNC_CASE = new Map([
+	["translatex", "translateX"],
+	["translatey", "translateY"],
+	["translatez", "translateZ"],
+	["scalex", "scaleX"],
+	["scaley", "scaleY"],
+	["scalez", "scaleZ"],
+	["rotatex", "rotateX"],
+	["rotatey", "rotateY"],
+	["rotatez", "rotateZ"],
+	["skewx", "skewX"],
+	["skewy", "skewY"]
+]);
+function canonicalFuncName(lowered) {
+	return CANONICAL_FUNC_CASE.get(lowered) ?? lowered;
+}
+//#endregion
+//#region src/utils/string.ts
+function toSnakeCase(str) {
+	return str.replace(/[A-Z]/g, (s) => `-${s.toLowerCase()}`);
+}
+/**
+* Normalize a DSL identifier to the CSS custom-property name it emits.
+*
+* CSS custom-property names are case-sensitive, so `$myVar` has to keep its
+* inner case to reference `--myVar`. A leading capital is the one exception:
+* `$Foo` is not a supported way to name a property, so the first character is
+* folded rather than kebab-cased (`--foo`, not `---foo`) and every later
+* character is left alone.
+*
+* Every place that turns a `$name` / `#name` identifier into a CSS name goes
+* through this, so authoring a token and referencing it always agree.
+*/
+function normalizeDslName(name) {
+	if (!name) return name;
+	const first = name[0];
+	const lower = first.toLowerCase();
+	return lower === first ? name : lower + name.slice(1);
+}
+/** A DSL identifier: `$name`, `$$name`, `#name` or `##name`. */
+const RE_DSL_IDENTIFIER = /(\$\$?|##?)([a-zA-Z_][a-zA-Z0-9_-]*)/g;
+/**
+* Case-fold a DSL string for parsing, preserving the case of custom-property
+* names.
+*
+* Everything the parser matches on — keywords, units, modifiers, function names,
+* color-token names — is compared lowercase, so the whole string used to be
+* lowercased up front. That also folded custom-property names, which are
+* case-sensitive in CSS: `$myVar` referenced `var(--myvar)` while the token
+* definition emitted `--myVar`, so the two could never meet.
+*
+* Identifier bodies now keep their case (their first character still folds, see
+* {@link normalizeDslName}); everything else is lowercased exactly as before.
+* Hex literals are excluded — `#FF0000` is a color, not a name, and must fold to
+* match {@link RE_HEX}.
+*/
+function foldDslCase(src) {
+	const folded = src.toLowerCase();
+	if (folded === src || !src.includes("$") && !src.includes("#")) return folded;
+	RE_DSL_IDENTIFIER.lastIndex = 0;
+	let out = "";
+	let last = 0;
+	let match;
+	while (match = RE_DSL_IDENTIFIER.exec(src)) {
+		const [whole, prefix, body] = match;
+		out += src.slice(last, match.index).toLowerCase();
+		out += prefix + (prefix[0] === "#" && RE_HEX.test(body.toLowerCase()) ? body.toLowerCase() : normalizeDslName(body));
+		last = match.index + whole.length;
+	}
+	return out + src.slice(last).toLowerCase();
+}
+//#endregion
+//#region src/utils/color-math.ts
+const OKLab_to_LMS_M = [
+	[
+		1,
+		.3963377773761749,
+		.2158037573099136
+	],
+	[
+		1,
+		-.1055613458156586,
+		-.0638541728258133
+	],
+	[
+		1,
+		-.0894841775298119,
+		-1.2914855480194092
+	]
+];
+const LMS_to_linear_sRGB_M = [
+	[
+		4.076741636075959,
+		-3.307711539258062,
+		.2309699031821041
+	],
+	[
+		-1.2684379732850313,
+		2.6097573492876878,
+		-.3413193760026569
+	],
+	[
+		-.004196076138675526,
+		-.703418617935936,
+		1.7076146940746113
+	]
+];
+const OKLab_to_linear_sRGB_coefficients = [
+	[[-1.8817030993265873, -.8093650129914302], [
+		1.19086277,
+		1.76576728,
+		.59662641,
+		.75515197,
+		.56771245
+	]],
+	[[1.8144407988010998, -1.194452667805235], [
+		.73956515,
+		-.45954404,
+		.08285427,
+		.1254107,
+		.14503204
+	]],
+	[[.13110757611180954, 1.813339709266608], [
+		1.35733652,
+		-.00915799,
+		-1.1513021,
+		-.50559606,
+		.00692167
+	]]
+];
+const dotXY = (a, b) => a[0] * b[0] + a[1] * b[1];
+const INV_GAMMA = 1 / 2.4;
+function srgbLinearToGamma(val) {
+	const sign = val < 0 ? -1 : 1;
+	const abs = Math.abs(val);
+	return abs > .0031308 ? sign * (1.055 * abs ** INV_GAMMA - .055) : 12.92 * val;
+}
+const TAU = 2 * Math.PI;
+const K1 = .206;
+const K2 = .03;
+const K3 = 1.206 / 1.03;
+const clamp$1 = (value, min, max) => Math.max(Math.min(value, max), min);
+const constrainAngle = (angle) => (angle % 360 + 360) % 360;
+const toe = (x) => .5 * (K3 * x - K1 + Math.sqrt((K3 * x - K1) * (K3 * x - K1) + 4 * K2 * K3 * x));
+const toeInv = (x) => (x ** 2 + K1 * x) / (K3 * (x + K2));
+const OKHST_REF_EPS = .05;
+function yToL(y) {
+	return toe(Math.cbrt(Math.max(0, y)));
+}
+function yFromTone(t, eps = OKHST_REF_EPS) {
+	const den = Math.log(1 + eps) - Math.log(eps);
+	return Math.exp(t / 100 * den + Math.log(eps)) - eps;
+}
+function fromTone(t, eps = OKHST_REF_EPS) {
+	return yToL(yFromTone(t, eps));
+}
+const oklabToLinearSrgb = (lab) => {
+	const L = lab[0];
+	const a = lab[1];
+	const b = lab[2];
+	const l_ = L + .3963377773761749 * a + .2158037573099136 * b;
+	const m_ = L - .1055613458156586 * a - .0638541728258133 * b;
+	const s_ = L - .0894841775298119 * a - 1.2914855480194092 * b;
+	const l = l_ * l_ * l_;
+	const m = m_ * m_ * m_;
+	const s = s_ * s_ * s_;
+	return [
+		4.076741636075959 * l - 3.307711539258062 * m + .2309699031821041 * s,
+		-1.2684379732850313 * l + 2.6097573492876878 * m - .3413193760026569 * s,
+		-.004196076138675526 * l - .703418617935936 * m + 1.7076146940746113 * s
+	];
+};
+const computeMaxSaturationOKLC = (a, b) => {
+	const okCoeff = OKLab_to_linear_sRGB_coefficients;
+	const lmsToRgb = LMS_to_linear_sRGB_M;
+	const tmp2 = [a, b];
+	const tmp3 = [
+		0,
+		a,
+		b
+	];
+	let chnlCoeff;
+	let chnlLMS;
+	if (dotXY(okCoeff[0][0], tmp2) > 1) {
+		chnlCoeff = okCoeff[0][1];
+		chnlLMS = lmsToRgb[0];
+	} else if (dotXY(okCoeff[1][0], tmp2) > 1) {
+		chnlCoeff = okCoeff[1][1];
+		chnlLMS = lmsToRgb[1];
+	} else {
+		chnlCoeff = okCoeff[2][1];
+		chnlLMS = lmsToRgb[2];
+	}
+	const [k0, k1, k2, k3, k4] = chnlCoeff;
+	const [wl, wm, ws] = chnlLMS;
+	let sat = k0 + k1 * a + k2 * b + k3 * (a * a) + k4 * a * b;
+	const dotYZ = (mat, vec) => mat[1] * vec[1] + mat[2] * vec[2];
+	const kl = dotYZ(OKLab_to_LMS_M[0], tmp3);
+	const km = dotYZ(OKLab_to_LMS_M[1], tmp3);
+	const ks = dotYZ(OKLab_to_LMS_M[2], tmp3);
+	const l_ = 1 + sat * kl;
+	const m_ = 1 + sat * km;
+	const s_ = 1 + sat * ks;
+	const l = l_ ** 3;
+	const m = m_ ** 3;
+	const s = s_ ** 3;
+	const lds = 3 * kl * (l_ * l_);
+	const mds = 3 * km * (m_ * m_);
+	const sds = 3 * ks * (s_ * s_);
+	const lds2 = 6 * (kl * kl) * l_;
+	const mds2 = 6 * (km * km) * m_;
+	const sds2 = 6 * (ks * ks) * s_;
+	const f = wl * l + wm * m + ws * s;
+	const f1 = wl * lds + wm * mds + ws * sds;
+	const f2 = wl * lds2 + wm * mds2 + ws * sds2;
+	sat = sat - f * f1 / (f1 * f1 - .5 * f * f2);
+	return sat;
+};
+const findCuspOKLCH = (a, b) => {
+	const S_cusp = computeMaxSaturationOKLC(a, b);
+	const rgb_at_max = oklabToLinearSrgb([
+		1,
+		S_cusp * a,
+		S_cusp * b
+	]);
+	const L_cusp = Math.cbrt(1 / Math.max(Math.max(rgb_at_max[0], rgb_at_max[1]), Math.max(rgb_at_max[2], 0)));
+	return [L_cusp, L_cusp * S_cusp];
+};
+const findGamutIntersectionOKLCH = (a, b, l1, c1, l0, cusp) => {
+	const lmsToRgb = LMS_to_linear_sRGB_M;
+	const tmp3 = [
+		0,
+		a,
+		b
+	];
+	const floatMax = Number.MAX_VALUE;
+	let t;
+	const dotYZ = (mat, vec) => mat[1] * vec[1] + mat[2] * vec[2];
+	const dotXYZ = (vec, x, y, z) => vec[0] * x + vec[1] * y + vec[2] * z;
+	if ((l1 - l0) * cusp[1] - (cusp[0] - l0) * c1 <= 0) {
+		const denom = c1 * cusp[0] + cusp[1] * (l0 - l1);
+		t = denom === 0 ? 0 : cusp[1] * l0 / denom;
+	} else {
+		const denom = c1 * (cusp[0] - 1) + cusp[1] * (l0 - l1);
+		t = denom === 0 ? 0 : cusp[1] * (l0 - 1) / denom;
+		const dl = l1 - l0;
+		const dc = c1;
+		const kl = dotYZ(OKLab_to_LMS_M[0], tmp3);
+		const km = dotYZ(OKLab_to_LMS_M[1], tmp3);
+		const ks = dotYZ(OKLab_to_LMS_M[2], tmp3);
+		const ldt_ = dl + dc * kl;
+		const mdt_ = dl + dc * km;
+		const sdt_ = dl + dc * ks;
+		const L = l0 * (1 - t) + t * l1;
+		const C = t * c1;
+		const l_ = L + C * kl;
+		const m_ = L + C * km;
+		const s_ = L + C * ks;
+		const l = l_ ** 3;
+		const m = m_ ** 3;
+		const s = s_ ** 3;
+		const ldt = 3 * ldt_ * l_ * l_;
+		const mdt = 3 * mdt_ * m_ * m_;
+		const sdt = 3 * sdt_ * s_ * s_;
+		const ldt2 = 6 * ldt_ * ldt_ * l_;
+		const mdt2 = 6 * mdt_ * mdt_ * m_;
+		const sdt2 = 6 * sdt_ * sdt_ * s_;
+		const r_ = dotXYZ(lmsToRgb[0], l, m, s) - 1;
+		const r1 = dotXYZ(lmsToRgb[0], ldt, mdt, sdt);
+		const r2 = dotXYZ(lmsToRgb[0], ldt2, mdt2, sdt2);
+		const ur = r1 / (r1 * r1 - .5 * r_ * r2);
+		let tr = -r_ * ur;
+		const g_ = dotXYZ(lmsToRgb[1], l, m, s) - 1;
+		const g1 = dotXYZ(lmsToRgb[1], ldt, mdt, sdt);
+		const g2 = dotXYZ(lmsToRgb[1], ldt2, mdt2, sdt2);
+		const ug = g1 / (g1 * g1 - .5 * g_ * g2);
+		let tg = -g_ * ug;
+		const b_ = dotXYZ(lmsToRgb[2], l, m, s) - 1;
+		const b1 = dotXYZ(lmsToRgb[2], ldt, mdt, sdt);
+		const b2 = dotXYZ(lmsToRgb[2], ldt2, mdt2, sdt2);
+		const ub = b1 / (b1 * b1 - .5 * b_ * b2);
+		let tb = -b_ * ub;
+		tr = ur >= 0 ? tr : floatMax;
+		tg = ug >= 0 ? tg : floatMax;
+		tb = ub >= 0 ? tb : floatMax;
+		t += Math.min(tr, Math.min(tg, tb));
+	}
+	return t;
+};
+const computeSt = (cusp) => [cusp[1] / cusp[0], cusp[1] / (1 - cusp[0])];
+const computeStMid = (a, b) => [.11516993 + 1 / (7.4477897 + 4.1590124 * b + a * (-2.19557347 + 1.75198401 * b + a * (-2.13704948 - 10.02301043 * b + a * (-4.24894561 + 5.38770819 * b + 4.69891013 * a)))), .11239642 + 1 / (1.6132032 - .68124379 * b + a * (.40370612 + .90148123 * b + a * (-.27087943 + .6122399 * b + a * (.00299215 - .45399568 * b - .14661872 * a))))];
+const getCs = (L, a, b, cusp) => {
+	const cMax = findGamutIntersectionOKLCH(a, b, L, 1, L, cusp);
+	const stMax = computeSt(cusp);
+	const k = cMax / Math.min(L * stMax[0], (1 - L) * stMax[1]);
+	const stMid = computeStMid(a, b);
+	let ca = L * stMid[0];
+	let cb = (1 - L) * stMid[1];
+	const cMid = .9 * k * Math.sqrt(Math.sqrt(1 / (1 / ca ** 4 + 1 / cb ** 4)));
+	ca = L * .4;
+	cb = (1 - L) * .8;
+	return [
+		Math.sqrt(1 / (1 / ca ** 2 + 1 / cb ** 2)),
+		cMid,
+		cMax
+	];
+};
+const okhslToOklab = (hsl) => {
+	let h = hsl[0];
+	const s = hsl[1];
+	const l = hsl[2];
+	const L = toeInv(l);
+	let a = 0;
+	let b = 0;
+	h = constrainAngle(h) / 360;
+	if (L !== 0 && L !== 1 && s !== 0) {
+		const a_ = Math.cos(TAU * h);
+		const b_ = Math.sin(TAU * h);
+		const [c0, cMid, cMax] = getCs(L, a_, b_, findCuspOKLCH(a_, b_));
+		const mid = .8;
+		const midInv = 1.25;
+		let t, k0, k1, k2;
+		if (s < mid) {
+			t = midInv * s;
+			k0 = 0;
+			k1 = mid * c0;
+			k2 = 1 - k1 / cMid;
+		} else {
+			t = 5 * (s - .8);
+			k0 = cMid;
+			k1 = .2 * cMid ** 2 * 1.25 ** 2 / c0;
+			k2 = 1 - k1 / (cMax - cMid);
+		}
+		const c = k0 + t * k1 / (1 - k2 * t);
+		a = c * a_;
+		b = c * b_;
+	}
+	return [
+		L,
+		a,
+		b
+	];
+};
+/**
+* HSL to RGB.
+* Algorithm from CSS Color 4 spec.
+*
+* @param h - Hue in degrees (0-360)
+* @param s - Saturation (0-1)
+* @param l - Lightness (0-1)
+* @returns RGB values in 0-255 range (may have fractional values)
+*/
+function hslToRgbValues(h, s, l) {
+	const a = s * Math.min(l, 1 - l);
+	const f = (n) => {
+		const k = (n + h / 30) % 12;
+		return l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+	};
+	return [
+		f(0) * 255,
+		f(8) * 255,
+		f(4) * 255
+	];
+}
+/**
+* OKHSL to sRGB (0-1 range).
+* @param h - Hue in degrees (0-360)
+* @param s - Saturation (0-1)
+* @param l - Lightness (0-1)
+* @returns sRGB values in 0-1 range, clamped to gamut
+*/
+function okhslToSrgb(h, s, l) {
+	const linearRGB = oklabToLinearSrgb(okhslToOklab([
+		h,
+		s,
+		l
+	]));
+	return [
+		clamp$1(srgbLinearToGamma(linearRGB[0]), 0, 1),
+		clamp$1(srgbLinearToGamma(linearRGB[1]), 0, 1),
+		clamp$1(srgbLinearToGamma(linearRGB[2]), 0, 1)
+	];
+}
+/**
+* OKHST to sRGB (0-1 range).
+* @param h - Hue in degrees (0-360)
+* @param s - Saturation (0-1)
+* @param t - Tone (0-1)
+* @returns sRGB values in 0-1 range, clamped to gamut
+*/
+function okhstToSrgb(h, s, t) {
+	return okhslToSrgb(h, clamp$1(s, 0, 1), clamp$1(fromTone(t * 100), 0, 1));
+}
+/**
+* OKLCH to sRGB (0-255 range).
+* @param L - Lightness (0-1)
+* @param C - Chroma (typically 0-0.4)
+* @param H - Hue in degrees (0-360)
+* @returns RGB values in 0-255 range, clamped to gamut
+*/
+function oklchToRgbValues(L, C, H) {
+	const hRad = H * Math.PI / 180;
+	const linear = oklabToLinearSrgb([
+		L,
+		C * Math.cos(hRad),
+		C * Math.sin(hRad)
+	]);
+	return [
+		clamp$1(srgbLinearToGamma(linear[0]), 0, 1) * 255,
+		clamp$1(srgbLinearToGamma(linear[1]), 0, 1) * 255,
+		clamp$1(srgbLinearToGamma(linear[2]), 0, 1) * 255
+	];
+}
+let _namedColorHex = null;
+function getNamedColorHex() {
+	if (_namedColorHex) return _namedColorHex;
+	_namedColorHex = new Map([
+		["aliceblue", "#f0f8ff"],
+		["antiquewhite", "#faebd7"],
+		["aqua", "#00ffff"],
+		["aquamarine", "#7fffd4"],
+		["azure", "#f0ffff"],
+		["beige", "#f5f5dc"],
+		["bisque", "#ffe4c4"],
+		["black", "#000000"],
+		["blanchedalmond", "#ffebcd"],
+		["blue", "#0000ff"],
+		["blueviolet", "#8a2be2"],
+		["brown", "#a52a2a"],
+		["burlywood", "#deb887"],
+		["cadetblue", "#5f9ea0"],
+		["chartreuse", "#7fff00"],
+		["chocolate", "#d2691e"],
+		["coral", "#ff7f50"],
+		["cornflowerblue", "#6495ed"],
+		["cornsilk", "#fff8dc"],
+		["crimson", "#dc143c"],
+		["cyan", "#00ffff"],
+		["darkblue", "#00008b"],
+		["darkcyan", "#008b8b"],
+		["darkgoldenrod", "#b8860b"],
+		["darkgray", "#a9a9a9"],
+		["darkgreen", "#006400"],
+		["darkgrey", "#a9a9a9"],
+		["darkkhaki", "#bdb76b"],
+		["darkmagenta", "#8b008b"],
+		["darkolivegreen", "#556b2f"],
+		["darkorange", "#ff8c00"],
+		["darkorchid", "#9932cc"],
+		["darkred", "#8b0000"],
+		["darksalmon", "#e9967a"],
+		["darkseagreen", "#8fbc8f"],
+		["darkslateblue", "#483d8b"],
+		["darkslategray", "#2f4f4f"],
+		["darkslategrey", "#2f4f4f"],
+		["darkturquoise", "#00ced1"],
+		["darkviolet", "#9400d3"],
+		["deeppink", "#ff1493"],
+		["deepskyblue", "#00bfff"],
+		["dimgray", "#696969"],
+		["dimgrey", "#696969"],
+		["dodgerblue", "#1e90ff"],
+		["firebrick", "#b22222"],
+		["floralwhite", "#fffaf0"],
+		["forestgreen", "#228b22"],
+		["fuchsia", "#ff00ff"],
+		["gainsboro", "#dcdcdc"],
+		["ghostwhite", "#f8f8ff"],
+		["gold", "#ffd700"],
+		["goldenrod", "#daa520"],
+		["gray", "#808080"],
+		["green", "#008000"],
+		["greenyellow", "#adff2f"],
+		["grey", "#808080"],
+		["honeydew", "#f0fff0"],
+		["hotpink", "#ff69b4"],
+		["indianred", "#cd5c5c"],
+		["indigo", "#4b0082"],
+		["ivory", "#fffff0"],
+		["khaki", "#f0e68c"],
+		["lavender", "#e6e6fa"],
+		["lavenderblush", "#fff0f5"],
+		["lawngreen", "#7cfc00"],
+		["lemonchiffon", "#fffacd"],
+		["lightblue", "#add8e6"],
+		["lightcoral", "#f08080"],
+		["lightcyan", "#e0ffff"],
+		["lightgoldenrodyellow", "#fafad2"],
+		["lightgray", "#d3d3d3"],
+		["lightgreen", "#90ee90"],
+		["lightgrey", "#d3d3d3"],
+		["lightpink", "#ffb6c1"],
+		["lightsalmon", "#ffa07a"],
+		["lightseagreen", "#20b2aa"],
+		["lightskyblue", "#87cefa"],
+		["lightslategray", "#778899"],
+		["lightslategrey", "#778899"],
+		["lightsteelblue", "#b0c4de"],
+		["lightyellow", "#ffffe0"],
+		["lime", "#00ff00"],
+		["limegreen", "#32cd32"],
+		["linen", "#faf0e6"],
+		["magenta", "#ff00ff"],
+		["maroon", "#800000"],
+		["mediumaquamarine", "#66cdaa"],
+		["mediumblue", "#0000cd"],
+		["mediumorchid", "#ba55d3"],
+		["mediumpurple", "#9370db"],
+		["mediumseagreen", "#3cb371"],
+		["mediumslateblue", "#7b68ee"],
+		["mediumspringgreen", "#00fa9a"],
+		["mediumturquoise", "#48d1cc"],
+		["mediumvioletred", "#c71585"],
+		["midnightblue", "#191970"],
+		["mintcream", "#f5fffa"],
+		["mistyrose", "#ffe4e1"],
+		["moccasin", "#ffe4b5"],
+		["navajowhite", "#ffdead"],
+		["navy", "#000080"],
+		["oldlace", "#fdf5e6"],
+		["olive", "#808000"],
+		["olivedrab", "#6b8e23"],
+		["orange", "#ffa500"],
+		["orangered", "#ff4500"],
+		["orchid", "#da70d6"],
+		["palegoldenrod", "#eee8aa"],
+		["palegreen", "#98fb98"],
+		["paleturquoise", "#afeeee"],
+		["palevioletred", "#db7093"],
+		["papayawhip", "#ffefd5"],
+		["peachpuff", "#ffdab9"],
+		["peru", "#cd853f"],
+		["pink", "#ffc0cb"],
+		["plum", "#dda0dd"],
+		["powderblue", "#b0e0e6"],
+		["purple", "#800080"],
+		["rebeccapurple", "#663399"],
+		["red", "#ff0000"],
+		["rosybrown", "#bc8f8f"],
+		["royalblue", "#4169e1"],
+		["saddlebrown", "#8b4513"],
+		["salmon", "#fa8072"],
+		["sandybrown", "#f4a460"],
+		["seagreen", "#2e8b57"],
+		["seashell", "#fff5ee"],
+		["sienna", "#a0522d"],
+		["silver", "#c0c0c0"],
+		["skyblue", "#87ceeb"],
+		["slateblue", "#6a5acd"],
+		["slategray", "#708090"],
+		["slategrey", "#708090"],
+		["snow", "#fffafa"],
+		["springgreen", "#00ff7f"],
+		["steelblue", "#4682b4"],
+		["tan", "#d2b48c"],
+		["teal", "#008080"],
+		["thistle", "#d8bfd8"],
+		["tomato", "#ff6347"],
+		["turquoise", "#40e0d0"],
+		["violet", "#ee82ee"],
+		["wheat", "#f5deb3"],
+		["white", "#ffffff"],
+		["whitesmoke", "#f5f5f5"],
+		["yellow", "#ffff00"],
+		["yellowgreen", "#9acd32"]
+	]);
+	return _namedColorHex;
+}
+/**
+* Convert hex color string to `rgb()` CSS string.
+* Supports 3, 4, 6, and 8 character hex values (with or without `#`).
+*/
+function hexToRgb(hex) {
+	const matched = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (_m, r, g, b) => "#" + r + r + g + g + b + b).substring(1).match(/.{2}/g);
+	if (!matched) return null;
+	const rgba = matched.map((x, i) => parseInt(x, 16) * (i === 3 ? 1 / 255 : 1));
+	if (rgba.some((v) => Number.isNaN(v))) return null;
+	if (rgba.length >= 3) return `rgb(${rgba.slice(0, 3).join(" ")}${rgba.length > 3 ? ` / ${rgba[3]}` : ""})`;
+	return null;
+}
+/**
+* Extract RGB values from an `rgb()`/`rgba()` string.
+* Supports comma-separated, space-separated, fractional, percentage,
+* and slash alpha notation.
+*
+* @returns Array of RGB values (0-255 range), converting percentages as needed.
+*/
+function getRgbValuesFromRgbaString(str) {
+	const match = str.match(/rgba?\(([^)]+)\)/i);
+	if (!match) return [];
+	const [colorPart] = match[1].trim().split("/");
+	return colorPart.trim().split(/[,\s]+/).filter(Boolean).slice(0, 3).map((part) => {
+		part = part.trim();
+		if (part.endsWith("%")) return parseFloat(part) / 100 * 255;
+		return parseFloat(part);
+	});
+}
+/**
+* Convert any recognized color string to an `rgb()` CSS string.
+* Handles hex, `okhsl()`, `okhst()`, `hsl()`/`hsla()`, named CSS colors,
+* and `rgb()`/`rgba()` pass-through.
+*/
+function strToRgb(color, _ignoreAlpha = false) {
+	if (!color) return void 0;
+	if (color.startsWith("rgb")) return color;
+	if (color.startsWith("#")) return hexToRgb(color);
+	if (color.startsWith("oklch(")) return oklchStringToRgb(color);
+	if (color.startsWith("hsl")) return hslStringToRgb(color);
+	const namedHex = getNamedColorHex().get(color.toLowerCase());
+	if (namedHex) return hexToRgb(namedHex);
+	return null;
+}
+/**
+* Convert an HSL/HSLA color string to an `rgb()`/`rgba()` CSS string.
+* Supports modern space-separated and legacy comma-separated syntax,
+* deg/turn/rad hue units, and slash alpha notation.
+*/
+function hslStringToRgb(hslStr) {
+	const match = hslStr.match(/hsla?\(([^)]+)\)/i);
+	if (!match) return null;
+	const [colorPart, slashAlpha] = match[1].trim().split("/");
+	const parts = colorPart.trim().split(/[,\s]+/).filter(Boolean);
+	if (parts.length < 3) return null;
+	const alphaPart = slashAlpha?.trim() || (parts.length >= 4 ? parts[3] : null);
+	let h = parseFloat(parts[0]);
+	const hueStr = parts[0].toLowerCase();
+	if (hueStr.endsWith("turn")) h = parseFloat(hueStr) * 360;
+	else if (hueStr.endsWith("rad")) h = parseFloat(hueStr) * 180 / Math.PI;
+	h = (h % 360 + 360) % 360;
+	const parsePercent = (val) => {
+		const num = parseFloat(val);
+		return val.includes("%") ? num / 100 : num;
+	};
+	const s = Math.max(0, Math.min(1, parsePercent(parts[1])));
+	const l = Math.max(0, Math.min(1, parsePercent(parts[2])));
+	const [r, g, b] = hslToRgbValues(h, s, l);
+	if (alphaPart) {
+		const alpha = parseFloat(alphaPart.trim());
+		return `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${alpha})`;
+	}
+	return `rgb(${Math.round(r)} ${Math.round(g)} ${Math.round(b)})`;
+}
+/**
+* Convert an `oklch()` color string to an `rgb()`/`rgba()` CSS string.
+* Supports deg/turn/rad hue units and percentage lightness.
+*/
+function oklchStringToRgb(oklchStr) {
+	const match = oklchStr.match(/oklch\(([^)]+)\)/i);
+	if (!match) return null;
+	const [colorPart, alphaPart] = match[1].trim().split("/");
+	const parts = colorPart.trim().split(/[,\s]+/).filter(Boolean);
+	if (parts.length < 3) return null;
+	const parsePercent = (val) => {
+		const num = parseFloat(val);
+		return val.includes("%") ? num / 100 : num;
+	};
+	const L = Math.max(0, Math.min(1, parsePercent(parts[0])));
+	const C = Math.max(0, parseFloat(parts[1]));
+	let H = parseFloat(parts[2]);
+	const hueStr = parts[2].toLowerCase();
+	if (hueStr.endsWith("turn")) H = parseFloat(hueStr) * 360;
+	else if (hueStr.endsWith("rad")) H = parseFloat(hueStr) * 180 / Math.PI;
+	else if (hueStr.endsWith("deg")) H = parseFloat(hueStr);
+	const [r, g, b] = oklchToRgbValues(L, C, H);
+	if (alphaPart) {
+		const alpha = parseFloat(alphaPart.trim());
+		return `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${alpha})`;
+	}
+	return `rgb(${Math.round(r)} ${Math.round(g)} ${Math.round(b)})`;
+}
+//#endregion
+//#region src/utils/color-space.ts
+/**
+* Set the alpha of a whole color, replacing any it already carries.
+*
+* CSS relative color syntax is how opacity is applied to every color Tasty
+* emits. `oklch(from <color> l c h / <alpha>)` copies the channels over and
+* writes the alpha slot, which needs nothing from the color except that it *is*
+* a color: a `color-mix()`, a `light-dark()`, a `currentcolor`, a
+* `--name-color` written by hand-authored CSS that Tasty never defined — all of
+* them work, where writing into a channel slot directly would require channels
+* the engine has no way to compute.
+*
+* Alpha is *replaced*, not composed. A token holding `rgb(255 0 0 / .8)` faded
+* to `.5` is alpha `.5`. `color-mix()` against `transparent` cannot do this —
+* it would multiply the two to `.4`.
+*
+* The alpha slot takes a `<number>` or a `<percentage>`, so an opacity custom
+* property passes straight through in whichever form the author declared it.
+*
+* The space is always `oklch`, regardless of the configured {@link ColorSpace}:
+* it is unbounded, so a wide-gamut color survives the round trip that a
+* gamut-limited space would clamp, and it is the space the computed value used
+* to be reported in. Channels are copied rather than interpolated, so the polar
+* form costs nothing even for an achromatic color, whose hue is carried through
+* untouched.
+*/
+function overrideColorAlpha(color, alpha) {
+	return `oklch(from ${color} l c h / ${alpha})`;
+}
+/**
+* Compose an alpha onto a color, multiplying with any it already carries.
+*
+* This is the counterpart to {@link overrideColorAlpha}, and the difference is
+* the point. A design token names a color, so fading it *sets* its alpha. But
+* `currentcolor` is the color an element **inherits**, which an ancestor may
+* already have faded — `#current.4` there means "40% of what reaches me", and a
+* nested `#current.18` under it composes to `.072`. Design systems build ramps
+* out of exactly that, so `#current` composes and a token replaces.
+*
+* `color-mix()` against `transparent` is what composes: mixing premultiplied
+* leaves the channels alone and multiplies the alphas. Its percentage slot takes
+* no `<number>`, so a `$prop` alpha has to be scaled — which is why an opacity
+* property used as `#current.$prop` has to hold a unitless number, where a token
+* accepts either form.
+*/
+function mixColorAlpha(color, percentage) {
+	return `color-mix(in oklab, ${color} ${percentage}, transparent)`;
+}
+/**
+* Matches what {@link overrideColorAlpha} builds. The first group is greedy so a
+* nested override splits on its outermost layer.
+*/
+const RE_ALPHA_OVERRIDE = /^oklch\(from (.+) l c h \/ (.+)\)$/;
+/**
+* Split what {@link overrideColorAlpha} builds back into the color it faded and
+* the alpha, or `null` when the value is not one of those.
+*/
+function parseAlphaOverride(value) {
+	const match = value.match(RE_ALPHA_OVERRIDE);
+	return match ? {
+		color: match[1],
+		alpha: match[2]
+	} : null;
+}
+//#endregion
+//#region src/parser/types.ts
+const makeEmptyPart = () => ({
+	mods: [],
+	values: [],
+	colors: [],
+	all: [],
+	output: ""
+});
+const makeEmptyDetails = () => ({
+	input: "",
+	output: "",
+	mods: [],
+	values: [],
+	colors: [],
+	all: [],
+	parts: []
+});
+const finalizePart = (p) => {
+	p.output = p.all.join(" ");
+	return p;
+};
+/**
+* Aggregate parts into a StyleDetails group.
+* Combines all parts' arrays into group-level arrays for backward compatibility.
+*/
+const finalizeGroup = (d, parts) => {
+	d.parts = parts;
+	for (const part of parts) {
+		d.mods.push(...part.mods);
+		d.values.push(...part.values);
+		d.colors.push(...part.colors);
+		d.all.push(...part.all);
+	}
+	d.output = parts.map((p) => p.output).join(" / ");
+	return d;
+};
+//#endregion
+//#region src/parser/classify.ts
+/**
+* Convert an opacity suffix to the alpha value it denotes.
+*
+* The authored digits are kept verbatim — `.07` stays `.07` rather than being
+* multiplied into `7.000000000000001%` — and a `$prop` suffix passes the
+* reference straight through, so it works whether the property holds a
+* `<number>` or a `<percentage>`. Both are what the alpha slot accepts.
+*/
+function alphaSuffixToAlpha(rawAlpha) {
+	if (rawAlpha.startsWith("$")) return `var(--${rawAlpha.slice(1)})`;
+	if (rawAlpha === "0") return "0";
+	return `.${rawAlpha}`;
+}
+/** Apply an opacity suffix to a color, replacing any alpha it already carries. */
+function fadeColor(color, rawAlpha) {
+	return overrideColorAlpha(color, alphaSuffixToAlpha(rawAlpha));
+}
+/**
+* Convert an opacity suffix to the percentage `color-mix()` needs, by shifting
+* the decimal point rather than multiplying: `.07` is `7%`, not the
+* `7.000000000000001%` that `parseFloat('.07') * 100` produces.
+*/
+function alphaSuffixToPercentage(rawAlpha) {
+	if (rawAlpha.startsWith("$")) return `calc(var(--${rawAlpha.slice(1)}) * 100%)`;
+	if (rawAlpha === "0") return "0%";
+	const digits = rawAlpha.length === 1 ? `${rawAlpha}0` : rawAlpha;
+	const whole = String(Number(digits.slice(0, 2)));
+	const fraction = digits.slice(2);
+	return `${fraction ? `${whole}.${fraction}` : whole}%`;
+}
+/**
+* Apply an opacity suffix to `currentcolor`, composing with any alpha an
+* ancestor already applied. See {@link mixColorAlpha} for why this differs from
+* how a token is faded.
+*/
+function fadeCurrentColor(rawAlpha) {
+	return mixColorAlpha("currentcolor", alphaSuffixToPercentage(rawAlpha));
+}
+/**
+* Whether parsed function arguments hold a color. Colors reach either the color
+* bucket (`#token`, a nested color function, `transparent`) or — for the CSS
+* named colors, which the parser has no token syntax for — the modifier bucket.
+*/
+function hasColorArgs(parsed) {
+	const namedColors = getNamedColorHex();
+	return parsed.groups.some((group) => group.colors.length > 0 || group.mods.some((mod) => namedColors.has(mod)));
+}
+/**
+* Re-parses a value through the parser until it stabilizes (no changes)
+* or max iterations reached. This allows units to reference other units.
+* Example: { x: '8px', y: '2x' } -> '1y' resolves to '16px'
+*/
+function resolveUntilStable(value, opts, recurse, maxIterations = 10) {
+	let current = value;
+	for (let i = 0; i < maxIterations; i++) {
+		const unitMatch = current.match(RE_UNIT_NUM);
+		if (!unitMatch) break;
+		const unitName = unitMatch[1];
+		if (!opts.units || !(unitName in opts.units)) break;
+		const result = recurse(current);
+		if (result.output === current) break;
+		current = result.output;
+	}
+	return current;
+}
+function classify(raw, opts, recurse) {
+	const token = raw.trim();
+	if (!token) return {
+		bucket: 2,
+		processed: ""
+	};
+	{
+		let depth = 0;
+		let inQuote = 0;
+		for (let i = 0; i < token.length; i++) {
+			const ch = token[i];
+			if (inQuote) {
+				if (ch === inQuote && token[i - 1] !== "\\") inQuote = 0;
+				continue;
+			}
+			if (ch === "\"" || ch === "'") {
+				inQuote = ch;
+				continue;
+			}
+			if (ch === "(") depth++;
+			else if (ch === ")") depth = Math.max(0, depth - 1);
+		}
+		if (depth !== 0) {
+			console.warn("[Tasty] skipped invalid function token with unmatched parentheses:", token);
+			return {
+				bucket: 2,
+				processed: ""
+			};
+		}
+	}
+	if (token.startsWith("\"") && token.endsWith("\"") || token.startsWith("'") && token.endsWith("'")) return {
+		bucket: 1,
+		processed: token
+	};
+	if (token.startsWith("$$")) {
+		const rest = token.slice(2);
+		const openIdx = rest.indexOf("(");
+		if (openIdx > 0 && rest.endsWith(")")) {
+			const fname = rest.slice(0, openIdx);
+			if (/^[a-z_][a-z0-9-_]*$/i.test(fname)) {
+				const inner = rest.slice(openIdx + 1, -1).trim();
+				const cssName = `--${fname}`;
+				if (opts.functions && cssName in opts.functions) {
+					const groups = inner ? new StyleParser(opts).process(inner).groups : [];
+					const funcResult = opts.functions[cssName](groups);
+					if (funcResult !== "") return classify(funcResult, {
+						...opts,
+						functions: void 0
+					}, recurse);
+				}
+				return {
+					bucket: 1,
+					processed: `--${fname}(${inner ? recurse(inner).output : ""})`
+				};
+			}
+		}
+		if (/^[a-z_][a-z0-9-_]*$/i.test(rest)) return {
+			bucket: 1,
+			processed: `--${rest}`
+		};
+	}
+	if (token.startsWith("##")) {
+		const rest = token.slice(2);
+		const openIdx = rest.indexOf("(");
+		if (openIdx > 0 && rest.endsWith(")")) {
+			const fname = rest.slice(0, openIdx);
+			if (/^[a-z_][a-z0-9-_]*$/i.test(fname)) {
+				const inner = rest.slice(openIdx + 1, -1).trim();
+				return {
+					bucket: 1,
+					processed: `--${fname}-color(${inner ? recurse(inner).output : ""})`
+				};
+			}
+		}
+		if (/^[a-z_][a-z0-9-_]*$/i.test(rest)) return {
+			bucket: 1,
+			processed: `--${rest}-color`
+		};
+	}
+	if (token === "#current") return {
+		bucket: 0,
+		processed: "currentcolor"
+	};
+	const currentAlphaMatch = token.match(/^#current\.(\$[a-z_][a-z0-9-_]*|[0-9]+)$/i);
+	if (currentAlphaMatch) return {
+		bucket: 0,
+		processed: fadeCurrentColor(currentAlphaMatch[1])
+	};
+	if (token[0] === "$" || token[0] === "#") {
+		const predefinedTokens = getGlobalPredefinedTokens();
+		if (predefinedTokens) {
+			const lookupKey = token.toLowerCase();
+			if (lookupKey in predefinedTokens) {
+				const tokenValue = predefinedTokens[lookupKey];
+				return classify(foldDslCase(tokenValue), opts, recurse);
+			}
+			if (token[0] === "#") {
+				const alphaMatch = token.match(/^(#[a-z0-9-]+)\.(\$[a-z_][a-z0-9-_]*|[0-9]+)$/i);
+				if (alphaMatch) {
+					const [, baseToken, rawAlpha] = alphaMatch;
+					const baseKey = baseToken.toLowerCase();
+					if (baseKey in predefinedTokens) {
+						const resolvedValue = predefinedTokens[baseKey];
+						if (resolvedValue.startsWith("#")) return classify(`${foldDslCase(resolvedValue)}.${rawAlpha}`, opts, recurse);
+						const funcMatch = resolvedValue.match(RE_FUNC_CALL);
+						if (funcMatch) {
+							const [, funcName, args] = funcMatch;
+							const lowerFunc = funcName.toLowerCase();
+							if (DERIVED_COLOR_FUNCS.has(lowerFunc)) return {
+								bucket: 0,
+								processed: fadeColor(classify(foldDslCase(resolvedValue), opts, recurse).processed, rawAlpha)
+							};
+							const isCustomFunc = !!(opts.functions && lowerFunc in opts.functions && !COLOR_FUNCS.has(lowerFunc) && !COLOR_FUNCS.has(funcName.replace(/a$/i, "").toLowerCase()));
+							const normalizedFunc = isCustomFunc ? lowerFunc : funcName.replace(/a$/i, "").toLowerCase();
+							if (!(COLOR_FUNCS.has(normalizedFunc) || COLOR_FUNCS.has(lowerFunc) || isCustomFunc)) return classify(`${resolvedValue}.${rawAlpha}`, opts, recurse);
+							let alpha;
+							if (rawAlpha.startsWith("$")) alpha = `var(--${rawAlpha.slice(1)})`;
+							else alpha = rawAlpha === "0" ? "0" : `.${rawAlpha}`;
+							const normalizeArgs = (a) => {
+								let result = "";
+								let depth = 0;
+								for (let i = 0; i < a.length; i++) {
+									const c = a[i];
+									if (c === "(") {
+										depth++;
+										result += c;
+									} else if (c === ")") {
+										depth = Math.max(0, depth - 1);
+										result += c;
+									} else if (c === "," && depth === 0) {
+										while (i + 1 < a.length && /\s/.test(a[i + 1])) i++;
+										result += " ";
+									} else result += c;
+								}
+								return result;
+							};
+							const findLastTopLevel = (str, ch) => {
+								let depth = 0;
+								for (let i = str.length - 1; i >= 0; i--) {
+									const c = str[i];
+									if (c === ")") depth++;
+									else if (c === "(") depth = Math.max(0, depth - 1);
+									else if (c === ch && depth === 0) return i;
+								}
+								return -1;
+							};
+							const slashIdx = findLastTopLevel(args, "/");
+							const hasModernAlpha = slashIdx !== -1;
+							let topLevelCommaCount = 0;
+							let lastTopLevelComma = -1;
+							{
+								let depth = 0;
+								for (let i = 0; i < args.length; i++) {
+									const c = args[i];
+									if (c === "(") depth++;
+									else if (c === ")") depth = Math.max(0, depth - 1);
+									else if (c === "," && depth === 0) {
+										topLevelCommaCount++;
+										lastTopLevelComma = i;
+									}
+								}
+							}
+							const hasLegacyAlpha = !hasModernAlpha && /a$/i.test(funcName) && topLevelCommaCount === 3;
+							const constructed = `${normalizedFunc}(${hasModernAlpha || hasLegacyAlpha ? normalizeArgs(hasModernAlpha ? args.slice(0, slashIdx).trim() : args.slice(0, lastTopLevelComma).trim()) : normalizeArgs(args)} / ${alpha})`;
+							if (!COLOR_FUNCS.has(normalizedFunc) && opts.functions && normalizedFunc in opts.functions) return classify(constructed, opts, recurse);
+							return {
+								bucket: 0,
+								processed: constructed
+							};
+						}
+						return classify(`${resolvedValue}.${rawAlpha}`, opts, recurse);
+					}
+				}
+			}
+		}
+	}
+	if (token.match(/^var\(--([a-zA-Z0-9-]+)-color\)$/)) return {
+		bucket: 0,
+		processed: token
+	};
+	if (token.startsWith("url(")) return {
+		bucket: 1,
+		processed: token
+	};
+	if (token[0] === "$") {
+		const identMatch = token.match(/^\$([a-z_][a-zA-Z0-9-_]*)$/);
+		if (identMatch) {
+			const name = identMatch[1];
+			const processed = `var(--${name})`;
+			return {
+				bucket: name.endsWith("-color") ? 3 : 1,
+				processed
+			};
+		}
+	}
+	if (token[0] === "#" && token.length > 1) {
+		const alphaMatch = token.match(/^#([a-z0-9-]+)\.(\$[a-z_][a-z0-9-_]*|[0-9]+)$/i);
+		if (alphaMatch) {
+			const [, base, rawAlpha] = alphaMatch;
+			return {
+				bucket: 0,
+				processed: fadeColor(`var(--${base}-color)`, rawAlpha)
+			};
+		}
+		const name = token.slice(1);
+		if (RE_HEX.test(name)) return {
+			bucket: 0,
+			processed: `var(--${name}-color, #${name})`
+		};
+		return {
+			bucket: 0,
+			processed: `var(--${name}-color)`
+		};
+	}
+	const openIdx = token.indexOf("(");
+	if (openIdx > 0 && token.endsWith(")")) {
+		const fname = token.slice(0, openIdx);
+		const inner = token.slice(openIdx + 1, -1);
+		if (COLOR_FUNCS.has(fname)) {
+			const parsedInner = recurse(inner);
+			const argProcessed = parsedInner.output.replace(/,\s+/g, ",");
+			const processed = `${canonicalFuncName(fname)}(${argProcessed})`;
+			return {
+				bucket: fname === "light-dark" && !hasColorArgs(parsedInner) ? 1 : 0,
+				processed
+			};
+		}
+		if (opts.functions && fname in opts.functions) {
+			const tmp = new StyleParser(opts).process(inner);
+			return classify(opts.functions[fname](tmp.groups), {
+				...opts,
+				functions: void 0
+			}, recurse);
+		}
+		const argProcessed = recurse(inner).output;
+		return {
+			bucket: 1,
+			processed: `${canonicalFuncName(fname)}(${argProcessed})`
+		};
+	}
+	if (token.startsWith("(") && token.endsWith(")")) {
+		const colorMatch = token.slice(1, -1).match(/^#([a-z0-9-]+)\s*,\s*(.*)$/i);
+		if (colorMatch) {
+			const [, name, fallback] = colorMatch;
+			return {
+				bucket: 0,
+				processed: `var(--${name}-color, ${recurse(fallback).output})`
+			};
+		}
+	}
+	if (token.startsWith("(") && token.endsWith(")")) {
+		const match = token.slice(1, -1).match(/^\$([a-z_][a-zA-Z0-9-_]*)\s*,\s*(.*)$/);
+		if (match) {
+			const [, name, fallback] = match;
+			const processedFallback = recurse(fallback).output;
+			return {
+				bucket: name.endsWith("-color") ? 3 : 1,
+				processed: `var(--${name}, ${processedFallback})`
+			};
+		}
+	}
+	if (token[0] === "(" && token[token.length - 1] === ")") return {
+		bucket: 1,
+		processed: `calc(${recurse(token.slice(1, -1)).output})`
+	};
+	const um = token.match(RE_UNIT_NUM);
+	if (um) {
+		const unit = um[1];
+		const numericPart = parseFloat(token.slice(0, -unit.length));
+		const handler = opts.units && opts.units[unit];
+		if (handler) if (typeof handler === "string") {
+			const rawMatch = handler.match(RE_RAW_UNIT);
+			if (rawMatch) {
+				const [, baseNum, cssUnit] = rawMatch;
+				return {
+					bucket: 1,
+					processed: resolveUntilStable(`${numericPart * parseFloat(baseNum)}${cssUnit}`, opts, recurse)
+				};
+			}
+			const base = handler;
+			if (numericPart === 1) return {
+				bucket: 1,
+				processed: base
+			};
+			return {
+				bucket: 1,
+				processed: `calc(${numericPart} * ${base})`
+			};
+		} else return {
+			bucket: 1,
+			processed: handler(numericPart)
+		};
+	}
+	if (/^[+-]?(?:\d*\.\d+|\d+)[a-z%]+$/.test(token)) return {
+		bucket: 1,
+		processed: token
+	};
+	if (RE_NUMBER.test(token)) return {
+		bucket: 1,
+		processed: token
+	};
+	if (VALUE_KEYWORDS.has(token)) return {
+		bucket: 1,
+		processed: token
+	};
+	if (token === "transparent" || token === "currentcolor") return {
+		bucket: 0,
+		processed: token
+	};
+	return {
+		bucket: 2,
+		processed: token
+	};
+}
+//#endregion
+//#region src/parser/lru.ts
+/**
+* Doubly-linked-list LRU.
+*
+* The list holds direct node references rather than keys, so rewiring on a
+* `get()` of a non-MRU entry is pure pointer work. Storing keys instead cost
+* three extra `Map.get()` lookups per read (prev, next and the current head),
+* which is measurable on these read-mostly caches: they are hit on every
+* render once the style pipeline is warm.
+*/
+var Lru = class {
+	limit;
+	map = /* @__PURE__ */ new Map();
+	head = null;
+	tail = null;
+	onEvict;
+	constructor(limit = 1e3, onEvict) {
+		this.limit = limit;
+		let normalized = Number.isFinite(this.limit) ? Math.floor(this.limit) : 1e3;
+		if (normalized <= 0) normalized = 1e3;
+		this.limit = normalized;
+		this.onEvict = onEvict;
+	}
+	setOnEvict(fn) {
+		this.onEvict = fn;
+	}
+	get(key) {
+		const node = this.map.get(key);
+		if (node === void 0) return void 0;
+		if (this.head !== node) this.moveToHead(node);
+		return node.value;
+	}
+	set(key, value) {
+		const existing = this.map.get(key);
+		if (existing !== void 0) {
+			existing.value = value;
+			if (this.head !== existing) this.moveToHead(existing);
+			return;
+		}
+		const node = {
+			key,
+			prev: null,
+			next: this.head,
+			value
+		};
+		if (this.head) this.head.prev = node;
+		this.head = node;
+		if (!this.tail) this.tail = node;
+		this.map.set(key, node);
+		if (this.map.size > this.limit) this.evict();
+	}
+	delete(key) {
+		const node = this.map.get(key);
+		if (node === void 0) return;
+		this.detach(node);
+		this.map.delete(key);
+	}
+	keys() {
+		return this.map.keys();
+	}
+	detach(node) {
+		if (node.prev) node.prev.next = node.next;
+		if (node.next) node.next.prev = node.prev;
+		if (this.head === node) this.head = node.next;
+		if (this.tail === node) this.tail = node.prev;
+		node.prev = null;
+		node.next = null;
+	}
+	moveToHead(node) {
+		this.detach(node);
+		node.next = this.head;
+		if (this.head) this.head.prev = node;
+		this.head = node;
+		if (!this.tail) this.tail = node;
+	}
+	evict() {
+		const node = this.tail;
+		if (!node) return;
+		this.detach(node);
+		this.map.delete(node.key);
+		if (this.onEvict) try {
+			this.onEvict(node.key, node.value);
+		} catch {}
+	}
+	clear() {
+		this.map.clear();
+		this.head = this.tail = null;
+	}
+};
+//#endregion
+//#region src/parser/tokenizer.ts
+const isWhitespace = (ch) => ch === " " || ch === "\n" || ch === "	" || ch === "\r" || ch === "\f";
+function scan(src, cb) {
+	let depth = 0;
+	let inUrl = false;
+	let inQuote = 0;
+	let start = 0;
+	let i = 0;
+	let pendingSlash = false;
+	const flush = (isComma, isSlash) => {
+		const actualSlash = isSlash || pendingSlash;
+		pendingSlash = false;
+		if (start < i) {
+			const prevChar = start > 0 ? src[start - 1] : null;
+			cb(src.slice(start, i), isComma, actualSlash, prevChar);
+		} else if (isComma) cb("", true, false, null);
+		else if (actualSlash) cb("", false, true, null);
+		start = i + 1;
+	};
+	for (; i < src.length; i++) {
+		const ch = src[i];
+		if (inQuote) {
+			if (ch === inQuote && src[i - 1] !== "\\") inQuote = 0;
+			continue;
+		}
+		if (ch === "\"" || ch === "'") {
+			inQuote = ch;
+			continue;
+		}
+		if (ch === "(") {
+			if (!depth) {
+				if (src.slice(Math.max(0, i - 3), i + 1) === "url(") inUrl = true;
+			}
+			depth++;
+			continue;
+		}
+		if (ch === ")") {
+			depth = Math.max(0, depth - 1);
+			if (inUrl && depth === 0) inUrl = false;
+			continue;
+		}
+		if (inUrl) continue;
+		if (!depth) {
+			if (ch === ",") {
+				flush(true, false);
+				continue;
+			}
+			if (ch === "/") {
+				const prevIsWhitespace = isWhitespace(src[i - 1]);
+				const nextIsWhitespace = isWhitespace(src[i + 1]);
+				if (prevIsWhitespace && nextIsWhitespace) {
+					pendingSlash = true;
+					start = i + 1;
+					continue;
+				}
+				continue;
+			}
+			if (isWhitespace(ch)) {
+				flush(false, false);
+				continue;
+			}
+		}
+	}
+	flush(false, false);
+}
+//#endregion
+//#region src/parser/parser.ts
+var StyleParser = class {
+	opts;
+	cache;
+	constructor(opts = {}) {
+		this.opts = opts;
+		this.cache = new Lru(this.opts.cacheSize ?? 1e3);
+	}
+	process(src) {
+		const key = String(src);
+		const hit = this.cache.get(key);
+		if (hit) return hit;
+		const stripped = foldDslCase(src.replace(/\/\*[^*]*\*+(?:[^/*][^*]*\*+)*\//g, ""));
+		const groups = [];
+		let currentGroup = makeEmptyDetails();
+		let currentPart = makeEmptyPart();
+		let parts = [];
+		const pushToken = (bucket, processed) => {
+			if (!processed) return;
+			const mergeIntoPrevUrl = () => {
+				const lastIdx = currentPart.values.length - 1;
+				currentPart.values[lastIdx] += ` ${processed}`;
+				const lastAllIdx = currentPart.all.length - 1;
+				currentPart.all[lastAllIdx] += ` ${processed}`;
+			};
+			if (currentPart.values.length > 0 && currentPart.values[currentPart.values.length - 1].startsWith("url(")) {
+				mergeIntoPrevUrl();
+				return;
+			}
+			switch (bucket) {
+				case 0:
+					currentPart.colors.push(processed);
+					break;
+				case 1:
+					currentPart.values.push(processed);
+					break;
+				case 2:
+					currentPart.mods.push(processed);
+					break;
+				case 3:
+					currentPart.colors.push(processed);
+					currentPart.values.push(processed);
+					break;
+			}
+			currentPart.all.push(processed);
+		};
+		const endPart = () => {
+			if (currentPart.all.length > 0) {
+				finalizePart(currentPart);
+				parts.push(currentPart);
+			}
+			currentPart = makeEmptyPart();
+		};
+		const endGroup = () => {
+			endPart();
+			if (parts.length === 0) {
+				parts.push(makeEmptyPart());
+				finalizePart(parts[0]);
+			}
+			finalizeGroup(currentGroup, parts);
+			groups.push(currentGroup);
+			currentGroup = makeEmptyDetails();
+			parts = [];
+			currentPart = makeEmptyPart();
+		};
+		scan(stripped, (tok, isComma, isSlash, _prevChar) => {
+			if (tok) {
+				if (currentGroup.input) currentGroup.input += ` ${tok}`;
+				else currentGroup.input = tok;
+				const { bucket, processed } = classify(tok, this.opts, (sub) => this.process(sub));
+				pushToken(bucket, processed);
+			}
+			if (isSlash) endPart();
+			if (isComma) endGroup();
+		});
+		if (currentPart.all.length || parts.length || !groups.length) endGroup();
+		const result = {
+			output: groups.map((g) => g.output).join(", "),
+			groups
+		};
+		Object.freeze(result);
+		this.cache.set(key, result);
+		return result;
+	}
+	setFunctions(functions) {
+		this.opts.functions = functions;
+		this.cache.clear();
+	}
+	setUnits(units) {
+		this.opts.units = units;
+		this.cache.clear();
+	}
+	updateOptions(patch) {
+		Object.assign(this.opts, patch);
+		if (patch.cacheSize) this.cache = new Lru(patch.cacheSize);
+		else this.cache.clear();
+	}
+	/**
+	* Clear the parser cache.
+	* Call this when external state that affects parsing results has changed
+	* (e.g., predefined tokens).
+	*/
+	clearCache() {
+		this.cache.clear();
+	}
+	/**
+	* Get the current units configuration.
+	*/
+	getUnits() {
+		return this.opts.units;
+	}
+};
+//#endregion
+//#region src/plugins/color-func.ts
+const clamp = (value, min, max) => Math.max(Math.min(value, max), min);
+/**
+* Parse an angle value with optional unit.
+* Supports: deg, turn, rad, or unitless (treated as degrees).
+*/
+const parseAngle = (value) => {
+	const match = value.match(/^([+-]?\d*\.?\d+)(deg|turn|rad)?$/);
+	if (!match) return 0;
+	const num = parseFloat(match[1]);
+	switch (match[2]) {
+		case "turn": return num * 360;
+		case "rad": return num * 180 / Math.PI;
+		default: return num;
+	}
+};
+/**
+* Parse a percentage value (e.g., "50%") to a 0-1 range. A unitless number is
+* read as the factor it already looks like, so `okhsl(280 .8 .52)` and
+* `okhsl(280 80% 52%)` are the same color.
+*/
+const parsePercentage = (value) => {
+	const match = value.match(/^([+-]?\d*\.?\d+)%?$/);
+	if (!match) return 0;
+	const num = parseFloat(match[1]);
+	return value.includes("%") ? num / 100 : num;
+};
+/**
+* Creates a color function handler for the tasty parser.
+*
+* A color function is a custom `functions` entry that converts its arguments
+* to an `rgb(...)` string (an already-supported color), so it needs no special
+* core integration — registering it as a parse function is enough.
+*
+* @param name The name of the color function (e.g., 'okhsl', 'okhst')
+* @param convert Converts the parsed first three channel values (after angle/
+*   percent normalization) to sRGB `[r, g, b]` in the 0-1 range
+* @param label Optional diagnostic label shown in dev warnings when the wrong
+*   number of arguments is supplied (e.g., 'H S L'). Has no effect on parsing
+*   or output.
+*/
+function createColorFunc(name, convert, label) {
+	const conversionCache = new Lru(500);
+	const expected = label ? ` (${label})` : "";
+	return (groups) => {
+		if (groups.length === 0 || groups[0].all.length < 3) {
+			if (isDevEnv()) console.warn(`[Tasty] ${name}(): expected 3 values${expected}, got:`, groups);
+			return "rgb(0% 0% 0%)";
+		}
+		const group = groups[0];
+		const tokens = group.all;
+		const alpha = group.parts.length > 1 && group.parts[1].all.length > 0 ? group.parts[1].output : void 0;
+		const cacheKey = tokens.slice(0, 3).join(" ") + (alpha ? ` / ${alpha}` : "");
+		const cached = conversionCache.get(cacheKey);
+		if (cached) return cached;
+		const h = parseAngle(tokens[0]);
+		const c2 = parsePercentage(tokens[1]);
+		const c3 = parsePercentage(tokens[2]);
+		const misscaled = [tokens[1], tokens[2]].filter((raw, i) => !raw.includes("%") && (i === 0 ? c2 : c3) > 1);
+		if (misscaled.length) warnOnceDev(`${name}:percent-scale`, `${name}(): channels are factors (0-1) or percentages, so ${misscaled.map((v) => `"${v}"`).join(" and ")} ${misscaled.length > 1 ? "clamp" : "clamps"} to 1 — add the missing '%', or write the value as a 0-1 number.`);
+		const [r, g, b] = convert(h, clamp(c2, 0, 1), clamp(c3, 0, 1));
+		const format = (n) => {
+			const pct = n * 100;
+			return parseFloat(pct.toFixed(1)).toString() + "%";
+		};
+		const result = alpha ? `rgb(${format(r)} ${format(g)} ${format(b)} / ${alpha})` : `rgb(${format(r)} ${format(g)} ${format(b)})`;
+		conversionCache.set(cacheKey, result);
+		return result;
+	};
+}
+//#endregion
+//#region src/plugins/okhsl-plugin.ts
+/**
+* OKHSL Plugin for Tasty
+*
+* Converts OKHSL color syntax to RGB notation.
+* Supports angle units: deg, turn, rad, or unitless (degrees).
+*
+* Examples:
+*   okhsl(240.5 50% 50%)
+*   okhsl(240.5deg 50% 50%)
+*   okhsl(0.25turn 50% 50%)
+*   okhsl(1.57rad 50% 50%)
+*/
+/**
+* The okhsl function handler for tasty parser.
+* Receives parsed style groups and returns an RGB color string.
+*/
+const okhslFunction = createColorFunc("okhsl", okhslToSrgb, "H S L");
+/**
+* OKHSL Plugin for Tasty.
+*
+* Adds support for the `okhsl()` color function in tasty styles.
+*
+* @example
+* ```ts
+* import { configure } from '@tenphi/tasty';
+* import { okhslPlugin } from '@tenphi/tasty';
+*
+* configure({
+*   plugins: [okhslPlugin()],
+* });
+*
+* // Now you can use okhsl in styles:
+* const Box = tasty({
+*   styles: {
+*     fill: 'okhsl(240 50% 50%)',
+*   },
+* });
+* ```
+*/
+const okhslPlugin = () => ({
+	name: "okhsl",
+	functions: { okhsl: okhslFunction }
+});
+//#endregion
+//#region src/plugins/okhst-plugin.ts
+/**
+* OKHST Plugin for Tasty
+*
+* Converts OKHST color syntax to RGB notation.
+* OKHST is OKHSL with the lightness axis replaced by a contrast-uniform tone axis.
+* Supports angle units: deg, turn, rad, or unitless (degrees).
+*
+* Examples:
+*   okhst(240.5 50% 50%)
+*   okhst(240.5deg 50% 50%)
+*   okhst(0.25turn 50% 50%)
+*   okhst(1.57rad 50% 50%)
+*/
+/**
+* The okhst function handler for tasty parser.
+* Receives parsed style groups and returns an RGB color string.
+*/
+const okhstFunction = createColorFunc("okhst", okhstToSrgb, "H S T");
+/**
+* OKHST Plugin for Tasty.
+*
+* Adds support for the `okhst()` color function in tasty styles.
+*
+* @example
+* ```ts
+* import { configure } from '@tenphi/tasty';
+* import { okhstPlugin } from '@tenphi/tasty';
+*
+* configure({
+*   plugins: [okhstPlugin()],
+* });
+*
+* // Now you can use okhst in styles:
+* const Box = tasty({
+*   styles: {
+*     fill: 'okhst(240 50% 50%)',
+*   },
+* });
+* ```
+*/
+const okhstPlugin = () => ({
+	name: "okhst",
+	functions: { okhst: okhstFunction }
+});
+//#endregion
+//#region src/plugins/defaults.ts
+/**
+* Register the default color functions (okhsl, okhst) with the global parser.
+*
+* They are ordinary `functions` entries — the same mechanism any third-party
+* color plugin uses — so they need no special-casing in core.
+*
+* Idempotent and safe to call from the lazy parser initializer so that
+* zero-config usage keeps working. `resetGlobalParseFunctions()` re-invokes it
+* after clearing user-registered functions so the defaults survive a config reset.
+*
+* @internal
+*/
+function registerDefaultFunctions() {
+	customFunction("okhsl", okhslFunction);
+	customFunction("okhst", okhstFunction);
+}
+//#endregion
+//#region src/utils/styles.ts
+/**
+* Normalize a color token value.
+* - Boolean `true` is converted to `'transparent'`
+* - Boolean `false` returns `null` (signals the token should be skipped)
+* - Other values are returned as-is
+*
+* @param value - The raw token value
+* @returns Normalized value or null if the token should be skipped
+*/
+function normalizeColorTokenValue(value) {
+	if (value === true) return "transparent";
+	if (value === false) return null;
+	return value;
+}
+const COLOR_VAR_PATTERN = /^var\(--([a-z0-9-]+)-color[,)]/;
+const RGB_ALPHA_PATTERN = /\/\s*([0-9.]+)\)/;
+const RE_HEX_COLOR = /^#[0-9a-fA-F]{3,8}$/;
+const RE_VAR_COLOR = /^var\(--[a-z0-9-]+-color/;
+function isSimpleColorFast(val) {
+	switch (val.charCodeAt(0)) {
+		case 35: return RE_HEX_COLOR.test(val);
+		case 114:
+			if (val.charCodeAt(1) === 103 && val.charCodeAt(2) === 98) return true;
+			break;
+		case 104:
+			if (val.charCodeAt(1) === 115 && val.charCodeAt(2) === 108) return true;
+			break;
+		case 108:
+			if (val.charCodeAt(1) === 99 && val.charCodeAt(2) === 104) return true;
+			break;
+		case 111:
+			if (val.startsWith("oklch(")) return true;
+			break;
+		case 118:
+			if (RE_VAR_COLOR.test(val)) return true;
+			break;
+		case 99:
+			if (val === "currentColor" || val === "currentcolor") return true;
+			break;
+		case 116:
+			if (val === "transparent") return true;
+			break;
+	}
+	return getNamedColorHex().has(val.toLowerCase());
+}
+let colorWarningCount = 0;
+const MAX_COLOR_WARNINGS = 10;
+const CUSTOM_UNITS = {
+	r: "6px",
+	cr: "10px",
+	bw: "1px",
+	ow: "3px",
+	x: "8px",
+	sf: function sf(num) {
+		return `minmax(0, ${num}fr)`;
+	}
+};
+const DIRECTIONS = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+];
+let __tastyParser = null;
+function getOrCreateParser() {
+	if (!__tastyParser) {
+		__tastyParser = new StyleParser({ units: CUSTOM_UNITS });
+		__tastyParser.setFunctions(__tastyParseFunctions);
+		registerDefaultFunctions();
+	}
+	return __tastyParser;
+}
+const __tastyParseFunctions = {};
+/**
+* Register a parse-time function.
+*
+* @internal Use `configure({ functions })`. This bypasses the configuration lock
+* and is kept only for the lazy default-function bootstrap and the `@function`
+* polyfill, both of which must register after `configure()` has run.
+*/
+function customFunction(name, fn) {
+	__tastyParseFunctions[name] = fn;
+	getOrCreateParser().setFunctions(__tastyParseFunctions);
+}
+/**
+* Reset parse functions back to the built-in set (okhsl/okhst).
+*
+* @internal Called by `resetConfig()`.
+*/
+function resetGlobalParseFunctions() {
+	for (const key of Object.keys(__tastyParseFunctions)) delete __tastyParseFunctions[key];
+	registerDefaultFunctions();
+	getOrCreateParser().setFunctions(__tastyParseFunctions);
+}
+/**
+* Get the global StyleParser instance.
+* Used by configure() to apply parser configuration.
+*/
+function getGlobalParser() {
+	return getOrCreateParser();
+}
+/**
+* Get the current custom functions registry.
+* Used by configure() to merge with new functions.
+*/
+/**
+* The live parse-function registry.
+*
+* @internal Returns the mutable internal map; writing to it bypasses the
+* parser's cache invalidation, so the write silently does not take effect.
+* Read-only, internal use.
+*/
+function getGlobalParseFunctions() {
+	return __tastyParseFunctions;
+}
+/**
+* Storage for predefined tokens that are replaced during style parsing.
+* Keys are token names (with $ or # prefix), values are pre-processed CSS values.
+*/
+let __globalPredefinedTokens = null;
+/**
+* Set global predefined tokens.
+* Called from configure() after processing token values.
+* Merges with existing tokens (new tokens override existing ones with same key).
+* Keys are normalized to lowercase (parser lowercases input before classification).
+* @internal
+*/
+function setGlobalPredefinedTokens(tokens) {
+	const normalizedTokens = {};
+	for (const [key, value] of Object.entries(tokens)) {
+		const lowerKey = key.toLowerCase();
+		const lowerValue = value.toLowerCase();
+		if (lowerKey.startsWith("#") && lowerValue === "#current") {
+			console.warn(`[Tasty] Using #current to define color token "${key}" is not supported. The #current token represents currentcolor which cannot be used as a base for other tokens.`);
+			continue;
+		}
+		normalizedTokens[lowerKey] = value;
+	}
+	__globalPredefinedTokens = __globalPredefinedTokens ? {
+		...__globalPredefinedTokens,
+		...normalizedTokens
+	} : normalizedTokens;
+	getOrCreateParser().clearCache();
+}
+/**
+* Get the current global predefined tokens.
+* Returns null if no tokens are configured.
+*/
+function getGlobalPredefinedTokens() {
+	return __globalPredefinedTokens;
+}
+/**
+* Reset global predefined tokens.
+* Used for testing.
+* @internal
+*/
+function resetGlobalPredefinedTokens() {
+	__globalPredefinedTokens = null;
+	getOrCreateParser().clearCache();
+}
+/**
+*
+* @param {String} value
+* @param {Number} mode
+* @returns {Object<String,String|Array>}
+*/
+function parseStyle(value) {
+	let str;
+	if (typeof value === "string") str = value;
+	else if (typeof value === "number") str = String(value);
+	else str = "";
+	return getOrCreateParser().process(str);
+}
+/** A `$`-prefixed custom-property reference — the only DSL syntax that starts with `$`. */
+const RE_CUSTOM_PROPERTY_REF = /\$[a-zA-Z_$]/;
+/**
+* Substitute custom-property references (`$ident` → `var(--ident)`) inside a
+* value a handler would otherwise emit to CSS verbatim.
+*
+* Handlers for keyword-valued properties (`display`, `align`, `text-transform`,
+* `overflow`, …) pass their input straight through, since there are no units or
+* color tokens to resolve. That leaked the raw DSL into the stylesheet:
+* `display: '$my-display'` emitted `display: $my-display`, which the browser
+* drops as invalid. The same applies to color props whose value the parser could
+* not classify as a color — `$ident` is a color only when the name ends with
+* `-color`, so `fill: '$my-fill'` fell back to the unparsed input.
+*
+* Values without a `$` skip the parser entirely, so pass-through behaviour (and
+* the parser's case folding) is unchanged for every value that was already
+* valid CSS.
+*/
+function resolveCustomProperties(value) {
+	if (!RE_CUSTOM_PROPERTY_REF.test(value)) return value;
+	return parseStyle(value).output || value;
+}
+/**
+* Parse color. Find it value, name and opacity.
+* Optimized to avoid heavy parseStyle calls for simple color patterns.
+*/
+function parseColor(val, ignoreError = false) {
+	if (typeof val !== "string") val = String(val ?? "");
+	val = val.trim();
+	if (!val) return {};
+	const isSimpleColor = isSimpleColorFast(val);
+	let firstColor;
+	if (isSimpleColor) firstColor = val;
+	else {
+		const extractedColor = parseStyle(val).groups.find((g) => g.colors.length)?.colors[0];
+		if (!extractedColor) {
+			if (!ignoreError && colorWarningCount < MAX_COLOR_WARNINGS) {
+				console.warn("[Tasty] unable to parse color:", val);
+				colorWarningCount++;
+				if (colorWarningCount === MAX_COLOR_WARNINGS) console.warn("[Tasty] color parsing warnings will be suppressed from now on");
+			}
+			return {};
+		}
+		firstColor = extractedColor;
+	}
+	const faded = parseAlphaOverride(firstColor);
+	const baseColor = faded ? faded.color : firstColor;
+	const nameMatch = baseColor.match(COLOR_VAR_PATTERN);
+	let opacity;
+	if (faded) {
+		const { alpha } = faded;
+		const v = parseFloat(alpha);
+		if (!isNaN(v)) opacity = alpha.endsWith("%") ? v : v * 100;
+	} else if (baseColor.startsWith("rgb") || baseColor.startsWith("hsl") || baseColor.startsWith("lch") || baseColor.startsWith("oklch")) {
+		const alphaMatch = baseColor.match(RGB_ALPHA_PATTERN);
+		if (alphaMatch) {
+			const v = parseFloat(alphaMatch[1]);
+			if (!isNaN(v)) opacity = v * 100;
+		}
+	}
+	return {
+		color: firstColor,
+		name: nameMatch ? nameMatch[1] : void 0,
+		opacity
+	};
+}
+function filterMods(mods, allowedMods) {
+	return mods.filter((mod) => allowedMods.includes(mod));
+}
+const _innerCache = /* @__PURE__ */ new WeakMap();
+const _topLevelCache = /* @__PURE__ */ new WeakMap();
+function stringifyStyles(styles) {
+	if (styles == null || typeof styles !== "object") return "";
+	const cached = _topLevelCache.get(styles);
+	if (cached !== void 0) return cached;
+	const obj = styles;
+	const keys = Object.keys(obj).sort();
+	const parts = [];
+	for (const k of keys) {
+		const v = obj[k];
+		if (v === void 0 || typeof v === "function" || typeof v === "symbol") continue;
+		const c0 = k.charCodeAt(0);
+		const needsInnerSort = (c0 >= 65 && c0 <= 90 || c0 === 38) && v && typeof v === "object" && !Array.isArray(v);
+		let sv;
+		if (needsInnerSort) {
+			sv = _innerCache.get(v);
+			if (sv === void 0) {
+				const innerObj = v;
+				const innerKeys = Object.keys(innerObj).sort();
+				const innerParts = [];
+				for (const ik of innerKeys) {
+					const ivs = JSON.stringify(innerObj[ik]);
+					if (ivs !== void 0) innerParts.push(JSON.stringify(ik) + ":" + ivs);
+				}
+				sv = "{" + innerParts.join(",") + "}";
+				_innerCache.set(v, sv);
+			}
+		} else sv = JSON.stringify(v);
+		parts.push(JSON.stringify(k) + ":" + sv);
+	}
+	const result = "{" + parts.join(",") + "}";
+	_topLevelCache.set(styles, result);
+	return result;
+}
+//#endregion
+//#region src/utils/function-color.ts
+const RE_FUNC_NAME = /^([a-z][a-z0-9-]*)\s*\(/i;
+const RE_COLOR_OUT = /^(?:rgb|hsl|hwb|lab|lch|oklab|oklch|color)\(|^#|^var\(--/i;
+/**
+* Resolve a `name(...)` value produced by a registered custom parse function
+* into its concrete color output.
+*
+* A color function is just a `functions` entry whose output is an already
+* supported color (`rgb`, `hsl`, `#…`, `oklch`, …). This helper delegates the
+* value to the global parser (which already runs the registered parse function)
+* and returns the result only when it looks like a color. Returns `null` when
+* `str` is not a registered custom function or its output is not a color.
+*
+* This is the generic replacement for the previously hardcoded okhsl/okhst
+* conversion branches scattered across `strToRgb`, `resolveToRgbaValues`, and
+* the `#token.alpha` injection path.
+*/
+function resolveFunctionColor(str) {
+	const m = RE_FUNC_NAME.exec(str);
+	if (!m) return null;
+	const name = m[1].toLowerCase();
+	getGlobalParser();
+	if (!(name in getGlobalParseFunctions())) return null;
+	const out = getGlobalParser().process(str).output;
+	if (!out || !RE_COLOR_OUT.test(out)) return null;
+	return out;
+}
+//#endregion
+//#region src/utils/colors.ts
+function color(name, opacity = 1) {
+	if (opacity !== 1) return overrideColorAlpha(`var(--${name}-color)`, String(opacity));
+	return `var(--${name}-color)`;
+}
+//#endregion
+//#region src/utils/dotize.ts
+const dotize = {
+	valTypes: {
+		none: "NONE",
+		primitive: "PRIM",
+		object: "OBJECT",
+		array: "ARRAY"
+	},
+	getValType: function(val) {
+		if (!val || typeof val != "object" || Array.isArray(val)) return dotize.valTypes.primitive;
+		if (typeof val == "object") return dotize.valTypes.object;
+	},
+	getPathType: function(arrPath) {
+		const arrPathTypes = [];
+		for (const path in arrPath) {
+			const pathVal = arrPath[path];
+			if (!pathVal) arrPathTypes.push(dotize.valTypes.none);
+			else if (dotize.isNumber(pathVal)) arrPathTypes.push(dotize.valTypes.array);
+			else arrPathTypes.push(dotize.valTypes.object);
+		}
+		return arrPathTypes;
+	},
+	isUndefined: function(obj) {
+		return typeof obj == "undefined";
+	},
+	isNumber: function(f) {
+		return !isNaN(parseInt(f));
+	},
+	isEmptyObj: function(obj) {
+		for (const prop in obj) if (Object.hasOwnProperty.call(obj, prop)) return false;
+		return JSON.stringify(obj) === JSON.stringify({});
+	},
+	isPlainObject: function(obj) {
+		if (typeof obj !== "object" || obj === null) return false;
+		return Object.getPrototypeOf(obj) === Object.prototype;
+	},
+	isNotObject: function(obj) {
+		return !obj || !this.isPlainObject(obj);
+	},
+	isEmptyArray: function(arr) {
+		return Array.isArray(arr) && arr.length == 0;
+	},
+	isNotArray: function(arr) {
+		return Array.isArray(arr) == false;
+	},
+	removeEmptyArrayItem: function(arr) {
+		return arr.filter(function(el) {
+			return el != null && el != "";
+		});
+	},
+	getFieldName: function(field, prefix, isRoot, isArrayItem, isArray) {
+		if (isArray) return (prefix ? prefix : "") + (dotize.isNumber(field) ? "[" + field + "]" : (isRoot && !prefix ? "" : ".") + field);
+		else if (isArrayItem) return (prefix ? prefix : "") + "[" + field + "]";
+		else return (prefix ? prefix + "." : "") + field;
+	},
+	startsWith: function(val, valToSearch) {
+		return val.indexOf(valToSearch) == 0;
+	},
+	convert: function(obj, prefix = "") {
+		let newObj = {};
+		if (dotize.isNotObject(obj)) if (prefix) {
+			newObj[prefix] = obj;
+			return newObj;
+		} else return obj;
+		return (function recurse(o, p, isRoot) {
+			const isArrayItem = Array.isArray(o);
+			for (const f in o) {
+				const currentProp = o[f];
+				if (currentProp && typeof currentProp === "object" && !Array.isArray(currentProp) && dotize.isPlainObject(currentProp)) {
+					if (isArrayItem && dotize.isEmptyObj(currentProp) == false) newObj = recurse(currentProp, dotize.getFieldName(f, p, isRoot, true));
+					else if (dotize.isEmptyObj(currentProp) == false) newObj = recurse(currentProp, dotize.getFieldName(f, p, isRoot));
+					else if (dotize.isEmptyObj(currentProp)) newObj[dotize.getFieldName(f, p, isRoot, isArrayItem)] = currentProp;
+				} else if (isArrayItem || dotize.isNumber(f)) newObj[dotize.getFieldName(f, p, isRoot, true)] = currentProp;
+				else newObj[dotize.getFieldName(f, p, isRoot)] = currentProp;
+			}
+			return newObj;
+		})(obj, prefix, true);
+	},
+	backward: function(obj, prefix) {
+		let newObj = {};
+		const arStartRegex = /\[(\d+)\]/g;
+		if (dotize.isNotObject(obj) && dotize.isNotArray(obj)) if (prefix) return obj[prefix];
+		else return obj;
+		for (let tProp in obj) {
+			const tPropVal = obj[tProp];
+			if (prefix) {
+				const prefixRegex = new RegExp("^" + prefix);
+				tProp = tProp.replace(prefixRegex, "");
+			}
+			tProp = tProp.replace(arStartRegex, ".$1");
+			if (dotize.startsWith(tProp, ".")) tProp = tProp.replace(/^\./, "");
+			const arrPath = tProp.split(".");
+			const arrPathTypes = dotize.getPathType(arrPath);
+			if (!dotize.isUndefined(arrPathTypes) && arrPathTypes[0] == dotize.valTypes.array && Array.isArray(newObj) == false) newObj = [];
+			(function recurse(rPropVal, rObj, rPropValPrev, rObjPrev) {
+				let currentPath = arrPath.shift();
+				const currentPathType = arrPathTypes.shift();
+				if (typeof currentPath == "undefined" || currentPath == "") {
+					newObj = rPropVal;
+					return;
+				}
+				const isArray = currentPathType == dotize.valTypes.array;
+				if (dotize.isNumber(currentPath)) currentPath = parseInt(currentPath);
+				if (arrPath.length > 0) {
+					if (typeof rObj[currentPath] == "undefined") if (isArray) rObj[currentPath] = [];
+					else rObj[currentPath] = {};
+					recurse(rPropVal, rObj[currentPath], currentPath, rObj);
+					return;
+				}
+				if (currentPathType == dotize.valTypes.array && rPropValPrev && rObjPrev) {
+					if (Array.isArray(rObjPrev[rPropValPrev]) == false) rObjPrev[rPropValPrev] = [];
+					rObjPrev[rPropValPrev].push(rPropVal);
+				} else rObj[currentPath] = rPropVal;
+			})(tPropVal, newObj);
+		}
+		return newObj;
+	}
+};
+//#endregion
+export { hslToRgbValues as A, createColorFunc as C, getNamedColorHex as D, makeEmptyDetails as E, RE_NUMBER as F, RE_RAW_UNIT as I, normalizeDslName as M, toSnakeCase as N, getRgbValuesFromRgbaString as O, CSS_WIDE_KEYWORDS as P, okhslPlugin as S, Lru as T, setGlobalPredefinedTokens as _, DIRECTIONS as a, okhstPlugin as b, getGlobalParseFunctions as c, normalizeColorTokenValue as d, parseColor as f, resolveCustomProperties as g, resetGlobalPredefinedTokens as h, CUSTOM_UNITS as i, strToRgb as j, hexToRgb as k, getGlobalParser as l, resetGlobalParseFunctions as m, color as n, customFunction as o, parseStyle as p, resolveFunctionColor as r, filterMods as s, dotize as t, getGlobalPredefinedTokens as u, stringifyStyles as v, StyleParser as w, okhslFunction as x, okhstFunction as y };
+
+//# sourceMappingURL=dsl-CXvoaLnj.js.map