@douyinfe/semi-foundation 2.1.2 → 2.1.6-alpha.0

package/checkbox/checkbox.scss

@@ -44,6 +44,7 @@ $module: #{$prefix}-checkbox;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-checkbox_checked-bg-hover;
+                box-shadow: none;
             }
         }
     }
@@ -56,6 +57,7 @@ $module: #{$prefix}-checkbox;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-checkbox_checked-bg-active;
+                box-shadow: none;
             }
         }
     }
@@ -70,6 +72,7 @@ $module: #{$prefix}-checkbox;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-checkbox_checked-bg-disabled;
+                box-shadow: none;
             }
         }
     }
@@ -125,7 +128,7 @@ $module: #{$prefix}-checkbox;
 
         &.#{$module}-indeterminate .#{$module}-inner-display {
             background: $color-checkbox_checked-bg-hover;
-            box-shadow: inset 0 0 0 $size-checkbox_inner-shadow $color-checkbox_default-border-hover;
+            box-shadow: none;
             color: $color-checkbox_checked-icon-hover;
         }
 
@@ -153,6 +156,7 @@ $module: #{$prefix}-checkbox;
             background: $color-checkbox_checked-bg-active;
             border-color: $color-checkbox_checked-border-active;
             color: $color-checkbox_checked-icon-active;
+            box-shadow: none;
         }
 
         .#{$module}-inner-checked {
@@ -222,6 +226,15 @@ $module: #{$prefix}-checkbox;
 
             &:hover {
                 background: $color-checkbox_cardType_checked-bg;
+                border-color: $color-checkbox_cardType_checked_border-hover;
+                .#{$module}-inner-checked .#{$module}-inner-display {
+                    box-shadow: none;
+                }
+            }
+
+            &:active {
+                background: $color-checkbox_cardType_checked-bg;
+                border-color: $color-checkbox_cardType_checked_border-active;
             }
         }
 
@@ -233,6 +246,17 @@ $module: #{$prefix}-checkbox;
                 background: transparent;
             }
         }
+
+        &_checked_disabled.#{$module}-cardType  {
+            background: $color-checkbox_cardType_checked_disabled-bg;
+            border: $width-checkbox_cardType_checked_disabled-border solid $color-checkbox_cardType_checked_disabled_border-default;
+
+            &:hover {
+                .#{$module}-inner-checked .#{$module}-inner-display {
+                    box-shadow: none;
+                }
+            }
+        }
     }
 
     &-indeterminate,

package/checkbox/checkboxFoundation.ts

@@ -8,6 +8,9 @@ export interface BasicCheckboxEvent {
     target: BasicTargetObject;
     stopPropagation: () => void;
     preventDefault: () => void;
+    nativeEvent: {
+        stopImmediatePropagation: () => void;
+    }
 }
 export interface CheckboxAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getIsInGroup: () => boolean;
@@ -28,7 +31,7 @@ class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> exten
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     init() {}
 
