@unocss/preset-wind4 66.6.8 → 66.7.0-beta.1

package/dist/rules.mjs

@@ -1,5 +1,5 @@
-import { A as bracketTypeRe, B as xyzMap, D as h, F as directionMap, I as globalKeywords, L as insetMap, M as cornerMap, R as positionMap, S as parseColor, U as SpecialColorKey, V as CONTROL_NO_NEGATIVE, _ as hyphenate, a as themeTracking, b as makeGlobalStaticRules, d as colorableShadows, g as hasParseableColor, j as splitComma, l as colorCSSGenerator, m as directionSize, n as detectThemeValue, p as defineProperty, r as generateThemeVariable, u as colorResolver, v as isCSSMathFn, w as resolveBreakpoints, x as numberResolver, y as isSize, z as xyzArray } from "./utils-B60b98El.mjs";
-import { n as containerParent, r as containerShortcuts, t as container } from "./container-m1WfKD7R.mjs";
+import { A as bracketTypeRe, B as xyzMap, D as h, F as directionMap, I as globalKeywords, L as insetMap, M as cornerMap, R as positionMap, S as parseColor, U as SpecialColorKey, V as CONTROL_NO_NEGATIVE, _ as hyphenate, a as themeTracking, b as makeGlobalStaticRules, d as colorableShadows, g as hasParseableColor, j as splitComma, l as colorCSSGenerator, m as directionSize, n as detectThemeValue, p as defineProperty, r as generateThemeVariable, u as colorResolver, v as isCSSMathFn, w as resolveBreakpoints, x as numberResolver, y as isSize, z as xyzArray } from "./utils-CqAvZsCu.mjs";
+import { n as containerParent, r as containerShortcuts, t as container } from "./container-BwY4Hhe2.mjs";
 import { notNull, symbols } from "@unocss/core";
 import { getStringComponent, getStringComponents } from "@unocss/rule-utils";
 //#region src/rules/align.ts
@@ -21,7 +21,7 @@ const verticalAlignAlias = {
 };
 const verticalAligns = [[
 	/^(?:vertical|align|v)-(.+)$/,
-	([, v]) => ({ "vertical-align": verticalAlignAlias[v] ?? h.bracket.cssvar.numberWithUnit(v) }),
+	([, v], { theme }) => ({ "vertical-align": verticalAlignAlias[v] ?? h.bracket.cssvar.numberWithUnit(v, theme) }),
 	{ autocomplete: [`(vertical|align|v)-(${Object.keys(verticalAlignAlias).join("|")})`, "(vertical|align|v)-<percentage>"] }
 ]];
 const textAlignValues = [
@@ -58,24 +58,24 @@ const animations = [
 					...props
 				}];
 			}
-			return { animation: h.bracket.cssvar(name) };
+			return { animation: h.bracket.cssvar(name, theme) };
 		},
 		{ autocomplete: "animate-$animation.keyframes" }
 	],
