refactor(suite-native): Radio DS update

suite-native/atoms/src/Radio.tsx

@@ -1,7 +1,6 @@
 import { type PressableProps, View } from 'react-native';
 
 import { type NativeStyleObject, prepareNativeStyle, useNativeStyles } from '@trezor/styles-native';
-import { type Color } from '@trezor/theme';
 
 import { PressableOpacity } from './Pressable';
 import { ACCESSIBILITY_FONTSIZE_MULTIPLIER } from './Text';
@@ -12,46 +11,45 @@ export type RadioProps<TValue> = Omit<PressableProps, 'style' | 'onPress'> & {
     isDisabled?: boolean;
     onPress: (value: TValue) => void;
     style?: NativeStyleObject;
-    activeColor?: Color;
 };
 
 type RadioStyleProps = {
     isChecked: boolean;
     isDisabled: boolean;
-    activeColor: Color;
 };
 
 const RADIO_SIZE = 24 * ACCESSIBILITY_FONTSIZE_MULTIPLIER;
 const RADIO_CHECK_SIZE = 14 * ACCESSIBILITY_FONTSIZE_MULTIPLIER;
 
-const radioStyle = prepareNativeStyle<RadioStyleProps>(
-    (utils, { isChecked, isDisabled, activeColor }) => ({
+const radioStyle = prepareNativeStyle<RadioStyleProps>((utils, { isChecked, isDisabled }) => {
+    const borderColor = (() => {
+        if (isChecked && isDisabled) return utils.colors.legacyBackgroundPrimarySubtleOnElevation0;
+        if (isChecked) return utils.colors.legacyBackgroundPrimaryDefault;
+        if (isDisabled) return utils.colors.borderNeutral;
+
+        return utils.colors.contentSecondary;
+    })();
+
+    return {
         height: RADIO_SIZE,
         width: RADIO_SIZE,
-        backgroundColor: isDisabled
-            ? utils.colors.elementFillBoldDisabled
-            : utils.colors.surfaceFillRaised,
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'center',
         borderRadius: utils.borders.radii.round,
-        borderWidth: isChecked ? utils.borders.widths.large : utils.borders.widths.medium,
-        borderColor: utils.colors.contentSecondary,
-        extend: {
-            condition: isChecked && !isDisabled,
-            style: { borderColor: utils.colors[activeColor] },
-        },
-    }),
-);
+        borderWidth: utils.borders.widths.large,
+        borderColor,
+    };
+});
 
-const radioCheckStyle = prepareNativeStyle<Omit<RadioStyleProps, 'isChecked'>>(
-    (utils, { isDisabled, activeColor }) => ({
+const radioCheckStyle = prepareNativeStyle<Pick<RadioStyleProps, 'isDisabled'>>(
+    (utils, { isDisabled }) => ({
         height: RADIO_CHECK_SIZE,
         width: RADIO_CHECK_SIZE,
         borderRadius: utils.borders.radii.round,
         backgroundColor: isDisabled
-            ? utils.colors.elementFillBoldDisabled
-            : utils.colors[activeColor],
+            ? utils.colors.legacyBackgroundPrimarySubtleOnElevation0
+            : utils.colors.legacyBackgroundPrimaryDefault,
     }),
 );
 
@@ -61,7 +59,6 @@ export const Radio = <TValue extends string | number>({
     style,
     isChecked = false,
     isDisabled = false,
-    activeColor = 'legacyBackgroundPrimaryDefault',
     ...props
 }: RadioProps<TValue>) => {
     const { applyStyle } = useNativeStyles();
@@ -70,10 +67,10 @@ export const Radio = <TValue extends string | number>({
         <PressableOpacity
             disabled={isDisabled}
             onPress={() => onPress(value)}
-            style={[applyStyle(radioStyle, { isChecked, isDisabled, activeColor }), style]}
+            style={[applyStyle(radioStyle, { isChecked, isDisabled }), style]}
             {...props}
         >
-            {isChecked && <View style={applyStyle(radioCheckStyle, { isDisabled, activeColor })} />}
+            {isChecked && <View style={applyStyle(radioCheckStyle, { isDisabled })} />}
         </PressableOpacity>
     );
 };

suite-native/atoms/src/stories/Inputs/Radio.stories.tsx

@@ -29,7 +29,6 @@ export const Radio: RadioStory = {
         value: 1,
         isChecked: true,
         isDisabled: false,
-        activeColor: 'legacyBackgroundPrimaryDefault',
     },
     argTypes: {
         value: {
@@ -41,8 +40,5 @@ export const Radio: RadioStory = {
         isDisabled: {
             control: { type: 'boolean' },
         },
-        activeColor: {
-            control: { type: 'color' },
-        },
     },
 };

suite-native/transaction-management/src/components/fees/FeeOptionList/FeeOption.tsx

@@ -234,11 +234,6 @@ export const FeeOption = ({
                             <Radio
                                 isChecked={isChecked}
                                 value={feeKey}
-                                activeColor={
-                                    areFeeValuesComplete
-                                        ? 'legacyBackgroundPrimaryDefault'
-                                        : 'contentCritical'
-                                }
                                 onPress={handleSelectFeeLevel}
                                 testID={`@transactionManagement/fees-level-radio-${feeKey}`}
                             />