-    getEvent(checked: boolean, e: MouseEvent) {
+    getEvent(checked: boolean, e: any) {
         const props = this.getProps();
         const cbValue = {
             target: {
@@ -41,16 +44,23 @@ class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> exten
             preventDefault: () => {
                 e.preventDefault();
             },
+            nativeEvent: {
+                stopImmediatePropagation: () => {
+                    if (e.nativeEvent && typeof e.nativeEvent.stopImmediatePropagation === 'function') {
+                        e.nativeEvent.stopImmediatePropagation();
+                    }
+                }
+            },
         };
         return cbValue;
     }
 
-    notifyChange(checked: boolean, e: MouseEvent) {
+    notifyChange(checked: boolean, e: any) {
         const cbValue = this.getEvent(checked, e);
         this._adapter.notifyChange(cbValue);
     }
 
-    handleChange(e: MouseEvent) {
+    handleChange(e: any) {
         const disabled = this.getProp('disabled');
 
         if (disabled) {
@@ -78,7 +88,7 @@ class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> exten
         }
     }
 
-    handleChangeInGroup(e: MouseEvent) {
+    handleChangeInGroup(e: any) {
         const { value } = this.getProps();
         const groupValue = this._adapter.getGroupValue();
         const checked = groupValue.includes(value);
@@ -97,6 +107,7 @@ class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> exten
 }
 
 export interface BaseCheckboxProps {
+    id?: string;
     autoFocus?: boolean;
     checked?: boolean;
     defaultChecked?: boolean;

package/checkbox/variables.scss

@@ -19,9 +19,13 @@ $color-checkbox_checked-border-default: var(--semi-color-primary); // 选框选
 $color-checkbox_checked-border-hover: var(--semi-color-primary-hover); // 选框选中态描边颜色 - 悬浮
 $color-checkbox_checked-border-active: var(--semi-color-primary-active); // 选框选中态描边颜色 - 按下
 $color-checkbox_cardType_checked-bg: var(--semi-color-primary-light-default); // 卡片类型复选框选中时的背景颜色 - 默认
+$color-checkbox_cardType_checked_disabled-bg: var(--semi-color-primary-light-default); // 卡片类型复选框选中且禁用时的背景颜色 - 默认
 $color-checkbox_cardType-bg-hover: var(--semi-color-fill-0); // 卡片类型复选框选中时的背景颜色 - 悬浮
 $color-checkbox_cardType-bg-active: var(--semi-color-fill-1); // 卡片类型复选框选中时的背景颜色 - 按下
-$color-checkbox_cardType_checked_border-default: var(--semi-color-focus-border); //卡片类型复选框选中时的边框颜色 - 默认
+$color-checkbox_cardType_checked_border-default: var(--semi-color-primary); //卡片类型复选框选中时的边框颜色 - 默认
+$color-checkbox_cardType_checked_border-hover: var(--semi-color-primary-hover); //卡片类型复选框选中时的边框颜色 - 悬浮
+$color-checkbox_cardType_checked_border-active: var(--semi-color-primary-active); //卡片类型复选框选中时的边框颜色 - 按下
+$color-checkbox_cardType_checked_disabled_border-default: var(--semi-color-primary-disabled); //卡片类型复选框选中且禁用时的边框颜色 - 默认
 $color-checkbox_cardType_addon-text-default: var(--semi-color-text-0); // 卡片类型复选框 addon 的文字颜色 - 默认
 $color-checkbox_cardType_extra-text-default: var(--semi-color-text-2); // 卡片类型复选框 extra 的文字颜色 - 默认
 $color-checkbox_cardType_inner-bg-hover: var(--semi-color-white); // 卡片类型复选框 inner 的背景颜色 - 悬浮
@@ -37,6 +41,7 @@ $size-checkbox_inner-shadow: $border-thickness-control; // 选框内描边宽度
 $width-checkbox_inner: $width-icon-medium; // 选框对勾 icon 宽度
 $height-checkbox_inner: 20px; // 选框对勾 icon 高度
 $width-checkbox_cardType_checked-border: 1px; // 卡片类型复选框的边框宽度
+$width-checkbox_cardType_checked_disabled-border: 1px; // 卡片类型复选框选中且禁用的边框宽度
 
 $radius-checkbox_cardType: 3px; // 卡片类型复选框的圆角大小
 $radius-checkbox_inner: var(--semi-border-radius-extra-small); // 选框圆角

package/lib/cjs/checkbox/checkbox.css

@@ -36,12 +36,14 @@
 }
 .semi-checkbox:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
   background: var(--semi-color-primary-hover);
+  box-shadow: none;
 }
 .semi-checkbox:active .semi-checkbox-inner-display {
   background: var(--semi-color-fill-1);
 }
 .semi-checkbox:active .semi-checkbox-inner-checked .semi-checkbox-inner-display {
   background: var(--semi-color-primary-active);
+  box-shadow: none;
 }
 .semi-checkbox.semi-checkbox-disabled:hover .semi-checkbox-inner-display, .semi-checkbox.semi-checkbox-disabled:active .semi-checkbox-inner-display {
   background: var(--semi-color-disabled-fill);
@@ -49,6 +51,7 @@
 }
 .semi-checkbox.semi-checkbox-disabled:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display, .semi-checkbox.semi-checkbox-disabled:active .semi-checkbox-inner-checked .semi-checkbox-inner-display {
   background: var(--semi-color-primary-disabled);
+  box-shadow: none;
 }
 .semi-checkbox-inner {
   position: relative;
@@ -89,7 +92,7 @@
 }
 .semi-checkbox:hover.semi-checkbox-indeterminate .semi-checkbox-inner-display {
   background: var(--semi-color-primary-hover);
-  box-shadow: inset 0 0 0 1px var(--semi-color-focus-border);
+  box-shadow: none;
   color: var(--semi-color-white);
 }
 .semi-checkbox:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
@@ -107,6 +110,7 @@
   background: var(--semi-color-primary-active);
   border-color: var(--semi-color-primary-active);
   color: var(--semi-color-white);
+  box-shadow: none;
 }
 .semi-checkbox:active .semi-checkbox-inner-checked .semi-checkbox-inner-display {
   background: var(--semi-color-primary-active);
@@ -158,10 +162,18 @@
 }
 .semi-checkbox-cardType_checked {
   background: var(--semi-color-primary-light-default);
-  border: 1px solid var(--semi-color-focus-border);
+  border: 1px solid var(--semi-color-primary);
 }
 .semi-checkbox-cardType_checked:hover {
   background: var(--semi-color-primary-light-default);
+  border-color: var(--semi-color-primary-hover);
+}
+.semi-checkbox-cardType_checked:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
+  box-shadow: none;
+}
+.semi-checkbox-cardType_checked:active {
+  background: var(--semi-color-primary-light-default);
+  border-color: var(--semi-color-primary-active);
 }
 .semi-checkbox-cardType_disabled:active {
   background: transparent;
@@ -169,6 +181,13 @@
 .semi-checkbox-cardType_disabled:hover {
   background: transparent;
 }
+.semi-checkbox-cardType_checked_disabled.semi-checkbox-cardType {
+  background: var(--semi-color-primary-light-default);
+  border: 1px solid var(--semi-color-primary-disabled);
+}
+.semi-checkbox-cardType_checked_disabled.semi-checkbox-cardType:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
+  box-shadow: none;
+}
 .semi-checkbox-indeterminate .semi-checkbox-inner-display, .semi-checkbox-checked .semi-checkbox-inner-display {
   background: var(--semi-color-primary);
   color: var(--semi-color-white);

package/lib/cjs/checkbox/checkbox.scss

@@ -44,6 +44,7 @@ $module: #{$prefix}-checkbox;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-checkbox_checked-bg-hover;
+                box-shadow: none;
             }
         }
     }
