@yahoo/uds 3.100.0-beta.3 → 3.100.0

package/dist/tailwind/dist/utils/generatePurgeCSSData.js

@@ -0,0 +1,181 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { defaultTokensConfig } from "../../../config/dist/index.js";
+import { autoVariants } from "../../../automated-config/dist/generated/autoVariants.js";
+import { red } from "../../../cli/dist/lib/colors.js";
+import { print } from "../../../cli/dist/lib/print.js";
+import { tailwindPlugin } from "../plugin.js";
+import { findReferencesAsJsxElements, getReactFunctionDeclaration, getUsedPropsInReference } from "./tsMorph.js";
+import { SyntaxKind } from "ts-morph";
+import postcss from "postcss";
+import tailwindcss from "tailwindcss";
+
+//#region ../tailwind/dist/utils/generatePurgeCSSData.js
+/*! © 2026 Yahoo, Inc. UDS Tailwind and Purger v0.0.0-development */
+const NO_FILE = "noFile";
+/**
+* Returns a list of exported Components from UDS
+* both stable and experimental
+*/
+const getExportedComponents = (UDS, UDS_EXPERIMENTAL) => {
+	const udsStableExports = Object.keys(UDS);
+	const udsExperimentalExports = Object.keys(UDS_EXPERIMENTAL);
+	return udsStableExports.concat(udsExperimentalExports).filter((key) => {
+		const regexStartsWithCapitalLetter = /* @__PURE__ */ new RegExp("^[A-Z].[^_]");
+		const hasUnderscore = key.includes("_");
+		const startsWithCapitalLetter = regexStartsWithCapitalLetter.test(key);
+		return !hasUnderscore && startsWithCapitalLetter;
+	});
+};
+/**
+* Some UDS components are built using other UDS components,
+* we need to know those dependencies so generate the correct
+*/
+const getComponentsDependencies = (project, componentsList, exportsToFilePath) => {
+	const componentsListSet = new Set(componentsList);
+	const componentUDSDependencies = {};
+	componentsList.forEach((component) => {
+		componentUDSDependencies[component] = getComponentUdsDependencies(project, componentsListSet, component, exportsToFilePath);
+	});
+	return componentUDSDependencies;
+};
+/**
+* We need to make sure that components from UDS that use other components
+* from UDS also gets included
+*/
+const getComponentUdsDependencies = (project, componentsList, componentName, exportsToFilePath) => {
+	return project.getSourceFileOrThrow(exportsToFilePath[componentName]).getImportDeclarations().map((declaration) => {
+		return declaration.getNamedImports().map((namedImport) => namedImport.getName());
+	}).flat().filter((namedImport) => componentsList.has(namedImport));
+};
+const getComponentsProps = (project, list, variants, variantsList, exportsToFilePath) => {
+	const map = {};
+	list.forEach((componentName) => {
+		map[componentName] = getInitializedAndReferencedProps(project, componentName, variants, variantsList, exportsToFilePath);
+	});
+	return map;
+};
+/**
+* Converts the variants object used in CVA to
+*/
+const convertVariantsIntoTailwindClass = (variants) => {
+	return Object.keys(variants);
+};
+/**
+* Get the params with default values,
+* required and the ones used in references
+*/
+const getInitializedAndReferencedProps = (project, componentName, variants, variantsList, exportsToFilePath) => {
+	const sourceFile = project.getSourceFileOrThrow(exportsToFilePath[componentName] ?? NO_FILE);
+	const functionDeclarations = sourceFile.getFunctions();
+	const variableDeclarations = sourceFile.getVariableDeclarations();
+	const node = [...functionDeclarations, ...variableDeclarations].filter((declaration) => declaration.getName() === componentName)[0];
+	const functionDeclaration = getReactFunctionDeclaration(node);
+	if (!functionDeclaration) print(red(`No function declaration found for ${componentName}`));
+	const parameterDeclaration = functionDeclaration?.getParameters();
+	if (!parameterDeclaration || parameterDeclaration.length === 0) {
+		print(red(`No parameter declaration found for ${componentName}`));
+		return [];
+	}
+	if (!parameterDeclaration[0].getChildrenOfKind(SyntaxKind.ObjectBindingPattern)[0]) return [];
+	const references = findReferencesAsJsxElements(node.getFirstDescendantByKindOrThrow(SyntaxKind.Identifier));
+	const propsWithDefaultValues = parameterDeclaration[0].getChildrenOfKind(SyntaxKind.ObjectBindingPattern)[0].getElements().filter((el) => !!el.getInitializer()).map((el) => {
+		const stringLiteral = el.getDescendantsOfKind(SyntaxKind.StringLiteral)[0];
+		const propName = el.getName();
+		const values = [];
+		if (stringLiteral) values.push(stringLiteral.getLiteralText());
+		return [propName, values];
+	}).filter(([propName]) => variantsList.includes(propName));
+	const propsUsedInReferences = references.map((r) => getUsedPropsInReference(r, variants)).flat().filter(([propName]) => variantsList.includes(propName));
+	const mapPropToUsedOptions = /* @__PURE__ */ new Map();
+	propsWithDefaultValues.concat(propsUsedInReferences).forEach(([propName, propValues]) => {
+		if (propValues.length === 0) propValues = Object.keys(variants[propName]);
+		const options = mapPropToUsedOptions.get(propName) ?? /* @__PURE__ */ new Set();
+		propValues.forEach((val) => options.add(val));
+		mapPropToUsedOptions.set(propName, options);
+	});
+	return Array.from(mapPropToUsedOptions).map(([propName, options]) => [propName, Array.from(options)]);
+};
+/**
+* Gets the Tailwind CSS classes used in a component
+*/
+const getTwClassesInComponent = async (componentsList, exportsToFilePath) => {
+	const CSS_DATA = `
+    @tailwind components;
+    @tailwind utilities;
+  `;
+	const res = {};
+	const promises = componentsList.map((component) => {
+		return postcss([tailwindcss({
+			content: [exportsToFilePath[component]],
+			plugins: [tailwindPlugin({ config: defaultTokensConfig })]
+		})]).process(CSS_DATA, {
+			from: "app.css",
+			to: "./dist/app.css"
+		});
+	});
+	(await Promise.all(promises)).forEach((result, i) => {
+		const currentComponent = componentsList[i];
+		res[currentComponent] = result.root.nodes.map((node) => {
+			if (node.selector) return node.selector.replace(".", "");
+			return [];
+		}).join(" ").replace(/\s+/g, " ");
+	});
+	return res;
+};
+/**
+* Goes through the list of all exports from UDS (stable and experimental)
+* and return a map of each exports and the source file path where its declared
+*/
+const getExportsToFilePath = (project) => {
+	const stableComponentsMainFile = project.getSourceFileOrThrow("./src/components/index.ts");
+	const experimentalComponentsMainFile = project.getSourceFileOrThrow("./src/components/experimental/index.ts");
+	const exportToFilePath = {};
+	for (const [name, declarations] of stableComponentsMainFile.getExportedDeclarations()) exportToFilePath[name] = declarations.map((d) => d.getSourceFile().getFilePath())[0];
+	for (const [name, declarations] of experimentalComponentsMainFile.getExportedDeclarations()) exportToFilePath[name] = declarations.map((d) => d.getSourceFile().getFilePath())[0];
+	return exportToFilePath;
+};
+/**
+* Adds auto-generated variants to the Tailwind CSS classes of components.
+*
+* This function extracts component names from auto variants keys, groups class names by component,
+* updates component classes using auto-generated variant classes, and propagates base classes to subcomponents.
+*
+* @param componentToTwClasses - A map of component names to their current Tailwind CSS classes.
+* @returns Updated map with auto variants added to the component classes.
+*/
+const addAutoVariantsToComponentClasses = (componentToTwClasses) => {
+	const componentNameRegex = /^([a-z]+)[A-Z]/;
+	const componentNameMap = {};
+	const componentNameLookup = /* @__PURE__ */ new Map();
+	Object.keys(componentToTwClasses).forEach((actualName) => {
+		componentNameLookup.set(actualName.toLowerCase(), actualName);
+	});
+	Object.keys(autoVariants).forEach((key) => {
+		const match = key.match(componentNameRegex);
+		if (match && match[1]) {
+			const extractedName = match[1].charAt(0).toUpperCase() + match[1].slice(1);
+			const actualComponentName = componentNameLookup.get(extractedName.toLowerCase()) || extractedName;
+			if (!componentNameMap[actualComponentName]) componentNameMap[actualComponentName] = [];
+			Object.values(autoVariants[key]).forEach((className) => {
+				componentNameMap[actualComponentName].push(className);
+			});
+		}
+	});
+	Object.entries(componentNameMap).forEach(([componentName, classes]) => {
+		componentToTwClasses[componentName] = `${componentToTwClasses[componentName] || ""} ${classes.join(" ")}`.trim();
+	});
+	const components = Object.keys(componentNameMap);
+	Object.keys(componentToTwClasses).forEach((key) => {
+		components.forEach((comp) => {
+			const compName = comp.charAt(0).toUpperCase() + comp.slice(1);
+			if (key.startsWith(compName) && key !== compName) {
+				const baseClasses = componentToTwClasses[compName] || "";
+				if (baseClasses) componentToTwClasses[key] = `${componentToTwClasses[key]} ${baseClasses}`.trim();
+			}
+		});
+	});
+	return componentToTwClasses;
+};
+
+//#endregion
+export { addAutoVariantsToComponentClasses, convertVariantsIntoTailwindClass, getComponentsDependencies, getComponentsProps, getExportedComponents, getExportsToFilePath, getTwClassesInComponent };

