diff --git a/suite-native/atoms/src/Radio.tsx b/suite-native/atoms/src/Radio.tsx index 73a0b74ced3c..83f8e5812762 100644 --- a/suite-native/atoms/src/Radio.tsx +++ b/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 = Omit & { 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( - (utils, { isChecked, isDisabled, activeColor }) => ({ +const radioStyle = prepareNativeStyle((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>( - (utils, { isDisabled, activeColor }) => ({ +const radioCheckStyle = prepareNativeStyle>( + (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 = ({ style, isChecked = false, isDisabled = false, - activeColor = 'legacyBackgroundPrimaryDefault', ...props }: RadioProps) => { const { applyStyle } = useNativeStyles(); @@ -70,10 +67,10 @@ export const Radio = ({ onPress(value)} - style={[applyStyle(radioStyle, { isChecked, isDisabled, activeColor }), style]} + style={[applyStyle(radioStyle, { isChecked, isDisabled }), style]} {...props} > - {isChecked && } + {isChecked && } ); }; diff --git a/suite-native/atoms/src/stories/Inputs/Radio.stories.tsx b/suite-native/atoms/src/stories/Inputs/Radio.stories.tsx index 86e2aba03f51..5fb05ed95a10 100644 --- a/suite-native/atoms/src/stories/Inputs/Radio.stories.tsx +++ b/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' }, - }, }, }; diff --git a/suite-native/transaction-management/src/components/fees/FeeOptionList/FeeOption.tsx b/suite-native/transaction-management/src/components/fees/FeeOptionList/FeeOption.tsx index 6c567ddd9b60..3645632414ab 100644 --- a/suite-native/transaction-management/src/components/fees/FeeOptionList/FeeOption.tsx +++ b/suite-native/transaction-management/src/components/fees/FeeOptionList/FeeOption.tsx @@ -234,11 +234,6 @@ export const FeeOption = ({