@@ -56,6 +57,7 @@ $module: #{$prefix}-checkbox;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-checkbox_checked-bg-active;
+                box-shadow: none;
             }
         }
     }
@@ -70,6 +72,7 @@ $module: #{$prefix}-checkbox;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-checkbox_checked-bg-disabled;
+                box-shadow: none;
             }
         }
     }
@@ -125,7 +128,7 @@ $module: #{$prefix}-checkbox;
 
         &.#{$module}-indeterminate .#{$module}-inner-display {
             background: $color-checkbox_checked-bg-hover;
-            box-shadow: inset 0 0 0 $size-checkbox_inner-shadow $color-checkbox_default-border-hover;
+            box-shadow: none;
             color: $color-checkbox_checked-icon-hover;
         }
 
@@ -153,6 +156,7 @@ $module: #{$prefix}-checkbox;
             background: $color-checkbox_checked-bg-active;
             border-color: $color-checkbox_checked-border-active;
             color: $color-checkbox_checked-icon-active;
+            box-shadow: none;
         }
 
         .#{$module}-inner-checked {
@@ -222,6 +226,15 @@ $module: #{$prefix}-checkbox;
 
             &:hover {
                 background: $color-checkbox_cardType_checked-bg;
+                border-color: $color-checkbox_cardType_checked_border-hover;
+                .#{$module}-inner-checked .#{$module}-inner-display {
+                    box-shadow: none;
+                }
+            }
+
+            &:active {
+                background: $color-checkbox_cardType_checked-bg;
+                border-color: $color-checkbox_cardType_checked_border-active;
             }
         }
 
