unocss-preset-magicolor 0.1.0 → 0.3.0

package/dist/common-Dv0krm1V.js

@@ -0,0 +1,59 @@
+import { mc as f } from "magic-color";
+function r(t) {
+  return t && Number.parseFloat(t.toString()) || 0;
+}
+function g(t) {
+  if (!t)
+    return;
+  if (t.type === "oklch")
+    return t.components[0].toString().includes("%") && (t.components[0] = r(t.components[0]) / 100), t.components = t.components.map(r), t;
+  const n = f(
+    t.type === "hex" ? t.components[0].toString() : t.components,
+    t.type
+  ).toOklch().values;
+  if (n)
+    return {
+      type: "oklch",
+      components: [n[0] / 100, n[1], n[2]],
+      alpha: t.alpha
+    };
+}
+function u(t) {
+  return Math.round(t * 1e3) / 1e3;
+}
+const m = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+function b(t) {
+  let n = Number(t);
+  n = n <= 50 ? 50 : n, n = n >= 950 ? 950 : n;
+  let o = Math.floor(n / 100) * 100;
+  o = o <= 50 ? 50 : o;
+  let e = Math.floor((n + 100) / 100) * 100;
+  return e = e >= 950 ? 950 : e, { originDepth: n, beforeDepth: o, afterDepth: e };
+}
+function N(t) {
+  return !t || !Number.isNaN(Number(t)) ? (console.error(`[unocss-preset-margicolor] The color '${t}' is invalid.`), !0) : !1;
+}
+function $(t) {
+  const { originDepth: n, beforeDepth: o, beforeComponents: e, afterComponents: i } = t, a = (n - o) / (n < 100 || n > 900 ? 50 : 100);
+  return `oklch(${Array.from({ length: 3 }).map((l, c) => {
+    const p = r(e[c]) + (r(i[c]) - r(e[c])) * a;
+    return u(p);
+  }).join(" ")})`;
+}
+function k(t, n) {
+  const o = {};
+  for (const e of m)
+    if (n[e]) {
+      const i = n[e].components;
+      o[`--mc-${t}-${e}-l`] = u(r(i[0])), o[`--mc-${t}-${e}-c`] = u(r(i[1])), o[`--mc-${t}-${e}-h`] = u(r(i[2]));
+    }
+  return o;
+}
+export {
+  g as a,
+  $ as c,
+  k as g,
+  N as i,
+  b as r,
+  m as t
+};

package/dist/helper.js

@@ -1,5 +1,40 @@
-function o() {
+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());
 }
 export {
-  o as updateMagicColor
+  M as updateMagicColor
 };

package/dist/index.js

