@douyinfe/semi-foundation 2.3.0-beta.0 → 2.4.0

package/button/button.scss

@@ -112,21 +112,27 @@ $module: #{$prefix}-button;
     }
     &-borderless {
         background-color: transparent;
+        border: $width-button_borderless-border $color-button_borderless-border-default solid;
         &:not(.#{$module}-disabled):hover {
             background-color: $color-button_borderless-bg-hover;
+            border: $width-button_borderless-border $color-button_borderless-border-hover solid;
         }
         &:not(.#{$module}-disabled):active {
             background-color: $color-button_borderless-bg-active;
+            border: $width-button_borderless-border $color-button_borderless-border-active solid;
         }
     }
 
     &-light {
         background-color: $color-button_light-bg-default;
+        border: $width-button_light-border $color-button_light-border-default solid;
         &:not(.#{$module}-disabled):hover {
             background-color: $color-button_light-bg-hover;
+            border: $width-button_light-border $color-button_light-border-hover solid;
         }
         &:not(.#{$module}-disabled):active {
             background-color: $color-button_light-bg-active;
+            border: $width-button_light-border $color-button_light-border-active solid;
         }
     }
     &-size-small {

package/button/variables.scss

@@ -76,11 +76,19 @@ $color-button_disabled-bg-hover: var(--semi-color-disabled-bg); // 禁用按钮
 $color-button_light-bg-default: var(--semi-color-fill-0); // 浅色按钮背景颜色
 $color-button_light-bg-hover: var(--semi-color-fill-1); // 禁用按钮背景颜色 - 悬浮
 $color-button_light-bg-active: var(--semi-color-fill-2); // 禁用按钮背景颜色 - 按下
+$color-button_light-border-default: transparent; // 浅色按钮描边颜色 
+$color-button_light-border-hover: $color-button_light-border-default; // 浅色按钮描边颜色 - 悬浮
+$color-button_light-border-active: $color-button_light-border-hover; // 浅色按钮描边颜色 - 按下
+$width-button_light-border: 0;  // 浅色按钮描边宽度
 
 // borderless
 $color-button_borderless-text-default: var(--semi-color-primary); // 无背景按钮背景颜色
 $color-button_borderless-bg-hover: var(--semi-color-fill-0); // 无背景按钮背景颜色 - 悬浮
 $color-button_borderless-bg-active: var(--semi-color-fill-1); // 无背景按钮背景颜色 - 按下
+$color-button_borderless-border-default: transparent; // 无背景按钮描边颜色
+$color-button_borderless-border-hover: $color-button_borderless-border-default; // 无背景按钮描边颜色 - 悬浮
+$color-button_borderless-border-active: $color-button_borderless-border-hover; // 无背景按钮描边颜色 - 按下
+$width-button_borderless-border: 0; // 无背景按钮描边宽度
 
 // buttongroup
 
@@ -125,4 +133,4 @@ $height-button_default: $height-control-default; // 按钮高度 - 默认
 
 $width-button-border: $border-thickness;  // 按钮描边宽度
 $radius-button: var(--semi-border-radius-small); // 按钮圆角大小
-$radius-button_group: $radius-button; // 按钮组圆角大小
+$radius-button_group: $radius-button; // 按钮组圆角大小

package/input/textarea.scss

@@ -55,11 +55,7 @@ $module: #{$prefix}-input;
         }
     }
 
-    &-readonly {
-        cursor: default;
-    }
-
-    &-disabled {
+    &-disabled, &-readonly {
         cursor: not-allowed;
         // border: $border-thickness-control $color-input_disabled-border-default solid;
         color: $color-input_disabled-text-default;
@@ -74,6 +70,10 @@ $module: #{$prefix}-input;
         }
     }
 