package/dist/tailwind/dist/utils/mapValues.cjs

@@ -0,0 +1,13 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+
+//#region ../tailwind/dist/utils/mapValues.js
+/*! © 2026 Yahoo, Inc. UDS Tailwind and Purger v0.0.0-development */
+function mapValues(obj, callbackFn) {
+	return Object.keys(obj).reduce((acc, key, i) => {
+		acc[key] = callbackFn(obj[key], key, i);
+		return acc;
+	}, {});
+}
+
+//#endregion
+exports.mapValues = mapValues;

package/dist/tailwind/dist/utils/mapValues.js

@@ -0,0 +1,12 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+//#region ../tailwind/dist/utils/mapValues.js
+/*! © 2026 Yahoo, Inc. UDS Tailwind and Purger v0.0.0-development */
+function mapValues(obj, callbackFn) {
+	return Object.keys(obj).reduce((acc, key, i) => {
+		acc[key] = callbackFn(obj[key], key, i);
+		return acc;
+	}, {});
+}
+
+//#endregion
+export { mapValues };

package/dist/{tokens → tailwind/dist}/utils/opacity.cjs

@@ -1,10 +1,9 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
-let lodash_clamp_js = require("lodash/clamp.js");
-lodash_clamp_js = require_runtime.__toESM(lodash_clamp_js);
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+let lodash_es = require("lodash-es");
 