@@ -233,6 +246,17 @@ $module: #{$prefix}-checkbox;
                 background: transparent;
             }
         }
+
+        &_checked_disabled.#{$module}-cardType  {
+            background: $color-checkbox_cardType_checked_disabled-bg;
+            border: $width-checkbox_cardType_checked_disabled-border solid $color-checkbox_cardType_checked_disabled_border-default;
+
+            &:hover {
+                .#{$module}-inner-checked .#{$module}-inner-display {
+                    box-shadow: none;
+                }
+            }
+        }
     }
 
     &-indeterminate,

package/lib/cjs/checkbox/checkboxFoundation.d.ts

@@ -7,6 +7,9 @@ export interface BasicCheckboxEvent {
     target: BasicTargetObject;
     stopPropagation: () => void;
     preventDefault: () => void;
+    nativeEvent: {
+        stopImmediatePropagation: () => void;
+    };
 }
 export interface CheckboxAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getIsInGroup: () => boolean;
@@ -20,18 +23,22 @@ export interface CheckboxAdapter<P = Record<string, any>, S = Record<string, any
 declare class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<CheckboxAdapter<P, S>, P, S> {
     constructor(adapter: CheckboxAdapter<P, S>);
     init(): void;
-    getEvent(checked: boolean, e: MouseEvent): {
+    getEvent(checked: boolean, e: any): {
         target: any;
         stopPropagation: () => void;
         preventDefault: () => void;
+        nativeEvent: {
+            stopImmediatePropagation: () => void;
+        };
     };
-    notifyChange(checked: boolean, e: MouseEvent): void;
-    handleChange(e: MouseEvent): void;
-    handleChangeInGroup(e: MouseEvent): void;
+    notifyChange(checked: boolean, e: any): void;
+    handleChange(e: any): void;
+    handleChangeInGroup(e: any): void;
     setChecked(checked: boolean): void;
     destroy(): void;
 }
 export interface BaseCheckboxProps {
+    id?: string;
     autoFocus?: boolean;
     checked?: boolean;
     defaultChecked?: boolean;

package/lib/cjs/checkbox/checkboxFoundation.js

@@ -35,6 +35,13 @@ class CheckboxFoundation extends _foundation.default {
       },
       preventDefault: () => {
         e.preventDefault();
+      },
+      nativeEvent: {
+        stopImmediatePropagation: () => {
+          if (e.nativeEvent && typeof e.nativeEvent.stopImmediatePropagation === 'function') {
+            e.nativeEvent.stopImmediatePropagation();
+          }
+        }
       }
     };
     return cbValue;

package/lib/cjs/checkbox/variables.scss

@@ -19,9 +19,13 @@ $color-checkbox_checked-border-default: var(--semi-color-primary); // 选框选
 $color-checkbox_checked-border-hover: var(--semi-color-primary-hover); // 选框选中态描边颜色 - 悬浮
 $color-checkbox_checked-border-active: var(--semi-color-primary-active); // 选框选中态描边颜色 - 按下
 $color-checkbox_cardType_checked-bg: var(--semi-color-primary-light-default); // 卡片类型复选框选中时的背景颜色 - 默认
+$color-checkbox_cardType_checked_disabled-bg: var(--semi-color-primary-light-default); // 卡片类型复选框选中且禁用时的背景颜色 - 默认
 $color-checkbox_cardType-bg-hover: var(--semi-color-fill-0); // 卡片类型复选框选中时的背景颜色 - 悬浮
 $color-checkbox_cardType-bg-active: var(--semi-color-fill-1); // 卡片类型复选框选中时的背景颜色 - 按下
-$color-checkbox_cardType_checked_border-default: var(--semi-color-focus-border); //卡片类型复选框选中时的边框颜色 - 默认
+$color-checkbox_cardType_checked_border-default: var(--semi-color-primary); //卡片类型复选框选中时的边框颜色 - 默认
+$color-checkbox_cardType_checked_border-hover: var(--semi-color-primary-hover); //卡片类型复选框选中时的边框颜色 - 悬浮
+$color-checkbox_cardType_checked_border-active: var(--semi-color-primary-active); //卡片类型复选框选中时的边框颜色 - 按下
+$color-checkbox_cardType_checked_disabled_border-default: var(--semi-color-primary-disabled); //卡片类型复选框选中且禁用时的边框颜色 - 默认
 $color-checkbox_cardType_addon-text-default: var(--semi-color-text-0); // 卡片类型复选框 addon 的文字颜色 - 默认
 $color-checkbox_cardType_extra-text-default: var(--semi-color-text-2); // 卡片类型复选框 extra 的文字颜色 - 默认
 $color-checkbox_cardType_inner-bg-hover: var(--semi-color-white); // 卡片类型复选框 inner 的背景颜色 - 悬浮
@@ -37,6 +41,7 @@ $size-checkbox_inner-shadow: $border-thickness-control; // 选框内描边宽度
 $width-checkbox_inner: $width-icon-medium; // 选框对勾 icon 宽度
 $height-checkbox_inner: 20px; // 选框对勾 icon 高度
 $width-checkbox_cardType_checked-border: 1px; // 卡片类型复选框的边框宽度
+$width-checkbox_cardType_checked_disabled-border: 1px; // 卡片类型复选框选中且禁用的边框宽度
 
 $radius-checkbox_cardType: 3px; // 卡片类型复选框的圆角大小
 $radius-checkbox_inner: var(--semi-border-radius-extra-small); // 选框圆角

package/lib/cjs/modal/modal.css

@@ -14,7 +14,7 @@
   right: 0;
   left: 0;
   bottom: 0;
-  background-color: var(--semi-overlay-bg);
+  background-color: var(--semi-color-overlay-bg);
   height: 100%;
   z-index: 1000;
 }

