refactor(suite-native): rename and add missing spacing constants

packages/theme/src/spacings.ts

@@ -27,14 +27,20 @@ export type Spacings = typeof spacings;
 export type Spacing = keyof typeof spacings;
 export type SpacingValues = Spacings[Spacing];
 
+type NativeSpacingValue = 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 52 | 64;
+
 export const nativeSpacings = {
-    extraSmall: 4,
-    small: 8,
-    medium: 16,
-    large: 24,
-    extraLarge: 32,
-    xxl: 64,
-} as const;
+    sp2: 2,
+    sp4: 4,
+    sp8: 8,
+    sp12: 12,
+    sp16: 16,
+    sp24: 24,
+    sp32: 32,
+    sp40: 40,
+    sp52: 52,
+    sp64: 64,
+} as const satisfies { [V in NativeSpacingValue as `sp${V}`]: V };
 
 export type NativeSpacings = typeof nativeSpacings;
 export type NativeSpacing = keyof typeof nativeSpacings;

suite-native/accounts/src/components/AccountSectionTitle.tsx

@@ -33,7 +33,7 @@ export const AccountSectionTitle: React.FC<AccountSectionTitleProps> = ({
     }, [account, localCurrency, rates]);
 
     return (
-        <HStack alignItems="center" justifyContent="space-between" marginBottom="medium">
+        <HStack alignItems="center" justifyContent="space-between" marginBottom="sp16">
             <Text variant="highlight">{account.accountLabel}</Text>
 
             {hasAnyKnownTokens && (

suite-native/accounts/src/components/AccountSelectBottomSheet.tsx

@@ -20,7 +20,7 @@ type AccountSelectBottomSheetProps = {
 };
 
 const contentContainerStyle = prepareNativeStyle(utils => ({
-    paddingHorizontal: utils.spacings.medium,
+    paddingHorizontal: utils.spacings.sp16,
 }));
 
 export const AccountSelectBottomSheet = React.memo(

suite-native/accounts/src/components/AccountsList/AccountsList.tsx

@@ -56,7 +56,7 @@ export const AccountsList = ({
 
     return (
         <>
-            <VStack spacing="medium" paddingBottom="medium">
+            <VStack spacing="sp16" paddingBottom="sp16">
                 {groups.map(([accountTypeHeader, networkAccounts]) => (
                     <Card key={accountTypeHeader} noPadding>
                         {networkAccounts.map(account => (

suite-native/accounts/src/components/AccountsList/AccountsListItemBase.tsx

@@ -31,14 +31,14 @@ const accountListItemStyle = prepareNativeStyle<{
     alignItem: 'center',
 
     paddingVertical: 12,
-    paddingHorizontal: utils.spacings.medium,
+    paddingHorizontal: utils.spacings.sp16,
 
     extend: {
         condition: hasBackground,
         style: {
             backgroundColor: utils.colors.backgroundSurfaceElevation1,
-            paddingTop: utils.spacings.medium,
-            paddingBottom: utils.spacings.medium,
+            paddingTop: utils.spacings.sp16,
+            paddingBottom: utils.spacings.sp16,
 
             extend: [
                 {
@@ -54,7 +54,7 @@ const accountListItemStyle = prepareNativeStyle<{
                     style: {
                         borderBottomLeftRadius: utils.borders.radii.medium,
                         borderBottomRightRadius: utils.borders.radii.medium,
-                        marginBottom: utils.spacings.extraLarge,
+                        marginBottom: utils.spacings.sp32,
                         ...utils.boxShadows.small,
                     },
                 },
@@ -78,7 +78,7 @@ const valuesContainerStyle = prepareNativeStyle(utils => ({
     maxWidth: '40%',
     flexShrink: 0,
     alignItems: 'flex-end',
-    paddingLeft: utils.spacings.small,
+    paddingLeft: utils.spacings.sp8,
 }));
 
 export const AccountsListItemBase = ({
@@ -110,10 +110,10 @@ export const AccountsListItemBase = ({
             disabled={disabled}
         >
             <Box flexDirection="row" alignItems="center" flex={1}>
-                <Box marginRight="medium">{icon}</Box>
+                <Box marginRight="sp16">{icon}</Box>
                 <Box style={applyStyle(accountDescriptionStyle)}>
                     <Text>{title}</Text>
-                    <HStack spacing="extraSmall" alignItems="center">
+                    <HStack spacing="sp4" alignItems="center">
                         {badges}
                     </HStack>
                 </Box>

suite-native/accounts/src/components/AccountsSearchForm.tsx

@@ -46,7 +46,7 @@ export const AccountsSearchForm = ({ onPressCancel, onInputChange }: AccountsSea
             )}
             exiting={FadeOut.duration(SEARCH_INPUT_ANIMATION_DURATION)}
         >
-            <HStack marginHorizontal="medium" spacing="medium" justifyContent="space-between">
+            <HStack marginHorizontal="sp16" spacing="sp16" justifyContent="space-between">
                 <Animated.View
                     entering={SlideInLeft.duration(SEARCH_INPUT_ANIMATION_DURATION).delay(
                         SEARCH_INPUT_ANIMATION_DELAY,

suite-native/accounts/src/components/SearchableAccountsListScreenHeader.tsx

@@ -25,7 +25,7 @@ export const SEARCH_FORM_CONTAINER_HEIGHT = 56;
 
 const searchFormContainerStyle = prepareNativeStyle(utils => ({
     height: SEARCH_FORM_CONTAINER_HEIGHT,
-    marginBottom: utils.spacings.medium,
+    marginBottom: utils.spacings.sp16,
 }));
 
 export const SearchableAccountsListScreenHeader = ({

suite-native/accounts/src/components/SelectableNetworkItem.tsx

@@ -19,11 +19,11 @@ const selectableAssetContentStyle = prepareNativeStyle(utils => ({
     alignItems: 'center',
     justifyContent: 'space-between',
     flex: 1,
-    marginLeft: utils.spacings.small + utils.spacings.extraSmall,
+    marginLeft: utils.spacings.sp8 + utils.spacings.sp4,
 }));
 
 const tokensBadgeStyle = prepareNativeStyle(utils => ({
-    paddingBottom: utils.spacings.extraSmall / 2,
+    paddingBottom: utils.spacings.sp4 / 2,
 }));
 
 export const SelectableNetworkItem = ({ symbol, onPress, rightIcon }: SelectableAssetItemProps) => {

suite-native/alerts/src/components/AlertSheet.tsx

@@ -24,18 +24,18 @@ type AlertSheetProps = {
 const alertSheetContainerStyle = prepareNativeStyle(utils => ({
     justifyContent: 'center',
     alignItems: 'center',
-    paddingTop: utils.spacings.extraLarge,
-    paddingHorizontal: utils.spacings.large,
-    paddingVertical: utils.spacings.extraLarge,
-    marginBottom: utils.spacings.extraLarge,
-    marginHorizontal: utils.spacings.small,
+    paddingTop: utils.spacings.sp32,
+    paddingHorizontal: utils.spacings.sp24,
+    paddingVertical: utils.spacings.sp32,
+    marginBottom: utils.spacings.sp32,
+    marginHorizontal: utils.spacings.sp8,
     borderRadius: utils.borders.radii.medium,
     ...utils.boxShadows.small,
 }));
 
 const alertSheetContentStyle = prepareNativeStyle(utils => ({
     width: '100%',
-    gap: utils.spacings.large,
+    gap: utils.spacings.sp24,
 }));
 
 const shakeTriggerStyle = prepareNativeStyle(_ => ({
@@ -115,7 +115,7 @@ export const AlertSheet = ({ alert }: AlertSheetProps) => {
                                     />
                                 )}
                                 {appendix}
-                                <VStack spacing="medium">
+                                <VStack spacing="sp16">
                                     <Button
                                         size="medium"
                                         colorScheme={primaryButtonVariant}

suite-native/assets/src/components/DiscoveryAssetsLoader.tsx

@@ -18,7 +18,7 @@ export const DiscoveryAssetsLoader = ({ isListEmpty }: { isListEmpty: boolean })
     return (
         <>
             <ListItemSkeleton />
-            <HStack justifyContent="center" marginBottom="medium">
+            <HStack justifyContent="center" marginBottom="sp16">
                 <Icon size="mediumLarge" name="trezor" />
                 <Text variant="callout">{discoveryProgressText}</Text>
             </HStack>

suite-native/atoms/src/Accordion/AccordionItem.tsx

@@ -20,7 +20,7 @@ const triggerStyle = prepareNativeStyle(utils => ({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingTop: utils.spacings.extraSmall,
+    paddingTop: utils.spacings.sp4,
 }));
 
 const titleStyle = prepareNativeStyle(_ => ({
@@ -35,7 +35,7 @@ const contentWrapperStyle = prepareNativeStyle(() => ({
 }));
 
 const contentStyle = prepareNativeStyle(utils => ({
-    paddingBottom: utils.spacings.small,
+    paddingBottom: utils.spacings.sp8,
 }));
 
 const accordionWrapperStyle = prepareNativeStyle(() => ({

suite-native/atoms/src/AlertBox.tsx

@@ -30,8 +30,8 @@ const alertWrapperStyle = prepareNativeStyle<AlertWrapperStyleType>(
         borderWidth: 1,
         borderColor: utils.colors[borderColor],
         backgroundColor: utils.colors[backgroundColor],
-        paddingVertical: utils.spacings.small,
-        paddingHorizontal: utils.spacings.medium,
+        paddingVertical: utils.spacings.sp8,
+        paddingHorizontal: utils.spacings.sp16,
         gap: 12,
     }),
 );

suite-native/atoms/src/Badge.tsx

@@ -51,8 +51,8 @@ const badgeStyle = prepareNativeStyle<BadgeStyleProps>(
         alignItems: 'center',
         justifyContent: 'center',
         backgroundColor: utils.colors[backgroundColor],
-        paddingHorizontal: utils.spacings.small - (size === 'medium' ? 0 : 2),
-        paddingVertical: utils.spacings.small / 4,
+        paddingHorizontal: utils.spacings.sp8 - (size === 'medium' ? 0 : 2),
+        paddingVertical: utils.spacings.sp8 / 4,
         borderRadius: utils.borders.radii.round,
         extend: [
             {
@@ -163,7 +163,7 @@ export const Badge = ({
                 }),
                 style,
             ]}
-            spacing={utils.spacings.extraSmall}
+            spacing={utils.spacings.sp4}
         >
             {icon && badgeIcon}
             <Text color={textColor} variant={textVariant} numberOfLines={1} ellipsizeMode="tail">

suite-native/atoms/src/Button/Button.tsx

@@ -180,13 +180,13 @@ export const buttonSchemeToColorsMap = {
 const sizeToDimensionsMap = {
     extraSmall: {
         minHeight: 36,
-        paddingVertical: nativeSpacings.small,
+        paddingVertical: nativeSpacings.sp8,
         paddingHorizontal: 12,
     },
     small: {
         minHeight: 40,
         paddingVertical: 10,
-        paddingHorizontal: nativeSpacings.medium,
+        paddingHorizontal: nativeSpacings.sp16,
     },
     medium: {
         minHeight: 48,
@@ -195,8 +195,8 @@ const sizeToDimensionsMap = {
     },
     large: {
         minHeight: 56,
-        paddingVertical: nativeSpacings.medium,
-        paddingHorizontal: nativeSpacings.large,
+        paddingVertical: nativeSpacings.sp16,
+        paddingHorizontal: nativeSpacings.sp24,
     },
 } as const satisfies Record<ButtonSize, NativeStyleObject>;
 

suite-native/atoms/src/Card/Card.tsx

@@ -26,7 +26,7 @@ const cardContainerStyle = prepareNativeStyle<{
 }>((utils, { isAlertDisplayed, noPadding, borderColor }) => ({
     backgroundColor: utils.colors.backgroundSurfaceElevation1,
     borderRadius: utils.borders.radii.medium,
-    padding: noPadding ? 0 : utils.spacings.medium,
+    padding: noPadding ? 0 : utils.spacings.sp16,
     ...utils.boxShadows.small,
 
     extend: [
@@ -51,8 +51,8 @@ const alertBoxWrapperStyle = prepareNativeStyle(utils => ({
     backgroundColor: utils.colors.backgroundSurfaceElevation1,
     borderTopLeftRadius: utils.borders.radii.medium,
     borderTopRightRadius: utils.borders.radii.medium,
-    paddingHorizontal: utils.spacings.extraSmall,
-    paddingTop: utils.spacings.extraSmall,
+    paddingHorizontal: utils.spacings.sp4,
+    paddingTop: utils.spacings.sp4,
 }));
 
 export const Card = ({

suite-native/atoms/src/Card/CardDivider.tsx

@@ -27,7 +27,7 @@ const dividerStyle = prepareNativeStyle<SetRequired<CardDividerProps, 'horizonta
     }),
 );
 
-export const CardDivider = ({ color, horizontalPadding = 'medium' }: CardDividerProps) => {
+export const CardDivider = ({ color, horizontalPadding = 'sp16' }: CardDividerProps) => {
     const { applyStyle } = useNativeStyles();
 
     return <Divider style={applyStyle(dividerStyle, { color, horizontalPadding })} />;

suite-native/atoms/src/ErrorMessage.tsx

@@ -15,19 +15,19 @@ const errorMessageStyle = prepareNativeStyle(utils => ({
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: utils.colors.backgroundAlertRedSubtleOnElevation0,
-    margin: utils.spacings.small,
+    margin: utils.spacings.sp8,
     borderColor: utils.colors.borderAlertRed,
     borderWidth: 1,
     borderRadius: utils.borders.radii.medium,
-    padding: utils.spacings.large,
+    padding: utils.spacings.sp24,
 }));
 
 export const ErrorMessage = ({ errorMessage }: ErrorMessageProps) => {
     const { applyStyle } = useNativeStyles();
 
     return (
         <Box style={applyStyle(errorMessageStyle)}>
-            <Box marginRight="small">
+            <Box marginRight="sp8">
                 <Icon name="warningCircle" size="large" color="iconAlertRed" />
             </Box>
             <Text color="textAlertRed">Error: {errorMessage}</Text>

suite-native/atoms/src/Headered.tsx

@@ -14,16 +14,14 @@ type HeaderedProps = {
 type HeaderContainerProps = { children: ReactNode };
 
 const HeaderContainer = ({ children }: HeaderContainerProps) => (
-    <Box paddingHorizontal="medium">
-        {G.isString(children) ? <Text>{children}</Text> : children}
-    </Box>
+    <Box paddingHorizontal="sp16">{G.isString(children) ? <Text>{children}</Text> : children}</Box>
 );
 
 /**
  * Adds a header to child component with app-wide padding styles.
  */
 export const Headered = ({ children, header }: HeaderedProps) => (
-    <VStack spacing="medium">
+    <VStack spacing="sp16">
         <HeaderContainer>{header}</HeaderContainer>
         {children}
     </VStack>

suite-native/atoms/src/Input/Input.tsx

@@ -46,15 +46,15 @@ export type InputProps = TextInputProps &
     >;
 
 const INPUT_VERTICAL_PADDING =
-    Platform.OS == 'android' ? nativeSpacings.medium - 2 : nativeSpacings.medium;
+    Platform.OS == 'android' ? nativeSpacings.sp16 - 2 : nativeSpacings.sp16;
 const INPUT_WITH_LABEL_BOTTOM_PADDING =
-    Platform.OS == 'android' ? nativeSpacings.extraSmall : nativeSpacings.small;
-const INPUT_LABEL_TOP_PADDING = nativeSpacings.extraLarge;
-const INPUT_LABEL_TOP_PADDING_MINIMIZED = INPUT_LABEL_TOP_PADDING + nativeSpacings.small;
-const INPUT_WRAPPER_PADDING_HORIZONTAL = nativeSpacings.medium * ACCESSIBILITY_FONTSIZE_MULTIPLIER;
-const INPUT_WRAPPER_PADDING_VERTICAL = nativeSpacings.medium * ACCESSIBILITY_FONTSIZE_MULTIPLIER;
+    Platform.OS == 'android' ? nativeSpacings.sp4 : nativeSpacings.sp8;
+const INPUT_LABEL_TOP_PADDING = nativeSpacings.sp32;
+const INPUT_LABEL_TOP_PADDING_MINIMIZED = INPUT_LABEL_TOP_PADDING + nativeSpacings.sp8;
+const INPUT_WRAPPER_PADDING_HORIZONTAL = nativeSpacings.sp16 * ACCESSIBILITY_FONTSIZE_MULTIPLIER;
+const INPUT_WRAPPER_PADDING_VERTICAL = nativeSpacings.sp16 * ACCESSIBILITY_FONTSIZE_MULTIPLIER;
 const INPUT_WRAPPER_PADDING_VERTICAL_MINIMIZED =
-    nativeSpacings.small * ACCESSIBILITY_FONTSIZE_MULTIPLIER;
+    nativeSpacings.sp8 * ACCESSIBILITY_FONTSIZE_MULTIPLIER;
 const INPUT_TEXT_HEIGHT = 24 * ACCESSIBILITY_FONTSIZE_MULTIPLIER;
 
 type InputWrapperStyleProps = {
@@ -135,12 +135,12 @@ const inputStyle = prepareNativeStyle<InputStyleProps>(
         justifyContent: 'center',
         minHeight: INPUT_TEXT_HEIGHT,
         color: isDisabled ? utils.colors.textSubdued : utils.colors.textDefault,
-        left: isLeftIconDisplayed ? utils.spacings.large : 0,
+        left: isLeftIconDisplayed ? utils.spacings.sp24 : 0,
         paddingRight: isRightIconDisplayed ? 40 : 0,
         borderWidth: 0,
         flex: 1,
         // Make the text input uniform on both platforms (https://stackoverflow.com/a/68458803/1281305)
-        paddingTop: isLabelDisplayed ? utils.spacings.large : INPUT_VERTICAL_PADDING,
+        paddingTop: isLabelDisplayed ? utils.spacings.sp24 : INPUT_VERTICAL_PADDING,
         paddingBottom: isLabelDisplayed ? INPUT_WITH_LABEL_BOTTOM_PADDING : INPUT_VERTICAL_PADDING,
     }),
 );
@@ -158,7 +158,7 @@ const labelStyle = prepareNativeStyle(
         color: utils.colors.textSubdued,
         position: 'absolute',
         top: INPUT_LABEL_TOP_PADDING,
-        left: INPUT_WRAPPER_PADDING_HORIZONTAL + (isLeftIconDisplayed ? utils.spacings.large : 0),
+        left: INPUT_WRAPPER_PADDING_HORIZONTAL + (isLeftIconDisplayed ? utils.spacings.sp24 : 0),
         extend: {
             condition: isLabelMinimized,
             style: {
@@ -173,7 +173,7 @@ const placeholderStyle = prepareNativeStyle(
     (utils, { isLeftIconDisplayed }: InputLabelStyleProps) => ({
         position: 'absolute',
         top: INPUT_VERTICAL_PADDING + utils.borders.widths.large,
-        left: INPUT_WRAPPER_PADDING_HORIZONTAL + (isLeftIconDisplayed ? utils.spacings.large : 0),
+        left: INPUT_WRAPPER_PADDING_HORIZONTAL + (isLeftIconDisplayed ? utils.spacings.sp24 : 0),
         color: utils.colors.textSubdued,
     }),
 );
@@ -188,11 +188,11 @@ const iconStyle = prepareNativeStyle(() => ({
 
 const leftIconStyle = prepareNativeStyle(utils => ({
     marginRight: 3,
-    left: utils.spacings.small,
+    left: utils.spacings.sp8,
 }));
 
 const rightIconStyle = prepareNativeStyle(utils => ({
-    right: utils.spacings.medium,
+    right: utils.spacings.sp16,
 }));
 
 const useInputLabelAnimationStyles = ({