-//#region src/tokens/utils/opacity.ts
+//#region ../tailwind/dist/utils/opacity.js
+/*! © 2026 Yahoo, Inc. UDS Tailwind and Purger v0.0.0-development */
 /**
 * Converts a number or string to a valid OpacityStep.
 *
@@ -21,7 +20,7 @@ function parseOpacityStep(opacity) {
 	if (opacity === void 0 || opacity === null) throw new Error(`Invalid opacity value: ${opacity}`);
 	const parsed = typeof opacity === "number" ? opacity : parseInt(opacity, 10);
 	if (isNaN(parsed)) throw new Error(`Invalid opacity value: cannot parse "${opacity}" as a number`);
-	return (0, lodash_clamp_js.default)(parsed, 0, 100).toString();
+	return (0, lodash_es.clamp)(parsed, 0, 100).toString();
 }
 
 //#endregion

package/dist/{tokens → tailwind/dist}/utils/opacity.js

@@ -1,7 +1,8 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 import { clamp } from "lodash-es";
 
-//#region src/tokens/utils/opacity.ts
+//#region ../tailwind/dist/utils/opacity.js
+/*! © 2026 Yahoo, Inc. UDS Tailwind and Purger v0.0.0-development */
 /**
 * Converts a number or string to a valid OpacityStep.
 *

package/dist/tailwind/dist/utils/parseTokens.cjs

@@ -0,0 +1,136 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+const require_index = require('../../../palette/dist/index.cjs');
+const require_index$1 = require('../../../css-tokens/dist/index.cjs');
+const require_entries = require('./entries.cjs');
+const require_mapValues = require('./mapValues.cjs');
+const require_opacity = require('./opacity.cjs');
+
+//#region ../tailwind/dist/utils/parseTokens.js
+/*! © 2026 Yahoo, Inc. UDS Tailwind and Purger v0.0.0-development */
+function shouldIncludeOpacity(opacity) {
+	if (!opacity) return false;
+	const parsedOpacity = parseInt(opacity, 10);
+	return !isNaN(parsedOpacity) && parsedOpacity !== 100;
+}
+function transformColors(colors, elevationPresets) {
+	const { palette, spectrum } = colors;
+	const rootVars = {};
+	const tailwindConfig = {
+		spectrum: {},
+		palette: {}
+	};
+	for (const [hue, hueSteps] of require_entries.entries(spectrum)) for (const [hueStep, value] of require_entries.entries(hueSteps)) {
+		const varKey = `--${require_index$1.SPECTRUM_COLOR_PREFIX}-${`${hue}-${hueStep}`}`;
+		if (!tailwindConfig.spectrum[hue]) tailwindConfig.spectrum[hue] = {};
+		tailwindConfig.spectrum[hue][hueStep] = `rgb(var(${varKey}))`;
+		rootVars[varKey] = value;
+	}
+	require_entries.entries(palette).forEach(([paletteType, paletteConfig]) => {
+		for (const [paletteKey, { hue, step, opacity }] of Object.entries(paletteConfig)) {
+			if (!(paletteType in tailwindConfig.palette)) tailwindConfig.palette[paletteType] = {};
+			const name = `--${require_index$1.UDS_PREFIX}-${paletteType}-color-${paletteKey}`;
+			rootVars[name] = `var(--${require_index$1.SPECTRUM_COLOR_PREFIX}-${hue}-${step})`;
+			const opacityValue = opacity !== void 0 ? require_opacity.parseOpacityStep(opacity) : void 0;
+			tailwindConfig.palette[paletteType][paletteKey] = shouldIncludeOpacity(opacityValue) ? `rgb(var(${name}) / ${opacityValue}%)` : `rgb(var(${name}))`;
+		}
+	});
+	require_entries.entries(elevationPresets).forEach(([level, elevationPreset]) => {
+		if (elevationPreset) require_entries.entries(elevationPreset).forEach(([key]) => {
+			if (key === "finalBackgroundValue") {
+				const { r, g, b, a } = elevationPreset[key];
+				const alpha = parseInt(a) / 100;
+				const name = `--${require_index$1.BACKGROUND_COLOR_PREFIX}-elevation-${level}`;
+				rootVars[name] = `rgba(${r}, ${g}, ${b}, ${alpha})`;
+			}
+			if (key === "borderColor") {
+				const name = `--${require_index$1.LINE_COLOR_PREFIX}-elevation-${level}`;
+				switch (elevationPreset[key].type) {
+					case "always":
+						rootVars[name] = require_index.alwaysPalette[elevationPreset[key].value];
+						break;
+					case "spectrum":
+						rootVars[name] = `rgb(var(--${require_index$1.SPECTRUM_COLOR_PREFIX}-${elevationPreset[key].value.hue}-${elevationPreset[key].value.step}))`;
+						break;
+					case "line":
+						rootVars[name] = `rgb(var(--${require_index$1.LINE_COLOR_PREFIX}-${elevationPreset[key].value}))`;
+						break;
+				}
+			}
+			if (key === "borderWidth") {
+				const name = `--${require_index$1.BORDER_WIDTH_PREFIX}-elevation-${level}`;
+				rootVars[name] = `var(--${require_index$1.BORDER_WIDTH_PREFIX}-${elevationPreset[key]})`;
+			}
+			if (key === "dropShadow") {
+				const name = `--${require_index$1.DROP_SHADOW_PREFIX}-elevation-${level}`;
+				const configValue = elevationPreset[key];
+				rootVars[name] = Array.isArray(configValue) ? configValue.map((preset, index) => require_index$1.getShadowLayerValue({
+					preset,
+					prefix: index > 0 ? `${index + 1}` : void 0,
+					shadowType: "drop"
+				})).join(", ") : `var(--${require_index$1.DROP_SHADOW_PREFIX}-${elevationPreset[key]})`;
+			}
+			if (key === "backgroundBlurRadius") {
+				const name = `--${require_index$1.BACKGROUND_BLUR_RADIUS_PREFIX}-elevation-${level}`;
+				rootVars[name] = `blur(${elevationPreset[key]}px)`;
+			}
+			if (key === "fallbackBlurredBackgroundValue") {
+				const { r, g, b } = elevationPreset[key];
+				const name = `--${require_index$1.BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX}-elevation-${level}`;
+				rootVars[name] = `rgb(${r}, ${g}, ${b})`;
+			}
+		});
+	});
+	return {
+		_vars: rootVars,
+		_raw: colors,
+		tailwindConfig
+	};
+}
+function transformNumericToPx(prefix, config) {
+	if (!config) return {
+		_vars: {},
+		_raw: {},
+		tailwindConfig: {}
+	};
+	const rootVars = {};
+	const tailwindConfig = {};
+	for (const [variant, value] of require_entries.entries(config)) {
+		const rootVarKey = `--${prefix}-${variant}`;
+		rootVars[rootVarKey] = `${value}px`;
+		tailwindConfig[variant] = `var(${rootVarKey})`;
+	}
+	return {
+		_vars: rootVars,
+		_raw: config,
+		tailwindConfig
+	};
+}
+function getElevationPresetsForColorMode(colorMode, config) {
+	if (!config.elevation) return {};
+	const result = {};
+	require_entries.entries(config.elevation).forEach(([level, levelPreset]) => {
+		result[level] = levelPreset[colorMode];
+	});
+	return result;
+}
+function parseTokens(config) {
+	const { colorMode, scaleMode } = config;
+	return {
+		...config,
+		colorMode: {
+			light: transformColors(colorMode.light, getElevationPresetsForColorMode("light", config)),
+			dark: transformColors(colorMode.dark, getElevationPresetsForColorMode("dark", config))
+		},
+		scaleMode: require_mapValues.mapValues(scaleMode, ({ borderRadius, borderWidth, avatarSizes, iconSizes }) => {
+			return {
+				borderRadius: transformNumericToPx(require_index$1.BORDER_RADIUS_PREFIX, borderRadius),
+				borderWidth: transformNumericToPx(require_index$1.BORDER_WIDTH_PREFIX, borderWidth),
+				avatarSizes: transformNumericToPx(require_index$1.AVATAR_SIZE_PREFIX, avatarSizes),
+				iconSizes: transformNumericToPx(require_index$1.ICON_SIZE_PREFIX, iconSizes)
+			};
+		})
+	};
+}
+
+//#endregion
+exports.parseTokens = parseTokens;