package/lib/cjs/modal/modalFoundation.d.ts

@@ -26,7 +26,7 @@ export interface ModalProps {
     footer?: any;
     hasCancel?: boolean;
     header?: any;
-    height?: number;
+    height?: string | number;
     mask?: boolean;
     maskClosable?: boolean;
     maskStyle?: Record<string, any>;
@@ -40,7 +40,7 @@ export interface ModalProps {
     style?: Record<string, any>;
     title?: any;
     visible?: boolean;
-    width?: number;
+    width?: string | number;
     zIndex?: number;
     icon?: any;
     getPopupContainer?: () => HTMLElement;

package/lib/cjs/modal/variables.scss

@@ -1,6 +1,6 @@
 // Color
 $color-modal-bg: var(--semi-color-bg-2); // 模态框背景颜色
-$color-modal_mask-bg: var(--semi-overlay-bg); // 模态框蒙层颜色
+$color-modal_mask-bg: var(--semi-color-overlay-bg); // 模态框蒙层颜色
 $color-modal_main-text: var(--semi-color-text-0); // 模态框文字颜色
 $color-modal_info-icon: var(--semi-color-info); // 模态框信息图标颜色
 $color-modal_primary-icon: var(--semi-color-primary); // 模态框主要图标颜色

package/lib/cjs/radio/radio.css

@@ -27,6 +27,7 @@
   width: 100%;
   height: 100%;
   margin: 0;
+  cursor: pointer;
 }
 .semi-radio:hover .semi-radio-inner-display {
   background: var(--semi-color-fill-0);
@@ -37,6 +38,7 @@
 }
 .semi-radio:hover .semi-radio-inner-checked .semi-radio-inner-display {
   background: var(--semi-color-primary-hover);
+  border-color: var(--semi-color-primary-hover);
 }
 .semi-radio:active .semi-radio-inner-display {
   background: var(--semi-color-fill-1);
@@ -46,6 +48,7 @@
 }
 .semi-radio:active .semi-radio-inner-checked .semi-radio-inner-display {
   background: var(--semi-color-primary-active);
+  border-color: var(--semi-color-primary-active);
 }
 .semi-radio-buttonRadioComponent {
   padding: 4px;
@@ -103,7 +106,23 @@
 }
 .semi-radio-cardRadioGroup_checked {
   background: var(--semi-color-primary-light-default);
-  border: 1px solid var(--semi-color-focus-border);
+  border: 1px solid var(--semi-color-primary);
+}
+.semi-radio-cardRadioGroup_checked:hover {
+  border: 1px solid var(--semi-color-primary-hover);
+}
+.semi-radio-cardRadioGroup_checked:hover .semi-radio-inner-checked .semi-radio-inner-display {
+  border-color: var(--semi-color-primary-hover);
+}
+.semi-radio-cardRadioGroup_checked:active {
+  background: var(--semi-color-primary-light-default);
+  border: 1px solid var(--semi-color-primary-active);
+}
+.semi-radio-cardRadioGroup_checked:active .semi-radio-inner-checked .semi-radio-inner-display {
+  border-color: var(--semi-color-primary-active);
+}
+.semi-radio-cardRadioGroup_checked:active .semi-radio-inner-checked:hover .semi-radio-inner-display {
+  background: var(--semi-color-primary-active);
 }
 .semi-radio-cardRadioGroup_hover {
   background: var(--semi-color-fill-0);
@@ -111,12 +130,23 @@
 .semi-radio-cardRadioGroup_disabled:active {
   background: transparent;
 }
+.semi-radio-cardRadioGroup_checked_disabled.semi-radio-cardRadioGroup {
+  background: var(--semi-color-primary-light-default);
+  border: 1px solid var(--semi-color-primary-disabled);
+}
+.semi-radio-cardRadioGroup_checked_disabled.semi-radio-cardRadioGroup .semi-radio-inner-checked .semi-radio-inner-display {
+  border-color: var(--semi-color-primary-disabled);
+}
+.semi-radio-cardRadioGroup_checked_disabled.semi-radio-cardRadioGroup:hover .semi-radio-inner-checked .semi-radio-inner-display {
+  border-color: var(--semi-color-primary-disabled);
+}
 .semi-radio.semi-radio-disabled:hover .semi-radio-inner-display, .semi-radio.semi-radio-disabled:active .semi-radio-inner-display {
   background: var(--semi-color-disabled-fill);
   border: solid 1px var(--semi-color-border);
 }
 .semi-radio.semi-radio-disabled:hover .semi-radio-inner-checked .semi-radio-inner-display, .semi-radio.semi-radio-disabled:active .semi-radio-inner-checked .semi-radio-inner-display {
   background: var(--semi-color-primary-disabled);
+  border-color: var(--semi-color-primary-disabled);
 }
 .semi-radio-inner {
   position: absolute;
@@ -224,10 +254,11 @@
 }
 .semi-radio-disabled .semi-radio-inner-checked .semi-radio-inner-display {
   background: var(--semi-color-primary-disabled);
-  border-color: var(--semi-color-border);
+  border-color: var(--semi-color-primary-disabled);
 }
 .semi-radio-disabled .semi-radio-inner-checked .semi-radio-inner-display:hover {
   background: var(--semi-color-primary-disabled);
+  border-color: var(--semi-color-primary-disabled);
 }
 .semi-radio-disabled .semi-radio-addon {
   color: var(--semi-color-disabled-text);

package/lib/cjs/radio/radio.scss

@@ -29,6 +29,7 @@ $inner-width: $width-icon-medium;
         width: 100%;
         height: 100%;
         margin: 0;
+        cursor: pointer;
     }
 
     &:hover {
@@ -46,6 +47,7 @@ $inner-width: $width-icon-medium;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-radio_primary-bg-hover;
+                border-color: $color-radio_checked-border-hover;
             }
         }
     }
