diff --git a/components/src/atoms/buttons/RadioButton.tsx b/components/src/atoms/buttons/RadioButton.tsx index e2a32c72b4d6..9032de7ea8d5 100644 --- a/components/src/atoms/buttons/RadioButton.tsx +++ b/components/src/atoms/buttons/RadioButton.tsx @@ -13,7 +13,6 @@ import { RESPONSIVENESS, SPACING, StyledText, - TYPOGRAPHY, } from '../..' import type { IconName } from '../..' import type { StyleProps } from '../../primitives' @@ -83,7 +82,15 @@ export function RadioButton(props: RadioButtonProps): JSX.Element { const DISABLED_BUTTON_STYLE = css` background-color: ${COLORS.grey35}; color: ${COLORS.grey50}; - cursor: ${CURSOR_NOT_ALLOWED}; + + &:hover, + &:active { + background-color: ${COLORS.grey35}; + } + + @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { + cursor: ${CURSOR_NOT_ALLOWED}; + } ` const SettingButtonLabel = styled.label` @@ -113,6 +120,14 @@ export function RadioButton(props: RadioButtonProps): JSX.Element { } ` + const SubButtonLabelStyle = css` + color: ${disabled + ? COLORS.grey50 + : isSelected + ? COLORS.white + : COLORS.grey60}; + ` + return ( {buttonLabel} @@ -164,8 +181,9 @@ export function RadioButton(props: RadioButtonProps): JSX.Element { {subButtonLabel != null ? ( {subButtonLabel}