@tenphi/glaze 0.3.0 → 0.5.0

package/dist/index.mjs

@@ -439,23 +439,26 @@ function parseHex(hex) {
 	}
 	return null;
 }
+function fmt$1(value, decimals) {
+	return parseFloat(value.toFixed(decimals)).toString();
+}
 /**
 * Format OKHSL values as a CSS `okhsl(H S% L%)` string.
 * h: 0–360, s: 0–100, l: 0–100 (percentage scale for s and l).
 */
 function formatOkhsl(h, s, l) {
-	return `okhsl(${h.toFixed(1)} ${s.toFixed(1)}% ${l.toFixed(1)}%)`;
+	return `okhsl(${fmt$1(h, 1)} ${fmt$1(s, 1)}% ${fmt$1(l, 1)}%)`;
 }
 /**
-* Format OKHSL values as a CSS `rgb(R, G, B)` string with fractional 0–255 values.
+* Format OKHSL values as a CSS `rgb(R G B)` string with rounded integer values.
 * h: 0–360, s: 0–100, l: 0–100 (percentage scale for s and l).
 */
 function formatRgb(h, s, l) {
 	const [r, g, b] = okhslToSrgb(h, s / 100, l / 100);
-	return `rgb(${(r * 255).toFixed(3)}, ${(g * 255).toFixed(3)}, ${(b * 255).toFixed(3)})`;
+	return `rgb(${Math.round(r * 255)} ${Math.round(g * 255)} ${Math.round(b * 255)})`;
 }
 /**
-* Format OKHSL values as a CSS `hsl(H, S%, L%)` string.
+* Format OKHSL values as a CSS `hsl(H S% L%)` string.
 * h: 0–360, s: 0–100, l: 0–100 (percentage scale for s and l).
 */
 function formatHsl(h, s, l) {
@@ -472,10 +475,10 @@ function formatHsl(h, s, l) {
 		else if (max === g) hh = ((b - r) / delta + 2) * 60;
 		else hh = ((r - g) / delta + 4) * 60;
 	}
-	return `hsl(${hh.toFixed(1)}, ${(ss * 100).toFixed(1)}%, ${(ll * 100).toFixed(1)}%)`;
+	return `hsl(${fmt$1(hh, 1)} ${fmt$1(ss * 100, 1)}% ${fmt$1(ll * 100, 1)}%)`;
 }
 /**
-* Format OKHSL values as a CSS `oklch(L% C H)` string.
+* Format OKHSL values as a CSS `oklch(L C H)` string.
 * h: 0–360, s: 0–100, l: 0–100 (percentage scale for s and l).
 */
 function formatOklch(h, s, l) {
@@ -483,7 +486,7 @@ function formatOklch(h, s, l) {
 	const C = Math.sqrt(a * a + b * b);
 	let hh = Math.atan2(b, a) * (180 / Math.PI);
 	hh = constrainAngle(hh);
-	return `oklch(${(L * 100).toFixed(1)}% ${C.toFixed(4)} ${hh.toFixed(1)})`;
+	return `oklch(${fmt$1(L, 4)} ${fmt$1(C, 4)} ${fmt$1(hh, 1)})`;
 }
 
 //#endregion
@@ -709,14 +712,70 @@ function pairNormal(p) {
 function pairHC(p) {
 	return Array.isArray(p) ? p[1] : p;
 }
+function isShadowDef(def) {
+	return def.type === "shadow";
+}
+const DEFAULT_SHADOW_TUNING = {
+	saturationFactor: .18,
+	maxSaturation: .25,
+	lightnessFactor: .25,
+	lightnessBounds: [.05, .2],
+	minGapTarget: .05,
+	alphaMax: .6,
+	bgHueBlend: .2
+};
+function resolveShadowTuning(perColor) {
+	return {
+		...DEFAULT_SHADOW_TUNING,
+		...globalConfig.shadowTuning,
+		...perColor,
+		lightnessBounds: perColor?.lightnessBounds ?? globalConfig.shadowTuning?.lightnessBounds ?? DEFAULT_SHADOW_TUNING.lightnessBounds
+	};
+}
+function circularLerp(a, b, t) {
+	let diff = b - a;
+	if (diff > 180) diff -= 360;
+	else if (diff < -180) diff += 360;
+	return ((a + diff * t) % 360 + 360) % 360;
+}
+function computeShadow(bg, fg, intensity, tuning) {
+	const EPSILON = 1e-6;
+	const clampedIntensity = clamp(intensity, 0, 100);
+	const contrastWeight = fg ? Math.abs(bg.l - fg.l) : 1;
+	const deltaL = clampedIntensity / 100 * contrastWeight;
+	const h = fg ? circularLerp(fg.h, bg.h, tuning.bgHueBlend) : bg.h;
+	const s = fg ? Math.min(fg.s * tuning.saturationFactor, tuning.maxSaturation) : 0;
+	let lSh = clamp(bg.l * tuning.lightnessFactor, tuning.lightnessBounds[0], tuning.lightnessBounds[1]);
+	lSh = Math.max(Math.min(lSh, bg.l - tuning.minGapTarget), 0);
+	const t = deltaL / Math.max(bg.l - lSh, EPSILON);
+	const alpha = tuning.alphaMax * Math.tanh(t / tuning.alphaMax);
+	return {
+		h,
+		s,
+		l: lSh,
+		alpha
+	};
+}
 function validateColorDefs(defs) {
 	const names = new Set(Object.keys(defs));
 	for (const [name, def] of Object.entries(defs)) {
-		if (def.contrast !== void 0 && !def.base) throw new Error(`glaze: color "${name}" has "contrast" without "base".`);
-		if (def.lightness !== void 0 && !isAbsoluteLightness(def.lightness) && !def.base) throw new Error(`glaze: color "${name}" has relative "lightness" without "base".`);
-		if (isAbsoluteLightness(def.lightness) && def.base !== void 0) console.warn(`glaze: color "${name}" has absolute "lightness" and "base". Absolute lightness takes precedence.`);
-		if (def.base && !names.has(def.base)) throw new Error(`glaze: color "${name}" references non-existent base "${def.base}".`);
-		if (!isAbsoluteLightness(def.lightness) && def.base === void 0) throw new Error(`glaze: color "${name}" must have either absolute "lightness" (root) or "base" (dependent).`);
+		if (isShadowDef(def)) {
+			if (!names.has(def.bg)) throw new Error(`glaze: shadow "${name}" references non-existent bg "${def.bg}".`);
+			if (isShadowDef(defs[def.bg])) throw new Error(`glaze: shadow "${name}" bg "${def.bg}" references another shadow color.`);
+			if (def.fg !== void 0) {
+				if (!names.has(def.fg)) throw new Error(`glaze: shadow "${name}" references non-existent fg "${def.fg}".`);
+				if (isShadowDef(defs[def.fg])) throw new Error(`glaze: shadow "${name}" fg "${def.fg}" references another shadow color.`);
+			}
+			continue;
+		}
+		const regDef = def;
+		if (regDef.contrast !== void 0 && !regDef.base) throw new Error(`glaze: color "${name}" has "contrast" without "base".`);
+		if (regDef.lightness !== void 0 && !isAbsoluteLightness(regDef.lightness) && !regDef.base) throw new Error(`glaze: color "${name}" has relative "lightness" without "base".`);
+		if (isAbsoluteLightness(regDef.lightness) && regDef.base !== void 0) console.warn(`glaze: color "${name}" has absolute "lightness" and "base". Absolute lightness takes precedence.`);
+		if (regDef.base && !names.has(regDef.base)) throw new Error(`glaze: color "${name}" references non-existent base "${regDef.base}".`);
+		if (regDef.base && isShadowDef(defs[regDef.base])) throw new Error(`glaze: color "${name}" base "${regDef.base}" references a shadow color.`);
+		if (!isAbsoluteLightness(regDef.lightness) && regDef.base === void 0) throw new Error(`glaze: color "${name}" must have either absolute "lightness" (root) 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 lightness unpredictable.`);
 	}
 	const visited = /* @__PURE__ */ new Set();
 	const inStack = /* @__PURE__ */ new Set();
@@ -725,7 +784,13 @@ function validateColorDefs(defs) {
 		if (visited.has(name)) return;
 		inStack.add(name);
 		const def = defs[name];
-		if (def.base && !isAbsoluteLightness(def.lightness)) dfs(def.base);
+		if (isShadowDef(def)) {
+			dfs(def.bg);
+			if (def.fg) dfs(def.fg);
+		} else {
+			const regDef = def;
+			if (regDef.base && !isAbsoluteLightness(regDef.lightness)) dfs(regDef.base);
+		}
 		inStack.delete(name);
 		visited.add(name);
 	}
@@ -738,7 +803,13 @@ function topoSort(defs) {
 		if (visited.has(name)) return;
 		visited.add(name);
 		const def = defs[name];
-		if (def.base && !isAbsoluteLightness(def.lightness)) visit(def.base);
+		if (isShadowDef(def)) {
+			visit(def.bg);
+			if (def.fg) visit(def.fg);
+		} else {
+			const regDef = def;
+			if (regDef.base && !isAbsoluteLightness(regDef.lightness)) visit(regDef.base);
+		}
 		result.push(name);
 	}
 	for (const name of Object.keys(defs)) visit(name);
@@ -802,11 +873,8 @@ function resolveDependentColor(name, def, ctx, isHighContrast, isDark, effective
 	if (!baseResolved) throw new Error(`glaze: base "${baseName}" not yet resolved for "${name}".`);
 	const mode = def.mode ?? "auto";
 	const satFactor = clamp(def.saturation ?? 1, 0, 1);
-	let baseL;
-	if (isDark && isHighContrast) baseL = baseResolved.darkContrast.l * 100;
-	else if (isDark) baseL = baseResolved.dark.l * 100;
-	else if (isHighContrast) baseL = baseResolved.lightContrast.l * 100;
-	else baseL = baseResolved.light.l * 100;
+	const baseVariant = getSchemeVariant(baseResolved, isDark, isHighContrast);
+	const baseL = baseVariant.l * 100;
 	let preferredL;
 	const rawLightness = def.lightness;
 	if (rawLightness === void 0) preferredL = baseL;
@@ -823,27 +891,7 @@ function resolveDependentColor(name, def, ctx, isHighContrast, isDark, effective
 	if (rawContrast !== void 0) {
 		const minCr = isHighContrast ? pairHC(rawContrast) : pairNormal(rawContrast);
 		const effectiveSat = isDark ? mapSaturationDark(satFactor * ctx.saturation / 100, mode) : satFactor * ctx.saturation / 100;
-		let baseH;
-		let baseS;
-		let baseLNorm;
-		if (isDark && isHighContrast) {
-			baseH = baseResolved.darkContrast.h;
-			baseS = baseResolved.darkContrast.s;
-			baseLNorm = baseResolved.darkContrast.l;
-		} else if (isDark) {
-			baseH = baseResolved.dark.h;
-			baseS = baseResolved.dark.s;
-			baseLNorm = baseResolved.dark.l;
-		} else if (isHighContrast) {
-			baseH = baseResolved.lightContrast.h;
-			baseS = baseResolved.lightContrast.s;
-			baseLNorm = baseResolved.lightContrast.l;
-		} else {
-			baseH = baseResolved.light.h;
-			baseS = baseResolved.light.s;
-			baseLNorm = baseResolved.light.l;
-		}
-		const baseLinearRgb = okhslToLinearSrgb(baseH, baseS, baseLNorm);
+		const baseLinearRgb = okhslToLinearSrgb(baseVariant.h, baseVariant.s, baseVariant.l);
 		return {
 			l: findLightnessForContrast({
 				hue: effectiveHue,
@@ -860,18 +908,26 @@ function resolveDependentColor(name, def, ctx, isHighContrast, isDark, effective
 		satFactor
 	};
 }
+function getSchemeVariant(color, isDark, isHighContrast) {
+	if (isDark && isHighContrast) return color.darkContrast;
+	if (isDark) return color.dark;
+	if (isHighContrast) return color.lightContrast;
+	return color.light;
+}
 function resolveColorForScheme(name, def, ctx, isDark, isHighContrast) {
-	const mode = def.mode ?? "auto";
-	const isRoot = isAbsoluteLightness(def.lightness) && !def.base;
-	const effectiveHue = resolveEffectiveHue(ctx.hue, def.hue);
+	if (isShadowDef(def)) return resolveShadowForScheme(def, ctx, isDark, isHighContrast);
+	const regDef = def;
+	const mode = regDef.mode ?? "auto";
+	const isRoot = isAbsoluteLightness(regDef.lightness) && !regDef.base;
+	const effectiveHue = resolveEffectiveHue(ctx.hue, regDef.hue);
 	let lightL;
 	let satFactor;
 	if (isRoot) {
-		const root = resolveRootColor(name, def, ctx, isHighContrast);
+		const root = resolveRootColor(name, regDef, ctx, isHighContrast);
 		lightL = root.lightL;
 		satFactor = root.satFactor;
 	} else {
-		const dep = resolveDependentColor(name, def, ctx, isHighContrast, isDark, effectiveHue);
+		const dep = resolveDependentColor(name, regDef, ctx, isHighContrast, isDark, effectiveHue);
 		lightL = dep.l;
 		satFactor = dep.satFactor;
 	}
@@ -890,9 +946,18 @@ function resolveColorForScheme(name, def, ctx, isDark, isHighContrast) {
 	return {
 		h: effectiveHue,
 		s: clamp(finalSat, 0, 1),
-		l: clamp(finalL / 100, 0, 1)
+		l: clamp(finalL / 100, 0, 1),
+		alpha: regDef.opacity ?? 1
 	};
 }
+function resolveShadowForScheme(def, ctx, isDark, isHighContrast) {
+	const bgVariant = getSchemeVariant(ctx.resolved.get(def.bg), isDark, isHighContrast);
+	let fgVariant;
+	if (def.fg) fgVariant = getSchemeVariant(ctx.resolved.get(def.fg), isDark, isHighContrast);
+	const intensity = isHighContrast ? pairHC(def.intensity) : pairNormal(def.intensity);
+	const tuning = resolveShadowTuning(def.tuning);
+	return computeShadow(bgVariant, fgVariant, intensity, tuning);
+}
 function resolveAllColors(hue, saturation, defs) {
 	validateColorDefs(defs);
 	const order = topoSort(defs);
@@ -902,6 +967,9 @@ function resolveAllColors(hue, saturation, defs) {
 		defs,
 		resolved: /* @__PURE__ */ new Map()
 	};
+	function defMode(def) {
+		return isShadowDef(def) ? void 0 : def.mode ?? "auto";
+	}
 	const lightMap = /* @__PURE__ */ new Map();
 	for (const name of order) {
 		const variant = resolveColorForScheme(name, defs[name], ctx, false, false);
@@ -912,7 +980,7 @@ function resolveAllColors(hue, saturation, defs) {
 			dark: variant,
 			lightContrast: variant,
 			darkContrast: variant,
-			mode: defs[name].mode ?? "auto"
+			mode: defMode(defs[name])
 		});
 	}
 	const lightHCMap = /* @__PURE__ */ new Map();
@@ -935,7 +1003,7 @@ function resolveAllColors(hue, saturation, defs) {
 		dark: lightMap.get(name),
 		lightContrast: lightHCMap.get(name),
 		darkContrast: lightHCMap.get(name),
-		mode: defs[name].mode ?? "auto"
+		mode: defMode(defs[name])
 	});
 	for (const name of order) {
 		const variant = resolveColorForScheme(name, defs[name], ctx, true, false);
@@ -965,7 +1033,7 @@ function resolveAllColors(hue, saturation, defs) {
 		dark: darkMap.get(name),
 		lightContrast: lightHCMap.get(name),
 		darkContrast: darkHCMap.get(name),
-		mode: defs[name].mode ?? "auto"
+		mode: defMode(defs[name])
 	});
 	return result;
 }
@@ -975,8 +1043,14 @@ const formatters = {
 	hsl: formatHsl,
 	oklch: formatOklch
 };
+function fmt(value, decimals) {
+	return parseFloat(value.toFixed(decimals)).toString();
+}
 function formatVariant(v, format = "okhsl") {
-	return formatters[format](v.h, v.s * 100, v.l * 100);
+	const base = formatters[format](v.h, v.s * 100, v.l * 100);
+	if (v.alpha >= 1) return base;
+	const closing = base.lastIndexOf(")");
+	return `${base.slice(0, closing)} / ${fmt(v.alpha, 4)})`;
 }
 function resolveModes(override) {
 	return {
@@ -996,6 +1070,20 @@ function buildTokenMap(resolved, prefix, states, modes, format = "okhsl") {
 	}
 	return tokens;
 }
+function buildFlatTokenMap(resolved, prefix, modes, format = "okhsl") {
+	const result = { light: {} };
+	if (modes.dark) result.dark = {};
+	if (modes.highContrast) result.lightContrast = {};
+	if (modes.dark && modes.highContrast) result.darkContrast = {};
+	for (const [name, color] of resolved) {
+		const key = `${prefix}${name}`;
+		result.light[key] = formatVariant(color.light, format);
+		if (modes.dark) result.dark[key] = formatVariant(color.dark, format);
+		if (modes.highContrast) result.lightContrast[key] = formatVariant(color.lightContrast, format);
+		if (modes.dark && modes.highContrast) result.darkContrast[key] = formatVariant(color.darkContrast, format);
+	}
+	return result;
+}
 function buildJsonMap(resolved, modes, format = "okhsl") {
 	const result = {};
 	for (const [name, color] of resolved) {
@@ -1077,6 +1165,9 @@ function createTheme(hue, saturation, initialColors) {
 			return resolveAllColors(hue, saturation, colorDefs);
 		},
 		tokens(options) {
+			return buildFlatTokenMap(resolveAllColors(hue, saturation, colorDefs), "", resolveModes(options?.modes), options?.format);
+		},
+		tasty(options) {
 			return buildTokenMap(resolveAllColors(hue, saturation, colorDefs), "", {
 				dark: options?.states?.dark ?? globalConfig.states.dark,
 				highContrast: options?.states?.highContrast ?? globalConfig.states.highContrast
@@ -1090,9 +1181,26 @@ function createTheme(hue, saturation, initialColors) {
 		}
 	};
 }
+function resolvePrefix(options, themeName) {
+	if (options?.prefix === true) return `${themeName}-`;
+	if (typeof options?.prefix === "object" && options.prefix !== null) return options.prefix[themeName] ?? `${themeName}-`;
+	return "";
+}
 function createPalette(themes) {
 	return {
 		tokens(options) {
+			const modes = resolveModes(options?.modes);
+			const allTokens = {};
+			for (const [themeName, theme] of Object.entries(themes)) {
+				const tokens = buildFlatTokenMap(theme.resolve(), resolvePrefix(options, themeName), modes, options?.format);
+				for (const variant of Object.keys(tokens)) {
+					if (!allTokens[variant]) allTokens[variant] = {};
+					Object.assign(allTokens[variant], tokens[variant]);
+				}
+			}
+			return allTokens;
+		},
+		tasty(options) {
 			const states = {
 				dark: options?.states?.dark ?? globalConfig.states.dark,
 				highContrast: options?.states?.highContrast ?? globalConfig.states.highContrast
@@ -1100,11 +1208,7 @@ function createPalette(themes) {
 			const modes = resolveModes(options?.modes);
 			const allTokens = {};
 			for (const [themeName, theme] of Object.entries(themes)) {
-				const resolved = theme.resolve();
-				let prefix = "";
-				if (options?.prefix === true) prefix = `${themeName}-`;
-				else if (typeof options?.prefix === "object" && options.prefix !== null) prefix = options.prefix[themeName] ?? `${themeName}-`;
-				const tokens = buildTokenMap(resolved, prefix, states, modes, options?.format);
+				const tokens = buildTokenMap(theme.resolve(), resolvePrefix(options, themeName), states, modes, options?.format);
 				Object.assign(allTokens, tokens);
 			}
 			return allTokens;
@@ -1125,11 +1229,7 @@ function createPalette(themes) {
 				darkContrast: []
 			};
 			for (const [themeName, theme] of Object.entries(themes)) {
-				const resolved = theme.resolve();
-				let prefix = "";
-				if (options?.prefix === true) prefix = `${themeName}-`;
-				else if (typeof options?.prefix === "object" && options.prefix !== null) prefix = options.prefix[themeName] ?? `${themeName}-`;
-				const css = buildCssMap(resolved, prefix, suffix, format);
+				const css = buildCssMap(theme.resolve(), resolvePrefix(options, themeName), suffix, format);
 				for (const key of [
 					"light",
 					"dark",
@@ -1162,6 +1262,12 @@ function createColorToken(input) {
 				highContrast: options?.states?.highContrast ?? globalConfig.states.highContrast
 			}, resolveModes(options?.modes), options?.format)["#__color__"];
 		},
+		tasty(options) {
+			return buildTokenMap(resolveAllColors(input.hue, input.saturation, defs), "", {
+				dark: options?.states?.dark ?? globalConfig.states.dark,
+				highContrast: options?.states?.highContrast ?? globalConfig.states.highContrast
+			}, resolveModes(options?.modes), options?.format)["#__color__"];
+		},
 		json(options) {
 			return buildJsonMap(resolveAllColors(input.hue, input.saturation, defs), resolveModes(options?.modes), options?.format)["__color__"];
 		}
@@ -1195,7 +1301,8 @@ glaze.configure = function configure(config) {
 		modes: {
 			dark: config.modes?.dark ?? globalConfig.modes.dark,
 			highContrast: config.modes?.highContrast ?? globalConfig.modes.highContrast
-		}
+		},
+		shadowTuning: config.shadowTuning ?? globalConfig.shadowTuning
 	};
 };
 /**
@@ -1217,6 +1324,40 @@ glaze.color = function color(input) {
 	return createColorToken(input);
 };
 /**
+* Compute a shadow color from a bg/fg pair and intensity.
+*/
+glaze.shadow = function shadow(input) {
+	const bg = parseOkhslInput(input.bg);
+	const fg = input.fg ? parseOkhslInput(input.fg) : void 0;
+	const tuning = resolveShadowTuning(input.tuning);
+	return computeShadow({
+		...bg,
+		alpha: 1
+	}, fg ? {
+		...fg,
+		alpha: 1
+	} : void 0, input.intensity, tuning);
+};
+/**
+* Format a resolved color variant as a CSS string.
+*/
+glaze.format = function format(variant, colorFormat) {
+	return formatVariant(variant, colorFormat);
+};
+function parseOkhslInput(input) {
+	if (typeof input === "string") {
+		const rgb = parseHex(input);
+		if (!rgb) throw new Error(`glaze: invalid hex color "${input}".`);
+		const [h, s, l] = srgbToOkhsl(rgb);
+		return {
+			h,
+			s,
+			l
+		};
+	}
+	return input;
+}
+/**
 * Create a theme from a hex color string.
 * Extracts hue and saturation from the color.
 */