refactor(radio): use CSS variable instead of Context broadcast size

components/radio/__tests__/__snapshots__/group.test.tsx.snap

@@ -138,6 +138,7 @@ exports[`Radio Group should render correctly 1`] = `
         .radio-group :global(.radio) {
           margin-top: calc(1rem * 1);
           margin-left: 0;
+          --radio-size: 1rem;
         }
 
         .radio-group :global(.radio:first-of-type) {
@@ -280,6 +281,7 @@ exports[`Radio Group should render correctly 1`] = `
         .radio-group :global(.radio) {
           margin-top: 0;
           margin-left: calc(1rem * 1);
+          --radio-size: 1rem;
         }
 
         .radio-group :global(.radio:first-of-type) {
@@ -306,7 +308,7 @@ exports[`Radio Group should work correctly with different sizes 1`] = `
           width: initial;
           align-items: flex-start;
           position: relative;
-          --radio-size: .75rem;
+          --radio-size: 1rem;
         }
 
         label {
@@ -362,6 +364,7 @@ exports[`Radio Group should work correctly with different sizes 1`] = `
         .radio-group :global(.radio) {
           margin-top: calc(.75rem * 1);
           margin-left: 0;
+          --radio-size: .75rem;
         }
 
         .radio-group :global(.radio:first-of-type) {
@@ -384,7 +387,7 @@ exports[`Radio Group should work correctly with different sizes 1`] = `
           width: initial;
           align-items: flex-start;
           position: relative;
-          --radio-size: .875rem;
+          --radio-size: 1rem;
         }
 
         label {
@@ -440,6 +443,7 @@ exports[`Radio Group should work correctly with different sizes 1`] = `
         .radio-group :global(.radio) {
           margin-top: calc(.875rem * 1);
           margin-left: 0;
+          --radio-size: .875rem;
         }
 
         .radio-group :global(.radio:first-of-type) {
@@ -462,7 +466,7 @@ exports[`Radio Group should work correctly with different sizes 1`] = `
           width: initial;
           align-items: flex-start;
           position: relative;
-          --radio-size: 1.125rem;
+          --radio-size: 1rem;
         }
 
         label {
@@ -518,6 +522,7 @@ exports[`Radio Group should work correctly with different sizes 1`] = `
         .radio-group :global(.radio) {
           margin-top: calc(1.125rem * 1);
           margin-left: 0;
+          --radio-size: 1.125rem;
         }
 
         .radio-group :global(.radio:first-of-type) {

components/radio/radio-context.ts

@@ -1,11 +1,9 @@
 import React from 'react'
-import { NormalSizes } from 'components/utils/prop-types'
 
 export interface RadioConfig {
   updateState: (value: string) => void
   disabledAll: boolean
   value?: string
-  size?: NormalSizes
   inGroup: boolean
 }
 

components/radio/radio-group.tsx

@@ -23,8 +23,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type RadioGroupProps = Props & typeof defaultProps & NativeAttrs
 
-export const getRadioSize = (selfSize: NormalSizes, groupSize?: NormalSizes): string => {
-  const size = groupSize || selfSize
+export const getRadioSize = (size: NormalSizes): string => {
   const sizes: { [key in NormalSizes]: string } = {
     mini: '.75rem',
     small: '.875rem',
@@ -56,10 +55,9 @@ const RadioGroup: React.FC<React.PropsWithChildren<RadioGroupProps>> = ({
       updateState,
       disabledAll: disabled,
       inGroup: true,
-      size,
       value: selfVal,
     }
-  }, [disabled, selfVal, size])
+  }, [disabled, selfVal])
 
   const fontSize = useMemo(() => getRadioSize(size), [size])
   const groupGap = `calc(${fontSize} * 1)`
@@ -83,6 +81,7 @@ const RadioGroup: React.FC<React.PropsWithChildren<RadioGroupProps>> = ({
         .radio-group :global(.radio) {
           margin-top: ${useRow ? 0 : groupGap};
           margin-left: ${useRow ? groupGap : 0};
+          --radio-size: ${fontSize};
         }
 
         .radio-group :global(.radio:first-of-type) {

components/radio/radio.tsx

@@ -48,13 +48,7 @@ const Radio: React.FC<React.PropsWithChildren<RadioProps>> = ({
 }) => {
   const theme = useTheme()
   const [selfChecked, setSelfChecked] = useState<boolean>(!!checked)
-  const {
-    value: groupValue,
-    disabledAll,
-    inGroup,
-    updateState,
-    size: groupSize,
-  } = useRadioContext()
+  const { value: groupValue, disabledAll, inGroup, updateState } = useRadioContext()
   const [withoutDescChildren, DescChildren] = pickChild(children, RadioDescription)
 
   if (inGroup) {
@@ -69,7 +63,7 @@ const Radio: React.FC<React.PropsWithChildren<RadioProps>> = ({
     }, [groupValue, radioValue])
   }
 
-  const fontSize = useMemo(() => getRadioSize(size, groupSize), [size, groupSize])
+  const fontSize = useMemo(() => getRadioSize(size), [size])
   const isDisabled = useMemo(() => disabled || disabledAll, [disabled, disabledAll])
   const changeHandler = (event: React.ChangeEvent) => {
     if (isDisabled) return