@unocss/language-server 66.6.7 → 66.7.0-beta.1

package/dist/index.mjs

@@ -1,16 +1,39 @@
-import { n as __require$1, r as __toESM, t as __commonJSMin } from "./chunk-CBBoxR_p.mjs";
-import { a as join, i as isAbsolute, n as searchForIcon, o as resolve$1, t as loadIcon } from "./loader-DsXvVy9i.mjs";
+import { n as searchForIcon, t as loadIcon } from "./loader-Cc0WuaWv.mjs";
 import { createRequire } from "node:module";
 import { BetterMap, LAYER_IMPORTS, clone, createGenerator, createNanoEvents, cssIdRE, defaultSplitRE, definePreset, escapeRegExp, escapeSelector, isAttributifySelector, isString, isValidSelector, mergeDeep, notNull, splitWithVariantGroupRE, symbols, toArray, uniq, warnOnce } from "@unocss/core";
 import { existsSync } from "node:fs";
 import { readdir } from "node:fs/promises";
 import path from "node:path";
-import process$1 from "node:process";
-import { createRecoveryConfigLoader } from "@unocss/config";
 import presetWind3 from "@unocss/preset-wind3";
 import { sourceObjectFields, sourcePluginFactory } from "unconfig/presets";
+import process$1 from "node:process";
+import { createRecoveryConfigLoader } from "@unocss/config";
+import { colordx } from "@colordx/core";
 import parserCSS from "prettier/parser-postcss";
 import prettier from "prettier/standalone";
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports);
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp$1(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp$1(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __require$1 = /* @__PURE__ */ createRequire(import.meta.url);
 const SKIP_START_COMMENT = "@unocss-skip-start";
 const SKIP_END_COMMENT = "@unocss-skip-end";
 const SKIP_COMMENT_RE = new RegExp(`(\/\/\\s*?${SKIP_START_COMMENT}\\s*?|\\/\\*\\s*?${SKIP_START_COMMENT}\\s*?\\*\\/|<!--\\s*?${SKIP_START_COMMENT}\\s*?-->)[\\s\\S]*?(\/\/\\s*?${SKIP_END_COMMENT}\\s*?|\\/\\*\\s*?${SKIP_END_COMMENT}\\s*?\\*\\/|<!--\\s*?${SKIP_END_COMMENT}\\s*?-->)`, "g");
@@ -1224,10 +1247,124 @@ function getMatchedPositionsFromDoc(uno, code, id, strictAnnotationMatch = false
 	return result;
 }
 //#endregion
-//#region ../../node_modules/.pnpm/picomatch@4.0.3/node_modules/picomatch/lib/constants.js
+//#region ../../node_modules/.pnpm/pathe@2.0.3/node_modules/pathe/dist/shared/pathe.M-eThtNZ.mjs
+const _DRIVE_LETTER_START_RE = /^[A-Za-z]:\//;
+function normalizeWindowsPath(input = "") {
+	if (!input) return input;
+	return input.replace(/\\/g, "/").replace(_DRIVE_LETTER_START_RE, (r) => r.toUpperCase());
+}
+const _UNC_REGEX = /^[/\\]{2}/;
+const _IS_ABSOLUTE_RE = /^[/\\](?![/\\])|^[/\\]{2}(?!\.)|^[A-Za-z]:[/\\]/;
+const _DRIVE_LETTER_RE = /^[A-Za-z]:$/;
+const normalize = function(path) {
+	if (path.length === 0) return ".";
+	path = normalizeWindowsPath(path);
+	const isUNCPath = path.match(_UNC_REGEX);
+	const isPathAbsolute = isAbsolute(path);
+	const trailingSeparator = path[path.length - 1] === "/";
+	path = normalizeString(path, !isPathAbsolute);
+	if (path.length === 0) {
+		if (isPathAbsolute) return "/";
+		return trailingSeparator ? "./" : ".";
+	}
+	if (trailingSeparator) path += "/";
+	if (_DRIVE_LETTER_RE.test(path)) path += "/";
+	if (isUNCPath) {
+		if (!isPathAbsolute) return `//./${path}`;
+		return `//${path}`;
+	}
+	return isPathAbsolute && !isAbsolute(path) ? `/${path}` : path;
+};
+const join = function(...segments) {
+	let path = "";
+	for (const seg of segments) {
+		if (!seg) continue;
+		if (path.length > 0) {
+			const pathTrailing = path[path.length - 1] === "/";
+			const segLeading = seg[0] === "/";
+			if (pathTrailing && segLeading) path += seg.slice(1);
+			else path += pathTrailing || segLeading ? seg : `/${seg}`;
+		} else path += seg;
+	}
+	return normalize(path);
+};
+function cwd$1() {
+	if (typeof process !== "undefined" && typeof process.cwd === "function") return process.cwd().replace(/\\/g, "/");
+	return "/";
+}
+const resolve$1 = function(...arguments_) {
+	arguments_ = arguments_.map((argument) => normalizeWindowsPath(argument));
+	let resolvedPath = "";
+	let resolvedAbsolute = false;
+	for (let index = arguments_.length - 1; index >= -1 && !resolvedAbsolute; index--) {
+		const path = index >= 0 ? arguments_[index] : cwd$1();
+		if (!path || path.length === 0) continue;
+		resolvedPath = `${path}/${resolvedPath}`;
+		resolvedAbsolute = isAbsolute(path);
+	}
+	resolvedPath = normalizeString(resolvedPath, !resolvedAbsolute);
+	if (resolvedAbsolute && !isAbsolute(resolvedPath)) return `/${resolvedPath}`;
+	return resolvedPath.length > 0 ? resolvedPath : ".";
+};
+function normalizeString(path, allowAboveRoot) {
+	let res = "";
+	let lastSegmentLength = 0;
+	let lastSlash = -1;
+	let dots = 0;
+	let char = null;
+	for (let index = 0; index <= path.length; ++index) {
+		if (index < path.length) char = path[index];
+		else if (char === "/") break;
+		else char = "/";
+		if (char === "/") {
+			if (lastSlash === index - 1 || dots === 1);
+			else if (dots === 2) {
+				if (res.length < 2 || lastSegmentLength !== 2 || res[res.length - 1] !== "." || res[res.length - 2] !== ".") {
+					if (res.length > 2) {
+						const lastSlashIndex = res.lastIndexOf("/");
+						if (lastSlashIndex === -1) {
+							res = "";
+							lastSegmentLength = 0;
+						} else {
+							res = res.slice(0, lastSlashIndex);
+							lastSegmentLength = res.length - 1 - res.lastIndexOf("/");
+						}
+						lastSlash = index;
+						dots = 0;
+						continue;
+					} else if (res.length > 0) {
+						res = "";
+						lastSegmentLength = 0;
+						lastSlash = index;
+						dots = 0;
+						continue;
+					}
+				}
+				if (allowAboveRoot) {
+					res += res.length > 0 ? "/.." : "..";
+					lastSegmentLength = 2;
+				}
+			} else {
+				if (res.length > 0) res += `/${path.slice(lastSlash + 1, index)}`;
+				else res = path.slice(lastSlash + 1, index);
+				lastSegmentLength = index - lastSlash - 1;
+			}
+			lastSlash = index;
+			dots = 0;
+		} else if (char === "." && dots !== -1) ++dots;
+		else dots = -1;
+	}
+	return res;
+}
+const isAbsolute = function(p) {
+	return _IS_ABSOLUTE_RE.test(p);
+};
+//#endregion
+//#region ../../node_modules/.pnpm/picomatch@4.0.4/node_modules/picomatch/lib/constants.js
 var require_constants = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	const WIN_SLASH = "\\\\/";
 	const WIN_NO_SLASH = `[^${WIN_SLASH}]`;
+	const DEFAULT_MAX_EXTGLOB_RECURSION = 0;
 	/**
 	* Posix glob regex
 	*/
@@ -1277,8 +1414,10 @@ var require_constants = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 		SEP: "\\"
 	};
 	module.exports = {
+		DEFAULT_MAX_EXTGLOB_RECURSION,
 		MAX_LENGTH: 1024 * 64,
 		POSIX_REGEX_SOURCE: {
+			__proto__: null,
 			alnum: "a-zA-Z0-9",
 			alpha: "a-zA-Z",
 			ascii: "\\x00-\\x7F",
@@ -1349,6 +1488,9 @@ var require_constants = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 		CHAR_UNDERSCORE: 95,
 		CHAR_VERTICAL_LINE: 124,
 		CHAR_ZERO_WIDTH_NOBREAK_SPACE: 65279,
+		/**
+		* Create EXTGLOB_CHARS
+		*/
 		extglobChars(chars) {
 			return {
 				"!": {
@@ -1378,13 +1520,16 @@ var require_constants = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 				}
 			};
 		},
+		/**
+		* Create GLOB_CHARS
+		*/
 		globChars(win32) {
 			return win32 === true ? WINDOWS_CHARS : POSIX_CHARS;
 		}
 	};
 }));
 //#endregion
