@unocss/preset-mini 0.55.6 → 0.56.0

package/dist/shared/{preset-mini.f1fe435e.mjs → preset-mini.8929b018.mjs}

@@ -1,4 +1,5 @@
-import { escapeSelector, createValueHandler, toArray, isString, escapeRegExp } from '@unocss/core';
+import { createValueHandler, parseCssColor, colorToString, colorOpacityToString, getStringComponents } from '@unocss/rule-utils';
+import { escapeSelector, toArray } from '@unocss/core';
 
 const directionMap = {
   "l": ["-left"],
@@ -397,7 +398,7 @@ function splitShorthand(body, type) {
   }
   return split;
 }
-function parseColor$1(body, theme) {
+function parseColor(body, theme) {
   const [main, opacity] = splitShorthand(body, "color");
   const colors = main.replace(/([a-z])([0-9])/g, "$1-$2").split(/-/g);
   const [name] = colors;
@@ -454,7 +455,7 @@ function parseColor$1(body, theme) {
 }
 function colorResolver(property, varName, shouldPass) {
   return ([, body], { theme }) => {
-    const data = parseColor$1(body, theme);
+    const data = parseColor(body, theme);
     if (!data)
       return;
     const { alpha, color, cssColor } = data;
@@ -477,7 +478,7 @@ function colorableShadows(shadows, colorVar) {
   const colored = [];
   shadows = toArray(shadows);
   for (let i = 0; i < shadows.length; i++) {
-    const components = getComponents(shadows[i], " ", 6);
+    const components = getStringComponents(shadows[i], " ", 6);
     if (!components || components.length < 3)
       return shadows;
     const color = parseCssColor(components.pop());
@@ -488,7 +489,7 @@ function colorableShadows(shadows, colorVar) {
   return colored;
 }
 function hasParseableColor(color, theme) {
-  return color != null && !!parseColor$1(color, theme)?.color;
+  return color != null && !!parseColor(color, theme)?.color;
 }
 function resolveBreakpoints({ theme, generator }) {
   let breakpoints;
@@ -509,269 +510,5 @@ function resolveVerticalBreakpoints({ theme, generator }) {
 function makeGlobalStaticRules(prefix, property) {
   return globalKeywords.map((keyword) => [`${prefix}-${keyword}`, { [property ?? prefix]: keyword }]);
 }
-function getBracket(str, open, close) {
-  if (str === "")
-    return;
-  const l = str.length;
-  let parenthesis = 0;
-  let opened = false;
-  let openAt = 0;
-  for (let i = 0; i < l; i++) {
-    switch (str[i]) {
-      case open:
-        if (!opened) {
-          opened = true;
-          openAt = i;
-        }
-        parenthesis++;
-        break;
-      case close:
-        --parenthesis;
-        if (parenthesis < 0)
-          return;
-        if (parenthesis === 0) {
-          return [
-            str.slice(openAt, i + 1),
-            str.slice(i + 1),
-            str.slice(0, openAt)
-          ];
-        }
-        break;
-    }
-  }
-}
-function getComponent(str, open, close, separators) {
-  if (str === "")
-    return;
-  if (isString(separators))
-    separators = [separators];
-  if (separators.length === 0)
-    return;
-  const l = str.length;
-  let parenthesis = 0;
-  for (let i = 0; i < l; i++) {
-    switch (str[i]) {
-      case open:
-        parenthesis++;
-        break;
-      case close:
-        if (--parenthesis < 0)
-          return;
-        break;
-      default:
-        for (const separator of separators) {
-          const separatorLength = separator.length;
-          if (separatorLength && separator === str.slice(i, i + separatorLength) && parenthesis === 0) {
-            if (i === 0 || i === l - separatorLength)
-              return;
-            return [
-              str.slice(0, i),
-              str.slice(i + separatorLength)
-            ];
-          }
-        }
-    }
-  }
-  return [
-    str,
-    ""
-  ];
-}
-function getComponents(str, separators, limit) {
-  limit = limit ?? 10;
-  const components = [];
-  let i = 0;
-  while (str !== "") {
-    if (++i > limit)
-      return;
-    const componentPair = getComponent(str, "(", ")", separators);
-    if (!componentPair)
-      return;
-    const [component, rest] = componentPair;
-    components.push(component);
-    str = rest;
-  }
-  if (components.length > 0)
-    return components;
-}
-
-const cssColorFunctions = ["hsl", "hsla", "hwb", "lab", "lch", "oklab", "oklch", "rgb", "rgba"];
-const alphaPlaceholders = ["%alpha", "<alpha-value>"];
-const alphaPlaceholdersRE = new RegExp(alphaPlaceholders.map((v) => escapeRegExp(v)).join("|"));
-function hex2rgba(hex = "") {
-  const color = parseHexColor(hex);
-  if (color != null) {
-    const { components, alpha } = color;
-    if (alpha == null)
-      return components;
-    return [...components, alpha];
-  }
-}
-function parseCssColor(str = "") {
-  const color = parseColor(str);
-  if (color == null || color === false)
-    return;
-  const { type: casedType, components, alpha } = color;
-  const type = casedType.toLowerCase();
-  if (components.length === 0)
-    return;
-  if (["rgba", "hsla"].includes(type) && alpha == null)
-    return;
-  if (cssColorFunctions.includes(type) && ![1, 3].includes(components.length))
-    return;
-  return {
-    type,
-    components: components.map((c) => typeof c === "string" ? c.trim() : c),
-    alpha: typeof alpha === "string" ? alpha.trim() : alpha
-  };
-}
-function colorOpacityToString(color) {
-  const alpha = color.alpha ?? 1;
-  return typeof alpha === "string" && alphaPlaceholders.includes(alpha) ? 1 : alpha;
-}
-function colorToString(color, alphaOverride) {
-  if (typeof color === "string")
-    return color.replace(alphaPlaceholdersRE, `${alphaOverride ?? 1}`);
-  const { components } = color;
-  let { alpha, type } = color;
-  alpha = alphaOverride ?? alpha;
-  type = type.toLowerCase();
-  if (["hsla", "hsl", "rgba", "rgb"].includes(type))
-    return `${type.replace("a", "")}a(${components.join(",")}${alpha == null ? "" : `,${alpha}`})`;
-  alpha = alpha == null ? "" : ` / ${alpha}`;
-  if (cssColorFunctions.includes(type))
-    return `${type}(${components.join(" ")}${alpha})`;
-  return `color(${type} ${components.join(" ")}${alpha})`;
-}
-function parseColor(str) {
-  if (!str)
-    return;
-  let color = parseHexColor(str);
-  if (color != null)
-    return color;
-  color = cssColorKeyword(str);
-  if (color != null)
-    return color;
-  color = parseCssCommaColorFunction(str);
-  if (color != null)
-    return color;
-  color = parseCssSpaceColorFunction(str);
-  if (color != null)
-    return color;
-  color = parseCssColorFunction(str);
-  if (color != null)
-    return color;
-}
-function parseHexColor(str) {
-  const [, body] = str.match(/^#([\da-f]+)$/i) || [];
-  if (!body)
-    return;
-  switch (body.length) {
-    case 3:
-    case 4:
-      const digits = Array.from(body, (s) => Number.parseInt(s, 16)).map((n) => n << 4 | n);
-      return {
-        type: "rgb",
-        components: digits.slice(0, 3),
-        alpha: body.length === 3 ? void 0 : Math.round(digits[3] / 255 * 100) / 100
-      };
-    case 6:
-    case 8:
-      const value = Number.parseInt(body, 16);
-      return {
-        type: "rgb",
-        components: body.length === 6 ? [value >> 16 & 255, value >> 8 & 255, value & 255] : [value >> 24 & 255, value >> 16 & 255, value >> 8 & 255],
-        alpha: body.length === 6 ? void 0 : Math.round((value & 255) / 255 * 100) / 100
-      };
-  }
-}
-function cssColorKeyword(str) {
-  const color = {
-    rebeccapurple: [102, 51, 153, 1]
-  }[str];
-  if (color != null) {
-    return {
-      type: "rgb",
-      components: color.slice(0, 3),
-      alpha: color[3]
-    };
-  }
-}
-function parseCssCommaColorFunction(color) {
-  const match = color.match(/^(rgb|rgba|hsl|hsla)\((.+)\)$/i);
-  if (!match)
-    return;
-  const [, type, componentString] = match;
-  const components = getComponents(componentString, ",", 5);
-  if (components) {
-    if ([3, 4].includes(components.length)) {
-      return {
-        type,
-        components: components.slice(0, 3),
-        alpha: components[3]
-      };
-    } else if (components.length !== 1) {
-      return false;
-    }
-  }
-}
-const cssColorFunctionsRe = new RegExp(`^(${cssColorFunctions.join("|")})\\((.+)\\)$`, "i");
-function parseCssSpaceColorFunction(color) {
-  const match = color.match(cssColorFunctionsRe);
-  if (!match)
-    return;
-  const [, fn, componentString] = match;
-  const parsed = parseCssSpaceColorValues(`${fn} ${componentString}`);
-  if (parsed) {
-    const { alpha, components: [type, ...components] } = parsed;
-    return {
-      type,
-      components,
-      alpha
-    };
-  }
-}
-function parseCssColorFunction(color) {
-  const match = color.match(/^color\((.+)\)$/);
-  if (!match)
-    return;
-  const parsed = parseCssSpaceColorValues(match[1]);
-  if (parsed) {
-    const { alpha, components: [type, ...components] } = parsed;
-    return {
-      type,
-      components,
-      alpha
-    };
-  }
-}
-function parseCssSpaceColorValues(componentString) {
-  const components = getComponents(componentString, " ");
-  if (!components)
-    return;
-  let totalComponents = components.length;
-  if (components[totalComponents - 2] === "/") {
-    return {
-      components: components.slice(0, totalComponents - 2),
-      alpha: components[totalComponents - 1]
-    };
-  }
-  if (components[totalComponents - 2] != null && (components[totalComponents - 2].endsWith("/") || components[totalComponents - 1].startsWith("/"))) {
-    const removed = components.splice(totalComponents - 2);
-    components.push(removed.join(" "));
-    --totalComponents;
-  }
-  const withAlpha = getComponents(components[totalComponents - 1], "/", 2);
-  if (!withAlpha)
-    return;
-  if (withAlpha.length === 1 || withAlpha[withAlpha.length - 1] === "")
-    return { components };
-  const alpha = withAlpha.pop();
-  components[totalComponents - 1] = withAlpha.join("/");
-  return {
-    components,
-    alpha
-  };
-}
 
-export { CONTROL_MINI_NO_NEGATIVE as C, hasParseableColor as a, colorableShadows as b, colorResolver as c, positionMap as d, getBracket as e, hex2rgba as f, globalKeywords as g, h, parseCssColor as i, colorOpacityToString as j, colorToString as k, directionMap as l, makeGlobalStaticRules as m, insetMap as n, cornerMap as o, parseColor$1 as p, handler as q, directionSize as r, splitShorthand as s, resolveBreakpoints as t, resolveVerticalBreakpoints as u, valueHandlers as v, getComponent as w, xyzMap as x, getComponents as y, numberWithUnitRE as z };
+export { CONTROL_MINI_NO_NEGATIVE as C, hasParseableColor as a, colorableShadows as b, colorResolver as c, positionMap as d, directionMap as e, cornerMap as f, globalKeywords as g, h, insetMap as i, resolveBreakpoints as j, directionSize as k, handler as l, makeGlobalStaticRules as m, numberWithUnitRE as n, parseColor as p, resolveVerticalBreakpoints as r, splitShorthand as s, valueHandlers as v, xyzMap as x };

package/dist/shared/{preset-mini.8ff442ab.d.mts → preset-mini.97d1ec1e.d.mts}

@@ -51,8 +51,8 @@ declare function parseColor(body: string, theme: Theme): ParsedColorValue | unde
  *
  * @param {string} property - Property for the css value to be created.
  * @param {string} varName - Base name for the opacity variable.
- * @param {function} [shouldPass] - Function to decide whether to pass the css.
- * @return {@link DynamicMatcher} object.
+ * @param {Function} [shouldPass] - Function to decide whether to pass the css.
+ * @return {DynamicMatcher} object.
  */
 declare function colorResolver(property: string, varName: string, shouldPass?: (css: CSSObject) => boolean): DynamicMatcher;
 declare function colorableShadows(shadows: string | string[], colorVar: string): string[];
@@ -60,8 +60,5 @@ declare function hasParseableColor(color: string | undefined, theme: Theme): boo
 declare function resolveBreakpoints({ theme, generator }: Readonly<VariantContext<Theme>>): Record<string, string> | undefined;
 declare function resolveVerticalBreakpoints({ theme, generator }: Readonly<VariantContext<Theme>>): Record<string, string> | undefined;
 declare function makeGlobalStaticRules(prefix: string, property?: string): StaticRule[];
-declare function getBracket(str: string, open: string, close: string): string[] | undefined;
-declare function getComponent(str: string, open: string, close: string, separators: string | string[]): string[] | undefined;
-declare function getComponents(str: string, separators: string | string[], limit?: number): string[] | undefined;
 
-export { CONTROL_MINI_NO_NEGATIVE as C, colorableShadows as a, resolveVerticalBreakpoints as b, colorResolver as c, directionSize as d, getComponent as e, getComponents as f, getBracket as g, hasParseableColor as h, makeGlobalStaticRules as m, parseColor as p, resolveBreakpoints as r, splitShorthand as s };
+export { CONTROL_MINI_NO_NEGATIVE as C, colorableShadows as a, resolveVerticalBreakpoints as b, colorResolver as c, directionSize as d, hasParseableColor as h, makeGlobalStaticRules as m, parseColor as p, resolveBreakpoints as r, splitShorthand as s };

package/dist/shared/{preset-mini.f9bfbfc9.d.cts → preset-mini.d62ae954.d.cts}

@@ -51,8 +51,8 @@ declare function parseColor(body: string, theme: Theme): ParsedColorValue | unde
  *
  * @param {string} property - Property for the css value to be created.
  * @param {string} varName - Base name for the opacity variable.
- * @param {function} [shouldPass] - Function to decide whether to pass the css.
- * @return {@link DynamicMatcher} object.
+ * @param {Function} [shouldPass] - Function to decide whether to pass the css.
+ * @return {DynamicMatcher} object.
  */
 declare function colorResolver(property: string, varName: string, shouldPass?: (css: CSSObject) => boolean): DynamicMatcher;
 declare function colorableShadows(shadows: string | string[], colorVar: string): string[];
@@ -60,8 +60,5 @@ declare function hasParseableColor(color: string | undefined, theme: Theme): boo
 declare function resolveBreakpoints({ theme, generator }: Readonly<VariantContext<Theme>>): Record<string, string> | undefined;
 declare function resolveVerticalBreakpoints({ theme, generator }: Readonly<VariantContext<Theme>>): Record<string, string> | undefined;
 declare function makeGlobalStaticRules(prefix: string, property?: string): StaticRule[];
-declare function getBracket(str: string, open: string, close: string): string[] | undefined;
-declare function getComponent(str: string, open: string, close: string, separators: string | string[]): string[] | undefined;
-declare function getComponents(str: string, separators: string | string[], limit?: number): string[] | undefined;
 
-export { CONTROL_MINI_NO_NEGATIVE as C, colorableShadows as a, resolveVerticalBreakpoints as b, colorResolver as c, directionSize as d, getComponent as e, getComponents as f, getBracket as g, hasParseableColor as h, makeGlobalStaticRules as m, parseColor as p, resolveBreakpoints as r, splitShorthand as s };
+export { CONTROL_MINI_NO_NEGATIVE as C, colorableShadows as a, resolveVerticalBreakpoints as b, colorResolver as c, directionSize as d, hasParseableColor as h, makeGlobalStaticRules as m, parseColor as p, resolveBreakpoints as r, splitShorthand as s };

package/dist/shared/{preset-mini.5bfee53b.cjs → preset-mini.f22c1fe0.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-const colors = require('./preset-mini.b4ad509c.cjs');
+const utils = require('./preset-mini.3a376028.cjs');
 
 const cursorValues = ["auto", "default", "none", "context-menu", "help", "pointer", "progress", "wait", "cell", "crosshair", "text", "vertical-text", "alias", "copy", "move", "no-drop", "not-allowed", "grab", "grabbing", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "zoom-in", "zoom-out"];
 const containValues = ["none", "strict", "content", "size", "inline-size", "layout", "style", "paint"];
@@ -13,24 +13,24 @@ const displays = [
   ["flow-root", { display: "flow-root" }],
   ["list-item", { display: "list-item" }],
   ["hidden", { display: "none" }],
-  [/^display-(.+)$/, ([, c]) => ({ display: colors.h.bracket.cssvar.global(c) || c })]
+  [/^display-(.+)$/, ([, c]) => ({ display: utils.h.bracket.cssvar.global(c) || c })]
 ];
 const appearances = [
   ["visible", { visibility: "visible" }],
   ["invisible", { visibility: "hidden" }],
   ["backface-visible", { "backface-visibility": "visible" }],
   ["backface-hidden", { "backface-visibility": "hidden" }],
-  ...colors.makeGlobalStaticRules("backface", "backface-visibility")
+  ...utils.makeGlobalStaticRules("backface", "backface-visibility")
 ];
 const cursors = [
-  [/^cursor-(.+)$/, ([, c]) => ({ cursor: colors.h.bracket.cssvar.global(c) })],
+  [/^cursor-(.+)$/, ([, c]) => ({ cursor: utils.h.bracket.cssvar.global(c) })],
   ...cursorValues.map((v) => [`cursor-${v}`, { cursor: v }])
 ];
 const contains = [
   [/^contain-(.*)$/, ([, d]) => {
-    if (colors.h.bracket(d) != null) {
+    if (utils.h.bracket(d) != null) {
       return {
-        contain: colors.h.bracket(d).split(" ").map((e) => colors.h.cssvar.fraction(e) ?? e).join(" ")
+        contain: utils.h.bracket(d).split(" ").map((e) => utils.h.cssvar.fraction(e) ?? e).join(" ")
       };
     }
     return containValues.includes(d) ? { contain: d } : void 0;
@@ -39,38 +39,38 @@ const contains = [
 const pointerEvents = [
   ["pointer-events-auto", { "pointer-events": "auto" }],
   ["pointer-events-none", { "pointer-events": "none" }],
-  ...colors.makeGlobalStaticRules("pointer-events")
+  ...utils.makeGlobalStaticRules("pointer-events")
 ];
 const resizes = [
   ["resize-x", { resize: "horizontal" }],
   ["resize-y", { resize: "vertical" }],
   ["resize", { resize: "both" }],
   ["resize-none", { resize: "none" }],
-  ...colors.makeGlobalStaticRules("resize")
+  ...utils.makeGlobalStaticRules("resize")
 ];
 const userSelects = [
   ["select-auto", { "-webkit-user-select": "auto", "user-select": "auto" }],
   ["select-all", { "-webkit-user-select": "all", "user-select": "all" }],
   ["select-text", { "-webkit-user-select": "text", "user-select": "text" }],
   ["select-none", { "-webkit-user-select": "none", "user-select": "none" }],
-  ...colors.makeGlobalStaticRules("select", "user-select")
+  ...utils.makeGlobalStaticRules("select", "user-select")
 ];
 const whitespaces = [
   [
     /^(?:whitespace-|ws-)([-\w]+)$/,
-    ([, v]) => ["normal", "nowrap", "pre", "pre-line", "pre-wrap", "break-spaces", ...colors.globalKeywords].includes(v) ? { "white-space": v } : void 0,
+    ([, v]) => ["normal", "nowrap", "pre", "pre-line", "pre-wrap", "break-spaces", ...utils.globalKeywords].includes(v) ? { "white-space": v } : void 0,
     { autocomplete: "(whitespace|ws)-(normal|nowrap|pre|pre-line|pre-wrap|break-spaces)" }
   ]
 ];
 const contentVisibility = [
-  [/^intrinsic-size-(.+)$/, ([, d]) => ({ "contain-intrinsic-size": colors.h.bracket.cssvar.global.fraction.rem(d) }), { autocomplete: "intrinsic-size-<num>" }],
+  [/^intrinsic-size-(.+)$/, ([, d]) => ({ "contain-intrinsic-size": utils.h.bracket.cssvar.global.fraction.rem(d) }), { autocomplete: "intrinsic-size-<num>" }],
   ["content-visibility-visible", { "content-visibility": "visible" }],
   ["content-visibility-hidden", { "content-visibility": "hidden" }],
   ["content-visibility-auto", { "content-visibility": "auto" }],
-  ...colors.makeGlobalStaticRules("content-visibility")
+  ...utils.makeGlobalStaticRules("content-visibility")
 ];
 const contents = [
-  [/^content-(.+)$/, ([, v]) => ({ content: colors.h.bracket.cssvar(v) })],
+  [/^content-(.+)$/, ([, v]) => ({ content: utils.h.bracket.cssvar(v) })],
   ["content-empty", { content: '""' }],
   ["content-none", { content: "none" }]
 ];
@@ -97,7 +97,7 @@ const textTransforms = [
   ["case-lower", { "text-transform": "lowercase" }],
   ["case-capital", { "text-transform": "capitalize" }],
   ["case-normal", { "text-transform": "none" }],
-  ...colors.makeGlobalStaticRules("case", "text-transform")
+  ...utils.makeGlobalStaticRules("case", "text-transform")
 ];
 const fontStyles = [
   ["italic", { "font-style": "italic" }],
@@ -112,13 +112,11 @@ const fontStyles = [
 const fontSmoothings = [
   ["antialiased", {
     "-webkit-font-smoothing": "antialiased",
-    "-moz-osx-font-smoothing": "grayscale",
-    "font-smoothing": "grayscale"
+    "-moz-osx-font-smoothing": "grayscale"
   }],
   ["subpixel-antialiased", {
     "-webkit-font-smoothing": "auto",
-    "-moz-osx-font-smoothing": "auto",
-    "font-smoothing": "auto"
+    "-moz-osx-font-smoothing": "auto"
   }]
 ];
 
@@ -133,7 +131,7 @@ const ringBase = {
 const rings = [
   // size
   [/^ring(?:-(.+))?$/, ([, d], { theme }) => {
-    const value = theme.ringWidth?.[d || "DEFAULT"] ?? colors.h.px(d || "1");
+    const value = theme.ringWidth?.[d || "DEFAULT"] ?? utils.h.px(d || "1");
     if (value) {
       return {
         "--un-ring-width": value,
@@ -143,16 +141,16 @@ const rings = [
       };
     }
   }, { autocomplete: "ring-$ringWidth" }],
-  [/^ring-(?:width-|size-)(.+)$/, ([, d], { theme }) => ({ "--un-ring-width": theme.lineWidth?.[d] ?? colors.h.bracket.cssvar.px(d) }), { autocomplete: "ring-(width|size)-$lineWidth" }],
+  [/^ring-(?:width-|size-)(.+)$/, ([, d], { theme }) => ({ "--un-ring-width": theme.lineWidth?.[d] ?? utils.h.bracket.cssvar.px(d) }), { autocomplete: "ring-(width|size)-$lineWidth" }],
   // offset size
   ["ring-offset", { "--un-ring-offset-width": "1px" }],
-  [/^ring-offset-(?:width-|size-)?(.+)$/, ([, d], { theme }) => ({ "--un-ring-offset-width": theme.lineWidth?.[d] ?? colors.h.bracket.cssvar.px(d) }), { autocomplete: "ring-offset-(width|size)-$lineWidth" }],
+  [/^ring-offset-(?:width-|size-)?(.+)$/, ([, d], { theme }) => ({ "--un-ring-offset-width": theme.lineWidth?.[d] ?? utils.h.bracket.cssvar.px(d) }), { autocomplete: "ring-offset-(width|size)-$lineWidth" }],
   // colors
-  [/^ring-(.+)$/, colors.colorResolver("--un-ring-color", "ring"), { autocomplete: "ring-$colors" }],
-  [/^ring-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-ring-opacity": colors.h.bracket.percent.cssvar(opacity) }), { autocomplete: "ring-(op|opacity)-<percent>" }],
+  [/^ring-(.+)$/, utils.colorResolver("--un-ring-color", "ring"), { autocomplete: "ring-$colors" }],
+  [/^ring-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-ring-opacity": utils.h.bracket.percent.cssvar(opacity) }), { autocomplete: "ring-(op|opacity)-<percent>" }],
   // offset color
-  [/^ring-offset-(.+)$/, colors.colorResolver("--un-ring-offset-color", "ring-offset"), { autocomplete: "ring-offset-$colors" }],
-  [/^ring-offset-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-ring-offset-opacity": colors.h.bracket.percent.cssvar(opacity) }), { autocomplete: "ring-offset-(op|opacity)-<percent>" }],
+  [/^ring-offset-(.+)$/, utils.colorResolver("--un-ring-offset-color", "ring-offset"), { autocomplete: "ring-offset-$colors" }],
+  [/^ring-offset-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-ring-offset-opacity": utils.h.bracket.percent.cssvar(opacity) }), { autocomplete: "ring-offset-(op|opacity)-<percent>" }],
   // style
   ["ring-inset", { "--un-ring-inset": "inset" }]
 ];
@@ -169,16 +167,16 @@ const boxShadows = [
     const [, d] = match;
     const { theme } = context;
     const v = theme.boxShadow?.[d || "DEFAULT"];
-    const c = d ? colors.h.bracket.cssvar(d) : void 0;
-    if ((v != null || c != null) && !colors.hasParseableColor(c, theme)) {
+    const c = d ? utils.h.bracket.cssvar(d) : void 0;
+    if ((v != null || c != null) && !utils.hasParseableColor(c, theme)) {
       return {
-        "--un-shadow": colors.colorableShadows(v || c, "--un-shadow-color").join(","),
+        "--un-shadow": utils.colorableShadows(v || c, "--un-shadow-color").join(","),
         "box-shadow": "var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)"
       };
     }
-    return colors.colorResolver("--un-shadow-color", "shadow")(match, context);
+    return utils.colorResolver("--un-shadow-color", "shadow")(match, context);
   }, { autocomplete: ["shadow-$colors", "shadow-$boxShadow"] }],
-  [/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": colors.h.bracket.percent.cssvar(opacity) }), { autocomplete: "shadow-(op|opacity)-<percent>" }],
+  [/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": utils.h.bracket.percent.cssvar(opacity) }), { autocomplete: "shadow-(op|opacity)-<percent>" }],
   // inset
   ["shadow-inset", { "--un-shadow-inset": "inset" }]
 ];
@@ -231,10 +229,10 @@ const transformBase = {
 };
 const transforms = [
   // origins
-  [/^(?:transform-)?origin-(.+)$/, ([, s]) => ({ "transform-origin": colors.positionMap[s] ?? colors.h.bracket.cssvar(s) }), { autocomplete: [`transform-origin-(${Object.keys(colors.positionMap).join("|")})`, `origin-(${Object.keys(colors.positionMap).join("|")})`] }],
+  [/^(?:transform-)?origin-(.+)$/, ([, s]) => ({ "transform-origin": utils.positionMap[s] ?? utils.h.bracket.cssvar(s) }), { autocomplete: [`transform-origin-(${Object.keys(utils.positionMap).join("|")})`, `origin-(${Object.keys(utils.positionMap).join("|")})`] }],
   // perspectives
   [/^(?:transform-)?perspect(?:ive)?-(.+)$/, ([, s]) => {
-    const v = colors.h.bracket.cssvar.px.numberWithUnit(s);
+    const v = utils.h.bracket.cssvar.px.numberWithUnit(s);
     if (v != null) {
       return {
         "-webkit-perspective": v,
@@ -244,7 +242,7 @@ const transforms = [
   }],
   // skip 1 & 2 letters shortcut
   [/^(?:transform-)?perspect(?:ive)?-origin-(.+)$/, ([, s]) => {
-    const v = colors.h.bracket.cssvar(s) ?? (s.length >= 3 ? colors.positionMap[s] : void 0);
+    const v = utils.h.bracket.cssvar(s) ?? (s.length >= 3 ? utils.positionMap[s] : void 0);
     if (v != null) {
       return {
         "-webkit-perspective-origin": v,
@@ -269,28 +267,28 @@ const transforms = [
   ["transform-cpu", { transform: transformCpu }],
   ["transform-gpu", { transform: transformGpu }],
   ["transform-none", { transform: "none" }],
-  ...colors.makeGlobalStaticRules("transform")
+  ...utils.makeGlobalStaticRules("transform")
 ];
 function handleTranslate([, d, b], { theme }) {
-  const v = theme.spacing?.[b] ?? colors.h.bracket.cssvar.fraction.rem(b);
+  const v = theme.spacing?.[b] ?? utils.h.bracket.cssvar.fraction.rem(b);
   if (v != null) {
     return [
-      ...colors.xyzMap[d].map((i) => [`--un-translate${i}`, v]),
+      ...utils.xyzMap[d].map((i) => [`--un-translate${i}`, v]),
       ["transform", transformCpu]
     ];
   }
 }
 function handleScale([, d, b]) {
-  const v = colors.h.bracket.cssvar.fraction.percent(b);
+  const v = utils.h.bracket.cssvar.fraction.percent(b);
   if (v != null) {
     return [
-      ...colors.xyzMap[d].map((i) => [`--un-scale${i}`, v]),
+      ...utils.xyzMap[d].map((i) => [`--un-scale${i}`, v]),
       ["transform", transformCpu]
     ];
   }
 }
 function handleRotate([, d = "", b]) {
-  const v = colors.h.bracket.cssvar.degree(b);
+  const v = utils.h.bracket.cssvar.degree(b);
   if (v != null) {
     if (d) {
       return {
@@ -310,10 +308,10 @@ function handleRotate([, d = "", b]) {
   }
 }
 function handleSkew([, d, b]) {
-  const v = colors.h.bracket.cssvar.degree(b);
+  const v = utils.h.bracket.cssvar.degree(b);
   if (v != null) {
     return [
-      ...colors.xyzMap[d].map((i) => [`--un-skew${i}`, v]),
+      ...utils.xyzMap[d].map((i) => [`--un-skew${i}`, v]),
       ["transform", transformCpu]
     ];
   }

package/dist/theme.cjs

@@ -1,8 +1,9 @@
 'use strict';
 
 const colors = require('./colors.cjs');
-const transform = require('./shared/preset-mini.5bfee53b.cjs');
-require('./shared/preset-mini.b4ad509c.cjs');
+const transform = require('./shared/preset-mini.f22c1fe0.cjs');
+require('./shared/preset-mini.3a376028.cjs');
+require('@unocss/rule-utils');
 require('@unocss/core');
 
 const fontFamily = {

package/dist/theme.mjs

@@ -1,6 +1,7 @@
 import { colors } from './colors.mjs';
-import { t as transformBase, b as boxShadowsBase, r as ringBase } from './shared/preset-mini.0fac4963.mjs';
-import './shared/preset-mini.f1fe435e.mjs';
+import { t as transformBase, b as boxShadowsBase, r as ringBase } from './shared/preset-mini.4fe01d46.mjs';
+import './shared/preset-mini.8929b018.mjs';
+import '@unocss/rule-utils';
 import '@unocss/core';
 
 const fontFamily = {