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

2026-03-04 22:45:29 +01:00 · 2024-10-03 15:09:03 +02:00
parent befbe2d95b
commit 019e734086
35 changed files with 59 additions and 54 deletions
--- a/packages/theme/src/borders.ts
+++ b/packages/theme/src/borders.ts
@@ -17,6 +17,8 @@ export const borders = {

 export type Borders = typeof borders;

+type NativeRadiusValue = 4 | 8 | 12 | 16 | 20 | 24;
+
 export const nativeBorders = {
    widths: {
        small: 1,
@@ -24,12 +26,14 @@ export const nativeBorders = {
        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;
--- a/suite-native/accounts/src/components/AccountsList/AccountsListItemBase.tsx
+++ b/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,
                    },
--- a/suite-native/alerts/src/components/AlertSheet.tsx
+++ b/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,
 }));

--- a/suite-native/atoms/src/AlertBox.tsx
+++ b/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];
--- a/suite-native/atoms/src/Card/Card.tsx
+++ b/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,
 }));
--- a/suite-native/atoms/src/CheckBox.tsx
+++ b/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
--- a/suite-native/atoms/src/ErrorMessage.tsx
+++ b/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,
 }));

--- a/suite-native/atoms/src/Input/Input.tsx
+++ b/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',
--- a/suite-native/atoms/src/Input/SearchInput.tsx
+++ b/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,
--- a/suite-native/atoms/src/OrderedListIcon.tsx
+++ b/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),
--- a/suite-native/atoms/src/Select/SelectTrigger.tsx
+++ b/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,
--- a/suite-native/atoms/src/SelectableItem.tsx
+++ b/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: [
--- a/suite-native/atoms/src/Sheet/BottomSheet.tsx
+++ b/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%',
 }));
--- a/suite-native/atoms/src/Skeleton/BoxSkeleton.tsx
+++ b/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 },
--- a/suite-native/atoms/src/Skeleton/ListItemSkeleton.tsx
+++ b/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>
--- a/suite-native/atoms/src/StepsProgressBar.tsx
+++ b/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,
--- a/suite-native/device-manager/src/components/DeviceAction.tsx
+++ b/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,
 }));

--- a/suite-native/device-manager/src/components/DeviceManagerModal.tsx
+++ b/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,
--- a/suite-native/device-manager/src/components/WalletItem.tsx
+++ b/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: [
--- a/suite-native/graph/src/components/GraphError.tsx
+++ b/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,
--- a/suite-native/module-accounts-import/src/components/AccountImportOverviewCard.tsx
+++ b/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%',
 }));

--- a/suite-native/module-accounts-management/src/components/CoinPriceCard.tsx
+++ b/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(_ => ({
--- a/suite-native/module-authorize-device/src/components/passphrase/PassphraseForm.tsx
+++ b/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,
 }));

--- a/suite-native/module-authorize-device/src/screens/passphrase/PassphraseFormScreen.tsx
+++ b/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,
--- a/suite-native/module-dev-utils/src/screens/DemoScreen.tsx
+++ b/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,
 }));

--- a/suite-native/module-home/src/screens/HomeScreen/components/BiometricsBottomSheet.tsx
+++ b/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,
--- a/suite-native/module-send/src/components/FeeOption.tsx
+++ b/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,
--- a/suite-native/module-send/src/components/ReviewOutputCard.tsx
+++ b/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: {
--- a/suite-native/module-settings/src/components/ColorSchemePickerItem.tsx
+++ b/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,
--- a/suite-native/qr-code/src/components/QRCodeScanner.tsx
+++ b/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',
 }));

--- a/suite-native/receive/src/components/DevicePaginationButton.tsx
+++ b/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,
--- a/suite-native/receive/src/components/UnverifiedAddressDevice.tsx
+++ b/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,
    }),
 );

--- a/suite-native/transactions/src/components/TransactionsEmptyState.tsx
+++ b/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(() => ({
--- a/suite-native/transactions/src/components/TransactionsList/TransactionListItemContainer.tsx
+++ b/suite-native/transactions/src/components/TransactionsList/TransactionListItemContainer.tsx
@@ -73,8 +73,8 @@ export const transactionListItemContainerStyle = prepareNativeStyle<TransactionL
                condition: isFirst,
                style: {
                    paddingTop: utils.spacings.sp16,
-                    borderTopLeftRadius: utils.borders.radii.large / 2,
-                    borderTopRightRadius: utils.borders.radii.large / 2,
+                    borderTopLeftRadius: utils.borders.radii.r12,
+                    borderTopRightRadius: utils.borders.radii.r12,
                },
            },
            {
@@ -82,8 +82,8 @@ export const transactionListItemContainerStyle = prepareNativeStyle<TransactionL
                style: {
                    paddingBottom: utils.spacings.sp16,
                    marginBottom: utils.spacings.sp8,
-                    borderBottomLeftRadius: utils.borders.radii.large / 2,
-                    borderBottomRightRadius: utils.borders.radii.large / 2,
+                    borderBottomLeftRadius: utils.borders.radii.r12,
+                    borderBottomRightRadius: utils.borders.radii.r12,
                },
            },
        ],
--- a/suite-native/video-assets/src/components/Video.tsx
+++ b/suite-native/video-assets/src/components/Video.tsx
@@ -25,7 +25,7 @@ const videoContainer = prepareNativeStyle((_, { aspectRatio }: VideoStyleProps)
 const videoStyle = prepareNativeStyle((utils, { aspectRatio }: VideoStyleProps) => ({
    flex: 1,
    aspectRatio,
-    borderRadius: utils.borders.radii.large,
+    borderRadius: utils.borders.radii.r24,
 }));

 const activityIndicatorStyle = prepareNativeStyle(_ => ({