@@ -64,6 +66,7 @@ $inner-width: $width-icon-medium;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-radio_primary-bg-active;
+                border-color: $color-radio_checked-border-active;
             }
         }
     }
@@ -135,6 +138,29 @@ $inner-width: $width-icon-medium;
         &_checked {
             background: $color-radio_cardRadioGroup-bg-checked;
             border: $width-radio_cardRadioGroup_checked-border solid $color-radio_cardRadioGroup_border-active;
+
+            &:hover {
+                border: $width-radio_cardRadioGroup_checked-border solid $color-radio_cardRadioGroup_checked_border-hover;
+
+                .#{$module}-inner-checked .#{$module}-inner-display {
+                    border-color: $color-radio_cardRadioGroup_checked_border-hover;
+                }
+            }
+
+            &:active {
+                background: $color-radio_cardRadioGroup-bg-checked;
+                border: $width-radio_cardRadioGroup_checked-border solid $color-radio_cardRadioGroup_checked_border-active;
+
+                .#{$module}-inner-checked {
+                    .#{$module}-inner-display {
+                        border-color: $color-radio_cardRadioGroup_checked_border-active;
+                    }
+
+                    &:hover .#{$module}-inner-display {
+                        background: $color-radio_primary-bg-active;
+                    }
+                }
+            }
         }
 
         &_hover {
@@ -146,6 +172,21 @@ $inner-width: $width-icon-medium;
                 background: transparent;
             }
         }
