@yahoo/uds-mobile 1.0.0

package/dist/bin/generateTheme.mjs

@@ -0,0 +1,390 @@
+#!/usr/bin/env node
+import { spacingMap } from "./uds/dist/fixtures.mjs";
+import { newAlwaysPalette } from "./uds/dist/tokens/configs/palette/alwaysPalette.mjs";
+import { DEFAULT_SCALE_MODE } from "./uds/dist/tokens/consts/defaultModes.mjs";
+import { FONT_DECLARATIONS_MAP } from "./uds/dist/tokens/consts/fontDeclarationsMap.mjs";
+import { MOBILE_STATES, PROPERTY_TO_RN_PROPS, SHADOW_PROPS, TEXT_ONLY_PROPS, toSlashKey } from "./mobile/scripts/utils/configToRNMappings.mjs";
+import { fontAliasToPostscript } from "@yahoo/uds-mobile/fonts";
+
+//#region bin/generateTheme.ts
+/**
+* Generate Unistyles theme from UDS tokens.
+*
+* Takes UniversalTokensConfig and generates theme objects for React Native Unistyles.
+*/
+/**
+* Converts an array of BoxShadowValue objects to a CSS box-shadow string.
+* React Native's new architecture supports the CSS string syntax for boxShadow.
+*
+* @example
+* boxShadowToCssString([
+*   { offsetX: 0, offsetY: 16, blurRadius: 24, spreadDistance: -4, color: 'rgba(0,0,0,0.1)', inset: true }
+* ])
+* // Returns: "inset 0px 16px 24px -4px rgba(0,0,0,0.1)"
+*/
+function boxShadowToCssString(shadows) {
+	return shadows.map((s) => {
+		const parts = [];
+		if (s.inset) parts.push("inset");
+		parts.push(`${s.offsetX}px`);
+		parts.push(`${s.offsetY}px`);
+		parts.push(`${s.blurRadius ?? 0}px`);
+		parts.push(`${s.spreadDistance ?? 0}px`);
+		if (s.color) parts.push(s.color);
+		return parts.join(" ");
+	}).join(", ");
+}
+/**
+* Recursively sorts object keys for deterministic output.
+*/
+function sortKeys(obj) {
+	if (obj === null || typeof obj !== "object") return obj;
+	if (Array.isArray(obj)) return obj.map(sortKeys);
+	const sorted = {};
+	const keys = Object.keys(obj).sort();
+	for (const key of keys) sorted[key] = sortKeys(obj[key]);
+	return sorted;
+}
+/**
+* Converts a FontID and weight value to a PostScript font name.
+* React Native requires PostScript names to load fonts, not CSS font-family + weight.
+*/
+function getPostScriptName(fontId, weight, italic = false) {
+	const fontConfig = FONT_DECLARATIONS_MAP[fontId];
+	if (!fontConfig) return fontId;
+	let weightConfig = fontConfig.fontWeights.find((w) => w.value === weight);
+	if (!weightConfig) weightConfig = fontConfig.fontWeights.reduce((closest, current) => {
+		const closestDiff = Math.abs(closest.value - weight);
+		return Math.abs(current.value - weight) < closestDiff ? current : closest;
+	});
+	const weightLabel = weightConfig.label.toLowerCase().replace(/\s+/g, "-");
+	const fontFileKey = italic ? `${fontId}-${weightLabel}-italic` : `${fontId}-${weightLabel}`;
+	return fontAliasToPostscript[fontFileKey] ?? fontFileKey;
+}
+/**
+* Converts RGB space-separated string (e.g., "255 0 128") to rgb() format.
+*/
+function rgbStringToRgb(rgbString) {
+	const parts = rgbString.trim().split(/\s+/);
+	if (parts.length !== 3) return rgbString;
+	return `rgb(${parts.join(", ")})`;
+}
+/**
+* Generates elevation colors from config.
+*/
+function generateElevationColors(elevation) {
+	const result = {};
+	for (const level of Object.keys(elevation)) result[`elevation-${level}`] = "transparent";
+	return result;
+}
+/**
+* Parses a typography unit value to a number.
+*/
+function parseTypographyValue(value) {
+	return value.value;
+}
+/**
+* Parses a shadow offset/size string to a number.
+* Handles special values like 'px' (1px) and '-px' (-1px).
+*/
+function parseShadowValue(value) {
+	if (value === "px") return 1;
+	if (value === "-px") return -1;
+	const parsed = parseFloat(value);
+	return isNaN(parsed) ? 0 : parsed * 4;
+}
+/**
+* Resolves a shadow color with opacity applied.
+*/
+function resolveShadowColor(colorConfig, opacity, spectrum, palette) {
+	const opacityValue = parseInt(opacity, 10) / 100;
+	if (colorConfig.type === "always") return `rgba(${colorConfig.value === "white" ? "255, 255, 255" : "0, 0, 0"}, ${opacityValue})`;
+	if (colorConfig.type === "palette") {
+		const colorDef = palette[colorConfig.value];
+		if (colorDef) {
+			const rgbValue = spectrum[colorDef.hue]?.[colorDef.step];
+			if (rgbValue) return `rgba(${rgbValue.trim().split(/\s+/).join(", ")}, ${opacityValue})`;
+		}
+	}
+	return `rgba(0, 0, 0, ${opacityValue})`;
+}
+/**
+* Converts shadow presets to React Native BoxShadowValue array.
+*/
+function convertShadowToBoxShadow(presets, spectrum, palette, inset = false) {
+	return presets.map((preset) => ({
+		offsetX: parseShadowValue(preset.offsetX),
+		offsetY: parseShadowValue(preset.offsetY),
+		blurRadius: parseShadowValue(preset.blur),
+		spreadDistance: parseShadowValue(preset.spread),
+		color: resolveShadowColor(preset.color, preset.opacity, spectrum, palette),
+		...inset && { inset: true }
+	}));
+}
+function generateSpectrum(spectrum) {
+	const result = {};
+	for (const [hue, steps] of Object.entries(spectrum)) for (const [step, rgbValue] of Object.entries(steps)) result[`${hue}-${step}`] = rgbStringToRgb(rgbValue);
+	return result;
+}
+function generatePalette(palette, spectrum) {
+	const result = {};
+	for (const [alias, { hue, step, opacity }] of Object.entries(palette)) {
+		const rgbValue = spectrum[hue]?.[step];
+		if (!rgbValue) continue;
+		if (opacity !== void 0) {
+			const opacityPercent = parseInt(opacity, 10) / 100;
+			result[alias] = `rgba(${rgbValue.trim().split(/\s+/).join(", ")}, ${opacityPercent})`;
+		} else result[alias] = rgbStringToRgb(rgbValue);
+	}
+	for (const [key, value] of Object.entries(newAlwaysPalette)) {
+		if (key.includes("current")) continue;
+		result[key] = value;
+	}
+	return result;
+}
+function generateTypography(typographyConfig, fontConfig) {
+	const result = {};
+	for (const [variant, style] of Object.entries(typographyConfig)) {
+		const fontAlias = style.fontFamily.base;
+		const fontId = fontConfig[fontAlias] ?? fontAlias;
+		const weight = Number(style.fontWeight.base.value);
+		const postScriptName = fontId in FONT_DECLARATIONS_MAP ? getPostScriptName(fontId, weight) : fontId;
+		result[variant] = {
+			fontSize: parseTypographyValue(style.fontSize.base),
+			lineHeight: parseTypographyValue(style.lineHeight.base),
+			letterSpacing: parseTypographyValue(style.letterSpacing.base),
+			fontFamily: postScriptName,
+			fontWeight: weight
+		};
+	}
+	return result;
+}
+function generateFontAliases(fontConfig) {
+	const result = {};
+	for (const [alias, fontId] of Object.entries(fontConfig)) if (fontId in FONT_DECLARATIONS_MAP) {
+		const defaultWeight = FONT_DECLARATIONS_MAP[fontId].defaults.fontWeight;
+		result[alias] = getPostScriptName(fontId, defaultWeight);
+	} else result[alias] = fontId;
+	result.icons = "uds-icons";
+	return result;
+}
+function generateShadows(config) {
+	const result = {};
+	Object.keys(config.shadow.drop).forEach((variant, index) => {
+		result[variant] = variant === "none" ? 0 : index;
+	});
+	Object.keys(config.elevation).forEach((level) => {
+		result[`elevation-${level}`] = parseInt(level, 10);
+	});
+	return result;
+}
+/**
+* Resolves a typography variant name to React Native text styles.
+* Looks up the typography config and converts to RN-compatible values.
+*
+* @param variantName - The typography variant name (e.g., 'body1', 'label4', 'ui2')
+* @param typography - The typography config from UniversalTokensConfig
+* @param config - The full config for resolving font family aliases
+* @returns Resolved typography styles (fontSize, lineHeight, letterSpacing, fontFamily)
+*/
+function resolveTypographyStyles(variantName, typography, config) {
+	const result = {};
+	const typographyStyle = typography[variantName];
+	if (!typographyStyle) return result;
+	const fontSize = typographyStyle.fontSize?.base?.value;
+	const lineHeight = typographyStyle.lineHeight?.base?.value;
+	const letterSpacing = typographyStyle.letterSpacing?.base?.value;
+	const fontFamily = typographyStyle.fontFamily?.base;
+	const fontWeight = typographyStyle.fontWeight?.base?.value;
+	if (typeof fontSize === "number") result.fontSize = fontSize;
+	if (typeof lineHeight === "number") result.lineHeight = lineHeight;
+	if (typeof letterSpacing === "number") result.letterSpacing = letterSpacing;
+	if (typeof fontFamily === "string") {
+		const fontId = config.font[fontFamily] ?? fontFamily;
+		if (fontId in FONT_DECLARATIONS_MAP) result.fontFamily = getPostScriptName(fontId, typeof fontWeight === "number" ? fontWeight : 400);
+		else result.fontFamily = fontId;
+	}
+	return result;
+}
+function resolveValue(variable, config, colorMode) {
+	const { type, value } = variable;
+	const palette = config.colorMode[colorMode].palette;
+	const spectrum = config.colorMode[colorMode].spectrum;
+	const scaleConfig = config.scaleMode[DEFAULT_SCALE_MODE];
+	if (type === "backgroundPaletteColors" || type === "foregroundPaletteColors" || type === "linePaletteColors") {
+		const colorDef = palette[type.replace("PaletteColors", "")]?.[value];
+		if (colorDef) {
+			const rgbValue = spectrum[colorDef.hue]?.[colorDef.step];
+			if (rgbValue) {
+				const parts = rgbValue.trim().split(/\s+/);
+				if (colorDef.opacity !== void 0) return `rgba(${parts.join(", ")}, ${parseInt(colorDef.opacity, 10) / 100})`;
+				return `rgb(${parts.join(", ")})`;
+			}
+		}
+		if (typeof value === "string" && value.startsWith("always/")) return newAlwaysPalette[value] ?? value;
+		return;
+	}
+	if (type === "spectrumColors") {
+		const colorStr = value;
+		const lastDashIndex = colorStr.lastIndexOf("-");
+		if (lastDashIndex > 0) {
+			const hue = colorStr.slice(0, lastDashIndex);
+			const step = colorStr.slice(lastDashIndex + 1);
+			const rgbValue = spectrum[hue]?.[step];
+			if (rgbValue) return `rgb(${rgbValue.trim().split(/\s+/).join(", ")})`;
+		}
+		return;
+	}
+	if (type === "alwaysPaletteAliases") return newAlwaysPalette[value] ?? value;
+	if (type === "spacingAliases") return spacingMap[value];
+	if (type === "borderWidths") return scaleConfig.borderWidth[value];
+	if (type === "borderRadii") return scaleConfig.borderRadius[value];
+	if (type === "iconSizes") return scaleConfig.iconSizes[value];
+	if (type === "opacitySteps") {
+		const numValue = typeof value === "string" ? parseFloat(value) : value;
+		return typeof numValue === "number" && !isNaN(numValue) ? numValue / 100 : void 0;
+	}
+	if (type === "shadowVariants") {
+		const shadowVariant = value;
+		if (shadowVariant === "none") return [];
+		const shadowPresets = config.shadow.drop[shadowVariant];
+		if (shadowPresets && shadowPresets.length > 0) return convertShadowToBoxShadow(shadowPresets, spectrum, palette.foreground);
+		return [];
+	}
+	if (type === "shadowVariantsWithInvert") {
+		const shadowVariant = value;
+		if (shadowVariant === "none") return [];
+		const baseVariant = shadowVariant.endsWith("-invert") ? shadowVariant.replace("-invert", "") : shadowVariant;
+		const shadowPresets = config.shadow.inset[shadowVariant];
+		if (shadowPresets && shadowPresets.length > 0) return convertShadowToBoxShadow(shadowPresets, spectrum, palette.foreground, true);
+		const dropPresets = config.shadow.drop[baseVariant];
+		if (dropPresets && dropPresets.length > 0) return convertShadowToBoxShadow(dropPresets, spectrum, palette.foreground, true);
+		return [];
+	}
+	if (type === "textDecorationLines") return value;
+	if (typeof value === "number") return value;
+}
+function generateComponents(config, colorMode) {
+	const result = {};
+	const typography = config.typography;
+	for (const [componentName, componentConfig] of Object.entries(config)) {
+		if (!componentConfig || typeof componentConfig !== "object" || !("variables" in componentConfig)) continue;
+		const variables = componentConfig.variables;
+		for (const [path, properties] of Object.entries(variables)) {
+			const pathParts = path.split("/");
+			const layer = pathParts[pathParts.length - 1];
+			const variantPath = pathParts.slice(0, -1);
+			const isRootLayer = layer === "root";
+			for (const state of MOBILE_STATES) {
+				const viewStyleObj = {};
+				const textStyleObj = {};
+				const shadowValues = [];
+				for (const [propName, states] of Object.entries(properties)) {
+					if (propName === "textVariant") {
+						const stateValue$1 = states[state];
+						if (stateValue$1 && stateValue$1.type === "textVariants") {
+							const variantName = stateValue$1.value;
+							const typographyStyles = resolveTypographyStyles(variantName, typography, config);
+							const targetObj$1 = isRootLayer ? textStyleObj : viewStyleObj;
+							Object.assign(targetObj$1, typographyStyles);
+						}
+						continue;
+					}
+					const rnProps = PROPERTY_TO_RN_PROPS[propName];
+					if (!rnProps) continue;
+					const stateValue = states[state];
+					if (!stateValue) continue;
+					const resolvedValue = resolveValue(stateValue, config, colorMode);
+					if (resolvedValue === void 0) continue;
+					if (SHADOW_PROPS.has(propName)) {
+						if (Array.isArray(resolvedValue)) shadowValues.push(...resolvedValue);
+						continue;
+					}
+					const targetObj = isRootLayer && TEXT_ONLY_PROPS.has(propName) ? textStyleObj : viewStyleObj;
+					for (const rnProp of rnProps) targetObj[rnProp] = resolvedValue;
+				}
+				if (shadowValues.length > 0) viewStyleObj.boxShadow = boxShadowToCssString(shadowValues);
+				if (variantPath[0] === "textStyle") {
+					const variantName = variantPath[1];
+					const typographyStyles = resolveTypographyStyles(variantName, typography, config);
+					if (layer === "icon") {
+						if (typographyStyles.lineHeight !== void 0) viewStyleObj.lineHeight = typographyStyles.lineHeight;
+					} else if (layer === "root") Object.assign(viewStyleObj, typographyStyles);
+				}
+				if (componentName === "link") delete viewStyleObj.gap;
+				if (Object.keys(viewStyleObj).length > 0) {
+					const flatKey = toSlashKey([
+						componentName,
+						...variantPath,
+						layer,
+						state
+					]);
+					result[flatKey] = viewStyleObj;
+				}
+				if (isRootLayer && Object.keys(textStyleObj).length > 0) {
+					const textLayer = `${layer}Text`;
+					const flatKey = toSlashKey([
+						componentName,
+						...variantPath,
+						textLayer,
+						state
+					]);
+					result[flatKey] = textStyleObj;
+				}
+			}
+		}
+	}
+	return sortKeys(result);
+}
+/**
+* Generates a UDS theme object from config for a specific color mode.
+* Output is sorted for deterministic generation.
+*/
+function generateTheme(config, colorMode) {
+	const colorsConfig = config.colorMode[colorMode];
+	const scaleConfig = config.scaleMode[DEFAULT_SCALE_MODE];
+	const elevationColors = generateElevationColors(config.elevation);
+	return {
+		colors: {
+			spectrum: sortKeys(generateSpectrum(colorsConfig.spectrum)),
+			background: sortKeys({
+				...generatePalette(colorsConfig.palette.background, colorsConfig.spectrum),
+				...elevationColors
+			}),
+			foreground: sortKeys(generatePalette(colorsConfig.palette.foreground, colorsConfig.spectrum)),
+			line: sortKeys({
+				...generatePalette(colorsConfig.palette.line, colorsConfig.spectrum),
+				...elevationColors
+			})
+		},
+		spacing: sortKeys({ ...spacingMap }),
+		borderRadius: sortKeys({ ...scaleConfig.borderRadius }),
+		borderWidth: sortKeys({
+			...scaleConfig.borderWidth,
+			...Object.fromEntries(Object.keys(config.elevation).map((level) => [`elevation-${level}`, parseInt(level, 10)]))
+		}),
+		iconSize: sortKeys({ ...scaleConfig.iconSizes }),
+		avatarSize: sortKeys({ ...scaleConfig.avatarSizes }),
+		font: sortKeys(generateFontAliases(config.font)),
+		typography: sortKeys(generateTypography(config.typography, config.font)),
+		shadow: sortKeys(generateShadows(config)),
+		components: generateComponents(config, colorMode)
+	};
+}
+/**
+* Generates breakpoints object from config.
+*/
+function generateBreakpoints(config) {
+	const bp = config.breakpoints;
+	return {
+		xs: 0,
+		sm: bp.sm.type === "px" ? bp.sm.value : 0,
+		md: bp.md.type === "px" ? bp.md.value : 0,
+		lg: bp.lg.type === "px" ? bp.lg.value : 0,
+		xl: bp.xl.type === "px" ? bp.xl.value : 0,
+		"2xl": bp["2xl"].type === "px" ? bp["2xl"].value : 0
+	};
+}
+
+//#endregion
+export { generateBreakpoints, generateTheme };

