@unocss/preset-mini 0.25.0 → 0.26.2

package/dist/chunks/default.cjs

@@ -72,11 +72,11 @@ const textStrokeWidth = {
 };
 const textShadow = {
   DEFAULT: ["0 0 1px rgba(0,0,0,0.2)", "0 0 1px rgba(1,0,5,0.1)"],
+  none: "0 0 #0000",
   sm: "1px 1px 3px rgba(36,37,47,0.25)",
   md: ["0 1px 2px rgba(30,29,39,0.19)", "1px 2px 4px rgba(54,64,147,0.18)"],
   lg: ["3px 3px 6px rgba(0,0,0,0.26)", "0 0 5px rgba(15,3,86,0.22)"],
-  xl: ["1px 1px 3px rgba(0,0,0,0.29)", "2px 4px 7px rgba(73,64,125,0.35)"],
-  none: "0 0 #0000"
+  xl: ["1px 1px 3px rgba(0,0,0,0.29)", "2px 4px 7px rgba(73,64,125,0.35)"]
 };
 const lineHeight = {
   none: "1",
@@ -104,9 +104,33 @@ const breakpoints = {
   "2xl": "1536px"
 };
 const verticalBreakpoints = { ...breakpoints };
+const lineWidth = {
+  DEFAULT: "1px",
+  none: "0px"
+};
+const spacing = {
+  "DEFAULT": "1rem",
+  "none": "0rem",
+  "xs": "0.75rem",
+  "sm": "0.875rem",
+  "lg": "1.125rem",
+  "xl": "1.25rem",
+  "2xl": "1.5rem",
+  "3xl": "1.875rem",
+  "4xl": "2.25rem",
+  "5xl": "3rem",
+  "6xl": "3.75rem",
+  "7xl": "4.5rem",
+  "8xl": "6rem",
+  "9xl": "8rem"
+};
+const duration = {
+  DEFAULT: "150ms",
+  none: "0ms"
+};
 const borderRadius = {
   "DEFAULT": "0.25rem",
-  "none": "0px",
+  "none": "0rem",
   "sm": "0.125rem",
   "md": "0.375rem",
   "lg": "0.5rem",
@@ -117,13 +141,13 @@ const borderRadius = {
 };
 const boxShadow = {
   "DEFAULT": ["var(--un-shadow-inset) 0 1px 3px 0 rgba(0,0,0,0.1)", "var(--un-shadow-inset) 0 1px 2px -1px rgba(0,0,0,0.1)"],
+  "none": "0 0 #0000",
   "sm": "var(--un-shadow-inset) 0 1px 2px 0 rgba(0,0,0,0.05)",
   "md": ["var(--un-shadow-inset) 0 4px 6px -1px rgba(0,0,0,0.1)", "var(--un-shadow-inset) 0 2px 4px -2px rgba(0,0,0,0.1)"],
   "lg": ["var(--un-shadow-inset) 0 10px 15px -3px rgba(0,0,0,0.1)", "var(--un-shadow-inset) 0 4px 6px -4px rgba(0,0,0,0.1)"],
   "xl": ["var(--un-shadow-inset) 0 20px 25px -5px rgba(0,0,0,0.1)", "var(--un-shadow-inset) 0 8px 10px -6px rgba(0,0,0,0.1)"],
   "2xl": "var(--un-shadow-inset) 0 25px 50px -12px rgba(0,0,0,0.25)",
-  "inner": "inset 0 2px 4px 0 rgba(0,0,0,0.05)",
-  "none": "0 0 #0000"
+  "inner": "inset 0 2px 4px 0 rgba(0,0,0,0.05)"
 };
 const easing = {
   "DEFAULT": "cubic-bezier(0.4, 0, 0.2, 1)",
@@ -132,6 +156,10 @@ const easing = {
   "out": "cubic-bezier(0, 0, 0.2, 1)",
   "in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
 };
+const ringWidth = {
+  DEFAULT: "1px",
+  none: "0px"
+};
 
 const blur = {
   "DEFAULT": "8px",
@@ -216,7 +244,11 @@ const theme = {
   textStrokeWidth,
   blur,
   dropShadow,
-  easing
+  easing,
+  lineWidth,
+  spacing,
+  duration,
+  ringWidth
 };
 
 exports.baseSize = baseSize;
@@ -225,14 +257,18 @@ exports.borderRadius = borderRadius;
 exports.boxShadow = boxShadow;
 exports.breakpoints = breakpoints;
 exports.dropShadow = dropShadow;
+exports.duration = duration;
 exports.easing = easing;
 exports.fontFamily = fontFamily;
 exports.fontSize = fontSize;
 exports.height = height;
 exports.letterSpacing = letterSpacing;
 exports.lineHeight = lineHeight;
+exports.lineWidth = lineWidth;
 exports.maxHeight = maxHeight;
 exports.maxWidth = maxWidth;
+exports.ringWidth = ringWidth;
+exports.spacing = spacing;
 exports.textIndent = textIndent;
 exports.textShadow = textShadow;
 exports.textStrokeWidth = textStrokeWidth;

package/dist/chunks/default.mjs

@@ -70,11 +70,11 @@ const textStrokeWidth = {
 };
 const textShadow = {
   DEFAULT: ["0 0 1px rgba(0,0,0,0.2)", "0 0 1px rgba(1,0,5,0.1)"],
+  none: "0 0 #0000",
   sm: "1px 1px 3px rgba(36,37,47,0.25)",
   md: ["0 1px 2px rgba(30,29,39,0.19)", "1px 2px 4px rgba(54,64,147,0.18)"],
   lg: ["3px 3px 6px rgba(0,0,0,0.26)", "0 0 5px rgba(15,3,86,0.22)"],
-  xl: ["1px 1px 3px rgba(0,0,0,0.29)", "2px 4px 7px rgba(73,64,125,0.35)"],
-  none: "0 0 #0000"
+  xl: ["1px 1px 3px rgba(0,0,0,0.29)", "2px 4px 7px rgba(73,64,125,0.35)"]
 };
 const lineHeight = {
   none: "1",
@@ -102,9 +102,33 @@ const breakpoints = {
   "2xl": "1536px"
 };
 const verticalBreakpoints = { ...breakpoints };
+const lineWidth = {
+  DEFAULT: "1px",
+  none: "0px"
+};
+const spacing = {
+  "DEFAULT": "1rem",
+  "none": "0rem",
+  "xs": "0.75rem",
+  "sm": "0.875rem",
+  "lg": "1.125rem",
+  "xl": "1.25rem",
+  "2xl": "1.5rem",
+  "3xl": "1.875rem",
+  "4xl": "2.25rem",
+  "5xl": "3rem",
+  "6xl": "3.75rem",
+  "7xl": "4.5rem",
+  "8xl": "6rem",
+  "9xl": "8rem"
+};
+const duration = {
+  DEFAULT: "150ms",
+  none: "0ms"
+};
 const borderRadius = {
   "DEFAULT": "0.25rem",
-  "none": "0px",
+  "none": "0rem",
   "sm": "0.125rem",
   "md": "0.375rem",
   "lg": "0.5rem",
@@ -115,13 +139,13 @@ const borderRadius = {
 };
 const boxShadow = {
   "DEFAULT": ["var(--un-shadow-inset) 0 1px 3px 0 rgba(0,0,0,0.1)", "var(--un-shadow-inset) 0 1px 2px -1px rgba(0,0,0,0.1)"],
+  "none": "0 0 #0000",
   "sm": "var(--un-shadow-inset) 0 1px 2px 0 rgba(0,0,0,0.05)",
   "md": ["var(--un-shadow-inset) 0 4px 6px -1px rgba(0,0,0,0.1)", "var(--un-shadow-inset) 0 2px 4px -2px rgba(0,0,0,0.1)"],
   "lg": ["var(--un-shadow-inset) 0 10px 15px -3px rgba(0,0,0,0.1)", "var(--un-shadow-inset) 0 4px 6px -4px rgba(0,0,0,0.1)"],
   "xl": ["var(--un-shadow-inset) 0 20px 25px -5px rgba(0,0,0,0.1)", "var(--un-shadow-inset) 0 8px 10px -6px rgba(0,0,0,0.1)"],
   "2xl": "var(--un-shadow-inset) 0 25px 50px -12px rgba(0,0,0,0.25)",
-  "inner": "inset 0 2px 4px 0 rgba(0,0,0,0.05)",
-  "none": "0 0 #0000"
+  "inner": "inset 0 2px 4px 0 rgba(0,0,0,0.05)"
 };
 const easing = {
   "DEFAULT": "cubic-bezier(0.4, 0, 0.2, 1)",
@@ -130,6 +154,10 @@ const easing = {
   "out": "cubic-bezier(0, 0, 0.2, 1)",
   "in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
 };
+const ringWidth = {
+  DEFAULT: "1px",
+  none: "0px"
+};
 
 const blur = {
   "DEFAULT": "8px",
@@ -214,7 +242,11 @@ const theme = {
   textStrokeWidth,
   blur,
   dropShadow,
-  easing
+  easing,
+  lineWidth,
+  spacing,
+  duration,
+  ringWidth
 };
 
-export { fontSize as a, blur as b, textIndent as c, dropShadow as d, textStrokeWidth as e, fontFamily as f, textShadow as g, letterSpacing as h, breakpoints as i, borderRadius as j, boxShadow as k, lineHeight as l, easing as m, baseSize as n, width as o, maxWidth as p, height as q, maxHeight as r, theme as t, verticalBreakpoints as v, wordSpacing as w };
+export { fontSize as a, blur as b, textIndent as c, dropShadow as d, textStrokeWidth as e, fontFamily as f, textShadow as g, letterSpacing as h, breakpoints as i, lineWidth as j, duration as k, lineHeight as l, borderRadius as m, boxShadow as n, easing as o, baseSize as p, width as q, ringWidth as r, spacing as s, theme as t, maxWidth as u, verticalBreakpoints as v, wordSpacing as w, height as x, maxHeight as y };

package/dist/chunks/default2.cjs

@@ -19,9 +19,9 @@ const textAligns = [
 ];
 
 const outline = [
-  [/^outline-(?:width-|size-)?(.+)$/, ([, d]) => ({ "outline-width": utilities.handler.bracket.cssvar.px(d) })],
+  [/^outline-(?:width-|size-)?(.+)$/, ([, d], { theme }) => ({ "outline-width": theme.lineWidth?.[d] ?? utilities.handler.bracket.cssvar.px(d) })],
   [/^outline-(?:color-)?(.+)$/, utilities.colorResolver("outline-color", "outline-color")],
-  [/^outline-offset-(.+)$/, ([, d]) => ({ "outline-offset": utilities.handler.bracket.cssvar.px(d) })],
+  [/^outline-offset-(.+)$/, ([, d], { theme }) => ({ "outline-offset": theme.lineWidth?.[d] ?? utilities.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" }]
@@ -75,10 +75,7 @@ const borders = [
   ["border-hidden", { "border-style": "hidden" }],
   ["border-none", { "border-style": "none" }]
 ];
-const borderHasColor = (color, { theme }) => {
-  return color !== void 0 && !!utilities.parseColor(color, theme)?.color;
-};
-const borderColorResolver = (direction) => ([, body], { theme }) => {
+const borderColorResolver = (direction) => ([, body], theme) => {
   const data = utilities.parseColor(body, theme);
   if (!data)
     return;
@@ -107,8 +104,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,
@@ -116,14 +113,14 @@ function handlerBorder(m) {
     ];
   }
 }
-function handlerBorderSize([, a = "", b = "1"]) {
-  const v = utilities.handler.bracket.cssvar.px(b);
+function handlerBorderSize([, a = "", b], { theme }) {
+  const v = theme.lineWidth?.[b || "DEFAULT"] ?? utilities.handler.bracket.cssvar.px(b || "1");
   if (a in utilities.directionMap && v != null)
     return utilities.directionMap[a].map((i) => [`border${i}-width`, v]);
 }
-function handlerBorderColor([, a = "", c], ctx) {
-  if (a in utilities.directionMap && borderHasColor(c, ctx)) {
-    return Object.assign({}, ...utilities.directionMap[a].map((i) => borderColorResolver(i)(["", c], ctx)));
+function handlerBorderColor([, a = "", c], { theme }) {
+  if (a in utilities.directionMap && utilities.hasParseableColor(c, theme)) {
+    return Object.assign({}, ...utilities.directionMap[a].map((i) => borderColorResolver(i)(["", c], theme)));
   }
 }
 function handlerBorderOpacity([, a = "", opacity]) {
@@ -131,8 +128,8 @@ function handlerBorderOpacity([, a = "", opacity]) {
   if (a in utilities.directionMap && v != null)
     return utilities.directionMap[a].map((i) => [`--un-border${i}-opacity`, v]);
 }
-function handlerRounded([, a = "", s = "DEFAULT"], { theme }) {
-  const v = theme.borderRadius?.[s] || utilities.handler.bracket.cssvar.fraction.rem(s);
+function handlerRounded([, a = "", s], { theme }) {
+  const v = theme.borderRadius?.[s || "DEFAULT"] || utilities.handler.bracket.cssvar.fraction.rem(s || "1");
   if (a in utilities.cornerMap && v != null)
     return utilities.cornerMap[a].map((i) => [`border${i}-radius`, v]);
 }
@@ -161,18 +158,19 @@ const transitionProperty = (prop) => {
   return utilities.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"] ?? utilities.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": utilities.handler.bracket.cssvar.time(d) })],
-  [/^(?:transition-)?delay-(.+)$/, ([, d]) => ({ "transition-delay": utilities.handler.bracket.cssvar.time(d) })],
+  [/^(?:transition-)?duration-(.+)$/, ([, d], { theme }) => ({ "transition-duration": theme.duration?.[d || "DEFAULT"] ?? utilities.handler.bracket.cssvar.time(d) })],
+  [/^(?:transition-)?delay-(.+)$/, ([, d], { theme }) => ({ "transition-delay": theme.duration?.[d || "DEFAULT"] ?? utilities.handler.bracket.cssvar.time(d) })],
   [/^(?:transition-)?ease(?:-(.+))?$/, ([, d], { theme }) => ({ "transition-timing-function": theme.easing?.[d || "DEFAULT"] ?? utilities.handler.bracket.cssvar(d) })],
   [/^(?:transition-)?property-(.+)$/, ([, v]) => ({ "transition-property": utilities.handler.global(v) || transitionProperty(v) })],
   ["transition-none", { transition: "none" }]
@@ -191,7 +189,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": utilities.handler.bracket.cssvar.auto.fraction.rem(d) })],
+  [/^(?:flex-)?basis-(.+)$/, ([, d], { theme }) => ({ "flex-basis": theme.spacing?.[d] ?? utilities.handler.bracket.cssvar.auto.fraction.rem(d) })],
   ["flex-row", { "flex-direction": "row" }],
   ["flex-row-reverse", { "flex-direction": "row-reverse" }],
   ["flex-col", { "flex-direction": "column" }],
@@ -223,9 +221,14 @@ const fonts = [
         "line-height": height
       };
     }
-    return { "font-size": utilities.handler.bracket.rem(s) };
+    return { "font-size": utilities.handler.bracketOfLength.rem(s) };
+  }],
+  [/^text-size-(.+)$/, ([, s], { theme }) => {
+    const themed = core.toArray(theme.fontSize?.[s]);
+    const size = themed?.[0] ?? utilities.handler.bracket.cssvar.rem(s);
+    if (size != null)
+      return { "font-size": size };
   }],
-  [/^text-size-(.+)$/, ([, s]) => ({ "font-size": utilities.handler.bracket.cssvar.rem(s) })],
   [/^(?:font|fw)-?([^-]+)$/, ([, s]) => ({ "font-weight": weightMap[s] || utilities.handler.number(s) })],
   [/^(?:leading|lh)-(.+)$/, ([, s], { theme }) => ({ "line-height": theme.lineHeight?.[s] || utilities.handler.bracket.cssvar.rem(s) })],
   [/^tracking-(.+)$/, ([, s], { theme }) => ({ "letter-spacing": theme.letterSpacing?.[s] || utilities.handler.bracket.cssvar.rem(s) })],
@@ -271,8 +274,8 @@ const directions = {
   "x": "column-",
   "y": "row-"
 };
-const handleGap = ([, d = "", s]) => {
-  const v = utilities.handler.bracket.cssvar.rem(s);
+const handleGap = ([, d = "", s], { theme }) => {
+  const v = theme.spacing?.[s] ?? utilities.handler.bracket.cssvar.rem(s);
   if (v != null) {
     return {
       [`grid-${directions[d]}gap`]: v,
@@ -281,16 +284,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 core.toArray(v)[0];
-  switch (selector) {
+    return v;
+  switch (prop) {
     case "min":
       return "min-content";
     case "max":
@@ -298,12 +302,14 @@ const autoDirection = (selector, theme) => {
     case "fr":
       return "minmax(0,1fr)";
   }
-  return utilities.handler.bracket.cssvar.auto.rem(selector);
+  return utilities.handler.bracket.cssvar.auto.rem(prop);
 };
 const grids = [
   ["grid", { display: "grid" }],
   ["inline-grid", { display: "inline-grid" }],
-  [/^(?:grid-)?(row|col)-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}`]: utilities.handler.bracket.cssvar.auto(v) })],
+  [/^(?:grid-)?(row|col)-(.+)$/, ([, c, v], { theme }) => ({
+    [`grid-${rowCol(c)}`]: theme[`grid${rowColTheme(c)}`]?.[v] ?? utilities.handler.bracket.cssvar.auto(v)
+  })],
   [/^(?:grid-)?(row|col)-span-(.+)$/, ([, c, s]) => {
     if (s === "full")
       return { [`grid-${rowCol(c)}`]: "1/-1" };
@@ -313,10 +319,12 @@ const grids = [
   }],
   [/^(?:grid-)?(row|col)-start-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-start`]: utilities.handler.bracket.cssvar(v) ?? v })],
   [/^(?:grid-)?(row|col)-end-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-end`]: utilities.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": utilities.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)}`]: utilities.handler.bracket.cssvar(v) })],
+  [/^grid-(rows|cols)-(.+)$/, ([, c, v], { theme }) => ({
+    [`grid-template-${rowCol(c)}`]: theme[`gridTemplate${rowColTheme(c)}`]?.[v] ?? utilities.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" }],
@@ -399,21 +407,21 @@ const placements = [
   ["place-self-center", { "place-self": "center" }],
   ["place-self-stretch", { "place-self": "stretch" }]
 ];
-function handleInsetValue(v) {
-  return utilities.handler.bracket.cssvar.auto.fraction.rem(v);
+function handleInsetValue(v, { theme }) {
+  return theme.spacing?.[v] ?? utilities.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 utilities.insetMap)
     return utilities.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" }],
@@ -509,45 +517,19 @@ const fontSmoothings = [
   }]
 ];
 
-const shadowBase = {
-  [core.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": utilities.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-(.+)$/, utilities.colorResolver("--un-shadow-color", "shadow")],
-  [/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": utilities.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 = utilities.handler.px(d || "1");
+  [/^ring(?:-(.+))?$/, ([, d], { theme }) => {
+    const value = theme.ringWidth?.[d || "DEFAULT"] ?? utilities.handler.px(d || "1");
     if (value) {
       return [
-        ringBase,
+        {
+          [core.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)",
@@ -557,9 +539,9 @@ const rings = [
       ];
     }
   }],
-  [/^ring-(?:width-|size-)(.+)$/, ([, d]) => ({ "--un-ring-width": utilities.handler.bracket.cssvar.px(d) })],
+  [/^ring-(?:width-|size-)(.+)$/, ([, d], { theme }) => ({ "--un-ring-width": theme.lineWidth?.[d] ?? utilities.handler.bracket.cssvar.px(d) })],
   ["ring-offset", { "--un-ring-offset-width": "1px" }],
-  [/^ring-offset-(?:width-|size-)?(.+)$/, ([, d]) => ({ "--un-ring-offset-width": utilities.handler.bracket.cssvar.px(d) })],
+  [/^ring-offset-(?:width-|size-)?(.+)$/, ([, d], { theme }) => ({ "--un-ring-offset-width": theme.lineWidth?.[d] ?? utilities.handler.bracket.cssvar.px(d) })],
   [/^ring-(.+)$/, utilities.colorResolver("--un-ring-color", "ring")],
   [/^ring-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-ring-opacity": utilities.handler.bracket.percent(opacity) })],
   [/^ring-offset-(.+)$/, utilities.colorResolver("--un-ring-offset-color", "ring-offset")],
@@ -567,6 +549,28 @@ const rings = [
   ["ring-inset", { "--un-ring-inset": "inset" }]
 ];
 
+const boxShadows = [
+  [/^shadow(?:-(.+))?$/, ([, d], { theme }) => {
+    const v = theme.boxShadow?.[d || "DEFAULT"];
+    if (v) {
+      return [
+        {
+          [core.CONTROL_SHORTCUT_NO_MERGE]: "",
+          "--un-shadow-inset": varEmpty,
+          "--un-shadow": "0 0 #0000"
+        },
+        {
+          "--un-shadow": utilities.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-(.+)$/, utilities.colorResolver("--un-shadow-color", "shadow")],
+  [/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-shadow-opacity": utilities.handler.bracket.percent(opacity) })],
+  ["shadow-inset", { "--un-shadow-inset": "inset" }]
+];
+
 const sizeMapping = {
   h: "height",
   w: "width",
@@ -708,8 +712,8 @@ const transforms = [
   ["transform-cpu", transformCpu],
   ["transform-none", { transform: "none" }]
 ];
-function handleTranslate([, d, b]) {
-  const v = utilities.handler.bracket.cssvar.fraction.rem(b);
+function handleTranslate([, d, b], { theme }) {
+  const v = theme.spacing?.[b] ?? utilities.handler.bracket.cssvar.fraction.rem(b);
   if (v != null) {
     return [
       transformBase,
@@ -811,7 +815,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": utilities.handler.bracket.cssvar.px(s) })],
+  [/^(?:underline|decoration)-(?:size-)?(.+)$/, ([, s], { theme }) => ({ "text-decoration-thickness": theme.lineWidth?.[s] ?? utilities.handler.bracket.cssvar.px(s) })],
   [/^(?:underline|decoration)-(auto|from-font)$/, ([, s]) => ({ "text-decoration-thickness": s })],
   [/^(?:underline|decoration)-(.+)$/, (match, ctx) => {
     const result = utilities.colorResolver("text-decoration-color", "line")(match, ctx);
@@ -823,7 +827,7 @@ const textDecorations = [
     }
   }],
   [/^(?:underline|decoration)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-line-opacity": utilities.handler.bracket.percent(opacity) })],
-  [/^(?:underline|decoration)-offset-(.+)$/, ([, s]) => ({ "text-underline-offset": utilities.handler.auto.bracket.cssvar.px(s) })],
+  [/^(?:underline|decoration)-offset-(.+)$/, ([, s], { theme }) => ({ "text-underline-offset": theme.lineWidth?.[s] ?? utilities.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" }]
@@ -833,9 +837,9 @@ const svgUtilities = [
   [/^fill-(.+)$/, utilities.colorResolver("fill", "fill")],
   [/^fill-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-fill-opacity": utilities.handler.bracket.percent(opacity) })],
   ["fill-none", { fill: "none" }],
-  [/^stroke-(?:width-|size-)?(.+)$/, ([, s]) => ({ "stroke-width": utilities.handler.bracket.cssvar.fraction.px.number(s) })],
+  [/^stroke-(?:width-|size-)?(.+)$/, ([, s], { theme }) => ({ "stroke-width": theme.lineWidth?.[s] ?? utilities.handler.bracket.cssvar.fraction.px.number(s) })],
   [/^stroke-dash-(.+)$/, ([, s]) => ({ "stroke-dasharray": utilities.handler.bracket.cssvar.number(s) })],
-  [/^stroke-offset-(.+)$/, ([, s]) => ({ "stroke-dashoffset": utilities.handler.bracket.cssvar.px.numberWithUnit(s) })],
+  [/^stroke-offset-(.+)$/, ([, s], { theme }) => ({ "stroke-dashoffset": theme.lineWidth?.[s] ?? utilities.handler.bracket.cssvar.px.numberWithUnit(s) })],
   [/^stroke-(.+)$/, utilities.colorResolver("stroke", "stroke")],
   [/^stroke-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-stroke-opacity": utilities.handler.bracket.percent(opacity) })],
   ["stroke-cap-square", { "stroke-linecap": "square" }],
@@ -942,7 +946,6 @@ exports.questionMark = questionMark;
 exports.resizes = resizes;
 exports.rings = rings;
 exports.rules = rules;
-exports.shadowBase = shadowBase;
 exports.sizes = sizes;
 exports.svgUtilities = svgUtilities;
 exports.tabSizes = tabSizes;