@yahoo/uds-mobile 2.23.3 → 2.24.0-beta.2

package/README.md

@@ -546,17 +546,11 @@ The CLI generates a TypeScript file containing:
 ```typescript
 // AUTO-GENERATED FILE. DO NOT EDIT.
 export const themes = {
-  light: {
-    /* ... */
-  },
-  dark: {
-    /* ... */
-  },
+  light: {/* ... */},
+  dark: {/* ... */},
 };
 
-export const breakpoints = {
-  /* ... */
-};
+export const breakpoints = {/* ... */};
 ```
 
 ## Testing
@@ -642,9 +636,7 @@ import { mocks } from '@yahoo/uds-mobile/jest';
 jest.mock('react-native-unistyles', () => ({
   ...mocks.unistyles,
   useUnistyles: () => ({
-    theme: {
-      /* custom theme */
-    },
+    theme: {/* custom theme */},
     rt: { themeName: 'dark' },
   }),
 }));

package/dist/bin/automated-config/dist/generated/generatedConfigs.mjs

@@ -2694,7 +2694,8 @@ const AvatarConfig = {
 						"md",
 						"lg"
 					]]
-				} }
+				} },
+				userOverridableProperties: ["iconSize"]
 			},
 			root: {
 				label: "root",
@@ -2931,7 +2932,8 @@ const BadgeConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -3532,7 +3534,8 @@ const BadgeConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",
@@ -4881,7 +4884,8 @@ const BannerConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -5887,7 +5891,8 @@ const BannerConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",
@@ -8841,7 +8846,8 @@ const ButtonConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -9456,7 +9462,8 @@ const ButtonConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",
@@ -13187,7 +13194,8 @@ const ChipConfig = {
 									"always/accent"
 								]
 							]
-						} }
+						} },
+						userOverridableProperties: ["color"]
 					},
 					root: {
 						label: "root",
@@ -14740,7 +14748,8 @@ const ChipConfig = {
 									"always/accent"
 								]
 							]
-						} }
+						} },
+						userOverridableProperties: ["color"]
 					},
 					root: {
 						label: "root",
@@ -16292,7 +16301,8 @@ const ChipConfig = {
 										"always/accent"
 									]
 								]
-							} }
+							} },
+							userOverridableProperties: ["color"]
 						},
 						root: {
 							label: "root",
@@ -17497,7 +17507,8 @@ const ChipConfig = {
 						"md",
 						"lg"
 					]]
-				} }
+				} },
+				userOverridableProperties: ["iconSize"]
 			},
 			root: {
 				label: "root",
@@ -18635,7 +18646,8 @@ const IconButtonConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -18771,7 +18783,8 @@ const InputConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				helperIcon: {
 					label: "helperIcon",
@@ -18789,7 +18802,8 @@ const InputConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				helperText: {
 					label: "helperText",
@@ -19227,7 +19241,8 @@ const InputConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				}
 			},
 			options: ["md", "lg"]
@@ -19609,7 +19624,8 @@ const InputConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				helperIcon: {
 					atomicStates: [
@@ -19979,7 +19995,8 @@ const InputConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				helperText: {
 					atomicStates: [
@@ -22932,7 +22949,8 @@ const InputConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				}
 			},
 			options: ["default"]
@@ -22984,7 +23002,8 @@ const LinkConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -23455,7 +23474,8 @@ const LinkConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				iconStart: {
 					label: "iconStart",
@@ -23824,7 +23844,8 @@ const LinkConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",
@@ -26023,7 +26044,8 @@ const MenuItemConfig = {
 										"always/accent"
 									]
 								]
-							} }
+							} },
+							userOverridableProperties: ["color"]
 						},
 						root: {
 							label: "root",
@@ -27128,7 +27150,8 @@ const MenuItemConfig = {
 										"always/accent"
 									]
 								]