package/dist/bin/mobile/scripts/utils/configToRNMappings.mjs

@@ -0,0 +1,74 @@
+#!/usr/bin/env node
+//#region scripts/utils/configToRNMappings.ts
+/**
+* Properties that map to React Native style props.
+* Properties not in this list are skipped.
+*/
+const PROPERTY_TO_RN_PROPS = {
+	spacingHorizontal: ["paddingHorizontal"],
+	spacingVertical: ["paddingVertical"],
+	padding: ["padding"],
+	gap: ["gap"],
+	height: ["height"],
+	width: ["width"],
+	backgroundColor: ["backgroundColor"],
+	color: ["color"],
+	borderColor: ["borderColor"],
+	borderWidth: ["borderWidth"],
+	borderRadius: ["borderRadius"],
+	iconSize: ["fontSize", "lineHeight"],
+	opacity: ["opacity"],
+	size: ["fontSize", "lineHeight"],
+	shadow: ["boxShadow"],
+	insetShadow: ["boxShadow"],
+	textDecorationLine: ["textDecorationLine"],
+	textVariant: [
+		"fontFamily",
+		"fontSize",
+		"lineHeight",
+		"letterSpacing"
+	]
+};
+/**
+* Properties that only apply to Text components in React Native.
+* These need to be separated from View styles since RN doesn't have inheritance.
+* For root layers, these create separate `rootText` entries.
+*/
+const TEXT_ONLY_PROPS = new Set([
+	"color",
+	"textDecorationLine",
+	"textVariant"
+]);
+/**
+* Shadow properties that should be merged into a single boxShadow array.
+* Both drop shadow and inset shadow map to the same RN boxShadow prop.
+*/
+const SHADOW_PROPS = new Set(["shadow", "insetShadow"]);
+/**
+* States that are relevant for mobile (skip hover).
+* - rest: default state
+* - pressed: active/focus state (maps to focus-within on web)
+* - disabled: non-interactive disabled state
+* - readonly: non-editable but selectable state (Input)
+* - invalid: error/validation state (Input, forms)
+*/
+const MOBILE_STATES = [
+	"rest",
+	"pressed",
+	"disabled",
+	"readonly",
+	"invalid"
+];
+/**
+* Converts a path array to a slash-separated key.
+* e.g., ['button', 'variant', 'primary', 'root', 'rest'] → 'button/variant/primary/root/rest'
+*
+* This format is easier to work with in Reanimated worklets because variant names
+* can be used directly without transformation (e.g., 'primary', 'alert-secondary').
+*/
+function toSlashKey(parts) {
+	return parts.join("/");
+}
+
+//#endregion
+export { MOBILE_STATES, PROPERTY_TO_RN_PROPS, SHADOW_PROPS, TEXT_ONLY_PROPS, toSlashKey };