+
+        &_checked_disabled.#{$module}-cardRadioGroup  {
+            background: $color-radio_cardRadioGroup_disabled-bg-checked;
+            border: $width-radio_cardRadioGroup_checked_disabled-border solid $color-radio_cardRadioGroup_border_disabled-active;
+
+            .#{$module}-inner-checked .#{$module}-inner-display {
+                border-color: $color-radio_cardRadioGroup_checked_disabled-border-default;
+            }
+            
+            &:hover {
+                .#{$module}-inner-checked .#{$module}-inner-display {
+                    border-color: $color-radio_cardRadioGroup_checked_disabled-border-hover;
+                }
+            }
+        }
     }
 
     &.#{$module}-disabled:hover,
@@ -158,6 +199,7 @@ $inner-width: $width-icon-medium;
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
                 background: $color-radio_checked-bg-disabled;
+                border-color: $color-radio_checked-border-disabled;
             }
         }
     }
@@ -293,7 +335,7 @@ $inner-width: $width-icon-medium;
             &-display {
                 opacity: 0.75;
                 background: $color-radio_disabled-bg-default;
-                border-color: $color-radio_checked-border-disabled;
+                border-color: $color-radio_default-border-disabled;
 
                 &:hover {
                     background: $color-radio_disabled-bg-hover;
@@ -308,6 +350,7 @@ $inner-width: $width-icon-medium;
 
                 &:hover {
                     background: $color-radio_checked-bg-disabled;
+                    border-color: $color-radio_checked-border-disabled;
                 }
             }
         }

package/lib/cjs/radio/variables.scss

@@ -3,6 +3,8 @@ $color-radio_default-bg-default: transparent; // 默认态背景颜色
 $color-radio_default-bg-hover: var(--semi-color-fill-0); // 悬浮态背景颜色
 $color-radio_default-bg-active: var(--semi-color-fill-1); // 按下态背景颜色
 $color-radio_default-border-hover: var(--semi-color-focus-border); // 悬浮态描边颜色
+$color-radio_checked-border-hover: var(--semi-color-primary-hover); // 选中时悬浮态描边颜色
+$color-radio_checked-border-active: var(--semi-color-primary-active); // 选中时按下态描边颜色
 
 $color-radio_default-text-default: var(--semi-color-text-0); // 选项文本颜色
 $color-radio_extra-text-default: var(--semi-color-text-2); // 辅助文本颜色
