unocss-preset-magicolor 0.3.0 → 0.4.0

package/dist/helper.js

@@ -1,40 +1,80 @@
-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 { a as resolveColorParts, n as getThemeDepthColor, r as isInvalidColor, t as getMcThemeMetaColors } from "./utils-u9jMSN0V.js";
+import { mc } from "magic-color";
+//#region src/helper.ts
+function escapeRegExp(value) {
+	return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
-export {
-  M as updateMagicColor
-};
+function collectStyleVariables(name, style, usage) {
+	const colorVariableRE = new RegExp(`^--mc-${escapeRegExp(name)}(?:-(\\d+))?-color$`);
+	for (let i = 0; i < style.length; i++) {
+		const match = style.item(i).match(colorVariableRE);
+		if (!match) continue;
+		const [, depth] = match;
+		if (depth) usage.depths.add(depth);
+		else usage.hasBase = true;
+	}
+}
+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;
+}
+function generateColorVariable(name, color, depth) {
+	return { [`--mc-${name}${depth == null ? "" : `-${depth}`}-color`]: color };
+}
+/**
+* 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 } = params;
+	const { originColor, bodyNo } = resolveColorParts(color);
+	if (isInvalidColor(originColor)) return {};
+	const themeMetaColors = getMcThemeMetaColors(originColor);
+	const css = {};
+	if (hasBase) {
+		if (bodyNo) {
+			const baseColor = getThemeDepthColor(themeMetaColors, bodyNo);
+			baseColor && Object.assign(css, generateColorVariable(name, baseColor));
+		} else if (mc.valid(originColor)) {
+			const baseColor = mc(originColor).css("oklch");
+			Object.assign(css, generateColorVariable(name, baseColor));
+		}
+	}
+	for (const depth of depths) {
+		const depthColor = getThemeDepthColor(themeMetaColors, depth);
+		if (depthColor) Object.assign(css, generateColorVariable(name, depthColor, depth));
+	}
+	return css;
+}
+/**
+* Modify the value of the color variable
+* @param params params Parameter object
+* @param params.name Color name
+* @param params.color Color
+* @param params.dom params.dom Target element, modifying the entire page theme when passing `document.documentElement`
+*/
+function updateMagicColor(params) {
+	const { name, color, dom } = params;
+	if (!dom) return;
+	const { hasBase, depths } = collectDefinedColorVariables(name, dom);
+	const css = getMagicColorStyle({
+		name,
+		color,
+		hasBase,
+		depths
+	});
+	for (const [variable, value] of Object.entries(css)) if (value) dom.style.setProperty(variable, value.toString());
+}
+//#endregion
+export { getMagicColorStyle, updateMagicColor };