@tenphi/tasty 3.0.1 → 3.1.0

package/dist/{config-CCcE_tqx.js → config-CwQ-fAsp.js}

@@ -1,136 +1,141 @@
-//#region src/parser/lru.ts
-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) return void 0;
-		this.touch(key, node);
-		return node.value;
-	}
-	set(key, value) {
-		let node = this.map.get(key);
-		if (node) {
-			node.value = value;
-			this.touch(key, node);
-			return;
-		}
-		node = {
-			prev: null,
-			next: this.head,
-			value
-		};
-		if (this.head) {
-			const headNode = this.map.get(this.head);
-			if (headNode) headNode.prev = key;
-		}
-		this.head = key;
-		if (!this.tail) this.tail = key;
-		this.map.set(key, node);
-		if (this.map.size > this.limit) this.evict();
-	}
-	delete(key) {
-		const node = this.map.get(key);
-		if (!node) return;
-		if (node.prev) {
-			const prevNode = this.map.get(node.prev);
-			if (prevNode) prevNode.next = node.next;
-		}
-		if (node.next) {
-			const nextNode = this.map.get(node.next);
-			if (nextNode) nextNode.prev = node.prev;
-		}
-		if (this.head === key) this.head = node.next;
-		if (this.tail === key) this.tail = node.prev;
-		this.map.delete(key);
-	}
-	keys() {
-		return this.map.keys();
-	}
-	touch(key, node) {
-		if (this.head === key) return;
-		if (node.prev) {
-			const prevNode = this.map.get(node.prev);
-			if (prevNode) prevNode.next = node.next;
-		}
-		if (node.next) {
-			const nextNode = this.map.get(node.next);
-			if (nextNode) nextNode.prev = node.prev;
-		}
-		if (this.tail === key) this.tail = node.prev;
-		node.prev = null;
-		node.next = this.head;
-		if (this.head) {
-			const headNode = this.map.get(this.head);
-			if (headNode) headNode.prev = key;
-		}
-		this.head = key;
-	}
-	evict() {
-		const old = this.tail;
-		if (!old) return;
-		const node = this.map.get(old);
-		if (!node) {
-			if (this.head === old) this.head = null;
-			this.tail = null;
-			return;
-		}
-		if (node.prev) {
-			const prevNode = this.map.get(node.prev);
-			if (prevNode) prevNode.next = null;
-		}
-		this.tail = node.prev;
-		if (this.head === old) this.head = null;
-		this.map.delete(old);
-		if (this.onEvict) try {
-			this.onEvict(old, node.value);
-		} catch {}
-	}
-	clear() {
-		this.map.clear();
-		this.head = this.tail = null;
-	}
-};
+//#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;
+/**
+* The color function a value calls at its top level, lowercased — or `null` when
+* the value is not a single color function call.
+*/
+function colorFuncName(value) {
+	const match = value.match(RE_FUNC_CALL);
+	if (!match) return null;
+	const name = match[1].toLowerCase();
+	return COLOR_FUNCS.has(name) ? name : null;
+}
+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/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;
+//#region src/utils/string.ts
+function toSnakeCase(str) {
+	return str.replace(/[A-Z]/g, (s) => `-${s.toLowerCase()}`);
+}
 /**
-* Resolve a `name(...)` value produced by a registered custom parse function
-* into its concrete color output.
+* Normalize a DSL identifier to the CSS custom-property name it emits.
 *
-* 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.
+* 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.
 *
-* This is the generic replacement for the previously hardcoded okhsl/okhst
-* conversion branches scattered across `strToRgb`, `resolveToRgbaValues`, and
-* the `#token.alpha` injection path.
+* 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 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;
+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
@@ -844,32 +849,167 @@ function hslStringToRgb(hslStr) {
 	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.
+* 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/parser/lru.ts
+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) return void 0;
+		this.touch(key, node);
+		return node.value;
+	}
+	set(key, value) {
+		let node = this.map.get(key);
+		if (node) {
+			node.value = value;
+			this.touch(key, node);
+			return;
+		}
+		node = {
+			prev: null,
+			next: this.head,
+			value
+		};
+		if (this.head) {
+			const headNode = this.map.get(this.head);
+			if (headNode) headNode.prev = key;
+		}
+		this.head = key;
+		if (!this.tail) this.tail = key;
+		this.map.set(key, node);
+		if (this.map.size > this.limit) this.evict();
+	}
+	delete(key) {
+		const node = this.map.get(key);
+		if (!node) return;
+		if (node.prev) {
+			const prevNode = this.map.get(node.prev);
+			if (prevNode) prevNode.next = node.next;
+		}
+		if (node.next) {
+			const nextNode = this.map.get(node.next);
+			if (nextNode) nextNode.prev = node.prev;
+		}
+		if (this.head === key) this.head = node.next;
+		if (this.tail === key) this.tail = node.prev;
+		this.map.delete(key);
+	}
+	keys() {
+		return this.map.keys();
+	}
+	touch(key, node) {
+		if (this.head === key) return;
+		if (node.prev) {
+			const prevNode = this.map.get(node.prev);
+			if (prevNode) prevNode.next = node.next;
+		}
+		if (node.next) {
+			const nextNode = this.map.get(node.next);
+			if (nextNode) nextNode.prev = node.prev;
+		}
+		if (this.tail === key) this.tail = node.prev;
+		node.prev = null;
+		node.next = this.head;
+		if (this.head) {
+			const headNode = this.map.get(this.head);
+			if (headNode) headNode.prev = key;
+		}
+		this.head = key;
+	}
+	evict() {
+		const old = this.tail;
+		if (!old) return;
+		const node = this.map.get(old);
+		if (!node) {
+			if (this.head === old) this.head = null;
+			this.tail = null;
+			return;
+		}
+		if (node.prev) {
+			const prevNode = this.map.get(node.prev);
+			if (prevNode) prevNode.next = null;
+		}
+		this.tail = node.prev;
+		if (this.head === old) this.head = null;
+		this.map.delete(old);
+		if (this.onEvict) try {
+			this.onEvict(old, node.value);
+		} catch {}
+	}
+	clear() {
+		this.map.clear();
+		this.head = this.tail = null;
+	}
+};
+//#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 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)})`;
+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/color-space.ts
@@ -891,9 +1031,6 @@ function resetColorSpace() {
 function getColorSpaceSuffix() {
 	return currentColorSpace;
 }
-function getColorSpaceFunc() {
-	return currentColorSpace;
-}
 function formatNum(n, precision) {
 	return parseFloat(n.toFixed(precision)).toString();
 }
@@ -1150,6 +1287,91 @@ function strToColorSpace(color) {
 	return result;
 }
 /**
+* 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 with no companion variable — all
+* of them work, where writing into a channel slot directly requires components
+* the engine may have no way to compute.
+*
+* Alpha is *replaced*, not composed. A token holding `rgb(255 0 0 / .8)` faded
+* to `.5` is alpha `.5`, matching what the channel-components form did and what
+* a statically-known color still does. `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;
+}
+/** Channel names of each color space, in `<func>()` argument order. */
+const COLOR_SPACE_CHANNELS = {
+	rgb: "r g b",
+	hsl: "h s l",
+	oklch: "l c h"
+};
+/**
+* Express a color as components of the configured color space *by reference*,
+* using CSS relative color syntax: `from <color> l c h`.
+*
+* Static colors are decomposed into numbers (see `getColorSpaceComponents`), but
+* a color the engine cannot evaluate at build time — a `color-mix()`, a
+* `light-dark()`, a `color()` in a space with no conversion, anything reached
+* through `var()` — has no numbers to decompose. Handing back the relative form
+* keeps the `--name-color-{space}` companion usable anyway: the browser resolves
+* the channels, so `oklch(var(--name-color-oklch) / .5)` still applies opacity to
+* whatever the color turns out to be.
+*/
+function toRelativeColorSpaceComponents(color) {
+	return `from ${color} ${COLOR_SPACE_CHANNELS[currentColorSpace]}`;
+}
+/**
 * Extract the decomposed components of a color in the configured color space.
 * Returns a space-separated string of components without the wrapping function.
 * Alpha is NOT included — components are used for alpha composition via `/ alpha`.
@@ -1170,6 +1392,41 @@ function getColorSpaceComponents(color) {
 	return result;
 }
 /**
+* Rewrite a color into the `--name-color-{space}` components that `#name.alpha`
+* composes opacity onto.
+*
+* A `var()` chain is rewritten reference by reference so the fallback order
+* survives; a color the engine can evaluate is decomposed into numbers; anything
+* left — a derived color function, a `color()` in a space with no conversion —
+* falls back to relative color syntax and lets the browser do it.
+*
+* Returns the input unchanged when there is nothing to rewrite, so callers can
+* tell whether the conversion found anything.
+*
+* Example: `var(--primary-color, var(--secondary-color))`
+*   → `var(--primary-color-oklch, var(--secondary-color-oklch))`
+*/
+function convertColorChainToComponentChain(colorValue) {
+	const suffix = getColorSpaceSuffix();
+	const faded = parseAlphaOverride(colorValue);
+	if (faded) return convertColorChainToComponentChain(faded.color);
+	const componentVarMatch = colorValue.match(/^(?:rgb|hsl|oklch)a?\(\s*(var\(--[a-z0-9-]+-color-(?:rgb|hsl|oklch)\))\s*\//);
+	if (componentVarMatch) return componentVarMatch[1];
+	if (colorFuncName(colorValue)) {
+		const components = getColorSpaceComponents(colorValue);
+		return components !== colorValue ? components : toRelativeColorSpaceComponents(colorValue);
+	}
+	const match = colorValue.match(/var\(--([a-z0-9-]+)-color\s*(?:,\s*(.+))?\)/);
+	if (!match) {
+		const components = getColorSpaceComponents(colorValue);
+		if (components !== colorValue) return components;
+		return colorValue;
+	}
+	const [, name, fallback] = match;
+	if (!fallback) return `var(--${name}-color-${suffix})`;
+	return `var(--${name}-color-${suffix}, ${convertColorChainToComponentChain(fallback.trim())})`;
+}
+/**
 * Convert a color initial value (from @property definitions) to components
 * in the configured color space.
 */
@@ -1203,63 +1460,6 @@ function getComponentPropertySyntax() {
 	}
 }
 //#endregion
-//#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"
-]);
-const COLOR_FUNCS = new Set([
-	"rgb",
-	"rgba",
-	"hsl",
-	"hsla",
-	"hwb",
-	"lab",
-	"lch",
-	"oklab",
-	"oklch",
-	"color",
-	"device-cmyk",
-	"gray",
-	"color-mix",
-	"color-contrast"
-]);
-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/parser/types.ts
 const makeEmptyPart = () => ({
 	mods: [],
@@ -1299,6 +1499,53 @@ const finalizeGroup = (d, parts) => {
 //#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'
@@ -1400,35 +1647,34 @@ function classify(raw, opts, recurse) {
 		processed: "currentcolor"
 	};
 	const currentAlphaMatch = token.match(/^#current\.(\$[a-z_][a-z0-9-_]*|[0-9]+)$/i);
-	if (currentAlphaMatch) {
-		const rawAlpha = currentAlphaMatch[1];
-		let percentage;
-		if (rawAlpha.startsWith("$")) percentage = `calc(var(--${rawAlpha.slice(1)}) * 100%)`;
-		else if (rawAlpha === "0") percentage = "0%";
-		else percentage = `${parseFloat("." + rawAlpha) * 100}%`;
-		return {
-			bucket: 0,
-			processed: `color-mix(in oklab, currentcolor ${percentage}, transparent)`
-		};
-	}
+	if (currentAlphaMatch) return {
+		bucket: 0,
+		processed: fadeCurrentColor(currentAlphaMatch[1])
+	};
 	if (token[0] === "$" || token[0] === "#") {
 		const predefinedTokens = getGlobalPredefinedTokens();
 		if (predefinedTokens) {
-			if (token in predefinedTokens) {
-				const tokenValue = predefinedTokens[token];
-				return classify(tokenValue.toLowerCase(), opts, recurse);
+			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;
-					if (baseToken in predefinedTokens) {
-						const resolvedValue = predefinedTokens[baseToken];
-						if (resolvedValue.startsWith("#")) return classify(`${resolvedValue.toLowerCase()}.${rawAlpha}`, opts, recurse);
-						const funcMatch = resolvedValue.match(/^([a-z][a-z0-9-]*)\((.+)\)$/i);
+					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);
@@ -1493,7 +1739,7 @@ function classify(raw, opts, recurse) {
 			}
 		}
 	}
-	if (token.match(/^var\(--([a-z0-9-]+)-color\)$/)) return {
+	if (token.match(/^var\(--([a-zA-Z0-9-]+)-color\)$/)) return {
 		bucket: 0,
 		processed: token
 	};
@@ -1502,12 +1748,12 @@ function classify(raw, opts, recurse) {
 		processed: token
 	};
 	if (token[0] === "$") {
-		const identMatch = token.match(/^\$([a-z_][a-z0-9-_]*)$/);
+		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") ? 0 : 1,
+				bucket: name.endsWith("-color") ? 3 : 1,
 				processed
 			};
 		}
@@ -1516,13 +1762,9 @@ function classify(raw, opts, recurse) {
 		const alphaMatch = token.match(/^#([a-z0-9-]+)\.(\$[a-z_][a-z0-9-_]*|[0-9]+)$/i);
 		if (alphaMatch) {
 			const [, base, rawAlpha] = alphaMatch;
-			let alpha;
-			if (rawAlpha.startsWith("$")) alpha = `var(--${rawAlpha.slice(1)})`;
-			else if (rawAlpha === "0") alpha = "0";
-			else alpha = `.${rawAlpha}`;
 			return {
 				bucket: 0,
-				processed: `${getColorSpaceFunc()}(var(--${base}-color-${getColorSpaceSuffix()}) / ${alpha})`
+				processed: fadeColor(`var(--${base}-color)`, rawAlpha)
 			};
 		}
 		const name = token.slice(1);
@@ -1540,10 +1782,12 @@ function classify(raw, opts, recurse) {
 		const fname = token.slice(0, openIdx);
 		const inner = token.slice(openIdx + 1, -1);
 		if (COLOR_FUNCS.has(fname)) {
-			const argProcessed = recurse(inner).output.replace(/,\s+/g, ",");
+			const parsedInner = recurse(inner);
+			const argProcessed = parsedInner.output.replace(/,\s+/g, ",");
+			const processed = `${canonicalFuncName(fname)}(${argProcessed})`;
 			return {
-				bucket: 0,
-				processed: `${canonicalFuncName(fname)}(${argProcessed})`
+				bucket: fname === "light-dark" && !hasColorArgs(parsedInner) ? 1 : 0,
+				processed
 			};
 		}
 		if (opts.functions && fname in opts.functions) {
@@ -1570,12 +1814,12 @@ function classify(raw, opts, recurse) {
 		}
 	}
 	if (token.startsWith("(") && token.endsWith(")")) {
-		const match = token.slice(1, -1).match(/^\$([a-z_][a-z0-9-_]*)\s*,\s*(.*)$/);
+		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") ? 0 : 1,
+				bucket: name.endsWith("-color") ? 3 : 1,
 				processed: `var(--${name}, ${processedFallback})`
 			};
 		}
@@ -1712,7 +1956,7 @@ var StyleParser = class {
 		const key = String(src);
 		const hit = this.cache.get(key);
 		if (hit) return hit;
-		const stripped = src.replace(/\/\*[^*]*\*+(?:[^/*][^*]*\*+)*\//g, "").toLowerCase();
+		const stripped = foldDslCase(src.replace(/\/\*[^*]*\*+(?:[^/*][^*]*\*+)*\//g, ""));
 		const groups = [];
 		let currentGroup = makeEmptyDetails();
 		let currentPart = makeEmptyPart();
@@ -1739,6 +1983,10 @@ var StyleParser = class {
 				case 2:
 					currentPart.mods.push(processed);
 					break;
+				case 3:
+					currentPart.colors.push(processed);
+					currentPart.values.push(processed);
+					break;
 			}
 			currentPart.all.push(processed);
 		};
@@ -2015,8 +2263,8 @@ function normalizeColorTokenValue(value) {
 	if (value === false) return null;
 	return value;
 }
-const COLOR_VAR_PATTERN = /var\(--([a-z0-9-]+)-color/;
-const COLOR_VAR_COMPONENTS_PATTERN = /var\(--([a-z0-9-]+)-color-(?:rgb|hsl|oklch)/;
+const COLOR_VAR_PATTERN = /^var\(--([a-z0-9-]+)-color[,)]/;
+const COLOR_VAR_COMPONENTS_PATTERN = /^(?:[a-z-]+\(\s*)?var\(--([a-z0-9-]+)-color-(?:rgb|hsl|oklch)[,)]/;
 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/;
@@ -2161,6 +2409,28 @@ function parseStyle(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.
@@ -2184,11 +2454,17 @@ function parseColor(val, ignoreError = false) {
 		}
 		firstColor = extractedColor;
 	}
-	let nameMatch = firstColor.match(COLOR_VAR_PATTERN);
-	if (!nameMatch) nameMatch = firstColor.match(COLOR_VAR_COMPONENTS_PATTERN);
+	const faded = parseAlphaOverride(firstColor);
+	const baseColor = faded ? faded.color : firstColor;
+	let nameMatch = baseColor.match(COLOR_VAR_PATTERN);
+	if (!nameMatch) nameMatch = baseColor.match(COLOR_VAR_COMPONENTS_PATTERN);
 	let opacity;
-	if (firstColor.startsWith("rgb") || firstColor.startsWith("hsl") || firstColor.startsWith("lch") || firstColor.startsWith("oklch")) {
-		const alphaMatch = firstColor.match(RGB_ALPHA_PATTERN);
+	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;
@@ -3156,6 +3432,10 @@ function rscClassRegexGlobal(prefix) {
 */
 const CUSTOM_PROP_DECL = /^\s*(--[a-z0-9_-]+)\s*:\s*(.+?)\s*$/i;
 const SINGLE_VAR_REF = /^var\((--[a-z0-9_-]+)\)$/i;
+/** A `--name-color-{space}` companion holding a color's channel components. */
+const COLOR_COMPONENTS_DECL = /^\s*(--[a-z0-9_-]+-color-(?:rgb|hsl|oklch))\s*:\s*(.+?)\s*$/i;
+/** A component list the browser can type as `<number>+`. */
+const NUMERIC_COMPONENTS = /^[\d\s.+-]+$/;
 var PropertyTypeResolver = class {
 	/** propName → the prop it depends on */
 	pendingDeps = /* @__PURE__ */ new Map();
@@ -3168,6 +3448,15 @@ var PropertyTypeResolver = class {
 	scanDeclarations(declarations, isPropertyDefined, registerProperty) {
 		if (!declarations.includes("--")) return;
 		const parts = declarations.split(/;+/);
+		for (const part of parts) {
+			const match = COLOR_COMPONENTS_DECL.exec(part);
+			if (!match) continue;
+			const propName = match[1];
+			if (isPropertyDefined(propName)) continue;
+			if (NUMERIC_COMPONENTS.test(match[2])) continue;
+			if (isPropertyDefined(propName.slice(0, propName.lastIndexOf("-")))) continue;
+			registerProperty(propName, "*", getDefaultComponents());
+		}
 		for (const part of parts) {
 			if (!part.trim()) continue;
 			const match = CUSTOM_PROP_DECL.exec(part);
@@ -3259,8 +3548,59 @@ function extractCSSWideKeyword(group) {
 	if (group.values.length !== 1 || group.colors.length > 0) return null;
 	return CSS_WIDE_KEYWORDS.has(group.values[0]) ? group.values[0] : null;
 }
+/** A resolved custom-property reference, i.e. `var(--name)` or `var(--name, …)`. */
+const RE_VAR_REFERENCE = /^var\(/;
+/**
+* Assign custom-property references to the style and color slots of a
+* `<line-width> <line-style> <line-color>` shorthand (`border`, `outline`).
+*
+* The parser cannot type a reference, so it buckets `$name` as a plain value and
+* the handler has to place it. A reference fills the first slot still free, in
+* shorthand order: the width takes `values[0]`, then the style, then the color.
+* The style would otherwise arrive as a keyword (`solid`, `dashed`, …) that a
+* reference has no way to match, and the color as `#name` — the `$name-color`
+* form the parser buckets as a color exists to reference a raw CSS custom
+* property, not as the way colors are written, so a reference should not reach
+* for the color slot until the style slot is taken.
+*
+* Lengths are left alone: a second length is not valid in these shorthands, and
+* promoting one would emit an invalid declaration instead of ignoring an extra
+* value. Callers supply their own slot defaults.
+*/
+function assignLineSlots(values, styleKeyword, colorToken) {
+	if (styleKeyword && colorToken) return {
+		style: styleKeyword,
+		color: colorToken
+	};
+	const spare = values.slice(1).filter((value) => RE_VAR_REFERENCE.test(value) && value !== colorToken);
+	return {
+		style: styleKeyword || spare.shift(),
+		color: colorToken || spare.shift()
+	};
+}
 /** Warning keys already emitted, so each distinct offending value warns once. */
 const emittedWarnings$2 = /* @__PURE__ */ new Set();
+/** A resolved custom-property reference anywhere in a token. */
+const RE_HAS_VAR_REFERENCE = /var\(/;
+/**
+* Reject a custom-property reference used where a *token name* is expected.
+*
+* `preset` and `transition` take the name of a design token (`t3`, `fill`) and
+* interpolate it into a CSS custom property — `var(--t3-font-size)`. A reference
+* substituted into that position builds `var(--var(--x)-font-size)`, which is not
+* a valid custom-property name, so the browser drops the declaration and the
+* style silently does nothing. The DSL has no way to indirect a token name
+* through a custom property: the name is needed at build time, and a reference
+* only resolves in the browser.
+*
+* Returns true (warning once per value in dev) so the caller can fall back
+* instead of emitting a declaration that cannot work.
+*/
+function isTokenNameReference(property, name) {
+	if (!RE_HAS_VAR_REFERENCE.test(name)) return false;
+	warnOnceDev(`token-name-reference:${property}:${name}`, `${property}="${name}": a custom property cannot name a token. The name is interpolated into a CSS custom property at build time, so a reference would build an unusable name. It is ignored.`);
+	return true;
+}
 /**
 * Emit a style-level warning at most once per `key`. No-op outside dev mode.
 *
@@ -3314,13 +3654,13 @@ function warnExtraGroupValues(property, input, maxValues) {
 function processGroup$1(group) {
 	const { values, mods, colors } = group;
 	const directions = filterMods(mods, DIRECTIONS);
-	const typeMods = filterMods(mods, BORDER_STYLES);
+	const slots = assignLineSlots(values, filterMods(mods, BORDER_STYLES)[0], colors?.[0]);
 	return {
 		directions,
 		borderValue: {
 			width: values[0] || "var(--border-width)",
-			style: typeMods[0] || "solid",
-			color: colors?.[0] || "var(--border-color, currentColor)"
+			style: slots.style || "solid",
+			color: slots.color || "var(--border-color, currentColor)"
 		}
 	};
 }
@@ -3419,32 +3759,28 @@ function borderStyle({ border }) {
 }
 borderStyle.__lookupStyles = ["border"];
 //#endregion
-//#region src/utils/string.ts
-function toSnakeCase(str) {
-	return str.replace(/[A-Z]/g, (s) => `-${s.toLowerCase()}`);
+//#region src/styles/color.ts
+function colorStyle({ color }) {
+	if (!color) return null;
+	if (color === true) color = "currentColor";
+	color = parseColor(color, true).color || resolveCustomProperties(color);
+	const match = color.match(/var\(--(.+?)-color/);
+	let name = "";
+	if (match) name = match[1];
+	const styles = { color };
+	if (name && name !== "current") {
+		const suffix = getColorSpaceSuffix();
+		Object.assign(styles, {
+			"--current-color": color,
+			[`--current-color-${suffix}`]: convertColorChainToComponentChain(color)
+		});
+	}
+	return styles;
 }
+colorStyle.__lookupStyles = ["color"];
 //#endregion
 //#region src/styles/createStyle.ts
 const CACHE = {};
-/**
-* Convert color fallback chain to component fallback chain.
-* Example: var(--primary-color, var(--secondary-color))
-*   → var(--primary-color-oklch, var(--secondary-color-oklch))
-*/
-function convertColorChainToComponentChain(colorValue) {
-	const suffix = getColorSpaceSuffix();
-	const componentVarMatch = colorValue.match(/^(?:rgb|hsl|oklch)a?\(\s*(var\(--[a-z0-9-]+-color-(?:rgb|hsl|oklch)\))\s*\//);
-	if (componentVarMatch) return componentVarMatch[1];
-	const match = colorValue.match(/var\(--([a-z0-9-]+)-color\s*(?:,\s*(.+))?\)/);
-	if (!match) {
-		const components = getColorSpaceComponents(colorValue);
-		if (components !== colorValue) return components;
-		return colorValue;
-	}
-	const [, name, fallback] = match;
-	if (!fallback) return `var(--${name}-color-${suffix})`;
-	return `var(--${name}-color-${suffix}, ${convertColorChainToComponentChain(fallback.trim())})`;
-}
 function createStyle(styleName, cssStyle, converter) {
 	const key = `${styleName}.${cssStyle ?? ""}`;
 	if (!CACHE[key]) {
@@ -3453,16 +3789,18 @@ function createStyle(styleName, cssStyle, converter) {
 			if (styleValue == null || styleValue === false) return null;
 			let finalCssStyle;
 			const isColorToken = !cssStyle && typeof styleName === "string" && styleName.startsWith("#");
-			if (isColorToken) finalCssStyle = `--${toSnakeCase(styleName.slice(1)).replace(/^-+/, "")}-color`;
-			else finalCssStyle = cssStyle || toSnakeCase(styleName).replace(/^\$/, "--");
+			if (isColorToken) finalCssStyle = `--${normalizeDslName(styleName.slice(1))}-color`;
+			else if (!cssStyle && styleName[0] === "$") finalCssStyle = `--${normalizeDslName(styleName.slice(1))}`;
+			else finalCssStyle = cssStyle || toSnakeCase(styleName);
 			if (isColorToken) {
 				const normalized = normalizeColorTokenValue(styleValue);
 				if (normalized === null) return null;
 				styleValue = normalized;
 			}
-			if (converter && typeof styleValue !== "string") {
-				styleValue = converter(styleValue);
-				if (!styleValue) return null;
+			if (converter) {
+				const converted = converter(styleValue);
+				if (converted) styleValue = converted;
+				else if (typeof styleValue !== "string") return null;
 			}
 			if (typeof styleValue === "string" && finalCssStyle.startsWith("--") && finalCssStyle.endsWith("-color")) {
 				styleValue = styleValue.trim();
@@ -3486,6 +3824,10 @@ function createStyle(styleName, cssStyle, converter) {
 					[finalCssStyle]: colorSpaceStr,
 					[`${finalCssStyle}-${suffix}`]: getColorSpaceComponents(colorSpaceStr)
 				};
+				if (color && colorFuncName(color)) return {
+					[finalCssStyle]: color,
+					[`${finalCssStyle}-${suffix}`]: convertColorChainToComponentChain(color)
+				};
 				return { [finalCssStyle]: color ?? "" };
 			}
 			const processed = parseStyle(styleValue);
@@ -3497,26 +3839,6 @@ function createStyle(styleName, cssStyle, converter) {
 	return CACHE[key];
 }
 //#endregion
-//#region src/styles/color.ts
-function colorStyle({ color }) {
-	if (!color) return null;
-	if (color === true) color = "currentColor";
-	if (typeof color === "string" && (color.startsWith("#") || color.startsWith("(#"))) color = parseColor(color).color || color;
-	const match = color.match(/var\(--(.+?)-color/);
-	let name = "";
-	if (match) name = match[1];
-	const styles = { color };
-	if (name && name !== "current") {
-		const suffix = getColorSpaceSuffix();
-		Object.assign(styles, {
-			"--current-color": color,
-			[`--current-color-${suffix}`]: convertColorChainToComponentChain(color)
-		});
-	}
-	return styles;
-}
-colorStyle.__lookupStyles = ["color"];
-//#endregion
 //#region src/styles/display.ts
 /**
 * Process textOverflow into CSS properties for truncation/clamping.
@@ -3567,14 +3889,15 @@ function processTextOverflow(textOverflow, whiteSpace) {
 */
 function displayStyle({ display, hide, textOverflow, overflow, whiteSpace }) {
 	const result = {};
+	const whiteSpaceValue = whiteSpace ? resolveCustomProperties(whiteSpace) : whiteSpace;
 	if (textOverflow != null && textOverflow !== false) {
-		const textResult = processTextOverflow(textOverflow, whiteSpace);
+		const textResult = processTextOverflow(textOverflow, whiteSpaceValue);
 		if (textResult) Object.assign(result, textResult);
 	}
-	if (overflow && !result["overflow"]) result["overflow"] = overflow;
-	if (whiteSpace && !result["white-space"]) result["white-space"] = whiteSpace;
+	if (overflow && !result["overflow"]) result["overflow"] = resolveCustomProperties(overflow);
+	if (whiteSpaceValue && !result["white-space"]) result["white-space"] = whiteSpaceValue;
 	if (hide) result["display"] = "none";
-	else if (!result["display"] && display) result["display"] = display;
+	else if (!result["display"] && display) result["display"] = resolveCustomProperties(display);
 	if (Object.keys(result).length === 0) return null;
 	return result;
 }
@@ -3655,7 +3978,7 @@ function fillStyle({ fill, backgroundColor, image, backgroundImage, backgroundPo
 		const parsed = parseStyle(colorValue);
 		const firstColor = parsed.groups[0]?.colors[0];
 		const secondColor = parsed.groups[0]?.colors[1];
-		result["background-color"] = firstColor || colorValue;
+		result["background-color"] = firstColor || resolveCustomProperties(colorValue);
 		if (secondColor) result["--tasty-second-fill-color"] = secondColor;
 	}
 	const gradientLayer = result["--tasty-second-fill-color"] ? "linear-gradient(var(--tasty-second-fill-color), var(--tasty-second-fill-color))" : null;
@@ -3666,10 +3989,10 @@ function fillStyle({ fill, backgroundColor, image, backgroundImage, backgroundPo
 	} else if (gradientLayer) result["background-image"] = gradientLayer;
 	if (backgroundPosition) result["background-position"] = parseStyle(backgroundPosition).output || backgroundPosition;
 	if (backgroundSize) result["background-size"] = parseStyle(backgroundSize).output || backgroundSize;
-	if (backgroundRepeat) result["background-repeat"] = backgroundRepeat;
-	if (backgroundAttachment) result["background-attachment"] = backgroundAttachment;
-	if (backgroundOrigin) result["background-origin"] = backgroundOrigin;
-	if (backgroundClip) result["background-clip"] = backgroundClip;
+	if (backgroundRepeat) result["background-repeat"] = resolveCustomProperties(backgroundRepeat);
+	if (backgroundAttachment) result["background-attachment"] = resolveCustomProperties(backgroundAttachment);
+	if (backgroundOrigin) result["background-origin"] = resolveCustomProperties(backgroundOrigin);
+	if (backgroundClip) result["background-clip"] = resolveCustomProperties(backgroundClip);
 	if (Object.keys(result).length === 0) return null;
 	return result;
 }
@@ -3688,7 +4011,7 @@ fillStyle.__lookupStyles = [
 ];
 function svgFillStyle({ svgFill }) {
 	if (!svgFill) return null;
-	svgFill = parseStyle(svgFill).groups[0]?.colors[0] || svgFill;
+	svgFill = parseStyle(svgFill).groups[0]?.colors[0] || resolveCustomProperties(svgFill);
 	return { fill: svgFill };
 }
 svgFillStyle.__lookupStyles = ["svgFill"];
@@ -3698,7 +4021,7 @@ function flowStyle({ display = "block", flow }) {
 	let style;
 	if (display.includes("grid")) style = "grid-auto-flow";
 	else if (display.includes("flex")) style = "flex-flow";
-	return style ? { [style]: flow } : null;
+	return style && flow ? { [style]: resolveCustomProperties(flow) } : null;
 }
 flowStyle.__lookupStyles = ["display", "flow"];
 //#endregion
@@ -4083,17 +4406,18 @@ function outlineStyle({ outline, outlineOffset }) {
 			};
 			const offsetPart = parts[1];
 			const typeMods = filterMods(outlinePart.mods, BORDER_STYLES);
+			const slots = assignLineSlots(outlinePart.values, typeMods[0], outlinePart.colors[0]);
 			result["outline"] = [
 				outlinePart.values[0] || "var(--outline-width)",
-				typeMods[0] || "solid",
-				outlinePart.colors[0] || "var(--outline-color)"
+				slots.style || "solid",
+				slots.color || "var(--outline-color)"
 			].join(" ");
 			if (offsetPart?.values[0]) result["outline-offset"] = offsetPart.values[0];
 		}
 	}
 	if (outlineOffset != null && !result["outline-offset"]) {
 		const offsetValue = typeof outlineOffset === "number" ? `${outlineOffset}px` : outlineOffset;
-		result["outline-offset"] = parseStyle(offsetValue).groups[0]?.values[0] || offsetValue;
+		result["outline-offset"] = parseStyle(offsetValue).groups[0]?.values[0] || resolveCustomProperties(offsetValue);
 	}
 	if (Object.keys(result).length === 0) return null;
 	return result;
@@ -4132,7 +4456,7 @@ paddingStyle.__lookupStyles = [
 function str(val) {
 	if (val == null || val === false || val === "") return null;
 	if (val === true) return "center";
-	return String(val);
+	return resolveCustomProperties(String(val));
 }
 /**
 * Unified placement handler replacing align, justify, and place.
@@ -4214,7 +4538,7 @@ const PRESET_MODIFIERS = new Set([
 function toCSS(value, isNumeric) {
 	if (value == null) return null;
 	if (typeof value === "number") return isNumeric ? `${value}px` : String(value);
-	return parseStyle(String(value)).groups[0]?.values[0] || String(value);
+	return parseStyle(String(value)).groups[0]?.values[0] || resolveCustomProperties(String(value));
 }
 function setCSSValue(styles, styleName, presetName, { varOnly, cssOnly } = {}) {
 	const value = (() => {
@@ -4236,11 +4560,11 @@ function setCSSValue(styles, styleName, presetName, { varOnly, cssOnly } = {}) {
 * - `fontFamily="Arial"` → Arial (direct, no fallback)
 */
 function resolveFontFamily(font, fontFamily) {
-	if (fontFamily) return fontFamily;
+	if (fontFamily) return resolveCustomProperties(fontFamily);
 	if (font == null || font === false) return null;
 	if (font === "monospace") return "var(--font-mono, var(--font-mono-fallback))";
 	if (font === true) return "var(--font-sans, var(--font-sans-fallback))";
-	return `${font}, var(--font-sans, var(--font-sans-fallback))`;
+	return `${resolveCustomProperties(font)}, var(--font-sans, var(--font-sans-fallback))`;
 }
 /**
 * Handles typography preset and individual font properties.
@@ -4274,7 +4598,7 @@ function presetStyle({ preset, fontSize, lineHeight, textTransform, letterSpacin
 		const nameTokens = namePart?.all ?? [];
 		const isModOnly = nameTokens.length > 0 && nameTokens.every((t) => PRESET_MODIFIERS.has(t));
 		const nameToken = namePart?.mods[0] ?? namePart?.values[0] ?? "";
-		const name = isModOnly ? "inherit" : nameToken || "inherit";
+		const name = isModOnly || isTokenNameReference("preset", nameToken) ? "inherit" : nameToken || "inherit";
 		const modTokens = isModOnly ? nameTokens : modPart?.all ?? [];
 		const activeMods = /* @__PURE__ */ new Set();
 		for (const tok of modTokens) if (PRESET_MODIFIERS.has(tok)) activeMods.add(tok);
@@ -4312,7 +4636,7 @@ function presetStyle({ preset, fontSize, lineHeight, textTransform, letterSpacin
 	if (fontStyle != null) if (fontStyle === true) styles["font-style"] = "italic";
 	else if (typeof fontStyle === "string" && CSS_WIDE_KEYWORDS.has(fontStyle)) styles["font-style"] = fontStyle;
 	else styles["font-style"] = fontStyle ? "italic" : "normal";
-	if (textTransform) styles["text-transform"] = textTransform;
+	if (textTransform) styles["text-transform"] = resolveCustomProperties(textTransform);
 	const fontFamily_ = resolveFontFamily(font, fontFamily);
 	if (fontFamily_) styles["font-family"] = fontFamily_;
 	if (Object.keys(styles).length === 0) return null;
@@ -4504,10 +4828,10 @@ function scrollbarStyle({ scrollbar, overflow }) {
 scrollbarStyle.__lookupStyles = ["scrollbar", "overflow"];
 //#endregion
 //#region src/styles/shadow.ts
-function toBoxShadow(shadow) {
-	const { values, mods, colors } = parseStyle(shadow).groups[0] ?? makeEmptyDetails();
+function toBoxShadow(group) {
+	const { values, mods, colors } = group;
 	const mod = mods[0] || "";
-	const shadowColor = (colors && colors[0]) ?? "";
+	const shadowColor = colors[0] ?? "";
 	return [
 		mod,
 		...values,
@@ -4518,7 +4842,8 @@ function shadowStyle({ shadow }) {
 	if (!shadow) return null;
 	if (shadow === true) shadow = "var(--shadow)";
 	if (CSS_WIDE_KEYWORDS.has(shadow)) return { "box-shadow": shadow };
-	return { "box-shadow": shadow.split(",").map(toBoxShadow).join(",") };
+	const { groups } = parseStyle(shadow);
+	return { "box-shadow": groups.map(toBoxShadow).join(",") };
 }
 shadowStyle.__lookupStyles = ["shadow"];
 //#endregion
@@ -4647,6 +4972,7 @@ function transitionStyle({ transition }) {
 	const map = {};
 	transitions.forEach((transition) => {
 		const name = transition[0];
+		if (isTokenNameReference("transition", name)) return;
 		let timing;
 		let easing;
 		let delay;
@@ -4667,6 +4993,7 @@ function transitionStyle({ transition }) {
 			];
 		});
 	});
+	if (Object.keys(map).length === 0) return null;
 	return { transition: Object.entries(map).map(([style, [name, easing, timing, delay]]) => {
 		let value = `${style} ${timing || getTiming(name)}`;
 		if (easing || delay) value += ` ${easing || DEFAULT_EASING}`;
@@ -4703,11 +5030,28 @@ const devMode$2 = isDevEnv();
 function inDevMode() {
 	return isDevEnv();
 }
+/**
+* Read a grid track count, or `undefined` when the value isn't one.
+*
+* Plain digit strings count: every value inside a state map arrives as a
+* string, so `gridColumns: { '': '2', '@media(w < 600px)': '1' }` would
+* otherwise emit `grid-template-columns: 2` — invalid CSS that browsers drop
+* silently.
+*
+* Zero and negatives yield `undefined`. Zero already produced an empty value,
+* and a negative number used to throw inside `String.repeat`.
+*/
+function trackCount(val) {
+	const count = typeof val === "number" ? val : typeof val === "string" && /^\d+$/.test(val.trim()) ? Number(val.trim()) : NaN;
+	return Number.isFinite(count) && count >= 1 ? Math.floor(count) : void 0;
+}
 const columnsConverter = (val) => {
-	if (typeof val === "number") return "minmax(1px, 1fr) ".repeat(val).trim();
+	const count = trackCount(val);
+	return count === void 0 ? void 0 : "minmax(1px, 1fr) ".repeat(count).trim();
 };
 const rowsConverter = (val) => {
-	if (typeof val === "number") return "auto ".repeat(val).trim();
+	const count = trackCount(val);
+	return count === void 0 ? void 0 : "auto ".repeat(count).trim();
 };
 const STYLE_HANDLER_MAP$1 = {};
 let initialHandlerMapSnapshot = null;
@@ -4754,7 +5098,7 @@ function predefine() {
 	defineStyleAlias("gridRows", "grid-template-rows", rowsConverter);
 	defineStyleAlias("gridTemplate", "grid-template", (val) => {
 		if (typeof val !== "string") return;
-		return val.split("/").map((s, i) => (i ? columnsConverter : rowsConverter)(s)).join("/");
+		return val.split("/").map((s, i) => (i ? columnsConverter : rowsConverter)(s) ?? s).join("/");
 	});
 	[
 		displayStyle,
@@ -12157,6 +12501,6 @@ function resetConfig() {
 	delete storage[GLOBAL_INJECTOR_KEY];
 }
 //#endregion
-export { SheetManager as $, getNamedColorHex as $t, FLOW_STYLES as A, registerFunctionPolyfill as At, createStateParserContext as B, stringifyStyles as Bt, BASE_STYLES as C, LAYOUT_CHUNK_STYLES as Ct, COLOR_STYLES as D, formatFunctionRule as Dt, BLOCK_STYLES as E, extractLocalFunctions as Et, hasPipelineCacheEntry as F, getGlobalParser as Ft, StyleInjector as G, createColorFunc as Gt, extractPredefinedStateRefs as H, okhstPlugin as Ht, isSelector as I, getGlobalPredefinedTokens as It, hasLocalCounterStyle as J, colorInitialValueToComponents as Jt, extractLocalCounterStyle as K, isDevEnv as Kt, renderStyles as L, normalizeColorTokenValue as Lt, OUTER_STYLES as M, CUSTOM_UNITS as Mt, POSITION_STYLES as N, DIRECTIONS as Nt, CONTAINER_STYLES as O, hasLocalFunctions as Ot, TEXT_STYLES as P, filterMods as Pt, hasLocalFontFace as Q, getComponentPropertySyntax as Qt, parseStateKey as R, parseColor as Rt, baseStylePropsRegistry as S, FONT_CHUNK_STYLES as St, BLOCK_OUTER_STYLES as T, STYLE_TO_CHUNK as Tt, getGlobalPredefinedStates as U, okhslFunction as Ut, extractLocalPredefinedStates as V, okhstFunction as Vt, setGlobalPredefinedStates as W, okhslPlugin as Wt, fontFaceContentHash as X, getColorSpaceFunc as Xt, extractLocalFontFace as Y, getColorSpaceComponents as Yt, formatFontFaceRule as Z, getColorSpaceSuffix as Zt, isFunctionsPolyfillEnabled as _, propHandlerRegistry as _t, getGlobalCounterStyles as a, Lru as an, DEFAULT_NAME_PREFIX as at, resetConfig as b, DIMENSION_CHUNK_STYLES as bt, getGlobalInjector as c, makeCounterStyleName as ct, getGlobalStyles as d, validateNamePrefix as dt, getRgbValuesFromRgbaString as en, STYLE_HANDLER_MAP as et, getNamePrefix as f, hashString as ft, isConfigLocked as g, parsePropertyToken as gt, hasStylesGenerated as h, hasLocalProperties as ht, getGlobalConfigTokens as i, resolveFunctionColor as in, PropertyTypeResolver as it, INNER_STYLES as j, registerLocalFunctionPolyfills as jt, DIMENSION_STYLES as k, parseFunctionName as kt, getGlobalKeyframes as l, makeKeyframeName as lt, hasGlobalRecipes as m, getEffectiveDefinition as mt, getConfig as n, hslToRgbValues as nn, styleHandlers as nt, getGlobalFontFaces as o, DEFAULT_ZERO_NAME_PREFIX as ot, hasGlobalKeyframes as p, extractLocalProperties as pt, formatCounterStyleRule as q, StyleParser as qt, getEffectiveProperties as r, strToRgb as rn, createStyle as rt, getGlobalFunctions as s, makeClassName as st, configure as t, hexToRgb as tn, defineHandler as tt, getGlobalRecipes as u, tastyClassRegex as ut, isTestEnvironment as v, APPEARANCE_CHUNK_STYLES as vt, BLOCK_INNER_STYLES as w, POSITION_CHUNK_STYLES as wt, generateTypographyTokens as x, DISPLAY_CHUNK_STYLES as xt, markStylesGenerated as y, CHUNK_NAMES as yt, camelToKebab as z, parseStyle as zt };
+export { SheetManager as $, overrideColorAlpha as $t, FLOW_STYLES as A, registerFunctionPolyfill as At, createStateParserContext as B, stringifyStyles as Bt, BASE_STYLES as C, LAYOUT_CHUNK_STYLES as Ct, COLOR_STYLES as D, formatFunctionRule as Dt, BLOCK_STYLES as E, extractLocalFunctions as Et, hasPipelineCacheEntry as F, getGlobalParser as Ft, StyleInjector as G, createColorFunc as Gt, extractPredefinedStateRefs as H, okhstPlugin as Ht, isSelector as I, getGlobalPredefinedTokens as It, hasLocalCounterStyle as J, colorInitialValueToComponents as Jt, extractLocalCounterStyle as K, isDevEnv as Kt, renderStyles as L, normalizeColorTokenValue as Lt, OUTER_STYLES as M, CUSTOM_UNITS as Mt, POSITION_STYLES as N, DIRECTIONS as Nt, CONTAINER_STYLES as O, hasLocalFunctions as Ot, TEXT_STYLES as P, filterMods as Pt, hasLocalFontFace as Q, getComponentPropertySyntax as Qt, parseStateKey as R, parseColor as Rt, baseStylePropsRegistry as S, FONT_CHUNK_STYLES as St, BLOCK_OUTER_STYLES as T, STYLE_TO_CHUNK as Tt, getGlobalPredefinedStates as U, okhslFunction as Ut, extractLocalPredefinedStates as V, okhstFunction as Vt, setGlobalPredefinedStates as W, okhslPlugin as Wt, fontFaceContentHash as X, getColorSpaceComponents as Xt, extractLocalFontFace as Y, convertColorChainToComponentChain as Yt, formatFontFaceRule as Z, getColorSpaceSuffix as Zt, isFunctionsPolyfillEnabled as _, propHandlerRegistry as _t, getGlobalCounterStyles as a, hslToRgbValues as an, DEFAULT_NAME_PREFIX as at, resetConfig as b, DIMENSION_CHUNK_STYLES as bt, getGlobalInjector as c, makeCounterStyleName as ct, getGlobalStyles as d, validateNamePrefix as dt, resolveFunctionColor as en, STYLE_HANDLER_MAP as et, getNamePrefix as f, hashString as ft, isConfigLocked as g, parsePropertyToken as gt, hasStylesGenerated as h, hasLocalProperties as ht, getGlobalConfigTokens as i, hexToRgb as in, PropertyTypeResolver as it, INNER_STYLES as j, registerLocalFunctionPolyfills as jt, DIMENSION_STYLES as k, parseFunctionName as kt, getGlobalKeyframes as l, makeKeyframeName as lt, hasGlobalRecipes as m, getEffectiveDefinition as mt, getConfig as n, getNamedColorHex as nn, styleHandlers as nt, getGlobalFontFaces as o, strToRgb as on, DEFAULT_ZERO_NAME_PREFIX as ot, hasGlobalKeyframes as p, extractLocalProperties as pt, formatCounterStyleRule as q, StyleParser as qt, getEffectiveProperties as r, getRgbValuesFromRgbaString as rn, createStyle as rt, getGlobalFunctions as s, normalizeDslName as sn, makeClassName as st, configure as t, Lru as tn, defineHandler as tt, getGlobalRecipes as u, tastyClassRegex as ut, isTestEnvironment as v, APPEARANCE_CHUNK_STYLES as vt, BLOCK_INNER_STYLES as w, POSITION_CHUNK_STYLES as wt, generateTypographyTokens as x, DISPLAY_CHUNK_STYLES as xt, markStylesGenerated as y, CHUNK_NAMES as yt, camelToKebab as z, parseStyle as zt };
 
-//# sourceMappingURL=config-CCcE_tqx.js.map
+//# sourceMappingURL=config-CwQ-fAsp.js.map