@unocss/preset-mini 0.24.3 → 0.26.0

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;
@@ -58,7 +58,7 @@ function parseColor$1(str) {
     return color;
 }
 function parseHexColor(str) {
-  const [, body] = str.match(/^#?([\da-f]+)$/i) || [];
+  const [, body] = str.match(/^#([\da-f]+)$/i) || [];
   if (!body)
     return;
   switch (body.length) {
@@ -354,7 +354,8 @@ const cssProps = [
   "mask-size",
   "mask-border",
   "clip-path",
-  "clip"
+  "clip",
+  "border-radius"
 ];
 const numberWithUnitRE = /^(-?[0-9.]+)(px|pt|pc|rem|em|%|vh|vw|in|cm|mm|ex|ch|vmin|vmax|rpx)?$/i;
 const numberRE = /^(-?[0-9.]+)$/i;
@@ -419,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))})`;
@@ -470,6 +488,8 @@ const valueHandlers = {
   percent: percent,
   fraction: fraction,
   bracket: bracket,
+  bracketOfColor: bracketOfColor,
+  bracketOfLength: bracketOfLength,
   cssvar: cssvar,
   time: time,
   degree: degree,
@@ -482,23 +502,30 @@ const h = handler;
 
 const directionSize = (propertyPrefix) => ([_, direction, size]) => {
   const v = handler.bracket.cssvar.auto.fraction.rem(size);
-  if (v !== void 0)
+  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.slice(1);
+    color = bracketOrMain;
   else if (bracketOrMain.startsWith("hex-"))
-    color = bracketOrMain.slice(4);
+    color = `#${bracketOrMain.slice(4)}`;
   else if (main.startsWith("$"))
     color = handler.cssvar(main);
   color = color || bracket;
@@ -566,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;
@@ -576,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;
@@ -56,7 +56,7 @@ function parseColor$1(str) {
     return color;
 }
 function parseHexColor(str) {
-  const [, body] = str.match(/^#?([\da-f]+)$/i) || [];
+  const [, body] = str.match(/^#([\da-f]+)$/i) || [];
   if (!body)
     return;
   switch (body.length) {
@@ -352,7 +352,8 @@ const cssProps = [
   "mask-size",
   "mask-border",
   "clip-path",
-  "clip"
+  "clip",
+  "border-radius"
 ];
 const numberWithUnitRE = /^(-?[0-9.]+)(px|pt|pc|rem|em|%|vh|vw|in|cm|mm|ex|ch|vmin|vmax|rpx)?$/i;
 const numberRE = /^(-?[0-9.]+)$/i;
@@ -417,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))})`;
@@ -468,6 +486,8 @@ const valueHandlers = {
   percent: percent,
   fraction: fraction,
   bracket: bracket,
+  bracketOfColor: bracketOfColor,
+  bracketOfLength: bracketOfLength,
   cssvar: cssvar,
   time: time,
   degree: degree,
@@ -480,23 +500,30 @@ const h = handler;
 
 const directionSize = (propertyPrefix) => ([_, direction, size]) => {
   const v = handler.bracket.cssvar.auto.fraction.rem(size);
-  if (v !== void 0)
+  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.slice(1);
+    color = bracketOrMain;
   else if (bracketOrMain.startsWith("hex-"))
-    color = bracketOrMain.slice(4);
+    color = `#${bracketOrMain.slice(4)}`;
   else if (main.startsWith("$"))
     color = handler.cssvar(main);
   color = color || bracket;
@@ -564,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-06de139a.d.ts → colors-e269d6e0.d.ts}

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

package/dist/colors.d.ts

@@ -1,2 +1,2 @@
-export { c as colors } from './colors-06de139a';
-import './types-f185ef8d';
+export { c as colors } from './colors-e269d6e0';
+import './types-20b16474';

package/dist/{default-595a2a04.d.ts → default-c3837f44.d.ts}

@@ -1,4 +1,4 @@
-import { T as Theme } from './types-f185ef8d';
+import { T as Theme } from './types-20b16474';
 
 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-f185ef8d';
-export { T as Theme, a as ThemeAnimation } from './types-f185ef8d';
-export { t as theme } from './default-595a2a04';
-export { c as colors } from './colors-06de139a';
-export { p as parseColor } from './utilities-df1ea892';
+import { T as Theme } from './types-20b16474';
+export { T as Theme, a as ThemeAnimation } from './types-20b16474';
+export { t as theme } from './default-c3837f44';
+export { c as colors } from './colors-e269d6e0';
+export { p as parseColor } from './utilities-9f0998a3';
 
 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;

