feat: migrate less to token for Radio (#42050)

* feat: migrate Radio less variables

* feat: token rename

---------

Co-authored-by: MadCcc <1075746765@qq.com>

components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -106,6 +106,323 @@ exports[`renders components/radio/demo/basic.tsx extend context correctly 1`] =
 </label>
 `;
 
+exports[`renders components/radio/demo/component-token.tsx extend context correctly 1`] = `
+<div
+  class="ant-space ant-space-vertical"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom: 8px;"
+  >
+    <label
+      class="ant-radio-wrapper ant-radio-wrapper-checked"
+    >
+      <span
+        class="ant-radio ant-radio-checked"
+      >
+        <input
+          checked=""
+          class="ant-radio-input"
+          type="radio"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        Test
+      </span>
+    </label>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom: 8px;"
+  >
+    <label
+      class="ant-radio-wrapper ant-radio-wrapper-checked ant-radio-wrapper-disabled"
+    >
+      <span
+        class="ant-radio ant-radio-checked ant-radio-disabled"
+      >
+        <input
+          checked=""
+          class="ant-radio-input"
+          disabled=""
+          type="radio"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        Disabled
+      </span>
+    </label>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom: 8px;"
+  >
+    <div
+      class="ant-radio-group ant-radio-group-outline"
+    >
+      <label
+        class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+      >
+        <span
+          class="ant-radio-button ant-radio-button-checked"
+        >
+          <input
+            checked=""
+            class="ant-radio-button-input"
+            type="radio"
+            value="a"
+          />
+          <span
+            class="ant-radio-button-inner"
+          />
+        </span>
+        <span>
+          Hangzhou
+        </span>
+      </label>
+      <label
+        class="ant-radio-button-wrapper"
+      >
+        <span
+          class="ant-radio-button"
+        >
+          <input
+            class="ant-radio-button-input"
+            type="radio"
+            value="b"
+          />
+          <span
+            class="ant-radio-button-inner"
+          />
+        </span>
+        <span>
+          Shanghai
+        </span>
+      </label>
+      <label
+        class="ant-radio-button-wrapper"
+      >
+        <span
+          class="ant-radio-button"
+        >
+          <input
+            class="ant-radio-button-input"
+            type="radio"
+            value="c"
+          />
+          <span
+            class="ant-radio-button-inner"
+          />
+        </span>
+        <span>
+          Beijing
+        </span>
+      </label>
+      <label
+        class="ant-radio-button-wrapper"
+      >
+        <span
+          class="ant-radio-button"
+        >
+          <input
+            class="ant-radio-button-input"
+            type="radio"
+            value="d"
+          />
+          <span
+            class="ant-radio-button-inner"
+          />
+        </span>
+        <span>
+          Chengdu
+        </span>
+      </label>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom: 8px;"
+  >
+    <div
+      class="ant-radio-group ant-radio-group-outline"
+    >
+      <label
+        class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-disabled"
+      >
+        <span
+          class="ant-radio-button ant-radio-button-checked ant-radio-button-disabled"
+        >
+          <input
+            checked=""
+            class="ant-radio-button-input"
+            disabled=""
+            type="radio"
+            value="a"
+          />
+          <span
+            class="ant-radio-button-inner"
+          />
+        </span>
+        <span>
+          Hangzhou
+        </span>
+      </label>
+      <label
+        class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"
+      >
+        <span
+          class="ant-radio-button ant-radio-button-disabled"
+        >
+          <input
+            class="ant-radio-button-input"
+            disabled=""
+            type="radio"
+            value="b"
+          />
+          <span
+            class="ant-radio-button-inner"
+          />
+        </span>
+        <span>
+          Shanghai
+        </span>
+      </label>
+      <label
+        class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"
+      >
+        <span
+          class="ant-radio-button ant-radio-button-disabled"
+        >
+          <input
+            class="ant-radio-button-input"
+            disabled=""
+            type="radio"
+            value="c"
+          />
+          <span
+            class="ant-radio-button-inner"
+          />
+        </span>
+        <span>
+          Beijing
+        </span>
+      </label>
+      <label
+        class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"
+      >
+        <span
+          class="ant-radio-button ant-radio-button-disabled"
+        >
+          <input
+            class="ant-radio-button-input"
+            disabled=""
+            type="radio"
+            value="d"
+          />
+          <span
+            class="ant-radio-button-inner"
+          />
+        </span>
+        <span>
+          Chengdu
+        </span>
+      </label>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-radio-group ant-radio-group-solid"
+    >
+      <label
+        class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+      >
+        <span
+          class="ant-radio-button ant-radio-button-checked"
+        >
+          <input
+            checked=""
+            class="ant-radio-button-input"
+            type="radio"
+            value="a"
+          />
+          <span
+            class="ant-radio-button-inner"
+          />
+        </span>
+        <span>
+          Hangzhou
+        </span>
+      </label>
+      <label
+        class="ant-radio-button-wrapper"
+      >
+        <span
+          class="ant-radio-button"
+        >
+          <input
+            class="ant-radio-button-input"
+            type="radio"
+            value="b"
+          />
+          <span
+            class="ant-radio-button-inner"
+          />
+        </span>
+        <span>
+          Shanghai
+        </span>
+      </label>
+      <label
+        class="ant-radio-button-wrapper"
+      >
+        <span
+          class="ant-radio-button"
+        >
+          <input
+            class="ant-radio-button-input"
+            type="radio"
+            value="c"
+          />
+          <span
+            class="ant-radio-button-inner"
+          />
+        </span>
+        <span>
+          Beijing
+        </span>
+      </label>
+      <label
+        class="ant-radio-button-wrapper"
+      >
+        <span
+          class="ant-radio-button"
+        >
+          <input
+            class="ant-radio-button-input"
+            type="radio"
+            value="d"
+          />
+          <span
+            class="ant-radio-button-inner"
+          />
+        </span>
+        <span>
+          Chengdu
+        </span>
+      </label>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/radio/demo/disabled.tsx extend context correctly 1`] = `
 Array [
   <label

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

@@ -106,6 +106,323 @@ exports[`renders components/radio/demo/basic.tsx correctly 1`] = `
 </label>
 `;
 
+exports[`renders components/radio/demo/component-token.tsx correctly 1`] = `
+<div
+  class="ant-space ant-space-vertical"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <label
+      class="ant-radio-wrapper ant-radio-wrapper-checked"
+    >
+      <span
+        class="ant-radio ant-radio-checked"
+      >
+        <input
+          checked=""
+          class="ant-radio-input"
+          type="radio"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        Test
+      </span>
+    </label>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <label
+      class="ant-radio-wrapper ant-radio-wrapper-checked ant-radio-wrapper-disabled"
+    >
+      <span
+        class="ant-radio ant-radio-checked ant-radio-disabled"
+      >
+        <input
+          checked=""
+          class="ant-radio-input"
+          disabled=""
+          type="radio"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        Disabled
+      </span>
+    </label>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <div
+      class="ant-radio-group ant-radio-group-outline"
+    >
+      <label
+        class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+      >
+        <span
+          class="ant-radio-button ant-radio-button-checked"
+        >
+          <input
+            checked=""
+            class="ant-radio-button-input"
+            type="radio"
+            value="a"
+          />
+          <span
+            class="ant-radio-button-inner"
+          />
+        </span>
+        <span>
+          Hangzhou
+        </span>
+      </label>
+      <label
+        class="ant-radio-button-wrapper"
+      >
+        <span
+          class="ant-radio-button"
+        >
+          <input
+            class="ant-radio-button-input"
+            type="radio"
+            value="b"
+          />
+          <span
+            class="ant-radio-button-inner"
+          />
+        </span>
+        <span>
+          Shanghai
+        </span>
+      </label>
+      <label
+        class="ant-radio-button-wrapper"
+      >
+        <span
+          class="ant-radio-button"
+        >
+          <input
+            class="ant-radio-button-input"
+            type="radio"
+            value="c"
+          />
+          <span
+            class="ant-radio-button-inner"
+          />
+        </span>
+        <span>
+          Beijing
+        </span>
+      </label>
+      <label
+        class="ant-radio-button-wrapper"
+      >
+        <span
+          class="ant-radio-button"
+        >
+          <input
+            class="ant-radio-button-input"
+            type="radio"
+            value="d"
+          />
+          <span
+            class="ant-radio-button-inner"
+          />
+        </span>
+        <span>
+          Chengdu
+        </span>
+      </label>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <div
+      class="ant-radio-group ant-radio-group-outline"
+    >
+      <label
+        class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-disabled"
+      >
+        <span
+          class="ant-radio-button ant-radio-button-checked ant-radio-button-disabled"
+        >
+          <input
+            checked=""
+            class="ant-radio-button-input"
+            disabled=""
+            type="radio"
+            value="a"
+          />
+          <span
+            class="ant-radio-button-inner"
+          />
+        </span>
+        <span>
+          Hangzhou
+        </span>
+      </label>
+      <label
+        class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"
+      >
+        <span
+          class="ant-radio-button ant-radio-button-disabled"
+        >
+          <input
+            class="ant-radio-button-input"
+            disabled=""
+            type="radio"
+            value="b"
+          />
+          <span
+            class="ant-radio-button-inner"
+          />
+        </span>
+        <span>
+          Shanghai
+        </span>
+      </label>
+      <label
+        class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"
+      >
+        <span
+          class="ant-radio-button ant-radio-button-disabled"
+        >
+          <input
+            class="ant-radio-button-input"
+            disabled=""
+            type="radio"
+            value="c"
+          />
+          <span
+            class="ant-radio-button-inner"
+          />
+        </span>
+        <span>
+          Beijing
+        </span>
+      </label>
+      <label
+        class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"
+      >
+        <span
+          class="ant-radio-button ant-radio-button-disabled"
+        >
+          <input
+            class="ant-radio-button-input"
+            disabled=""
+            type="radio"
+            value="d"
+          />
+          <span
+            class="ant-radio-button-inner"
+          />
+        </span>
+        <span>
+          Chengdu
+        </span>
+      </label>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-radio-group ant-radio-group-solid"
+    >
+      <label
+        class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+      >
+        <span
+          class="ant-radio-button ant-radio-button-checked"
+        >
+          <input
+            checked=""
+            class="ant-radio-button-input"
+            type="radio"
+            value="a"
+          />
+          <span
+            class="ant-radio-button-inner"
+          />
+        </span>
+        <span>
+          Hangzhou
+        </span>
+      </label>
+      <label
+        class="ant-radio-button-wrapper"
+      >
+        <span
+          class="ant-radio-button"
+        >
+          <input
+            class="ant-radio-button-input"
+            type="radio"
+            value="b"
+          />
+          <span
+            class="ant-radio-button-inner"
+          />
+        </span>
+        <span>
+          Shanghai
+        </span>
+      </label>
+      <label
+        class="ant-radio-button-wrapper"
+      >
+        <span
+          class="ant-radio-button"
+        >
+          <input
+            class="ant-radio-button-input"
+            type="radio"
+            value="c"
+          />
+          <span
+            class="ant-radio-button-inner"
+          />
+        </span>
+        <span>
+          Beijing
+        </span>
+      </label>
+      <label
+        class="ant-radio-button-wrapper"
+      >
+        <span
+          class="ant-radio-button"
+        >
+          <input
+            class="ant-radio-button-input"
+            type="radio"
+            value="d"
+          />
+          <span
+            class="ant-radio-button-inner"
+          />
+        </span>
+        <span>
+          Chengdu
+        </span>
+      </label>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/radio/demo/disabled.tsx correctly 1`] = `
 Array [
   <label

components/radio/demo/component-token.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+组件 token debug
+
+## en-US
+
+Component Token debug.

components/radio/demo/component-token.tsx

@@ -0,0 +1,51 @@
+import { ConfigProvider, Radio, Space } from 'antd';
+import React from 'react';
+
+const App: React.FC = () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Radio: {
+          radioSize: 20,
+          dotSize: 10,
+          dotColorDisabled: 'grey',
+          buttonBg: '#f6ffed',
+          buttonCheckedBg: '#d9f7be',
+          buttonColor: '#faad14',
+          buttonPaddingInline: 20,
+          buttonCheckedBgDisabled: '#fffbe6',
+          buttonCheckedColorDisabled: '#ffe58f',
+          buttonSolidCheckedColor: '#ffa39e',
+          wrapperMarginInlineEnd: 20,
+        },
+      },
+    }}
+  >
+    <Space direction="vertical">
+      <Radio checked>Test</Radio>
+      <Radio checked disabled>
+        Disabled
+      </Radio>
+      <Radio.Group defaultValue="a">
+        <Radio.Button value="a">Hangzhou</Radio.Button>
+        <Radio.Button value="b">Shanghai</Radio.Button>
+        <Radio.Button value="c">Beijing</Radio.Button>
+        <Radio.Button value="d">Chengdu</Radio.Button>
+      </Radio.Group>
+      <Radio.Group defaultValue="a" disabled>
+        <Radio.Button value="a">Hangzhou</Radio.Button>
+        <Radio.Button value="b">Shanghai</Radio.Button>
+        <Radio.Button value="c">Beijing</Radio.Button>
+        <Radio.Button value="d">Chengdu</Radio.Button>
+      </Radio.Group>
+      <Radio.Group defaultValue="a" buttonStyle="solid">
+        <Radio.Button value="a">Hangzhou</Radio.Button>
+        <Radio.Button value="b">Shanghai</Radio.Button>
+        <Radio.Button value="c">Beijing</Radio.Button>
+        <Radio.Button value="d">Chengdu</Radio.Button>
+      </Radio.Group>
+    </Space>
+  </ConfigProvider>
+);
+
+export default App;

components/radio/index.en-US.md

@@ -29,6 +29,7 @@ Radio.
 <code src="./demo/radiobutton-solid.tsx">Solid radio button</code>
 <code src="./demo/badge.tsx" debug>Badge style</code>
 <code src="./demo/wireframe.tsx" debug>Wireframe</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>
 <!-- prettier-ignore-end -->
 
 ## API

components/radio/index.zh-CN.md

@@ -30,6 +30,7 @@ demo:
 <code src="./demo/radiobutton-solid.tsx">填底的按钮样式</code>
 <code src="./demo/badge.tsx" debug>测试 Badge 的样式</code>
 <code src="./demo/wireframe.tsx" debug>线框风格</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>
 <!-- prettier-ignore-end -->
 
 ## API

components/radio/style/index.tsx

@@ -1,32 +1,30 @@
 import { Keyframes } from '@ant-design/cssinjs';
+import { genFocusOutline, resetComponent } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
-import { genFocusOutline, resetComponent } from '../../style';
 
 // ============================== Tokens ==============================
-export interface ComponentToken {}
+export interface ComponentToken {
+  // Radio
+  radioSize: number;
+  dotSize: number;
+  dotColorDisabled: string;
+
+  // Radio buttons
+  buttonBg: string;
+  buttonCheckedBg: string;
+  buttonColor: string;
+  buttonPaddingInline: number;
+  buttonCheckedBgDisabled: string;
+  buttonCheckedColorDisabled: string;
+  buttonSolidCheckedColor: string;
+  wrapperMarginInlineEnd: number;
+}
 
 interface RadioToken extends FullToken<'Radio'> {
+  radioDotDisabledSize: number;
   radioFocusShadow: string;
   radioButtonFocusShadow: string;
-
-  radioSize: number;
-  radioTop: number;
-  radioDotSize: number;
-  radioDotDisabledSize: number;
-  radioCheckedColor: string;
-  radioDotDisabledColor: string;
-  radioSolidCheckedColor: string;
-
-  radioButtonBg: string;
-  radioButtonCheckedBg: string;
-  radioButtonColor: string;
-  radioButtonHoverColor: string;
-  radioButtonActiveColor: string;
-  radioButtonPaddingHorizontal: number;
-  radioDisabledButtonCheckedBg: string;
-  radioDisabledButtonCheckedColor: string;
-  radioWrapperMarginRight: number;
 }
 
 // ============================== Styles ==============================
@@ -66,21 +64,21 @@ const getGroupRadioStyle: GenerateStyle<RadioToken> = (token) => {
 const getRadioBasicStyle: GenerateStyle<RadioToken> = (token) => {
   const {
     componentCls,
-    radioWrapperMarginRight,
-    radioCheckedColor,
+    wrapperMarginInlineEnd,
+    colorPrimary,
     radioSize,
     motionDurationSlow,
     motionDurationMid,
     motionEaseInOut,
     motionEaseInOutCirc,
-    radioButtonBg,
+    colorBgContainer,
     colorBorder,
     lineWidth,
-    radioDotSize,
+    dotSize,
     colorBgContainerDisabled,
     colorTextDisabled,
     paddingXS,
-    radioDotDisabledColor,
+    dotColorDisabled,
     lineType,
     radioDotDisabledSize,
     wireframe,
@@ -95,7 +93,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = (token) => {
       display: 'inline-flex',
       alignItems: 'baseline',
       marginInlineStart: 0,
-      marginInlineEnd: radioWrapperMarginRight,
+      marginInlineEnd: wrapperMarginInlineEnd,
       cursor: 'pointer',
 
       // RTL
@@ -122,7 +120,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = (token) => {
         insetInlineStart: 0,
         width: '100%',
         height: '100%',
-        border: `${lineWidth}px ${lineType} ${radioCheckedColor}`,
+        border: `${lineWidth}px ${lineType} ${colorPrimary}`,
         borderRadius: '50%',
         visibility: 'hidden',
         animationName: antRadioEffect,
@@ -143,7 +141,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = (token) => {
 
       [`${componentCls}-wrapper:hover &,
         &:hover ${radioInnerPrefixCls}`]: {
-        borderColor: radioCheckedColor,
+        borderColor: colorPrimary,
       },
 
       [`${componentCls}-input:focus-visible + ${radioInnerPrefixCls}`]: {
@@ -165,7 +163,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = (token) => {
           height: radioSize,
           marginBlockStart: radioSize / -2,
           marginInlineStart: radioSize / -2,
-          backgroundColor: wireframe ? radioCheckedColor : colorWhite,
+          backgroundColor: wireframe ? colorPrimary : colorWhite,
           borderBlockStart: 0,
           borderInlineStart: 0,
           borderRadius: radioSize,
@@ -182,7 +180,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = (token) => {
         display: 'block',
         width: radioSize,
         height: radioSize,
-        backgroundColor: radioButtonBg,
+        backgroundColor: colorBgContainer,
         borderColor: colorBorder,
         borderStyle: 'solid',
         borderWidth: lineWidth,
@@ -204,11 +202,11 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = (token) => {
       // 选中状态
       [`${componentCls}-checked`]: {
         [radioInnerPrefixCls]: {
-          borderColor: radioCheckedColor,
-          backgroundColor: wireframe ? radioButtonBg : radioCheckedColor,
+          borderColor: colorPrimary,
+          backgroundColor: wireframe ? colorBgContainer : colorPrimary,
 
           '&::after': {
-            transform: `scale(${radioDotSize / radioSize})`,
+            transform: `scale(${dotSize / radioSize})`,
             opacity: 1,
             transition: `all ${motionDurationSlow} ${motionEaseInOutCirc}`,
           },
@@ -224,7 +222,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = (token) => {
           cursor: 'not-allowed',
 
           '&::after': {
-            backgroundColor: radioDotDisabledColor,
+            backgroundColor: dotColorDisabled,
           },
         },
 
@@ -257,7 +255,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = (token) => {
 // Styles from radio-button
 const getRadioButtonStyle: GenerateStyle<RadioToken> = (token) => {
   const {
-    radioButtonColor,
+    buttonColor,
     controlHeight,
     componentCls,
     lineWidth,
@@ -265,9 +263,9 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = (token) => {
     colorBorder,
     motionDurationSlow,
     motionDurationMid,
-    radioButtonPaddingHorizontal,
+    buttonPaddingInline,
     fontSize,
-    radioButtonBg,
+    buttonBg,
     fontSizeLG,
     controlHeightLG,
     controlHeightSM,
@@ -275,15 +273,15 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = (token) => {
     borderRadius,
     borderRadiusSM,
     borderRadiusLG,
-    radioCheckedColor,
-    radioButtonCheckedBg,
-    radioButtonHoverColor,
-    radioButtonActiveColor,
-    radioSolidCheckedColor,
+    buttonCheckedBg,
+    buttonSolidCheckedColor,
     colorTextDisabled,
     colorBgContainerDisabled,
-    radioDisabledButtonCheckedColor,
-    radioDisabledButtonCheckedBg,
+    buttonCheckedBgDisabled,
+    buttonCheckedColorDisabled,
+    colorPrimary,
+    colorPrimaryHover,
+    colorPrimaryActive,
   } = token;
   return {
     [`${componentCls}-button-wrapper`]: {
@@ -291,12 +289,12 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = (token) => {
       display: 'inline-block',
       height: controlHeight,
       margin: 0,
-      paddingInline: radioButtonPaddingHorizontal,
+      paddingInline: buttonPaddingInline,
       paddingBlock: 0,
-      color: radioButtonColor,
+      color: buttonColor,
       fontSize,
       lineHeight: `${controlHeight - lineWidth * 2}px`,
-      background: radioButtonBg,
+      background: buttonBg,
       border: `${lineWidth}px ${lineType} ${colorBorder}`,
       // strange align fix for chrome but works
       // https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
@@ -312,7 +310,7 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = (token) => {
       ].join(','),
 
       a: {
-        color: radioButtonColor,
+        color: buttonColor,
       },
 
       [`> ${componentCls}-button`]: {
@@ -391,7 +389,7 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = (token) => {
 
       '&:hover': {
         position: 'relative',
-        color: radioCheckedColor,
+        color: colorPrimary,
       },
 
       '&:has(:focus-visible)': {
@@ -407,52 +405,52 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = (token) => {
 
       [`&-checked:not(${componentCls}-button-wrapper-disabled)`]: {
         zIndex: 1,
-        color: radioCheckedColor,
-        background: radioButtonCheckedBg,
-        borderColor: radioCheckedColor,
+        color: colorPrimary,
+        background: buttonCheckedBg,
+        borderColor: colorPrimary,
 
         '&::before': {
-          backgroundColor: radioCheckedColor,
+          backgroundColor: colorPrimary,
         },
 
         '&:first-child': {
-          borderColor: radioCheckedColor,
+          borderColor: colorPrimary,
         },
 
         '&:hover': {
-          color: radioButtonHoverColor,
-          borderColor: radioButtonHoverColor,
+          color: colorPrimaryHover,
+          borderColor: colorPrimaryHover,
 
           '&::before': {
-            backgroundColor: radioButtonHoverColor,
+            backgroundColor: colorPrimaryHover,
           },
         },
 
         '&:active': {
-          color: radioButtonActiveColor,
-          borderColor: radioButtonActiveColor,
+          color: colorPrimaryActive,
+          borderColor: colorPrimaryActive,
 
           '&::before': {
-            backgroundColor: radioButtonActiveColor,
+            backgroundColor: colorPrimaryActive,
           },
         },
       },
 
       [`${componentCls}-group-solid &-checked:not(${componentCls}-button-wrapper-disabled)`]: {
-        color: radioSolidCheckedColor,
-        background: radioCheckedColor,
-        borderColor: radioCheckedColor,
+        color: buttonSolidCheckedColor,
+        background: colorPrimary,
+        borderColor: colorPrimary,
 
         '&:hover': {
-          color: radioSolidCheckedColor,
-          background: radioButtonHoverColor,
-          borderColor: radioButtonHoverColor,
+          color: buttonSolidCheckedColor,
+          background: colorPrimaryHover,
+          borderColor: colorPrimaryHover,
         },
 
         '&:active': {
-          color: radioSolidCheckedColor,
-          background: radioButtonActiveColor,
-          borderColor: radioButtonActiveColor,
+          color: buttonSolidCheckedColor,
+          background: colorPrimaryActive,
+          borderColor: colorPrimaryActive,
         },
       },
 
@@ -470,8 +468,8 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = (token) => {
       },
 
       [`&-disabled${componentCls}-button-wrapper-checked`]: {
-        color: radioDisabledButtonCheckedColor,
-        backgroundColor: radioDisabledButtonCheckedBg,
+        color: buttonCheckedColorDisabled,
+        backgroundColor: buttonCheckedBgDisabled,
         borderColor: colorBorder,
         boxShadow: 'none',
       },
@@ -479,67 +477,68 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = (token) => {
   };
 };
 
+const getDotSize = (radioSize: number): number => {
+  const dotPadding = 4; // Fixed Value
+  return radioSize - dotPadding * 2;
+};
+
 // ============================== Export ==============================
-export default genComponentStyleHook('Radio', (token) => {
-  const {
-    padding,
-    lineWidth,
-    controlItemBgActiveDisabled,
-    colorTextDisabled,
-    colorBgContainer,
-    fontSizeLG,
-    controlOutline,
-    colorPrimaryHover,
-    colorPrimaryActive,
-    colorText,
-    colorPrimary,
-    marginXS,
-    controlOutlineWidth,
-    colorTextLightSolid,
-    wireframe,
-  } = token;
+export default genComponentStyleHook(
+  'Radio',
+  (token) => {
+    const { controlOutline, controlOutlineWidth, radioSize } = token;
 
-  // Radio
-  const radioFocusShadow = `0 0 0 ${controlOutlineWidth}px ${controlOutline}`;
-  const radioButtonFocusShadow = radioFocusShadow;
+    const radioFocusShadow = `0 0 0 ${controlOutlineWidth}px ${controlOutline}`;
+    const radioButtonFocusShadow = radioFocusShadow;
+    const radioDotDisabledSize = getDotSize(radioSize);
 
-  const radioSize = fontSizeLG;
-  const dotPadding = 4; // Fixed value
-  const radioDotDisabledSize = radioSize - dotPadding * 2;
-  const radioDotSize = wireframe ? radioDotDisabledSize : radioSize - (dotPadding + lineWidth) * 2;
-  const radioCheckedColor = colorPrimary;
+    const radioToken = mergeToken<RadioToken>(token, {
+      radioDotDisabledSize,
+      radioFocusShadow,
+      radioButtonFocusShadow,
+    });
 
-  // Radio buttons
-  const radioButtonColor = colorText;
-  const radioButtonHoverColor = colorPrimaryHover;
-  const radioButtonActiveColor = colorPrimaryActive;
-  const radioButtonPaddingHorizontal = padding - lineWidth;
-  const radioDisabledButtonCheckedColor = colorTextDisabled;
-  const radioWrapperMarginRight = marginXS;
+    return [
+      getGroupRadioStyle(radioToken),
+      getRadioBasicStyle(radioToken),
+      getRadioButtonStyle(radioToken),
+    ];
+  },
+  (token) => {
+    const {
+      wireframe,
+      padding,
+      marginXS,
+      lineWidth,
+      fontSizeLG,
+      colorText,
+      colorBgContainer,
+      colorTextDisabled,
+      controlItemBgActiveDisabled,
+      colorTextLightSolid,
+    } = token;
 
-  const radioToken = mergeToken<RadioToken>(token, {
-    radioFocusShadow,
-    radioButtonFocusShadow,
-    radioSize,
-    radioDotSize,
-    radioDotDisabledSize,
-    radioCheckedColor,
-    radioDotDisabledColor: colorTextDisabled,
-    radioSolidCheckedColor: colorTextLightSolid,
-    radioButtonBg: colorBgContainer,
-    radioButtonCheckedBg: colorBgContainer,
-    radioButtonColor,
-    radioButtonHoverColor,
-    radioButtonActiveColor,
-    radioButtonPaddingHorizontal,
-    radioDisabledButtonCheckedBg: controlItemBgActiveDisabled,
-    radioDisabledButtonCheckedColor,
-    radioWrapperMarginRight,
-  });
+    const dotPadding = 4; // Fixed value
+    const radioSize = fontSizeLG;
+    const radioDotSize = wireframe
+      ? getDotSize(radioSize)
+      : radioSize - (dotPadding + lineWidth) * 2;
 
-  return [
-    getGroupRadioStyle(radioToken),
-    getRadioBasicStyle(radioToken),
-    getRadioButtonStyle(radioToken),
-  ];
-});
+    return {
+      // Radio
+      radioSize,
+      dotSize: radioDotSize,
+      dotColorDisabled: colorTextDisabled,
+
+      // Radio buttons
+      buttonSolidCheckedColor: colorTextLightSolid,
+      buttonBg: colorBgContainer,
+      buttonCheckedBg: colorBgContainer,
+      buttonColor: colorText,
+      buttonCheckedBgDisabled: controlItemBgActiveDisabled,
+      buttonCheckedColorDisabled: colorTextDisabled,
+      buttonPaddingInline: padding - lineWidth,
+      wrapperMarginInlineEnd: marginXS,
+    };
+  },
+);

docs/react/migrate-less-variables.en-US.md

@@ -293,7 +293,27 @@ This document contains the correspondence between all the less variables related
 
 <!-- ### Progress -->
 
-<!-- ### Radio -->
+### Radio
+
+<!-- prettier-ignore -->
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@radio-size` | `radioSize` | - |
+| `@radio-top` | - | Deprecated |
+| `@radio-border-width` | `lineWidth` | Global Token |
+| `@radio-dot-size` | `dotSize` | - |
+| `@radio-dot-color` | - | Deprecated |
+| `@radio-dot-disabled-color` | `dotColorDisabled` | - |
+| `@radio-solid-checked-color` | `buttonSolidCheckedColor` | - |
+| `@radio-button-bg` | `buttonBg` | - |
+| `@radio-button-checked-bg` | `buttonCheckedBg` | - |
+| `@radio-button-color` | `buttonColor` | - |
+| `@radio-button-hover-color` | `colorPrimaryHover` | Global Token |
+| `@radio-button-active-color` | `colorPrimaryActive` | Global Token |
+| `@radio-button-padding-horizontal` | `buttonPaddingInline` | - |
+| `@radio-disabled-button-checked-bg` | `buttonCheckdBgDisabled` | - |
+| `@radio-disabled-button-checked-color` | `buttonCheckdColorDisabled` | - |
+| `@radio-wrapper-margin-right` | `wrapperMarginInlineEnd` | - |
 
 ## Rate
 

docs/react/migrate-less-variables.zh-CN.md

@@ -291,7 +291,27 @@ Mentions 提及
 
 <!-- ### Progress 进度条 -->
 
-<!-- ### Radio 单选框 -->
+## Radio 单选框
+
+<!-- prettier-ignore -->
+| less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@radio-size` | `radioSize` | - |
+| `@radio-top` | - | 已废弃 |
+| `@radio-border-width` | `lineWidth` | 全局 Token |
+| `@radio-dot-size` | `dotSize` | - |
+| `@radio-dot-color` | - | 已废弃 |
+| `@radio-dot-disabled-color` | `dotColorDisabled` | - |
+| `@radio-solid-checked-color` | `buttonSolidCheckedColor` | - |
+| `@radio-button-bg` | `buttonBg` | - |
+| `@radio-button-checked-bg` | `buttonCheckedBg` | - |
+| `@radio-button-color` | `buttonColor` | - |
+| `@radio-button-hover-color` | `colorPrimaryHover` | 全局 Token |
+| `@radio-button-active-color` | `colorPrimaryActive` | 全局 Token |
+| `@radio-button-padding-horizontal` | `buttonPaddingInline` | - |
+| `@radio-disabled-button-checked-bg` | `buttonCheckdBgDisabled` | - |
+| `@radio-disabled-button-checked-color` | `buttonCheckdColorDisabled` | - |
+| `@radio-wrapper-margin-right` | `wrapperMarginInlineEnd` | - |
 
 ## Rate 评分