-							} }
+							} },
+							userOverridableProperties: ["color"]
 						},
 						root: {
 							label: "root",
@@ -27853,7 +27876,8 @@ const MenuItemConfig = {
 										"always/accent"
 									]
 								]
-							} }
+							} },
+							userOverridableProperties: ["color"]
 						},
 						text: {
 							label: "text",
@@ -28302,7 +28326,8 @@ const MenuItemConfig = {
 						"md",
 						"lg"
 					]]
-				} }
+				} },
+				userOverridableProperties: ["iconSize"]
 			},
 			root: {
 				label: "root",
@@ -28321,7 +28346,8 @@ const MenuItemConfig = {
 						"md",
 						"lg"
 					]]
-				} }
+				} },
+				userOverridableProperties: ["iconSize"]
 			},
 			text: {
 				label: "text",
@@ -28499,7 +28525,8 @@ const ModalConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				closeIconContainer: {
 					label: "closeIconContainer",
@@ -29327,7 +29354,8 @@ const ModalConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				description: {
 					label: "description",
@@ -31204,7 +31232,8 @@ const PaddleNavConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -32215,7 +32244,8 @@ const PaddleNavConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",
@@ -32657,7 +32687,8 @@ const PaginationConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				item: {
 					label: "item",
@@ -34031,7 +34062,8 @@ const PopoverConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				closeIconContainer: {
 					label: "closeIconContainer",
@@ -34670,7 +34702,8 @@ const PopoverConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",
@@ -39992,7 +40025,8 @@ const SelectItemConfig = {
 										"always/accent"
 									]
 								]
-							} }
+							} },
+							userOverridableProperties: ["color"]
 						},
 						root: {
 							label: "root",
@@ -40755,7 +40789,8 @@ const SelectItemConfig = {
 						"md",
 						"lg"
 					]]
-				} }
+				} },
+				userOverridableProperties: ["iconSize"]
 			},
 			root: {
 				label: "root",
@@ -40774,7 +40809,8 @@ const SelectItemConfig = {
 						"md",
 						"lg"
 					]]
-				} }
+				} },
+				userOverridableProperties: ["iconSize"]
 			},
 			text: {
 				label: "text",
@@ -40961,7 +40997,8 @@ const SwitchConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -42092,7 +42129,8 @@ const SwitchConfig = {
 								"muted",
 								"on-color"
 							]]
-						} }
+						} },
+						userOverridableProperties: ["color"]
 					},
 					root: {
 						label: "root",
@@ -43253,7 +43291,8 @@ const TabConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -43819,7 +43858,8 @@ const TabConfig = {
 									"always/accent"
 								]
 							]
-						} }
+						} },
+						userOverridableProperties: ["color"]
 					},
 					root: {
 						label: "root",
@@ -46447,7 +46487,8 @@ const ToastConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				icon: {
 					label: "icon",
@@ -46462,7 +46503,8 @@ const ToastConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				label: {
 					label: "label",
@@ -47129,7 +47171,8 @@ const ToastConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				icon: {
 					label: "icon",
@@ -47517,7 +47560,8 @@ const ToastConfig = {
 								"multicolor"
 							]]
 						}
-					}
+					},
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",
@@ -48450,7 +48494,8 @@ const TooltipConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -49085,7 +49130,8 @@ const TooltipConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",

package/dist/components/BottomSheet/BottomSheet.cjs

@@ -21,8 +21,8 @@ let generated_styles = require("../../../generated/styles");
 let react_native_reanimated = require("react-native-reanimated");
 react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
 let react_native_gesture_handler = require("react-native-gesture-handler");
-let react_native_screens = require("react-native-screens");
 let react_native_safe_area_context = require("react-native-safe-area-context");