-//#region ../../node_modules/.pnpm/picomatch@4.0.3/node_modules/picomatch/lib/utils.js
+//#region ../../node_modules/.pnpm/picomatch@4.0.4/node_modules/picomatch/lib/utils.js
 var require_utils = /* @__PURE__ */ __commonJSMin(((exports) => {
 	const { REGEX_BACKSLASH, REGEX_REMOVE_BACKSLASH, REGEX_SPECIAL_CHARS, REGEX_SPECIAL_CHARS_GLOBAL } = require_constants();
 	exports.isObject = (val) => val !== null && typeof val === "object" && !Array.isArray(val);
@@ -1432,7 +1577,7 @@ var require_utils = /* @__PURE__ */ __commonJSMin(((exports) => {
 	};
 }));
 //#endregion
-//#region ../../node_modules/.pnpm/picomatch@4.0.3/node_modules/picomatch/lib/scan.js
+//#region ../../node_modules/.pnpm/picomatch@4.0.4/node_modules/picomatch/lib/scan.js
 var require_scan = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	const utils = require_utils();
 	const { CHAR_ASTERISK, CHAR_AT, CHAR_BACKWARD_SLASH, CHAR_COMMA, CHAR_DOT, CHAR_EXCLAMATION_MARK, CHAR_FORWARD_SLASH, CHAR_LEFT_CURLY_BRACE, CHAR_LEFT_PARENTHESES, CHAR_LEFT_SQUARE_BRACKET, CHAR_PLUS, CHAR_QUESTION_MARK, CHAR_RIGHT_CURLY_BRACE, CHAR_RIGHT_PARENTHESES, CHAR_RIGHT_SQUARE_BRACKET } = require_constants();
@@ -1719,7 +1864,7 @@ var require_scan = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	module.exports = scan;
 }));
 //#endregion
-//#region ../../node_modules/.pnpm/picomatch@4.0.3/node_modules/picomatch/lib/parse.js
+//#region ../../node_modules/.pnpm/picomatch@4.0.4/node_modules/picomatch/lib/parse.js
 var require_parse = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	const constants = require_constants();
 	const utils = require_utils();
@@ -1747,6 +1892,177 @@ var require_parse = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	const syntaxError = (type, char) => {
 		return `Missing ${type}: "${char}" - use "\\\\${char}" to match literal characters`;
 	};