package/dist/rules.d.ts

@@ -1,5 +1,5 @@
 import { Rule } from '@unocss/core';
-import { T as Theme } from './types-f185ef8d';
+import { T as Theme } from './types-20b16474';
 
 declare const verticalAligns: Rule[];
 declare const textAligns: Rule[];
@@ -26,7 +26,7 @@ declare const flex: Rule[];
 
 declare const gaps: Rule[];
 
-declare const grids: Rule[];
+declare const grids: Rule<Theme>[];
 
 declare const overflows: Rule[];
 
@@ -49,13 +49,6 @@ declare const questionMark: Rule[];
 
 declare const rings: Rule<Theme>[];
 
-declare const shadowBase: {
-    "$$shortcut-no-merge": string;
-    '--un-ring-offset-shadow': string;
-    '--un-ring-shadow': string;
-    '--un-shadow-inset': string;
-    '--un-shadow': string;
-};
 declare const boxShadows: Rule<Theme>[];
 
 declare const sizes: Rule<Theme>[];
@@ -96,4 +89,4 @@ declare const cssProperty: Rule[];
 
 declare const textDecorations: Rule[];
 
-export { alignments, appearance, appearances, aspectRatio, bgColors, borders, boxShadows, boxSizing, breaks, contents, cssProperty, cssVariables, cursors, displays, flex, floats, fontSmoothings, fontStyles, fonts, gaps, grids, insets, justifies, margins, opacity, orders, outline, overflows, paddings, placements, pointerEvents, positions, questionMark, resizes, rings, rules, shadowBase, sizes, svgUtilities, tabSizes, textAligns, textColors, textDecorations, textIndents, textOverflows, textShadows, textStrokes, textTransforms, transforms, transitions, userSelects, varEmpty, verticalAligns, whitespaces, willChange, zIndexes };
+export { alignments, appearance, appearances, aspectRatio, bgColors, borders, boxShadows, boxSizing, breaks, contents, cssProperty, cssVariables, cursors, displays, flex, floats, fontSmoothings, fontStyles, fonts, gaps, grids, insets, justifies, margins, opacity, orders, outline, overflows, paddings, placements, pointerEvents, positions, questionMark, resizes, rings, rules, sizes, svgUtilities, tabSizes, textAligns, textColors, textDecorations, textIndents, textOverflows, textShadows, textStrokes, textTransforms, transforms, transitions, userSelects, varEmpty, verticalAligns, whitespaces, willChange, zIndexes };

package/dist/rules.mjs

@@ -1,3 +1,3 @@
-export { l as alignments, a as appearance, H as appearances, C as aspectRatio, e as bgColors, b as borders, A as boxShadows, s as boxSizing, O as breaks, N as contents, a0 as cssProperty, $ as cssVariables, I as cursors, G as displays, f as flex, q as floats, S as fontSmoothings, R as fontStyles, W as fonts, g as gaps, h as grids, n as insets, j as justifies, E as margins, c as opacity, k as orders, o as outline, i as overflows, D as paddings, m as placements, J as pointerEvents, p as positions, u as questionMark, K as resizes, x as rings, r as rules, y as shadowBase, B as sizes, T as svgUtilities, X as tabSizes, t as textAligns, d as textColors, a1 as textDecorations, Y as textIndents, P as textOverflows, _ as textShadows, Z as textStrokes, Q as textTransforms, U as transforms, V as transitions, L as userSelects, F as varEmpty, v as verticalAligns, M as whitespaces, w as willChange, z as zIndexes } from './chunks/default2.mjs';
+export { l as alignments, a as appearance, G as appearances, B as aspectRatio, e as bgColors, b as borders, y as boxShadows, s as boxSizing, N as breaks, M as contents, $ as cssProperty, _ as cssVariables, H as cursors, F as displays, f as flex, q as floats, R as fontSmoothings, Q as fontStyles, V as fonts, g as gaps, h as grids, n as insets, j as justifies, D as margins, c as opacity, k as orders, o as outline, i as overflows, C as paddings, m as placements, I as pointerEvents, p as positions, u as questionMark, J as resizes, x as rings, r as rules, A as sizes, S as svgUtilities, W as tabSizes, t as textAligns, d as textColors, a0 as textDecorations, X as textIndents, O as textOverflows, Z as textShadows, Y as textStrokes, P as textTransforms, T as transforms, U as transitions, K as userSelects, E as varEmpty, v as verticalAligns, L as whitespaces, w as willChange, z as zIndexes } from './chunks/default2.mjs';
 import './chunks/utilities.mjs';
 import '@unocss/core';