package/dist/tailwind/dist/utils/parseTokens.d.cts

@@ -0,0 +1,32 @@
+
+import { ColorMode, ColorsConfig, ElevationLevel, ElevationPreset, Hue, HueStep, PaletteConfig, PaletteType, ScaleMode } from "../../../types/dist/index.cjs";
+import { UniversalTokensConfig } from "../../../config/dist/index.cjs";
+
+//#region ../tailwind/dist/utils/parseTokens.d.ts
+//#region src/utils/parseTokens.d.ts
+type ColorModeElevationPresets = Partial<Record<ElevationLevel, ElevationPreset>>;
+declare function transformColors(colors: ColorsConfig, elevationPresets: ColorModeElevationPresets): {
+  _vars: Record<string, string>;
+  _raw: ColorsConfig;
+  tailwindConfig: {
+    spectrum: Record<Hue, Record<HueStep, string>>;
+    palette: { [key in PaletteType]: Record<keyof PaletteConfig[key], string> };
+  };
+};
+declare function transformNumericToPx<T extends Record<string, number>>(prefix: string, config: T): {
+  _vars: Record<string, string>;
+  _raw: Record<string, number>;
+  tailwindConfig: Record<string, string>;
+};
+type WebTokens = Omit<UniversalTokensConfig, 'colorMode' | 'scaleMode' | 'fontFamily'> & {
+  colorMode: Record<ColorMode, ReturnType<typeof transformColors>>;
+  scaleMode: Record<ScaleMode, {
+    borderRadius: ReturnType<typeof transformNumericToPx>;
+    borderWidth: ReturnType<typeof transformNumericToPx>;
+    avatarSizes: ReturnType<typeof transformNumericToPx>;
+    iconSizes: ReturnType<typeof transformNumericToPx>;
+  }>;
+};
+declare function parseTokens(config: UniversalTokensConfig): WebTokens; //#endregion
+//#endregion
+export { type WebTokens, parseTokens };

