feat: Radio add component token (ant-design#44389)

ammar-knowledge · Aug 24, 2023 · 2096c01 · 2096c01
1 parent 4321cf9
commit 2096c01
Showing 1 changed file with 30 additions and 6 deletions.
diff --git a/components/radio/style/index.tsx b/components/radio/style/index.tsx
@@ -57,6 +57,21 @@ export interface ComponentToken {
    * @descEN Color of checked solid Radio button text
    */
   buttonSolidCheckedColor: string;
+  /**
+   * @desc 单选框实色按钮选中时的背景色
+   * @descEN Background color of checked solid Radio button text
+   */
+  buttonSolidCheckedBg: string;
+  /**
+   * @desc 单选框实色按钮选中时的悬浮态背景色
+   * @descEN Background color of checked solid Radio button text when hover
+   */
+  buttonSolidCheckedHoverBg: string;
+  /**
+   * @desc 单选框实色按钮选中时的激活态背景色
+   * @descEN Background color of checked solid Radio button text when active
+   */
+  buttonSolidCheckedActiveBg: string;
   /**
    * @desc 单选框右间距
    * @descEN Margin right of Radio button
@@ -319,6 +334,9 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = (token) => {
     colorPrimary,
     colorPrimaryHover,
     colorPrimaryActive,
+    buttonSolidCheckedBg,
+    buttonSolidCheckedHoverBg,
+    buttonSolidCheckedActiveBg,
   } = token;
   return {
     [`${componentCls}-button-wrapper`]: {
@@ -474,19 +492,19 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = (token) => {
 
       [`${componentCls}-group-solid &-checked:not(${componentCls}-button-wrapper-disabled)`]: {
         color: buttonSolidCheckedColor,
-        background: colorPrimary,
-        borderColor: colorPrimary,
+        background: buttonSolidCheckedBg,
+        borderColor: buttonSolidCheckedBg,
 
         '&:hover': {
           color: buttonSolidCheckedColor,
-          background: colorPrimaryHover,
-          borderColor: colorPrimaryHover,
+          background: buttonSolidCheckedHoverBg,
+          borderColor: buttonSolidCheckedHoverBg,
         },
 
         '&:active': {
           color: buttonSolidCheckedColor,
-          background: colorPrimaryActive,
-          borderColor: colorPrimaryActive,
+          background: buttonSolidCheckedActiveBg,
+          borderColor: buttonSolidCheckedActiveBg,
         },
       },
 
@@ -552,6 +570,9 @@ export default genComponentStyleHook(
       colorTextDisabled,
       controlItemBgActiveDisabled,
       colorTextLightSolid,
+      colorPrimary,
+      colorPrimaryHover,
+      colorPrimaryActive,
     } = token;
 
     const dotPadding = 4; // Fixed value
@@ -568,6 +589,9 @@ export default genComponentStyleHook(
 
       // Radio buttons
       buttonSolidCheckedColor: colorTextLightSolid,
+      buttonSolidCheckedBg: colorPrimary,
+      buttonSolidCheckedHoverBg: colorPrimaryHover,
+      buttonSolidCheckedActiveBg: colorPrimaryActive,
       buttonBg: colorBgContainer,
       buttonCheckedBg: colorBgContainer,
       buttonColor: colorText,