@tenphi/glaze 1.3.1 → 1.4.0

package/dist/index.mjs

@@ -879,52 +879,6 @@ function isPaletteExport(data) {
 	return hasPaletteShape(data);
 }
 
-//#endregion
-//#region src/format-guard.ts
-const NON_NATIVE_FORMATS = new Set(["okhsl", "okhst"]);
-/**
-* Throw when a non-native Glaze color space is requested for an export that
-* emits raw CSS or non-Tasty token maps.
-*/
-function assertNativeFormat(format, method) {
-	if (format !== void 0 && NON_NATIVE_FORMATS.has(format)) throw new Error(`glaze: ${format} output is only supported by tasty() (not a native CSS color space). Use tasty({ format: '${format}' }) or pick a native format (oklch|hsl|rgb) for ${method}().`);
-}
-const SCHEME_FIELDS = [
-	{
-		field: "light",
-		modes: () => true
-	},
-	{
-		field: "dark",
-		modes: (m) => m.dark
-	},
-	{
-		field: "lightContrast",
-		modes: (m) => m.highContrast
-	},
-	{
-		field: "darkContrast",
-		modes: (m) => m.dark && m.highContrast
-	}
-];
-/**
-* Throw when `splitHue` is enabled but any exported color is not pastel.
-* Hue rotation is only clip-free when chroma is bounded by the hue-independent
-* safe chroma (`computeSafeChromaOKLCH`).
-*/
-function assertAllPastel(resolved, modes) {
-	const nonPastel = [];
-	for (const [name, color] of resolved) for (const { field, modes: active } of SCHEME_FIELDS) {
-		if (!active(modes)) continue;
-		if (color[field].pastel !== true) {
-			if (!nonPastel.includes(name)) nonPastel.push(name);
-			break;
-		}
-	}
-	if (nonPastel.length === 0) return;
-	throw new Error(`glaze: splitHue requires every color to be pastel (hue rotation is only clip-free when chroma is bounded by the hue-independent safe chroma). Non-pastel: ${nonPastel.join(", ")}. Set pastel: true (per-theme, per-token, or per-color) or drop splitHue.`);
-}
-
 //#endregion
 //#region src/hc-pair.ts
 function pairNormal(p) {
@@ -1250,10 +1204,267 @@ function mapSaturationDark(s, mode, config) {
 * endpoints (HC bypasses to full range, a manual `contrastLevel` widens
 * toward it — see `activeWindow`).
 */
-function schemeToneRange(isDark, mode, isHighContrast, config) {
-	if (mode === "static") return [0, 1];
-	const win = activeWindow(isHighContrast, isDark ? "dark" : "light", config);
-	return [clamp(toTone(win.lo / 100) / 100, 0, 1), clamp(toTone(win.hi / 100) / 100, 0, 1)];
+function schemeToneRange(isDark, mode, isHighContrast, config) {
+	if (mode === "static") return [0, 1];
+	const win = activeWindow(isHighContrast, isDark ? "dark" : "light", config);
+	return [clamp(toTone(win.lo / 100) / 100, 0, 1), clamp(toTone(win.hi / 100) / 100, 0, 1)];
+}
+
+//#endregion
+//#region src/color-value.ts
+/**
+* Parsing and validation for `GlazeColorValue` — the literal color forms.
+*
+* Hex, the CSS color functions Glaze emits, and the four value-object shapes all
+* land here and come out as OKHSL. Split out of `color-token.ts` so both
+* consumers can reach it without an import cycle: standalone `glaze.color()`
+* tokens build on it, and the resolver needs it for a theme color's `from`. It
+* depends on nothing but the color math, which is what keeps that true.
+*/
+/**
+* Matches the CSS color functions Glaze itself emits (`rgb()`, `hsl()`,
+* `okhsl()`, `oklch()`) plus their legacy alpha aliases (`rgba()`, `hsla()`).
+*
+* Only bare numeric components are supported. Named colors (`red`),
+* relative-color syntax (`from <color> ...`), and angle units other
+* than bare degrees (`deg` is the only suffix tolerated by `parseFloat`)
+* are out of scope.
+*/
+const COLOR_FN_RE = /^(rgba?|hsla?|okhsl|okhst|oklch)\(\s*([^)]*)\s*\)$/i;
+function parseNumberOrPercent(raw, percentScale) {
+	if (raw.endsWith("%")) return parseFloat(raw) / 100 * percentScale;
+	return parseFloat(raw);
+}
+/**
+* Split the body of a CSS color function into its components and detect
+* whether an alpha channel was present.
+*
+* Handles both modern slash syntax (`R G B / A` or `R, G, B / A`) and
+* legacy comma syntax (`R, G, B, A`). The alpha value itself is discarded
+* by the caller — standalone Glaze colors have no opacity field.
+*/
+function splitColorBody(body) {
+	const slashIdx = body.indexOf("/");
+	if (slashIdx !== -1) return {
+		components: body.slice(0, slashIdx).trim().split(/[\s,]+/).filter(Boolean),
+		hadAlpha: body.slice(slashIdx + 1).trim().length > 0
+	};
+	const components = body.split(/[\s,]+/).filter(Boolean);
+	if (components.length === 4) {
+		components.pop();
+		return {
+			components,
+			hadAlpha: true
+		};
+	}
+	return {
+		components,
+		hadAlpha: false
+	};
+}
+function warnDroppedAlpha(input) {
+	console.warn(`glaze: alpha component dropped from "${input}" (standalone color has no opacity field).`);
+}
+function parseColorString(input) {
+	if (input.startsWith("#")) {
+		const parsed = parseHexAlpha(input);
+		if (!parsed) throw new Error(`glaze: invalid hex color "${input}".`);
+		if (parsed.alpha !== void 0) warnDroppedAlpha(input);
+		const [h, s, l] = srgbToOkhsl(parsed.rgb);
+		return {
+			h,
+			s,
+			l
+		};
+	}
+	const m = input.match(COLOR_FN_RE);
+	if (!m) throw new Error(`glaze: unsupported color string "${input}".`);
+	const fn = m[1].toLowerCase();
+	const { components, hadAlpha } = splitColorBody(m[2].trim());
+	if (hadAlpha) warnDroppedAlpha(input);
+	if (components.length !== 3) throw new Error(`glaze: expected 3 components in "${input}".`);
+	switch (fn) {
+		case "rgb":
+		case "rgba": {
+			const [h, s, l] = srgbToOkhsl([
+				parseNumberOrPercent(components[0], 255) / 255,
+				parseNumberOrPercent(components[1], 255) / 255,
+				parseNumberOrPercent(components[2], 255) / 255
+			]);
+			return {
+				h,
+				s,
+				l
+			};
+		}
+		case "hsl":
+		case "hsla": {
+			const [oh, os, ol] = srgbToOkhsl(hslToSrgb(parseFloat(components[0]), parseNumberOrPercent(components[1], 1), parseNumberOrPercent(components[2], 1)));
+			return {
+				h: oh,
+				s: os,
+				l: ol
+			};
+		}
+		case "okhsl": return {
+			h: parseFloat(components[0]),
+			s: parseNumberOrPercent(components[1], 1),
+			l: parseNumberOrPercent(components[2], 1)
+		};
+		case "okhst": return okhstToOkhsl({
+			h: parseFloat(components[0]),
+			s: parseNumberOrPercent(components[1], 1),
+			t: parseNumberOrPercent(components[2], 1)
+		});
+		case "oklch": {
+			const L = parseNumberOrPercent(components[0], 1);
+			const C = parseNumberOrPercent(components[1], .4);
+			const hRad = parseFloat(components[2]) * Math.PI / 180;
+			const [h, s, l] = oklabToOkhsl([
+				L,
+				C * Math.cos(hRad),
+				C * Math.sin(hRad)
+			]);
+			return {
+				h,
+				s,
+				l
+			};
+		}
+	}
+	throw new Error(`glaze: unsupported color function "${fn}".`);
+}
+/**
+* Validate a user-supplied `OkhslColor`. Catches the common 0-100 vs 0-1
+* confusion (the structured form uses 0-100, OKHSL objects use 0-1).
+*/
+function validateOkhslColor(value) {
+	const { h, s, l } = value;
+	if (!Number.isFinite(h) || !Number.isFinite(s) || !Number.isFinite(l)) throw new Error("glaze.color: OkhslColor h/s/l must be finite numbers.");
+	if (s > 1.5 || l > 1.5) throw new Error("glaze.color: OkhslColor s/l must be in 0–1 range. Did you mean the structured form { hue, saturation, tone } (which uses 0–100)?");
+}
+/** Validate a user-supplied `{ r, g, b }` object in 0–255. */
+function validateRgbColor(value) {
+	for (const key of [
+		"r",
+		"g",
+		"b"
+	]) {
+		const n = value[key];
+		if (!Number.isFinite(n) || n < 0 || n > 255) throw new Error(`glaze.color: RgbColor ${key} must be a finite number in 0–255 (got ${n}).`);
+	}
+}
+/** Validate a user-supplied `{ l, c, h }` OKLCh object. */
+function validateOklchColor(value) {
+	const { l, c, h } = value;
+	if (!Number.isFinite(l) || !Number.isFinite(c) || !Number.isFinite(h)) throw new Error("glaze.color: OklchColor l/c/h must be finite numbers.");
+	if (l > 1.5 || c > 1.5) throw new Error("glaze.color: OklchColor l/c must be in 0–1 range (matching oklch() strings).");
+}
+function oklchComponentsToOkhsl(l, c, hDeg) {
+	const hRad = hDeg * Math.PI / 180;
+	const [h, s, outL] = oklabToOkhsl([
+		l,
+		c * Math.cos(hRad),
+		c * Math.sin(hRad)
+	]);
+	return {
+		h,
+		s,
+		l: outL
+	};
+}
+function isRgbColorObject(value) {
+	return "r" in value && "g" in value && "b" in value;
+}
+function isOklchColorObject(value) {
+	return "c" in value && "l" in value && "h" in value;
+}
+function isOkhstColorObject(value) {
+	return "t" in value && "h" in value && "s" in value;
+}
+/** Validate a user-supplied `{ h, s, t }` OKHST object (s/t in 0–1). */
+function validateOkhstColor(value) {
+	const { h, s, t } = value;
+	if (!Number.isFinite(h) || !Number.isFinite(s) || !Number.isFinite(t)) throw new Error("glaze.color: OkhstColor h/s/t must be finite numbers.");
+	if (s > 1.5 || t > 1.5) throw new Error("glaze.color: OkhstColor s/t must be in 0–1 range. Did you mean the structured form { hue, saturation, tone } (which uses 0–100)?");
+}
+/**
+* Extract an OKHSL color from any `GlazeColorValue` form. Also used by
+* `glaze.shadow()` so all shadow inputs (hex, color functions, OKHSL,
+* literal objects) go through one parser.
+*/
+function extractOkhslFromValue(value) {
+	if (typeof value === "string") return parseColorString(value);
+	if (Array.isArray(value)) throw new Error("glaze.color: RGB tuple [r, g, b] is no longer supported — use { r, g, b } instead.");
+	if (isRgbColorObject(value)) {
+		validateRgbColor(value);
+		const [h, s, l] = srgbToOkhsl([
+			value.r / 255,
+			value.g / 255,
+			value.b / 255
+		]);
+		return {
+			h,
+			s,
+			l
+		};
+	}
+	if (isOklchColorObject(value)) {
+		validateOklchColor(value);
+		return oklchComponentsToOkhsl(value.l, value.c, value.h);
+	}
+	if (isOkhstColorObject(value)) {
+		validateOkhstColor(value);
+		return okhstToOkhsl(value);
+	}
+	validateOkhslColor(value);
+	return value;
+}
+
+//#endregion
+//#region src/format-guard.ts
+const NON_NATIVE_FORMATS = new Set(["okhsl", "okhst"]);
+/**
+* Throw when a non-native Glaze color space is requested for an export that
+* emits raw CSS or non-Tasty token maps.
+*/
+function assertNativeFormat(format, method) {
+	if (format !== void 0 && NON_NATIVE_FORMATS.has(format)) throw new Error(`glaze: ${format} output is only supported by tasty() (not a native CSS color space). Use tasty({ format: '${format}' }) or pick a native format (oklch|hsl|rgb) for ${method}().`);
+}
+const SCHEME_FIELDS = [
+	{
+		field: "light",
+		modes: () => true
+	},
+	{
+		field: "dark",
+		modes: (m) => m.dark
+	},
+	{
+		field: "lightContrast",
+		modes: (m) => m.highContrast
+	},
+	{
+		field: "darkContrast",
+		modes: (m) => m.dark && m.highContrast
+	}
+];
+/**
+* Throw when `splitHue` is enabled but any exported color is not pastel.
+* Hue rotation is only clip-free when chroma is bounded by the hue-independent
+* safe chroma (`computeSafeChromaOKLCH`).
+*/
+function assertAllPastel(resolved, modes) {
+	const nonPastel = [];
+	for (const [name, color] of resolved) for (const { field, modes: active } of SCHEME_FIELDS) {
+		if (!active(modes)) continue;
+		if (color[field].pastel !== true) {
+			if (!nonPastel.includes(name)) nonPastel.push(name);
+			break;
+		}
+	}
+	if (nonPastel.length === 0) return;
+	throw new Error(`glaze: splitHue requires every color to be pastel (hue rotation is only clip-free when chroma is bounded by the hue-independent safe chroma). Non-pastel: ${nonPastel.join(", ")}. Set pastel: true (per-theme, per-token, or per-color) or drop splitHue.`);
 }
 
 //#endregion
@@ -1894,6 +2105,16 @@ function computeShadow(bg, fg, intensity, tuning) {
 * its base / bg / fg / target dependencies.
 */
 /**
+* Does this color sit at an absolute tone — either authored, or carried by a
+* `from` value? That is the test for "root" (placed on its own) as opposed to
+* "dependent" (placed relative to a base), and it is what lets a bare
+* `{ from: '#2F5BFF' }` stand as a complete color definition.
+*/
+function hasAbsoluteTone(def) {
+	if (def.tone === void 0) return def.from !== void 0;
+	return isAbsoluteTone(def.tone);
+}
+/**
 * Reject a `contrast` pair whose two entries measure in different metrics.
 *
 * A WCAG ratio and an APCA Lc are different scales, so `[4.5, { apca: 75 }]`
@@ -1932,11 +2153,16 @@ function validateColorDefs(defs, externalBases) {
 		}
 		const regDef = def;
 		assertConsistentContrastMetric(name, regDef.contrast);
+		if (regDef.from !== void 0) try {
+			extractOkhslFromValue(regDef.from);
+		} catch (error) {
+			throw new Error(`glaze: color "${name}" has an invalid "from" value. ${error instanceof Error ? error.message : String(error)}`, { cause: error });
+		}
 		if (regDef.contrast !== void 0 && !regDef.base) throw new Error(`glaze: color "${name}" has "contrast" without "base".`);
 		if (regDef.tone !== void 0 && !isAbsoluteTone(regDef.tone) && !regDef.base) throw new Error(`glaze: color "${name}" has relative "tone" without "base".`);
 		if (regDef.base && !allNames.has(regDef.base)) throw new Error(`glaze: color "${name}" references non-existent base "${regDef.base}".`);
 		if (regDef.base && localNames.has(regDef.base) && isShadowDef(defs[regDef.base])) throw new Error(`glaze: color "${name}" base "${regDef.base}" references a shadow color.`);
-		if (!isAbsoluteTone(regDef.tone) && regDef.base === void 0) throw new Error(`glaze: color "${name}" must have either absolute "tone" (root) or "base" (dependent).`);
+		if (!hasAbsoluteTone(regDef) && regDef.base === void 0) throw new Error(`glaze: color "${name}" must have either absolute "tone" (root), "from" (a literal color), or "base" (dependent).`);
 		if (regDef.contrast !== void 0 && regDef.opacity !== void 0) console.warn(`glaze: color "${name}" has both "contrast" and "opacity". Opacity makes perceived tone unpredictable.`);
 	}
 	const visited = /* @__PURE__ */ new Set();
@@ -2193,7 +2419,43 @@ function extremeDarkTone(authorTone, mode, isHighContrast, baseResolved, config)
 	const shift = extremeLightTone - lightBase.t * 100;
 	return clamp(darkBase.t * 100 + (mode === "auto" ? -shift : shift), 0, 100);
 }
+/**
+* Hue, absolute saturation (0–1) and tone (0–100) read off a color def's `from`.
+*
+* Deliberately not memoized. Keying a cache on the def object looks free — a
+* resolve reads this a handful of times per color — but defs are stored by
+* reference, so mutating one in place and re-setting it would invalidate the
+* theme's own cache while a def-keyed cache quietly served the old color. The
+* parse is a few microseconds against a resolve that is already cached; that is
+* not a trade worth a staleness bug.
+*/
+function fromSeed(def) {
+	if (def.from === void 0) return void 0;
+	const { h, s, l } = extractOkhslFromValue(def.from);
+	return {
+		hue: h,
+		saturation: s,
+		tone: toTone(l)
+	};
+}
+/**
+* The config this color resolves against.
+*
+* A `from` color carries a literal value, so its light variant has to survive
+* the light tone window intact — hence a local `lightTone: false`, the same
+* default the value-shorthand form of `glaze.color()` applies. Only the light
+* window is dropped: dark and high contrast keep theirs, because that is where
+* the color is expected to adapt.
+*/
+function configForColor(def, config) {
+	if (def.from === void 0) return config;
+	return {
+		...config,
+		lightTone: false
+	};
+}
 function resolveRootColor(def, isHighContrast, config) {
+	if (def.tone === void 0) return clamp(fromSeed(def).tone, 0, 100);
 	return clamp(passTone(def.tone, isHighContrast, config).value, 0, 100);
 }
 /**
@@ -2212,16 +2474,20 @@ function resolveRootColor(def, isHighContrast, config) {
 function resolveChannels(def, ctx, isDark) {
 	const mode = def.mode ?? "auto";
 	const satFactor = clamp(def.saturation ?? 1, 0, 1);
+	const seed = fromSeed(def);
+	const fromHue = seed !== void 0 && def.hue === void 0 ? seed.hue : void 0;
+	const fromSaturation = seed !== void 0 && def.saturation === void 0 ? seed.saturation : void 0;
 	if (!isDark || mode === "static") return {
-		hue: resolveEffectiveHue(ctx.hue, def.hue),
-		saturation: clamp(satFactor * ctx.saturation / 100, 0, 1)
+		hue: fromHue ?? resolveEffectiveHue(ctx.hue, def.hue),
+		saturation: fromSaturation ?? clamp(satFactor * ctx.saturation / 100, 0, 1)
 	};
 	const darkSeedSaturation = ctx.darkSaturation ?? ctx.saturation;
 	const darkFactor = clamp(def.darkSaturation ?? satFactor, 0, 1);
-	const explicitDark = def.darkSaturation !== void 0 || ctx.darkSaturation !== void 0;
-	const raw = darkFactor * darkSeedSaturation / 100;
+	const fromDark = fromSaturation !== void 0 && def.darkSaturation === void 0;
+	const raw = fromDark ? fromSaturation : darkFactor * darkSeedSaturation / 100;
+	const explicitDark = fromDark ? false : def.darkSaturation !== void 0 || ctx.darkSaturation !== void 0;
 	return {
-		hue: resolveEffectiveHue(ctx.darkHue ?? ctx.hue, def.darkHue ?? def.hue),
+		hue: fromHue !== void 0 && def.darkHue === void 0 ? fromHue : resolveEffectiveHue(ctx.darkHue ?? ctx.hue, def.darkHue ?? def.hue),
 		saturation: clamp(explicitDark ? raw : mapSaturationDark(raw, mode, ctx.config), 0, 1)
 	};
 }
@@ -2232,30 +2498,32 @@ function resolveDependentColor(name, def, ctx, isHighContrast, isDark, channels,
 	const mode = def.mode ?? "auto";
 	const flip = def.autoFlip ?? ctx.config.autoFlip;
 	const pastel = effectivePastel;
+	const config = configForColor(def, ctx.config);
 	const baseVariant = getSchemeVariant(baseResolved, isDark, isHighContrast);
 	const baseTone = baseVariant.t * 100;
 	let preferredTone;
 	let isExtreme = false;
-	const rawTone = def.tone;
+	const seed = fromSeed(def);
+	const rawTone = def.tone ?? (seed !== void 0 ? seed.tone : void 0);
 	if (rawTone === void 0) preferredTone = baseTone;
 	else {
-		const parsed = passTone(rawTone, isHighContrast, ctx.config);
+		const parsed = passTone(rawTone, isHighContrast, config);
 		if (parsed.kind === "relative") if (isDark && mode === "auto") {
 			const baseLightTone = getSchemeVariant(baseResolved, false, isHighContrast).t * 100;
-			preferredTone = mapToneForScheme(clamp(baseLightTone + applyToneFlip(parsed.value, baseLightTone, flip), 0, 100), "auto", true, isHighContrast, ctx.config);
+			preferredTone = mapToneForScheme(clamp(baseLightTone + applyToneFlip(parsed.value, baseLightTone, flip), 0, 100), "auto", true, isHighContrast, config);
 		} else preferredTone = clamp(baseTone + applyToneFlip(parsed.value, baseTone, flip), 0, 100);
 		else {
 			isExtreme = parsed.kind === "extreme";
-			if (isExtreme && isDark && mode !== "static") preferredTone = extremeDarkTone(parsed.value, mode, isHighContrast, baseResolved, ctx.config);
-			else preferredTone = mapToneForScheme(parsed.value, mode, isDark, isHighContrast, ctx.config);
+			if (isExtreme && isDark && mode !== "static") preferredTone = extremeDarkTone(parsed.value, mode, isHighContrast, baseResolved, config);
+			else preferredTone = mapToneForScheme(parsed.value, mode, isDark, isHighContrast, config);
 		}
 	}
 	const rawContrast = def.contrast;
 	if (rawContrast !== void 0) {
-		const resolvedContrast = resolveContrastSpec(rawContrast, isHighContrast, ctx.config, polarity);
+		const resolvedContrast = resolveContrastSpec(rawContrast, isHighContrast, config, polarity);
 		const baseOkhsl = toOkhslVariant(baseVariant);
 		const baseLinearRgb = okhslToLinearSrgb(baseOkhsl.h, baseOkhsl.s, baseOkhsl.l, baseVariant.pastel ?? ctx.config.pastel);
-		const preferredRange = isExtreme ? [0, 1] : schemeToneRange(isDark, mode, isHighContrast, ctx.config);
+		const preferredRange = isExtreme ? [0, 1] : schemeToneRange(isDark, mode, isHighContrast, config);
 		let initialDirection;
 		if (preferredTone < baseTone) initialDirection = "darker";
 		else if (preferredTone > baseTone) initialDirection = "lighter";
@@ -2294,11 +2562,12 @@ function resolveColorForScheme(name, def, ctx, isDark, isHighContrast) {
 	if (isMixDef(def)) return resolveMixForScheme(name, def, ctx, isDark, isHighContrast);
 	const regDef = def;
 	const mode = regDef.mode ?? "auto";
-	const isRoot = isAbsoluteTone(regDef.tone) && !regDef.base;
+	const isRoot = hasAbsoluteTone(regDef) && !regDef.base;
 	const channels = resolveChannels(regDef, ctx, isDark);
 	const polarity = roleToPolarity(resolveRole(name, def, ctx));
 	const pastel = regDef.pastel ?? ctx.config.pastel;
-	const finalTone = isRoot ? mapToneForScheme(resolveRootColor(regDef, isHighContrast, ctx.config), mode, isDark, isHighContrast, ctx.config) : resolveDependentColor(name, regDef, ctx, isHighContrast, isDark, channels, polarity, pastel);
+	const config = configForColor(regDef, ctx.config);
+	const finalTone = isRoot ? mapToneForScheme(resolveRootColor(regDef, isHighContrast, config), mode, isDark, isHighContrast, config) : resolveDependentColor(name, regDef, ctx, isHighContrast, isDark, channels, polarity, pastel);
 	return {
 		h: channels.hue,
 		s: channels.saturation,
@@ -2591,20 +2860,30 @@ function themeHuePlan(name, def, variant, ctx, scheme) {
 			value: String(variant.h)
 		}]
 	};
-	if (regDef.hue === void 0 && regDef.darkHue === void 0) return {
+	if (regDef.hue === void 0 && regDef.darkHue === void 0 && regDef.from === void 0) return {
 		hueVar: baseHueVar,
 		inline: false,
 		declarations: []
 	};
 	const authored = scheme === "dark" ? regDef.darkHue ?? regDef.hue : regDef.hue;
-	if (authored === void 0) return {
-		hueVar: `var(${prop})`,
-		inline: false,
-		declarations: [{
-			prop,
-			value: baseHueVar
-		}]
-	};
+	if (authored === void 0) {
+		if (regDef.from !== void 0) return {
+			hueVar: `var(${prop})`,
+			inline: false,
+			declarations: [{
+				prop,
+				value: String(variant.h)
+			}]
+		};
+		return {
+			hueVar: `var(${prop})`,
+			inline: false,
+			declarations: [{
+				prop,
+				value: baseHueVar
+			}]
+		};
+	}
 	const parsed = parseRelativeOrAbsolute(authored);
 	if (parsed.relative) {
 		const sign = parsed.value >= 0 ? "+" : "-";
@@ -3086,173 +3365,6 @@ function sparseValueFormLocal(userOverride) {
 	};
 }
 /**
-* Matches the CSS color functions Glaze itself emits (`rgb()`, `hsl()`,
-* `okhsl()`, `oklch()`) plus their legacy alpha aliases (`rgba()`, `hsla()`).
-*
-* Only bare numeric components are supported. Named colors (`red`),
-* relative-color syntax (`from <color> ...`), and angle units other
-* than bare degrees (`deg` is the only suffix tolerated by `parseFloat`)
-* are out of scope.
-*/
-const COLOR_FN_RE = /^(rgba?|hsla?|okhsl|okhst|oklch)\(\s*([^)]*)\s*\)$/i;
-function parseNumberOrPercent(raw, percentScale) {
-	if (raw.endsWith("%")) return parseFloat(raw) / 100 * percentScale;
-	return parseFloat(raw);
-}
-/**
-* Split the body of a CSS color function into its components and detect
-* whether an alpha channel was present.
-*
-* Handles both modern slash syntax (`R G B / A` or `R, G, B / A`) and
-* legacy comma syntax (`R, G, B, A`). The alpha value itself is discarded
-* by the caller — standalone Glaze colors have no opacity field.
-*/
-function splitColorBody(body) {
-	const slashIdx = body.indexOf("/");
-	if (slashIdx !== -1) return {
-		components: body.slice(0, slashIdx).trim().split(/[\s,]+/).filter(Boolean),
-		hadAlpha: body.slice(slashIdx + 1).trim().length > 0
-	};
-	const components = body.split(/[\s,]+/).filter(Boolean);
-	if (components.length === 4) {
-		components.pop();
-		return {
-			components,
-			hadAlpha: true
-		};
-	}
-	return {
-		components,
-		hadAlpha: false
-	};
-}
-function warnDroppedAlpha(input) {
-	console.warn(`glaze: alpha component dropped from "${input}" (standalone color has no opacity field).`);
-}
-function parseColorString(input) {
-	if (input.startsWith("#")) {
-		const parsed = parseHexAlpha(input);
-		if (!parsed) throw new Error(`glaze: invalid hex color "${input}".`);
-		if (parsed.alpha !== void 0) warnDroppedAlpha(input);
-		const [h, s, l] = srgbToOkhsl(parsed.rgb);
-		return {
-			h,
-			s,
-			l
-		};
-	}
-	const m = input.match(COLOR_FN_RE);
-	if (!m) throw new Error(`glaze: unsupported color string "${input}".`);
-	const fn = m[1].toLowerCase();
-	const { components, hadAlpha } = splitColorBody(m[2].trim());
-	if (hadAlpha) warnDroppedAlpha(input);
-	if (components.length !== 3) throw new Error(`glaze: expected 3 components in "${input}".`);
-	switch (fn) {
-		case "rgb":
-		case "rgba": {
-			const [h, s, l] = srgbToOkhsl([
-				parseNumberOrPercent(components[0], 255) / 255,
-				parseNumberOrPercent(components[1], 255) / 255,
-				parseNumberOrPercent(components[2], 255) / 255
-			]);
-			return {
-				h,
-				s,
-				l
-			};
-		}
-		case "hsl":
-		case "hsla": {
-			const [oh, os, ol] = srgbToOkhsl(hslToSrgb(parseFloat(components[0]), parseNumberOrPercent(components[1], 1), parseNumberOrPercent(components[2], 1)));
-			return {
-				h: oh,
-				s: os,
-				l: ol
-			};
-		}
-		case "okhsl": return {
-			h: parseFloat(components[0]),
-			s: parseNumberOrPercent(components[1], 1),
-			l: parseNumberOrPercent(components[2], 1)
-		};
-		case "okhst": return okhstToOkhsl({
-			h: parseFloat(components[0]),
-			s: parseNumberOrPercent(components[1], 1),
-			t: parseNumberOrPercent(components[2], 1)
-		});
-		case "oklch": {
-			const L = parseNumberOrPercent(components[0], 1);
-			const C = parseNumberOrPercent(components[1], .4);
-			const hRad = parseFloat(components[2]) * Math.PI / 180;
-			const [h, s, l] = oklabToOkhsl([
-				L,
-				C * Math.cos(hRad),
-				C * Math.sin(hRad)
-			]);
-			return {
-				h,
-				s,
-				l
-			};
-		}
-	}
-	throw new Error(`glaze: unsupported color function "${fn}".`);
-}
-/**
-* Validate a user-supplied `OkhslColor`. Catches the common 0-100 vs 0-1
-* confusion (the structured form uses 0-100, OKHSL objects use 0-1).
-*/
-function validateOkhslColor(value) {
-	const { h, s, l } = value;
-	if (!Number.isFinite(h) || !Number.isFinite(s) || !Number.isFinite(l)) throw new Error("glaze.color: OkhslColor h/s/l must be finite numbers.");
-	if (s > 1.5 || l > 1.5) throw new Error("glaze.color: OkhslColor s/l must be in 0–1 range. Did you mean the structured form { hue, saturation, tone } (which uses 0–100)?");
-}
-/** Validate a user-supplied `{ r, g, b }` object in 0–255. */
-function validateRgbColor(value) {
-	for (const key of [
-		"r",
-		"g",
-		"b"
-	]) {
-		const n = value[key];
-		if (!Number.isFinite(n) || n < 0 || n > 255) throw new Error(`glaze.color: RgbColor ${key} must be a finite number in 0–255 (got ${n}).`);
-	}
-}
-/** Validate a user-supplied `{ l, c, h }` OKLCh object. */
-function validateOklchColor(value) {
-	const { l, c, h } = value;
-	if (!Number.isFinite(l) || !Number.isFinite(c) || !Number.isFinite(h)) throw new Error("glaze.color: OklchColor l/c/h must be finite numbers.");
-	if (l > 1.5 || c > 1.5) throw new Error("glaze.color: OklchColor l/c must be in 0–1 range (matching oklch() strings).");
-}
-function oklchComponentsToOkhsl(l, c, hDeg) {
-	const hRad = hDeg * Math.PI / 180;
-	const [h, s, outL] = oklabToOkhsl([
-		l,
-		c * Math.cos(hRad),
-		c * Math.sin(hRad)
-	]);
-	return {
-		h,
-		s,
-		l: outL
-	};
-}
-function isRgbColorObject(value) {
-	return "r" in value && "g" in value && "b" in value;
-}
-function isOklchColorObject(value) {
-	return "c" in value && "l" in value && "h" in value;
-}
-function isOkhstColorObject(value) {
-	return "t" in value && "h" in value && "s" in value;
-}
-/** Validate a user-supplied `{ h, s, t }` OKHST object (s/t in 0–1). */
-function validateOkhstColor(value) {
-	const { h, s, t } = value;
-	if (!Number.isFinite(h) || !Number.isFinite(s) || !Number.isFinite(t)) throw new Error("glaze.color: OkhstColor h/s/t must be finite numbers.");
-	if (s > 1.5 || t > 1.5) throw new Error("glaze.color: OkhstColor s/t must be in 0–1 range. Did you mean the structured form { hue, saturation, tone } (which uses 0–100)?");
-}
-/**
 * Validate a user-supplied `opacity` override on `glaze.color()`.
 * Must be a finite number in `0..=1`.
 */
@@ -3302,38 +3414,6 @@ function validateStandaloneName(name) {
 	}
 }
 /**
-* Extract an OKHSL color from any `GlazeColorValue` form. Also used by
-* `glaze.shadow()` so all shadow inputs (hex, color functions, OKHSL,
-* literal objects) go through one parser.
-*/
-function extractOkhslFromValue(value) {
-	if (typeof value === "string") return parseColorString(value);
-	if (Array.isArray(value)) throw new Error("glaze.color: RGB tuple [r, g, b] is no longer supported — use { r, g, b } instead.");
-	if (isRgbColorObject(value)) {
-		validateRgbColor(value);
-		const [h, s, l] = srgbToOkhsl([
-			value.r / 255,
-			value.g / 255,
-			value.b / 255
-		]);
-		return {
-			h,
-			s,
-			l
-		};
-	}
-	if (isOklchColorObject(value)) {
-		validateOklchColor(value);
-		return oklchComponentsToOkhsl(value.l, value.c, value.h);
-	}
-	if (isOkhstColorObject(value)) {
-		validateOkhstColor(value);
-		return okhstToOkhsl(value);
-	}
-	validateOkhslColor(value);
-	return value;
-}
-/**
 * Resolve `'max'` / `'min'` to their literal author tones (100 / 0).
 *
 * The hidden `STANDALONE_SEED` anchor exists only so `contrast` has something