+    &-readonly {
+        cursor: text;
+    }
+
     &-error {
         background-color: $color-input_danger-bg-default;
         border-color: $color-input_danger-border-default;
@@ -136,12 +136,15 @@ $module: #{$prefix}-input;
     background-color: transparent;
     border: $width-textarea-border solid $color-textarea-border-default;
     vertical-align: bottom;
-
     width: 100%;
     outline: none;
     cursor: text;
     box-sizing: border-box;
     color: $color-input_default-text-default;
+    
+    &:hover {
+        border-color: $color-textarea-border-hover;
+    }
 
     &::placeholder {
         color: $color-input_placeholder-text-default;
@@ -151,7 +154,7 @@ $module: #{$prefix}-input;
         padding-right: $spacing-textarea_withShowClear-paddingRight;
     }
 
-    &-disabled {
+    &-disabled, &-readonly {
         cursor: not-allowed;
         color: $color-input_disabled-text-default;
         background-color: transparent;
@@ -165,10 +168,14 @@ $module: #{$prefix}-input;
         }
     }
 
+    &-readonly {
+        cursor: text;
+    }
+
     &-autosize {
         overflow: hidden;
     }
-    
+
     &-counter {
         @include font-size-small;
         display: flex;

package/input/variables.scss

@@ -100,6 +100,7 @@ $spacing-textarea_counter-paddingLeft: 12px; // 多行文本字数统计左侧
 $width-textarea-border: $border-thickness; // 多行文本描边宽度
 $height-textarea_counter: 24px; // 多行文本字数统计最小高度
 $color-textarea-border-default: transparent; // 多行文本描边颜色
+$color-textarea-border-hover: $color-textarea-border-default; // 多行文本描边颜色 - 悬浮
 
 $color-textarea-icon-default: var(--semi-color-text-2); // 多行文本 clear 图标颜色
 $color-textarea-icon-hover: var(--semi-color-primary-hover); // 多行文本 clear 图标颜色 - 悬浮

package/inputNumber/constants.ts

@@ -10,6 +10,7 @@ const numbers = {
     DEFAULT_SHIFT_STEP: 1,
     DEFAULT_PRESS_TIMEOUT: 250,
     DEFAULT_PRESS_INTERVAL: 0,
+    MOUSE_BUTTON_LEFT: 0, // left mouse button
 };
 
 const strings = {

package/inputNumber/foundation.ts

@@ -4,7 +4,7 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import keyCode from '../utils/keyCode';
 import { numbers } from './constants';
-import { toNumber, toString } from 'lodash';
+import { toNumber, toString, get } from 'lodash';
 import { minus as numberMinus } from '../utils/number';
 
 export interface InputNumberAdapter extends DefaultAdapter {
@@ -286,6 +286,9 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
     }
 
     handleUpClick(event: any) {
+        if (!this._isMouseButtonLeft(event)) {
+            return;
+        }
         this._adapter.setClickUpOrDown(true);
         if (event) {
             event.persist();
@@ -303,6 +306,9 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
     }
 
     handleDownClick(event: any) {
+        if (!this._isMouseButtonLeft(event)) {
+            return;
+        }
         this._adapter.setClickUpOrDown(true);
         if (event) {
             event.persist();
@@ -317,6 +323,14 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
         });
     }
 
+    /**
+     * Whether it is a left mouse button click
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+     */
+    _isMouseButtonLeft(event: any) {
+        return get(event, 'button') === numbers.MOUSE_BUTTON_LEFT;
+    }
+
     _preventDefault(event: any) {
         const keepFocus = this._adapter.getProp('keepFocus');
         if (keepFocus) {

package/lib/cjs/autoComplete/autoComplete.css

@@ -11,6 +11,7 @@
   padding-top: 8px;
   padding-bottom: 8px;
   color: var(--semi-color-text-0);
+  border-radius: 0;
   position: relative;
   display: flex;
   flex-wrap: nowrap;

package/lib/cjs/button/button.css

@@ -124,21 +124,27 @@
 }
 .semi-button-borderless {
   background-color: transparent;
+  border: 0 transparent solid;
 }
 .semi-button-borderless:not(.semi-button-disabled):hover {
   background-color: var(--semi-color-fill-0);
+  border: 0 transparent solid;
 }
 .semi-button-borderless:not(.semi-button-disabled):active {
   background-color: var(--semi-color-fill-1);
+  border: 0 transparent solid;
 }
 .semi-button-light {
   background-color: var(--semi-color-fill-0);
+  border: 0 transparent solid;
 }
 .semi-button-light:not(.semi-button-disabled):hover {
   background-color: var(--semi-color-fill-1);
+  border: 0 transparent solid;
 }
 .semi-button-light:not(.semi-button-disabled):active {
   background-color: var(--semi-color-fill-2);
+  border: 0 transparent solid;
 }
 .semi-button-size-small {
   height: 24px;

package/lib/cjs/button/button.scss

@@ -112,21 +112,27 @@ $module: #{$prefix}-button;
     }
     &-borderless {
         background-color: transparent;
+        border: $width-button_borderless-border $color-button_borderless-border-default solid;
         &:not(.#{$module}-disabled):hover {
             background-color: $color-button_borderless-bg-hover;
+            border: $width-button_borderless-border $color-button_borderless-border-hover solid;
         }
         &:not(.#{$module}-disabled):active {
             background-color: $color-button_borderless-bg-active;
+            border: $width-button_borderless-border $color-button_borderless-border-active solid;
         }
     }
 
     &-light {
         background-color: $color-button_light-bg-default;
+        border: $width-button_light-border $color-button_light-border-default solid;
         &:not(.#{$module}-disabled):hover {
             background-color: $color-button_light-bg-hover;
+            border: $width-button_light-border $color-button_light-border-hover solid;
         }
         &:not(.#{$module}-disabled):active {
             background-color: $color-button_light-bg-active;
+            border: $width-button_light-border $color-button_light-border-active solid;
         }
     }
     &-size-small {

package/lib/cjs/button/variables.scss

@@ -76,11 +76,19 @@ $color-button_disabled-bg-hover: var(--semi-color-disabled-bg); // 禁用按钮
 $color-button_light-bg-default: var(--semi-color-fill-0); // 浅色按钮背景颜色
 $color-button_light-bg-hover: var(--semi-color-fill-1); // 禁用按钮背景颜色 - 悬浮
 $color-button_light-bg-active: var(--semi-color-fill-2); // 禁用按钮背景颜色 - 按下
+$color-button_light-border-default: transparent; // 浅色按钮描边颜色 
+$color-button_light-border-hover: $color-button_light-border-default; // 浅色按钮描边颜色 - 悬浮
+$color-button_light-border-active: $color-button_light-border-hover; // 浅色按钮描边颜色 - 按下
+$width-button_light-border: 0;  // 浅色按钮描边宽度
 
 // borderless
 $color-button_borderless-text-default: var(--semi-color-primary); // 无背景按钮背景颜色
 $color-button_borderless-bg-hover: var(--semi-color-fill-0); // 无背景按钮背景颜色 - 悬浮
 $color-button_borderless-bg-active: var(--semi-color-fill-1); // 无背景按钮背景颜色 - 按下
+$color-button_borderless-border-default: transparent; // 无背景按钮描边颜色
+$color-button_borderless-border-hover: $color-button_borderless-border-default; // 无背景按钮描边颜色 - 悬浮
+$color-button_borderless-border-active: $color-button_borderless-border-hover; // 无背景按钮描边颜色 - 按下
+$width-button_borderless-border: 0; // 无背景按钮描边宽度
 
 // buttongroup
 
@@ -125,4 +133,4 @@ $height-button_default: $height-control-default; // 按钮高度 - 默认
 
 $width-button-border: $border-thickness;  // 按钮描边宽度
 $radius-button: var(--semi-border-radius-small); // 按钮圆角大小
-$radius-button_group: $radius-button; // 按钮组圆角大小
+$radius-button_group: $radius-button; // 按钮组圆角大小

package/lib/cjs/input/textarea.css

@@ -44,20 +44,20 @@
 .semi-input-textarea-wrapper .semi-input-clearbtn-hidden {
   visibility: hidden;
 }
-.semi-input-textarea-wrapper-readonly {
-  cursor: default;
-}
-.semi-input-textarea-wrapper-disabled {
+.semi-input-textarea-wrapper-disabled, .semi-input-textarea-wrapper-readonly {
   cursor: not-allowed;
   color: var(--semi-color-disabled-text);
   background-color: var(--semi-color-disabled-fill);
 }
-.semi-input-textarea-wrapper-disabled:hover {
+.semi-input-textarea-wrapper-disabled:hover, .semi-input-textarea-wrapper-readonly:hover {
   background-color: var(--semi-color-disabled-fill);
 }
-.semi-input-textarea-wrapper-disabled::placeholder {
+.semi-input-textarea-wrapper-disabled::placeholder, .semi-input-textarea-wrapper-readonly::placeholder {
   color: var(--semi-color-disabled-text);
 }
+.semi-input-textarea-wrapper-readonly {
+  cursor: text;
+}
 .semi-input-textarea-wrapper-error {
   background-color: var(--semi-color-danger-light-default);
   border-color: var(--semi-color-danger-light-default);
@@ -108,23 +108,29 @@
   box-sizing: border-box;
   color: var(--semi-color-text-0);
 }
+.semi-input-textarea:hover {
+  border-color: transparent;
+}
 .semi-input-textarea::placeholder {
   color: var(--semi-color-text-2);
 }
 .semi-input-textarea-showClear {
   padding-right: 36px;
 }
-.semi-input-textarea-disabled {
+.semi-input-textarea-disabled, .semi-input-textarea-readonly {
   cursor: not-allowed;
   color: var(--semi-color-disabled-text);
   background-color: transparent;
 }
-.semi-input-textarea-disabled:hover {
+.semi-input-textarea-disabled:hover, .semi-input-textarea-readonly:hover {
   background-color: transparent;
 }
-.semi-input-textarea-disabled::placeholder {
+.semi-input-textarea-disabled::placeholder, .semi-input-textarea-readonly::placeholder {
   color: var(--semi-color-disabled-text);
 }
+.semi-input-textarea-readonly {
+  cursor: text;
+}
 .semi-input-textarea-autosize {
   overflow: hidden;
 }

package/lib/cjs/input/textarea.scss

@@ -55,11 +55,7 @@ $module: #{$prefix}-input;
         }
     }
 
-    &-readonly {
-        cursor: default;
-    }
-
-    &-disabled {
+    &-disabled, &-readonly {
         cursor: not-allowed;
         // border: $border-thickness-control $color-input_disabled-border-default solid;
         color: $color-input_disabled-text-default;
@@ -74,6 +70,10 @@ $module: #{$prefix}-input;
         }
     }
 
+    &-readonly {
+        cursor: text;
+    }
+
     &-error {
         background-color: $color-input_danger-bg-default;
         border-color: $color-input_danger-border-default;
@@ -136,12 +136,15 @@ $module: #{$prefix}-input;
     background-color: transparent;
     border: $width-textarea-border solid $color-textarea-border-default;
     vertical-align: bottom;
-
     width: 100%;
     outline: none;
     cursor: text;
     box-sizing: border-box;
     color: $color-input_default-text-default;
+    
+    &:hover {
+        border-color: $color-textarea-border-hover;
+    }
 
     &::placeholder {
         color: $color-input_placeholder-text-default;
@@ -151,7 +154,7 @@ $module: #{$prefix}-input;
         padding-right: $spacing-textarea_withShowClear-paddingRight;
     }
 
-    &-disabled {
+    &-disabled, &-readonly {
         cursor: not-allowed;
         color: $color-input_disabled-text-default;
         background-color: transparent;
@@ -165,10 +168,14 @@ $module: #{$prefix}-input;
         }
     }
 
+    &-readonly {
+        cursor: text;
+    }
+
     &-autosize {
         overflow: hidden;
     }
-    
+
     &-counter {
         @include font-size-small;
         display: flex;

package/lib/cjs/input/variables.scss

@@ -100,6 +100,7 @@ $spacing-textarea_counter-paddingLeft: 12px; // 多行文本字数统计左侧
 $width-textarea-border: $border-thickness; // 多行文本描边宽度
 $height-textarea_counter: 24px; // 多行文本字数统计最小高度
 $color-textarea-border-default: transparent; // 多行文本描边颜色
+$color-textarea-border-hover: $color-textarea-border-default; // 多行文本描边颜色 - 悬浮
 
 $color-textarea-icon-default: var(--semi-color-text-2); // 多行文本 clear 图标颜色
 $color-textarea-icon-hover: var(--semi-color-primary-hover); // 多行文本 clear 图标颜色 - 悬浮

package/lib/cjs/inputNumber/constants.d.ts

@@ -6,6 +6,7 @@ declare const numbers: {
     DEFAULT_SHIFT_STEP: number;
     DEFAULT_PRESS_TIMEOUT: number;
     DEFAULT_PRESS_INTERVAL: number;
+    MOUSE_BUTTON_LEFT: number;
 };
 declare const strings: {
     SIZE: readonly ["small", "large", "default"];

package/lib/cjs/inputNumber/constants.js

@@ -20,7 +20,8 @@ const numbers = (0, _assign.default)((0, _assign.default)({}, _constants.numbers
   DEFAULT_STEP: 1,
   DEFAULT_SHIFT_STEP: 1,
   DEFAULT_PRESS_TIMEOUT: 250,
-  DEFAULT_PRESS_INTERVAL: 0
+  DEFAULT_PRESS_INTERVAL: 0,
+  MOUSE_BUTTON_LEFT: 0
 });
 exports.numbers = numbers;
 const strings = (0, _assign.default)({}, _constants.strings);

package/lib/cjs/inputNumber/foundation.d.ts

@@ -47,6 +47,11 @@ declare class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
     handleMouseUp(e?: any): void;
     handleUpClick(event: any): void;
     handleDownClick(event: any): void;
+    /**
+     * Whether it is a left mouse button click
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+     */
+    _isMouseButtonLeft(event: any): boolean;
     _preventDefault(event: any): void;
     handleMouseLeave(event: any): void;
     upClick(event: any): void;

package/lib/cjs/inputNumber/foundation.js

@@ -22,6 +22,8 @@ var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-st
 
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
 var _toString2 = _interopRequireDefault(require("lodash/toString"));
 
 var _toNumber2 = _interopRequireDefault(require("lodash/toNumber"));
@@ -315,6 +317,10 @@ class InputNumberFoundation extends _foundation.default {
   }
 
   handleUpClick(event) {
+    if (!this._isMouseButtonLeft(event)) {
+      return;
+    }
+
     this._adapter.setClickUpOrDown(true);
 
     if (event) {
@@ -334,6 +340,10 @@ class InputNumberFoundation extends _foundation.default {
   }
 
   handleDownClick(event) {
+    if (!this._isMouseButtonLeft(event)) {
+      return;
+    }
+
     this._adapter.setClickUpOrDown(true);
 
     if (event) {
@@ -351,6 +361,15 @@ class InputNumberFoundation extends _foundation.default {
       });
     });
   }
+  /**
+   * Whether it is a left mouse button click
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+   */
+
+
+  _isMouseButtonLeft(event) {
+    return (0, _get2.default)(event, 'button') === _constants.numbers.MOUSE_BUTTON_LEFT;
+  }
 
   _preventDefault(event) {
     const keepFocus = this._adapter.getProp('keepFocus');

package/lib/cjs/modal/modal.css

@@ -70,6 +70,7 @@
   padding: 0 0;
   font-size: 14px;
   font-weight: 600;
+  background-color: transparent;
   color: var(--semi-color-text-0);
   border-bottom: 0 solid transparent;
 }
@@ -92,6 +93,7 @@
   text-align: right;
   border-radius: 0 0 5px 5px;
   border-top: 0 solid transparent;
+  background-color: transparent;
 }
 .semi-modal-footer .semi-button {
   margin-left: 12px;

package/lib/cjs/modal/modal.scss

@@ -84,6 +84,7 @@ $module: #{$prefix}-modal;
         padding: $spacing-modal_header-paddingY $spacing-modal_header-paddingX;
         font-size: $font-modal_header-fontSize;
         font-weight: $font-modal_header-fontWeight;
+        background-color: $color-modal_header-bg;
         color: $color-modal_main-text;
         border-bottom: $width-modal_header-border solid $color-modal_header-border;
     }
@@ -112,6 +113,7 @@ $module: #{$prefix}-modal;
         text-align: right;
         border-radius: $radius-modal_footer;
         border-top: $width-modal_footer-border solid $color-modal_footer-border;
+        background-color: $color-modal_footer-bg;
         
         .#{$prefix}-button {
             margin-left: $spacing-modal_footer_button-marginLeft;

package/lib/cjs/modal/variables.scss

@@ -8,6 +8,8 @@ $color-modal_success-icon: var(--semi-color-success); // 模态框成功图标
 $color-modal_danger-icon: var(--semi-color-danger); // 模态框危险图标颜色
 $color-modal_warning-icon: var(--semi-color-warning); // 模态框警告图标颜色
 $color-modal_content-border: var(--semi-color-border); // 模态框描边颜色
+$color-modal_header-bg: transparent;  // 模态框 header 背景填充色
+$color-modal_footer-bg: transparent;  // 模态框 footer 背景填充色
 
 // Spacing
 $spacing-modal-marginY: 80px; // 模态框距容器顶部外边距
@@ -62,8 +64,9 @@ $font-modal_header-fontSize: $font-size-regular; // 模态框 title 字号
 $font-modal_header-fontWeight: $font-weight-bold; // 模态框 title 字重
 
 //border
-$color-modal_header-border:transparent;
-$width-modal_header-border:0;
-$color-modal_footer-border:transparent;
-$width-modal_footer-border:0;
+$color-modal_header-border:transparent;  // 模态框 header 底部描边颜色
+$width-modal_header-border:0; // 模态框 header 底部描边宽度
+$color-modal_footer-border:transparent; // 模态框 footer 顶部描边颜色
+$width-modal_footer-border:0; // 模态框 footer 顶部描边宽度
+
 

package/lib/cjs/notification/notificationListFoundation.js

@@ -26,7 +26,7 @@ class NotificationListFoundation extends _foundation.default {
     // }
 
 
-    this._adapter.updateNotices([...notices, opts]); // return id;
+    this._adapter.updateNotices([opts, ...notices]); // return id;
 
   }
 

package/lib/cjs/scrollList/scrollList.css

@@ -21,6 +21,7 @@
 .semi-scrolllist-header-title {
   padding: 16px 0;
   font-weight: 600;
+  color: var(--semi-color-text-0);
   font-size: 14px;
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;

package/lib/cjs/scrollList/scrollList.scss

@@ -24,6 +24,7 @@ $module: #{$prefix}-scrolllist;
         &-title {
             padding: $spacing-scrollList_header_title-paddingY $spacing-scrollList_header_title-paddingX;
             font-weight: $font-scrollList_header_title-fontWeight;
+            color: $color-scrollList_header-title;
 
             @include font-size-regular;
         }

package/lib/cjs/scrollList/variables.scss

@@ -1,18 +1,19 @@
 // Color
-$color-scrollList-bg: var(--semi-color-bg-3);
-$color-scrollList-border: var(--semi-color-border);
-$color-scrollList_item-bg: transparent;
-$color-scrollList_item-text: var(--semi-color-text-0);
-$color-scrollList_disabled_item-text: var(--semi-color-disabled-text);
-$color-scrollList_item-text-hover: var(--semi-color-fill-1);
-$color-scrollList_item-bg-active: var(--semi-color-fill-2);
-$color-scrollList_selected_item-bg: var(--semi-color-primary-light-default);
-$color-scrollList_selected_item-text: var(--semi-color-text-0);
-$color-scrollList_selected_item-icon: var(--semi-color-text-2);
-$color-scrollList_footer-border: var(--semi-color-border);
+$color-scrollList-bg: var(--semi-color-bg-3); // 滚动列表背景色
+$color-scrollList-border: var(--semi-color-border); // 滚动列表描边颜色
+$color-scrollList_header-title: var(--semi-color-text-0); // 滚动列表标题颜色
+$color-scrollList_item-bg: transparent; // 滚动列表选项背景色
+$color-scrollList_item-text: var(--semi-color-text-0); // 滚动列表选项文字颜色
+$color-scrollList_disabled_item-text: var(--semi-color-disabled-text); // 滚动列表选项背景色 - 禁用
+$color-scrollList_item-text-hover: var(--semi-color-fill-1); // 滚动列表选项文字颜色 - 悬浮
+$color-scrollList_item-bg-active: var(--semi-color-fill-2); // 滚动列表选项文字颜色 - 选中
+$color-scrollList_selected_item-bg: var(--semi-color-primary-light-default); // 滚动列表选中选项背景颜色
+$color-scrollList_selected_item-text: var(--semi-color-text-0); // 滚动列表选中选项文字颜色
+$color-scrollList_selected_item-icon: var(--semi-color-text-2); // 滚动列表选中选项图标颜色
+$color-scrollList_footer-border: var(--semi-color-border); // 滚动列表底部描边颜色
 
 // Width/Height
-$height-scrollList: 300px;
+$height-scrollList: 300px; 
 $height-scrollList_item: 36px;
 $width-scrollList_item-border: $border-thickness-control;
 $width-scrollList_item_sel_svg: 16px;

package/lib/cjs/select/option.css

@@ -11,6 +11,7 @@
   padding-top: 8px;
   padding-bottom: 8px;
   color: var(--semi-color-text-0);
+  border-radius: 0;
   position: relative;
   display: flex;
   flex-wrap: nowrap;

package/lib/cjs/select/option.scss

@@ -13,6 +13,7 @@ $multiple: #{$module}-multiple;
     padding-top: $spacing-select_option-paddingTop;
     padding-bottom: $spacing-select_option-paddingBottom;
     color: $color-select_option_main-text;
+    border-radius: $radius-select_option;
     position: relative;
     display: flex;
     flex-wrap: nowrap;

package/lib/cjs/select/select.css

@@ -11,6 +11,7 @@
   padding-top: 8px;
   padding-bottom: 8px;
   color: var(--semi-color-text-0);
+  border-radius: 0;
   position: relative;
   display: flex;
   flex-wrap: nowrap;
@@ -90,9 +91,11 @@
 }
 .semi-select:hover {
   background-color: var(--semi-color-fill-1);
+  border: 1px solid transparent;
 }
 .semi-select:active {
   background-color: var(--semi-color-fill-2);
+  border: 1px solid var(--semi-color-focus-border);
 }
 .semi-select:focus {
   border: 1px solid var(--semi-color-focus-border);
@@ -372,6 +375,7 @@
 .semi-select-option-list {
   overflow-x: hidden;
   overflow-y: auto;
+  padding: 0 0 0 0;
 }
 .semi-select-option-list-chosen .semi-select-option-icon {
   display: flex;