@@ -14,7 +16,8 @@ $color-radio_primary-bg-default: var(--semi-color-primary); // 选中项背景
 $color-radio_primary-text-default: white; // 选中项原点颜色
 
 $color-radio_checked-bg-disabled: var(--semi-color-primary-disabled); // 选中项禁用态背景颜色
-$color-radio_checked-border-disabled: var(--semi-color-border); // 选中项禁用态描边颜色
+$color-radio_default-border-disabled: var(--semi-color-border); // 禁用态描边颜色
+$color-radio_checked-border-disabled: var(--semi-color-primary-disabled); // 选中项禁用态描边颜色
 
 $color-radio_disabled-bg-default: var(--semi-color-disabled-fill); // 禁用态背景颜色
 $color-radio_disabled-bg-hover: transparent;
@@ -30,11 +33,17 @@ $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-checked: var(--semi-color-primary-light-default); // 卡片样式单选选中态背景色
+$color-radio_cardRadioGroup_disabled-bg-checked: var(--semi-color-primary-light-default); // 卡片样式单选选中且禁用时的背景色
 $color-radio_cardRadioGroup-bg-hover: var(--semi-color-fill-0); // 卡片样式单选悬浮态背景色
 $color-radio_cardRadioGroup-bg-active: var(--semi-color-fill-1); // 卡片样式单选按下态背景色
-$color-radio_cardRadioGroup_border-active: var(--semi-color-focus-border); // 卡片样式单选选中态描边颜色
+$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); // 卡片样式单选选中态描边颜色 - 悬浮态
+$color-radio_cardRadioGroup_border_disabled-active: var(--semi-color-primary-disabled); // 卡片样式单选选中且禁用时的描边颜色
 $color-radio_cardRadioGroup_addon-text-default: var(--semi-color-text-0); // 卡片样式单选标题文字颜色
 $color-radio_cardRadioGroup_extra-text-default: var(--semi-color-text-2); // 卡片样式单选辅助文字颜色
+$color-radio_cardRadioGroup_checked_disabled-border-default: var(--semi-color-primary-disabled); // 卡片样式选中项禁用态描边颜色 - 默认态
+$color-radio_cardRadioGroup_checked_disabled-border-hover:  var(--semi-color-primary-disabled); // 卡片样式选中项禁用态描边颜色 - 悬浮态
 $color-radio_card-bg-hover: var(--semi-color-white); // 单选圆点颜色
 $color-radio_card-bg-active: var(--semi-color-white); // 单选圆点颜色 - 按下态
 $color-radio_card-bg-default: var(--semi-color-white); // 单选圆点颜色 - 悬浮态
@@ -44,6 +53,7 @@ $radius-radio_addon_buttonRadio: var(--semi-border-radius-small); // 按钮式
 $radius-radio_buttonRadio: var(--semi-border-radius-small); // 按钮式单选圆角大小
 
 $width-radio_cardRadioGroup_checked-border: 1px; // 卡片式单选描边宽度
+$width-radio_cardRadioGroup_checked_disabled-border: 1px; // 卡片式单选选中且禁用时的描边宽度
 $width-radio_hover-border: $border-thickness-control; // 描边宽度 - 悬浮态
 $width-radio_disabled-border: $border-thickness-control; // 描边宽度 - 禁用态
 $width-radio_innder-border: $border-thickness-control; // 描边宽度 - 禁用态

package/lib/cjs/rating/rating.css

@@ -45,6 +45,9 @@
   height: 24px;
   font-size: 24px;
 }
+.semi-rating-star-wrapper {
+  position: relative;
+}
 .semi-rating-star-first, .semi-rating-star-second {
   color: var(--semi-color-fill-0);
   user-select: none;

package/lib/cjs/rating/rating.scss

@@ -56,6 +56,10 @@ $module: #{$prefix}-rating;
             font-size: $font-rating_item_default-fontSize;
         }
 
+        &-wrapper {
+            position: relative;
+        }
+
         &-first,
         &-second {
             color: $color-rating-bg-default;