feat(radio-group): add touchable hover mixin

Author: sungik-choi

packages/bezier-react/src/components/Forms/RadioGroup/RadioGroup.styled.ts

@@ -2,8 +2,9 @@
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
 
 /* Internal dependencies */
-import { styled, Typography } from 'Foundation'
+import { styled, css, Typography } from 'Foundation'
 import DisabledOpacity from 'Constants/DisabledOpacity'
+import { touchableHover } from 'Utils/styleUtils'
 import { Text } from 'Components/Text'
 import { FormFieldSize } from 'Components/Forms'
 import { focusedInputWrapperStyle } from 'Components/Forms/Inputs/mixins'
@@ -68,15 +69,15 @@ export const RadioGroupPrimitiveItem = styled(RadioGroupPrimitive.Item)<RadioPro
     }
   }
 
-  &:hover {
+  ${touchableHover(css`
     &:not([data-disabled])[data-state='checked']::before {
       background-color: var(--bgtxt-green-dark);
     }
 
     &:not([data-disabled]):not([data-state='checked'])::after {
       background-color: var(--bg-black-dark);
     }
-  }
+  `)}
 
   &:focus-visible {
     &::before {

packages/bezier-react/src/utils/styleUtils.ts

@@ -99,3 +99,19 @@ export function gap(spacing: number): InjectedInterpolation {
     }
   `
 }
+
+export function touchableHover(interpolation: InjectedInterpolation): InjectedInterpolation {
+  return css`
+    @media (hover: hover) {
+      &:hover {
+        ${interpolation}
+      }
+    }
+
+    @media (hover: none) {
+      &:active {
+        ${interpolation}
+      }
+    }
+  `
+}