-	[/^animate-name-(.+)/, ([, d]) => ({ "animation-name": h.bracket.cssvar(d) ?? d })],
+	[/^animate-name-(.+)/, ([, d], { theme }) => ({ "animation-name": h.bracket.cssvar(d, theme) ?? d })],
 	[
 		/^animate-duration-(.+)$/,
-		([, d], { theme }) => ({ "animation-duration": theme.duration?.[d || "DEFAULT"] ?? h.bracket.cssvar.time(d) }),
+		([, d], { theme }) => ({ "animation-duration": theme.duration?.[d || "DEFAULT"] ?? h.bracket.cssvar.time(d, theme) }),
 		{ autocomplete: ["animate-duration"] }
 	],
 	[
 		/^animate-delay-(.+)$/,
-		([, d], { theme }) => ({ "animation-delay": theme.duration?.[d || "DEFAULT"] ?? h.bracket.cssvar.time(d) }),
+		([, d], { theme }) => ({ "animation-delay": theme.duration?.[d || "DEFAULT"] ?? h.bracket.cssvar.time(d, theme) }),
 		{ autocomplete: ["animate-delay"] }
 	],
 	[
 		/^animate-ease(?:-(.+))?$/,
-		([, d], { theme }) => ({ "animation-timing-function": theme.ease?.[d || "DEFAULT"] ?? h.bracket.cssvar(d) }),
+		([, d], { theme }) => ({ "animation-timing-function": theme.ease?.[d || "DEFAULT"] ?? h.bracket.cssvar(d, theme) }),
 		{ autocomplete: ["animate-ease", "animate-ease-$ease"] }
 	],
 	[
@@ -110,7 +110,7 @@ const animations = [
 	],
 	[
 		/^animate-(?:iteration-count-|iteration-|count-)(.+)$/,
-		([, d]) => ({ "animation-iteration-count": h.bracket.cssvar(d) ?? d.replace(/-/g, ",") }),
+		([, d], { theme }) => ({ "animation-iteration-count": h.bracket.cssvar(d, theme) ?? d.replace(/-/g, ",") }),
 		{ autocomplete: ["animate-(iteration|count|iteration-count)", "animate-(iteration|count|iteration-count)-<num>"] }
 	],
 	[
@@ -194,7 +194,7 @@ function bgGradientColorResolver() {
 				if (keys) themeTracking(`colors`, keys);
 				if (theme) detectThemeValue(color, theme);
 			}
-		} else css[`--un-gradient-${position}`] = h.bracket.cssvar(body);
+		} else css[`--un-gradient-${position}`] = h.bracket.cssvar(body, theme);
 		if (css[`--un-gradient-${position}`]) {
 			switch (position) {
 				case "from":
@@ -225,18 +225,18 @@ function bgGradientColorResolver() {
 	};
 }
 function bgGradientPositionResolver() {
-	return function* ([, mode, body]) {
-		yield { [`--un-gradient-${mode}-position`]: `${h.bracket.cssvar.percent(body)}` };
+	return function* ([, mode, body], { theme }) {
+		yield { [`--un-gradient-${mode}-position`]: `${h.bracket.cssvar.percent(body, theme)}` };
 		for (const p of Object.values(properties)) yield p;
 	};
 }
 const backgroundStyles = [
 	[
 		/^bg-(linear|radial|conic)-([^/]+)(?:\/(.+))?$/,
-		([, m, d, s]) => {
+		([, m, d, s], { theme }) => {
 			let v;
 			if (h.number(d) != null) v = `from ${h.number(d)}deg ${resolveModifier(s)};`;
-			else v = h.bracket(d);
+			else v = h.bracket(d, theme);
 			if (v) return {
 				"--un-gradient-position": v,
 				"background-image": `${m}-gradient(var(--un-gradient-stops))`
@@ -250,7 +250,7 @@ const backgroundStyles = [
 		] }
 	],
 	[/^(from|via|to|stops)-(.+)$/, bgGradientColorResolver()],
-	[/^(from|via|to)-op(?:acity)?-?(.+)$/, ([, position, opacity]) => ({ [`--un-${position}-opacity`]: h.bracket.percent(opacity) })],
+	[/^(from|via|to)-op(?:acity)?-?(.+)$/, ([, position, opacity], { theme }) => ({ [`--un-${position}-opacity`]: h.bracket.percent(opacity, theme) })],
 	[/^(from|via|to)-([\d.]+%)$/, bgGradientPositionResolver()],
 	[
 		/^bg-((?:repeating-)?(?:linear|radial|conic))$/,
@@ -285,7 +285,7 @@ const backgroundStyles = [
 	["bg-auto", { "background-size": "auto" }],
 	["bg-cover", { "background-size": "cover" }],
 	["bg-contain", { "background-size": "contain" }],
-	[/^bg-size-(.+)$/, ([, v]) => ({ "background-size": h.bracket.cssvar(v) })],
+	[/^bg-size-(.+)$/, ([, v], { theme }) => ({ "background-size": h.bracket.cssvar(v, theme) })],
 	["bg-fixed", { "background-attachment": "fixed" }],
 	["bg-local", { "background-attachment": "local" }],
 	["bg-scroll", { "background-attachment": "scroll" }],
@@ -337,12 +337,12 @@ const outline = [
 	],
 	[
 		/^outline-op(?:acity)?-?(.+)$/,
-		([, opacity]) => ({ "--un-outline-opacity": h.bracket.percent.cssvar(opacity) }),
+		([, opacity], { theme }) => ({ "--un-outline-opacity": h.bracket.percent.cssvar(opacity, theme) }),
 		{ autocomplete: "outline-(op|opacity)-<percent>" }
 	],
 	[
 		/^outline-offset-(.+)$/,
-		([, d]) => ({ "outline-offset": h.bracket.cssvar.global.px(d) }),
+		([, d], { theme }) => ({ "outline-offset": h.bracket.cssvar.global.px(d, theme) }),
 		{ autocomplete: "outline-(offset)-<num>" }
 	],
 	["outline-offset-none", { "outline-offset": "0" }],
@@ -375,8 +375,8 @@ const outline = [
 		"outline-style": v
 	}])
 ];
-function* handleWidth$2([, b]) {
-	const v = h.bracket.cssvar.global.px(b);
+function* handleWidth$2([, b], { theme }) {
+	const v = h.bracket.cssvar.global.px(b, theme);
 	if (v != null) {
 		yield {
 			"outline-style": "var(--un-outline-style)",
@@ -386,7 +386,7 @@ function* handleWidth$2([, b]) {
 	}
 }
 function* handleColorOrWidth$2(match, ctx) {
-	if (isCSSMathFn(h.bracket(match[1]))) yield* handleWidth$2(match);
+	if (isCSSMathFn(h.bracket(match[1], ctx.theme))) yield* handleWidth$2(match, ctx);
 	else {
 		const result = colorResolver("outline-color", "outline")(match, ctx);
 		if (result) for (const i of result) yield i;
@@ -399,15 +399,15 @@ const appearance = [["appearance-auto", {
 	"-webkit-appearance": "none",
 	"appearance": "none"
 }]];
-function willChangeProperty(prop) {
-	const v = h.bracket(prop);
+function willChangeProperty(prop, theme) {
+	const v = h.bracket(prop, theme);
 	if (v && h.properties(v)) return v;
 	return h.properties.auto.cssvar.global(prop) ?? {
 		contents: "contents",
 		scroll: "scroll-position"
 	}[prop];
 }
-const willChange = [[/^will-change-(.+)/, ([, p]) => ({ "will-change": willChangeProperty(p) })]];
+const willChange = [[/^will-change-(.+)/, ([, p], { theme }) => ({ "will-change": willChangeProperty(p, theme) })]];
 const listStyles = {
 	"disc": "disc",
 	"circle": "circle",
@@ -440,8 +440,8 @@ const listStyle = [
 	["list-outside", { "list-style-position": "outside" }],
 	["list-inside", { "list-style-position": "inside" }],
 	["list-none", { "list-style-type": "none" }],
-	[/^list-image-(.+)$/, ([, d]) => {
-		if (/^\[url\(.+\)\]$/.test(d)) return { "list-style-image": h.bracket(d) };
+	[/^list-image-(.+)$/, ([, d], { theme }) => {
+		if (/^\[url\(.+\)\]$/.test(d)) return { "list-style-image": h.bracket(d, theme) };
 	}],
 	["list-image-none", { "list-style-image": "none" }],
 	...makeGlobalStaticRules("list", "list-style-type")
@@ -452,7 +452,7 @@ const accents = [[
 	{ autocomplete: "accent-$colors" }
 ], [
 	/^accent-op(?:acity)?-?(.+)$/,
-	([, d]) => ({ "--un-accent-opacity": h.bracket.percent(d) }),
+	([, d], { theme }) => ({ "--un-accent-opacity": h.bracket.percent(d, theme) }),
 	{ autocomplete: ["accent-(op|opacity)", "accent-(op|opacity)-<percent>"] }
 ]];
 const carets = [[
@@ -461,7 +461,7 @@ const carets = [[
 	{ autocomplete: "caret-$colors" }
 ], [
 	/^caret-op(?:acity)?-?(.+)$/,
-	([, d]) => ({ "--un-caret-opacity": h.bracket.percent(d) }),
+	([, d], { theme }) => ({ "--un-caret-opacity": h.bracket.percent(d, theme) }),
 	{ autocomplete: ["caret-(op|opacity)", "caret-(op|opacity)-<percent>"] }
 ]];
 const imageRenderings = [
@@ -588,19 +588,24 @@ function borderColorResolver(direction) {
 		}
 	};
 }
-function handlerBorderSize([, a = "", b = "1"]) {
-	const v = h.bracket.cssvar.global.px(b);
+function handlerBorderSize([, a = "", b = "1"], { theme }) {
+	const v = h.bracket.bracketOfLength.cssvar.global.px(b, theme);
 	if (a in directionMap && v != null) return directionMap[a].map((i) => [`border${i}-width`, v]);
 }
 function handlerBorderColorOrSize([, a = "", b], ctx) {
 	if (a in directionMap) {
-		if (isCSSMathFn(h.bracket(b))) return handlerBorderSize([
+		if (isCSSMathFn(h.bracket(b, ctx.theme))) return handlerBorderSize([
 			"",
 			a,
 			b
-		]);
-		if (hasParseableColor(b, ctx.theme)) {
-			const directions = directionMap[a].map((i) => borderColorResolver(i)(["", b], ctx)).filter(notNull);
+		], ctx);
+		const bracketColor = h.bracketOfColor(b, ctx.theme);
+		b = bracketColor ?? b;
+		if (bracketColor != null || hasParseableColor(b, ctx.theme)) {
+			const directions = directionMap[a].map((i) => borderColorResolver(i)(["", b], ctx) ?? colorCSSGenerator({
+				color: b,
+				name: "_"
+			}, `border${i}-color`, `border${i}`, ctx)).filter(notNull);
 			return [directions.map((d) => d[0]).reduce((acc, item) => {
 				Object.assign(acc, item);
 				return acc;
@@ -608,14 +613,14 @@ function handlerBorderColorOrSize([, a = "", b], ctx) {
 		}
 	}
 }
-function handlerBorderOpacity([, a = "", opacity]) {
-	const v = h.bracket.percent.cssvar(opacity);
+function handlerBorderOpacity([, a = "", opacity], { theme }) {
+	const v = h.bracket.percent.cssvar(opacity, theme);
 	if (a in directionMap && v != null) return directionMap[a].map((i) => [`--un-border${i}-opacity`, v]);
 }
 function handlerRounded([, a = "", s = "DEFAULT"], { theme }) {
 	if (a in cornerMap) {
 		if (s === "full") return cornerMap[a].map((i) => [`border${i}-radius`, "calc(infinity * 1px)"]);
-		const _v = theme.radius?.[s] ?? h.bracket.cssvar.global.fraction.rem(s);
+		const _v = theme.radius?.[s] ?? h.bracket.cssvar.global.fraction.rem(s, theme);
 		if (_v != null) {
 			const isVar = theme.radius && s in theme.radius;
 			if (isVar) themeTracking(`radius`, s);
@@ -631,7 +636,7 @@ function handlerBorderStyle([, a = "", s]) {
 /**
 * @example op10 op-30 opacity-100
 */
-const opacity = [[/^op(?:acity)?-?(.+)$/, ([, d]) => ({ opacity: h.bracket.percent.cssvar(d) })]];
+const opacity = [[/^op(?:acity)?-?(.+)$/, ([, d], { theme }) => ({ opacity: h.bracket.percent.cssvar(d, theme) })]];
 const bgUrlRE = /^\[url\(.+\)\]$/;
 const bgLengthRE = /^\[(?:length|size):.+\]$/;
 const bgPositionRE = /^\[position:.+\]$/;
@@ -639,27 +644,27 @@ const bgGradientRE = /^\[(?:linear|conic|radial)-gradient\(.+\)\]$/;
 const bgImageRE = /^\[image:.+\]$/;
 const bgColors = [[
 	/^bg-(.+)$/,
-	(...args) => {
-		const d = args[0][1];
+	(match, ctx) => {
+		const d = match[1];
+		const { theme } = ctx;
 		if (bgUrlRE.test(d)) return {
-			"--un-url": h.bracket(d),
+			"--un-url": h.bracket(d, theme),
 			"background-image": "var(--un-url)"
 		};
-		if (bgLengthRE.test(d) && h.bracketOfLength(d) != null) return { "background-size": h.bracketOfLength(d).split(" ").map((e) => h.fraction.auto.px.cssvar(e) ?? e).join(" ") };
-		if ((isSize(d) || bgPositionRE.test(d)) && h.bracketOfPosition(d) != null) return { "background-position": h.bracketOfPosition(d).split(" ").map((e) => h.position.fraction.auto.px.cssvar(e) ?? e).join(" ") };
+		const bracketLength = h.bracketOfLength(d, theme);
+		if (bgLengthRE.test(d) && bracketLength != null) return { "background-size": bracketLength.split(" ").map((e) => h.fraction.auto.px.cssvar(e) ?? e).join(" ") };
+		const bracketPosition = h.bracketOfPosition(d, theme);
+		if ((isSize(d) || bgPositionRE.test(d)) && bracketPosition != null) return { "background-position": bracketPosition.split(" ").map((e) => h.position.fraction.auto.px.cssvar(e) ?? e).join(" ") };
 		if (bgGradientRE.test(d) || bgImageRE.test(d)) {
-			const s = h.bracket(d);
-			if (s) {
-				const url = s.startsWith("http") ? `url(${s})` : h.cssvar(s);
-				return { "background-image": url ?? s };
-			}
+			const s = h.bracket(d, theme);
+			if (s) return { "background-image": (s.startsWith("http") ? `url(${s})` : h.cssvar(s)) ?? s };
 		}
-		return colorResolver("background-color", "bg")(...args);
+		return colorResolver("background-color", "bg")(match, ctx);
 	},
 	{ autocomplete: "bg-$colors" }
 ], [
 	/^bg-op(?:acity)?-?(.+)$/,
-	([, opacity]) => ({ "--un-bg-opacity": h.bracket.percent.cssvar(opacity) }),
+	([, opacity], { theme }) => ({ "--un-bg-opacity": h.bracket.percent.cssvar(opacity, theme) }),
 	{ autocomplete: "bg-(op|opacity)-<percent>" }
 ]];
 const colorScheme = [[/^(?:color-)?scheme-(.+)$/, ([, v]) => ({ "color-scheme": v.split("-").join(" ") })]];
@@ -673,7 +678,7 @@ const columns = [
 				themeTracking("container", v);
 				return { columns: generateThemeVariable("container", v) };
 			}
-			return { columns: h.bracket.numberWithUnit.number.cssvar(v) };
+			return { columns: h.bracket.numberWithUnit.number.cssvar(v, theme) };
 		},
 		{ autocomplete: ["columns-<num>", "columns-$container"] }
 	],
@@ -735,12 +740,12 @@ const textDecorations = [
 	],
 	[
 		/^(?:underline|decoration)-op(?:acity)?-?(.+)$/,
-		([, opacity]) => ({ "--un-line-opacity": h.bracket.percent.cssvar(opacity) }),
+		([, opacity], { theme }) => ({ "--un-line-opacity": h.bracket.percent.cssvar(opacity, theme) }),
 		{ autocomplete: "(underline|decoration)-(op|opacity)-<percent>" }
 	],
 	[
 		/^(?:underline|decoration)-offset-(.+)$/,
-		([, s]) => ({ "text-underline-offset": h.auto.bracket.cssvar.global.px(s) }),
+		([, s], { theme }) => ({ "text-underline-offset": h.auto.bracket.cssvar.global.px(s, theme) }),
 		{ autocomplete: "(underline|decoration)-(offset)-<num>" }
 	],
 	...decorationStyles.map((v) => [`underline-${v}`, { "text-decoration-style": v }]),
@@ -748,11 +753,11 @@ const textDecorations = [
 	["no-underline", { "text-decoration": "none" }],
 	["decoration-none", { "text-decoration": "none" }]
 ];
-function handleWidth$1([, b]) {
-	return { "text-decoration-thickness": h.bracket.cssvar.global.px(b) };
+function handleWidth$1([, b], { theme }) {
+	return { "text-decoration-thickness": h.bracket.cssvar.global.px(b, theme) };
 }
 function handleColorOrWidth$1(match, ctx) {
-	if (isCSSMathFn(h.bracket(match[1]))) return handleWidth$1(match);
+	if (isCSSMathFn(h.bracket(match[1], ctx.theme))) return handleWidth$1(match, ctx);
 	const result = colorResolver("text-decoration-color", "line")(match, ctx);
 	if (result) {
 		const css = result[0];
@@ -816,6 +821,7 @@ const spaces = [[
 function notLastChildSelectorVariant(s) {
 	return {
 		matcher: s,
+		order: 1,
 		handle: (input, next) => next({
 			...input,
 			parent: `${input.parent ? `${input.parent} $$ ` : ""}${input.selector}`,
@@ -829,7 +835,7 @@ function* handlerSpace([m, d, s], { theme, symbols }) {
 	if (num != null) {
 		themeTracking(`spacing`);
 		v = `calc(var(--spacing) * ${num})`;
-	} else v = theme.spacing?.[s] ?? h.bracket.cssvar.auto.fraction.rem(s || "1");
+	} else v = theme.spacing?.[s] ?? h.bracket.cssvar.auto.fraction.rem(s || "1", theme);
 	if (v != null) {
 		const results = directionMap[d === "x" ? "inline" : "block"].map((item, index) => {
 			return [`margin${item}`, `calc(${v} * ${index === 0 ? `var(--un-space-${d}-reverse)` : `calc(1 - var(--un-space-${d}-reverse))`})`];
@@ -863,10 +869,10 @@ const divides = [
 	],
 	[
 		/^divide-op(?:acity)?-?(.+)$/,
-		function* ([match, opacity], { symbols }) {
+		function* ([match, opacity], { symbols, theme }) {
 			yield {
 				[symbols.variants]: [notLastChildSelectorVariant(match)],
-				"--un-divide-opacity": h.bracket.percent(opacity)
+				"--un-divide-opacity": h.bracket.percent(opacity, theme)
 			};
 		},
 		{ autocomplete: ["divide-(op|opacity)", "divide-(op|opacity)-<percent>"] }
@@ -895,8 +901,8 @@ const divides = [
 		{ autocomplete: borderStyles.map((i) => `divide-${i}`) }
 	]
 ];
-function* handlerDivide([m, d, s], { symbols }) {
-	let v = h.bracket.cssvar.px(s || "1");
+function* handlerDivide([m, d, s], { symbols, theme }) {
+	let v = h.bracket.cssvar.px(s || "1", theme);
 	if (v != null) {
 		if (v === "0") v = "0px";
 		const results = {
@@ -945,8 +951,8 @@ const backdropBaseKeys = [
 ];
 const backdropProperties = backdropBaseKeys.map((i) => defineProperty(`--un-${i}`));
 const backdropCSS = backdropBaseKeys.map((i) => `var(--un-${i},)`).join(" ");
-function percentWithDefault(str) {
-	let v = h.bracket.cssvar(str || "");
+function percentWithDefault(str, theme) {
+	let v = h.bracket.cssvar(str || "", theme);
 	if (v != null) return v;
 	v = str ? h.percent(str) : "100%";
 	if (v != null && Number.parseFloat(v.slice(0, -1)) <= 100) return v;
@@ -974,9 +980,9 @@ function dropShadowResolver(match, ctx) {
 		if (s.startsWith("/")) res = ["", s.slice(1)];
 	}
 	let v = theme.dropShadow?.[res[0] || "DEFAULT"];
-	const c = s ? h.bracket.cssvar(s) : void 0;
+	const c = s ? h.bracket.cssvar(s, theme) : void 0;
 	if ((v != null || c != null) && !hasParseableColor(c, theme)) {
-		const alpha = res[1] ? h.bracket.percent.cssvar(res[1]) : void 0;
+		const alpha = res[1] ? h.bracket.percent.cssvar(res[1], theme) : void 0;
 		return [{
 			"--un-drop-shadow-opacity": alpha,
 			"--un-drop-shadow": `drop-shadow(${colorableShadows(v || c, "--un-drop-shadow-color", alpha).join(") drop-shadow(")})`,
@@ -984,7 +990,7 @@ function dropShadowResolver(match, ctx) {
 		}, ...filterProperties];
 	}
 	if (hasParseableColor(s, theme)) return colorResolver("--un-drop-shadow-color", "drop-shadow")(match, ctx);
-	v = h.bracket.cssvar(s) ?? (s === "none" ? "" : void 0);
+	v = h.bracket.cssvar(s, theme) ?? (s === "none" ? "" : void 0);
 	if (v != null) return [{
 		"--un-drop-shadow": v ? `drop-shadow(${v})` : v,
 		"filter": filterCSS
@@ -993,7 +999,7 @@ function dropShadowResolver(match, ctx) {
 const filters = [
 	[
 		/^(?:(backdrop-)|filter-)?blur(?:-(.+))?$/,
-		toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || h.bracket.cssvar.px(s)),
+		toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || h.bracket.cssvar.px(s, theme)),
 		{ autocomplete: [
 			"(backdrop|filter)-blur-$blur",
 			"blur-$blur",
@@ -1002,12 +1008,12 @@ const filters = [
 	],
 	[
 		/^(?:(backdrop-)|filter-)?brightness-(.+)$/,
-		toFilter("brightness", (s) => h.bracket.cssvar.percent(s)),
+		toFilter("brightness", (s, theme) => h.bracket.cssvar.percent(s, theme)),
 		{ autocomplete: ["(backdrop|filter)-brightness-<percent>", "brightness-<percent>"] }
 	],
 	[
 		/^(?:(backdrop-)|filter-)?contrast-(.+)$/,
-		toFilter("contrast", (s) => h.bracket.cssvar.percent(s)),
+		toFilter("contrast", (s, theme) => h.bracket.cssvar.percent(s, theme)),
 		{ autocomplete: ["(backdrop|filter)-contrast-<percent>", "contrast-<percent>"] }
 	],
 	[
@@ -1032,7 +1038,7 @@ const filters = [
 		] }
 	],
 	[/^(?:filter-)?drop-shadow-color-(.+)$/, colorResolver("--un-drop-shadow-color", "drop-shadow")],
-	[/^(?:filter-)?drop-shadow(?:-color)?-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-drop-shadow-opacity": h.bracket.percent(opacity) })],
+	[/^(?:filter-)?drop-shadow(?:-color)?-op(?:acity)?-?(.+)$/, ([, opacity], { theme }) => ({ "--un-drop-shadow-opacity": h.bracket.percent(opacity, theme) })],
 	[
 		/^(?:(backdrop-)|filter-)?grayscale(?:-(.+))?$/,
 		toFilter("grayscale", percentWithDefault),
@@ -1042,7 +1048,7 @@ const filters = [
 			"grayscale-<percent>"
 		] }
 	],
-	[/^(?:(backdrop-)|filter-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s) => h.bracket.cssvar.degree(s))],
+	[/^(?:(backdrop-)|filter-)?hue-rotate-(.+)$/, toFilter("hue-rotate", (s, theme) => h.bracket.cssvar.degree(s, theme))],
 	[
 		/^(?:(backdrop-)|filter-)?invert(?:-(.+))?$/,
 		toFilter("invert", percentWithDefault),
@@ -1054,12 +1060,12 @@ const filters = [
 	],
 	[
 		/^(backdrop-)op(?:acity)?-(.+)$/,
-		toFilter("opacity", (s) => h.bracket.cssvar.percent(s)),
+		toFilter("opacity", (s, theme) => h.bracket.cssvar.percent(s, theme)),
 		{ autocomplete: ["backdrop-(op|opacity)", "backdrop-(op|opacity)-<percent>"] }
 	],
 	[
 		/^(?:(backdrop-)|filter-)?saturate-(.+)$/,
-		toFilter("saturate", (s) => h.bracket.cssvar.percent(s)),
+		toFilter("saturate", (s, theme) => h.bracket.cssvar.percent(s, theme)),
 		{ autocomplete: [
 			"(backdrop|filter)-saturate",
 			"(backdrop|filter)-saturate-<percent>",
@@ -1097,30 +1103,33 @@ const flex = [
 	["flex", { display: "flex" }],
 	["inline-flex", { display: "inline-flex" }],
 	["flex-inline", { display: "inline-flex" }],
-	[/^flex-(.*)$/, ([, d]) => ({ flex: h.bracket(d) != null ? h.bracket(d).split(" ").map((e) => h.cssvar.fraction(e) ?? e).join(" ") : h.cssvar.fraction(d) })],
+	[/^flex-(.*)$/, ([, d], { theme }) => {
+		const value = h.bracket(d, theme);
+		return { flex: value != null ? value.split(" ").map((e) => h.cssvar.fraction(e) ?? e).join(" ") : h.cssvar.fraction(d) };
+	}],
 	["flex-1", { flex: "1 1 0%" }],
 	["flex-auto", { flex: "1 1 auto" }],
 	["flex-initial", { flex: "0 1 auto" }],
 	["flex-none", { flex: "none" }],
 	[
 		/^(?:flex-)?shrink(?:-(.*))?$/,
-		([, d = ""]) => ({ "flex-shrink": h.bracket.cssvar.number(d) ?? 1 }),
+		([, d = ""], { theme }) => ({ "flex-shrink": h.bracket.cssvar.number(d, theme) ?? 1 }),
 		{ autocomplete: ["flex-shrink-<num>", "shrink-<num>"] }
 	],
 	[
 		/^(?:flex-)?grow(?:-(.*))?$/,
-		([, d = ""]) => ({ "flex-grow": h.bracket.cssvar.number(d) ?? 1 }),
+		([, d = ""], { theme }) => ({ "flex-grow": h.bracket.cssvar.number(d, theme) ?? 1 }),
 		{ autocomplete: ["flex-grow-<num>", "grow-<num>"] }
 	],
 	[
 		/^(?:flex-)?basis-(.+)$/,
-		([, d]) => {
+		([, d], { theme }) => {
 			const v = numberResolver(d);
 			if (v != null) {
 				themeTracking(`spacing`);
 				return { "flex-basis": `calc(var(--spacing) * ${v})` };
 			}
-			return { "flex-basis": h.bracket.cssvar.auto.fraction.rem(d) };
+			return { "flex-basis": h.bracket.cssvar.auto.fraction.rem(d, theme) };
 		},
 		{ autocomplete: ["flex-basis-$spacing", "basis-$spacing"] }
 	],
@@ -1163,54 +1172,54 @@ const gaps = [
 function rowCol(s) {
 	return s.replace("col", "column");
 }
-function autoDirection(prop) {
+function autoDirection(prop, theme) {
 	switch (prop) {
 		case "min": return "min-content";
 		case "max": return "max-content";
 		case "fr": return "minmax(0,1fr)";
 	}
-	return h.bracket.cssvar.auto.rem(prop);
+	return h.bracket.cssvar.auto.rem(prop, theme);
 }
 const grids = [
 	["grid", { display: "grid" }],
 	["inline-grid", { display: "inline-grid" }],
-	[/^(?:grid-)?(row|col)-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}`]: h.bracket.number.cssvar.auto(v) })],
+	[/^(?:grid-)?(row|col)-(.+)$/, ([, c, v], { theme }) => ({ [`grid-${rowCol(c)}`]: h.bracket.number.cssvar.auto(v, theme) })],
 	[
 		/^(?:grid-)?(row|col)-span-(.+)$/,
-		([, c, s]) => {
+		([, c, s], { theme }) => {
 			if (s === "full") return { [`grid-${rowCol(c)}`]: "1/-1" };
-			const v = h.bracket.number.cssvar(s);
+			const v = h.bracket.number.cssvar(s, theme);
 			if (v != null) return { [`grid-${rowCol(c)}`]: `span ${v}/span ${v}` };
 		},
 		{ autocomplete: "(grid-row|grid-col|row|col)-span-<num>" }
 	],
-	[/^(?:grid-)?(row|col)-start-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-start`]: h.bracket.cssvar(v) ?? v })],
+	[/^(?:grid-)?(row|col)-start-(.+)$/, ([, c, v], { theme }) => ({ [`grid-${rowCol(c)}-start`]: h.bracket.cssvar(v, theme) ?? v })],
 	[
 		/^(?:grid-)?(row|col)-end-(.+)$/,
-		([, c, v]) => ({ [`grid-${rowCol(c)}-end`]: h.bracket.cssvar(v) ?? v }),
+		([, c, v], { theme }) => ({ [`grid-${rowCol(c)}-end`]: h.bracket.cssvar(v, theme) ?? v }),
 		{ autocomplete: "(grid-row|grid-col|row|col)-(start|end)-<num>" }
 	],
 	[
 		/^(?:grid-)?auto-(rows|cols)-(.+)$/,
-		([, c, v]) => ({ [`grid-auto-${rowCol(c)}`]: autoDirection(v) }),
+		([, c, v], { theme }) => ({ [`grid-auto-${rowCol(c)}`]: autoDirection(v, theme) }),
 		{ autocomplete: "(grid-auto|auto)-(rows|cols)-<num>" }
 	],
-	[/^(?:grid-auto-flow|auto-flow|grid-flow)-(.+)$/, ([, v]) => ({ "grid-auto-flow": h.bracket.cssvar(v) })],
+	[/^(?:grid-auto-flow|auto-flow|grid-flow)-(.+)$/, ([, v], { theme }) => ({ "grid-auto-flow": h.bracket.cssvar(v, theme) })],
 	[
 		/^(?:grid-auto-flow|auto-flow|grid-flow)-(row|col|dense|row-dense|col-dense)$/,
 		([, v]) => ({ "grid-auto-flow": rowCol(v).replace("-", " ") }),
 		{ autocomplete: ["(grid-auto-flow|auto-flow|grid-flow)-(row|col|dense|row-dense|col-dense)"] }
 	],
-	[/^(?:grid-)?(rows|cols)-(.+)$/, ([, c, v]) => ({ [`grid-template-${rowCol(c)}`]: h.bracket.cssvar(v) })],
+	[/^(?:grid-)?(rows|cols)-(.+)$/, ([, c, v], { theme }) => ({ [`grid-template-${rowCol(c)}`]: h.bracket.cssvar(v, theme) })],
 	[/^(?: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))` }),
 		{ autocomplete: "(grid-rows|grid-cols|rows|cols)-<num>" }
 	],
-	[/^grid-area(s)?-(.+)$/, ([, s, v]) => {
-		if (s != null) return { "grid-template-areas": h.cssvar(v) ?? v.split("-").map((s) => `"${h.bracket(s)}"`).join(" ") };
-		return { "grid-area": h.bracket.cssvar(v) };
+	[/^grid-area(s)?-(.+)$/, ([, s, v], { theme }) => {
+		if (s != null) return { "grid-template-areas": h.cssvar(v) ?? v.split("-").map((s) => `"${h.bracket(s, theme)}"`).join(" ") };
+		return { "grid-area": h.bracket.cssvar(v, theme) };
 	}],
 	["grid-rows-none", { "grid-template-rows": "none" }],
 	["grid-cols-none", { "grid-template-columns": "none" }],
@@ -1265,12 +1274,9 @@ const baseMaskImage = {
 	"mask-image": "var(--un-mask-linear), var(--un-mask-radial), var(--un-mask-conic)",
 	"mask-composite": "intersect"
 };
-function handlePosition([, v = ""]) {
-	if (v in cornerMap) {
-		const positions = v.split("").flatMap((c) => linearMap[c]).join(" ");
-		return { "mask-position": positions };
-	}
-	const _v = h.bracket.cssvar.global.position(v);
+function handlePosition([, v = ""], ctx) {
+	if (v in cornerMap) return { "mask-position": v.split("").flatMap((c) => linearMap[c]).join(" ") };
+	const _v = h.bracket.cssvar.global.position(v, ctx?.theme);
 	if (_v !== null) return { "mask-position": _v };
 }
 function handleImage([_, gradient = "", direction, val], ctx) {
@@ -1287,8 +1293,8 @@ function handleImage([_, gradient = "", direction, val], ctx) {
 			css[`--un-mask-${dir}`] = `linear-gradient(to ${dir}, var(--un-mask-${dir}-from-color) var(--un-mask-${dir}-from-position), var(--un-mask-${dir}-to-color) var(--un-mask-${dir}-to-position))`;
 			if (numberResolver(val) != null) {
 				themeTracking("spacing");
-				css[`--un-mask-${dir}-${direction}-position`] = `calc(var(--spacing) * ${h.bracket.cssvar.fraction.number(val)})`;
-			} else css[`--un-mask-${dir}-${direction}-position`] = h.bracket.cssvar.fraction.rem(val);
+				css[`--un-mask-${dir}-${direction}-position`] = `calc(var(--spacing) * ${h.bracket.cssvar.fraction.number(val, ctx.theme)})`;
+			} else css[`--un-mask-${dir}-${direction}-position`] = h.bracket.cssvar.fraction.rem(val, ctx.theme);
 			if (hasParseableColor(val, ctx.theme)) {
 				const result = colorResolver(`--un-mask-${dir}-${direction}-color`, hyphenate("colors"))([_, val], ctx);
 				if (result) {
@@ -1314,10 +1320,10 @@ function handleImage([_, gradient = "", direction, val], ctx) {
 	} else {
 		if (direction == null) if (gradient === "radial") {
 			css["--un-mask-radial"] = "radial-gradient(var(--un-mask-radial-stops, var(--un-mask-radial-size)))";
-			css["--un-mask-radial-size"] = h.bracket.cssvar.rem(val);
+			css["--un-mask-radial-size"] = h.bracket.cssvar.rem(val, ctx.theme);
 		} else {
 			css[`--un-mask-${gradient}`] = `${gradient}-gradient(var(--un-mask-${gradient}-stops, var(--un-mask-${gradient}-position)))`;
-			css[`--un-mask-${gradient}-position`] = numberResolver(val) ? `calc(1deg * ${h.bracket.cssvar.number(val)})` : h.bracket.cssvar.fraction(val);
+			css[`--un-mask-${gradient}-position`] = numberResolver(val) ? `calc(1deg * ${h.bracket.cssvar.number(val, ctx.theme)})` : h.bracket.cssvar.fraction(val, ctx.theme);
 		}
 		else {
 			const gradientStopsPrefixMap = {
@@ -1336,8 +1342,8 @@ function handleImage([_, gradient = "", direction, val], ctx) {
 				}
 			} else if (numberResolver(val) != null) {
 				themeTracking("spacing");
-				css[`--un-mask-${gradient}-${direction}-position`] = `calc(var(--spacing) * ${h.bracket.cssvar.fraction.number(val)})`;
-			} else css[`--un-mask-${gradient}-${direction}-position`] = h.bracket.cssvar.fraction.rem(val);
+				css[`--un-mask-${gradient}-${direction}-position`] = `calc(var(--spacing) * ${h.bracket.cssvar.fraction.number(val, ctx.theme)})`;
+			} else css[`--un-mask-${gradient}-${direction}-position`] = h.bracket.cssvar.fraction.rem(val, ctx.theme);
 		}
 		if (gradient === "radial") props.push(...[defineProperty("--un-mask-radial-shape", { initialValue: "ellipse" }), defineProperty("--un-mask-radial-size", { initialValue: "farthest-corner" })]);
 		props.push(...["from", "to"].flatMap((p) => [
@@ -1354,8 +1360,8 @@ function handleImage([_, gradient = "", direction, val], ctx) {
 	}
 	return [css, ...props];
 }
-function handleSize$1([, v = ""]) {
-	const _v = h.bracket.cssvar.global.fraction.rem(v);
+function handleSize$1([, v = ""], ctx) {
+	const _v = h.bracket.cssvar.global.fraction.rem(v, ctx?.theme);
 	if (_v !== null) return { "mask-size": _v };
 }
 const masks = [
@@ -1370,7 +1376,7 @@ const masks = [
 	["mask-subtract", { "mask-composite": "subtract" }],
 	["mask-intersect", { "mask-composite": "intersect" }],
 	["mask-exclude", { "mask-composite": "exclude" }],
-	[/^mask-(.+)$/, ([, v]) => ({ "mask-image": h.bracket.cssvar(v) })],
+	[/^mask-(.+)$/, ([, v], { theme }) => ({ "mask-image": h.bracket.cssvar(v, theme) })],
 	[
 		/^mask-(linear|radial|conic|[xytblr])-(from|to)()(?:-(.+))?$/,
 		handleImage,
@@ -1432,7 +1438,7 @@ const placeholders = [[
 	{ autocomplete: "placeholder-$colors" }
 ], [
 	/^\$ placeholder-op(?:acity)?-?(.+)$/,
-	([, opacity]) => ({ "--un-placeholder-opacity": h.bracket.percent(opacity) }),
+	([, opacity], { theme }) => ({ "--un-placeholder-opacity": h.bracket.percent(opacity, theme) }),
 	{ autocomplete: ["placeholder-(op|opacity)", "placeholder-(op|opacity)-<percent>"] }
 ]];
 //#endregion
@@ -1482,7 +1488,7 @@ const justifies = [
 	...makeGlobalStaticRules("justify-self")
 ];
 const orders = [
-	[/^order-(.+)$/, ([, v]) => ({ order: h.bracket.cssvar.number(v) })],
+	[/^order-(.+)$/, ([, v], { theme }) => ({ order: h.bracket.cssvar.number(v, theme) })],
 	["order-first", { order: "calc(-infinity)" }],
 	["order-last", { order: "calc(infinity)" }],
 	["order-none", { order: "0" }]
@@ -1558,21 +1564,21 @@ const flexGridJustifiesAlignments = [
 	...alignments,
 	...placements
 ].flatMap(([k, v]) => [[`flex-${k}`, v], [`grid-${k}`, v]]);
-function handleInsetValue(v) {
+function handleInsetValue(v, theme) {
 	const _v = numberResolver(v);
 	if (_v != null) {
 		themeTracking(`spacing`);
 		return `calc(var(--spacing) * ${_v})`;
-	} else return h.bracket.cssvar.global.auto.fraction.rem(v);
+	} else return h.bracket.cssvar.global.auto.fraction.rem(v, theme);
 }
-function handleInsetValues([, d, v]) {
-	const r = handleInsetValue(v);
+function handleInsetValues([, d, v], { theme }) {
+	const r = handleInsetValue(v, theme);
 	if (r != null && d in insetMap) return insetMap[d].map((i) => [i.slice(1), r]);
 }
 const insets = [
 	[
 		/^(?:position-|pos-)?inset-(.+)$/,
-		([, v]) => ({ inset: handleInsetValue(v) }),
+		([, v], { theme }) => ({ inset: handleInsetValue(v, theme) }),
 		{ autocomplete: [
 			"(position|pos)-inset-<directions>-$spacing",
 			"(position|pos)-inset-(block|inline)-$spacing",
@@ -1585,7 +1591,7 @@ const insets = [
 	[/^(?: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], { theme }) => ({ [d]: handleInsetValue(v, theme) })]
 ];
 const floats = [
 	["float-left", { float: "left" }],
@@ -1604,7 +1610,7 @@ const floats = [
 ];
 const zIndexes = [[/^(?:position-|pos-)?z([\d.]+)$/, ([, v]) => ({ "z-index": h.number(v) })], [
 	/^(?:position-|pos-)?z-(.+)$/,
-	([, v]) => ({ "z-index": h.bracket.cssvar.global.auto.number(v) }),
+	([, v], { theme }) => ({ "z-index": h.bracket.cssvar.global.auto.number(v, theme) }),
 	{ autocomplete: "z-<num>" }
 ]];
 const boxSizing = [
@@ -1649,7 +1655,7 @@ const boxShadows = [
 	],
 	[
 		/^shadow-op(?:acity)?-?(.+)$/,
-		([, opacity]) => ({ "--un-shadow-opacity": h.bracket.percent.cssvar(opacity) }),
+		([, opacity], { theme }) => ({ "--un-shadow-opacity": h.bracket.percent.cssvar(opacity, theme) }),
 		{ autocomplete: "shadow-(op|opacity)-<percent>" }
 	],
 	[
@@ -1659,7 +1665,7 @@ const boxShadows = [
 	],
 	[
 		/^inset-shadow-op(?:acity)?-?(.+)$/,
-		([, opacity]) => ({ "--un-inset-shadow-opacity": h.bracket.percent.cssvar(opacity) }),
+		([, opacity], { theme }) => ({ "--un-inset-shadow-opacity": h.bracket.percent.cssvar(opacity, theme) }),
 		{ autocomplete: "shadow-(op|opacity)-<percent>" }
 	]
 ];
@@ -1673,10 +1679,10 @@ function handleShadow(themeKey) {
 			if (d.startsWith("/")) res = ["", d.slice(1)];
 		}
 		const v = theme[themeKey]?.[res[0] || "DEFAULT"];
-		const c = d ? h.bracket.cssvar(d) : void 0;
+		const c = d ? h.bracket.cssvar(d, theme) : void 0;
 		const shadowVar = hyphenate(themeKey);
 		if ((v != null || c != null) && !hasParseableColor(c, theme)) {
-			const alpha = res[1] ? h.bracket.percent.cssvar(res[1]) : void 0;
+			const alpha = res[1] ? h.bracket.percent.cssvar(res[1], theme) : void 0;
 			return [{
 				[`--un-${shadowVar}-opacity`]: alpha,
 				[`--un-${shadowVar}`]: colorableShadows(v || c, `--un-${shadowVar}-color`, alpha).join(","),
@@ -1689,8 +1695,8 @@ function handleShadow(themeKey) {
 //#endregion
 //#region src/rules/ring.ts
 const rings = [
-	[/^ring(?:-(.+))?$/, ([, d]) => {
-		const v = h.bracket.px(d || "1");
+	[/^ring(?:-(.+))?$/, ([, d], { theme }) => {
+		const v = h.bracket.px(d || "1", theme);
 		if (v != null) return [{
 			"--un-ring-shadow": `var(--un-ring-inset,) 0 0 0 calc(${v} + var(--un-ring-offset-width)) var(--un-ring-color, currentColor)`,
 			"box-shadow": "var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)"
@@ -1703,11 +1709,11 @@ const rings = [
 	],
 	[
 		/^ring-op(?:acity)?-?(.+)$/,
-		([, opacity]) => ({ "--un-ring-opacity": h.bracket.percent.cssvar(opacity) }),
+		([, opacity], { theme }) => ({ "--un-ring-opacity": h.bracket.percent.cssvar(opacity, theme) }),
 		{ autocomplete: "ring-(op|opacity)-<percent>" }
 	],
-	[/^inset-ring(?:-(.+))?$/, ([, d]) => {
-		const v = h.bracket.px(d || "1");
+	[/^inset-ring(?:-(.+))?$/, ([, d], { theme }) => {
+		const v = h.bracket.px(d || "1", theme);
 		if (v != null) return [{
 			"--un-inset-ring-shadow": `inset 0 0 0 ${v} var(--un-inset-ring-color, currentColor)`,
 			"box-shadow": "var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)"
@@ -1720,13 +1726,13 @@ const rings = [
 	],
 	[
 		/^inset-ring-op(?:acity)?-?(.+)$/,
-		([, opacity]) => ({ "--un-inset-ring-opacity": h.bracket.percent.cssvar(opacity) }),
+		([, opacity], { theme }) => ({ "--un-inset-ring-opacity": h.bracket.percent.cssvar(opacity, theme) }),
 		{ autocomplete: "inset-ring-(op|opacity)-<percent>" }
 	],
 	[
 		/^ring-offset(?:-(?:width-|size-)?(.+))?$/,
-		([, d]) => {
-			const v = h.bracket.cssvar.px(d || "1");
+		([, d], { theme }) => {
+			const v = h.bracket.cssvar.px(d || "1", theme);
 			if (v != null) return {
 				"--un-ring-offset-width": v,
 				"--un-ring-offset-shadow": "var(--un-ring-inset,) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color)"
@@ -1741,7 +1747,7 @@ const rings = [
 	],
 	[
 		/^ring-offset-op(?:acity)?-?(.+)$/,
-		([, opacity]) => ({ "--un-ring-offset-opacity": h.bracket.percent.cssvar(opacity) }),
+		([, opacity], { theme }) => ({ "--un-ring-offset-opacity": h.bracket.percent.cssvar(opacity, theme) }),
 		{ autocomplete: "ring-offset-(op|opacity)-<percent>" }
 	],
 	["ring-inset", { "--un-ring-inset": "inset" }]
@@ -1858,17 +1864,17 @@ function handleBreakpoint(context, point, key = "breakpoint") {
 	const bp = resolveBreakpoints(context, key);
 	if (bp) return bp.find((i) => i.point === point)?.size;
 }
-function getAspectRatio(prop) {
+function getAspectRatio(prop, theme) {
 	if (/^\d+\/\d+$/.test(prop)) return prop;
 	switch (prop) {
 		case "square": return "1/1";
 		case "video": return "16/9";
 	}
-	return h.bracket.cssvar.global.auto.number(prop);
+	return h.bracket.cssvar.global.auto.number(prop, theme);
 }
 const aspectRatio = [[
 	/^(?:size-)?aspect-(?:ratio-)?(.+)$/,
-	([, d]) => ({ "aspect-ratio": getAspectRatio(d) }),
+	([, d], { theme }) => ({ "aspect-ratio": getAspectRatio(d, theme) }),
 	{ autocomplete: ["aspect-(square|video|ratio)", "aspect-ratio-(square|video)"] }
 ]];
 //#endregion
@@ -1925,7 +1931,7 @@ const displays = [
 	["flow-root", { display: "flow-root" }],
 	["list-item", { display: "list-item" }],
 	["hidden", { display: "none" }],
-	[/^display-(.+)$/, ([, c]) => ({ display: h.bracket.cssvar.global(c) })]
+	[/^display-(.+)$/, ([, c], { theme }) => ({ display: h.bracket.cssvar.global(c, theme) })]
 ];
 const appearances = [
 	["visible", { visibility: "visible" }],
@@ -1935,10 +1941,11 @@ const appearances = [
 	["backface-hidden", { "backface-visibility": "hidden" }],
 	...makeGlobalStaticRules("backface", "backface-visibility")
 ];
-const cursors = [[/^cursor-(.+)$/, ([, c]) => ({ cursor: h.bracket.cssvar.global(c) })], ...cursorValues.map((v) => [`cursor-${v}`, { cursor: v }])];
+const cursors = [[/^cursor-(.+)$/, ([, c], { theme }) => ({ cursor: h.bracket.cssvar.global(c, theme) })], ...cursorValues.map((v) => [`cursor-${v}`, { cursor: v }])];
 const contains = [
-	[/^contain-(.*)$/, ([, d]) => {
-		if (h.bracket(d) != null) return { contain: h.bracket(d).split(" ").map((e) => h.cssvar.fraction(e) ?? e).join(" ") };
+	[/^contain-(.*)$/, ([, d], { theme }) => {
+		const value = h.bracket(d, theme);
+		if (value != null) return { contain: value.split(" ").map((e) => h.cssvar.fraction(e) ?? e).join(" ") };
 		return containValues.includes(d) ? [{
 			"--un-contain-size": d,
 			"contain": containValues.map((i) => `var(--un-contain-${i})`).join(" ")
@@ -1995,13 +2002,13 @@ const whitespaces = [[
 const contentVisibility = [
 	[
 		/^intrinsic(?:-(block|inline|w|h))?(?:-size)?-(.+)$/,
-		([, d, s]) => {
+		([, d, s], { theme }) => {
 			return { [`contain-intrinsic-${{
 				block: "block-size",
 				inline: "inline-size",
 				w: "width",
 				h: "height"
-			}[d] ?? "size"}`]: h.bracket.cssvar.global.fraction.rem(s) };
+			}[d] ?? "size"}`]: h.bracket.cssvar.global.fraction.rem(s, theme) };
 		},
 		{ autocomplete: [
 			"intrinsic-size-<num>",
@@ -2015,9 +2022,9 @@ const contentVisibility = [
 	...makeGlobalStaticRules("content-visibility")
 ];
 const contents = [
-	[/^content-(.+)$/, ([, v]) => {
-		if (h.bracket.cssvar(v) != null) return [{
-			"--un-content": h.bracket.cssvar(v),
+	[/^content-(.+)$/, ([, v], { theme }) => {
+		if (h.bracket.cssvar(v, theme) != null) return [{
+			"--un-content": h.bracket.cssvar(v, theme),
 			"content": "var(--un-content)"
 		}, defineProperty("--un-content", { initialValue: "\"\"" })];
 	}],
@@ -2140,9 +2147,10 @@ const objectPositions = [
 	["object-none", { "object-fit": "none" }],
 	[
 		/^object-(.+)$/,
-		([, d]) => {
+		([, d], { theme }) => {
 			if (positionMap[d]) return { "object-position": positionMap[d] };
-			if (h.bracketOfPosition(d) != null) return { "object-position": h.bracketOfPosition(d).split(" ").map((e) => h.position.fraction.auto.px.cssvar(e) ?? e).join(" ") };
+			const position = h.bracketOfPosition(d, theme);
+			if (position != null) return { "object-position": position.split(" ").map((e) => h.position.fraction.auto.px.cssvar(e) ?? e).join(" ") };
 		},
 		{ autocomplete: `object-(${Object.keys(positionMap).join("|")})` }
 	]
@@ -2209,17 +2217,17 @@ const svgUtilities = [
 	],
 	[
 		/^fill-op(?:acity)?-?(.+)$/,
-		([, opacity]) => ({ "--un-fill-opacity": h.bracket.percent.cssvar(opacity) }),
+		([, opacity], { theme }) => ({ "--un-fill-opacity": h.bracket.percent.cssvar(opacity, theme) }),
 		{ autocomplete: "fill-(op|opacity)-<percent>" }
 	],
 	["fill-none", { fill: "none" }],
 	[/^stroke-(?:width-|size-)?(.+)$/, handleWidth],
 	[
 		/^stroke-dash-(.+)$/,
-		([, s]) => ({ "stroke-dasharray": h.bracket.cssvar.number(s) }),
+		([, s], { theme }) => ({ "stroke-dasharray": h.bracket.cssvar.number(s, theme) }),
 		{ autocomplete: "stroke-dash-<num>" }
 	],
-	[/^stroke-offset-(.+)$/, ([, s]) => ({ "stroke-dashoffset": h.bracket.cssvar.px.numberWithUnit(s) })],
+	[/^stroke-offset-(.+)$/, ([, s], { theme }) => ({ "stroke-dashoffset": h.bracket.cssvar.px.numberWithUnit(s, theme) })],
 	[
 		/^stroke-(.+)$/,
 		handleColorOrWidth,
@@ -2227,7 +2235,7 @@ const svgUtilities = [
 	],
 	[
 		/^stroke-op(?:acity)?-?(.+)$/,
-		([, opacity]) => ({ "--un-stroke-opacity": h.bracket.percent.cssvar(opacity) }),
+		([, opacity], { theme }) => ({ "--un-stroke-opacity": h.bracket.percent.cssvar(opacity, theme) }),
 		{ autocomplete: "stroke-(op|opacity)-<percent>" }
 	],
 	["stroke-cap-square", { "stroke-linecap": "square" }],
@@ -2240,11 +2248,11 @@ const svgUtilities = [
 	["stroke-join-auto", { "stroke-linejoin": "miter" }],
 	["stroke-none", { stroke: "none" }]
 ];
-function handleWidth([, b]) {
-	return { "stroke-width": h.bracket.cssvar.fraction.px.number(b) };
+function handleWidth([, b], { theme }) {
+	return { "stroke-width": h.bracket.cssvar.fraction.px.number(b, theme) };
 }
 function handleColorOrWidth(match, ctx) {
-	if (isCSSMathFn(h.bracket(match[1]))) return handleWidth(match);
+	if (isCSSMathFn(h.bracket(match[1], ctx.theme))) return handleWidth(match, ctx);
 	return colorResolver("stroke", "stroke")(match, ctx);
 }
 //#endregion
@@ -2311,7 +2319,7 @@ function resolveValue(s, theme) {
 		if (num != null) {
 			themeTracking(`spacing`);
 			v = `calc(var(--spacing) * ${num})`;
-		} else v = h.bracket.cssvar.global.auto.fraction.rem(s);
+		} else v = h.bracket.cssvar.global.auto.fraction.rem(s, theme);
 	}
 	return v;
 }
@@ -2383,7 +2391,7 @@ const transformBase = {
 const transforms = [
 	[
 		/^(?:transform-)?origin-(.+)$/,
-		([, s]) => ({ "transform-origin": positionMap[s] ?? h.bracket.cssvar(s) }),
+		([, s], { theme }) => ({ "transform-origin": positionMap[s] ?? h.bracket.cssvar(s, theme) }),
 		{ autocomplete: [`transform-origin-(${Object.keys(positionMap).join("|")})`, `origin-(${Object.keys(positionMap).join("|")})`] }
 	],
 	[
@@ -2393,7 +2401,7 @@ const transforms = [
 			if (theme.perspective?.[s]) {
 				themeTracking(`perspective`, s);
 				v = generateThemeVariable("perspective", s);
-			} else v = h.bracket.cssvar.px.numberWithUnit(s);
+			} else v = h.bracket.cssvar.px.numberWithUnit(s, theme);
 			if (v != null) {
 				if (t) return {
 					"--un-perspective": `perspective(${v})`,
@@ -2404,8 +2412,8 @@ const transforms = [
 		},
 		{ autocomplete: [`perspective-<num>`, `perspective-$perspective`] }
 	],
-	[/^(?:transform-)?perspect(?:ive)?-origin-(.+)$/, ([, s]) => {
-		const v = h.bracket.cssvar(s) ?? (s.length >= 3 ? positionMap[s] : void 0);
+	[/^(?:transform-)?perspect(?:ive)?-origin-(.+)$/, ([, s], { theme }) => {
+		const v = h.bracket.cssvar(s, theme) ?? (s.length >= 3 ? positionMap[s] : void 0);
 		if (v != null) return { "perspective-origin": v };
 	}],
 	[/^(?:transform-)?translate-()(.+)$/, handleTranslate],
@@ -2438,8 +2446,8 @@ const transforms = [
 	["transform-none", { transform: "none" }],
 	...makeGlobalStaticRules("transform")
 ];
-function handleTranslate([, d, b]) {
-	const v = numberResolver(b) ?? h.bracket.cssvar.none.fraction.rem(b);
+function handleTranslate([, d, b], { theme }) {
+	const v = numberResolver(b) ?? h.bracket.cssvar.none.fraction.rem(b, theme);
 	if (v != null) {
 		if (v === "none") return { translate: "none" };
 		themeTracking(`spacing`);
@@ -2454,8 +2462,8 @@ function handleTranslate([, d, b]) {
 		].map((d) => defineProperty(`--un-translate-${d}`, { initialValue: 0 }))];
 	}
 }
-function handleScale([, d, b]) {
-	const v = h.bracket.cssvar.none.fraction.percent(b);
+function handleScale([, d, b], { theme }) {
+	const v = h.bracket.cssvar.none.fraction.percent(b, theme);
 	if (v != null) {
 		if (v === "none") return { scale: "none" };
 		return [[...transformXYZ(d, v, "scale"), ["scale", `var(--un-scale-x) var(--un-scale-y)${d === "z" ? " var(--un-scale-z)" : ""}`]], ...[
@@ -2465,8 +2473,8 @@ function handleScale([, d, b]) {
 		].map((d) => defineProperty(`--un-scale-${d}`, { initialValue: 1 }))];
 	}
 }
-function handleRotate([, d = "", b]) {
-	const v = h.bracket.cssvar.none.degree(b);
+function handleRotate([, d = "", b], { theme }) {
+	const v = h.bracket.cssvar.none.degree(b, theme);
 	if (v != null) {
 		if (v === "none") return { rotate: "none" };
 		if (d) return [
@@ -2478,11 +2486,11 @@ function handleRotate([, d = "", b]) {
 			].map((d) => defineProperty(`--un-rotate-${d}`, { initialValue: `rotate${d.toUpperCase()}(0)` })),
 			...["x", "y"].map((d) => defineProperty(`--un-skew-${d}`, { initialValue: `skew${d.toUpperCase()}(0)` }))
 		];
-		else return { rotate: h.bracket.cssvar.degree(b) };
+		else return { rotate: h.bracket.cssvar.degree(b, theme) };
 	}
 }
-function handleSkew([, d, b]) {
-	const v = h.bracket.cssvar.degree(b);
+function handleSkew([, d, b], { theme }) {
+	const v = h.bracket.cssvar.degree(b, theme);
 	const ds = xyzMap[d];
 	if (v != null && ds) return [
 		[...ds.map((_d) => [`--un-skew${_d}`, v.endsWith("deg") ? `skew${_d.slice(1).toUpperCase()}(${v})` : v]), ["transform", transform]],
@@ -2533,11 +2541,11 @@ const transitions = [
 			...defaultTransition
 		};
 	}],
-	[/^(?:transition-)?duration-(.+)$/, ([, d]) => ({
-		"--un-duration": h.bracket.cssvar.time(d),
-		"transition-duration": h.bracket.cssvar.time(d)
+	[/^(?:transition-)?duration-(.+)$/, ([, d], { theme }) => ({
+		"--un-duration": h.bracket.cssvar.time(d, theme),
+		"transition-duration": h.bracket.cssvar.time(d, theme)
 	})],
-	[/^(?:transition-)?delay-(.+)$/, ([, d]) => ({ "transition-delay": h.bracket.cssvar.time(d) })],
+	[/^(?:transition-)?delay-(.+)$/, ([, d], { theme }) => ({ "transition-delay": h.bracket.cssvar.time(d, theme) })],
 	[
 		/^(?:transition-)?ease(?:-(.+))?$/,
 		([, d = "DEFAULT"], { theme }) => {
@@ -2545,7 +2553,7 @@ const transitions = [
 			if (theme.ease?.[d]) {
 				themeTracking("ease", d);
 				v = generateThemeVariable("ease", d);
-			} else v = h.bracket.cssvar(d);
+			} else v = h.bracket.cssvar(d, theme);
 			return [{
 				"--un-ease": v,
 				"transition-timing-function": v
@@ -2592,7 +2600,7 @@ const fonts = [
 	],
 	[
 		/^(?:text|color|c)-op(?:acity)?-?(.+)$/,
-		([, opacity]) => ({ "--un-text-opacity": h.bracket.percent.cssvar(opacity) }),
+		([, opacity], { theme }) => ({ "--un-text-opacity": h.bracket.percent.cssvar(opacity, theme) }),
 		{ autocomplete: "(text|color|c)-(op|opacity)-<percent>" }
 	],
 	[
@@ -2602,7 +2610,7 @@ const fonts = [
 			if (theme.fontWeight?.[s]) {
 				themeTracking(`fontWeight`, s);
 				v = generateThemeVariable("fontWeight", s);
-			} else v = h.bracket.cssvar.global.number(s);
+			} else v = h.bracket.cssvar.global.number(s, theme);
 			return {
 				"--un-font-weight": v,
 				"font-weight": v
@@ -2620,7 +2628,7 @@ const fonts = [
 			} else if (numberResolver(s)) {
 				themeTracking("spacing");
 				v = `calc(var(--spacing) * ${numberResolver(s)})`;
-			} else v = h.bracket.cssvar.global.rem(s);
+			} else v = h.bracket.cssvar.global.rem(s, theme);
 			if (v != null) return [{
 				"--un-leading": v,
 				"line-height": v
@@ -2632,7 +2640,7 @@ const fonts = [
 	["font-synthesis-style", { "font-synthesis": "style" }],
 	["font-synthesis-small-caps", { "font-synthesis": "small-caps" }],
 	["font-synthesis-none", { "font-synthesis": "none" }],
-	[/^font-synthesis-(.+)$/, ([, s]) => ({ "font-synthesis": h.bracket.cssvar.global(s) })],
+	[/^font-synthesis-(.+)$/, ([, s], { theme }) => ({ "font-synthesis": h.bracket.cssvar.global(s, theme) })],
 	[
 		/^(?:font-)?tracking-(.+)$/,
 		([, s], { theme }) => {
@@ -2640,7 +2648,7 @@ const fonts = [
 			if (theme.tracking?.[s]) {
 				themeTracking(`tracking`, s);
 				v = generateThemeVariable("tracking", s);
-			} else v = h.bracket.cssvar.global.rem(s);
+			} else v = h.bracket.cssvar.global.rem(s, theme);
 			return {
 				"--un-tracking": v,
 				"letter-spacing": v
@@ -2651,7 +2659,7 @@ const fonts = [
 	[
 		/^(?:font-)?word-spacing-(.+)$/,
 		([, s], { theme }) => {
-			const v = theme.tracking?.[s] ? generateThemeVariable("tracking", s) : h.bracket.cssvar.global.rem(s);
+			const v = theme.tracking?.[s] ? generateThemeVariable("tracking", s) : h.bracket.cssvar.global.rem(s, theme);
 			return {
 				"--un-word-spacing": v,
 				"word-spacing": v
@@ -2670,7 +2678,7 @@ const fonts = [
 	["font-stretch-ultra-expanded", { "font-stretch": "ultra-expanded" }],
 	[
 		/^font-stretch-(.+)$/,
-		([, s]) => ({ "font-stretch": h.bracket.cssvar.fraction.global(s) }),
+		([, s], { theme }) => ({ "font-stretch": h.bracket.cssvar.fraction.global(s, theme) }),
 		{ autocomplete: "font-stretch-<percentage>" }
 	],
 	[
@@ -2695,12 +2703,12 @@ const fonts = [
 				"--un-font-weight": v,
 				"font-weight": v
 			};
-			v = h.bracketOfFamily(d);
+			v = h.bracketOfFamily(d, theme);
 			if (v != null && h.number(v) == null) {
 				v = h.cssvar(v) ?? v;
 				return { "font-family": v };
 			}
-			v = h.bracketOfNumber(d);
+			v = h.bracketOfNumber(d, theme);
 			if (v != null) {
 				v = h.cssvar.number(v);
 				return {
@@ -2708,7 +2716,7 @@ const fonts = [
 					"font-weight": v
 				};
 			}
-			v = h.bracket(d);
+			v = h.bracket(d, theme);
 			if (v != null && h.number(v) != null) {
 				const num = h.number(v);
 				return {
@@ -2716,27 +2724,27 @@ const fonts = [
 					"font-weight": num
 				};
 			}
-			v = h.bracket.cssvar.global(d);
+			v = h.bracket.cssvar.global(d, theme);
 			if (v != null) return { "font-family": v };
 		},
 		{ autocomplete: ["font-$font", "font-$fontWeight"] }
 	]
 ];
-const tabSizes = [[/^tab(?:-(.+))?$/, ([, s]) => {
-	const v = h.bracket.cssvar.global.number(s || "4");
+const tabSizes = [[/^tab(?:-(.+))?$/, ([, s], { theme }) => {
+	const v = h.bracket.cssvar.global.number(s || "4", theme);
 	if (v != null) return {
 		"-moz-tab-size": v,
 		"-o-tab-size": v,
 		"tab-size": v
 	};
 }]];
-const textIndents = [[/^indent-(.+)$/, ([, s]) => {
+const textIndents = [[/^indent-(.+)$/, ([, s], { theme }) => {
 	let v = numberResolver(s);
 	if (v != null) {
 		themeTracking(`spacing`);
 		return { "text-indent": `calc(var(--spacing) * ${v})` };
 	}
-	v = h.bracket.cssvar.auto.global.rem(s);
+	v = h.bracket.cssvar.auto.global.rem(s, theme);
 	if (v != null) return { "text-indent": v };
 }]];
 const textStrokes = [
@@ -2744,7 +2752,7 @@ const textStrokes = [
 		/^text-stroke(?:-(.+))?$/,
 		([, s = "DEFAULT"], { theme }) => {
 			if (theme.textStrokeWidth?.[s]) themeTracking(`textStrokeWidth`, s);
-			return { "-webkit-text-stroke-width": theme.textStrokeWidth?.[s] ? generateThemeVariable("textStrokeWidth", s) : h.bracket.cssvar.px(s) };
+			return { "-webkit-text-stroke-width": theme.textStrokeWidth?.[s] ? generateThemeVariable("textStrokeWidth", s) : h.bracket.cssvar.px(s, theme) };
 		},
 		{ autocomplete: "text-stroke-$textStrokeWidth" }
 	],
@@ -2755,7 +2763,7 @@ const textStrokes = [
 	],
 	[
 		/^text-stroke-op(?:acity)?-?(.+)$/,
-		([, opacity]) => ({ "--un-text-stroke-opacity": h.bracket.percent.cssvar(opacity) }),
+		([, opacity], { theme }) => ({ "--un-text-stroke-opacity": h.bracket.percent.cssvar(opacity, theme) }),
 		{ autocomplete: "text-stroke-(op|opacity)-<percent>" }
 	]
 ];
@@ -2765,16 +2773,16 @@ function handleTextShadow(match, ctx) {
 	let res = [];
 	if (s) res = getStringComponents(s, "/", 2) ?? [];
 	const v = theme.textShadow?.[res[0]];
-	const c = s ? h.bracket.cssvar(s) : void 0;
+	const c = s ? h.bracket.cssvar(s, theme) : void 0;
 	if ((v != null || c != null) && !hasParseableColor(c, theme)) {
-		const alpha = res[1] ? h.bracket.percent.cssvar(res[1]) : void 0;
+		const alpha = res[1] ? h.bracket.percent.cssvar(res[1], theme) : void 0;
 		return {
 			"--un-text-shadow-opacity": alpha,
 			"--un-text-shadow": colorableShadows(v || c, "--un-text-shadow-color", alpha).join(","),
 			"text-shadow": "var(--un-text-shadow)"
 		};
 	}
-	return colorResolver("--un-text-shadow-color", "text-shadow")(match, ctx) ?? { "text-shadow": h.bracket.cssvar.global(s) };
+	return colorResolver("--un-text-shadow-color", "text-shadow")(match, ctx) ?? { "text-shadow": h.bracket.cssvar.global(s, theme) };
 }
 const textShadows = [
 	[
@@ -2793,7 +2801,7 @@ const textShadows = [
 	],
 	[
 		/^text-shadow(?:-color)?-op(?:acity)?-?(.+)$/,
-		([, opacity]) => ({ "--un-text-shadow-opacity": h.bracket.percent.cssvar(opacity) }),
+		([, opacity], { theme }) => ({ "--un-text-shadow-opacity": h.bracket.percent.cssvar(opacity, theme) }),
 		{ autocomplete: "text-shadow(-color)?-(op|opacity)-<percent>" }
 	]
 ];
@@ -2849,7 +2857,7 @@ function handleText([, s = "base"], { theme }) {
 	if (leading) if (theme.leading?.[leading]) {
 		themeTracking(`leading`, leading);
 		lineHeight = generateThemeVariable("leading", leading);
-	} else lineHeight = h.bracket.cssvar.global.rem(leading);
+	} else lineHeight = h.bracket.cssvar.global.rem(leading, theme);
 	if (sizePairs) {
 		themeTracking(`text`, [size, "fontSize"]);
 		themeTracking(`text`, [size, "lineHeight"]);
@@ -2860,12 +2868,12 @@ function handleText([, s = "base"], { theme }) {
 			"letter-spacing": sizePairs.letterSpacing ? generateThemeVariable("text", [size, "letterSpacing"]) : void 0
 		};
 	}
-	const fontSize = h.bracketOfLength.rem(size);
+	const fontSize = h.bracketOfLength.rem(size, theme);
 	if (lineHeight && fontSize) return {
 		"font-size": fontSize,
 		"line-height": lineHeight
 	};
-	return { "font-size": h.bracketOfLength.rem(s) };
+	return { "font-size": h.bracketOfLength.rem(s, theme) };
 }
 function handleSize([, s], { theme }) {
 	if (theme.text?.[s] != null) {
@@ -2876,12 +2884,12 @@ function handleSize([, s], { theme }) {
 			"line-height": `var(--un-leading, ${generateThemeVariable("text", [s, "lineHeight"])})`
 		};
 	} else {
-		const d = h.bracket.cssvar.global.rem(s);
+		const d = h.bracket.cssvar.global.rem(s, theme);
 		if (d) return { "font-size": d };
 	}
 }
 function handlerColorOrSize(match, ctx) {
-	if (isCSSMathFn(h.bracket(match[1]))) return handleSize(match, ctx);
+	if (isCSSMathFn(h.bracket(match[1], ctx.theme))) return handleSize(match, ctx);
 	return colorResolver("color", "text")(match, ctx);
 }
 function splitShorthand(body, type) {