@yahoo/uds 3.66.1 → 3.67.0-beta.1

package/dist/tokens/automation/utils/index.js

@@ -0,0 +1,646 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { BUTTON_GAP_VAR, BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED, BUTTON_SCALE_EFFECT_REST } from "../../consts/cssTokens.js";
+import { configurableProperties } from "../properties.js";
+import { generateSchemaKey } from "./generateSchemaKey.js";
+import { isVariantConfigWithComponentStates, isVariantConfigWithProperties } from "./variantConfigGuards.js";
+import { cartesianProduct } from "./cartesianProduct.js";
+import { coalesceConfigVariant } from "./coalesceConfigVariant.js";
+import { getConfigDefaultValue, isConfigDefaultValue } from "./defaults.js";
+import { generateKeyFromFlatConfigPath } from "./generateKeyFromFlatConfigPath.js";
+import { getConfigVariantComponentStates, getConfigVariantComponentStatesMatrix } from "./getConfigVariantComponentStatesMatrix.js";
+import { getConfigVariantProperties } from "./getConfigVariantProperties.js";
+import { getConfigVariantPseudoStates } from "./getConfigVariantPseudoStates.js";
+import { getConfigSubcomponents } from "./subcomponents.js";
+import { getConfigVariants } from "./getConfigVariants.js";
+import { getConfigPseudoStateVariables, getConfigPseudoStateVariablesWithSetter, setConfigPseudoStateVariable } from "./variableData.js";
+import { isFunction, lowerCase, mergeWith } from "lodash-es";
+
+//#region src/tokens/automation/utils/index.ts
+const CSS_GAP = "gap";
+const CSS_LINE_HEIGHT = "line-height";
+const CSS_BORDER_WIDTH = "border-width";
+const CSS_BORDER_COLOR = "border-color";
+const CSS_BOX_SHADOW = "box-shadow";
+/**
+* Generates button line-height with icon size minimum.
+* Ensures button line-height is at least as tall as the icon to prevent clipping.
+* @returns Enhanced line-height CSS value with max(), or original value if icon size unavailable
+*/
+function getButtonLineHeightWithIconMinimum({ lineHeight, schema, iconLayerKey, state, theme }) {
+	const iconSizeValue = schema.variables?.[iconLayerKey]?.size?.[state]?.value;
+	if (!iconSizeValue) return lineHeight;
+	return `max(${lineHeight}, ${theme(`sizing.icon.${iconSizeValue}`)})`;
+}
+/**
+* Forces button borders to use box-shadow instead of border properties.
+* Converts border-width and border-color into an inset box-shadow layer.
+*
+* Why box-shadow for borders?
+* - Respects border-radius (unlike outline which stays rectangular)
+* - Allows layering multiple shadows in a single property
+* - GPU-accelerated and performant
+* - Works perfectly with rounded/circular buttons
+*
+* @param classStyles - The CSS declarations for a button class
+* @returns Modified styles with box-shadow layers, or original if no border
+*
+* @example
+* Input:  { border-width: '2px', border-color: 'red', box-shadow: '0 2px 4px rgba(0,0,0,0.1)' }
+* Output: { box-shadow: 'inset 0 0 0 2px red, 0 2px 4px rgba(0,0,0,0.1)' }
+*/
+function applyBoxShadowBorder(classStyles) {
+	const borderWidth = classStyles[CSS_BORDER_WIDTH];
+	const borderColor = classStyles[CSS_BORDER_COLOR];
+	if (!borderWidth || !borderColor) return classStyles;
+	const stripImportant = (value) => value.replace(/\s*!important\s*$/, "");
+	const hasImportant = (value) => value?.includes("!important") ?? false;
+	const layers = [`inset 0 0 0 ${stripImportant(borderWidth)} ${stripImportant(borderColor)}`, classStyles[CSS_BOX_SHADOW] && stripImportant(classStyles[CSS_BOX_SHADOW])].filter(Boolean);
+	const needsImportant = hasImportant(borderWidth) || hasImportant(borderColor) || hasImportant(classStyles[CSS_BOX_SHADOW]);
+	const newStyles = { ...classStyles };
+	newStyles[CSS_BOX_SHADOW] = layers.join(", ") + (needsImportant ? " !important" : "");
+	delete newStyles[CSS_BORDER_WIDTH];
+	delete newStyles[CSS_BORDER_COLOR];
+	return newStyles;
+}
+/**
+* Map our "states" to pseudo-classes (hover => :hover, pressed => :active, etc.).
+* Adjust or extend as needed.
+*/
+const statePseudoMap = {
+	rest: "",
+	hover: ":hover:not(:active, :disabled, :has(:disabled))",
+	pressed: ":active:not(:disabled, :has(:disabled))",
+	focused: ":focus",
+	"focus-within": ":focus-within",
+	invalid: ":has(input[aria-invalid=\"true\"])",
+	"focused-keyboard": ":focus-visible",
+	visited: ":visited",
+	readonly: ":has(input:read-only)",
+	disabled: ":is(:disabled, :has(:disabled))",
+	"invalid&hover": ":has(input[aria-invalid=\"true\"]):hover:not(:active, :disabled, :has(:disabled))",
+	"invalid&pressed": ":has(input[aria-invalid=\"true\"]):active:not(:disabled, :has(:disabled))"
+};
+const statePseudoMapDocsMode = {
+	rest: "",
+	hover: "hover",
+	pressed: "active",
+	focused: "focus",
+	"focus-within": "focus-within",
+	invalid: "has-input-invalid",
+	"focused-keyboard": "focus-visible",
+	visited: "visited",
+	readonly: "input-readonly",
+	disabled: "has-disabled",
+	"invalid&hover": "has-input-invalid-and-hover",
+	"invalid&pressed": "has-input-invalid-and-active"
+};
+function findFixtureType(property, variantKey) {
+	const defaultValue = property.defaults[variantKey];
+	const typeOfFixture = property.typeOfFixture;
+	let index = 0;
+	property.values.forEach((arrayOfValues, i) => {
+		if (arrayOfValues.includes(defaultValue)) index = i;
+	});
+	return typeOfFixture[index];
+}
+function toMinimalDbConfigObject(config) {
+	const result = {};
+	const defaultsObj = {};
+	for (const variantKey in config.variants) defaultsObj[variantKey] = config.variants[variantKey].default;
+	result.defaults = defaultsObj;
+	result.variables = {};
+	for (const variantKey in config.variants) {
+		const variantConfig = config.variants[variantKey];
+		for (const variantOption of variantConfig.options) if (isVariantConfigWithComponentStates(variantConfig)) {
+			const componentStates = variantConfig.componentStates;
+			for (const componentStateKey in componentStates) {
+				const componentState = componentStates[componentStateKey];
+				for (const componentStateOption of componentState.options) for (const layerKey in componentState.layers) {
+					const layer = componentState.layers[layerKey];
+					const schemaKey = generateSchemaKey({
+						variantKey,
+						variantValue: variantOption,
+						stateKey: componentStateKey,
+						stateValue: componentStateOption,
+						layer: layerKey
+					});
+					result.variables[schemaKey] = {};
+					for (const propertyKey in layer.properties) {
+						const property = layer.properties[propertyKey];
+						const variableObject = { [propertyKey]: {} };
+						if (property?.skipRestState !== true) variableObject[propertyKey] = { rest: {
+							type: findFixtureType(property, variantOption),
+							valueType: "alias",
+							value: property.defaults[variantOption]
+						} };
+						if (property.pseudoStates) for (const pseudoState of property.pseudoStates) variableObject[propertyKey][pseudoState] = {
+							type: findFixtureType(property, variantOption),
+							valueType: "alias",
+							value: property.defaults[variantOption]
+						};
+						result.variables[schemaKey] = {
+							...result.variables[schemaKey],
+							...variableObject
+						};
+					}
+				}
+			}
+		} else if (isVariantConfigWithProperties(variantConfig)) {
+			const layers = variantConfig.layers;
+			for (const layerKey in layers) {
+				const layer = layers[layerKey];
+				const schemaKey = generateSchemaKey({
+					variantKey,
+					variantValue: variantOption,
+					layer: layerKey
+				});
+				result.variables[schemaKey] = {};
+				for (const propertyKey in layer.properties) {
+					const property = layer.properties[propertyKey];
+					const variableObject = { [propertyKey]: {} };
+					if (property?.skipRestState !== true) variableObject[propertyKey] = { rest: {
+						type: findFixtureType(property, variantOption),
+						valueType: "alias",
+						value: property.defaults[variantOption]
+					} };
+					if (property.pseudoStates) for (const pseudoState of property.pseudoStates) variableObject[propertyKey][pseudoState] = {
+						type: findFixtureType(property, variantOption),
+						valueType: "alias",
+						value: property.defaults[variantOption]
+					};
+					result.variables[schemaKey] = {
+						...result.variables[schemaKey],
+						...variableObject
+					};
+				}
+			}
+		}
+	}
+	if (config.subComponents) {
+		const { subComponents } = config;
+		for (const subComponentKey in subComponents) for (const variantKey in subComponents[subComponentKey].variants) {
+			const variantConfig = subComponents[subComponentKey].variants[variantKey];
+			result.defaults[variantKey] = variantConfig.default;
+			for (const variantOption of variantConfig.options) if (isVariantConfigWithComponentStates(variantConfig)) {
+				const componentStates = variantConfig.componentStates;
+				for (const componentStateKey in componentStates) {
+					const componentState = componentStates[componentStateKey];
+					for (const componentStateOption of componentState.options) for (const layerKey in componentState.layers) {
+						const layer = componentState.layers[layerKey];
+						const schemaKey = generateSchemaKey({
+							variantKey,
+							variantValue: variantOption,
+							stateKey: componentStateKey,
+							stateValue: componentStateOption,
+							layer: layerKey,
+							subComponentName: subComponentKey
+						});
+						result.variables[schemaKey] = {};
+						for (const propertyKey in layer.properties) {
+							const property = layer.properties[propertyKey];
+							const variableObject = { [propertyKey]: {} };
+							if (property?.skipRestState !== true) variableObject[propertyKey] = { rest: {
+								type: findFixtureType(property, variantOption),
+								valueType: "alias",
+								value: property.defaults[variantOption]
+							} };
+							if (property.pseudoStates) for (const pseudoState of property.pseudoStates) variableObject[propertyKey][pseudoState] = {
+								type: findFixtureType(property, variantOption),
+								valueType: "alias",
+								value: property.defaults[variantOption]
+							};
+							result.variables[schemaKey] = {
+								...result.variables[schemaKey],
+								...variableObject
+							};
+						}
+					}
+				}
+			} else if (isVariantConfigWithProperties(variantConfig)) {
+				const layers = variantConfig.layers;
+				for (const layerKey in layers) {
+					const layer = layers[layerKey];
+					const schemaKey = generateSchemaKey({
+						variantKey,
+						variantValue: variantOption,
+						layer: layerKey,
+						subComponentName: subComponentKey
+					});
+					result.variables[schemaKey] = {};
+					for (const propertyKey in layer.properties) {
+						const property = layer.properties[propertyKey];
+						const variableObject = { [propertyKey]: {} };
+						if (property?.skipRestState !== true) variableObject[propertyKey] = { rest: {
+							type: findFixtureType(property, variantOption),
+							valueType: "alias",
+							value: property.defaults[variantOption]
+						} };
+						if (property.pseudoStates) for (const pseudoState of property.pseudoStates) variableObject[propertyKey][pseudoState] = {
+							type: findFixtureType(property, variantOption),
+							valueType: "alias",
+							value: property.defaults[variantOption]
+						};
+						result.variables[schemaKey] = {
+							...result.variables[schemaKey],
+							...variableObject
+						};
+					}
+				}
+			}
+		}
+	}
+	return result;
+}
+function generateDefaultClassName(componentName, variantType, layerKey, subComponentName) {
+	return `uds-${componentName}${subComponentName ? `-${subComponentName.toLowerCase()}` : ""}-default-${variantType}-${layerKey}`;
+}
+function generateClassName({ componentName, variantKey, variantValue, layer, layerOptionalPseudoSelector, subComponentName, stateKey, stateValue }) {
+	let className = "";
+	if (subComponentName) className = `uds-${lowerCase(componentName)}-${lowerCase(subComponentName)}-${lowerCase(variantKey)}`;
+	else className = `uds-${lowerCase(componentName)}-${lowerCase(variantKey)}`;
+	if (variantValue) className = `${className}-${lowerCase(variantValue)}`;
+	if (stateKey && stateValue) className = `${className}-${lowerCase(stateKey)}-${lowerCase(stateValue)}`;
+	className = `${className}-${lowerCase(layer)}`;
+	if (layerOptionalPseudoSelector) className = `${className}${layerOptionalPseudoSelector}`;
+	return className.replaceAll(/\s+/g, "-");
+}
+function generateDeclaration({ componentName, variantKey, variantValue, layer, layerOptionalPseudoSelector, subComponentName, stateKey, stateValue, schema, propertyKey, originalPropertyDefinition, theme, currentStyles, previewOptions }) {
+	const schemaKey = generateSchemaKey({
+		variantKey,
+		variantValue,
+		layer,
+		subComponentName,
+		stateKey,
+		stateValue
+	});
+	let className = generateClassName({
+		componentName,
+		variantKey,
+		variantValue,
+		layer,
+		subComponentName,
+		stateKey,
+		stateValue
+	});
+	const propertySelectedValueInSchema = schema.variables[schemaKey][propertyKey];
+	if (!propertySelectedValueInSchema) throw new Error(`Prop definition (${componentName} - ${schemaKey} - ${propertyKey}) not found, this is not expected, please report the bug to the UDS team`);
+	const styles = {};
+	for (const stateStr in propertySelectedValueInSchema) {
+		const state = stateStr;
+		const pseudo = statePseudoMap[state] ?? "";
+		const schemaValueForState = propertySelectedValueInSchema[state];
+		let fullClassName = ``;
+		if (layer === "root") if (stateKey && stateValue) {
+			const rootVariantClass = generateClassName({
+				componentName,
+				variantKey,
+				variantValue,
+				layer,
+				subComponentName
+			});
+			className = generateClassName({
+				componentName,
+				variantKey,
+				layer,
+				subComponentName,
+				stateKey,
+				stateValue
+			});
+			fullClassName = `.${rootVariantClass}${pseudo}.${className}`;
+		} else fullClassName = `.${className}${pseudo}`;
+		else {
+			const rootVariantClassName = generateClassName({
+				componentName,
+				variantKey,
+				variantValue,
+				layer: "root",
+				subComponentName
+			});
+			if (stateKey && stateValue) {
+				const rootVariantClassNameWithComponentState = generateClassName({
+					componentName,
+					variantKey,
+					layer: "root",
+					subComponentName,
+					stateKey,
+					stateValue
+				});
+				className = generateClassName({
+					componentName,
+					variantKey,
+					variantValue,
+					layer,
+					layerOptionalPseudoSelector,
+					subComponentName
+				});
+				fullClassName = `.${rootVariantClassName}${pseudo}.${rootVariantClassNameWithComponentState} .${className}`;
+			} else fullClassName = `.${rootVariantClassName}${pseudo} .${className}`;
+		}
+		const getTheCssPropertyValue = (schemaStateValue, propertyName, theme$1, existingValue) => {
+			const { value, type } = schemaStateValue;
+			const propertyConfig = configurableProperties[propertyName];
+			let newValue;
+			if (configurableProperties[propertyName].customValueRenderer) newValue = configurableProperties[propertyName].customValueRenderer(schemaStateValue, schema, theme$1);
+			else newValue = theme$1(configurableProperties[propertyName].twThemePath(type, String(value)));
+			if (propertyConfig.concatenate && existingValue) return `${existingValue}${propertyConfig.concatenationDelimiter || ", "}${newValue}`;
+			return newValue;
+		};
+		const { cssProperties, extendedProperties: extendedPropertiesGetter } = configurableProperties[originalPropertyDefinition.name];
+		const cssDeclarations = {};
+		const isExtendedPropertiesFunction = isFunction(extendedPropertiesGetter);
+		const extendedProperties = isExtendedPropertiesFunction ? extendedPropertiesGetter({
+			componentName,
+			subComponentName,
+			layer,
+			propertyKey
+		}) : extendedPropertiesGetter;
+		if (extendedProperties && extendedProperties.length) {
+			if (!isExtendedPropertiesFunction && (typeof cssProperties === "string" || Array.isArray(cssProperties) && cssProperties.length > 0)) throw new Error("Invalid configuration: cssProperties should not be configured when extendedProperties are defined. Please update your property configuration accordingly.");
+			for (const extendedProp of extendedProperties) {
+				const cssPropertiesRef = configurableProperties[extendedProp].cssProperties;
+				if (typeof cssPropertiesRef === "string") {
+					const existingValue = currentStyles?.[fullClassName]?.[cssPropertiesRef];
+					cssDeclarations[cssPropertiesRef] = getTheCssPropertyValue(schemaValueForState, extendedProp, theme, existingValue);
+				} else if (Array.isArray(cssPropertiesRef)) for (const cssProp of cssPropertiesRef) {
+					const existingValue = currentStyles?.[fullClassName]?.[cssProp];
+					cssDeclarations[cssProp] = getTheCssPropertyValue(schemaValueForState, extendedProp, theme, existingValue);
+				}
+			}
+		} else if (typeof cssProperties === "string") {
+			const existingValue = currentStyles?.[fullClassName]?.[cssProperties];
+			cssDeclarations[cssProperties] = getTheCssPropertyValue(schemaValueForState, originalPropertyDefinition.name, theme, existingValue);
+		} else if (Array.isArray(cssProperties)) for (const cssProp of cssProperties) {
+			const existingValue = currentStyles?.[fullClassName]?.[cssProp];
+			cssDeclarations[cssProp] = getTheCssPropertyValue(schemaValueForState, originalPropertyDefinition.name, theme, existingValue);
+		}
+		/**
+		* Button root layer workarounds & enhancements.
+		* These handle Motion animation bridges and visual fixes until better config-to-component solutions exist.
+		*/
+		if (componentName === "button" && layer === "root") {
+			if (propertyKey === CSS_GAP) cssDeclarations[BUTTON_GAP_VAR] = cssDeclarations[CSS_GAP];
+			if (propertyKey === "scaleEffect" && !stateKey && state === "hover") {
+				const rootClassName = `.${className}`;
+				const renderValue = (schemaValue) => configurableProperties.scaleEffect.customValueRenderer?.(schemaValue, schema, () => "") ?? "1";
+				if (!styles[rootClassName]) styles[rootClassName] = {};
+				styles[rootClassName][BUTTON_SCALE_EFFECT_REST] = "1";
+				if (propertySelectedValueInSchema.hover) styles[rootClassName][BUTTON_SCALE_EFFECT_HOVER] = renderValue(propertySelectedValueInSchema.hover);
+				if (propertySelectedValueInSchema.pressed) styles[rootClassName][BUTTON_SCALE_EFFECT_PRESSED] = renderValue(propertySelectedValueInSchema.pressed);
+			}
+			if (cssDeclarations[CSS_LINE_HEIGHT]) {
+				const iconLayerKey = generateSchemaKey({
+					variantKey,
+					variantValue,
+					layer: "icon",
+					subComponentName
+				});
+				cssDeclarations[CSS_LINE_HEIGHT] = getButtonLineHeightWithIconMinimum({
+					lineHeight: cssDeclarations[CSS_LINE_HEIGHT],
+					schema,
+					iconLayerKey,
+					state,
+					theme
+				});
+			}
+		}
+		if (!styles[fullClassName]) styles[fullClassName] = {
+			...cssDeclarations,
+			...styles[fullClassName]
+		};
+		if (previewOptions?.generatePseudoStateClassModifier) {
+			const pseudoPrefixClass = statePseudoMapDocsMode[state] ?? "";
+			if (pseudoPrefixClass.length > 0 && stateStr !== "root") {
+				const importantCssDeclarations = Object.fromEntries(Object.entries(cssDeclarations).map(([prop, value]) => [prop, `${value} !important`]));
+				styles[`.${pseudoPrefixClass}${fullClassName}`.replace(pseudo, "")] = {
+					...importantCssDeclarations,
+					...styles[`.${pseudoPrefixClass}${fullClassName}`.replace(pseudo, "")]
+				};
+			}
+		}
+	}
+	return styles;
+}
+function generateConfigStyles(config, schema, theme, previewOptions) {
+	function deepMerge(target, source) {
+		return mergeWith({}, target, source);
+	}
+	let componentName = config.label.toLowerCase();
+	if (config.overrideComponentName) componentName = config.overrideComponentName.toLowerCase();
+	let styles = {};
+	for (const variantKey in config.variants) {
+		const variantConfig = config.variants[variantKey];
+		for (const variantOption of variantConfig.options) if (isVariantConfigWithComponentStates(variantConfig)) {
+			const componentStates = variantConfig.componentStates;
+			for (const componentStateKey in componentStates) {
+				const componentState = componentStates[componentStateKey];
+				for (const componentStateOption of componentState.options) for (const layerKey in componentState.layers) {
+					const layer = componentState.layers[layerKey];
+					for (const propertyKey in layer.properties) {
+						const originalPropertyDefinition = layer.properties[propertyKey];
+						const declarations = generateDeclaration({
+							componentName,
+							variantKey,
+							variantValue: variantOption,
+							stateKey: componentStateKey,
+							stateValue: componentStateOption,
+							layer: layerKey,
+							layerOptionalPseudoSelector: layer.pseudoSelector,
+							propertyKey,
+							originalPropertyDefinition,
+							theme,
+							schema,
+							currentStyles: styles,
+							previewOptions
+						});
+						styles = deepMerge(styles, declarations);
+					}
+				}
+			}
+		} else if (isVariantConfigWithProperties(variantConfig)) {
+			const layers = variantConfig.layers;
+			for (const layerKey in layers) {
+				const layer = layers[layerKey];
+				for (const propertyKey in layer.properties) {
+					const originalPropertyDefinition = layer.properties[propertyKey];
+					const declarations = generateDeclaration({
+						componentName,
+						variantKey,
+						variantValue: variantOption,
+						layer: layerKey,
+						layerOptionalPseudoSelector: layer.pseudoSelector,
+						propertyKey,
+						originalPropertyDefinition,
+						theme,
+						schema,
+						currentStyles: styles,
+						previewOptions
+					});
+					styles = deepMerge(styles, declarations);
+				}
+			}
+		}
+	}
+	if (config.subComponents) {
+		const { subComponents } = config;
+		for (const subComponentKey in subComponents) for (const variantKey in subComponents[subComponentKey].variants) {
+			const variantConfig = subComponents[subComponentKey].variants[variantKey];
+			for (const variantOption of variantConfig.options) if (isVariantConfigWithComponentStates(variantConfig)) {
+				const componentStates = variantConfig.componentStates;
+				for (const componentStateKey in componentStates) {
+					const componentState = componentStates[componentStateKey];
+					for (const componentStateOption of componentState.options) for (const layerKey in componentState.layers) {
+						const layer = componentState.layers[layerKey];
+						for (const propertyKey in layer.properties) {
+							const originalPropertyDefinition = layer.properties[propertyKey];
+							const declarations = generateDeclaration({
+								componentName,
+								variantKey,
+								variantValue: variantOption,
+								stateKey: componentStateKey,
+								stateValue: componentStateOption,
+								subComponentName: subComponentKey,
+								layer: layerKey,
+								layerOptionalPseudoSelector: layer.pseudoSelector,
+								propertyKey,
+								originalPropertyDefinition,
+								theme,
+								schema,
+								currentStyles: styles,
+								previewOptions
+							});
+							styles = deepMerge(styles, declarations);
+						}
+					}
+				}
+			} else if (isVariantConfigWithProperties(variantConfig)) {
+				const layers = variantConfig.layers;
+				for (const layerKey in layers) {
+					const layer = layers[layerKey];
+					for (const propertyKey in layer.properties) {
+						const originalPropertyDefinition = layer.properties[propertyKey];
+						const declarations = generateDeclaration({
+							componentName,
+							subComponentName: subComponentKey,
+							variantKey,
+							variantValue: variantOption,
+							layer: layerKey,
+							layerOptionalPseudoSelector: layer.pseudoSelector,
+							propertyKey,
+							originalPropertyDefinition,
+							theme,
+							schema,
+							currentStyles: styles,
+							previewOptions
+						});
+						styles = deepMerge(styles, declarations);
+					}
+				}
+			}
+		}
+	}
+	/**
+	* Post-process button/iconbutton styles to force box-shadow for borders.
+	* This runs AFTER all properties have been processed and merged.
+	*/
+	if (componentName === "button" || componentName === "iconbutton") {
+		for (const className in styles) if (className.includes("-root")) styles[className] = applyBoxShadowBorder(styles[className]);
+	}
+	return styles;
+}
+/**
+* @param config - Component configuration (Button, IconButton, etc.)
+* @param schema - Production schema with defaults and variables
+* @param theme - Tailwind theme function to resolve design tokens
+* @param previewOptions - Options for generating preview mode class modifiers
+* @returns CSS styles object with grouped selectors for default aliases
+*/
+const generateStyles = (config, schema, theme, previewOptions) => {
+	const styles = generateConfigStyles(config, schema, theme, previewOptions);
+	if (!config.variants && !config.subComponents) return styles;
+	const componentName = config.overrideComponentName?.toLowerCase() || config.label.toLowerCase();
+	if (componentName !== "button" && componentName !== "iconbutton") return styles;
+	const replacementMap = /* @__PURE__ */ new Map();
+	/**
+	* Helper: Extract all layer keys from a variant configuration
+	* Handles both simple variants (with direct layers) and variants with component states
+	*/
+	const getLayerKeys = (variantConfig) => {
+		if (isVariantConfigWithProperties(variantConfig)) return Object.keys(variantConfig.layers);
+		else if (isVariantConfigWithComponentStates(variantConfig)) {
+			const layerKeysSet = /* @__PURE__ */ new Set();
+			for (const componentStateConfig of Object.values(variantConfig.componentStates)) Object.keys(componentStateConfig.layers).forEach((key) => layerKeysSet.add(key));
+			return Array.from(layerKeysSet);
+		}
+		return [];
+	};
+	/**
+	* Helper: Build replacement map for default variant values
+	* For each default variant + layer combination, creates an entry like:
+	*   "uds-button-size-sm-root" → ".uds-button-size-sm-root, .uds-button-default-size-root"
+	*/
+	const buildReplacements = (variants, subComponentName) => {
+		for (const [variantType, variantConfig] of Object.entries(variants)) {
+			if (!isVariantConfigWithProperties(variantConfig) && !isVariantConfigWithComponentStates(variantConfig)) continue;
+			const layerKeys = getLayerKeys(variantConfig);
+			if (layerKeys.length) {
+				const defaultValue = schema.defaults?.[variantType];
+				if (defaultValue) for (const layerKey of layerKeys) {
+					const baseClass = generateClassName({
+						componentName,
+						variantKey: variantType,
+						variantValue: defaultValue,
+						layer: layerKey,
+						subComponentName
+					});
+					const defaultClass = generateDefaultClassName(componentName, variantType, layerKey, subComponentName);
+					replacementMap.set(baseClass, `.${baseClass}, .${defaultClass}`);
+				}
+			}
+		}
+	};
+	if (config.variants) buildReplacements(config.variants);
+	if (config.subComponents) for (const [subComponentName, subComponentConfig] of Object.entries(config.subComponents)) buildReplacements(subComponentConfig.variants, subComponentName);
+	const finalStyles = {};
+	for (const [selector, declarations] of Object.entries(styles)) {
+		let defaultsSelector = selector;
+		let hasMatch = false;
+		for (const [defaultVariantClass, replacement] of replacementMap.entries()) if (selector.includes(defaultVariantClass)) {
+			hasMatch = true;
+			const defaultMatch = replacement.match(/,\s*\.([a-z0-9-]+)/);
+			if (defaultMatch) {
+				const defaultClass = defaultMatch[1];
+				defaultsSelector = defaultsSelector.replaceAll(defaultVariantClass, defaultClass);
+			}
+		}
+		if (!hasMatch) {
+			finalStyles[selector] = declarations;
+			continue;
+		}
+		finalStyles[`${selector}, ${defaultsSelector}`] = declarations;
+	}
+	return finalStyles;
+};
+function createConfigurableProperty(prop) {
+	return prop;
+}
+function createVariantConfig(config) {
+	return config;
+}
+function createVariantConfigWithProperties(config) {
+	return config;
+}
+function createVariantConfigWithComponentStates(config) {
+	return config;
+}
+function createComponentStates(config) {
+	return config;
+}
+function createLayerConfig(config) {
+	return config;
+}
+function createSubComponentConfig(config) {
+	return config;
+}
+
+//#endregion
+export { cartesianProduct, coalesceConfigVariant, createComponentStates, createConfigurableProperty, createLayerConfig, createSubComponentConfig, createVariantConfig, createVariantConfigWithComponentStates, createVariantConfigWithProperties, findFixtureType, generateClassName, generateConfigStyles, generateDeclaration, generateDefaultClassName, generateKeyFromFlatConfigPath, generateSchemaKey, generateStyles, getConfigDefaultValue, getConfigPseudoStateVariables, getConfigPseudoStateVariablesWithSetter, getConfigSubcomponents, getConfigVariantComponentStates, getConfigVariantComponentStatesMatrix, getConfigVariantProperties, getConfigVariantPseudoStates, getConfigVariants, isConfigDefaultValue, setConfigPseudoStateVariable, statePseudoMapDocsMode, toMinimalDbConfigObject };

