@douyinfe/semi-foundation 2.1.1 → 2.1.5

package/lib/es/input/foundation.js

@@ -1,8 +1,12 @@
+import _isFunction from "lodash/isFunction";
+import _isString from "lodash/isString";
+import _isNumber from "lodash/isNumber";
+import _set from "lodash/set";
+import _noop from "lodash/noop";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import BaseFoundation from '../base/foundation';
 import { strings } from './constants';
-import { noop, set, isNumber, isString, isFunction } from 'lodash-es';
 const ENTER_KEY_CODE = 'Enter';
 
 class InputFoundation extends BaseFoundation {
@@ -12,8 +16,8 @@ class InputFoundation extends BaseFoundation {
 
   static get inputDefaultAdapter() {
     return {
-      notifyChange: noop,
-      setValue: noop // toggleAllowClear: noop,
+      notifyChange: _noop,
+      setValue: _noop // toggleAllowClear: noop,
 
     };
   }
@@ -60,11 +64,11 @@ class InputFoundation extends BaseFoundation {
 
     let nextValue = value;
 
-    if (maxLength && isFunction(getValueLength)) {
+    if (maxLength && _isFunction(getValueLength)) {
       nextValue = this.handleVisibleMaxLength(value);
     }
 
-    if (minLength && isFunction(getValueLength)) {
+    if (minLength && _isFunction(getValueLength)) {
       this.handleVisibleMinLength(nextValue);
     }
 
@@ -99,7 +103,7 @@ class InputFoundation extends BaseFoundation {
       minLength: stateMinLength
     } = this._adapter.getStates();
 
-    if (isNumber(minLength) && minLength >= 0 && isFunction(getValueLength) && isString(value)) {
+    if (_isNumber(minLength) && minLength >= 0 && _isFunction(getValueLength) && _isString(value)) {
       const valueLength = getValueLength(value);
 
       if (valueLength < minLength) {
@@ -123,7 +127,7 @@ class InputFoundation extends BaseFoundation {
       getValueLength
     } = this._adapter.getProps();
 
-    if (isNumber(maxLength) && maxLength >= 0 && isFunction(getValueLength) && isString(value)) {
+    if (_isNumber(maxLength) && maxLength >= 0 && _isFunction(getValueLength) && _isString(value)) {
       const valueLength = getValueLength(value);
 
       if (valueLength > maxLength) {
@@ -149,7 +153,7 @@ class InputFoundation extends BaseFoundation {
       getValueLength
     } = this._adapter.getProps();
 
-    if (isFunction(getValueLength)) {
+    if (_isFunction(getValueLength)) {
       let truncatedValue = '';
 
       for (let i = 1, len = value.length; i <= len; i++) {
@@ -187,7 +191,8 @@ class InputFoundation extends BaseFoundation {
       eventObj = {};
     }
 
-    set(eventObj, strings.CLEARBTN_CLICKED_EVENT_FLAG, true); // this is useful for DateInput
+    _set(eventObj, strings.CLEARBTN_CLICKED_EVENT_FLAG, true); // this is useful for DateInput
+
 
     this._adapter.notifyChange(value, eventObj);
 
@@ -343,7 +348,7 @@ class InputFoundation extends BaseFoundation {
 
 
   handlePreventMouseDown(e) {
-    if (e && isFunction(e.preventDefault)) {
+    if (e && _isFunction(e.preventDefault)) {
       e.preventDefault();
     }
   }

package/lib/es/input/input.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* shadow */
 /* sizing */
 /* spacing */
@@ -58,7 +57,7 @@
 }
 .semi-input-wrapper:hover {
   background-color: var(--semi-color-fill-1);
-  border-color: transparent·;
+  border-color: transparent;
 }
 .semi-input-wrapper-focus {
   background-color: var(--semi-color-fill-0);
@@ -66,9 +65,11 @@
 }
 .semi-input-wrapper-focus:hover {
   background-color: var(--semi-color-fill-0);
+  border-color: var(--semi-color-focus-border);
 }
 .semi-input-wrapper-focus:active {
   background-color: var(--semi-color-fill-0);
+  border-color: var(--semi-color-focus-border);
 }
 .semi-input-wrapper.semi-input-readonly {
   cursor: default;

package/lib/es/input/input.scss

@@ -73,10 +73,12 @@ $module: #{$prefix}-input;
 
         &:hover {
             background-color: $color-input_default-bg-focus;
+            border-color: $color-input_default-border-focus;
         }
 
         &:active {
             background-color: $color-input_default-bg-focus;
+            border-color: $color-input_default-border-focus;
         }
     }
 

package/lib/es/input/textareaFoundation.js

@@ -1,7 +1,10 @@
+import _isString from "lodash/isString";
+import _isNumber from "lodash/isNumber";
+import _isFunction from "lodash/isFunction";
+import _noop from "lodash/noop";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import BaseFoundation from '../base/foundation';
-import { noop, isFunction, isNumber, isString } from 'lodash-es';
 import calculateNodeHeight from './util/calculateNodeHeight';
 import getSizingData from './util/getSizingData';
 export default class TextAreaFoundation extends BaseFoundation {
@@ -41,14 +44,14 @@ export default class TextAreaFoundation extends BaseFoundation {
 
   static get textAreaDefaultAdapter() {
     return {
-      notifyChange: noop,
-      setValue: noop,
-      toggleFocusing: noop,
-      toggleHovering: noop,
-      notifyFocus: noop,
-      notifyBlur: noop,
-      notifyKeyDown: noop,
-      notifyEnterPress: noop
+      notifyChange: _noop,
+      setValue: _noop,
+      toggleFocusing: _noop,
+      toggleHovering: _noop,
+      notifyFocus: _noop,
+      notifyBlur: _noop,
+      notifyKeyDown: _noop,
+      notifyEnterPress: _noop
     };
   }
 
@@ -86,11 +89,11 @@ export default class TextAreaFoundation extends BaseFoundation {
 
     let nextValue = value;
 
-    if (maxLength && isFunction(getValueLength)) {
+    if (maxLength && _isFunction(getValueLength)) {
       nextValue = this.handleVisibleMaxLength(value);
     }
 
-    if (minLength && isFunction(getValueLength)) {
+    if (minLength && _isFunction(getValueLength)) {
       this.handleVisibleMinLength(nextValue);
     }
 
@@ -119,7 +122,7 @@ export default class TextAreaFoundation extends BaseFoundation {
       minLength: stateMinLength
     } = this._adapter.getStates();
 
-    if (isNumber(minLength) && minLength >= 0 && isFunction(getValueLength) && isString(value)) {
+    if (_isNumber(minLength) && minLength >= 0 && _isFunction(getValueLength) && _isString(value)) {
       const valueLength = getValueLength(value);
 
       if (valueLength < minLength) {
@@ -143,7 +146,7 @@ export default class TextAreaFoundation extends BaseFoundation {
       getValueLength
     } = this._adapter.getProps();
 
-    if (isNumber(maxLength) && maxLength >= 0 && isFunction(getValueLength) && isString(value)) {
+    if (_isNumber(maxLength) && maxLength >= 0 && _isFunction(getValueLength) && _isString(value)) {
       const valueLength = getValueLength(value);
 
       if (valueLength > maxLength) {
@@ -171,7 +174,7 @@ export default class TextAreaFoundation extends BaseFoundation {
       getValueLength
     } = this._adapter.getProps();
 
-    if (isFunction(getValueLength)) {
+    if (_isFunction(getValueLength)) {
       let truncatedValue = '';
 
       for (let i = 1, len = value.length; i <= len; i++) {

package/lib/es/input/util/getSizingData.js

@@ -1,6 +1,5 @@
+import _pick from "lodash/pick";
 import _parseFloat from "@babel/runtime-corejs3/core-js-stable/parse-float";
-// Reference to https://github.com/andreypopp/react-textarea-autosize/
-import { pick } from 'lodash-es';
 const SIZING_STYLE = ['borderBottomWidth', 'borderLeftWidth', 'borderRightWidth', 'borderTopWidth', 'boxSizing', 'fontFamily', 'fontSize', 'fontStyle', 'fontWeight', 'letterSpacing', 'lineHeight', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', // non-standard
 'tabSize', 'textIndent', // non-standard
 'textRendering', 'textTransform', 'width'];
@@ -12,7 +11,8 @@ const getSizingData = node => {
     return null;
   }
 
-  const sizingStyle = pick(style, SIZING_STYLE);
+  const sizingStyle = _pick(style, SIZING_STYLE);
+
   const {
     boxSizing
   } = sizingStyle; // probably node is detached from DOM, can't read computed dimensions

package/lib/es/input/variables.scss

@@ -4,7 +4,7 @@ $color-input_default-bg-default: var(--semi-color-fill-0); // 输入框背景颜
 $color-input_default-text-default: var(--semi-color-text-0); // 输入框文本颜色 - 默认
 
 $color-input_default-bg-hover: var(--semi-color-fill-1); // 输入框背景颜色 - 悬浮
-$color-input_default-border-hover: transparent·; // 输入框描边颜色 - 悬浮
+$color-input_default-border-hover: transparent; // 输入框描边颜色 - 悬浮
 
 $color-input_default-bg-active: var(--semi-color-fill-2); // 输入框背景颜色 - 按下
 $color-input_default-border-active: $color-input_default-bg-active; // 输入框描边颜色 - 按下

package/lib/es/inputNumber/foundation.js

@@ -1,3 +1,5 @@
+import _toString from "lodash/toString";
+import _toNumber from "lodash/toNumber";
 import _setInterval from "@babel/runtime-corejs3/core-js-stable/set-interval";
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _lastIndexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/last-index-of";
@@ -13,7 +15,6 @@ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import BaseFoundation from '../base/foundation';
 import keyCode from '../utils/keyCode';
 import { numbers } from './constants';
-import { toNumber, toString } from 'lodash-es';
 import { minus as numberMinus } from '../utils/number';
 
 class InputNumberFoundation extends BaseFoundation {
@@ -217,7 +218,8 @@ class InputNumberFoundation extends BaseFoundation {
   }
 
   handleInputBlur(e) {
-    const currentValue = toString(this.getState('value'));
+    const currentValue = _toString(this.getState('value'));
+
     let currentNumber = this.getState('number');
 
     if (currentNumber != null || currentValue != null && currentValue !== '') {
@@ -362,7 +364,7 @@ class InputNumberFoundation extends BaseFoundation {
       value
     } = this.getProps();
     const propsValue = this._isControlledComponent('value') ? value : defaultValue;
-    const tmpNumer = this.doParse(toString(propsValue), false, true, true);
+    const tmpNumer = this.doParse(_toString(propsValue), false, true, true);
     let number = null;
 
     if (typeof tmpNumer === 'number' && !isNaN(tmpNumer)) {
@@ -380,7 +382,7 @@ class InputNumberFoundation extends BaseFoundation {
     const pressShift = event && event.shiftKey;
     const propStep = pressShift ? this.getProp('shiftStep') : this.getProp('step');
     step = step == null ? propStep : Number(step);
-    const stepAbs = Math.abs(toNumber(step));
+    const stepAbs = Math.abs(_toNumber(step));
     const curVal = this.getState('number');
     let curNum = this.toNumber(curVal) || 0;
     const min = this.getProp('min');
@@ -448,7 +450,7 @@ class InputNumberFoundation extends BaseFoundation {
       num = Number(num).toFixed(precision);
     }
 
-    return toString(num);
+    return _toString(num);
   }
   /**
    * format number to string
@@ -470,7 +472,7 @@ class InputNumberFoundation extends BaseFoundation {
     if (needAdjustPrec) {
       str = this._adjustPrec(value);
     } else {
-      str = toString(value);
+      str = _toString(value);
     }
 
     if (typeof formatter === 'function') {
@@ -524,7 +526,7 @@ class InputNumberFoundation extends BaseFoundation {
         value = this._adjustPrec(value);
       }
 
-      return toNumber(value);
+      return _toNumber(value);
     }
 
     const parser = this.getProp('parser');
@@ -550,7 +552,7 @@ class InputNumberFoundation extends BaseFoundation {
     }
 
     if (typeof value === 'string' && value.length) {
-      return needAdjustMaxMin ? this.fetchMinOrMax(toNumber(value)) : toNumber(value);
+      return needAdjustMaxMin ? this.fetchMinOrMax(_toNumber(value)) : _toNumber(value);
     }
 
     return NaN;
@@ -566,10 +568,10 @@ class InputNumberFoundation extends BaseFoundation {
     const parser = this.getProp('parser');
 
     if (typeof value === 'string' && typeof parser === 'function') {
-      return toString(parser(value));
+      return _toString(parser(value));
     }
 
-    return toString(value);
+    return _toString(value);
   }
 
   toNumber(value) {
@@ -591,7 +593,7 @@ class InputNumberFoundation extends BaseFoundation {
       }
     }
 
-    return toNumber(value);
+    return _toNumber(value);
   }
   /**
    * Returning true requires both:

package/lib/es/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/es/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/es/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/es/navigation/foundation.js

@@ -1,3 +1,4 @@
+import _get from "lodash/get";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
@@ -11,7 +12,6 @@ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/ins
 import BaseFoundation from '../base/foundation';
 import NavItem from './NavItem';
 import { strings } from './constants';
-import { get } from 'lodash-es';
 import isNullOrUndefined from '../utils/isNullOrUndefined';
 export default class NavigationFoundation extends BaseFoundation {
   constructor(adapter) {
@@ -195,7 +195,7 @@ export default class NavigationFoundation extends BaseFoundation {
     if (_Array$isArray(selectedKeys) && selectedKeys.length) {
       _forEachInstanceProperty(selectedKeys).call(selectedKeys, item => {
         if (item) {
-          const parentKeys = get(itemKeysMap, this.getItemKey(item));
+          const parentKeys = _get(itemKeysMap, this.getItemKey(item));
 
           if (_Array$isArray(parentKeys)) {
             _forEachInstanceProperty(parentKeys).call(parentKeys, k => willOpenKeySet.add(k));

package/lib/es/notification/notificationFoundation.js

@@ -1,7 +1,7 @@
+import _isNumber from "lodash/isNumber";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import BaseFoundation from '../base/foundation';
-import { isNumber } from 'lodash-es';
 export default class NotificationFoundation extends BaseFoundation {
   constructor(adapter) {
     super(_Object$assign(_Object$assign({}, NotificationFoundation.defaultAdapter), adapter));
@@ -23,7 +23,7 @@ export default class NotificationFoundation extends BaseFoundation {
     // unit: s
     const duration = this.getProp('duration');
 
-    if (duration && isNumber(duration)) {
+    if (duration && _isNumber(duration)) {
       this._timer = _setTimeout(() => {
         this.close(); // call parent to remove itself
       }, duration * 1000);

package/lib/es/overflowList/foundation.js

@@ -1,3 +1,5 @@
+import _cloneDeep from "lodash/cloneDeep";
+import _get from "lodash/get";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
@@ -6,7 +8,6 @@ import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instan
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import BaseFoundation from '../base/foundation';
 import { strings } from './constants';
-import { get, cloneDeep } from 'lodash-es';
 const Boundary = strings.BOUNDARY_MAP;
 const OverflowDirection = strings.OVERFLOW_DIR;
 
@@ -53,11 +54,13 @@ class OverflowListFoundation extends BaseFoundation {
   }
 
   handleIntersect(entries) {
-    const visibleState = cloneDeep(this.getState('visibleState'));
+    const visibleState = _cloneDeep(this.getState('visibleState'));
+
     const res = {};
 
     _forEachInstanceProperty(entries).call(entries, entry => {
-      const itemKey = get(entry, 'target.dataset.scrollkey');
+      const itemKey = _get(entry, 'target.dataset.scrollkey');
+
       const visible = entry.isIntersecting;
       res[itemKey] = entry;
       visibleState.set(itemKey, visible);

package/lib/es/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/es/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/es/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; // 描边宽度 - 禁用态