style: [Radio] add default background and border color token for card type radio (#1675)

packages/semi-foundation/radio/radio.scss

@@ -107,8 +107,8 @@ $inner-width: $width-icon-medium;
         flex-wrap: nowrap;
         border-radius: $radius-radio_cardRadioGroup;
         padding: $spacing-radio_cardRadioGroup-paddingY $spacing-radio_cardRadioGroup-paddingX;
-        background: transparent;
-        border: $width-radio_cardRadioGroup_checked-border solid transparent;
+        background: $color-radio_cardRadioGroup-bg-default;
+        border: $width-radio_cardRadioGroup_checked-border solid $color-radio_cardRadioGroup_border-default;
         transition: background-color $transition_duration_radio-bg $transition_function-radio-bg $transition_delay-radio-bg,
         border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
 
@@ -172,7 +172,7 @@ $inner-width: $width-icon-medium;
 
         &_disabled {
             &:active {
-                background: transparent;
+                background: $color-radio_cardRadioGroup_disabled-bg-active;
             }
         }
 

packages/semi-foundation/radio/radioFoundation.ts

@@ -32,7 +32,7 @@ export default class RadioFoundation extends BaseFoundation<RadioAdapter> {
             if (target.matches(':focus-visible')) {
                 this._adapter.setFocusVisible(true);
             }
-        } catch (error){
+        } catch (error) {
             warning(true, 'Warning: [Semi Radio] The current browser does not support the focus-visible');
         }
     }

packages/semi-foundation/radio/variables.scss

@@ -32,10 +32,13 @@ $color-radio_buttonRadio-text-disabled: var(--semi-color-disabled-text); // 按
 $color-radio_addon_buttonRadio-bg-hover: var(--semi-color-fill-1); // 按钮样式单选悬浮态背景色
 $color-radio_addon_buttonRadio-text-checked: var(--semi-color-primary); // 按钮样式单选选中项文字颜色
 $color-radio_addon_buttonRadio-bg-checked: var(--semi-color-bg-3); // 按钮样式单选选中项背景颜色
+$color-radio_cardRadioGroup-bg-default: transparent; // 卡片样式单选默认背景色
 $color-radio_cardRadioGroup-bg-checked: var(--semi-color-primary-light-default); // 卡片样式单选选中态背景色
 $color-radio_cardRadioGroup_disabled-bg-checked: var(--semi-color-primary-light-default); // 卡片样式单选选中且禁用时的背景色
+$color-radio_cardRadioGroup_disabled-bg-active: transparent; // 卡片样式单选禁用时的背景色 - 按下态
 $color-radio_cardRadioGroup-bg-hover: var(--semi-color-fill-0); // 卡片样式单选悬浮态背景色
 $color-radio_cardRadioGroup-bg-active: var(--semi-color-fill-1); // 卡片样式单选按下态背景色
+$color-radio_cardRadioGroup_border-default: transparent; // 卡片样式单选默认描边颜色
 $color-radio_cardRadioGroup_border-active: var(--semi-color-primary); // 卡片样式单选选中态描边颜色
 $color-radio_cardRadioGroup_checked_border-active: var(--semi-color-primary-active); // 卡片样式单选选中态描边颜色 - 按下态
 $color-radio_cardRadioGroup_checked_border-hover: var(--semi-color-primary-hover); // 卡片样式单选选中态描边颜色 - 悬浮态