@yahoo/uds-mobile 2.4.1 → 2.4.3

package/dist/bin/generateTheme.mjs

@@ -123,25 +123,12 @@ function generateElevationBorderColors(config, colorMode) {
 */
 function generateElevationBackgroundColors(config, colorMode) {
 	const result = {};
-	const palette = config.colorMode[colorMode].palette;
-	const spectrum = config.colorMode[colorMode].spectrum;
 	for (const level of Object.keys(config.elevation)) {
-		const backgroundFill = config.elevation[level][colorMode].backgroundFill;
+		const fbv = config.elevation[level][colorMode].finalBackgroundValue;
 		let color = "transparent";
-		if (backgroundFill.type === "background") {
-			const colorDef = palette.background?.[backgroundFill.value];
-			if (colorDef) {
-				const rgbValue = spectrum[colorDef.hue]?.[colorDef.step];
-				if (rgbValue) {
-					const parts = extractRgb(rgbValue).trim().split(/\s+/);
-					color = colorDef.opacity !== void 0 ? `rgba(${parts.join(", ")}, ${parseInt(colorDef.opacity, 10) / 100})` : `rgb(${parts.join(", ")})`;
-				}
-			}
-		} else if (backgroundFill.type === "always") color = newAlwaysPalette[backgroundFill.value] ?? "transparent";
-		else if (backgroundFill.type === "spectrum") {
-			const spectrumValue = backgroundFill.value;
-			const rgbValue = spectrum[spectrumValue.hue]?.[spectrumValue.step];
-			if (rgbValue) color = `rgb(${extractRgb(rgbValue).trim().split(/\s+/).join(", ")})`;
+		if (fbv) {
+			const alpha = parseInt(String(fbv.a), 10) / 100;
+			color = alpha < 1 ? `rgba(${fbv.r}, ${fbv.g}, ${fbv.b}, ${alpha})` : `rgb(${fbv.r}, ${fbv.g}, ${fbv.b})`;
 		}
 		result[`elevation-${level}`] = color;
 	}
@@ -277,7 +264,7 @@ function isElevationCustomShadows(value) {
 function generateBoxShadows(config, colorMode) {
 	const colorsConfig = config.colorMode[colorMode];
 	const spectrum = colorsConfig.spectrum;
-	const palette = colorsConfig.palette.foreground;
+	const palette = colorsConfig.palette.shadow;
 	const drop = {};
 	const inset = {};
 	for (const [variant, presets] of Object.entries(config.shadow.drop)) {
@@ -388,7 +375,7 @@ function resolveValue(variable, config, colorMode, propName) {
 		const shadowVariant = value;
 		if (shadowVariant === "none") return [];
 		const shadowPresets = config.shadow.drop[shadowVariant];
-		if (shadowPresets && shadowPresets.length > 0) return convertShadowToBoxShadow(shadowPresets, spectrum, palette.foreground);
+		if (shadowPresets && shadowPresets.length > 0) return convertShadowToBoxShadow(shadowPresets, spectrum, palette.shadow);
 		return [];
 	}
 	if (type === "shadowVariantsWithInvert") {
@@ -396,9 +383,9 @@ function resolveValue(variable, config, colorMode, propName) {
 		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);
+		if (shadowPresets && shadowPresets.length > 0) return convertShadowToBoxShadow(shadowPresets, spectrum, palette.shadow, true);
 		const dropPresets = config.shadow.drop[baseVariant];
-		if (dropPresets && dropPresets.length > 0) return convertShadowToBoxShadow(dropPresets, spectrum, palette.foreground, true);
+		if (dropPresets && dropPresets.length > 0) return convertShadowToBoxShadow(dropPresets, spectrum, palette.shadow, true);
 		return [];
 	}
 	if (type === "elevationAliases") {
@@ -407,22 +394,10 @@ function resolveValue(variable, config, colorMode, propName) {
 		if (!elevationPreset) return;
 		const preset = elevationPreset[colorMode];
 		if (propName === "backgroundColor") {
-			const backgroundFill = preset.backgroundFill;
-			if (backgroundFill.type === "background") {
-				const colorDef = palette.background?.[backgroundFill.value];
-				if (colorDef) {
-					const rgbValue = spectrum[colorDef.hue]?.[colorDef.step];
-					if (rgbValue) {
-						const parts = extractRgb(rgbValue).trim().split(/\s+/);
-						if (colorDef.opacity !== void 0) return `rgba(${parts.join(", ")}, ${parseInt(colorDef.opacity, 10) / 100})`;
-						return `rgb(${parts.join(", ")})`;
-					}
-				}
-			} else if (backgroundFill.type === "always") return newAlwaysPalette[backgroundFill.value] ?? "transparent";
-			else if (backgroundFill.type === "spectrum") {
-				const spectrumValue = backgroundFill.value;
-				const rgbValue = spectrum[spectrumValue.hue]?.[spectrumValue.step];
-				if (rgbValue) return `rgb(${extractRgb(rgbValue).trim().split(/\s+/).join(", ")})`;
+			const fbv = preset.finalBackgroundValue;
+			if (fbv) {
+				const alpha = parseInt(String(fbv.a), 10) / 100;
+				return alpha < 1 ? `rgba(${fbv.r}, ${fbv.g}, ${fbv.b}, ${alpha})` : `rgb(${fbv.r}, ${fbv.g}, ${fbv.b})`;
 			}
 			return "transparent";
 		}
@@ -457,10 +432,10 @@ function resolveValue(variable, config, colorMode, propName) {
 			if (!preset.dropShadow || preset.dropShadow === "none") return [];
 			if (isElevationCustomShadows(preset.dropShadow)) {
 				const allPresets = [...preset.dropShadow];
-				return allPresets.length > 0 ? convertShadowToBoxShadow(allPresets, spectrum, palette.foreground) : [];
+				return allPresets.length > 0 ? convertShadowToBoxShadow(allPresets, spectrum, palette.shadow) : [];
 			}
 			const refPresets = config.shadow.drop[preset.dropShadow];
-			return refPresets && refPresets.length > 0 ? convertShadowToBoxShadow(refPresets, spectrum, palette.foreground) : [];
+			return refPresets && refPresets.length > 0 ? convertShadowToBoxShadow(refPresets, spectrum, palette.shadow) : [];
 		}
 		return;
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yahoo/uds-mobile",
-  "version": "2.4.1",
+  "version": "2.4.3",
   "type": "module",
   "bin": {
     "uds-mobile": "./cli/uds-mobile.js"