+	const splitTopLevel = (input) => {
+		const parts = [];
+		let bracket = 0;
+		let paren = 0;
+		let quote = 0;
+		let value = "";
+		let escaped = false;
+		for (const ch of input) {
+			if (escaped === true) {
+				value += ch;
+				escaped = false;
+				continue;
+			}
+			if (ch === "\\") {
+				value += ch;
+				escaped = true;
+				continue;
+			}
+			if (ch === "\"") {
+				quote = quote === 1 ? 0 : 1;
+				value += ch;
+				continue;
+			}
+			if (quote === 0) {
+				if (ch === "[") bracket++;
+				else if (ch === "]" && bracket > 0) bracket--;
+				else if (bracket === 0) {
+					if (ch === "(") paren++;
+					else if (ch === ")" && paren > 0) paren--;
+					else if (ch === "|" && paren === 0) {
+						parts.push(value);
+						value = "";
+						continue;
+					}
+				}
+			}
+			value += ch;
+		}
+		parts.push(value);
+		return parts;
+	};
+	const isPlainBranch = (branch) => {
+		let escaped = false;
+		for (const ch of branch) {
+			if (escaped === true) {
+				escaped = false;
+				continue;
+			}
+			if (ch === "\\") {
+				escaped = true;
+				continue;
+			}
+			if (/[?*+@!()[\]{}]/.test(ch)) return false;
+		}
+		return true;
+	};
+	const normalizeSimpleBranch = (branch) => {
+		let value = branch.trim();
+		let changed = true;
+		while (changed === true) {
+			changed = false;
+			if (/^@\([^\\()[\]{}|]+\)$/.test(value)) {
+				value = value.slice(2, -1);
+				changed = true;
+			}
+		}
+		if (!isPlainBranch(value)) return;
+		return value.replace(/\\(.)/g, "$1");
+	};
+	const hasRepeatedCharPrefixOverlap = (branches) => {
+		const values = branches.map(normalizeSimpleBranch).filter(Boolean);
+		for (let i = 0; i < values.length; i++) for (let j = i + 1; j < values.length; j++) {
+			const a = values[i];
+			const b = values[j];
+			const char = a[0];
+			if (!char || a !== char.repeat(a.length) || b !== char.repeat(b.length)) continue;
+			if (a === b || a.startsWith(b) || b.startsWith(a)) return true;
+		}
+		return false;
+	};
+	const parseRepeatedExtglob = (pattern, requireEnd = true) => {
+		if (pattern[0] !== "+" && pattern[0] !== "*" || pattern[1] !== "(") return;
+		let bracket = 0;
+		let paren = 0;
+		let quote = 0;
+		let escaped = false;
+		for (let i = 1; i < pattern.length; i++) {
+			const ch = pattern[i];
+			if (escaped === true) {
+				escaped = false;
+				continue;
+			}
+			if (ch === "\\") {
+				escaped = true;
+				continue;
+			}
+			if (ch === "\"") {
+				quote = quote === 1 ? 0 : 1;
+				continue;
+			}
+			if (quote === 1) continue;
+			if (ch === "[") {
+				bracket++;
+				continue;
+			}
+			if (ch === "]" && bracket > 0) {
+				bracket--;
+				continue;
+			}
+			if (bracket > 0) continue;
+			if (ch === "(") {
+				paren++;
+				continue;
+			}
+			if (ch === ")") {
+				paren--;
+				if (paren === 0) {
+					if (requireEnd === true && i !== pattern.length - 1) return;
+					return {
+						type: pattern[0],
+						body: pattern.slice(2, i),
+						end: i
+					};
+				}
+			}
+		}
+	};
+	const getStarExtglobSequenceOutput = (pattern) => {
+		let index = 0;
+		const chars = [];
+		while (index < pattern.length) {
+			const match = parseRepeatedExtglob(pattern.slice(index), false);
+			if (!match || match.type !== "*") return;
+			const branches = splitTopLevel(match.body).map((branch) => branch.trim());
+			if (branches.length !== 1) return;
+			const branch = normalizeSimpleBranch(branches[0]);
+			if (!branch || branch.length !== 1) return;
+			chars.push(branch);
+			index += match.end + 1;
+		}
+		if (chars.length < 1) return;
+		return `${chars.length === 1 ? utils.escapeRegex(chars[0]) : `[${chars.map((ch) => utils.escapeRegex(ch)).join("")}]`}*`;
+	};
+	const repeatedExtglobRecursion = (pattern) => {
+		let depth = 0;
+		let value = pattern.trim();
+		let match = parseRepeatedExtglob(value);
+		while (match) {
+			depth++;
+			value = match.body.trim();
+			match = parseRepeatedExtglob(value);
+		}
+		return depth;
+	};
+	const analyzeRepeatedExtglob = (body, options) => {
+		if (options.maxExtglobRecursion === false) return { risky: false };
+		const max = typeof options.maxExtglobRecursion === "number" ? options.maxExtglobRecursion : constants.DEFAULT_MAX_EXTGLOB_RECURSION;
+		const branches = splitTopLevel(body).map((branch) => branch.trim());
+		if (branches.length > 1) {
+			if (branches.some((branch) => branch === "") || branches.some((branch) => /^[*?]+$/.test(branch)) || hasRepeatedCharPrefixOverlap(branches)) return { risky: true };
+		}
+		for (const branch of branches) {
+			const safeOutput = getStarExtglobSequenceOutput(branch);
+			if (safeOutput) return {
+				risky: true,
+				safeOutput
+			};
+			if (repeatedExtglobRecursion(branch) > max) return { risky: true };
+		}
+		return { risky: false };
+	};
 	/**
 	* Parse the given input string.
 	* @param {String} input
@@ -1876,6 +2192,8 @@ var require_parse = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 			token.prev = prev;
 			token.parens = state.parens;
 			token.output = state.output;
+			token.startIndex = state.index;
+			token.tokensIndex = tokens.length;
 			const output = (opts.capture ? "(" : "") + token.open;
 			increment("parens");
 			push({
@@ -1892,6 +2210,30 @@ var require_parse = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 			extglobs.push(token);
 		};
 		const extglobClose = (token) => {
+			const literal = input.slice(token.startIndex, state.index + 1);
+			const analysis = analyzeRepeatedExtglob(input.slice(token.startIndex + 2, state.index), opts);
+			if ((token.type === "plus" || token.type === "star") && analysis.risky) {
+				const safeOutput = analysis.safeOutput ? (token.output ? "" : ONE_CHAR) + (opts.capture ? `(${analysis.safeOutput})` : analysis.safeOutput) : void 0;
+				const open = tokens[token.tokensIndex];
+				open.type = "text";
+				open.value = literal;
+				open.output = safeOutput || utils.escapeRegex(literal);
+				for (let i = token.tokensIndex + 1; i < tokens.length; i++) {
+					tokens[i].value = "";
+					tokens[i].output = "";
+					delete tokens[i].suffix;
+				}
+				state.output = token.output + open.output;
+				state.backtrack = true;
+				push({
+					type: "paren",
+					extglob: true,
+					value,
+					output: ""
+				});
+				decrement("parens");
+				return;
+			}
 			let output = token.close + (opts.capture ? ")" : "");
 			let rest;
 			if (token.type === "negate") {
@@ -2577,7 +2919,7 @@ var require_parse = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	module.exports = parse;
 }));
 //#endregion
-//#region ../../node_modules/.pnpm/picomatch@4.0.3/node_modules/picomatch/lib/picomatch.js
+//#region ../../node_modules/.pnpm/picomatch@4.0.4/node_modules/picomatch/lib/picomatch.js
 var require_picomatch$1 = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	const scan = require_scan();
 	const parse = require_parse();
@@ -2787,6 +3129,14 @@ var require_picomatch$1 = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	* Compile a regular expression from the `state` object returned by the
 	* [parse()](#parse) method.
 	*
+	* ```js
+	* const picomatch = require('picomatch');
+	* const state = picomatch.parse('*.js');
+	* // picomatch.compileRe(state[, options]);
+	*
+	* console.log(picomatch.compileRe(state));
+	* //=> /^(?:(?!\.)(?=.)[^/]*?\.js)$/
+	* ```
 	* @param {Object} `state`
 	* @param {Object} `options`
 	* @param {Boolean} `returnOutput` Intended for implementors, this argument allows you to return the raw output from the parser.
@@ -2810,10 +3160,10 @@ var require_picomatch$1 = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	*
 	* ```js
 	* const picomatch = require('picomatch');
-	* const state = picomatch.parse('*.js');
-	* // picomatch.compileRe(state[, options]);
+	* // picomatch.makeRe(state[, options]);
 	*
-	* console.log(picomatch.compileRe(state));
+	* const result = picomatch.makeRe('*.js');
+	* console.log(result);
 	* //=> /^(?:(?!\.)(?=.)[^/]*?\.js)$/
 	* ```
 	* @param {String} `state` The object returned from the `.parse` method.
@@ -3083,7 +3433,7 @@ function variantAttributify(options = {}) {
 				const [, bodyVariant, bracketValue] = content.match(variantsValueRE) || [];
 				if (bracketValue) return `${bodyVariant}${variants}${name}-${bracketValue}`;
 			}
-			if (variants && body.match(/^[\d.]+$/)) {
+			if (variants && /^[\d.]+$/.test(body)) {
 				const variantParts = variants.split(/([^:]*:)/g).filter(Boolean);
 				const _body = variantParts.pop() + body;
 				const _variants = variantParts.join("");
@@ -3254,7 +3604,7 @@ const presetAttributify = definePreset((options = {}) => {
 	};
 });
 //#endregion
-//#region ../../node_modules/.pnpm/@iconify+utils@3.1.0/node_modules/@iconify/utils/lib/svg/url.js
+//#region ../../node_modules/.pnpm/@iconify+utils@3.1.3/node_modules/@iconify/utils/lib/svg/url.js
 /**
 * Encode SVG for use in url()
 *
@@ -3265,7 +3615,7 @@ function encodeSVGforURL(svg) {
 	return svg.replace(/"/g, "'").replace(/%/g, "%25").replace(/#/g, "%23").replace(/</g, "%3C").replace(/>/g, "%3E").replace(/\s+/g, " ");
 }
 //#endregion
-//#region ../../node_modules/.pnpm/@iconify+utils@3.1.0/node_modules/@iconify/utils/lib/svg/encode-svg-for-css.js
+//#region ../../node_modules/.pnpm/@iconify+utils@3.1.3/node_modules/@iconify/utils/lib/svg/encode-svg-for-css.js
 /**
 * Encode the `SVG` to be used on `CSS`: https://bl.ocks.org/jennyknuth/222825e315d45a738ed9d6e04c7a88d0.
 *
@@ -3278,7 +3628,7 @@ function encodeSvgForCss(svg) {
 	return encodeSVGforURL(useSvg);
 }
 //#endregion
-//#region ../../packages-presets/preset-icons/dist/core-CVWr9MHW.mjs
+//#region ../../packages-presets/preset-icons/dist/core-Cb3gCBCx.mjs
 function getEnvFlags() {
 	const isNode = typeof process !== "undefined" && process.stdout;
 	return {
@@ -3374,6 +3724,7 @@ var collections_default = [
 	"gala",
 	"game-icons",
 	"garden",
+	"gcp",
 	"geo",
 	"gg",
 	"gis",
@@ -3447,6 +3798,7 @@ var collections_default = [
 	"pepicons",
 	"ph",
 	"picon",
+	"pinhead",
 	"pixel",
 	"pixelarticons",
 	"prime",
@@ -3659,9 +4011,9 @@ async function parseIconWithLoader(body, loader, options = {}, safeCollectionsNa
 	};
 }
 //#endregion
-//#region ../../packages-presets/preset-icons/dist/cdn-fz6F-x8c.mjs
+//#region ../../packages-presets/preset-icons/dist/cdn-B5KlXljx.mjs
 async function createCDNLoader(cdnBase) {
-	const { $fetch } = await import("./node-D23LglTq.mjs");
+	const { $fetch } = await import("./node-oThp98aD.mjs");
 	return createCDNFetchLoader($fetch, cdnBase);
 }
 //#endregion
@@ -3700,7 +4052,7 @@ const presetIcons = /* @__PURE__ */ definePreset((options = {}) => {
 });
 async function createNodeLoader() {
 	try {
-		return await import("./node-loader-ZSa5xzQw.mjs").then((i) => i?.loadNodeIcon);
+		return await import("./node-loader-CKcohGec.mjs").then((i) => i?.loadNodeIcon);
 	} catch {}
 	try {
 		return __require("@iconify/utils/lib/loader/node-loader.cjs").loadNodeIcon;
@@ -4032,7 +4384,7 @@ function transformThemeFn(code, theme, throwOnMissing = true) {
 }
 function transformThemeString(code, theme, throwOnMissing = true) {
 	const [rawKey, alpha] = code.split("/");
-	let value = rawKey.trim().split(".").reduce((t, k) => t === null || t === void 0 ? void 0 : t[k], theme);
+	let value = rawKey.trim().split(".").reduce((t, k) => t?.[k], theme);
 	if (typeof value === "object") value = value.DEFAULT;
 	if (typeof value === "string") {
 		if (alpha) {
@@ -4043,8 +4395,7 @@ function transformThemeString(code, theme, throwOnMissing = true) {
 	} else if (throwOnMissing) throw new Error(`theme of "${code}" did not found`);
 }
 function calcMaxWidthBySize(size) {
-	var _size$match;
-	const value = ((_size$match = size.match(/^-?\d+\.?\d*/)) === null || _size$match === void 0 ? void 0 : _size$match[0]) || "";
+	const value = size.match(/^-?\d+\.?\d*/)?.[0] || "";
 	const unit = size.slice(value.length);
 	if (unit === "px") {
 		const maxWidth = Number.parseFloat(value) - .1;
@@ -4054,8 +4405,7 @@ function calcMaxWidthBySize(size) {
 }
 function createValueHandler(handlers) {
 	const handler = function(str, theme) {
-		var _this$__options;
-		const s = ((_this$__options = this.__options) === null || _this$__options === void 0 ? void 0 : _this$__options.sequence) || [];
+		const s = this.__options?.sequence || [];
 		this.__options.sequence = [];
 		for (const n of s) {
 			const res = handlers[n](str, theme);
@@ -4171,13 +4521,12 @@ function createTaggedPseudoClassMatcher(tag, parent, combinator, utils) {
 	let pseudoColonRE;
 	let pseudoVarRE;
 	const matchBracket = (input) => {
-		var _rest$split;
 		const body = variantGetBracket(`${tag}-`, input, []);
 		if (!body) return;
 		const [match, rest] = body;
 		const bracketValue = h.bracket(match);
 		if (bracketValue == null) return;
-		const label = ((_rest$split = rest.split(splitRE, 1)) === null || _rest$split === void 0 ? void 0 : _rest$split[0]) ?? "";
+		const label = rest.split(splitRE, 1)?.[0] ?? "";
 		const prefix = `${parent}${escapeSelector(label)}`;
 		return [
 			label,
@@ -4322,8 +4671,8 @@ function createPseudoClassFunctions(utils) {
 	};
 }
 function createTaggedPseudoClasses(options, utils) {
-	const attributify = !!(options === null || options === void 0 ? void 0 : options.attributifyPseudo);
-	let firstPrefix = (options === null || options === void 0 ? void 0 : options.prefix) ?? "";
+	const attributify = !!options?.attributifyPseudo;
+	let firstPrefix = options?.prefix ?? "";
 	firstPrefix = escapeSelector((Array.isArray(firstPrefix) ? firstPrefix : [firstPrefix]).filter(Boolean)[0] ?? "");
 	const tagWithPrefix = (tag, combinator) => createTaggedPseudoClassMatcher(tag, attributify ? `[${firstPrefix}${tag}=""]` : `.${firstPrefix}${tag}`, combinator, utils);
 	return [
@@ -5847,21 +6196,55 @@ function getVariableWght(axes) {
 	if (axes.min === axes.max) return `${axes.min}`;
 	return `${axes.min} ${axes.max}`;
 }
+const NoneProvider = {
+	name: "none",
+	getPreflight() {
+		return "";
+	},
+	getFontName(font) {
+		return font.name;
+	}
+};
+function parseFontName(name) {
+	const atIndex = name.lastIndexOf("@");
+	if (atIndex === -1) throw new Error(`[unocss] ZeoSeven provider requires font ID in format "FontFamily@id", e.g. "LXGW WenKai@292". Got: "${name}"`);
+	return {
+		family: name.slice(0, atIndex).trim(),
+		id: name.slice(atIndex + 1).trim()
+	};
+}
+function createZeoSevenProvider(name, host) {
+	return {
+		name,
+		getFontName(font) {
+			const { family } = parseFontName(font.name);
+			return `"${family}"`;
+		},
+		async getPreflight(fonts, fetcher) {
+			const cssParts = [];
+			for (const font of fonts) {
+				const { id } = parseFontName(font.name);
+				const baseUrl = `${host}/${id}/main/`;
+				const url = `${baseUrl}result.css`;
+				try {
+					const processed = (await fetcher(url)).replace(/url\("\.\/([^"]+)"\)/g, `url("${baseUrl}$1")`);
+					cssParts.push(processed);
+				} catch {
+					throw new Error(`[unocss] Failed to fetch ZeoSeven font CSS for ID "${id}"`);
+				}
+			}
+			return cssParts.join("\n");
+		}
+	};
+}
 const builtinProviders = {
 	google: GoogleFontsProvider,
 	bunny: BunnyFontsProvider,
 	fontshare: FontshareProvider,
 	fontsource: FontSourceProvider,
 	coollabs: CoolLabsFontsProvider,
-	none: {
-		name: "none",
-		getPreflight() {
-			return "";
-		},
-		getFontName(font) {
-			return font.name;
-		}
-	}
+	none: NoneProvider,
+	zeoseven: createZeoSevenProvider("zeoseven", "https://fontsapi.zeoseven.com")
 };
 function resolveProvider(provider) {
 	if (typeof provider === "string") return builtinProviders[provider];
@@ -5964,7 +6347,7 @@ function createWebFontPreset(fetcher) {
 	};
 }
 const userAgentWoff2 = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36";
-const defaultFetch = async (url) => (await import("./node-D23LglTq.mjs")).$fetch(url, {
+const defaultFetch = async (url) => (await import("./node-oThp98aD.mjs")).$fetch(url, {
 	headers: { "User-Agent": userAgentWoff2 },
 	retry: 3
 });
@@ -6017,7 +6400,7 @@ var __exportAll = (all, no_symbols) => {
 	return target;
 };
 //#endregion
-//#region ../../packages-presets/preset-wind4/dist/utils-BamiTVVE.mjs
+//#region ../../packages-presets/preset-wind4/dist/utils-CqAvZsCu.mjs
 const PRESET_NAME = "@unocss/preset-wind4";
 const CONTROL_NO_NEGATIVE = "$$mini-no-negative";
 const SpecialColorKey = {
@@ -6149,8 +6532,9 @@ const unitOnlyMap = {
 	lvh: 100,
 	lvw: 100
 };
-const bracketTypeRe = /^\[(color|image|length|size|position|quoted|string|number|family):/i;
+const bracketTypeRe = /^\[(color|image|length|size|width|position|quoted|string|number|family):/i;
 const splitComma = /,(?![^()]*\))/g;
+const cssVarsRE = /(?<!var\()--([\w.-]+)(\([^)]+\)|,[#.\s\w]+)?/g;
 var handlers_exports = /* @__PURE__ */ __exportAll({
 	auto: () => auto,
 	bracket: () => bracket,
@@ -6285,13 +6669,23 @@ function fraction(str) {
 		return `${round(num * 100)}%`;
 	}
 }
-function processThemeVariable(name, key, paths, theme) {
-	const valOrObj = getThemeByKey(theme, key, paths);
+/**
+* Process a theme variable reference and retrieve its value and corresponding CSS variable key.
+*
+* @example theme => Theme object
+* @example themeKey => 'colors
+* @example themeKeyPaths => ['blue', '500']
+* @example varPaths => 'colors.blue.500'
+*
+* @returns An object containing the resolved value from the theme and the corresponding CSS variable key.
+*/
+function processThemeVariable(theme, themeKey, themeKeyPaths, varPaths) {
+	const valOrObj = getThemeByKey(theme, themeKey, themeKeyPaths);
 	const hasDefault = typeof valOrObj === "object" && "DEFAULT" in valOrObj;
-	if (hasDefault) paths.push("DEFAULT");
+	if (hasDefault) themeKeyPaths.push("DEFAULT");
 	const val = hasDefault ? valOrObj.DEFAULT : valOrObj;
-	const varKey = hasDefault && key !== "spacing" ? `${name}.DEFAULT` : name;
-	if (val != null) themeTracking(key, paths.length ? paths : void 0);
+	const varKey = hasDefault && themeKey !== "spacing" ? `${varPaths}.DEFAULT` : varPaths;
+	if (val != null) themeTracking(themeKey, themeKeyPaths.length ? themeKeyPaths : void 0);
 	return {
 		val,
 		varKey
@@ -6310,23 +6704,24 @@ function bracketWithType(str, requiredType, theme) {
 		}
 		if (!base) return;
 		if (base === "=\"\"") return;
-		if (base.startsWith("--")) {
-			const calcMatch = base.match(/^--([\w.-]+)\(([^)]+)\)$/);
-			if (calcMatch != null && theme) {
-				const [, name, factor] = calcMatch;
-				const [key, ...paths] = name.split(".");
-				const { val, varKey } = processThemeVariable(name, key, paths, theme);
-				if (val != null) base = `calc(var(--${escapeSelector(varKey.replaceAll(".", "-"))}) * ${factor})`;
-			} else {
-				const [name, defaultValue] = base.slice(2).split(",");
-				const suffix = defaultValue ? `, ${defaultValue}` : "";
-				const escapedName = escapeSelector(name);
-				if (theme) {
-					const [key, ...paths] = name.split(".");
-					const { val, varKey } = processThemeVariable(name, key, paths, theme);
-					base = val != null ? `var(--${escapeSelector(varKey.replaceAll(".", "-"))}${suffix})` : `var(--${escapedName}${suffix})`;
-				} else base = `var(--${escapedName}${suffix})`;
+		if (theme) base = transformThemeFn(base, theme);
+		const matches = Array.from(base.matchAll(cssVarsRE));
+		for (const match of matches) {
+			const [full, varPaths, _value] = match;
+			if (theme) {
+				const [key, ...paths] = varPaths.split(".");
+				const { val, varKey } = processThemeVariable(theme, key, paths, varPaths);
+				if (val != null) {
+					const cssVar = `--${varKey.replaceAll(".", "-")}`;
+					if (_value && !_value.startsWith(",")) base = base.replace(full, `calc(var(${cssVar}) * ${_value.slice(1, -1)})`);
+					else {
+						const fallback = _value?.slice(1);
+						base = base.replace(full, `var(${cssVar}${fallback ? `, ${fallback}` : ""})`);
+					}
+					continue;
+				}
 			}
+			base = base.replace(full, `var(${full})`);
 		}
 		let curly = 0;
 		for (const i of base) if (i === "[") curly += 1;
@@ -6355,7 +6750,7 @@ function bracketOfColor(str, theme) {
 	return bracketWithType(str, "color", theme);
 }
 function bracketOfLength(str, theme) {
-	return bracketWithType(str, "length", theme) || bracketWithType(str, "size", theme);
+	return bracketWithType(str, "length", theme) || bracketWithType(str, "size", theme) || bracketWithType(str, "width", theme);
 }
 function bracketOfPosition(str, theme) {
 	return bracketWithType(str, "position", theme);
@@ -6472,7 +6867,7 @@ function parseColor(body, theme) {
 	if (!split) return;
 	let opacity;
 	let [main, opacityOrModifier, modifier] = split;
-	if (isInterpolatedMethod(opacityOrModifier) || isInterpolatedMethod(h.bracket(opacityOrModifier ?? ""))) modifier = opacityOrModifier;
+	if (isInterpolatedMethod(opacityOrModifier) || isInterpolatedMethod(h.bracket(opacityOrModifier ?? "", theme))) modifier = opacityOrModifier;
 	else opacity = opacityOrModifier;
 	const colors = main.replace(/([a-z])(\d)(?![-_a-z])/g, "$1-$2").split(/-/g);
 	const [name] = colors;
@@ -6495,11 +6890,14 @@ function parseColor(body, theme) {
 	}
 	return {
 		opacity,
-		modifier: modifier && h.bracket.cssvar(modifier) || modifier,
+		modifier: modifier && h.bracket.cssvar(modifier, theme) || modifier,
 		name,
 		no,
 		color: color ?? SpecialColorKey[name],
-		alpha: h.bracket.cssvar.percent(opacity ?? ""),
+		alpha: h.bracket.cssvar.percent(opacity ?? "", theme),
+		/**
+		* Keys means the color is from theme object.
+		*/
 		keys,
 		get cssColor() {
 			return parseCssColor(this.color);
@@ -6708,7 +7106,7 @@ function propertyTracking(property, value) {
 	if (!trackedProperties.has(property)) trackedProperties.set(property, value);
 }
 //#endregion
-//#region ../../packages-presets/preset-wind4/dist/container-_7pdPWQl.mjs
+//#region ../../packages-presets/preset-wind4/dist/container-BwY4Hhe2.mjs
 const containerParent = [[/^@container(?:\/(\w+))?(?:-(normal))?$/, ([, l, v]) => {
 	return {
 		"container-type": v ?? "inline-size",
@@ -6782,7 +7180,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 = [
@@ -6817,24 +7215,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"] }
 	],
 	[
@@ -6869,7 +7267,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>"] }
 	],
 	[
@@ -6951,7 +7349,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":
@@ -6982,18 +7380,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))`
@@ -7007,7 +7405,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))$/,
@@ -7042,7 +7440,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" }],
@@ -7092,12 +7490,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" }],
@@ -7130,8 +7528,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)",
@@ -7141,7 +7539,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;
@@ -7154,15 +7552,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",
@@ -7195,8 +7593,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")
@@ -7207,7 +7605,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 = [[
@@ -7216,7 +7614,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 = [
@@ -7341,19 +7739,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;
@@ -7361,14 +7764,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);
@@ -7382,7 +7785,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:.+\]$/;
@@ -7390,27 +7793,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(" ") })]];
@@ -7422,7 +7825,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"] }
 	],
@@ -7482,12 +7885,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 }]),
@@ -7495,11 +7898,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];
@@ -7561,6 +7964,7 @@ const spaces = [[
 function notLastChildSelectorVariant(s) {
 	return {
 		matcher: s,
+		order: 1,
 		handle: (input, next) => next({
 			...input,
 			parent: `${input.parent ? `${input.parent} $$ ` : ""}${input.selector}`,
@@ -7574,7 +7978,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))`})`];
@@ -7606,10 +8010,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>"] }
@@ -7638,8 +8042,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 = {
@@ -7686,8 +8090,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;
@@ -7715,9 +8119,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(")})`,
@@ -7725,7 +8129,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
@@ -7734,7 +8138,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",
@@ -7743,12 +8147,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>"] }
 	],
 	[
@@ -7773,7 +8177,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),
@@ -7783,7 +8187,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),
@@ -7795,12 +8199,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>",
@@ -7836,30 +8240,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"] }
 	],
@@ -7898,54 +8305,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" }],
@@ -7994,12 +8401,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) {
@@ -8016,8 +8420,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) {
@@ -8043,10 +8447,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 = {
@@ -8065,8 +8469,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) => [
@@ -8083,8 +8487,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 = [
@@ -8099,7 +8503,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,
@@ -8159,7 +8563,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>"] }
 ]];
 const positions = [
@@ -8207,7 +8611,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" }]
@@ -8283,21 +8687,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",
@@ -8310,7 +8714,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" }],
@@ -8329,7 +8733,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 = [
@@ -8370,7 +8774,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>" }
 	],
 	[
@@ -8380,7 +8784,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>" }
 	]
 ];
@@ -8394,10 +8798,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(","),
@@ -8408,8 +8812,8 @@ function handleShadow(themeKey) {
 	};
 }
 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)"
@@ -8422,11 +8826,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)"
@@ -8439,13 +8843,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)"
@@ -8460,7 +8864,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" }]
@@ -8532,7 +8936,7 @@ function getSizeValue(theme, hw, prop) {
 		themeTracking(`spacing`);
 		v = `calc(var(--spacing) * ${h.number(prop)})`;
 	}
-	return v ?? h.bracket.cssvar.global.auto.none.fraction.rem(prop);
+	return v ?? h.bracket.cssvar.global.auto.none.fraction.rem(prop, theme);
 }
 const sizes = [
 	[/^size-(min-|max-)?(.+)$/, ([, m, s], { theme }) => ({
@@ -8573,17 +8977,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)"] }
 ]];
 const cursorValues = [
@@ -8638,7 +9042,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" }],
@@ -8648,10 +9052,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(" ")
@@ -8708,13 +9113,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>",
@@ -8728,9 +9133,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: "\"\"" })];
 	}],
@@ -8853,9 +9258,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("|")})` }
 	]
@@ -8920,17 +9326,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,
@@ -8938,7 +9344,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" }],
@@ -8951,11 +9357,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);
 }
 const tables = [
@@ -9020,7 +9426,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;
 }
@@ -9078,7 +9484,7 @@ const transformGpu = ["translateZ(0)", transformCpu].join(" ");
 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("|")})`] }
 	],
 	[
@@ -9088,7 +9494,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})`,
@@ -9099,8 +9505,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],
@@ -9133,8 +9539,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`);
@@ -9149,8 +9555,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)" : ""}`]], ...[
@@ -9160,8 +9566,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 [
@@ -9173,11 +9579,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]],
@@ -9226,11 +9632,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 }) => {
@@ -9238,7 +9644,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
@@ -9283,7 +9689,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>" }
 	],
 	[
@@ -9293,7 +9699,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
@@ -9311,7 +9717,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
@@ -9323,7 +9729,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 }) => {
@@ -9331,7 +9737,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
@@ -9342,7 +9748,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
@@ -9361,7 +9767,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>" }
 	],
 	[
@@ -9386,12 +9792,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 {
@@ -9399,7 +9805,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 {
@@ -9407,27 +9813,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 = [
@@ -9435,7 +9841,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" }
 	],
@@ -9446,7 +9852,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>" }
 	]
 ];
@@ -9456,16 +9862,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 = [
 	[
@@ -9484,7 +9890,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>" }
 	]
 ];
@@ -9540,7 +9946,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"]);
@@ -9551,12 +9957,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) {
@@ -9567,12 +9973,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) {
@@ -10669,14 +11075,12 @@ const breakpoint = {
 	"xl": "80rem",
 	"2xl": "96rem"
 };
-const verticalBreakpoint = { ...breakpoint };
-const supports = { grid: "(display: grid)" };
 const theme = {
 	font,
 	colors,
 	spacing,
 	breakpoint,
-	verticalBreakpoint,
+	verticalBreakpoint: { ...breakpoint },
 	text,
 	fontWeight,
 	tracking,
@@ -10735,17 +11139,17 @@ const theme = {
 	container,
 	aria,
 	media,
-	supports
+	supports: { grid: "(display: grid)" }
 };
 //#endregion
-//#region ../../packages-presets/preset-wind4/dist/variants-BQhcPCjX.mjs
+//#region ../../packages-presets/preset-wind4/dist/variants-pAIxzNbQ.mjs
 const variantAria = {
 	name: "aria",
 	match(matcher, ctx) {
 		const variant = variantGetParameter("aria-", matcher, ctx.generator.config.separators);
 		if (variant) {
 			const [match, rest] = variant;
-			const aria = h.bracket(match) ?? ctx.theme.aria?.[match] ?? "";
+			const aria = h.bracket(match, ctx.theme) ?? ctx.theme.aria?.[match] ?? "";
 			if (aria) return {
 				matcher: rest,
 				selector: (s) => `${s}[aria-${aria}]`
@@ -10762,7 +11166,7 @@ function taggedAria(tagName) {
 			const variant = variantGetParameter(`${tagName}-aria-`, matcher, ctx.generator.config.separators);
 			if (variant) {
 				const [match, rest, label] = variant;
-				const ariaAttribute = h.bracket(match) ?? ctx.theme.aria?.[match] ?? "";
+				const ariaAttribute = h.bracket(match, ctx.theme) ?? ctx.theme.aria?.[match] ?? "";
 				if (ariaAttribute) {
 					const tagSelectorMap = {
 						group: `&:is(:where(.group${label ? `\\/${label}` : ""})[aria-${ariaAttribute}] *)`,
@@ -10874,7 +11278,7 @@ function scopeMatcher(name, combinator) {
 				}
 				if (!body) return;
 			}
-			let bracketValue = h.bracket(body[0]) ?? "";
+			let bracketValue = h.bracket(body[0], ctx.theme) ?? "";
 			if (bracketValue === "") bracketValue = "*";
 			return {
 				matcher: body[1],
@@ -10899,7 +11303,7 @@ const variantContainerQuery = {
 		const variant = variantGetParameter("@", matcher, ctx.generator.config.separators);
 		if (variant) {
 			const [match, rest, label] = variant;
-			const unbracket = h.bracket(match);
+			const unbracket = h.bracket(match, ctx.theme);
 			let container;
 			if (unbracket) container = h.numberWithUnit(unbracket);
 			else container = ctx.theme.container?.[match] ?? "";
@@ -10939,7 +11343,7 @@ const variantDataAttribute = {
 		const variant = variantGetParameter("data-", matcher, ctx.generator.config.separators);
 		if (variant) {
 			const [match, rest] = variant;
-			const dataAttribute = h.bracket(match) ?? ctx.theme.data?.[match] ?? "";
+			const dataAttribute = h.bracket(match, ctx.theme) ?? ctx.theme.data?.[match] ?? "";
 			if (dataAttribute) return {
 				matcher: rest,
 				selector: (s) => `${s}[data-${dataAttribute}]`
@@ -10955,7 +11359,7 @@ function taggedData(tagName) {
 			const variant = variantGetParameter(`${tagName}-data-`, matcher, ctx.generator.config.separators);
 			if (variant) {
 				const [match, rest, label] = variant;
-				const dataAttribute = h.bracket(match) ?? ctx.theme.data?.[match] ?? "";
+				const dataAttribute = h.bracket(match, ctx.theme) ?? ctx.theme.data?.[match] ?? "";
 				if (dataAttribute) {
 					const tagSelectorMap = {
 						group: `&:is(:where(.group${label ? `\\/${label}` : ""})[data-${dataAttribute}] *)`,
@@ -11044,7 +11448,7 @@ const variantCustomMedia = {
 		const variant = variantGetParameter("media-", matcher, ctx.generator.config.separators);
 		if (variant) {
 			const [match, rest] = variant;
-			let media = h.bracket(match) ?? "";
+			let media = h.bracket(match, ctx.theme) ?? "";
 			if (media === "") media = ctx.theme.media?.[match] ?? "";
 			if (media) return {
 				matcher: rest,
@@ -11068,7 +11472,7 @@ const variantSelector = {
 		const variant = variantGetBracket("selector-", matcher, ctx.generator.config.separators);
 		if (variant) {
 			const [match, rest] = variant;
-			const selector = h.bracket(match);
+			const selector = h.bracket(match, ctx.theme);
 			if (selector) return {
 				matcher: rest,
 				selector: () => selector
@@ -11082,7 +11486,7 @@ const variantCssLayer = {
 		const variant = variantGetParameter("layer-", matcher, ctx.generator.config.separators);
 		if (variant) {
 			const [match, rest] = variant;
-			const layer = h.bracket(match) ?? match;
+			const layer = h.bracket(match, ctx.theme) ?? match;
 			if (layer) return {
 				matcher: rest,
 				handle: (input, next) => next({
@@ -11099,7 +11503,7 @@ const variantInternalLayer = {
 		const variant = variantGetParameter("uno-layer-", matcher, ctx.generator.config.separators);
 		if (variant) {
 			const [match, rest] = variant;
-			const layer = h.bracket(match) ?? match;
+			const layer = h.bracket(match, ctx.theme) ?? match;
 			if (layer) return {
 				matcher: rest,
 				layer
@@ -11113,7 +11517,7 @@ const variantScope = {
 		const variant = variantGetBracket("scope-", matcher, ctx.generator.config.separators);
 		if (variant) {
 			const [match, rest] = variant;
-			const scope = h.bracket(match);
+			const scope = h.bracket(match, ctx.theme);
 			if (scope) return {
 				matcher: rest,
 				selector: (s) => `${scope} $$ ${s}`
@@ -11133,7 +11537,7 @@ const variantVariables = {
 			break;
 		}
 		if (newMatcher == null) return;
-		const variant = h.bracket(match) ?? "";
+		const variant = h.bracket(match, ctx.theme) ?? "";
 		const useParent = variant.startsWith("@");
 		if (!(useParent || variant.includes("&"))) return;
 		return {
@@ -11174,7 +11578,7 @@ const variantImplicitGroup = {
 		const variant = variantGetParameter("in-", matcher, ctx.generator.config.separators);
 		if (variant) {
 			const [match, rest] = variant;
-			const group = h.bracket(match) ?? match;
+			const group = h.bracket(match, ctx.theme) ?? match;
 			if (group) return {
 				matcher: rest,
 				handle: (input, next) => next({
@@ -11226,7 +11630,7 @@ const variantNegative = {
 		return {
 			matcher: matcher.slice(1),
 			body: (body) => {
-				if (body.find((v) => v[0] === "$$mini-no-negative")) return;
+				if (body.some((v) => v[0] === "$$mini-no-negative")) return;
 				let changed = false;
 				for (const v of body) {
 					const [prop, rawValue, meta] = v;
@@ -11249,12 +11653,12 @@ const placeholderModifier = (input, { theme }) => {
 	const m = input.match(/^(.*)\b(placeholder-)(.+)$/);
 	if (m) {
 		const [, pre = "", p, body] = m;
-		if (hasParseableColor(body, theme) || hasOpacityValue(body)) return { matcher: `${pre}placeholder-$ ${p}${body}` };
+		if (hasParseableColor(body, theme) || hasOpacityValue(body, theme)) return { matcher: `${pre}placeholder-$ ${p}${body}` };
 	}
 };
-function hasOpacityValue(body) {
+function hasOpacityValue(body, theme) {
 	const match = body.match(/^op(?:acity)?-?(.+)$/);
-	if (match && match[1] != null) return h.bracket.percent(match[1]) != null;
+	if (match && match[1] != null) return h.bracket.percent(match[1], theme) != null;
 	return false;
 }
 function variantPseudoClassesAndElements() {
@@ -11298,7 +11702,7 @@ const variantSupports = {
 		const variant = variantGetParameter("supports-", matcher, ctx.generator.config.separators);
 		if (variant) {
 			const [match, rest] = variant;
-			let supports = h.bracket(match) ?? "";
+			let supports = h.bracket(match, ctx.theme) ?? "";
 			if (supports === "") supports = ctx.theme.supports?.[match] ?? "";
 			if (supports) {
 				if (!(supports.startsWith("(") && supports.endsWith(")"))) supports = `(${supports})`;
@@ -12024,6 +12428,8 @@ const frameworkConfigRE = /^(?:vite|svelte|astro|iles|nuxt|unocss|uno)\.config/;
 const unoConfigRE = /\buno(?:css)?\.config\./;
 const excludeFileRE = /[\\/](?:node_modules|dist|\.temp|\.cache)[\\/]/;
 var ContextManager = class {
+	cwd;
+	connection;
 	ready;
 	contextsMap = /* @__PURE__ */ new Map();
 	configSources = [];
@@ -12284,8 +12690,11 @@ const defaultSettings = {
 //#endregion
 //#region src/utils/color.ts
 const matchCssVarNameRE = /var\((?<cssVarName>--[^,|)]+)(?:,(?<fallback>[^)]+))?\)/g;
-const cssColorRE = /(?:#|0x)(?:[a-f0-9]{3}|[a-f0-9]{6})\b|(?:rgb|rgba|hsl|hsla|oklch)\(.*\)/g;
+const cssColorSource = String.raw`(?:#|0x)(?:[a-f0-9]{3}|[a-f0-9]{4}|[a-f0-9]{6}|[a-f0-9]{8})\b|(?:rgb|rgba|hsl|hsla|oklch)\([^)]*\)`;
+const cssColorRE = new RegExp(cssColorSource, "g");
 const varFnRE = /var\((--[^,|)]+)(?:,([^)]+))?\)/;
+const cssColorPropertyRE = /(?:^|[;{]\s*)(?:[\w-]+-color|color|fill|stroke)\s*:\s*(?<value>[^;}{]+)/gm;
+const colorMixWithWeightRE = new RegExp(String.raw`color-mix\([^,]+,\s*(?<color>${cssColorSource})\s+(?<weight>\d+(?:\.\d+)?%)\s*,\s*transparent\s*\)`, "i");
 function getCssVariables(code) {
 	const regex = /(?<key>--[^\s:]+):(?<value>.+?)[!;]/g;
 	const cssVariables = /* @__PURE__ */ new Map();
@@ -12295,6 +12704,49 @@ function getCssVariables(code) {
 	}
 	return cssVariables;
 }
+function resolveVarToken(value, cssVars) {
+	let nextValue = value.trim();
+	while (nextValue.startsWith("var(")) {
+		const varMatch = nextValue.match(varFnRE);
+		if (!varMatch) break;
+		const varName = varMatch[1];
+		const fallback = varMatch[2]?.trim();
+		const cssVarValue = cssVars.get(varName)?.trim();
+		if (cssVarValue) {
+			nextValue = cssVarValue;
+			continue;
+		}
+		if (fallback) return fallback;
+		return "1";
+	}
+	return nextValue;
+}
+function resolveCssVars(value, cssVars) {
+	let output = value;
+	for (const match of value.matchAll(matchCssVarNameRE)) {
+		const matchedString = match[0];
+		const cssVarName = match.groups?.cssVarName;
+		const fallback = match.groups?.fallback;
+		if (!cssVarName) continue;
+		const cssVarValue = cssVars.get(cssVarName);
+		if (cssVarValue) output = output.replaceAll(matchedString, resolveVarToken(cssVarValue, cssVars));
+		else if (fallback) output = output.replaceAll(matchedString, fallback);
+	}
+	return output.replaceAll(/,?\s+var\(--.*?\)/g, "");
+}
+function getColorStringFromValue(value, cssVars) {
+	const resolvedValue = resolveCssVars(value, cssVars);
+	const colorMixMatch = resolvedValue.match(colorMixWithWeightRE);
+	if (colorMixMatch?.groups?.color) {
+		const colorFromMix = colorMixMatch.groups.color;
+		const weight = colorMixMatch.groups.weight;
+		if (colorFromMix) return /\//.test(colorFromMix) ? colorFromMix : colorFromMix.replace(/\)$/, ` / ${weight})`);
+	}
+	let colorString = resolvedValue.match(cssColorRE)?.[0];
+	if (!colorString) return;
+	if (/\/\)/.test(colorString)) colorString = colorString.replace(/ \/\)/g, "/ 1)");
+	return colorString;
+}
 /**
 * Get CSS color string from CSS string
 *
@@ -12327,56 +12779,25 @@ function getCssVariables(code) {
 * @returns The **first** CSS color string (hex, rgb[a], hsl[a]) or `undefined`
 */
 function getColorString(str) {
-	let colorString = str.match(cssColorRE)?.[0];
-	if (!colorString) return;
 	const cssVars = getCssVariables(str);
-	for (const match of colorString.matchAll(matchCssVarNameRE)) {
-		const matchedString = match[0];
-		const cssVarName = match.groups?.cssVarName;
-		const fallback = match.groups?.fallback;
-		if (cssVarName && cssVars.get(cssVarName)) colorString = colorString.replaceAll(matchedString, () => {
-			let v = cssVars.get(cssVarName) ?? matchedString;
-			while (v && v.startsWith("var(")) {
-				const varName = v.match(varFnRE)?.[1];
-				if (!varName) {
-					v = "";
-					break;
-				}
-				v = cssVars.get(varName) || "";
-			}
-			return v || "1";
-		});
-		else if (fallback) colorString = colorString.replaceAll(matchedString, fallback);
-		colorString = colorString.replaceAll(/,?\s+var\(--.*?\)/g, "");
+	for (const match of str.matchAll(cssColorPropertyRE)) {
+		const value = match.groups?.value;
+		if (!value) continue;
+		const color = getColorStringFromValue(value, cssVars);
+		if (color) return color;
 	}
-	if (/\/\)/.test(colorString)) colorString = colorString.replace(/ \/\)/g, "/ 1)");
-	return convertToRGBA(colorString);
-}
-const reRgbFn = /rgb\((\d+)\s+(\d+)\s+(\d+)\s*\/\s*([\d.]+)\)/;
-function convertToRGBA(rgbColor) {
-	const match = rgbColor.match(reRgbFn);
-	if (match) return `rgba(${Number.parseInt(match[1].trim())}, ${Number.parseInt(match[2].trim())}, ${Number.parseInt(match[3].trim())}, ${Number.parseFloat(match[4].trim())})`;
-	return rgbColor;
+	return getColorStringFromValue(str, cssVars);
 }
 function parseColorToRGBA(colorString) {
-	const rgbaMatch = colorString.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
-	if (rgbaMatch) return {
-		red: Number.parseInt(rgbaMatch[1]) / 255,
-		green: Number.parseInt(rgbaMatch[2]) / 255,
-		blue: Number.parseInt(rgbaMatch[3]) / 255,
-		alpha: rgbaMatch[4] ? Number.parseFloat(rgbaMatch[4]) : 1
+	const color = colordx(colorString);
+	if (!color.isValid()) return void 0;
+	const rgb = color.toRgb();
+	return {
+		red: rgb.r / 255,
+		green: rgb.g / 255,
+		blue: rgb.b / 255,
+		alpha: rgb.alpha
 	};
-	const hexMatch = colorString.match(/^#([a-f0-9]{3,6})$/i);
-	if (hexMatch) {
-		let hex = hexMatch[1];
-		if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
-		return {
-			red: Number.parseInt(hex.slice(0, 2), 16) / 255,
-			green: Number.parseInt(hex.slice(2, 4), 16) / 255,
-			blue: Number.parseInt(hex.slice(4, 6), 16) / 255,
-			alpha: 1
-		};
-	}
 }
 //#endregion
 //#region src/utils/css.ts
@@ -12404,9 +12825,9 @@ function addRemToPxComment(str, remToPixel = 16) {
 	output.push(str.slice(index));
 	return output.join("");
 }
-async function getCSS(uno, utilName) {
+async function getCSS(uno, utilName, preflights = false) {
 	const { css } = await uno.generate(new Set(toArray(utilName)), {
-		preflights: false,
+		preflights,
 		safelist: false
 	});
 	return css;
@@ -12417,7 +12838,7 @@ async function getPrettiedCSS(uno, util, remToPxRatio) {
 		safelist: false
 	});
 	const css = addRemToPxComment(result.css, remToPxRatio);
-	const prettified = prettier.format(css, {
+	const prettified = await prettier.format(css, {
 		parser: "css",
 		plugins: [parserCSS]
 	});
@@ -12430,4 +12851,4 @@ async function getPrettiedMarkdown(uno, util, remToPxRatio) {
 	return `\`\`\`css\n${(await getPrettiedCSS(uno, util, remToPxRatio)).prettified.trimEnd()}\n\`\`\``;
 }
 //#endregion
-export { ContextManager, addRemToPxComment, clearDocumentCache, convertToRGBA, defaultSettings, getCSS, getColorString, getMatchedPositionsFromCode, getMatchedPositionsFromDoc, getPrettiedCSS, getPrettiedMarkdown, isSubdir, isVueWithPug, parseColorToRGBA, shouldProvideAutocomplete };
+export { ContextManager, addRemToPxComment, clearDocumentCache, defaultSettings, getCSS, getColorString, getMatchedPositionsFromCode, getMatchedPositionsFromDoc, getPrettiedCSS, getPrettiedMarkdown, isSubdir, isVueWithPug, parseColorToRGBA, shouldProvideAutocomplete, __require$1 as t };