package/dist/tailwind/dist/utils/parseTokens.d.ts

@@ -0,0 +1,32 @@
+
+import { ColorMode, ColorsConfig, ElevationLevel, ElevationPreset, Hue, HueStep, PaletteConfig, PaletteType, ScaleMode } from "../../../types/dist/index.js";
+import { UniversalTokensConfig } from "../../../config/dist/index.js";
+
+//#region ../tailwind/dist/utils/parseTokens.d.ts
+//#region src/utils/parseTokens.d.ts
+type ColorModeElevationPresets = Partial<Record<ElevationLevel, ElevationPreset>>;
+declare function transformColors(colors: ColorsConfig, elevationPresets: ColorModeElevationPresets): {
+  _vars: Record<string, string>;
+  _raw: ColorsConfig;
+  tailwindConfig: {
+    spectrum: Record<Hue, Record<HueStep, string>>;
+    palette: { [key in PaletteType]: Record<keyof PaletteConfig[key], string> };
+  };
+};
+declare function transformNumericToPx<T extends Record<string, number>>(prefix: string, config: T): {
+  _vars: Record<string, string>;
+  _raw: Record<string, number>;
+  tailwindConfig: Record<string, string>;
+};
+type WebTokens = Omit<UniversalTokensConfig, 'colorMode' | 'scaleMode' | 'fontFamily'> & {
+  colorMode: Record<ColorMode, ReturnType<typeof transformColors>>;
+  scaleMode: Record<ScaleMode, {
+    borderRadius: ReturnType<typeof transformNumericToPx>;
+    borderWidth: ReturnType<typeof transformNumericToPx>;
+    avatarSizes: ReturnType<typeof transformNumericToPx>;
+    iconSizes: ReturnType<typeof transformNumericToPx>;
+  }>;
+};
+declare function parseTokens(config: UniversalTokensConfig): WebTokens; //#endregion
+//#endregion
+export { type WebTokens, parseTokens };