package/dist/tokens/automation/utils/mapColorFixtureToValue.cjs

@@ -0,0 +1,20 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_utils_assertUnreachable = require('../../../utils/assertUnreachable.cjs');
+
+//#region src/tokens/automation/utils/mapColorFixtureToValue.ts
+const mapColorFixtureToValue = (selected, value) => {
+	switch (selected) {
+		case "alwaysPaletteAliases": return `colors.${value}`;
+		case "spectrumColors": {
+			const [hue, hueStep] = value.split("-");
+			return `colors.${hue}.${hueStep}`;
+		}
+		case "foregroundPaletteColors": return `textColor.${value}`;
+		case "backgroundPaletteColors": return `backgroundColor.${value}`;
+		case "linePaletteColors": return `borderColor.${value}`;
+	}
+	return require_utils_assertUnreachable.assertUnreachable(selected);
+};
+
+//#endregion
+exports.mapColorFixtureToValue = mapColorFixtureToValue;

package/dist/tokens/automation/utils/mapColorFixtureToValue.d.cts

@@ -0,0 +1,4 @@
+//#region src/tokens/automation/utils/mapColorFixtureToValue.d.ts
+declare const mapColorFixtureToValue: (selected: "alwaysPaletteAliases" | "spectrumColors" | "foregroundPaletteColors" | "backgroundPaletteColors" | "linePaletteColors", value: string) => string;
+//#endregion
+export { mapColorFixtureToValue };

package/dist/tokens/automation/utils/mapColorFixtureToValue.d.ts

@@ -0,0 +1,4 @@
+//#region src/tokens/automation/utils/mapColorFixtureToValue.d.ts
+declare const mapColorFixtureToValue: (selected: "alwaysPaletteAliases" | "spectrumColors" | "foregroundPaletteColors" | "backgroundPaletteColors" | "linePaletteColors", value: string) => string;
+//#endregion
+export { mapColorFixtureToValue };