boss-css 0.0.14 → 0.0.16

package/dist/use/token/runtime-only.cjs

@@ -1,3 +1,4 @@
+const require_normalize = require('./normalize.cjs');
 const require_vars = require('./vars.cjs');
 const require_propMap = require('./propMap.cjs');
 
@@ -59,26 +60,13 @@ const tokenState = /* @__PURE__ */ new WeakMap();
 const tokenAlphaKeyPattern = /^[a-zA-Z0-9_.-]+$/;
 const getTokenState = (api) => {
 	if (tokenState.has(api)) return tokenState.get(api);
-	const tokens = mergeTokens(defaultTokens, api.tokens);
-	const byProp = /* @__PURE__ */ new Map();
-	for (const [group, values] of Object.entries(tokens)) {
-		const propsToMap = require_propMap.propMap.get(group) ?? new Set([group]);
-		for (const prop of propsToMap) {
-			const dashProp = api?.camelCaseToDash ? api.camelCaseToDash(prop) : prop;
-			byProp.set(prop, values);
-			byProp.set(dashProp, values);
-		}
-	}
-	const state = {
-		groups: tokens,
-		byProp
-	};
+	const state = { groups: require_normalize.normalizeTokens(mergeTokens(defaultTokens, api.tokens)) };
 	tokenState.set(api, state);
 	return state;
 };
 const resolveTokenParts = (values, pathParts) => {
 	if (!pathParts.length) return values;
-	return pathParts.reduce((acc, key) => acc?.[key]?.value ?? acc?.[key], values);
+	return pathParts.reduce((acc, key) => acc?.[key]?.value ?? acc?.[key]?.$value ?? acc?.[key], values);
 };
 const parseTokenAlphaValue = (value) => {
 	const slashIndex = value.lastIndexOf("/");
@@ -111,49 +99,50 @@ const getTokenPath = (api, prop, value) => {
 		source: "group"
 	};
 	if (typeof value !== "string") return null;
-	const { byProp, groups } = getTokenState(api);
+	const { groups } = getTokenState(api);
 	const dashProp = api?.camelCaseToDash ? api.camelCaseToDash(prop) : prop;
-	const groupCandidates = [
-		require_propMap.getTokenGroupForProp(prop),
-		require_propMap.getTokenGroupForProp(dashProp),
-		prop,
-		dashProp
-	].filter(Boolean);
-	let groupName = groupCandidates[0] ?? prop;
-	let values = byProp.get(prop) ?? byProp.get(dashProp);
-	if (!values) for (const candidate of groupCandidates) {
-		const groupValues = groups?.[candidate];
-		if (groupValues) {
-			groupName = candidate;
-			values = groupValues;
-			break;
-		}
-	}
-	if (!values) return null;
-	if (typeof value === "string") {
-		const tokenAlpha = parseTokenAlphaValue(value);
-		if (tokenAlpha) {
-			if (resolveTokenParts(values, tokenAlpha.base.split(".")) === void 0) return null;
-			if (tokenAlpha.alpha === null) return null;
+	const groupCandidates = [];
+	const seen = /* @__PURE__ */ new Set();
+	const addCandidate = (group) => {
+		if (!group || seen.has(group)) return;
+		seen.add(group);
+		groupCandidates.push(group);
+	};
+	for (const group of require_propMap.getTokenGroupsForProp(prop)) addCandidate(group);
+	for (const group of require_propMap.getTokenGroupsForProp(dashProp)) addCandidate(group);
+	addCandidate(prop);
+	addCandidate(dashProp);
+	if (!groupCandidates.length) return null;
+	if (typeof value !== "string") return null;
+	const tokenAlphaCandidate = parseTokenAlphaValue(value);
+	const baseParts = tokenAlphaCandidate ? tokenAlphaCandidate.base.split(".") : [];
+	const rawParts = value.split(".");
+	const colorTokens = groups?.color;
+	for (const group of groupCandidates) {
+		const values = groups?.[group];
+		if (!values) continue;
+		if (tokenAlphaCandidate && values === colorTokens) {
+			if (resolveTokenParts(values, baseParts) === void 0) continue;
+			if (tokenAlphaCandidate.alpha === null) return null;
 			return {
-				path: `${groupName}.${tokenAlpha.base}`,
+				path: `${group}.${tokenAlphaCandidate.base}`,
 				source: "prop",
 				values,
-				alpha: tokenAlpha.alpha,
+				alpha: tokenAlphaCandidate.alpha,
 				selectorValue: value
 			};
 		}
-		if (resolveTokenParts(values, value.split(".")) !== void 0) return {
-			path: `${groupName}.${value}`,
+		if (resolveTokenParts(values, rawParts) !== void 0) return {
+			path: `${group}.${value}`,
+			source: "prop",
+			values
+		};
+		if (value in values) return {
+			path: `${group}.${value}`,
 			source: "prop",
 			values
 		};
 	}
-	if (value in values) return {
-		path: `${groupName}.${value}`,
-		source: "prop",
-		values
-	};
 	return null;
 };
 const resolveRuntimeToken = (api, prop, value) => {

package/dist/use/token/runtime-only.mjs

@@ -1,5 +1,6 @@
+import { normalizeTokens } from "./normalize.mjs";
 import { createTokenVars } from "./vars.mjs";
-import { getTokenGroupForProp, propMap, setTokenPropGroups } from "./propMap.mjs";
+import { getTokenGroupsForProp, setTokenPropGroups } from "./propMap.mjs";
 
 //#region src/use/token/runtime-only.ts
 let currentApi = null;
@@ -59,26 +60,13 @@ const tokenState = /* @__PURE__ */ new WeakMap();
 const tokenAlphaKeyPattern = /^[a-zA-Z0-9_.-]+$/;
 const getTokenState = (api) => {
 	if (tokenState.has(api)) return tokenState.get(api);
-	const tokens = mergeTokens(defaultTokens, api.tokens);
-	const byProp = /* @__PURE__ */ new Map();
-	for (const [group, values] of Object.entries(tokens)) {
-		const propsToMap = propMap.get(group) ?? new Set([group]);
-		for (const prop of propsToMap) {
-			const dashProp = api?.camelCaseToDash ? api.camelCaseToDash(prop) : prop;
-			byProp.set(prop, values);
-			byProp.set(dashProp, values);
-		}
-	}
-	const state = {
-		groups: tokens,
-		byProp
-	};
+	const state = { groups: normalizeTokens(mergeTokens(defaultTokens, api.tokens)) };
 	tokenState.set(api, state);
 	return state;
 };
 const resolveTokenParts = (values, pathParts) => {
 	if (!pathParts.length) return values;
-	return pathParts.reduce((acc, key) => acc?.[key]?.value ?? acc?.[key], values);
+	return pathParts.reduce((acc, key) => acc?.[key]?.value ?? acc?.[key]?.$value ?? acc?.[key], values);
 };
 const parseTokenAlphaValue = (value) => {
 	const slashIndex = value.lastIndexOf("/");
@@ -111,49 +99,50 @@ const getTokenPath = (api, prop, value) => {
 		source: "group"
 	};
 	if (typeof value !== "string") return null;
-	const { byProp, groups } = getTokenState(api);
+	const { groups } = getTokenState(api);
 	const dashProp = api?.camelCaseToDash ? api.camelCaseToDash(prop) : prop;
-	const groupCandidates = [
-		getTokenGroupForProp(prop),
-		getTokenGroupForProp(dashProp),
-		prop,
-		dashProp
-	].filter(Boolean);
-	let groupName = groupCandidates[0] ?? prop;
-	let values = byProp.get(prop) ?? byProp.get(dashProp);
-	if (!values) for (const candidate of groupCandidates) {
-		const groupValues = groups?.[candidate];
-		if (groupValues) {
-			groupName = candidate;
-			values = groupValues;
-			break;
-		}
-	}
-	if (!values) return null;
-	if (typeof value === "string") {
-		const tokenAlpha = parseTokenAlphaValue(value);
-		if (tokenAlpha) {
-			if (resolveTokenParts(values, tokenAlpha.base.split(".")) === void 0) return null;
-			if (tokenAlpha.alpha === null) return null;
+	const groupCandidates = [];
+	const seen = /* @__PURE__ */ new Set();
+	const addCandidate = (group) => {
+		if (!group || seen.has(group)) return;
+		seen.add(group);
+		groupCandidates.push(group);
+	};
+	for (const group of getTokenGroupsForProp(prop)) addCandidate(group);
+	for (const group of getTokenGroupsForProp(dashProp)) addCandidate(group);
+	addCandidate(prop);
+	addCandidate(dashProp);
+	if (!groupCandidates.length) return null;
+	if (typeof value !== "string") return null;
+	const tokenAlphaCandidate = parseTokenAlphaValue(value);
+	const baseParts = tokenAlphaCandidate ? tokenAlphaCandidate.base.split(".") : [];
+	const rawParts = value.split(".");
+	const colorTokens = groups?.color;
+	for (const group of groupCandidates) {
+		const values = groups?.[group];
+		if (!values) continue;
+		if (tokenAlphaCandidate && values === colorTokens) {
+			if (resolveTokenParts(values, baseParts) === void 0) continue;
+			if (tokenAlphaCandidate.alpha === null) return null;
 			return {
-				path: `${groupName}.${tokenAlpha.base}`,
+				path: `${group}.${tokenAlphaCandidate.base}`,
 				source: "prop",
 				values,
-				alpha: tokenAlpha.alpha,
+				alpha: tokenAlphaCandidate.alpha,
 				selectorValue: value
 			};
 		}
-		if (resolveTokenParts(values, value.split(".")) !== void 0) return {
-			path: `${groupName}.${value}`,
+		if (resolveTokenParts(values, rawParts) !== void 0) return {
+			path: `${group}.${value}`,
+			source: "prop",
+			values
+		};
+		if (value in values) return {
+			path: `${group}.${value}`,
 			source: "prop",
 			values
 		};
 	}
-	if (value in values) return {
-		path: `${groupName}.${value}`,
-		source: "prop",
-		values
-	};
 	return null;
 };
 const resolveRuntimeToken = (api, prop, value) => {

package/dist/use/token/server.cjs

@@ -1,10 +1,12 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_normalize = require('./normalize.cjs');
 const require_propMap = require('./propMap.cjs');
 let ts_deepmerge = require("ts-deepmerge");
 
 //#region src/use/token/server.ts
 var server_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
 	getTokenGroupForProp: () => require_propMap.getTokenGroupForProp,
+	getTokenGroupsForProp: () => require_propMap.getTokenGroupsForProp,
 	getTokenPropGroups: () => require_propMap.getTokenPropGroups,
 	getTokens: () => getTokens,
 	name: () => name,
@@ -17,12 +19,14 @@ var server_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
 	setTokenPropGroups: () => require_propMap.setTokenPropGroups
 });
 const name = "token";
+let rawOriginals = {};
 let originals = {};
 const getTokens = () => originals;
 const set = (input) => {
 	const resolvedInput = typeof input === "object" ? input : input(valueMap);
-	originals = (0, ts_deepmerge.merge)(originals, resolvedInput);
-	for (const [key, value] of Object.entries(resolvedInput)) {
+	rawOriginals = (0, ts_deepmerge.merge)(rawOriginals, resolvedInput);
+	originals = require_normalize.normalizeTokens(rawOriginals);
+	for (const [key, value] of Object.entries(originals)) {
 		const propsToMap = require_propMap.propMap.get(key) || [key];
 		for (const prop of propsToMap) valueMap.set(prop, value);
 	}
@@ -72,7 +76,7 @@ const parseTokenAlphaValue = (value) => {
 };
 const resolveTokenParts = (values, pathParts) => {
 	if (!pathParts.length) return values;
-	return pathParts.reduce((acc, key) => acc?.[key]?.value ?? acc?.[key], values);
+	return pathParts.reduce((acc, key) => acc?.[key]?.value ?? acc?.[key]?.$value ?? acc?.[key], values);
 };
 const warnAlpha = (message) => {
 	if (alphaWarnings.has(message)) return;
@@ -96,6 +100,7 @@ const emitAllTokenVars = (api) => {
 	for (const [group, value] of Object.entries(originals)) addTokenVars(group, value);
 };
 const onBoot = async (api) => {
+	rawOriginals = {};
 	hasTokens = false;
 	hasProxyTokens = false;
 	hasTokenOverrides = false;
@@ -257,23 +262,84 @@ const onPropTree = async (api, { tree, parser }) => {
 		if (typeof pathString !== "string") return;
 		const [tokenGroupName, ...rest] = pathString.split(".");
 		const isExplicitToken = isTokenCodeString || typeof prop.value === "string" && prop.value.startsWith("$$.token.");
-		const groupForProp = typeof name === "string" ? require_propMap.getTokenGroupForProp(name) : null;
-		const resolvedGroupName = isExplicitToken ? tokenGroupName : groupForProp ?? tokenGroupName;
 		const { aliases } = descriptor;
-		const valuesByGroupName = valueMap.get(resolvedGroupName) ?? valueMap.get(tokenGroupName);
-		const values = aliases.reduce((acc, alias) => {
-			if (acc) return acc;
-			const direct = valueMap.get(alias);
-			if (direct) return direct;
-			const dashed = api.camelCaseToDash(alias);
-			return valueMap.get(dashed) || null;
-		}, null) || valuesByGroupName;
-		if (!values) return;
 		const rawValue = prop.value;
+		const dashName = typeof name === "string" ? api.camelCaseToDash(name) : "";
+		const groupCandidates = [];
+		const seenCandidates = /* @__PURE__ */ new Set();
+		const addCandidate = (group) => {
+			if (!group || seenCandidates.has(group)) return;
+			seenCandidates.add(group);
+			groupCandidates.push(group);
+		};
+		const addGroupsForProp = (propName) => {
+			if (!propName) return;
+			for (const group of require_propMap.getTokenGroupsForProp(propName)) addCandidate(group);
+		};
+		if (typeof name === "string") {
+			addGroupsForProp(name);
+			if (dashName && dashName !== name) addGroupsForProp(dashName);
+		}
+		for (const alias of aliases) {
+			addGroupsForProp(alias);
+			const dashedAlias = api.camelCaseToDash(alias);
+			if (dashedAlias && dashedAlias !== alias) addGroupsForProp(dashedAlias);
+		}
+		const addOriginalGroup = (groupName) => {
+			if (!groupName) return;
+			if (Object.prototype.hasOwnProperty.call(originals, groupName)) addCandidate(groupName);
+		};
+		if (typeof name === "string") {
+			addOriginalGroup(name);
+			if (dashName && dashName !== name) addOriginalGroup(dashName);
+		}
+		for (const alias of aliases) {
+			addOriginalGroup(alias);
+			const dashedAlias = api.camelCaseToDash(alias);
+			if (dashedAlias && dashedAlias !== alias) addOriginalGroup(dashedAlias);
+		}
+		const getOriginalGroupValues = (group) => originals[group];
+		let resolvedGroupName = isExplicitToken ? tokenGroupName : require_propMap.getTokenGroupForProp(String(name)) ?? tokenGroupName;
+		let values = null;
+		if (isExplicitToken) {
+			const valuesByGroupName = getOriginalGroupValues(resolvedGroupName) ?? getOriginalGroupValues(tokenGroupName) ?? valueMap.get(resolvedGroupName) ?? valueMap.get(tokenGroupName);
+			const valuesByPropName = aliases.reduce((acc, alias) => {
+				if (acc) return acc;
+				const direct = getOriginalGroupValues(alias) ?? valueMap.get(alias);
+				if (direct) return direct;
+				const dashed = api.camelCaseToDash(alias);
+				return getOriginalGroupValues(dashed) ?? valueMap.get(dashed) ?? null;
+			}, null);
+			values = valuesByGroupName || valuesByPropName;
+		} else if (typeof rawValue === "string") {
+			const tokenAlphaCandidate = parseTokenAlphaValue(rawValue);
+			const baseParts = tokenAlphaCandidate ? tokenAlphaCandidate.base.split(".") : [];
+			const rawParts = rawValue.split(".");
+			const colorTokens$1 = getOriginalGroupValues("color");
+			for (const group of groupCandidates) {
+				const groupValues = getOriginalGroupValues(group);
+				if (!groupValues) continue;
+				if (tokenAlphaCandidate && groupValues === colorTokens$1) {
+					if (resolveTokenParts(groupValues, baseParts) !== void 0) {
+						resolvedGroupName = group;
+						values = groupValues;
+						break;
+					}
+					continue;
+				}
+				if (resolveTokenParts(groupValues, rawParts) !== void 0) {
+					resolvedGroupName = group;
+					values = groupValues;
+					break;
+				}
+			}
+		}
+		if (!values) return;
 		const colorTokens = valueMap.get("color");
 		const tokenAlpha = typeof rawValue === "string" && values && colorTokens && values === colorTokens ? parseTokenAlphaValue(rawValue) : null;
 		if (tokenAlpha) {
-			const baseValue = resolveTokenParts(values, tokenAlpha.base.split("."));
+			const baseParts = tokenAlpha.base.split(".");
+			const baseValue = resolveTokenParts(values, baseParts);
 			if (baseValue === void 0) {
 				warnAlpha(`Unknown token "${tokenAlpha.base}" for "${name}:${rawValue}".`);
 				return;
@@ -316,6 +382,7 @@ const onPropTree = async (api, { tree, parser }) => {
 
 //#endregion
 exports.getTokenGroupForProp = require_propMap.getTokenGroupForProp;
+exports.getTokenGroupsForProp = require_propMap.getTokenGroupsForProp;
 exports.getTokenPropGroups = require_propMap.getTokenPropGroups;
 exports.getTokens = getTokens;
 exports.name = name;

package/dist/use/token/server.mjs

@@ -1,10 +1,12 @@
 import { __exportAll } from "../../_virtual/rolldown_runtime.mjs";
-import { getTokenGroupForProp, getTokenPropGroups, propMap, setTokenPropGroups } from "./propMap.mjs";
+import { normalizeTokens } from "./normalize.mjs";
+import { getTokenGroupForProp, getTokenGroupsForProp, getTokenPropGroups, propMap, setTokenPropGroups } from "./propMap.mjs";
 import { merge } from "ts-deepmerge";
 
 //#region src/use/token/server.ts
 var server_exports = /* @__PURE__ */ __exportAll({
 	getTokenGroupForProp: () => getTokenGroupForProp,
+	getTokenGroupsForProp: () => getTokenGroupsForProp,
 	getTokenPropGroups: () => getTokenPropGroups,
 	getTokens: () => getTokens,
 	name: () => name,
@@ -17,12 +19,14 @@ var server_exports = /* @__PURE__ */ __exportAll({
 	setTokenPropGroups: () => setTokenPropGroups
 });
 const name = "token";
+let rawOriginals = {};
 let originals = {};
 const getTokens = () => originals;
 const set = (input) => {
 	const resolvedInput = typeof input === "object" ? input : input(valueMap);
-	originals = merge(originals, resolvedInput);
-	for (const [key, value] of Object.entries(resolvedInput)) {
+	rawOriginals = merge(rawOriginals, resolvedInput);
+	originals = normalizeTokens(rawOriginals);
+	for (const [key, value] of Object.entries(originals)) {
 		const propsToMap = propMap.get(key) || [key];
 		for (const prop of propsToMap) valueMap.set(prop, value);
 	}
@@ -72,7 +76,7 @@ const parseTokenAlphaValue = (value) => {
 };
 const resolveTokenParts = (values, pathParts) => {
 	if (!pathParts.length) return values;
-	return pathParts.reduce((acc, key) => acc?.[key]?.value ?? acc?.[key], values);
+	return pathParts.reduce((acc, key) => acc?.[key]?.value ?? acc?.[key]?.$value ?? acc?.[key], values);
 };
 const warnAlpha = (message) => {
 	if (alphaWarnings.has(message)) return;
@@ -96,6 +100,7 @@ const emitAllTokenVars = (api) => {
 	for (const [group, value] of Object.entries(originals)) addTokenVars(group, value);
 };
 const onBoot = async (api) => {
+	rawOriginals = {};
 	hasTokens = false;
 	hasProxyTokens = false;
 	hasTokenOverrides = false;
@@ -257,23 +262,84 @@ const onPropTree = async (api, { tree, parser }) => {
 		if (typeof pathString !== "string") return;
 		const [tokenGroupName, ...rest] = pathString.split(".");
 		const isExplicitToken = isTokenCodeString || typeof prop.value === "string" && prop.value.startsWith("$$.token.");
-		const groupForProp = typeof name === "string" ? getTokenGroupForProp(name) : null;
-		const resolvedGroupName = isExplicitToken ? tokenGroupName : groupForProp ?? tokenGroupName;
 		const { aliases } = descriptor;
-		const valuesByGroupName = valueMap.get(resolvedGroupName) ?? valueMap.get(tokenGroupName);
-		const values = aliases.reduce((acc, alias) => {
-			if (acc) return acc;
-			const direct = valueMap.get(alias);
-			if (direct) return direct;
-			const dashed = api.camelCaseToDash(alias);
-			return valueMap.get(dashed) || null;
-		}, null) || valuesByGroupName;
-		if (!values) return;
 		const rawValue = prop.value;
+		const dashName = typeof name === "string" ? api.camelCaseToDash(name) : "";
+		const groupCandidates = [];
+		const seenCandidates = /* @__PURE__ */ new Set();
+		const addCandidate = (group) => {
+			if (!group || seenCandidates.has(group)) return;
+			seenCandidates.add(group);
+			groupCandidates.push(group);
+		};
+		const addGroupsForProp = (propName) => {
+			if (!propName) return;
+			for (const group of getTokenGroupsForProp(propName)) addCandidate(group);
+		};
+		if (typeof name === "string") {
+			addGroupsForProp(name);
+			if (dashName && dashName !== name) addGroupsForProp(dashName);
+		}
+		for (const alias of aliases) {
+			addGroupsForProp(alias);
+			const dashedAlias = api.camelCaseToDash(alias);
+			if (dashedAlias && dashedAlias !== alias) addGroupsForProp(dashedAlias);
+		}
+		const addOriginalGroup = (groupName) => {
+			if (!groupName) return;
+			if (Object.prototype.hasOwnProperty.call(originals, groupName)) addCandidate(groupName);
+		};
+		if (typeof name === "string") {
+			addOriginalGroup(name);
+			if (dashName && dashName !== name) addOriginalGroup(dashName);
+		}
+		for (const alias of aliases) {
+			addOriginalGroup(alias);
+			const dashedAlias = api.camelCaseToDash(alias);
+			if (dashedAlias && dashedAlias !== alias) addOriginalGroup(dashedAlias);
+		}
+		const getOriginalGroupValues = (group) => originals[group];
+		let resolvedGroupName = isExplicitToken ? tokenGroupName : getTokenGroupForProp(String(name)) ?? tokenGroupName;
+		let values = null;
+		if (isExplicitToken) {
+			const valuesByGroupName = getOriginalGroupValues(resolvedGroupName) ?? getOriginalGroupValues(tokenGroupName) ?? valueMap.get(resolvedGroupName) ?? valueMap.get(tokenGroupName);
+			const valuesByPropName = aliases.reduce((acc, alias) => {
+				if (acc) return acc;
+				const direct = getOriginalGroupValues(alias) ?? valueMap.get(alias);
+				if (direct) return direct;
+				const dashed = api.camelCaseToDash(alias);
+				return getOriginalGroupValues(dashed) ?? valueMap.get(dashed) ?? null;
+			}, null);
+			values = valuesByGroupName || valuesByPropName;
+		} else if (typeof rawValue === "string") {
+			const tokenAlphaCandidate = parseTokenAlphaValue(rawValue);
+			const baseParts = tokenAlphaCandidate ? tokenAlphaCandidate.base.split(".") : [];
+			const rawParts = rawValue.split(".");
+			const colorTokens$1 = getOriginalGroupValues("color");
+			for (const group of groupCandidates) {
+				const groupValues = getOriginalGroupValues(group);
+				if (!groupValues) continue;
+				if (tokenAlphaCandidate && groupValues === colorTokens$1) {
+					if (resolveTokenParts(groupValues, baseParts) !== void 0) {
+						resolvedGroupName = group;
+						values = groupValues;
+						break;
+					}
+					continue;
+				}
+				if (resolveTokenParts(groupValues, rawParts) !== void 0) {
+					resolvedGroupName = group;
+					values = groupValues;
+					break;
+				}
+			}
+		}
+		if (!values) return;
 		const colorTokens = valueMap.get("color");
 		const tokenAlpha = typeof rawValue === "string" && values && colorTokens && values === colorTokens ? parseTokenAlphaValue(rawValue) : null;
 		if (tokenAlpha) {
-			const baseValue = resolveTokenParts(values, tokenAlpha.base.split("."));
+			const baseParts = tokenAlpha.base.split(".");
+			const baseValue = resolveTokenParts(values, baseParts);
 			if (baseValue === void 0) {
 				warnAlpha(`Unknown token "${tokenAlpha.base}" for "${name}:${rawValue}".`);
 				return;
@@ -315,4 +381,4 @@ const onPropTree = async (api, { tree, parser }) => {
 };
 
 //#endregion
-export { getTokenGroupForProp, getTokenPropGroups, getTokens, name, onBoot, onParse, onPropTree, onReady, propMap, server_exports, set, setTokenPropGroups };
+export { getTokenGroupForProp, getTokenGroupsForProp, getTokenPropGroups, getTokens, name, onBoot, onParse, onPropTree, onReady, propMap, server_exports, set, setTokenPropGroups };

package/dist/use/token/vars.cjs

@@ -1,3 +1,4 @@
+const require_normalize = require('./normalize.cjs');
 
 //#region src/use/token/vars.ts
 const isPlainObject = (value) => {
@@ -6,11 +7,15 @@ const isPlainObject = (value) => {
 const hasValueEntry = (value) => {
 	return isPlainObject(value) && Object.prototype.hasOwnProperty.call(value, "value");
 };
+const hasDtcgValueEntry = (value) => {
+	return isPlainObject(value) && Object.prototype.hasOwnProperty.call(value, "$value");
+};
 const createTokenVars = ({ prefix = "", toValue } = {}) => {
 	const resolveValue = toValue ?? ((value) => value == null ? value : String(value));
 	return (input) => {
 		const result = {};
 		if (!input || typeof input !== "object") return result;
+		const normalizedInput = require_normalize.normalizeTokens(input);
 		const applyVar = (path, group, value) => {
 			if (!path.length) return;
 			const name = `--${prefix}${path.join("-")}`;
@@ -36,9 +41,16 @@ const createTokenVars = ({ prefix = "", toValue } = {}) => {
 				applyVar(path, group, node.value);
 				return;
 			}
-			for (const [key, value] of Object.entries(node)) walk(value, [...path, key], group ?? key);
+			if (hasDtcgValueEntry(node)) {
+				applyVar(path, group, node.$value);
+				return;
+			}
+			for (const [key, value] of Object.entries(node)) {
+				if (key.startsWith("$")) continue;
+				walk(value, [...path, key], group ?? key);
+			}
 		};
-		walk(input, [], null);
+		walk(normalizedInput, [], null);
 		return result;
 	};
 };

package/dist/use/token/vars.mjs

@@ -1,3 +1,5 @@
+import { normalizeTokens } from "./normalize.mjs";
+
 //#region src/use/token/vars.ts
 const isPlainObject = (value) => {
 	return Boolean(value && typeof value === "object" && !Array.isArray(value));
@@ -5,11 +7,15 @@ const isPlainObject = (value) => {
 const hasValueEntry = (value) => {
 	return isPlainObject(value) && Object.prototype.hasOwnProperty.call(value, "value");
 };
+const hasDtcgValueEntry = (value) => {
+	return isPlainObject(value) && Object.prototype.hasOwnProperty.call(value, "$value");
+};
 const createTokenVars = ({ prefix = "", toValue } = {}) => {
 	const resolveValue = toValue ?? ((value) => value == null ? value : String(value));
 	return (input) => {
 		const result = {};
 		if (!input || typeof input !== "object") return result;
+		const normalizedInput = normalizeTokens(input);
 		const applyVar = (path, group, value) => {
 			if (!path.length) return;
 			const name = `--${prefix}${path.join("-")}`;
@@ -35,9 +41,16 @@ const createTokenVars = ({ prefix = "", toValue } = {}) => {
 				applyVar(path, group, node.value);
 				return;
 			}
-			for (const [key, value] of Object.entries(node)) walk(value, [...path, key], group ?? key);
+			if (hasDtcgValueEntry(node)) {
+				applyVar(path, group, node.$value);
+				return;
+			}
+			for (const [key, value] of Object.entries(node)) {
+				if (key.startsWith("$")) continue;
+				walk(value, [...path, key], group ?? key);
+			}
 		};
-		walk(input, [], null);
+		walk(normalizedInput, [], null);
 		return result;
 	};
 };