package/dist/theme.cjs

@@ -17,6 +17,12 @@ exports.dropShadow = _default.dropShadow;
 exports.easing = _default.easing;
 exports.fontFamily = _default.fontFamily;
 exports.fontSize = _default.fontSize;
+exports.gridAutoColumn = _default.gridAutoColumn;
+exports.gridAutoRow = _default.gridAutoRow;
+exports.gridColumn = _default.gridColumn;
+exports.gridRow = _default.gridRow;
+exports.gridTemplateColumn = _default.gridTemplateColumn;
+exports.gridTemplateRow = _default.gridTemplateRow;
 exports.height = _default.height;
 exports.letterSpacing = _default.letterSpacing;
 exports.lineHeight = _default.lineHeight;

package/dist/theme.d.ts

@@ -1,7 +1,7 @@
-export { c as colors } from './colors-06de139a';
-export { t as theme } from './default-595a2a04';
-import { T as Theme } from './types-f185ef8d';
-export { T as Theme, a as ThemeAnimation } from './types-f185ef8d';
+export { c as colors } from './colors-e269d6e0';
+export { t as theme } from './default-c3837f44';
+import { T as Theme } from './types-20b16474';
+export { T as Theme, a as ThemeAnimation } from './types-20b16474';
 
 declare const blur: {
     DEFAULT: string;
@@ -36,6 +36,45 @@ declare const lineHeight: Theme['lineHeight'];
 declare const letterSpacing: Theme['letterSpacing'];
 declare const wordSpacing: Theme['wordSpacing'];
 
+declare const gridAutoColumn: {
+    xs: string;
+    sm: string;
+    base: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+    '6xl': string;
+    '7xl': string;
+    '8xl': string;
+    '9xl': string;
+};
+declare const gridAutoRow: {
+    xs: string;
+    sm: string;
+    base: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+    '6xl': string;
+    '7xl': string;
+    '8xl': string;
+    '9xl': string;
+};
+declare const gridColumn: {};
+declare const gridRow: {};
+declare const gridTemplateColumn: {
+    none: string;
+};
+declare const gridTemplateRow: {
+    none: string;
+};
+
 declare const breakpoints: {
     sm: string;
     md: string;
@@ -158,4 +197,4 @@ declare const maxHeight: {
     none: string;
 };
 
-export { baseSize, blur, borderRadius, boxShadow, breakpoints, dropShadow, easing, fontFamily, fontSize, height, letterSpacing, lineHeight, maxHeight, maxWidth, textIndent, textShadow, textStrokeWidth, verticalBreakpoints, width, wordSpacing };
+export { baseSize, blur, borderRadius, boxShadow, breakpoints, dropShadow, easing, fontFamily, fontSize, gridAutoColumn, gridAutoRow, gridColumn, gridRow, gridTemplateColumn, gridTemplateRow, height, letterSpacing, lineHeight, maxHeight, maxWidth, textIndent, textShadow, textStrokeWidth, verticalBreakpoints, width, wordSpacing };

package/dist/theme.mjs

@@ -1,2 +1,2 @@
 export { c as colors } from './chunks/colors.mjs';
-export { n as baseSize, b as blur, j as borderRadius, k as boxShadow, i as breakpoints, d as dropShadow, m as easing, f as fontFamily, a as fontSize, q as height, h as letterSpacing, l as lineHeight, r as maxHeight, p as maxWidth, c as textIndent, g as textShadow, e as textStrokeWidth, t as theme, v as verticalBreakpoints, o as width, w as wordSpacing } from './chunks/default.mjs';
+export { u as baseSize, b as blur, q as borderRadius, r as boxShadow, p as breakpoints, d as dropShadow, s as easing, f as fontFamily, a as fontSize, i as gridAutoColumn, j as gridAutoRow, k as gridColumn, m as gridRow, n as gridTemplateColumn, o as gridTemplateRow, z as height, h as letterSpacing, l as lineHeight, A as maxHeight, y as maxWidth, c as textIndent, g as textShadow, e as textStrokeWidth, t as theme, v as verticalBreakpoints, x as width, w as wordSpacing } from './chunks/default.mjs';

package/dist/{types-f185ef8d.d.ts → types-20b16474.d.ts}

@@ -33,7 +33,14 @@ interface Theme {
     blur?: Record<string, string>;
     dropShadow?: Record<string, string | string[]>;
     easing?: Record<string, string>;
+    media?: Record<string, string>;
     animation?: ThemeAnimation;
+    gridAutoColumn?: Record<string, string>;
+    gridAutoRow?: Record<string, string>;
+    gridColumn?: Record<string, string>;
+    gridRow?: Record<string, string>;
+    gridTemplateColumn?: Record<string, string>;
+    gridTemplateRow?: Record<string, string>;
 }
 
 export { Theme as T, ThemeAnimation as a };

package/dist/{utilities-df1ea892.d.ts → utilities-9f0998a3.d.ts}

@@ -1,23 +1,22 @@
-import { DynamicMatcher, ParsedColorValue } from '@unocss/core';
-import { T as Theme } from './types-f185ef8d';
+import { CSSEntries, ParsedColorValue, RuleContext, CSSObject } from '@unocss/core';
+import { T as Theme } from './types-20b16474';
 
 /**
  * Provide {@link DynamicMatcher} function returning spacing definition. See spacing rules.
  *
  * @param {string} propertyPrefix - Property for the css value to be created. Postfix will be appended according to direction matched.
- * @return {DynamicMatcher}  {@link DynamicMatcher}
+ * @return {@link DynamicMatcher} object.
  * @see {@link directionMap}
  */
-declare const directionSize: (propertyPrefix: string) => DynamicMatcher;
+declare const directionSize: (propertyPrefix: string) => ([_, direction, size]: string[]) => CSSEntries | undefined;
 /**
- * Parse color string into rgba (if possible) with opacity. Color value will be matched to theme object before converting to rgb value.
+ * Parse color string into {@link ParsedColorValue} (if possible). Color value will first be matched to theme object before parsing.
+ * See also color.tests.ts for more examples.
  *
  * @example Parseable strings:
  * 'red' // From theme, if 'red' is available
  * 'red-100' // From theme, plus scale
  * 'red-100/20' // From theme, plus scale/opacity
- * '#f12' // Hex color
- * 'hex-f12' // Alternative hex color
  * '[rgb(100,2,3)]/[var(--op)]' // Bracket with rgb color and bracket with opacity
  *
  * @param {string} body - Color string to be parsed.
@@ -36,21 +35,22 @@ declare const parseColor: (body: string, theme: Theme) => ParsedColorValue | und
  *
  * @example Resolving 'red-100' from theme:
  * colorResolver('background-color', 'background')('', 'red-100')
- * return { '--un-background-opacity': '1', 'background-color': 'rgb(254,226,226,var(--un-bg-opacity))' }
+ * return { '--un-background-opacity': '1', 'background-color': 'rgba(254,226,226,var(--un-bg-opacity))' }
  *
  * @example Resolving 'red-100/20' from theme:
  * colorResolver('background-color', 'background')('', 'red-100/20')
- * return { 'background-color': 'rgb(204,251,241,0.22)' }
+ * return { 'background-color': 'rgba(204,251,241,0.22)' }
  *
  * @example Resolving 'hex-124':
  * colorResolver('color', 'text')('', 'hex-124')
- * return { '--un-text-opacity': '1', 'color': 'rgb(17,34,68,var(--un-text-opacity))' }
+ * return { '--un-text-opacity': '1', 'color': 'rgba(17,34,68,var(--un-text-opacity))' }
  *
  * @param {string} property - Property for the css value to be created.
  * @param {string} varName - Base name for the opacity variable.
- * @return {DynamicMatcher}  {@link DynamicMatcher} object.
+ * @return {@link DynamicMatcher} object.
  */
-declare const colorResolver: (property: string, varName: string) => DynamicMatcher;
+declare const colorResolver: (property: string, varName: string) => ([, body]: string[], { theme }: RuleContext<Theme>) => CSSObject | undefined;
 declare const colorableShadows: (shadows: string | string[], colorVar: string) => string[];
+declare const hasParseableColor: (color: string | undefined, theme: Theme) => boolean;
 
-export { colorableShadows as a, colorResolver as c, directionSize as d, parseColor as p };
+export { colorableShadows as a, colorResolver as c, directionSize as d, hasParseableColor as h, parseColor as p };

package/dist/utils.cjs

@@ -17,6 +17,7 @@ exports.directionSize = utilities.directionSize;
 exports.getComponents = utilities.getComponents;
 exports.h = utilities.h;
 exports.handler = utilities.handler;
+exports.hasParseableColor = utilities.hasParseableColor;
 exports.hex2rgba = utilities.hex2rgba;
 exports.insetMap = utilities.insetMap;
 exports.parseColor = utilities.parseColor;

package/dist/utils.d.ts

@@ -1,7 +1,7 @@
 import * as _unocss_core from '@unocss/core';
 import { RGBAColorValue, CSSColorValue, VariantHandler } from '@unocss/core';
-export { c as colorResolver, a as colorableShadows, d as directionSize, p as parseColor } from './utilities-df1ea892';
-import './types-f185ef8d';
+export { c as colorResolver, a as colorableShadows, d as directionSize, h as hasParseableColor, p as parseColor } from './utilities-9f0998a3';
+import './types-20b16474';
 
 declare function hex2rgba(hex?: string): RGBAColorValue | undefined;
 declare function parseCssColor(str?: string): CSSColorValue | undefined;
@@ -22,6 +22,8 @@ declare function number(str: string): string | undefined;
 declare function percent(str: string): string | undefined;
 declare function fraction(str: string): string | undefined;
 declare function bracket(str: string): string | undefined;
+declare function bracketOfColor(str: string): string | undefined;
+declare function bracketOfLength(str: string): string | undefined;
 declare function cssvar(str: string): string | undefined;
 declare function time(str: string): string | undefined;
 declare function degree(str: string): string | undefined;
@@ -36,6 +38,8 @@ declare const handlers_number: typeof number;
 declare const handlers_percent: typeof percent;
 declare const handlers_fraction: typeof fraction;
 declare const handlers_bracket: typeof bracket;
+declare const handlers_bracketOfColor: typeof bracketOfColor;
+declare const handlers_bracketOfLength: typeof bracketOfLength;
 declare const handlers_cssvar: typeof cssvar;
 declare const handlers_time: typeof time;
 declare const handlers_degree: typeof degree;
@@ -51,6 +55,8 @@ declare namespace handlers {
     handlers_percent as percent,
     handlers_fraction as fraction,
     handlers_bracket as bracket,
+    handlers_bracketOfColor as bracketOfColor,
+    handlers_bracketOfLength as bracketOfLength,
     handlers_cssvar as cssvar,
     handlers_time as time,
     handlers_degree as degree,
@@ -59,8 +65,8 @@ declare namespace handlers {
   };
 }
 
-declare const handler: _unocss_core.ValueHandler<"number" | "auto" | "numberWithUnit" | "rem" | "px" | "percent" | "fraction" | "bracket" | "cssvar" | "time" | "degree" | "global" | "properties">;
-declare const h: _unocss_core.ValueHandler<"number" | "auto" | "numberWithUnit" | "rem" | "px" | "percent" | "fraction" | "bracket" | "cssvar" | "time" | "degree" | "global" | "properties">;
+declare const handler: _unocss_core.ValueHandler<"number" | "auto" | "numberWithUnit" | "rem" | "px" | "percent" | "fraction" | "bracket" | "bracketOfColor" | "bracketOfLength" | "cssvar" | "time" | "degree" | "global" | "properties">;
+declare const h: _unocss_core.ValueHandler<"number" | "auto" | "numberWithUnit" | "rem" | "px" | "percent" | "fraction" | "bracket" | "bracketOfColor" | "bracketOfLength" | "cssvar" | "time" | "degree" | "global" | "properties">;
 
 declare const variantMatcher: (name: string, selector?: ((input: string) => string | undefined) | undefined) => (input: string) => VariantHandler | undefined;
 declare const variantParentMatcher: (name: string, parent: string) => (input: string) => VariantHandler | undefined;

package/dist/utils.mjs

@@ -1,3 +1,3 @@
-export { c as colorResolver, a as colorToString, e as colorableShadows, b as cornerMap, d as directionMap, f as directionSize, l as getComponents, m as h, h as handler, j as hex2rgba, i as insetMap, p as parseColor, k as parseCssColor, g as positionMap, v as valueHandlers, x as xyzMap } from './chunks/utilities.mjs';
+export { c as colorResolver, b as colorToString, f as colorableShadows, e as cornerMap, d as directionMap, g as directionSize, m as getComponents, n as h, h as handler, a as hasParseableColor, k as hex2rgba, i as insetMap, p as parseColor, l as parseCssColor, j as positionMap, v as valueHandlers, x as xyzMap } from './chunks/utilities.mjs';
 export { a as variantMatcher, v as variantParentMatcher } from './chunks/variants.mjs';
 import '@unocss/core';

package/dist/variants.cjs

@@ -12,15 +12,16 @@ exports.partClasses = _default.partClasses;
 exports.variantBreakpoints = _default.variantBreakpoints;
 exports.variantColorsMediaOrClass = _default.variantColorsMediaOrClass;
 exports.variantCombinators = _default.variantCombinators;
+exports.variantCustomMedia = _default.variantCustomMedia;
 exports.variantImportant = _default.variantImportant;
 exports.variantLanguageDirections = _default.variantLanguageDirections;
 exports.variantLayer = _default.variantLayer;
-exports.variantMotions = _default.variantMotions;
 exports.variantNegative = _default.variantNegative;
-exports.variantOrientations = _default.variantOrientations;
 exports.variantPrint = _default.variantPrint;
 exports.variantPseudoClassFunctions = _default.variantPseudoClassFunctions;
 exports.variantPseudoClasses = _default.variantPseudoClasses;
 exports.variantPseudoElements = _default.variantPseudoElements;
+exports.variantScope = _default.variantScope;
+exports.variantSelector = _default.variantSelector;
 exports.variantTaggedPseudoClasses = _default.variantTaggedPseudoClasses;
 exports.variants = _default.variants;

package/dist/variants.d.ts

@@ -1,17 +1,16 @@
 import { Variant, VariantFunction, VariantObject } from '@unocss/core';
-import { T as Theme } from './types-f185ef8d';
+import { T as Theme } from './types-20b16474';
 import { PresetMiniOptions } from './index';
-import './default-595a2a04';
-import './colors-06de139a';
-import './utilities-df1ea892';
+import './default-c3837f44';
+import './colors-e269d6e0';
+import './utilities-9f0998a3';
 
 declare const variantBreakpoints: Variant<Theme>;
 
 declare const variantCombinators: Variant[];
 
-declare const variantMotions: VariantFunction[];
-declare const variantOrientations: VariantFunction[];
 declare const variantPrint: VariantFunction;
+declare const variantCustomMedia: VariantFunction;
 
 declare const variantColorsMediaOrClass: (options?: PresetMiniOptions) => VariantFunction[];
 
@@ -19,7 +18,9 @@ declare const variants: (options: PresetMiniOptions) => Variant<Theme>[];
 
 declare const variantLanguageDirections: Variant[];
 
+declare const variantSelector: Variant;
 declare const variantLayer: Variant;
+declare const variantScope: Variant;
 declare const variantImportant: Variant;
 declare const variantNegative: Variant;
 
@@ -29,4 +30,4 @@ declare const variantPseudoClassFunctions: VariantObject;
 declare const variantTaggedPseudoClasses: (options?: PresetMiniOptions) => VariantObject[];
 declare const partClasses: VariantObject;
 
-export { partClasses, variantBreakpoints, variantColorsMediaOrClass, variantCombinators, variantImportant, variantLanguageDirections, variantLayer, variantMotions, variantNegative, variantOrientations, variantPrint, variantPseudoClassFunctions, variantPseudoClasses, variantPseudoElements, variantTaggedPseudoClasses, variants };
+export { partClasses, variantBreakpoints, variantColorsMediaOrClass, variantCombinators, variantCustomMedia, variantImportant, variantLanguageDirections, variantLayer, variantNegative, variantPrint, variantPseudoClassFunctions, variantPseudoClasses, variantPseudoElements, variantScope, variantSelector, variantTaggedPseudoClasses, variants };

package/dist/variants.mjs

@@ -1,3 +1,3 @@
-export { p as partClasses, a as variantBreakpoints, f as variantColorsMediaOrClass, b as variantCombinators, i as variantImportant, g as variantLanguageDirections, h as variantLayer, c as variantMotions, j as variantNegative, d as variantOrientations, e as variantPrint, m as variantPseudoClassFunctions, l as variantPseudoClasses, k as variantPseudoElements, n as variantTaggedPseudoClasses, v as variants } from './chunks/default3.mjs';
+export { p as partClasses, a as variantBreakpoints, e as variantColorsMediaOrClass, b as variantCombinators, d as variantCustomMedia, j as variantImportant, f as variantLanguageDirections, h as variantLayer, k as variantNegative, c as variantPrint, n as variantPseudoClassFunctions, m as variantPseudoClasses, l as variantPseudoElements, i as variantScope, g as variantSelector, o as variantTaggedPseudoClasses, v as variants } from './chunks/default3.mjs';
 import './chunks/variants.mjs';
 import '@unocss/core';