+let react_native_screens = require("react-native-screens");
 //#region src/components/BottomSheet/BottomSheet.tsx
 function useScreenCornerRadius() {
 	const [, forceUpdate] = (0, react.useState)(0);

package/dist/components/BottomSheet/BottomSheet.js

@@ -18,8 +18,8 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { bottomSheetStyles } from "../../../generated/styles";
 import Animated, { interpolate, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
 import { GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
-import { FullWindowOverlay } from "react-native-screens";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { FullWindowOverlay } from "react-native-screens";
 //#region src/components/BottomSheet/BottomSheet.tsx
 function useScreenCornerRadius() {
 	const [, forceUpdate] = useState(0);

package/dist/components/Button/buttonTheme.cjs

@@ -44,8 +44,15 @@ function getSafeIconCell(fontSize) {
 	const overflowBelowEm = Math.max(0, -metrics.bbox.minY);
 	return Math.ceil(fontSize) + getMetricHeight(overflowAboveEm, metrics.unitsPerEm, fontSize) + getMetricHeight(overflowBelowEm, metrics.unitsPerEm, fontSize);
 }
-/** Safe native content metrics while retaining the token-derived target control height. */
-function getButtonControlMetrics(theme, size) {
+/**
+* Safe native content metrics while retaining the token-derived target control height.
+*
+* `fontScaleFactor` (the capped OS font scale, >= 1) pre-scales container
+* metrics only. The returned `labelLineHeight`/`iconCellHeight` stay unscaled
+* because they go into Text/Icon styles, which native multiplies by the same
+* capped factor — container math must mirror that, not double-apply it.
+*/
+function getButtonControlMetrics(theme, size, fontScaleFactor = 1) {
 	const rootStyle = getLayerStyle(theme, buttonSizePath(size, "root"));
 	const iconStyle = getLayerStyle(theme, buttonSizePath(size, "icon"));
 	const textStyle = getLayerStyle(theme, buttonSizePath(size, "rootText"));
@@ -53,19 +60,25 @@ function getButtonControlMetrics(theme, size) {
 	const iconSize = getIconSize(iconStyle);
 	const fontSize = typeof textStyle.fontSize === "number" ? textStyle.fontSize : iconSize;
 	const tokenLineHeight = typeof textStyle.lineHeight === "number" ? textStyle.lineHeight : fontSize;
-	const targetContentHeight = Math.max(iconSize, tokenLineHeight);
+	const targetContentHeight = Math.max(iconSize, tokenLineHeight) * fontScaleFactor;
 	const minHeight = Math.ceil(paddingVertical * 2 + targetContentHeight);
 	const labelLineHeight = getSafeLabelLineHeight(textStyle, iconSize);
 	const iconCellHeight = getSafeIconCell(iconSize);
+	const safeContentHeight = Math.max(labelLineHeight, iconCellHeight) * fontScaleFactor;
 	return {
 		minHeight,
 		labelLineHeight,
 		iconCellHeight,
-		paddingVertical: Math.max(0, (minHeight - Math.max(labelLineHeight, iconCellHeight)) / 2)
+		paddingVertical: Math.max(0, (minHeight - safeContentHeight) / 2)
 	};
 }
-/** Safe icon cell within the token-derived control size; explicit token height (match-button-height opt-in) wins as the target. */
-function getIconButtonControlMetrics(theme, size) {
+/**
+* Safe icon cell within the token-derived control size; explicit token height (match-button-height opt-in) wins as the target.
+*
+* `fontScaleFactor` behaves as in {@link getButtonControlMetrics}; an explicit
+* token height stays fixed, with padding absorbing the scaled content.
+*/
+function getIconButtonControlMetrics(theme, size, fontScaleFactor = 1) {
 	const rootStyle = getLayerStyle(theme, iconButtonSizePath(size, "root"));
 	const iconStyle = getLayerStyle(theme, iconButtonSizePath(size, "icon"));
 	const iconSize = getIconSize(iconStyle);
@@ -73,12 +86,12 @@ function getIconButtonControlMetrics(theme, size) {
 	const paddingVertical = getVerticalPadding(rootStyle);
 	const explicitHeight = typeof rootStyle.height === "number" ? rootStyle.height : void 0;
 	const hasExplicitHeight = SHARED_BUTTON_ICONBUTTON_SIZES.has(size) && explicitHeight !== void 0;
-	const minHeight = hasExplicitHeight ? explicitHeight : Math.ceil(paddingVertical * 2 + Math.max(iconSize, tokenLineHeight));
+	const minHeight = hasExplicitHeight ? explicitHeight : Math.ceil(paddingVertical * 2 + Math.max(iconSize, tokenLineHeight) * fontScaleFactor);
 	const iconCellHeight = getSafeIconCell(iconSize);
 	return {
 		minHeight,
 		iconCellHeight,
-		paddingVertical: Math.max(0, (minHeight - Math.max(iconSize, iconCellHeight)) / 2),
+		paddingVertical: Math.max(0, (minHeight - Math.max(iconSize, iconCellHeight) * fontScaleFactor) / 2),
 		hasExplicitHeight
 	};
 }

package/dist/components/Button/buttonTheme.d.cts

@@ -8,15 +8,27 @@ type ButtonTheme = {
 };
 /** Safe line box for the icon font's em square plus any bbox overflow. */
 declare function getSafeIconCell(fontSize: number): number;
-/** Safe native content metrics while retaining the token-derived target control height. */
-declare function getButtonControlMetrics(theme: ButtonTheme, size: ButtonSize): {
+/**
+ * Safe native content metrics while retaining the token-derived target control height.
+ *
+ * `fontScaleFactor` (the capped OS font scale, >= 1) pre-scales container
+ * metrics only. The returned `labelLineHeight`/`iconCellHeight` stay unscaled
+ * because they go into Text/Icon styles, which native multiplies by the same
+ * capped factor — container math must mirror that, not double-apply it.
+ */
+declare function getButtonControlMetrics(theme: ButtonTheme, size: ButtonSize, fontScaleFactor?: number): {
   minHeight: number;
   labelLineHeight: number;
   iconCellHeight: number;
   paddingVertical: number;
 };
-/** Safe icon cell within the token-derived control size; explicit token height (match-button-height opt-in) wins as the target. */
-declare function getIconButtonControlMetrics(theme: ButtonTheme, size: IconButtonSize): {
+/**
+ * Safe icon cell within the token-derived control size; explicit token height (match-button-height opt-in) wins as the target.
+ *
+ * `fontScaleFactor` behaves as in {@link getButtonControlMetrics}; an explicit
+ * token height stays fixed, with padding absorbing the scaled content.
+ */
+declare function getIconButtonControlMetrics(theme: ButtonTheme, size: IconButtonSize, fontScaleFactor?: number): {
   minHeight: number;
   iconCellHeight: number;
   paddingVertical: number;

package/dist/components/Button/buttonTheme.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonTheme.d.cts","names":[],"sources":["../../../src/components/Button/buttonTheme.ts"],"mappings":";;;;;KAKK,WAAA;EAEH,UAAA,EAAY,MAAA;AAAA;;iBA4DE,eAAA,CAAgB,QAAA;;iBAiBhB,uBAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,UAAA;EAEN,SAAA;EACA,eAAA;EACA,cAAA;EACA,eAAA;AAAA;AAPF;AAAA,iBAgCgB,2BAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,cAAA;EAEN,SAAA;EACA,cAAA;EACA,eAAA;EACA,iBAAA;AAAA;;iBAyBc,kBAAA,CAAmB,SAAA,EAAW,SAAA,EAAW,eAAA,WAA0B,SAAA"}
+{"version":3,"file":"buttonTheme.d.cts","names":[],"sources":["../../../src/components/Button/buttonTheme.ts"],"mappings":";;;;;KAKK,WAAA;EAEH,UAAA,EAAY,MAAA;AAAA;;iBA4DE,eAAA,CAAgB,QAAA;;;AAAhC;;;;;AAwBA;iBAAgB,uBAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,UAAA,EACN,eAAA;EAEA,SAAA;EACA,eAAA;EACA,cAAA;EACA,eAAA;AAAA;;;;;;;iBA8Bc,2BAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,cAAA,EACN,eAAA;EAEA,SAAA;EACA,cAAA;EACA,eAAA;EACA,iBAAA;AAAA;;iBA4Bc,kBAAA,CAAmB,SAAA,EAAW,SAAA,EAAW,eAAA,WAA0B,SAAA"}

package/dist/components/Button/buttonTheme.d.ts

@@ -8,15 +8,27 @@ type ButtonTheme = {
 };
 /** Safe line box for the icon font's em square plus any bbox overflow. */
 declare function getSafeIconCell(fontSize: number): number;
-/** Safe native content metrics while retaining the token-derived target control height. */
-declare function getButtonControlMetrics(theme: ButtonTheme, size: ButtonSize): {
+/**
+ * Safe native content metrics while retaining the token-derived target control height.
+ *
+ * `fontScaleFactor` (the capped OS font scale, >= 1) pre-scales container
+ * metrics only. The returned `labelLineHeight`/`iconCellHeight` stay unscaled
+ * because they go into Text/Icon styles, which native multiplies by the same
+ * capped factor — container math must mirror that, not double-apply it.
+ */
+declare function getButtonControlMetrics(theme: ButtonTheme, size: ButtonSize, fontScaleFactor?: number): {
   minHeight: number;
   labelLineHeight: number;
   iconCellHeight: number;
   paddingVertical: number;
 };
-/** Safe icon cell within the token-derived control size; explicit token height (match-button-height opt-in) wins as the target. */
-declare function getIconButtonControlMetrics(theme: ButtonTheme, size: IconButtonSize): {
+/**
+ * Safe icon cell within the token-derived control size; explicit token height (match-button-height opt-in) wins as the target.
+ *
+ * `fontScaleFactor` behaves as in {@link getButtonControlMetrics}; an explicit
+ * token height stays fixed, with padding absorbing the scaled content.
+ */
+declare function getIconButtonControlMetrics(theme: ButtonTheme, size: IconButtonSize, fontScaleFactor?: number): {
   minHeight: number;
   iconCellHeight: number;
   paddingVertical: number;

package/dist/components/Button/buttonTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonTheme.d.ts","names":[],"sources":["../../../src/components/Button/buttonTheme.ts"],"mappings":";;;;;KAKK,WAAA;EAEH,UAAA,EAAY,MAAA;AAAA;;iBA4DE,eAAA,CAAgB,QAAA;;iBAiBhB,uBAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,UAAA;EAEN,SAAA;EACA,eAAA;EACA,cAAA;EACA,eAAA;AAAA;AAPF;AAAA,iBAgCgB,2BAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,cAAA;EAEN,SAAA;EACA,cAAA;EACA,eAAA;EACA,iBAAA;AAAA;;iBAyBc,kBAAA,CAAmB,SAAA,EAAW,SAAA,EAAW,eAAA,WAA0B,SAAA"}
+{"version":3,"file":"buttonTheme.d.ts","names":[],"sources":["../../../src/components/Button/buttonTheme.ts"],"mappings":";;;;;KAKK,WAAA;EAEH,UAAA,EAAY,MAAA;AAAA;;iBA4DE,eAAA,CAAgB,QAAA;;;AAAhC;;;;;AAwBA;iBAAgB,uBAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,UAAA,EACN,eAAA;EAEA,SAAA;EACA,eAAA;EACA,cAAA;EACA,eAAA;AAAA;;;;;;;iBA8Bc,2BAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,cAAA,EACN,eAAA;EAEA,SAAA;EACA,cAAA;EACA,eAAA;EACA,iBAAA;AAAA;;iBA4Bc,kBAAA,CAAmB,SAAA,EAAW,SAAA,EAAW,eAAA,WAA0B,SAAA"}