@@ -1,136 +1,111 @@
-import { notLastChildSelectorVariant as A } from "@unocss/preset-wind4/rules";
-import { colorCSSGenerator as H, parseColor as y, defineProperty as f, generateThemeVariable as B, themeTracking as I, detectThemeValue as G, h as x, SpecialColorKey as F, numberResolver as R, hyphenate as D } from "@unocss/preset-wind4/utils";
-import { converter as q, formatHex as K } from "culori";
-import { mc as N } from "magic-color";
-import { notNull as J } from "unocss";
-const Q = q("oklch");
-function h(r) {
-  return r && Number.parseFloat(r.toString()) || 0;
-}
-function C(r) {
-  if (!r)
-    return;
-  if (r.type === "oklch")
-    return r.components[0].toString().includes("%") && (r.components[0] = h(r.components[0]) / 100), r.components = r.components.map(h), r;
-  const o = r.components.join(" "), e = Q(r.type === "hex" ? o : `${r.type}(${o})`);
-  if (e)
-    return {
-      type: "oklch",
-      components: [e.l, e.c, e.h ?? 0],
-      alpha: r.alpha
-    };
-}
-const M = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
-function O(r) {
-  let o = Number(r);
-  o = o <= 50 ? 50 : o, o = o >= 950 ? 950 : o;
-  let e = Math.floor(o / 100) * 100;
-  e = e <= 50 ? 50 : e;
-  let n = Math.floor((o + 100) / 100) * 100;
-  return n = n >= 950 ? 950 : n, { originDepth: o, beforeDepth: e, afterDepth: n };
-}
-function U(r, o) {
-  let e = y(r, o);
-  if (e?.color)
-    return e;
-  const [n, a, c] = r.split(/[:/]/), s = n.match(/.*-(\d+)/)?.[1], t = n?.split(/-\d+-?/)[0];
-  if (e = {
+import { colorCSSGenerator as R, parseColor as f, defineProperty as m, generateThemeVariable as B, themeTracking as z, detectThemeValue as E, h, SpecialColorKey as G, numberResolver as M, hyphenate as C } from "@unocss/preset-wind4/utils";
+import { mc as y } from "magic-color";
+import { r as V, t as v, i as L, a as x, c as P, g as H } from "./common-Dv0krm1V.js";
+import { notNull as U } from "unocss";
+import { notLastChildSelectorVariant as q } from "@unocss/preset-wind4/rules";
+function A(e, o) {
+  let r = f(e, o);
+  if (r?.color)
+    return r;
+  const [t, a, s] = e.split(/[:/]/), c = t.match(/.*-(\d+)/)?.[1], n = t?.split(/-\d+-?/)[0];
+  if (r = {
     opacity: a,
-    modifier: c,
-    name: t,
-    no: s,
+    modifier: s,
+    name: n,
+    no: c,
     color: "",
     alpha: a && `${a}%`,
     keys: void 0,
     cssColor: void 0
-  }, !t || !Number.isNaN(Number(t)))
-    return console.error(`[unocss-preset-margicolor][mc-${r}] The color '${t}' is invalid.`), e;
-  if (!s)
-    return e;
-  const { originDepth: i, beforeDepth: u, afterDepth: $ } = O(s);
-  let l = y(`${t}-${u}`, o)?.cssColor, m = y(`${t}-${$}`, o)?.cssColor;
-  if (!l || !m)
+  }, L(n) || !c)
+    return r;
+  const { originDepth: i, beforeDepth: l, afterDepth: p } = V(c);
+  let $ = f(`${n}-${l}`, o)?.cssColor, d = f(`${n}-${p}`, o)?.cssColor;
+  if (!$ || !d)
     try {
-      const g = y(t, o)?.color, k = g ? K(g) : void 0;
-      if (k && N.valid(k)) {
-        const v = N.theme(k);
-        l || (l = C({ type: "hex", components: [v[u]], alpha: 1 })), m || (m = C({ type: "hex", components: [v[$]], alpha: 1 }));
+      const g = f(n, o);
+      if (g?.color && y.valid(g.color)) {
+        const b = y.theme(g.color, { type: "hex" });
+        $ || ($ = { type: "hex", components: [b[l]], alpha: 1 }), d || (d = { type: "hex", components: [b[p]], alpha: 1 });
       }
     } catch (g) {
-      console.error(`[unocss-preset-margicolor] Error parsing ${r}: get ${t} theme fail, please use another color.`), console.error(g);
+      console.error(`[unocss-preset-margicolor] Error parsing ${e}: get ${n} theme fail, please use another color.`), console.error(g);
     }
-  if (l = C(l), m = C(m), !l || !m)
-    return e;
-  const b = (i - u) / (i < 100 || i > 950 ? 50 : 100), d = Array.from({ length: 3 }).map((g, k) => {
-    const v = l.components, w = m.components, S = h(v[k]) + (h(w[k]) - h(v[k])) * b;
-    return `${Math.round(S * 1e3) / 1e3}`;
-  });
-  return e.color = `oklch(${d.join(" ")})`, e;
+  return $ = x($), d = x(d), !$ || !d || (r.color = P({
+    originDepth: i,
+    beforeDepth: l,
+    beforeComponents: $.components,
+    afterComponents: d.components
+  })), r;
 }
-function W(r) {
-  const o = {};
-  if (!r || r.color)
-    return { colorData: r, cssVariable: o };
-  const { name: e, no: n } = r;
-  if (!n)
-    return r.color = `var(--mc-${e}-color)`, { colorData: r, cssVariable: o };
-  const { originDepth: a, beforeDepth: c, afterDepth: s } = O(n), t = `--mc-${e}-${a}-l`, i = `--mc-${e}-${a}-c`, u = `--mc-${e}-${a}-h`;
-  if (!M.includes(a)) {
-    const $ = (a - c) / (a < 100 || a > 950 ? 50 : 100), [l, m, b] = ["l", "c", "h"].map((d) => `calc(var(--mc-${e}-${c}-${d}) + ${$} * (var(--mc-${e}-${s}-${d}) - var(--mc-${e}-${c}-${d})))`);
-    Object.assign(o, { [t]: l, [i]: m, [u]: b });
+function F(e) {
+  const o = [];
+  if (!e || e.color)
+    return { colorData: e, cssVariables: o };
+  const { name: r, no: t } = e;
+  if (!t)
+    return e.color = `var(--mc-${r}-color)`, { colorData: e, cssVariables: o };
+  const { originDepth: a, beforeDepth: s, afterDepth: c } = V(t), n = `--mc-${r}-${a}-l`, i = `--mc-${r}-${a}-c`, l = `--mc-${r}-${a}-h`;
+  if (!v.includes(a)) {
+    const p = (a - s) / (a < 100 || a > 900 ? 50 : 100), [$, d, g] = ["l", "c", "h"].map((b) => {
+      const O = `var(--mc-${r}-${s}-${b})`, N = `var(--mc-${r}-${c}-${b})`;
+      return `calc(${O} + ${p} * (${N} - ${O}))`;
+    });
+    o.push({ [n]: $, [i]: d, [l]: g });
   }
-  return r.color = `oklch(var(${t}) var(${i}) var(${u}))`, { colorData: r, cssVariable: o };
+  return e.color = `oklch(var(${n}) var(${i}) var(${l}))`, { colorData: e, cssVariables: o };
 }
-function j(r, o) {
-  const e = U(r, o);
-  return W(e);
+function w(e, o) {
+  return F(
+    A(e, o)
+  );
 }
-function p(r, o) {
-  return ([, e], n) => {
-    const { colorData: a, cssVariable: c } = j(e ?? "", n.theme);
+function u(e, o) {
+  return ([, r], t) => {
+    const { colorData: a, cssVariables: s } = w(r ?? "", t.theme);
     if (a?.color) {
-      const s = H(a, r, o, n);
-      return s && s.push({
-        [n.symbols.selector]: (t) => t,
-        ...c
-      }), s;
+      const c = R(a, e, o, t);
+      return c && s.length && c.push(...s.map((n) => ({
+        [t.symbols.selector]: (i) => i,
+        ...n
+      }))), c;
     }
   };
 }
-const X = {
+const J = {
   transparent: "transparent",
   current: "currentColor",
   inherit: "inherit"
-}, Y = {
-  "gradient-position": f("--un-gradient-position"),
-  "gradient-from": f("--un-gradient-from", { syntax: "<color>", initialValue: "#0000" }),
-  "gradient-via": f("--un-gradient-via", { syntax: "<color>", initialValue: "#0000" }),
-  "gradient-to": f("--un-gradient-to", { syntax: "<color>", initialValue: "#0000" }),
-  "gradient-stops": f("--un-gradient-stops"),
-  "gradient-via-stops": f("--un-gradient-via-stops"),
-  "gradient-from-position": f("--un-gradient-from-position", { syntax: "<length-percentage>", initialValue: "0%" }),
-  "gradient-via-position": f("--un-gradient-via-position", { syntax: "<length-percentage>", initialValue: "50%" }),
-  "gradient-to-position": f("--un-gradient-to-position", { syntax: "<length-percentage>", initialValue: "100%" })
+}, Q = {
+  "gradient-position": m("--un-gradient-position"),
+  "gradient-from": m("--un-gradient-from", { syntax: "<color>", initialValue: "#0000" }),
+  "gradient-via": m("--un-gradient-via", { syntax: "<color>", initialValue: "#0000" }),
+  "gradient-to": m("--un-gradient-to", { syntax: "<color>", initialValue: "#0000" }),
+  "gradient-stops": m("--un-gradient-stops"),
+  "gradient-via-stops": m("--un-gradient-via-stops"),
+  "gradient-from-position": m("--un-gradient-from-position", { syntax: "<length-percentage>", initialValue: "0%" }),
+  "gradient-via-position": m("--un-gradient-via-position", { syntax: "<length-percentage>", initialValue: "50%" }),
+  "gradient-to-position": m("--un-gradient-to-position", { syntax: "<length-percentage>", initialValue: "100%" })
 };
-function Z() {
-  return function* ([, r, o], { theme: e, symbols: n }) {
-    const a = {}, { colorData: c, cssVariable: s } = j(o, e);
-    if (c) {
-      const { color: t, keys: i, alpha: u } = c;
-      if (t) {
-        if (Object.values(X).includes(t))
-          a[`--un-gradient-${r}`] = t;
+function W() {
+  return function* ([, e, o], { theme: r, symbols: t }) {
+    const a = {}, { colorData: s, cssVariables: c } = w(o, r);
+    if (s) {
+      const { color: n, keys: i, alpha: l } = s;
+      if (n) {
+        if (Object.values(J).includes(n))
+          a[`--un-gradient-${e}`] = n;
         else {
-          a[`--un-${r}-opacity`] = u;
-          const $ = i ? B("colors", i) : t;
-          a[`--un-gradient-${r}`] = `color-mix(in oklab, ${$} var(--un-${r}-opacity), transparent)`, yield f(`--un-${r}-opacity`, { syntax: "<percentage>", initialValue: "100%" });
+          a[`--un-${e}-opacity`] = l;
+          const p = i ? B("colors", i) : n;
+          a[`--un-gradient-${e}`] = `color-mix(in oklab, ${p} var(--un-${e}-opacity), transparent)`, yield m(`--un-${e}-opacity`, { syntax: "<percentage>", initialValue: "100%" });
         }
-        i && I("colors", i), e && G(t, e);
+        i && z("colors", i), r && E(n, r);
       }
     } else
-      a[`--un-gradient-${r}`] = x.bracket.cssvar(o);
-    if (a[`--un-gradient-${r}`]) {
-      switch (r) {
+      a[`--un-gradient-${e}`] = h.bracket.cssvar(o);
+    if (a[`--un-gradient-${e}`]) {
+      switch (e) {
         case "from":
           yield {
             ...a,
@@ -154,16 +129,17 @@ function Z() {
           yield { ...a };
           break;
       }
-      for (const t of Object.values(Y))
-        yield t;
-      yield {
-        [n.selector]: (t) => t,
-        ...s
-      };
+      for (const n of Object.values(Q))
+        yield n;
+      for (const n of c)
+        yield {
+          [t.selector]: (i) => i,
+          ...n
+        };
     }
   };
 }
-const T = {
+const S = {
   l: ["-left"],
   r: ["-right"],
   t: ["-top"],
@@ -182,202 +158,218 @@ const T = {
   block: ["-block-start", "-block-end"],
   inline: ["-inline-start", "-inline-end"]
 };
-function V([, r = "", o], e) {
-  if (r in T) {
-    const { colorData: n, cssVariable: a } = j(o ?? "", e.theme);
-    if (n) {
-      const c = T[r].map((s) => oo(s)(n, e)).filter(J);
+function k([, e = "", o], r) {
+  if (e in S) {
+    const { colorData: t, cssVariables: a } = w(o ?? "", r.theme);
+    if (t) {
+      const s = S[e].map((c) => X(c)(t, r)).filter(U);
       return [
-        c.map((s) => s[0]).reduce((s, t) => (Object.assign(s, t), s), {}),
-        ...c.flatMap((s) => s.slice(1)),
-        {
-          [e.symbols.selector]: (s) => s,
-          ...a
-        }
+        s.map((c) => c[0]).reduce((c, n) => (Object.assign(c, n), c), {}),
+        ...s.flatMap((c) => c.slice(1)),
+        ...a.map((c) => ({
+          [r.symbols.selector]: (n) => n,
+          ...c
+        }))
       ];
     }
   }
 }
-function oo(r) {
-  return (o, e) => {
-    const n = H(o, `border${r}-color`, `border${r}`, e);
-    if (n) {
-      const a = n[0];
-      return o?.color && !Object.values(F).includes(o.color) && !o.alpha && r && r !== "" && (a[`--un-border${r}-opacity`] = "var(--un-border-opacity)"), n;
+function X(e) {
+  return (o, r) => {
+    const t = R(o, `border${e}-color`, `border${e}`, r);
+    if (t) {
+      const a = t[0];
+      return o?.color && !Object.values(G).includes(o.color) && !o.alpha && e && e !== "" && (a[`--un-border${e}-opacity`] = "var(--un-border-opacity)"), t;
     }
   };
 }
-const ro = {
+const Y = {
   "mask-image": "var(--un-mask-linear), var(--un-mask-radial), var(--un-mask-conic)",
   "mask-composite": "intersect"
-}, z = {
+}, j = {
   t: ["top"],
   b: ["bottom"],
   l: ["left"],
   r: ["right"],
   x: ["left", "right"],
   y: ["top", "bottom"]
-}, L = "linear-gradient(#fff, #fff)";
-function P([r, o = "", e, n], a) {
-  const c = { ...ro }, s = [];
-  if (s.push(...["linear", "radial", "conic"].map((t) => f(`--un-mask-${t}`, { initialValue: L }))), o in z) {
-    c["--un-mask-linear"] = "var(--un-mask-left), var(--un-mask-right), var(--un-mask-bottom), var(--un-mask-top)";
-    for (const t of z[o]) {
-      c[`--un-mask-${t}`] = `linear-gradient(to ${t}, var(--un-mask-${t}-from-color) var(--un-mask-${t}-from-position), var(--un-mask-${t}-to-color) var(--un-mask-${t}-to-position))`, R(n) != null ? (I("spacing"), c[`--un-mask-${t}-${e}-position`] = `calc(var(--spacing) * ${x.bracket.cssvar.fraction.number(n)})`) : c[`--un-mask-${t}-${e}-position`] = x.bracket.cssvar.fraction.rem(n);
-      const i = p(`--un-mask-${t}-${e}-color`, D("colors"))([r, n], a);
+}, D = "linear-gradient(#fff, #fff)";
+function T([e, o = "", r, t], a) {
+  const s = { ...Y }, c = [];
+  if (c.push(...["linear", "radial", "conic"].map((n) => m(`--un-mask-${n}`, { initialValue: D }))), o in j) {
+    s["--un-mask-linear"] = "var(--un-mask-left), var(--un-mask-right), var(--un-mask-bottom), var(--un-mask-top)";
+    for (const n of j[o]) {
+      s[`--un-mask-${n}`] = `linear-gradient(to ${n}, var(--un-mask-${n}-from-color) var(--un-mask-${n}-from-position), var(--un-mask-${n}-to-color) var(--un-mask-${n}-to-position))`, M(t) != null ? (z("spacing"), s[`--un-mask-${n}-${r}-position`] = `calc(var(--spacing) * ${h.bracket.cssvar.fraction.number(t)})`) : s[`--un-mask-${n}-${r}-position`] = h.bracket.cssvar.fraction.rem(t);
+      const i = u(`--un-mask-${n}-${r}-color`, C("colors"))([e, t], a);
       if (i) {
-        const [u, ...$] = i;
-        Object.assign(c, u), s.push(...$);
+        const [l, ...p] = i;
+        Object.assign(s, l), c.push(...p);
       }
-      s.push(...["from", "to"].flatMap((u) => [
-        f(`--un-mask-${t}-${u}-position`, { syntax: "<length-percentage>", initialValue: u === "from" ? "0%" : "100%" }),
-        f(`--un-mask-${t}-${u}-color`, { syntax: "<color>", initialValue: u === "from" ? "black" : "transparent" })
+      c.push(...["from", "to"].flatMap((l) => [
+        m(`--un-mask-${n}-${l}-position`, { syntax: "<length-percentage>", initialValue: l === "from" ? "0%" : "100%" }),
+        m(`--un-mask-${n}-${l}-color`, { syntax: "<color>", initialValue: l === "from" ? "black" : "transparent" })
       ]));
     }
-    s.push(...["top", "right", "bottom", "left"].map((t) => f(`--un-mask-${t}`, { initialValue: L })));
+    c.push(...["top", "right", "bottom", "left"].map((n) => m(`--un-mask-${n}`, { initialValue: D })));
   } else {
-    if (e == null)
-      o === "radial" ? (c["--un-mask-radial"] = "radial-gradient(var(--un-mask-radial-stops, var(--un-mask-radial-size)))", c["--un-mask-radial-size"] = x.bracket.cssvar.rem(n)) : (c[`--un-mask-${o}`] = `${o}-gradient(var(--un-mask-${o}-stops, var(--un-mask-${o}-position)))`, c[`--un-mask-${o}-position`] = R(n) ? `calc(1deg * ${x.bracket.cssvar.number(n)})` : x.bracket.cssvar.fraction(n));
+    if (r == null)
+      o === "radial" ? (s["--un-mask-radial"] = "radial-gradient(var(--un-mask-radial-stops, var(--un-mask-radial-size)))", s["--un-mask-radial-size"] = h.bracket.cssvar.rem(t)) : (s[`--un-mask-${o}`] = `${o}-gradient(var(--un-mask-${o}-stops, var(--un-mask-${o}-position)))`, s[`--un-mask-${o}-position`] = M(t) ? `calc(1deg * ${h.bracket.cssvar.number(t)})` : h.bracket.cssvar.fraction(t));
     else {
-      const t = {
+      const n = {
         linear: "",
         radial: "var(--un-mask-radial-shape) var(--un-mask-radial-size) at ",
         conic: "from "
       };
-      c[`--un-mask-${o}-stops`] = `${t[o]}var(--un-mask-${o}-position), var(--un-mask-${o}-from-color) var(--un-mask-${o}-from-position), var(--un-mask-${o}-to-color) var(--un-mask-${o}-to-position)`, c[`--un-mask-${o}`] = `${o}-gradient(var(--un-mask-${o}-stops))`;
-      const i = p(`--un-mask-${o}-${e}-color`, D("colors"))([r, n], a);
+      s[`--un-mask-${o}-stops`] = `${n[o]}var(--un-mask-${o}-position), var(--un-mask-${o}-from-color) var(--un-mask-${o}-from-position), var(--un-mask-${o}-to-color) var(--un-mask-${o}-to-position)`, s[`--un-mask-${o}`] = `${o}-gradient(var(--un-mask-${o}-stops))`;
+      const i = u(`--un-mask-${o}-${r}-color`, C("colors"))([e, t], a);
       if (i) {
-        const [u, ...$] = i;
-        Object.assign(c, u), s.push(...$);
+        const [l, ...p] = i;
+        Object.assign(s, l), c.push(...p);
       }
     }
-    o === "radial" && s.push(f("--un-mask-radial-shape", { initialValue: "ellipse" }), f("--un-mask-radial-size", { initialValue: "farthest-corner" })), s.push(...["from", "to"].flatMap((t) => [
-      f(`--un-mask-${o}-position`, { initialValue: o === "radial" ? "center" : "0deg" }),
-      f(`--un-mask-${o}-${t}-position`, { syntax: "<length-percentage>", initialValue: t === "from" ? "0%" : "100%" }),
-      f(`--un-mask-${o}-${t}-color`, { syntax: "<color>", initialValue: t === "from" ? "black" : "transparent" })
+    o === "radial" && c.push(m("--un-mask-radial-shape", { initialValue: "ellipse" }), m("--un-mask-radial-size", { initialValue: "farthest-corner" })), c.push(...["from", "to"].flatMap((n) => [
+      m(`--un-mask-${o}-position`, { initialValue: o === "radial" ? "center" : "0deg" }),
+      m(`--un-mask-${o}-${n}-position`, { syntax: "<length-percentage>", initialValue: n === "from" ? "0%" : "100%" }),
+      m(`--un-mask-${o}-${n}-color`, { syntax: "<color>", initialValue: n === "from" ? "black" : "transparent" })
     ]));
   }
-  return [c, ...s];
+  return [s, ...c];
 }
-function E(r) {
-  return (o, e) => {
-    const n = D(r);
-    return p(`--un-${n}-color`, n)(o, e);
+function I(e) {
+  return (o, r) => {
+    const t = C(e);
+    return u(`--un-${t}-color`, t)(o, r);
   };
 }
-const eo = [
+function Z(e, o) {
+  const r = e?.split(/-\d+-?/)[0];
+  if (L(r))
+    return;
+  const t = {};
+  let a = !1;
+  for (const s of v) {
+    const c = f(`${r}-${s}`, o)?.cssColor;
+    c ? t[s] = c : a = !0;
+  }
+  if (a)
+    try {
+      let s = f(r, o);
+      if (s?.color || (s = f(`[${r}]`, o)), s?.color && y.valid(s.color)) {
+        const c = y.theme(s.color, { type: "hex" });
+        for (const n of v)
+          t[n] || (t[n] = { type: "hex", components: [c[n]], alpha: 1 });
+      }
+    } catch (s) {
+      console.error(`[unocss-preset-margicolor] get ${r} theme fail, please use another color.`), console.error(s);
+    }
+  for (const s of v)
+    t[s] = x(t[s]);
+  return t;
+}
+function _(e, o, r, t) {
+  const a = o.match(/.*-(\d+)/)?.[1], s = {};
+  let c = f(o, t)?.color;
+  if (!c && !a && (c = f(`[${o}]`, t)?.color), c)
+    s[`--mc-${e}-color`] = c;
+  else if (a) {
+    const { originDepth: i, beforeDepth: l, afterDepth: p } = V(a);
+    r[l] && r[p] && (s[`--mc-${e}-color`] = P({
+      originDepth: i,
+      beforeDepth: l,
+      beforeComponents: r[l].components,
+      afterComponents: r[p].components
+    }));
+  }
+  const n = H(e, r);
+  return Object.assign(s, n);
+}
+function K(e, o, r = {}) {
+  if (f(e, r)?.color) {
+    console.error(`[unocss-preset-margicolor] The color name '${e}' has been configured in the theme, please use the another name.`);
+    return;
+  }
+  const [t] = o.split(/[:/]/), a = Z(t, r);
+  if (a)
+    return _(e, t, a, r);
+}
+function oo(e) {
+  return e.colors ? [{
+    getCSS: ({ theme: o }) => {
+      const r = {};
+      for (const t in e.colors)
+        Object.assign(r, K(t, e.colors[t], o));
+      return `
+          :root {
+            ${Object.entries(r).map(([t, a]) => `${t}: ${a};`).join(`
+`)}
+          }
+        `;
+    }
+  }] : [];
+}
+const ro = [
   // common style colors
-  [/^(?:color|c)-mc-(.+)$/, p("color", "text"), { autocomplete: "(color|c)-mc-$colors" }],
-  [/^text-(?:color-)?mc-(.+)$/, p("color", "text"), { autocomplete: "(text|text-color)-mc-$colors" }],
-  [/^outline-(?:color-)?mc-(.+)$/, p("outline-color", "outline"), { autocomplete: "(outline|outline-color)-mc-$colors" }],
-  [/^accent-mc-(.+)$/, p("accent-color", "accent"), { autocomplete: "accent-mc-$colors" }],
-  [/^caret-mc-(.+)$/, p("caret-color", "caret"), { autocomplete: "caret-mc-$colors" }],
-  [/^bg-mc-(.+)$/, p("background-color", "bg"), { autocomplete: "bg-mc-$colors" }],
+  [/^(?:color|c)-mc-(.+)$/, u("color", "text"), { autocomplete: "(color|c)-mc-$colors" }],
+  [/^text-(?:color-)?mc-(.+)$/, u("color", "text"), { autocomplete: "(text|text-color)-mc-$colors" }],
+  [/^outline-(?:color-)?mc-(.+)$/, u("outline-color", "outline"), { autocomplete: "(outline|outline-color)-mc-$colors" }],
+  [/^accent-mc-(.+)$/, u("accent-color", "accent"), { autocomplete: "accent-mc-$colors" }],
+  [/^caret-mc-(.+)$/, u("caret-color", "caret"), { autocomplete: "caret-mc-$colors" }],
+  [/^bg-mc-(.+)$/, u("background-color", "bg"), { autocomplete: "bg-mc-$colors" }],
   // from https://github.com/unocss/unocss/blob/main/packages-presets/preset-wind4/src/rules/decoration.ts
-  [/^(?:underline|decoration)-mc-(.+)$/, (r, o) => {
-    const e = p("text-decoration-color", "line")(r, o);
-    if (e) {
-      const n = e[0];
-      return n["-webkit-text-decoration-color"] = n["text-decoration-color"], e;
+  [/^(?:underline|decoration)-mc-(.+)$/, (e, o) => {
+    const r = u("text-decoration-color", "line")(e, o);
+    if (r) {
+      const t = r[0];
+      return t["-webkit-text-decoration-color"] = t["text-decoration-color"], r;
     }
   }, { autocomplete: "(underline|decoration)-mc-$colors" }],
   // from https://github.com/unocss/unocss/blob/main/packages-presets/preset-wind4/src/rules/divide.ts
-  [/^divide-mc-(.+)$/, function* (r, o) {
-    const e = p("border-color", "divide")(r, o);
-    e && (yield {
-      [o.symbols.variants]: [A(r[0])],
-      ...e[0]
-    }, yield e[1]);
+  [/^divide-mc-(.+)$/, function* (e, o) {
+    const r = u("border-color", "divide")(e, o);
+    r && (yield {
+      [o.symbols.variants]: [q(e[0])],
+      ...r[0]
+    }, yield r[1]);
   }, { autocomplete: "divide-mc-$colors" }],
-  [/^(?:filter-)?drop-shadow-color-mc-(.+)$/, p("--un-drop-shadow-color", "drop-shadow"), { autocomplete: "divide-mc-$colors" }],
-  [/^\$ placeholder-mc-(.+)$/, p("color", "placeholder"), { autocomplete: "placeholder-mc-$colors" }],
-  [/^ring-mc-(.+)$/, p("--un-ring-color", "ring"), { autocomplete: "ring-mc-$colors" }],
-  [/^inset-ring-mc-(.+)$/, p("--un-inset-ring-color", "inset-ring"), { autocomplete: "inset-ring-mc-$colors" }],
-  [/^ring-offset-mc-(.+)$/, p("--un-ring-offset-color", "ring-offset"), { autocomplete: "ring-offset-mc-$colors" }],
-  [/^shadow-mc-(.+)$/, E("shadow"), { autocomplete: ["shadow-$colors", "shadow-mc-$shadow"] }],
-  [/^inset-shadow-mc(.+)$/, E("insetShadow"), { autocomplete: ["inset-shadow-mc-$colors", "inset-shadow-mc-$insetShadow"] }],
-  [/^fill-mc-(.+)$/, p("fill", "fill"), { autocomplete: "fill-mc-$colors" }],
-  [/^stroke-mc-(.+)$/, p("stroke", "stroke"), { autocomplete: "stroke-mc-$colors" }],
-  [/^text-stroke-mc-(.+)$/, p("-webkit-text-stroke-color", "text-stroke"), { autocomplete: "text-stroke-mc-$colors" }],
-  [/^text-shadow-(?:color-)?mc-(.+)$/, p("--un-text-shadow-color", "text-shadow"), { autocomplete: ["text-shadow(-color)?-mc-$colors"] }],
-  [/^mask-(linear|radial|conic)-(from|to)-mc-(.+)$/, P, { autocomplete: ["mask-(linear|radial|conic)-(from|to)-mc-$colors"] }],
-  [/^mask-([trblxy])-(from|to)-mc-(.+)$/, P, { autocomplete: ["mask-(x|y|t|b|l|r)-(from|to)-mc-$colors"] }],
+  [/^(?:filter-)?drop-shadow-color-mc-(.+)$/, u("--un-drop-shadow-color", "drop-shadow"), { autocomplete: "divide-mc-$colors" }],
+  [/^\$ placeholder-mc-(.+)$/, u("color", "placeholder"), { autocomplete: "placeholder-mc-$colors" }],
+  [/^ring-mc-(.+)$/, u("--un-ring-color", "ring"), { autocomplete: "ring-mc-$colors" }],
+  [/^inset-ring-mc-(.+)$/, u("--un-inset-ring-color", "inset-ring"), { autocomplete: "inset-ring-mc-$colors" }],
+  [/^ring-offset-mc-(.+)$/, u("--un-ring-offset-color", "ring-offset"), { autocomplete: "ring-offset-mc-$colors" }],
+  [/^shadow-mc-(.+)$/, I("shadow"), { autocomplete: ["shadow-$colors", "shadow-mc-$shadow"] }],
+  [/^inset-shadow-mc(.+)$/, I("insetShadow"), { autocomplete: ["inset-shadow-mc-$colors", "inset-shadow-mc-$insetShadow"] }],
+  [/^fill-mc-(.+)$/, u("fill", "fill"), { autocomplete: "fill-mc-$colors" }],
+  [/^stroke-mc-(.+)$/, u("stroke", "stroke"), { autocomplete: "stroke-mc-$colors" }],
+  [/^text-stroke-mc-(.+)$/, u("-webkit-text-stroke-color", "text-stroke"), { autocomplete: "text-stroke-mc-$colors" }],
+  [/^text-shadow-(?:color-)?mc-(.+)$/, u("--un-text-shadow-color", "text-shadow"), { autocomplete: ["text-shadow(-color)?-mc-$colors"] }],
+  [/^mask-(linear|radial|conic)-(from|to)-mc-(.+)$/, T, { autocomplete: ["mask-(linear|radial|conic)-(from|to)-mc-$colors"] }],
+  [/^mask-([trblxy])-(from|to)-mc-(.+)$/, T, { autocomplete: ["mask-(x|y|t|b|l|r)-(from|to)-mc-$colors"] }],
   // border style colors
-  [/^(?:border|b)-()(?:color-)?mc-(.+)$/, V, { autocomplete: ["(border|b)-mc-$colors", "(border|b)-<directions>-mc-$colors"] }],
-  [/^(?:border|b)-([xy])-(?:color-)?mc-(.+)$/, V],
-  [/^(?:border|b)-([rltbse])-(?:color-)?mc-(.+)$/, V],
-  [/^(?:border|b)-(block|inline)-(?:color-)?mc-(.+)$/, V],
-  [/^(?:border|b)-([bi][se])-(?:color-)?mc-(.+)$/, V],
+  [/^(?:border|b)-()(?:color-)?mc-(.+)$/, k, { autocomplete: ["(border|b)-mc-$colors", "(border|b)-<directions>-mc-$colors"] }],
+  [/^(?:border|b)-([xy])-(?:color-)?mc-(.+)$/, k],
+  [/^(?:border|b)-([rltbse])-(?:color-)?mc-(.+)$/, k],
+  [/^(?:border|b)-(block|inline)-(?:color-)?mc-(.+)$/, k],
+  [/^(?:border|b)-([bi][se])-(?:color-)?mc-(.+)$/, k],
   // bg gradient color
-  [/^(from|via|to|stops)-mc-(.+)$/, Z()]
-], to = [
-  [/^mc-(.+)$/, no]
+  [/^(from|via|to|stops)-mc-(.+)$/, W()]
+], eo = [
+  [/^mc-(.+)$/, to]
 ];
-function no([, r], { theme: o }) {
-  const e = {}, [n, a] = r.split("_");
-  if (!a)
-    return;
-  if (y(n, o)?.color) {
-    console.error(`[unocss-preset-margicolor][mc-${r}] The color name '${n}' has been configured in the theme, please use the another name.`);
-    return;
-  }
-  const [c] = a.split(/[:/]/), s = c.match(/.*-(\d+)/)?.[1], t = c?.split(/-\d+-?/)[0];
-  if (!t || !Number.isNaN(Number(t))) {
-    console.error(`[unocss-preset-margicolor][mc-${r}] The color '${t}' is invalid.`);
-    return;
-  }
-  const i = {};
-  let u = !1;
-  for (const l of M) {
-    const m = y(`${t}-${l}`, o)?.cssColor;
-    m ? i[l] = m : u = !0;
-  }
-  if (u)
-    try {
-      const l = y(t, o)?.color, m = l ? K(l) : void 0;
-      if (m && N.valid(m)) {
-        const b = N.theme(m);
-        for (const d of M)
-          if (!i[d]) {
-            const g = C({ type: "hex", components: [b[d]], alpha: 1 });
-            i[d] = g;
-          }
-      }
-    } catch (l) {
-      console.error(`[unocss-preset-margicolor] Error parsing ${r}: get ${t} theme fail, please use another color.`), console.error(l);
-    }
-  for (const l of M)
-    i[l] = C(i[l]);
-  const $ = y(c, o);
-  if ($?.color)
-    e[`--mc-${n}-color`] = $.color;
-  else if (s) {
-    const { originDepth: l, beforeDepth: m, afterDepth: b } = O(s);
-    if (i[m] && i[b]) {
-      const d = (l - m) / 100, g = Array.from({ length: 3 }).map((k, v) => {
-        const w = i[m].components, S = i[b].components, _ = h(w[v]) + (h(S[v]) - h(w[v])) * d;
-        return `${Math.round(_ * 1e3) / 1e3}`;
-      });
-      e[`--mc-${n}-color`] = `oklch(${g.join(" ")})`;
-    }
-  }
-  for (const l of M)
-    if (i[l]) {
-      const m = i[l].components;
-      e[`--mc-${n}-${l}-l`] = Math.round(h(m[0]) * 1e3) / 1e3, e[`--mc-${n}-${l}-c`] = Math.round(h(m[1]) * 1e3) / 1e3, e[`--mc-${n}-${l}-h`] = Math.round(h(m[2]) * 1e3) / 1e3;
-    }
-  return e;
+function to([, e], { theme: o }) {
+  const r = e.indexOf("_"), t = e.substring(0, r), a = e.substring(r + 1);
+  return a ? K(t, a, o) : void 0;
 }
-const ao = [
-  eo,
-  to
+const no = [
+  ro,
+  eo
 ].flat();
-function uo(r) {
+function uo(e = {}) {
   return {
     name: "unocss-preset-magicolor",
     layer: "unocss-preset-magicolor",
     layers: { "unocss-preset-magicolor": -100 },
-    rules: ao
+    rules: no,
+    preflights: oo(e)
   };
 }
 export {

package/dist/types/helper.d.ts

@@ -1 +1,12 @@
-export declare function updateMagicColor(): void;
+/**
+ * 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`
+ */
+export declare function updateMagicColor(params: {
+    name: string;
+    color: string;
+    dom?: HTMLElement;
+}): void;

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
 import { Preset } from 'unocss';
 import { PresetMcOptions } from './types';
-export declare function presetMagicolor(_options?: PresetMcOptions): Preset;
+export declare function presetMagicolor(options?: PresetMcOptions): Preset;
 export * from './types';
 export default presetMagicolor;

package/dist/types/preflights/index.d.ts

@@ -0,0 +1,3 @@
+import { Preflight } from 'unocss';
+import { PresetMcOptions } from '../types';
+export declare function preflights(options: PresetMcOptions): Preflight[];

package/dist/types/rules/color-style.d.ts

@@ -1,2 +1,3 @@
+import { Theme } from '@unocss/preset-wind4';
 import { Rule } from 'unocss';
-export declare const colorStyle: Rule[];
+export declare const colorStyle: Rule<Theme>[];

package/dist/types/rules/utils/border.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from '@unocss/preset-wind4';
+import { CSSEntries, CSSValueInput, RuleContext } from 'unocss';
+export declare function handlerBorderColor([, a, b]: string[], ctx: RuleContext<Theme>): CSSEntries | (CSSValueInput | string)[] | undefined;

package/dist/types/rules/utils/index.d.ts

@@ -0,0 +1,6 @@
+export * from './bg-gradient';
+export * from './border';
+export * from './mask';
+export * from './shadow';
+export * from './theme-colors';
+export * from './utilities';

package/dist/types/rules/utils/theme-colors.d.ts

@@ -0,0 +1,10 @@
+import { Theme } from '@unocss/preset-wind4';
+import { CSSObject } from 'unocss';
+/**
+ * resolve color variable
+ * @param name color name
+ * @param hue `color-depth`: color can be theme color or css color
+ * @param theme unocss theme
+ * @returns css variables
+ */
+export declare function resolveThemeColorVariable(name: string, hue: string, theme?: Theme): CSSObject | undefined;

package/dist/types/{utils → rules/utils}/utilities.d.ts

@@ -1,12 +1,5 @@
 import { Theme } from '@unocss/preset-wind4';
 import { CSSObject, CSSValueInput, RuleContext } from 'unocss';
-import { ThemeKey } from '../typing';
-export declare const themeMetaList: ThemeKey[];
-export declare function resolveDepth(no: string): {
-    originDepth: number;
-    beforeDepth: number;
-    afterDepth: number;
-};
 export declare function parseMagicColor(body: string, theme: Theme): {
     colorData: {
         opacity: string | undefined;
@@ -18,6 +11,6 @@ export declare function parseMagicColor(body: string, theme: Theme): {
         keys: string[] | undefined;
         readonly cssColor: import('@unocss/preset-wind4/utils').CSSColorValue | undefined;
     } | undefined;
-    cssVariable: CSSObject;
+    cssVariables: CSSObject[];
 };
 export declare function mcColorResolver(property: string, varName: string): ([, body]: string[], ctx: RuleContext<Theme>) => (CSSValueInput | string)[] | undefined;

package/dist/types/types.d.ts

@@ -1,3 +1,5 @@
 /** PresetMcOptions */
 export interface PresetMcOptions {
+    /** global colors variables */
+    colors?: Record<string, string>;
 }

package/dist/types/utils/common.d.ts

@@ -0,0 +1,20 @@
+import { CSSColorValue } from '@unocss/preset-wind4/utils';
+import { CSSObject } from 'unocss';
+import { ThemeKey } from '../typing';
+export declare const themeMetaList: ThemeKey[];
+export declare function resolveDepth(no: string): {
+    originDepth: keyof import('magic-color').ThemeMetas;
+    beforeDepth: keyof import('magic-color').ThemeMetas;
+    afterDepth: keyof import('magic-color').ThemeMetas;
+};
+/**
+ * is invalid color
+ */
+export declare function isInvalidColor(color?: string): boolean;
+export declare function countDiffColor(params: {
+    originDepth: number;
+    beforeDepth: number;
+    beforeComponents: (string | number)[];
+    afterComponents: (string | number)[];
+}): string;
+export declare function generateOklchVariable(name: string, themeMetaColors: Partial<Record<ThemeKey, CSSColorValue>>): CSSObject;

package/dist/types/utils/index.d.ts

@@ -1,6 +1,2 @@
-export * from './bg-gradient';
-export * from './border';
-export * from './mask';
-export * from './shadow';
+export * from './common';
 export * from './transforms';
-export * from './utilities';

package/dist/types/utils/transforms.d.ts

@@ -3,3 +3,5 @@ import { CSSColorValue } from '@unocss/preset-wind4/utils';
 export declare function toNum(value?: string | number): number;
 /** to oklch color */
 export declare function toOklch(cssColor?: CSSColorValue): CSSColorValue | undefined;
+/** Math.round(num * 1000) / 1000 */
+export declare function roundNum(num: number): number;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "unocss-preset-magicolor",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Unocss预设",
   "author": "nxy",
   "license": "MIT",
@@ -26,12 +26,10 @@
     "dist"
   ],
   "dependencies": {
-    "@unocss/preset-wind4": "66.5.4",
-    "culori": "^4.0.2",
-    "magic-color": "^2.1.0"
+    "@unocss/preset-wind4": "~66.5.9",
+    "magic-color": "^2.2.3"
   },
   "devDependencies": {
-    "@types/culori": "^4.0.1",
-    "unocss": "^66.5.4"
+    "unocss": "^66.5.9"
   }
 }

package/dist/types/utils/border.d.ts

@@ -1,3 +0,0 @@
-import { Theme } from '@unocss/preset-wind4';
-import { CSSEntries, CSSValueInput, RuleContext } from 'unocss';
-export declare function mcBorderColorResolver([, a, b]: string[], ctx: RuleContext<Theme>): CSSEntries | (CSSValueInput | string)[] | undefined;