@unocss/preset-mini 0.25.0 → 0.26.2

package/dist/chunks/default2.mjs

@@ -1,4 +1,4 @@
-import { h as handler, c as colorResolver, d as directionMap, p as parseColor, a as colorToString, b as cornerMap, e as colorableShadows, i as insetMap, f as directionSize, g as positionMap, x as xyzMap } from './utilities.mjs';
+import { h as handler, c as colorResolver, d as directionMap, a as hasParseableColor, p as parseColor, b as colorToString, e as cornerMap, f as colorableShadows, i as insetMap, g as directionSize, j as positionMap, x as xyzMap } from './utilities.mjs';
 import { toArray, CONTROL_SHORTCUT_NO_MERGE } from '@unocss/core';
 
 const verticalAlignAlias = {
@@ -17,9 +17,9 @@ const textAligns = [
 ];
 
 const outline = [
-  [/^outline-(?:width-|size-)?(.+)$/, ([, d]) => ({ "outline-width": handler.bracket.cssvar.px(d) })],
+  [/^outline-(?:width-|size-)?(.+)$/, ([, d], { theme }) => ({ "outline-width": theme.lineWidth?.[d] ?? handler.bracket.cssvar.px(d) })],
   [/^outline-(?:color-)?(.+)$/, colorResolver("outline-color", "outline-color")],
-  [/^outline-offset-(.+)$/, ([, d]) => ({ "outline-offset": handler.bracket.cssvar.px(d) })],
+  [/^outline-offset-(.+)$/, ([, d], { theme }) => ({ "outline-offset": theme.lineWidth?.[d] ?? handler.bracket.cssvar.px(d) })],
   ["outline", { "outline-style": "solid" }],
   [/^outline-(auto|dashed|dotted|double|hidden|solid|groove|ridge|inset|outset|inherit|initial|revert|unset)$/, ([, c]) => ({ "outline-style": c })],
   ["outline-none", { "outline": "2px solid transparent", "outline-offset": "2px" }]
@@ -73,10 +73,7 @@ const borders = [
   ["border-hidden", { "border-style": "hidden" }],
   ["border-none", { "border-style": "none" }]
 ];
-const borderHasColor = (color, { theme }) => {
-  return color !== void 0 && !!parseColor(color, theme)?.color;
-};
-const borderColorResolver = (direction) => ([, body], { theme }) => {
+const borderColorResolver = (direction) => ([, body], theme) => {
   const data = parseColor(body, theme);
   if (!data)
     return;
@@ -105,8 +102,8 @@ const borderColorResolver = (direction) => ([, body], { theme }) => {
     };
   }
 };
-function handlerBorder(m) {
-  const borderSizes = handlerBorderSize(m);
+function handlerBorder(m, ctx) {
+  const borderSizes = handlerBorderSize(m, ctx);
   if (borderSizes) {
     return [
       ...borderSizes,
@@ -114,14 +111,14 @@ function handlerBorder(m) {
     ];
   }
 }
-function handlerBorderSize([, a = "", b = "1"]) {
-  const v = handler.bracket.cssvar.px(b);
+function handlerBorderSize([, a = "", b], { theme }) {
+  const v = theme.lineWidth?.[b || "DEFAULT"] ?? handler.bracket.cssvar.px(b || "1");
   if (a in directionMap && v != null)
     return directionMap[a].map((i) => [`border${i}-width`, v]);
 }
-function handlerBorderColor([, a = "", c], ctx) {
-  if (a in directionMap && borderHasColor(c, ctx)) {
-    return Object.assign({}, ...directionMap[a].map((i) => borderColorResolver(i)(["", c], ctx)));
+function handlerBorderColor([, a = "", c], { theme }) {
+  if (a in directionMap && hasParseableColor(c, theme)) {
+    return Object.assign({}, ...directionMap[a].map((i) => borderColorResolver(i)(["", c], theme)));
   }
 }
 function handlerBorderOpacity([, a = "", opacity]) {
@@ -129,8 +126,8 @@ function handlerBorderOpacity([, a = "", opacity]) {
   if (a in directionMap && v != null)
     return directionMap[a].map((i) => [`--un-border${i}-opacity`, v]);
 }
-function handlerRounded([, a = "", s = "DEFAULT"], { theme }) {
-  const v = theme.borderRadius?.[s] || handler.bracket.cssvar.fraction.rem(s);
+function handlerRounded([, a = "", s], { theme }) {
+  const v = theme.borderRadius?.[s || "DEFAULT"] || handler.bracket.cssvar.fraction.rem(s || "1");
   if (a in cornerMap && v != null)
     return cornerMap[a].map((i) => [`border${i}-radius`, v]);
 }
@@ -159,18 +156,19 @@ const transitionProperty = (prop) => {
   return handler.properties(prop) ?? transitionPropertyGroup[prop];
 };
 const transitions = [
-  [/^transition(?:-([a-z-]+(?:,[a-z-]+)*))?(?:-(\d+))?$/, ([, prop, duration = "150"]) => {
+  [/^transition(?:-([a-z-]+(?:,[a-z-]+)*))?(?:-(\d+))?$/, ([, prop, d], { theme }) => {
     const p = prop != null ? transitionProperty(prop) : [transitionPropertyGroup.colors, "opacity", "box-shadow", "transform", "filter", "backdrop-filter"].join(",");
     if (p) {
+      const duration = theme.duration?.[d || "DEFAULT"] ?? handler.time(d || "150");
       return {
         "transition-property": p,
         "transition-timing-function": "cubic-bezier(0.4, 0, 0.2, 1)",
-        "transition-duration": `${duration}ms`
+        "transition-duration": duration
       };
     }
   }],
-  [/^(?:transition-)?duration-(.+)$/, ([, d]) => ({ "transition-duration": handler.bracket.cssvar.time(d) })],
-  [/^(?:transition-)?delay-(.+)$/, ([, d]) => ({ "transition-delay": handler.bracket.cssvar.time(d) })],
+  [/^(?:transition-)?duration-(.+)$/, ([, d], { theme }) => ({ "transition-duration": theme.duration?.[d || "DEFAULT"] ?? handler.bracket.cssvar.time(d) })],
+  [/^(?:transition-)?delay-(.+)$/, ([, d], { theme }) => ({ "transition-delay": theme.duration?.[d || "DEFAULT"] ?? handler.bracket.cssvar.time(d) })],
   [/^(?:transition-)?ease(?:-(.+))?$/, ([, d], { theme }) => ({ "transition-timing-function": theme.easing?.[d || "DEFAULT"] ?? handler.bracket.cssvar(d) })],
   [/^(?:transition-)?property-(.+)$/, ([, v]) => ({ "transition-property": handler.global(v) || transitionProperty(v) })],
   ["transition-none", { transition: "none" }]
@@ -189,7 +187,7 @@ const flex = [
   [/^(?:flex-)?shrink-0$/, () => ({ "flex-shrink": 0 })],
   [/^(?:flex-)?grow$/, () => ({ "flex-grow": 1 })],
   [/^(?:flex-)?grow-0$/, () => ({ "flex-grow": 0 })],
-  [/^(?:flex-)?basis-(.+)$/, ([, d]) => ({ "flex-basis": handler.bracket.cssvar.auto.fraction.rem(d) })],
+  [/^(?:flex-)?basis-(.+)$/, ([, d], { theme }) => ({ "flex-basis": theme.spacing?.[d] ?? handler.bracket.cssvar.auto.fraction.rem(d) })],
   ["flex-row", { "flex-direction": "row" }],
   ["flex-row-reverse", { "flex-direction": "row-reverse" }],
   ["flex-col", { "flex-direction": "column" }],
@@ -221,9 +219,14 @@ const fonts = [
         "line-height": height
       };
     }
-    return { "font-size": handler.bracket.rem(s) };
+    return { "font-size": handler.bracketOfLength.rem(s) };
+  }],
+  [/^text-size-(.+)$/, ([, s], { theme }) => {
+    const themed = toArray(theme.fontSize?.[s]);
+    const size = themed?.[0] ?? handler.bracket.cssvar.rem(s);
+    if (size != null)
+      return { "font-size": size };
   }],
-  [/^text-size-(.+)$/, ([, s]) => ({ "font-size": handler.bracket.cssvar.rem(s) })],
   [/^(?:font|fw)-?([^-]+)$/, ([, s]) => ({ "font-weight": weightMap[s] || handler.number(s) })],
   [/^(?:leading|lh)-(.+)$/, ([, s], { theme }) => ({ "line-height": theme.lineHeight?.[s] || handler.bracket.cssvar.rem(s) })],
   [/^tracking-(.+)$/, ([, s], { theme }) => ({ "letter-spacing": theme.letterSpacing?.[s] || handler.bracket.cssvar.rem(s) })],
@@ -269,8 +272,8 @@ const directions = {
   "x": "column-",
   "y": "row-"
 };
-const handleGap = ([, d = "", s]) => {
-  const v = handler.bracket.cssvar.rem(s);
+const handleGap = ([, d = "", s], { theme }) => {
+  const v = theme.spacing?.[s] ?? handler.bracket.cssvar.rem(s);
   if (v != null) {
     return {
       [`grid-${directions[d]}gap`]: v,
@@ -279,16 +282,17 @@ const handleGap = ([, d = "", s]) => {
   }
 };
 const gaps = [
-  [/^(?:flex-|grid-)?gap-()([^-]+)$/, handleGap],
-  [/^(?:flex-|grid-)?gap-([xy])-([^-]+)$/, handleGap]
+  [/^(?:flex-|grid-)?gap-()(.+)$/, handleGap],
+  [/^(?:flex-|grid-)?gap-([xy])-(.+)$/, handleGap]
 ];
 
 const rowCol = (s) => s.replace("col", "column");
-const autoDirection = (selector, theme) => {
-  const v = theme.fontSize?.[selector];
+const rowColTheme = (s) => s[0] === "r" ? "Row" : "Column";
+const autoDirection = (c, theme, prop) => {
+  const v = theme[`gridAuto${rowColTheme(c)}`]?.[prop];
   if (v != null)
-    return toArray(v)[0];
-  switch (selector) {
+    return v;
+  switch (prop) {
     case "min":
       return "min-content";
     case "max":
@@ -296,12 +300,14 @@ const autoDirection = (selector, theme) => {
     case "fr":
       return "minmax(0,1fr)";
   }
-  return handler.bracket.cssvar.auto.rem(selector);
+  return handler.bracket.cssvar.auto.rem(prop);
 };
 const grids = [
   ["grid", { display: "grid" }],
   ["inline-grid", { display: "inline-grid" }],
-  [/^(?:grid-)?(row|col)-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}`]: handler.bracket.cssvar.auto(v) })],
+  [/^(?:grid-)?(row|col)-(.+)$/, ([, c, v], { theme }) => ({
+    [`grid-${rowCol(c)}`]: theme[`grid${rowColTheme(c)}`]?.[v] ?? handler.bracket.cssvar.auto(v)
+  })],
   [/^(?:grid-)?(row|col)-span-(.+)$/, ([, c, s]) => {
     if (s === "full")
       return { [`grid-${rowCol(c)}`]: "1/-1" };
@@ -311,10 +317,12 @@ const grids = [
   }],
   [/^(?:grid-)?(row|col)-start-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-start`]: handler.bracket.cssvar(v) ?? v })],
   [/^(?:grid-)?(row|col)-end-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-end`]: handler.bracket.cssvar(v) ?? v })],
-  [/^(?:grid-)?auto-(rows|cols)-(.+)$/, ([, c, v], { theme }) => ({ [`grid-auto-${rowCol(c)}`]: autoDirection(v, theme) })],
+  [/^(?:grid-)?auto-(rows|cols)-(.+)$/, ([, c, v], { theme }) => ({ [`grid-auto-${rowCol(c)}`]: autoDirection(c, theme, v) })],
   [/^(?:grid-auto-flow|auto-flow|grid-flow)-(.+)$/, ([, v]) => ({ "grid-auto-flow": handler.bracket.cssvar(v) })],
   [/^(?:grid-auto-flow|auto-flow|grid-flow)-((?:row|col)(?:-dense)?)$/, ([, v]) => ({ "grid-auto-flow": rowCol(v).replace("-", " ") })],
-  [/^grid-(rows|cols)-(.+)$/, ([, c, v]) => ({ [`grid-template-${rowCol(c)}`]: handler.bracket.cssvar(v) })],
+  [/^grid-(rows|cols)-(.+)$/, ([, c, v], { theme }) => ({
+    [`grid-template-${rowCol(c)}`]: theme[`gridTemplate${rowColTheme(c)}`]?.[v] ?? handler.bracket.cssvar(v)
+  })],
   [/^grid-(rows|cols)-minmax-([\w.-]+)$/, ([, c, d]) => ({ [`grid-template-${rowCol(c)}`]: `repeat(auto-fill,minmax(${d},1fr))` })],
   [/^grid-(rows|cols)-(\d+)$/, ([, c, d]) => ({ [`grid-template-${rowCol(c)}`]: `repeat(${d},minmax(0,1fr))` })],
   ["grid-rows-none", { "grid-template-rows": "none" }],
@@ -397,21 +405,21 @@ const placements = [
   ["place-self-center", { "place-self": "center" }],
   ["place-self-stretch", { "place-self": "stretch" }]
 ];
-function handleInsetValue(v) {
-  return handler.bracket.cssvar.auto.fraction.rem(v);
+function handleInsetValue(v, { theme }) {
+  return theme.spacing?.[v] ?? handler.bracket.cssvar.auto.fraction.rem(v);
 }
-function handleInsetValues([, d, v]) {
-  const r = handleInsetValue(v);
+function handleInsetValues([, d, v], ctx) {
+  const r = handleInsetValue(v, ctx);
   if (r != null && d in insetMap)
     return insetMap[d].map((i) => [i.slice(1), r]);
 }
 const insets = [
-  [/^(?:position-|pos-)?inset-(.+)$/, ([, v]) => ({ inset: handleInsetValue(v) })],
+  [/^(?:position-|pos-)?inset-(.+)$/, ([, v], ctx) => ({ inset: handleInsetValue(v, ctx) })],
   [/^(?:position-|pos-)?inset-([xy])-(.+)$/, handleInsetValues],
   [/^(?:position-|pos-)?inset-([rltbse])-(.+)$/, handleInsetValues],
   [/^(?:position-|pos-)?inset-(block|inline)-(.+)$/, handleInsetValues],
   [/^(?:position-|pos-)?inset-([bi][se])-(.+)$/, handleInsetValues],
-  [/^(?:position-|pos-)?(top|left|right|bottom)-(.+)$/, ([, d, v]) => ({ [d]: handleInsetValue(v) })]
+  [/^(?:position-|pos-)?(top|left|right|bottom)-(.+)$/, ([, d, v], ctx) => ({ [d]: handleInsetValue(v, ctx) })]
 ];
 const floats = [
   ["float-left", { float: "left" }],
@@ -507,45 +515,19 @@ const fontSmoothings = [
   }]
 ];
 
-const shadowBase = {
-  [CONTROL_SHORTCUT_NO_MERGE]: "",
-  "--un-ring-offset-shadow": "0 0 #0000",
-  "--un-ring-shadow": "0 0 #0000",
-  "--un-shadow-inset": varEmpty,
-  "--un-shadow": "0 0 #0000"
-};
-const boxShadows = [
-  [/^shadow(?:-(.+))?$/, ([, d], { theme }) => {
-    const v = theme.boxShadow?.[d || "DEFAULT"];
-    if (v) {
-      return [
-        shadowBase,
-        {
-          "--un-shadow": colorableShadows(v, "--un-shadow-color").join(","),
-          "box-shadow": "var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow)"
-        }
-      ];
-    }
-  }],
-  [/^shadow-(.+)$/, colorResolver("--un-shadow-color", "shadow")],
-  [/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": handler.bracket.percent(opacity) })],
-  ["shadow-inset", { "--un-shadow-inset": "inset" }]
-];
-
-const ringBase = {
-  ...shadowBase,
-  "--un-ring-inset": varEmpty,
-  "--un-ring-offset-width": "0px",
-  "--un-ring-offset-color": "#fff",
-  "--un-ring-width": "0px",
-  "--un-ring-color": "rgba(147,197,253,0.5)"
-};
 const rings = [
-  [/^ring(?:-(.+))?$/, ([, d]) => {
-    const value = handler.px(d || "1");
+  [/^ring(?:-(.+))?$/, ([, d], { theme }) => {
+    const value = theme.ringWidth?.[d || "DEFAULT"] ?? handler.px(d || "1");
     if (value) {
       return [
-        ringBase,
+        {
+          [CONTROL_SHORTCUT_NO_MERGE]: "",
+          "--un-ring-inset": varEmpty,
+          "--un-ring-offset-width": "0px",
+          "--un-ring-offset-color": "#fff",
+          "--un-ring-width": "0px",
+          "--un-ring-color": "rgba(147,197,253,0.5)"
+        },
         {
           "--un-ring-width": value,
           "--un-ring-offset-shadow": "var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color)",
@@ -555,9 +537,9 @@ const rings = [
       ];
     }
   }],
-  [/^ring-(?:width-|size-)(.+)$/, ([, d]) => ({ "--un-ring-width": handler.bracket.cssvar.px(d) })],
+  [/^ring-(?:width-|size-)(.+)$/, ([, d], { theme }) => ({ "--un-ring-width": theme.lineWidth?.[d] ?? handler.bracket.cssvar.px(d) })],
   ["ring-offset", { "--un-ring-offset-width": "1px" }],
-  [/^ring-offset-(?:width-|size-)?(.+)$/, ([, d]) => ({ "--un-ring-offset-width": handler.bracket.cssvar.px(d) })],
+  [/^ring-offset-(?:width-|size-)?(.+)$/, ([, d], { theme }) => ({ "--un-ring-offset-width": theme.lineWidth?.[d] ?? handler.bracket.cssvar.px(d) })],
   [/^ring-(.+)$/, colorResolver("--un-ring-color", "ring")],
   [/^ring-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-ring-opacity": handler.bracket.percent(opacity) })],
   [/^ring-offset-(.+)$/, colorResolver("--un-ring-offset-color", "ring-offset")],
@@ -565,6 +547,28 @@ const rings = [
   ["ring-inset", { "--un-ring-inset": "inset" }]
 ];
 
+const boxShadows = [
+  [/^shadow(?:-(.+))?$/, ([, d], { theme }) => {
+    const v = theme.boxShadow?.[d || "DEFAULT"];
+    if (v) {
+      return [
+        {
+          [CONTROL_SHORTCUT_NO_MERGE]: "",
+          "--un-shadow-inset": varEmpty,
+          "--un-shadow": "0 0 #0000"
+        },
+        {
+          "--un-shadow": colorableShadows(v, "--un-shadow-color").join(","),
+          "box-shadow": "var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow)"
+        }
+      ];
+    }
+  }],
+  [/^shadow-(.+)$/, colorResolver("--un-shadow-color", "shadow")],
+  [/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": handler.bracket.percent(opacity) })],
+  ["shadow-inset", { "--un-shadow-inset": "inset" }]
+];
+
 const sizeMapping = {
   h: "height",
   w: "width",
@@ -706,8 +710,8 @@ const transforms = [
   ["transform-cpu", transformCpu],
   ["transform-none", { transform: "none" }]
 ];
-function handleTranslate([, d, b]) {
-  const v = handler.bracket.cssvar.fraction.rem(b);
+function handleTranslate([, d, b], { theme }) {
+  const v = theme.spacing?.[b] ?? handler.bracket.cssvar.fraction.rem(b);
   if (v != null) {
     return [
       transformBase,
@@ -809,7 +813,7 @@ ${constructCSS({ animation: "__un_qm 0.5s ease-in-out alternate infinite" })}`;
 
 const textDecorations = [
   [/^(?:decoration-)?(underline|overline|line-through)$/, ([, s]) => ({ "text-decoration-line": s })],
-  [/^(?:underline|decoration)-(?:size-)?(.+)$/, ([, s]) => ({ "text-decoration-thickness": handler.bracket.cssvar.px(s) })],
+  [/^(?:underline|decoration)-(?:size-)?(.+)$/, ([, s], { theme }) => ({ "text-decoration-thickness": theme.lineWidth?.[s] ?? handler.bracket.cssvar.px(s) })],
   [/^(?:underline|decoration)-(auto|from-font)$/, ([, s]) => ({ "text-decoration-thickness": s })],
   [/^(?:underline|decoration)-(.+)$/, (match, ctx) => {
     const result = colorResolver("text-decoration-color", "line")(match, ctx);
@@ -821,7 +825,7 @@ const textDecorations = [
     }
   }],
   [/^(?:underline|decoration)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-line-opacity": handler.bracket.percent(opacity) })],
-  [/^(?:underline|decoration)-offset-(.+)$/, ([, s]) => ({ "text-underline-offset": handler.auto.bracket.cssvar.px(s) })],
+  [/^(?:underline|decoration)-offset-(.+)$/, ([, s], { theme }) => ({ "text-underline-offset": theme.lineWidth?.[s] ?? handler.auto.bracket.cssvar.px(s) })],
   [/^(?:underline|decoration)-(solid|double|dotted|dashed|wavy|inherit|initial|revert|unset)$/, ([, d]) => ({ "text-decoration-style": d })],
   ["no-underline", { "text-decoration": "none" }],
   ["decoration-none", { "text-decoration": "none" }]
@@ -831,9 +835,9 @@ const svgUtilities = [
   [/^fill-(.+)$/, colorResolver("fill", "fill")],
   [/^fill-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-fill-opacity": handler.bracket.percent(opacity) })],
   ["fill-none", { fill: "none" }],
-  [/^stroke-(?:width-|size-)?(.+)$/, ([, s]) => ({ "stroke-width": handler.bracket.cssvar.fraction.px.number(s) })],
+  [/^stroke-(?:width-|size-)?(.+)$/, ([, s], { theme }) => ({ "stroke-width": theme.lineWidth?.[s] ?? handler.bracket.cssvar.fraction.px.number(s) })],
   [/^stroke-dash-(.+)$/, ([, s]) => ({ "stroke-dasharray": handler.bracket.cssvar.number(s) })],
-  [/^stroke-offset-(.+)$/, ([, s]) => ({ "stroke-dashoffset": handler.bracket.cssvar.px.numberWithUnit(s) })],
+  [/^stroke-offset-(.+)$/, ([, s], { theme }) => ({ "stroke-dashoffset": theme.lineWidth?.[s] ?? handler.bracket.cssvar.px.numberWithUnit(s) })],
   [/^stroke-(.+)$/, colorResolver("stroke", "stroke")],
   [/^stroke-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-stroke-opacity": handler.bracket.percent(opacity) })],
   ["stroke-cap-square", { "stroke-linecap": "square" }],
@@ -904,4 +908,4 @@ const rules = [
   questionMark
 ].flat(1);
 
-export { cssVariables as $, boxShadows as A, sizes as B, aspectRatio as C, paddings as D, margins as E, varEmpty as F, displays as G, appearances as H, cursors as I, pointerEvents as J, resizes as K, userSelects as L, whitespaces as M, contents as N, breaks as O, textOverflows as P, textTransforms as Q, fontStyles as R, fontSmoothings as S, svgUtilities as T, transforms as U, transitions as V, fonts as W, tabSizes as X, textIndents as Y, textStrokes as Z, textShadows as _, appearance as a, cssProperty as a0, textDecorations as a1, borders as b, opacity as c, textColors as d, bgColors as e, flex as f, gaps as g, grids as h, overflows as i, justifies as j, orders as k, alignments as l, placements as m, insets as n, outline as o, positions as p, floats as q, rules as r, boxSizing as s, textAligns as t, questionMark as u, verticalAligns as v, willChange as w, rings as x, shadowBase as y, zIndexes as z };
+export { cssProperty as $, sizes as A, aspectRatio as B, paddings as C, margins as D, varEmpty as E, displays as F, appearances as G, cursors as H, pointerEvents as I, resizes as J, userSelects as K, whitespaces as L, contents as M, breaks as N, textOverflows as O, textTransforms as P, fontStyles as Q, fontSmoothings as R, svgUtilities as S, transforms as T, transitions as U, fonts as V, tabSizes as W, textIndents as X, textStrokes as Y, textShadows as Z, cssVariables as _, appearance as a, textDecorations as a0, borders as b, opacity as c, textColors as d, bgColors as e, flex as f, gaps as g, grids as h, overflows as i, justifies as j, orders as k, alignments as l, placements as m, insets as n, outline as o, positions as p, floats as q, rules as r, boxSizing as s, textAligns as t, questionMark as u, verticalAligns as v, willChange as w, rings as x, boxShadows as y, zIndexes as z };

package/dist/chunks/utilities.cjs

@@ -7,7 +7,7 @@ function hex2rgba(hex = "") {
   const color = parseHexColor(hex);
   if (color != null) {
     const { components, alpha } = color;
-    if (alpha === void 0)
+    if (alpha == null)
       return components;
     return [...components, alpha];
   }
@@ -20,7 +20,7 @@ function parseCssColor(str = "") {
   const type = casedType.toLowerCase();
   if (components.length === 0)
     return;
-  if (["rgba", "hsla"].includes(type) && alpha === void 0)
+  if (["rgba", "hsla"].includes(type) && alpha == null)
     return;
   if (cssColorFunctions.includes(type) && components.length !== 3)
     return;
@@ -420,13 +420,30 @@ function fraction(str) {
   if (!Number.isNaN(num))
     return `${round(num * 100)}%`;
 }
-function bracket(str) {
-  if (str && str[0] === "[" && str[str.length - 1] === "]") {
-    return str.slice(1, -1).replace(/(url\(.*?\))/g, (v) => v.replace(/_/g, "\\_")).replace(/([^\\])_/g, "$1 ").replace(/calc\((.*)/g, (v) => {
-      return v.replace(/(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, "$1 $2 ");
-    });
+function bracketWithType(str, type) {
+  if (str && str.startsWith("[") && str.endsWith("]")) {
+    let base;
+    const match = str.match(/^\[(color|length):/i);
+    if (!match)
+      base = str.slice(1, -1);
+    else if (type && match[1] === type)
+      base = str.slice(match[0].length, -1);
+    if (base !== void 0) {
+      return base.replace(/(url\(.*?\))/g, (v) => v.replace(/_/g, "\\_")).replace(/([^\\])_/g, "$1 ").replace(/calc\((.*)/g, (v) => {
+        return v.replace(/(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, "$1 $2 ");
+      });
+    }
   }
 }
+function bracket(str) {
+  return bracketWithType(str);
+}
+function bracketOfColor(str) {
+  return bracketWithType(str, "color");
+}
+function bracketOfLength(str) {
+  return bracketWithType(str, "length");
+}
 function cssvar(str) {
   if (str.match(/^\$\S/))
     return `var(--${core.escapeSelector(str.slice(1))})`;
@@ -471,6 +488,8 @@ const valueHandlers = {
   percent: percent,
   fraction: fraction,
   bracket: bracket,
+  bracketOfColor: bracketOfColor,
+  bracketOfLength: bracketOfLength,
   cssvar: cssvar,
   time: time,
   degree: degree,
@@ -481,20 +500,27 @@ const valueHandlers = {
 const handler = core.createValueHandler(valueHandlers);
 const h = handler;
 
-const directionSize = (propertyPrefix) => ([_, direction, size]) => {
-  const v = handler.bracket.cssvar.auto.fraction.rem(size);
-  if (v !== void 0)
+const directionSize = (propertyPrefix) => ([_, direction, size], { theme }) => {
+  const v = theme.spacing?.[size || "DEFAULT"] ?? handler.bracket.cssvar.auto.fraction.rem(size);
+  if (v != null)
     return directionMap[direction].map((i) => [`${propertyPrefix}${i}`, v]);
 };
 const getThemeColor = (theme, colors) => theme.colors?.[colors.join("-").replace(/(-[a-z])/g, (n) => n.slice(1).toUpperCase())];
 const parseColor = (body, theme) => {
-  const [main, opacity] = body.split(/(?:\/|:)/);
+  const split = body.split(/(?:\/|:)/);
+  let main, opacity;
+  if (split[0] === "[color") {
+    main = split.slice(0, 2).join(":");
+    opacity = split[2];
+  } else {
+    [main, opacity] = split;
+  }
   const colors = main.replace(/([a-z])([0-9])/g, "$1-$2").split(/-/g);
   const [name] = colors;
   if (!name)
     return;
   let color;
-  const bracket = handler.bracket(main);
+  const bracket = handler.bracketOfColor(main);
   const bracketOrMain = bracket || main;
   if (bracketOrMain.startsWith("#"))
     color = bracketOrMain;
@@ -567,6 +593,9 @@ const colorableShadows = (shadows, colorVar) => {
   }
   return colored;
 };
+const hasParseableColor = (color, theme) => {
+  return color != null && !!parseColor(color, theme)?.color;
+};
 
 exports.colorResolver = colorResolver;
 exports.colorToString = colorToString;
@@ -577,6 +606,7 @@ exports.directionSize = directionSize;
 exports.getComponents = getComponents;
 exports.h = h;
 exports.handler = handler;
+exports.hasParseableColor = hasParseableColor;
 exports.hex2rgba = hex2rgba;
 exports.insetMap = insetMap;
 exports.parseColor = parseColor;

package/dist/chunks/utilities.mjs

@@ -5,7 +5,7 @@ function hex2rgba(hex = "") {
   const color = parseHexColor(hex);
   if (color != null) {
     const { components, alpha } = color;
-    if (alpha === void 0)
+    if (alpha == null)
       return components;
     return [...components, alpha];
   }
@@ -18,7 +18,7 @@ function parseCssColor(str = "") {
   const type = casedType.toLowerCase();
   if (components.length === 0)
     return;
-  if (["rgba", "hsla"].includes(type) && alpha === void 0)
+  if (["rgba", "hsla"].includes(type) && alpha == null)
     return;
   if (cssColorFunctions.includes(type) && components.length !== 3)
     return;
@@ -418,13 +418,30 @@ function fraction(str) {
   if (!Number.isNaN(num))
     return `${round(num * 100)}%`;
 }
-function bracket(str) {
-  if (str && str[0] === "[" && str[str.length - 1] === "]") {
-    return str.slice(1, -1).replace(/(url\(.*?\))/g, (v) => v.replace(/_/g, "\\_")).replace(/([^\\])_/g, "$1 ").replace(/calc\((.*)/g, (v) => {
-      return v.replace(/(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, "$1 $2 ");
-    });
+function bracketWithType(str, type) {
+  if (str && str.startsWith("[") && str.endsWith("]")) {
+    let base;
+    const match = str.match(/^\[(color|length):/i);
+    if (!match)
+      base = str.slice(1, -1);
+    else if (type && match[1] === type)
+      base = str.slice(match[0].length, -1);
+    if (base !== void 0) {
+      return base.replace(/(url\(.*?\))/g, (v) => v.replace(/_/g, "\\_")).replace(/([^\\])_/g, "$1 ").replace(/calc\((.*)/g, (v) => {
+        return v.replace(/(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, "$1 $2 ");
+      });
+    }
   }
 }
+function bracket(str) {
+  return bracketWithType(str);
+}
+function bracketOfColor(str) {
+  return bracketWithType(str, "color");
+}
+function bracketOfLength(str) {
+  return bracketWithType(str, "length");
+}
 function cssvar(str) {
   if (str.match(/^\$\S/))
     return `var(--${escapeSelector(str.slice(1))})`;
@@ -469,6 +486,8 @@ const valueHandlers = {
   percent: percent,
   fraction: fraction,
   bracket: bracket,
+  bracketOfColor: bracketOfColor,
+  bracketOfLength: bracketOfLength,
   cssvar: cssvar,
   time: time,
   degree: degree,
@@ -479,20 +498,27 @@ const valueHandlers = {
 const handler = createValueHandler(valueHandlers);
 const h = handler;
 
-const directionSize = (propertyPrefix) => ([_, direction, size]) => {
-  const v = handler.bracket.cssvar.auto.fraction.rem(size);
-  if (v !== void 0)
+const directionSize = (propertyPrefix) => ([_, direction, size], { theme }) => {
+  const v = theme.spacing?.[size || "DEFAULT"] ?? handler.bracket.cssvar.auto.fraction.rem(size);
+  if (v != null)
     return directionMap[direction].map((i) => [`${propertyPrefix}${i}`, v]);
 };
 const getThemeColor = (theme, colors) => theme.colors?.[colors.join("-").replace(/(-[a-z])/g, (n) => n.slice(1).toUpperCase())];
 const parseColor = (body, theme) => {
-  const [main, opacity] = body.split(/(?:\/|:)/);
+  const split = body.split(/(?:\/|:)/);
+  let main, opacity;
+  if (split[0] === "[color") {
+    main = split.slice(0, 2).join(":");
+    opacity = split[2];
+  } else {
+    [main, opacity] = split;
+  }
   const colors = main.replace(/([a-z])([0-9])/g, "$1-$2").split(/-/g);
   const [name] = colors;
   if (!name)
     return;
   let color;
-  const bracket = handler.bracket(main);
+  const bracket = handler.bracketOfColor(main);
   const bracketOrMain = bracket || main;
   if (bracketOrMain.startsWith("#"))
     color = bracketOrMain;
@@ -565,5 +591,8 @@ const colorableShadows = (shadows, colorVar) => {
   }
   return colored;
 };
+const hasParseableColor = (color, theme) => {
+  return color != null && !!parseColor(color, theme)?.color;
+};
 
-export { colorToString as a, cornerMap as b, colorResolver as c, directionMap as d, colorableShadows as e, directionSize as f, positionMap as g, handler as h, insetMap as i, hex2rgba as j, parseCssColor as k, getComponents as l, h as m, parseColor as p, valueHandlers as v, xyzMap as x };
+export { hasParseableColor as a, colorToString as b, colorResolver as c, directionMap as d, cornerMap as e, colorableShadows as f, directionSize as g, handler as h, insetMap as i, positionMap as j, hex2rgba as k, parseCssColor as l, getComponents as m, h as n, parseColor as p, valueHandlers as v, xyzMap as x };

package/dist/{colors-0db1b382.d.ts → colors-ce2fecb8.d.ts}

@@ -1,4 +1,4 @@
-import { T as Theme } from './types-ef1d7462';
+import { T as Theme } from './types-f7b2c653';
 
 declare const colors: Theme['colors'];
 

package/dist/colors.d.ts

@@ -1,2 +1,2 @@
-export { c as colors } from './colors-0db1b382';
-import './types-ef1d7462';
+export { c as colors } from './colors-ce2fecb8';
+import './types-f7b2c653';

package/dist/{default-3eaf5bb0.d.ts → default-e6d1b2e8.d.ts}

@@ -1,4 +1,4 @@
-import { T as Theme } from './types-ef1d7462';
+import { T as Theme } from './types-f7b2c653';
 
 declare const theme: Theme;
 

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import { PresetOptions, Preset } from '@unocss/core';
-import { T as Theme } from './types-ef1d7462';
-export { T as Theme, a as ThemeAnimation } from './types-ef1d7462';
-export { t as theme } from './default-3eaf5bb0';
-export { c as colors } from './colors-0db1b382';
-export { p as parseColor } from './utilities-43c87ad4';
+import { T as Theme } from './types-f7b2c653';
+export { T as Theme, a as ThemeAnimation } from './types-f7b2c653';
+export { t as theme } from './default-e6d1b2e8';
+export { c as colors } from './colors-ce2fecb8';
+export { p as parseColor } from './utilities-820bcff8';
 
 interface PresetMiniOptions extends PresetOptions {
     /**

package/dist/rules.cjs

@@ -44,7 +44,6 @@ exports.questionMark = _default.questionMark;
 exports.resizes = _default.resizes;
 exports.rings = _default.rings;
 exports.rules = _default.rules;
-exports.shadowBase = _default.shadowBase;
 exports.sizes = _default.sizes;
 exports.svgUtilities = _default.svgUtilities;
 exports.tabSizes = _default.tabSizes;