package/dist/tailwind/dist/utils/parseTokens.js

@@ -0,0 +1,136 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { alwaysPalette } from "../../../palette/dist/index.js";
+import { AVATAR_SIZE_PREFIX, BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX, BACKGROUND_BLUR_RADIUS_PREFIX, BACKGROUND_COLOR_PREFIX, BORDER_RADIUS_PREFIX, BORDER_WIDTH_PREFIX, DROP_SHADOW_PREFIX, ICON_SIZE_PREFIX, LINE_COLOR_PREFIX, SPECTRUM_COLOR_PREFIX, UDS_PREFIX, getShadowLayerValue } from "../../../css-tokens/dist/index.js";
+import { entries } from "./entries.js";
+import { mapValues } from "./mapValues.js";
+import { parseOpacityStep } from "./opacity.js";
+
+//#region ../tailwind/dist/utils/parseTokens.js
+/*! © 2026 Yahoo, Inc. UDS Tailwind and Purger v0.0.0-development */
+function shouldIncludeOpacity(opacity) {
+	if (!opacity) return false;
+	const parsedOpacity = parseInt(opacity, 10);
+	return !isNaN(parsedOpacity) && parsedOpacity !== 100;
+}
+function transformColors(colors, elevationPresets) {
+	const { palette, spectrum } = colors;
+	const rootVars = {};
+	const tailwindConfig = {
+		spectrum: {},
+		palette: {}
+	};
+	for (const [hue, hueSteps] of entries(spectrum)) for (const [hueStep, value] of entries(hueSteps)) {
+		const varKey = `--${SPECTRUM_COLOR_PREFIX}-${`${hue}-${hueStep}`}`;
+		if (!tailwindConfig.spectrum[hue]) tailwindConfig.spectrum[hue] = {};
+		tailwindConfig.spectrum[hue][hueStep] = `rgb(var(${varKey}))`;
+		rootVars[varKey] = value;
+	}
+	entries(palette).forEach(([paletteType, paletteConfig]) => {
+		for (const [paletteKey, { hue, step, opacity }] of Object.entries(paletteConfig)) {
+			if (!(paletteType in tailwindConfig.palette)) tailwindConfig.palette[paletteType] = {};
+			const name = `--${UDS_PREFIX}-${paletteType}-color-${paletteKey}`;
+			rootVars[name] = `var(--${SPECTRUM_COLOR_PREFIX}-${hue}-${step})`;
+			const opacityValue = opacity !== void 0 ? parseOpacityStep(opacity) : void 0;
+			tailwindConfig.palette[paletteType][paletteKey] = shouldIncludeOpacity(opacityValue) ? `rgb(var(${name}) / ${opacityValue}%)` : `rgb(var(${name}))`;
+		}
+	});
+	entries(elevationPresets).forEach(([level, elevationPreset]) => {
+		if (elevationPreset) entries(elevationPreset).forEach(([key]) => {
+			if (key === "finalBackgroundValue") {
+				const { r, g, b, a } = elevationPreset[key];
+				const alpha = parseInt(a) / 100;
+				const name = `--${BACKGROUND_COLOR_PREFIX}-elevation-${level}`;
+				rootVars[name] = `rgba(${r}, ${g}, ${b}, ${alpha})`;
+			}
+			if (key === "borderColor") {
+				const name = `--${LINE_COLOR_PREFIX}-elevation-${level}`;
+				switch (elevationPreset[key].type) {
+					case "always":
+						rootVars[name] = alwaysPalette[elevationPreset[key].value];
+						break;
+					case "spectrum":
+						rootVars[name] = `rgb(var(--${SPECTRUM_COLOR_PREFIX}-${elevationPreset[key].value.hue}-${elevationPreset[key].value.step}))`;
+						break;
+					case "line":
+						rootVars[name] = `rgb(var(--${LINE_COLOR_PREFIX}-${elevationPreset[key].value}))`;
+						break;
+				}
+			}
+			if (key === "borderWidth") {
+				const name = `--${BORDER_WIDTH_PREFIX}-elevation-${level}`;
+				rootVars[name] = `var(--${BORDER_WIDTH_PREFIX}-${elevationPreset[key]})`;
+			}
+			if (key === "dropShadow") {
+				const name = `--${DROP_SHADOW_PREFIX}-elevation-${level}`;
+				const configValue = elevationPreset[key];
+				rootVars[name] = Array.isArray(configValue) ? configValue.map((preset, index) => getShadowLayerValue({
+					preset,
+					prefix: index > 0 ? `${index + 1}` : void 0,
+					shadowType: "drop"
+				})).join(", ") : `var(--${DROP_SHADOW_PREFIX}-${elevationPreset[key]})`;
+			}
+			if (key === "backgroundBlurRadius") {
+				const name = `--${BACKGROUND_BLUR_RADIUS_PREFIX}-elevation-${level}`;
+				rootVars[name] = `blur(${elevationPreset[key]}px)`;
+			}
+			if (key === "fallbackBlurredBackgroundValue") {
+				const { r, g, b } = elevationPreset[key];
+				const name = `--${BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX}-elevation-${level}`;
+				rootVars[name] = `rgb(${r}, ${g}, ${b})`;
+			}
+		});
+	});
+	return {
+		_vars: rootVars,
+		_raw: colors,
+		tailwindConfig
+	};
+}
+function transformNumericToPx(prefix, config) {
+	if (!config) return {
+		_vars: {},
+		_raw: {},
+		tailwindConfig: {}
+	};
+	const rootVars = {};
+	const tailwindConfig = {};
+	for (const [variant, value] of entries(config)) {
+		const rootVarKey = `--${prefix}-${variant}`;
+		rootVars[rootVarKey] = `${value}px`;
+		tailwindConfig[variant] = `var(${rootVarKey})`;
+	}
+	return {
+		_vars: rootVars,
+		_raw: config,
+		tailwindConfig
+	};
+}
+function getElevationPresetsForColorMode(colorMode, config) {
+	if (!config.elevation) return {};
+	const result = {};
+	entries(config.elevation).forEach(([level, levelPreset]) => {
+		result[level] = levelPreset[colorMode];
+	});
+	return result;
+}
+function parseTokens(config) {
+	const { colorMode, scaleMode } = config;
+	return {
+		...config,
+		colorMode: {
+			light: transformColors(colorMode.light, getElevationPresetsForColorMode("light", config)),
+			dark: transformColors(colorMode.dark, getElevationPresetsForColorMode("dark", config))
+		},
+		scaleMode: mapValues(scaleMode, ({ borderRadius, borderWidth, avatarSizes, iconSizes }) => {
+			return {
+				borderRadius: transformNumericToPx(BORDER_RADIUS_PREFIX, borderRadius),
+				borderWidth: transformNumericToPx(BORDER_WIDTH_PREFIX, borderWidth),
+				avatarSizes: transformNumericToPx(AVATAR_SIZE_PREFIX, avatarSizes),
+				iconSizes: transformNumericToPx(ICON_SIZE_PREFIX, iconSizes)
+			};
+		})
+	};
+}
+
+//#endregion
+export { parseTokens };