unocss-preset-magicolor 0.3.0 → 0.5.0

package/dist/color-variable-Dd9ag2au.js

@@ -0,0 +1,237 @@
+import { SpecialColorKey } from "@unocss/preset-wind4/utils";
+import { mc } from "magic-color";
+//#region ../utils/src/color.ts
+const specialColorValueMap = new Map(Object.entries(SpecialColorKey).flatMap(([key, value]) => [[key.toLowerCase(), value], [value.toLowerCase(), value]]));
+const depthColorRE = /^(?:(.*)-|(.+\D))(\d+)$/;
+const bracketColorRE = /^\[(.*)\]$/;
+const numericBodyRE = /^-?\d+$/;
+function emptyColorParts() {
+	return {
+		originColor: void 0,
+		originDepth: void 0
+	};
+}
+function getBodyColorEnd(color) {
+	let bracketDepth = 0;
+	let parenDepth = 0;
+	let escaped = false;
+	for (let i = 0; i < color.length; i++) {
+		const char = color[i];
+		if (escaped) {
+			escaped = false;
+			continue;
+		}
+		if (char === "\\") {
+			escaped = true;
+			continue;
+		}
+		if (char === "[") bracketDepth++;
+		else if (char === "]") bracketDepth = Math.max(bracketDepth - 1, 0);
+		else if (char === "(" && bracketDepth === 0) parenDepth++;
+		else if (char === ")" && bracketDepth === 0) parenDepth = Math.max(parenDepth - 1, 0);
+		if ((char === ":" || char === "/") && bracketDepth === 0 && parenDepth === 0) return i;
+	}
+	return color.length;
+}
+function resolveBodyColorDepth(color) {
+	if (color.startsWith("#") && !color.includes("-")) return {
+		originColor: color,
+		originDepth: void 0
+	};
+	const depthMatch = color.match(depthColorRE);
+	const rawOriginColor = depthMatch?.[1] ?? depthMatch?.[2] ?? color;
+	const originDepth = depthMatch?.[3];
+	const originColor = rawOriginColor.match(bracketColorRE)?.[1] ?? rawOriginColor;
+	if (!originColor || numericBodyRE.test(originColor)) return emptyColorParts();
+	return {
+		originColor,
+		originDepth
+	};
+}
+/**
+* Resolves a token body into its source color and optional depth,
+* ignoring opacity (`/`) and modifier (`:`) suffixes outside brackets/functions.
+*/
+function resolveBodyColor(body) {
+	if (!body) return emptyColorParts();
+	const color = body.trim();
+	const bodyColor = color.slice(0, getBodyColorEnd(color));
+	if (!bodyColor || numericBodyRE.test(bodyColor)) return emptyColorParts();
+	return resolveBodyColorDepth(bodyColor);
+}
+/** Resolves UnoCSS special color keywords to their canonical CSS values. */
+function resolveSpecialColor(color) {
+	if (!color) return;
+	return specialColorValueMap.get(color.trim().toLowerCase());
+}
+/** Checks whether a raw selector contains the `dark:` variant. */
+function hasDarkVariant(rawSelector) {
+	return rawSelector?.split(":").includes("dark") === true;
+}
+//#endregion
+//#region ../utils/src/transforms.ts
+/** Converts a string or number to a numeric value, falling back to 0. */
+function toNum(value) {
+	if (!value) return 0;
+	return Number.parseFloat(value.toString()) || 0;
+}
+/** Normalizes a parsed CSS color into numeric OKLCH components. */
+function toOklch(cssColor) {
+	if (!cssColor) return;
+	if (cssColor.type === "oklch") {
+		let components = cssColor.components;
+		if (components.length === 1 && typeof components[0] === "string") components = components[0].split(/\s*,\s*|\s+/).filter(Boolean);
+		if (components.length < 3) return;
+		const numericComponents = components.map((value, index) => index === 0 && value.toString().includes("%") ? toNum(value) / 100 : toNum(value));
+		return {
+			...cssColor,
+			components: numericComponents
+		};
+	}
+	const oklchColor = mc(cssColor.type === "hex" ? cssColor.components[0].toString() : cssColor.components, cssColor.type).toOklch().values;
+	if (!oklchColor) return;
+	return {
+		type: "oklch",
+		components: [
+			oklchColor[0] / 100,
+			oklchColor[1],
+			oklchColor[2]
+		],
+		alpha: cssColor.alpha
+	};
+}
+/** Rounds a number to three decimal places. */
+function roundNum(num) {
+	return Math.round(num * 1e3) / 1e3;
+}
+/** Narrows away null and undefined values in array filters. */
+function notNull(value) {
+	return value != null;
+}
+//#endregion
+//#region ../utils/src/theme.ts
+const themeMetaList = [
+	50,
+	100,
+	200,
+	300,
+	400,
+	500,
+	600,
+	700,
+	800,
+	900,
+	950
+];
+/**
+* Builds a partial theme-depth color map from a valid source color.
+*
+* Invalid colors return an empty map so generation can continue safely.
+*/
+function getMcThemeMetaColors(originColor) {
+	const themeMetaColors = {};
+	if (!originColor || !mc.valid(originColor)) return themeMetaColors;
+	try {
+		const themeColor = mc.theme(originColor, { type: "hex" });
+		for (const themeMeta of themeMetaList) {
+			const hex = themeColor[themeMeta];
+			if (!hex) continue;
+			const cssColor = toOklch({
+				type: "hex",
+				components: [hex],
+				alpha: 1
+			});
+			if (cssColor) themeMetaColors[themeMeta] = cssColor;
+		}
+	} catch {
+		console.error("[magic-color] Failed to generate themeMeta colors for", originColor);
+	}
+	return themeMetaColors;
+}
+function stringifyOklchColor(cssColor) {
+	const color = toOklch(cssColor);
+	if (!color) return;
+	const components = color.components.map((value) => roundNum(toNum(value)));
+	const alpha = color.alpha != null && color.alpha !== 1 ? ` / ${color.alpha}` : "";
+	return `oklch(${components.join(" ")}${alpha})`;
+}
+function resolveThemeDepth(options = {}) {
+	const { defaultValue, depth, lightnessReverse } = options;
+	const originDepth = Number(depth);
+	if (!Number.isFinite(originDepth)) return defaultValue;
+	if (lightnessReverse) return 1e3 - originDepth;
+	return originDepth;
+}
+function resolveDepth(no, options = {}) {
+	let originDepth = resolveThemeDepth({
+		depth: no,
+		...options
+	});
+	if (typeof originDepth !== "number") return;
+	originDepth = originDepth <= 50 ? 50 : originDepth;
+	originDepth = originDepth >= 950 ? 950 : originDepth;
+	let beforeDepth = Math.floor(originDepth / 100) * 100;
+	beforeDepth = beforeDepth <= 50 ? 50 : beforeDepth;
+	let afterDepth = Math.floor((originDepth + 100) / 100) * 100;
+	afterDepth = afterDepth >= 950 ? 950 : afterDepth;
+	return {
+		originDepth,
+		beforeDepth,
+		afterDepth
+	};
+}
+/** Resolves or interpolates the OKLCH color for a requested theme depth. */
+function getThemeDepthColor(themeMetaColors, no, options = {}) {
+	const depth = resolveDepth(no, options);
+	if (!depth) return;
+	const { originDepth, beforeDepth, afterDepth } = depth;
+	const originColor = themeMetaColors[originDepth];
+	if (originColor) return stringifyOklchColor(originColor);
+	const beforeColor = themeMetaColors[beforeDepth];
+	const afterColor = themeMetaColors[afterDepth];
+	if (!beforeColor || !afterColor) return;
+	const beforeComponents = beforeColor.components;
+	const afterComponents = afterColor.components;
+	if (beforeComponents.length < 3 || afterComponents.length < 3) return;
+	const transitionRatio = (originDepth - beforeDepth) / (originDepth < 100 || originDepth > 900 ? 50 : 100);
+	return `oklch(${Array.from({ length: 3 }).map((_, i) => {
+		return roundNum(toNum(beforeComponents[i]) + (toNum(afterComponents[i]) - toNum(beforeComponents[i])) * transitionRatio);
+	}).join(" ")})`;
+}
+//#endregion
+//#region src/utils/color-variable.ts
+const BASE_COLOR_DEPTH = "DEFAULT";
+/** Builds the public target CSS custom property name for a magic color depth. */
+function createTargetColorVariableName(name, depth = BASE_COLOR_DEPTH) {
+	return `--mc-colors-${name}-${depth}`;
+}
+/** Builds the internal source CSS custom property name for a magic color depth. */
+function createSourceColorVariableName(name, depth = BASE_COLOR_DEPTH) {
+	return `--mc-source-colors-${name}-${depth}`;
+}
+/** Wraps a CSS custom property name in a var() reference. */
+function toVar(variableName) {
+	return `var(${variableName})`;
+}
+/** Creates a single target CSS custom property declaration. */
+function createTargetColorVariableDeclaration(name, color, depth) {
+	return { [createTargetColorVariableName(name, depth)]: color };
+}
+/** Parses definition bodies in the `name_source` format used by `mc-*` rules. */
+function parseColorVariableDefinition(body) {
+	const firstUnderscoreIndex = body.indexOf("_");
+	if (firstUnderscoreIndex < 0) return;
+	const name = body.substring(0, firstUnderscoreIndex);
+	const hue = body.substring(firstUnderscoreIndex + 1);
+	if (!name || !hue) return;
+	return {
+		name,
+		hue
+	};
+}
+/** Checks whether a color body is a literal CSS color instead of a theme alias. */
+function isLiteralColor(color) {
+	return color.startsWith("#") || /^[a-z][\w-]*\(/i.test(color);
+}
+//#endregion
+export { isLiteralColor as a, getMcThemeMetaColors as c, themeMetaList as d, notNull as f, resolveSpecialColor as g, resolveBodyColor as h, createTargetColorVariableName as i, getThemeDepthColor as l, hasDarkVariant as m, createSourceColorVariableName as n, parseColorVariableDefinition as o, toOklch as p, createTargetColorVariableDeclaration as r, toVar as s, BASE_COLOR_DEPTH as t, resolveThemeDepth as u };

package/dist/helper.js

@@ -1,40 +1,91 @@
-import { mc as m } from "magic-color";
-import { i as h, t as C, a as g, c as d, g as u, r as b } from "./common-Dv0krm1V.js";
-function M(p) {
-  const { name: c, color: a, dom: i } = p;
-  if (!i)
-    return;
-  const s = a?.split(/-\d+-?/)[0];
-  if (h(s))
-    return;
-  const e = {}, t = {};
-  try {
-    if (m.valid(s)) {
-      e[`--mc-${c}-color`] = s;
-      const o = m.theme(s, { type: "hex" });
-      for (const r of C) {
-        const n = g({ type: "hex", components: [o[r]], alpha: 1 });
-        t[r] = n;
-      }
-    }
-  } catch (o) {
-    console.error(`[updateMagicColor] get ${s} theme fail, please use another color.`), console.error(o);
-  }
-  const l = a.match(/.*-(\d+)/)?.[1];
-  if (l) {
-    const { originDepth: o, beforeDepth: r, afterDepth: n } = b(l);
-    t[r] && t[n] && (e[`--mc-${c}-color`] = d({
-      originDepth: o,
-      beforeDepth: r,
-      beforeComponents: t[r].components,
-      afterComponents: t[n].components
-    }));
-  }
-  const f = u(c, t);
-  Object.assign(e, f);
-  for (const o in e)
-    e[o] && i.style.setProperty(o, e[o].toString());
+import { c as getMcThemeMetaColors, g as resolveSpecialColor, h as resolveBodyColor, l as getThemeDepthColor, r as createTargetColorVariableDeclaration, t as BASE_COLOR_DEPTH } from "./color-variable-Dd9ag2au.js";
+import { mc } from "magic-color";
+//#region src/helper.ts
+/** Escapes a color name before it is interpolated into a CSS variable regex. */
+function escapeRegExp(value) {
+	return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
-export {
-  M as updateMagicColor
-};
+/** Collects the base and depth variables already present in one style object. */
+function collectStyleVariables(name, style, usage) {
+	const colorVariableRE = new RegExp(`^--mc-colors-${escapeRegExp(name)}-(${BASE_COLOR_DEPTH}|\\d+)$`);
+	for (let i = 0; i < style.length; i++) {
+		const match = style.item(i).match(colorVariableRE);
+		if (!match) continue;
+		const [, depth] = match;
+		if (depth === "DEFAULT") usage.hasBase = true;
+		else if (depth) usage.depths.add(depth);
+	}
+}
+/** Reads inline and computed styles so runtime updates only touch variables that exist. */
+function collectDefinedColorVariables(name, dom) {
+	const usage = {
+		hasBase: false,
+		depths: /* @__PURE__ */ new Set()
+	};
+	const window = dom.ownerDocument.defaultView;
+	collectStyleVariables(name, dom.style, usage);
+	if (window) collectStyleVariables(name, window.getComputedStyle(dom), usage);
+	return usage;
+}
+/**
+* Generate CSS color variables for a magic color.
+* @param params params Parameter object
+* @param params.name Color name
+* @param params.color Color value, supports a color depth suffix like `#9c1d1e-457`
+* @param params.hasBase Whether to generate the base color variable
+* @param params.depths Color depths that need depth-specific variables
+* @returns CSS variables for the requested magic color usage
+*/
+function getMagicColorStyle(params) {
+	const { name, color, hasBase, depths, lightnessReverse } = params;
+	const { originColor, originDepth } = resolveBodyColor(color);
+	if (!originColor) return {};
+	const css = {};
+	const specialColor = resolveSpecialColor(originColor);
+	if (specialColor) {
+		if (hasBase) Object.assign(css, createTargetColorVariableDeclaration(name, specialColor));
+		for (const depth of depths) Object.assign(css, createTargetColorVariableDeclaration(name, specialColor, depth));
+		return css;
+	}
+	const themeMetaColors = getMcThemeMetaColors(originColor);
+	if (hasBase) {
+		if (originDepth) {
+			const baseColor = getThemeDepthColor(themeMetaColors, originDepth, { lightnessReverse });
+			baseColor && Object.assign(css, createTargetColorVariableDeclaration(name, baseColor));
+		} else if (mc.valid(originColor)) {
+			const baseColor = mc(originColor).css("oklch");
+			Object.assign(css, createTargetColorVariableDeclaration(name, baseColor));
+		}
+	}
+	for (const depth of depths) {
+		const depthColor = getThemeDepthColor(themeMetaColors, depth, { lightnessReverse });
+		if (depthColor) Object.assign(css, createTargetColorVariableDeclaration(name, depthColor, depth));
+	}
+	return css;
+}
+/**
+* Updates already-defined CSS variables for a magic color on a DOM element.
+*
+* The helper intentionally does not infer usage from class names at runtime;
+* it only rewrites variables that were emitted by UnoCSS or declared by the app.
+* @param params params Parameter object
+* @param params.name Color name
+* @param params.color Color
+* @param params.lightnessReverse Reverse numeric lightness depths before resolving colors
+* @param params.dom params.dom Target element, modifying the entire page theme when passing `document.documentElement`
+*/
+function updateMagicColor(params) {
+	const { name, color, lightnessReverse, dom } = params;
+	if (!dom) return;
+	const { hasBase, depths } = collectDefinedColorVariables(name, dom);
+	const css = getMagicColorStyle({
+		name,
+		color,
+		hasBase,
+		depths,
+		lightnessReverse
+	});
+	for (const [variable, value] of Object.entries(css)) if (value) dom.style.setProperty(variable, value.toString());
+}
+//#endregion
+export { getMagicColorStyle, updateMagicColor };