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

packages/theme/src/borders.ts

@@ -17,19 +17,23 @@ export const borders = {
 
 export type Borders = typeof borders;
 
+type NativeRadiusValue = 4 | 8 | 12 | 16 | 20 | 24;
+
 export const nativeBorders = {
     widths: {
         small: 1,
         medium: 1.5,
         large: 2,
     },
     radii: {
-        extraSmall: 4,
-        small: 8,
-        medium: 16,
-        large: 24,
+        r4: 4,
+        r8: 8,
+        r12: 12,
+        r16: 16,
+        r20: 20,
+        r24: 24,
         round: 100, // Equivalent to 50% on the web
-    },
+    } satisfies { [V in NativeRadiusValue as `r${V}`]: V } & { round: 100 },
 } as const;
 
 export type NativeBorders = typeof nativeBorders;

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

@@ -44,16 +44,16 @@ const accountListItemStyle = prepareNativeStyle<{
                 {
                     condition: isFirst,
                     style: {
-                        borderTopLeftRadius: utils.borders.radii.medium,
-                        borderTopRightRadius: utils.borders.radii.medium,
+                        borderTopLeftRadius: utils.borders.radii.r16,
+                        borderTopRightRadius: utils.borders.radii.r16,
                         ...utils.boxShadows.small,
                     },
                 },
                 {
                     condition: isLast,
                     style: {
-                        borderBottomLeftRadius: utils.borders.radii.medium,
-                        borderBottomRightRadius: utils.borders.radii.medium,
+                        borderBottomLeftRadius: utils.borders.radii.r16,
+                        borderBottomRightRadius: utils.borders.radii.r16,
                         marginBottom: utils.spacings.sp32,
                         ...utils.boxShadows.small,
                     },

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

@@ -29,7 +29,7 @@ const alertSheetContainerStyle = prepareNativeStyle(utils => ({
     paddingVertical: utils.spacings.sp32,
     marginBottom: utils.spacings.sp32,
     marginHorizontal: utils.spacings.sp8,
-    borderRadius: utils.borders.radii.medium,
+    borderRadius: utils.borders.radii.r16,
     ...utils.boxShadows.small,
 }));
 

suite-native/atoms/src/AlertBox.tsx

@@ -94,7 +94,7 @@ const AlertSpinner = ({ color }: { color: Color }) => {
 export const AlertBox = ({
     title,
     variant = 'info',
-    borderRadius = nativeBorders.radii.medium,
+    borderRadius = nativeBorders.radii.r16,
 }: AlertBoxProps) => {
     const { applyStyle } = useNativeStyles();
     const { contentColor, backgroundColor, borderColor } = variantToColorMap[variant];

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

@@ -25,7 +25,7 @@ const cardContainerStyle = prepareNativeStyle<{
     borderColor?: Color;
 }>((utils, { isAlertDisplayed, noPadding, borderColor }) => ({
     backgroundColor: utils.colors.backgroundSurfaceElevation1,
-    borderRadius: utils.borders.radii.medium,
+    borderRadius: utils.borders.radii.r16,
     padding: noPadding ? 0 : utils.spacings.sp16,
     ...utils.boxShadows.small,
 
@@ -49,8 +49,8 @@ const cardContainerStyle = prepareNativeStyle<{
 
 const alertBoxWrapperStyle = prepareNativeStyle(utils => ({
     backgroundColor: utils.colors.backgroundSurfaceElevation1,
-    borderTopLeftRadius: utils.borders.radii.medium,
-    borderTopRightRadius: utils.borders.radii.medium,
+    borderTopLeftRadius: utils.borders.radii.r16,
+    borderTopRightRadius: utils.borders.radii.r16,
     paddingHorizontal: utils.spacings.sp4,
     paddingTop: utils.spacings.sp4,
 }));

suite-native/atoms/src/CheckBox.tsx

@@ -26,7 +26,7 @@ const checkBoxStyle = prepareNativeStyle<CheckBoxStyleProps>(
         width: CHECKBOX_SIZE,
         alignItems: 'center',
         justifyContent: 'center',
-        borderRadius: 4,
+        borderRadius: utils.borders.radii.r4,
         borderWidth: utils.borders.widths.medium,
         borderColor: utils.colors.borderElevation2,
         backgroundColor: isDisabled

suite-native/atoms/src/ErrorMessage.tsx

@@ -18,7 +18,7 @@ const errorMessageStyle = prepareNativeStyle(utils => ({
     margin: utils.spacings.sp8,
     borderColor: utils.colors.borderAlertRed,
     borderWidth: 1,
-    borderRadius: utils.borders.radii.medium,
+    borderRadius: utils.borders.radii.r16,
     padding: utils.spacings.sp24,
 }));
 

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

@@ -87,7 +87,7 @@ const inputWrapperStyle = prepareNativeStyle<InputWrapperStyleProps>(
             ? utils.colors.backgroundNeutralSubtleOnElevation1
             : utils.colors.borderInputDefault,
         borderWidth: utils.borders.widths.small,
-        borderRadius: 1.5 * utils.borders.radii.small,
+        borderRadius: utils.borders.radii.r12,
         margin: utils.borders.widths.small,
         paddingHorizontal: INPUT_WRAPPER_PADDING_HORIZONTAL,
         justifyContent: 'flex-end',

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

@@ -34,7 +34,7 @@ const inputWrapperStyle = prepareNativeStyle<InputStyleProps>(
         alignItems: 'center',
         height: 48,
         borderWidth: utils.borders.widths.small,
-        borderRadius: utils.borders.radii.small,
+        borderRadius: utils.borders.radii.r8,
         borderColor: utils.colors.backgroundNeutralSubtleOnElevation0,
         backgroundColor: utils.colors.backgroundNeutralSubtleOnElevation0,
         paddingLeft: 14,

suite-native/atoms/src/OrderedListIcon.tsx

@@ -14,7 +14,7 @@ const iconBackgroundStyle = prepareNativeStyle<{ color: Color; borderColor: Colo
         justifyContent: 'center',
         width: utils.spacings.sp32,
         height: utils.spacings.sp32,
-        borderRadius: 12,
+        borderRadius: utils.borders.radii.r12,
         extend: [
             {
                 condition: G.isNotNullable(color),

suite-native/atoms/src/Select/SelectTrigger.tsx

@@ -22,7 +22,7 @@ const selectStyle = prepareNativeStyle(utils => ({
     alignItems: 'center',
     backgroundColor: utils.colors.backgroundNeutralSubtleOnElevation1,
     borderWidth: utils.borders.widths.small,
-    borderRadius: utils.borders.radii.small,
+    borderRadius: utils.borders.radii.r8,
     borderColor: utils.colors.backgroundNeutralSubtleOnElevation1,
     color: utils.colors.textSubdued,
     paddingLeft: utils.spacings.sp12,

suite-native/atoms/src/SelectableItem.tsx

@@ -12,7 +12,7 @@ import { Radio } from './Radio';
 
 const cardStyle = prepareNativeStyle((utils, { isSelected }: { isSelected: boolean }) => ({
     backgroundColor: utils.colors.backgroundSurfaceElevation1,
-    borderRadius: utils.borders.radii.medium,
+    borderRadius: utils.borders.radii.r16,
     padding: utils.spacings.sp16,
     ...utils.boxShadows.small,
     extend: [

suite-native/atoms/src/Sheet/BottomSheet.tsx

@@ -29,8 +29,8 @@ const DEFAULT_INSET_BOTTOM = 50;
 
 const sheetWrapperStyle = prepareNativeStyle<WrapperStyleProps>((utils, { insetBottom }) => ({
     backgroundColor: utils.colors.backgroundSurfaceElevation0,
-    borderTopLeftRadius: utils.borders.radii.large,
-    borderTopRightRadius: utils.borders.radii.large,
+    borderTopLeftRadius: utils.borders.radii.r24,
+    borderTopRightRadius: utils.borders.radii.r24,
     paddingBottom: Math.max(insetBottom, utils.spacings.sp16),
     maxHeight: '90%',
 }));

suite-native/atoms/src/Skeleton/BoxSkeleton.tsx

@@ -48,7 +48,7 @@ export const BoxSkeleton = ({
     height,
     width,
     elevation = '1',
-    borderRadius = nativeBorders.radii.small,
+    borderRadius = nativeBorders.radii.r8,
 }: BoxSkeletonProps) => {
     const {
         utils: { colors },

suite-native/atoms/src/Skeleton/ListItemSkeleton.tsx

@@ -36,12 +36,12 @@ export const ListItemSkeleton = () => {
                 <BoxSkeleton
                     width={TOP_SUB_ITEM_WIDTH}
                     height={SUBITEM_HEIGHT}
-                    borderRadius={borders.radii.extraSmall}
+                    borderRadius={borders.radii.r4}
                 />
                 <BoxSkeleton
                     width={BOTTOM_SUB_ITEM_WIDTH}
                     height={SUBITEM_HEIGHT}
-                    borderRadius={borders.radii.extraSmall}
+                    borderRadius={borders.radii.r4}
                 />
             </VStack>
         </Box>

suite-native/atoms/src/StepsProgressBar.tsx

@@ -15,7 +15,7 @@ const progressBarWrapperStyle = prepareNativeStyle(utils => ({
     paddingVertical: utils.spacings.sp8,
     paddingHorizontal: utils.spacings.sp8,
     gap: utils.spacings.sp4,
-    borderRadius: 10,
+    borderRadius: utils.borders.radii.round,
     borderWidth: utils.borders.widths.small,
     alignItems: 'center',
     height: 20,
@@ -26,7 +26,7 @@ const progressBarWrapperStyle = prepareNativeStyle(utils => ({
 const progressBarItemStyle = prepareNativeStyle<{ isActive: boolean }>((utils, { isActive }) => ({
     width: isActive ? 8 : 4,
     height: 4,
-    borderRadius: utils.borders.radii.small / 4,
+    borderRadius: utils.borders.radii.round,
     backgroundColor: isActive
         ? utils.colors.backgroundSecondaryDefault
         : utils.colors.backgroundNeutralSubdued,

suite-native/device-manager/src/components/DeviceAction.tsx

@@ -20,7 +20,7 @@ const contentStyle = prepareNativeStyle(utils => ({
     gap: utils.spacings.sp8,
     backgroundColor: utils.colors.backgroundSurfaceElevation1,
     borderWidth: utils.borders.widths.small,
-    borderRadius: 12,
+    borderRadius: utils.borders.radii.r12,
     borderColor: utils.colors.borderElevation1,
 }));
 

suite-native/device-manager/src/components/DeviceManagerModal.tsx

@@ -7,6 +7,7 @@ import { useSelector } from 'react-redux';
 import { ScreenHeaderWrapper, Box, HStack } from '@suite-native/atoms';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 import { selectDeviceState } from '@suite-common/wallet-core';
+import { nativeBorders } from '@trezor/theme';
 
 import { useDeviceManager } from '../hooks/useDeviceManager';
 import { DeviceItemContent } from './DeviceItem/DeviceItemContent';
@@ -17,7 +18,7 @@ type DeviceManagerModalProps = {
     onClose?: () => void;
 };
 
-export const MANAGER_MODAL_BOTTOM_RADIUS = 12;
+export const MANAGER_MODAL_BOTTOM_RADIUS = nativeBorders.radii.r12;
 
 const modalBackgroundOverlayStyle = prepareNativeStyle(utils => ({
     flex: 1,

suite-native/device-manager/src/components/WalletItem.tsx

@@ -24,7 +24,7 @@ const walletItemStyle = prepareNativeStyle<WalletItemStyleProps>(
         alignItems: 'center',
         height: 60,
         gap: utils.spacings.sp12,
-        borderRadius: 12,
+        borderRadius: utils.borders.radii.r12,
         borderColor: utils.colors.borderElevation1,
         flex: 1,
         extend: [

suite-native/graph/src/components/GraphError.tsx

@@ -11,10 +11,10 @@ type GraphErrorProps = {
     onTryAgain: () => void;
 };
 
-const errorIconStyle = prepareNativeStyle(({ colors }) => ({
+const errorIconStyle = prepareNativeStyle(({ borders, colors }) => ({
     width: 48,
     height: 48,
-    borderRadius: 24,
+    borderRadius: borders.radii.r24,
     backgroundColor: colors.backgroundAlertYellowSubtleOnElevation1,
     borderColor: colors.backgroundAlertYellowSubtleOnElevation0,
     borderWidth: 3,

suite-native/module-accounts-import/src/components/AccountImportOverviewCard.tsx

@@ -15,7 +15,7 @@ import { NetworkSymbol } from '@suite-common/wallet-config';
 
 const assetCardStyle = prepareNativeStyle(utils => ({
     padding: utils.spacings.sp24,
-    borderRadius: utils.borders.radii.large,
+    borderRadius: utils.borders.radii.r24,
     width: '100%',
 }));
 

suite-native/module-accounts-management/src/components/CoinPriceCard.tsx

@@ -23,7 +23,7 @@ const cardStyle = prepareNativeStyle(utils => ({
     alignItem: 'center',
     padding: utils.spacings.sp16,
     backgroundColor: utils.colors.backgroundSurfaceElevation1,
-    borderRadius: utils.borders.radii.medium,
+    borderRadius: utils.borders.radii.r16,
 }));
 
 const cardContentStyle = prepareNativeStyle(_ => ({

suite-native/module-authorize-device/src/components/passphrase/PassphraseForm.tsx

@@ -44,7 +44,7 @@ type PassphraseFormProps = {
 
 const formStyle = prepareNativeStyle(utils => ({
     backgroundColor: utils.colors.backgroundSurfaceElevation1,
-    borderRadius: utils.borders.radii.large,
+    borderRadius: utils.borders.radii.r24,
     gap: utils.spacings.sp16,
 }));
 

suite-native/module-authorize-device/src/screens/passphrase/PassphraseFormScreen.tsx

@@ -15,7 +15,7 @@ const ANIMATION_DURATION = 300;
 
 const cardStyle = prepareNativeStyle(utils => ({
     backgroundColor: utils.colors.backgroundAlertBlueSubtleOnElevation1,
-    borderRadius: utils.borders.radii.medium,
+    borderRadius: utils.borders.radii.r16,
     borderColor: utils.colors.backgroundAlertBlueSubtleOnElevationNegative,
     borderWidth: utils.borders.widths.small,
     padding: utils.spacings.sp16,

suite-native/module-dev-utils/src/screens/DemoScreen.tsx

@@ -35,7 +35,7 @@ import { isDevelopOrDebugEnv } from '@suite-native/config';
 import { TypographyStyle } from '@trezor/theme';
 
 const inputStackStyle = prepareNativeStyle(utils => ({
-    borderRadius: utils.borders.radii.medium,
+    borderRadius: utils.borders.radii.r16,
     padding: utils.spacings.sp8,
 }));
 

suite-native/module-home/src/screens/HomeScreen/components/BiometricsBottomSheet.tsx

@@ -23,7 +23,7 @@ const SHOW_TIMEOUT = 1500;
 const cardStyle = prepareNativeStyle(utils => ({
     alignItems: 'center',
     textAlign: 'center',
-    borderRadius: utils.borders.radii.medium,
+    borderRadius: utils.borders.radii.r16,
     backgroundColor: utils.colors.backgroundSurfaceElevation1,
     padding: utils.spacings.sp24,
     marginBottom: utils.spacings.sp24,

suite-native/module-send/src/components/FeeOption.tsx

@@ -37,7 +37,7 @@ const feeLabelsMap = {
 
 const wrapperStyle = prepareNativeStyle(utils => ({
     overflow: 'hidden',
-    borderRadius: utils.borders.radii.medium,
+    borderRadius: utils.borders.radii.r16,
     borderWidth: utils.borders.widths.large,
     backgroundColor: utils.colors.backgroundSurfaceElevation1,
     borderColor: utils.colors.backgroundSurfaceElevation0,

suite-native/module-send/src/components/ReviewOutputCard.tsx

@@ -18,7 +18,7 @@ const cardStyle = prepareNativeStyle<{ isConfirmed: boolean }>((utils, { isConfi
     marginHorizontal: utils.spacings.sp8,
     paddingHorizontal: utils.spacings.sp16,
     paddingVertical: utils.spacings.sp12,
-    borderRadius: 12,
+    borderRadius: utils.borders.radii.r12,
     extend: {
         condition: isConfirmed,
         style: {

suite-native/module-settings/src/components/ColorSchemePickerItem.tsx

@@ -12,7 +12,7 @@ type ColorSchemePickerItemProps = {
 const pickerItemWrapperStyle = prepareNativeStyle<{ isColorSchemeActive: boolean }>(
     (utils, { isColorSchemeActive }) => ({
         backgroundColor: utils.colors.backgroundSurfaceElevationNegative,
-        borderRadius: utils.borders.radii.medium,
+        borderRadius: utils.borders.radii.r16,
         minHeight: 114,
         flex: 1,
         paddingTop: 33,

suite-native/qr-code/src/components/QRCodeScanner.tsx

@@ -19,7 +19,7 @@ type QRCodeScannerProps = {
 const SCANNER_SIZE = Dimensions.get('screen').width - 2 * nativeSpacings.sp16;
 
 const cameraContainerStyle = prepareNativeStyle(utils => ({
-    borderRadius: utils.borders.radii.medium,
+    borderRadius: utils.borders.radii.r16,
     overflow: 'hidden',
 }));
 

suite-native/receive/src/components/DevicePaginationButton.tsx

@@ -29,18 +29,18 @@ type DeviceButtonStyleProps = {
 const safe3Styles = {
     backgroundColor: DEVICE_SCREEN_BACKGROUND_COLOR,
     borderColor: DEVICE_TEXT_COLOR,
-    borderRadius: nativeBorders.radii.large / 2,
+    borderRadius: nativeBorders.radii.r12,
     borderWidth: nativeBorders.widths.large,
 } as const;
 
 const modelToStyles = {
     [DeviceModelInternal.T2T1]: {
         backgroundColor: T2B1_BUTTON_COLOR,
-        borderRadius: nativeBorders.radii.small,
+        borderRadius: nativeBorders.radii.r8,
     },
     [DeviceModelInternal.T3T1]: {
         backgroundColor: T2B1_BUTTON_COLOR,
-        borderRadius: nativeBorders.radii.small,
+        borderRadius: nativeBorders.radii.r8,
     },
     [DeviceModelInternal.T2B1]: safe3Styles,
     [DeviceModelInternal.T3B1]: safe3Styles,

suite-native/receive/src/components/UnverifiedAddressDevice.tsx

@@ -34,7 +34,7 @@ const deviceFrameStyle = prepareNativeStyle(utils => ({
     width: DEVICE_SCREEN_WIDTH,
     padding: utils.spacings.sp4,
     borderWidth: utils.borders.widths.small,
-    borderRadius: utils.borders.radii.large / 2,
+    borderRadius: utils.borders.radii.r12,
     borderColor: utils.colors.borderElevation2,
 }));
 
@@ -46,7 +46,7 @@ const deviceScreenStyle = prepareNativeStyle<{ isPaginationEnabled: boolean }>(
         paddingVertical: isPaginationEnabled ? utils.spacings.sp24 : 40,
         maxWidth: DEVICE_SCREEN_WIDTH,
         backgroundColor: DEVICE_SCREEN_BACKGROUND_COLOR,
-        borderRadius: utils.borders.radii.large / 2,
+        borderRadius: utils.borders.radii.r12,
     }),
 );
 

suite-native/transactions/src/components/TransactionsEmptyState.tsx

@@ -19,7 +19,7 @@ const cardStyle = prepareNativeStyle(utils => ({
     width: '100%',
     paddingHorizontal: utils.spacings.sp24,
     paddingVertical: utils.spacings.sp32,
-    borderRadius: utils.borders.radii.large,
+    borderRadius: utils.borders.radii.r24,
 }));
 
 const receiveButtonStyle = prepareNativeStyle(() => ({