@douyinfe/semi-foundation 2.4.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

@@ -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;

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/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

@@ -108,6 +108,9 @@
   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);
 }

package/lib/cjs/input/textarea.scss

@@ -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;

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/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/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;

package/lib/cjs/select/select.scss

@@ -24,14 +24,16 @@ $multiple: #{$module}-multiple;
 
     &:hover {
         background-color: $color-select-bg-hover;
+        border: $width-select-border-hover solid $color-select-border-hover;
     }
 
     &:active {
         background-color: $color-select-bg-active;
+        border: $width-select-border-active solid $color-select-border-active;
     }
 
     &:focus {
-        border: $border-thickness-control-focus solid $color-select_default-border-focus;
+        border: $width-select-border-focus solid $color-select-border-focus;
         outline: 0;
     }
 
@@ -383,7 +385,7 @@ $multiple: #{$module}-multiple;
 .#{$module}-option-list {
     overflow-x: hidden;
     overflow-y: auto;
-
+    padding: $spacing-select_option_list-paddingTop $spacing-select_option_list-paddingRight $spacing-select_option_list-paddingBottom $spacing-select_option_list-paddingLeft;
     &-chosen {
         .#{$module}-option-icon {
             display: flex;

package/lib/cjs/select/variables.scss

@@ -3,6 +3,9 @@ $color-select-bg-default: var(--semi-color-fill-0); // 选择器输入框背景
 $color-select-bg-hover: var(--semi-color-fill-1); // 选择器输入框背景色 - 悬停态
 $color-select-bg-active: var(--semi-color-fill-2); // 选择器输入框背景色 - 按下态
 $color-select-border-default: transparent; // 选择器输入框描边颜色
+$color-select-border-hover: $color-select-border-default;  // 选择器输入框描边颜色 - 悬浮
+$color-select-border-active: var(--semi-color-focus-border); // 选择器输入框描边颜色 - 按下态
+$color-select-border-focus: $color-select-border-active;// 选择器输入框描边颜色 - 悬停态
 $color-select_warning-bg-default: var(--semi-color-warning-light-default); // 警示选择器输入框背景色 - 默认态
 $color-select_warning-border-default: var(--semi-color-warning-light-default); // 警示选择器输入框描边颜色 - 默认态
 $color-select_warning-bg-hover: var(--semi-color-warning-light-hover); // 警示选择器输入框背景色 - 悬停态
@@ -56,7 +59,9 @@ $width-select_arrow_empty: 12px; // 选择器输入框下拉箭头为空时（
 $width-select_clear-icon: 32px; // 选择器输入框清空按钮宽度
 $width-select_group_top-border: $border-thickness-control; // 选择器菜单分组标题描边宽度
 $height-select_multiple_content_wrapper-minHeight: $height-select_default - 2; // 多项选择器标签组最小宽度
-
+$width-select-border-hover: $width-select-border;  // 选择器输入框描边宽度 - 悬浮
+$width-select-border-focus: $width-select-border-hover; // 选择器输入框描边宽度 - 按下
+$width-select-border-active: $width-select-border-focus; // 选择器输入框描边宽度 - 选中
 // Spacing
 $spacing-select_option_tick-marginRight: $spacing-tight; // 选择器菜单选中对勾右侧外边距
 $spacing-select_prefix_suffix_text-marginX: $spacing-base-tight; // 选择器输入框前后缀文本水平内边距
@@ -86,9 +91,14 @@ $spacing-select_tag-marginRight: $spacing-extra-tight; // 多项选择器标签
 $spacing-select_tag-marginBottom: $spacing-super-tight - 1; // 多项选择器标签底部外边距
 $spacing-select_selection-marginLeft: $spacing-base-tight; // 选择器内容区左侧外边距
 $spacing-select_insetLabel-marginRight: $spacing-base-tight; // 选择器内嵌标签右侧外边距
+$spacing-select_option_list-paddingTop: 0; // 选择器内容区顶部内边距
+$spacing-select_option_list-paddingRight: 0; // 选择器内容区右侧内边距
+$spacing-select_option_list-paddingBottom: 0; // 选择器内容区底部内边距
+$spacing-select_option_list-paddingLeft: 0; // 选择器内容区左侧内边距
 
 // Radius
 $radius-select: var(--semi-border-radius-small); // 选择器输入框圆角
+$radius-select_option: 0; // 选择器待选项圆角
 
 // Font
 $font-select-fontWeight: $font-weight-regular; // 选择器文本字重

package/lib/cjs/table/variables.scss

@@ -79,8 +79,8 @@ $font-table_base-fontSize: 14px; // 表格默认文本字号
 $border-table_base-borderStyle: solid; // 表格描边样式
 $shadow-table_left: -3px 0 0 0 $color-table_shadow-bg-default; // 表格滚动阴影 - 左侧
 $shadow-table_right: 3px 0 0 0 $color-table_shadow-bg-default; // 表格滚动阴影 - 右侧
-$border-table: #{$width-table_base_border} #{$border-table_base-borderStyle} $color-table-border-default; // 表格默认描边
-$border-table_head-bottom: #{$width-table_header_border} #{$border-table_base-borderStyle} $color-table_th-border-default; // 表头单元格描边 - 底部
+$border-table: $width-table_base_border $border-table_base-borderStyle $color-table-border-default; // 表格默认描边
+$border-table_head-bottom: $width-table_header_border $border-table_base-borderStyle $color-table_th-border-default; // 表头单元格描边 - 底部
 $border-table_resizer: $width-table_resizer_border solid $color-table_resizer-bg-default; // 表格拉伸标识描边
 
 $z-table-fixed: 101!default; // fixed列的zIndex值

package/lib/cjs/tree/treeUtil.d.ts

@@ -72,7 +72,7 @@ export declare function filterTreeData(info: any): {
 };
 export declare function getValueOrKey(data: any): any;
 export declare function normalizeValue(value: any, withObject: boolean): any;
-export declare function updateKeys(keySet: Set<string>, keyEntities: KeyEntities): string[];
+export declare function updateKeys(keySet: Set<string> | string[], keyEntities: KeyEntities): string[];
 export declare function calcDisabledKeys(keyEntities: KeyEntities): Set<string>;
 export declare function calcDropRelativePosition(event: any, treeNode: any): 1 | -1 | 0;
 export declare function getDragNodesKeys(key: string, keyEntities: KeyEntities): string[];

package/lib/cjs/treeSelect/treeSelect.css

@@ -17,6 +17,7 @@
 }
 .semi-tree-select:hover {
   background-color: var(--semi-color-fill-1);
+  border: 1px solid inherit;
 }
 .semi-tree-select-focus {
   border: 1px solid var(--semi-color-focus-border);

package/lib/cjs/treeSelect/treeSelect.scss

@@ -18,6 +18,7 @@ $module: #{$prefix}-tree-select;
 
     &:hover {
         background-color: $color-treeSelect_default-bg-hover;
+        border: $width-treeSelect_hover-border solid $color-treeSelect_default-border-hover;
     }
 
     &-focus {
@@ -329,4 +330,4 @@ $module: #{$prefix}-tree-select;
     }
 }
 
-@import './rtl.scss';
+@import './rtl.scss';

package/lib/cjs/treeSelect/variables.scss

@@ -6,6 +6,7 @@ $color-treeSelect_default-icon-hover: var(--semi-color-primary-hover); // 树选
 $color-treeSelect_default-icon-active: var(--semi-color-primary-active); // 树选择器选择框清空按钮颜色 - 按下
 $color-treeSelect_default-bg-hover: var(--semi-color-fill-1); // 树选择器选择框背景颜色 - 悬停
 
+$color-treeSelect_default-border-hover: inherit; // 树选择器选择框描边颜色 - 悬浮
 $color-treeSelect_default-border-focus: var(--semi-color-focus-border);// 树选择器选择框描边颜色 - 选中
 
 $color-treeSelect_search-border-default: var(--semi-color-fill-0); // 树选择器菜单搜索框描边颜色 - 默认
@@ -46,7 +47,8 @@ $radius-treeSelect: var(--semi-border-radius-small); // 树选择器圆角
 $width-treeSelect-border: 1px; // 树选择器描边宽度
 $width-treeSelect_search_wrapper-border: 1px; // 树选择器搜索框描边宽度
 
-$width-treeSelect_focus-border: $border-thickness-control-focus; // 树选择器选择框描边宽度
+$width-treeSelect_hover-border: $border-thickness-control-focus; // 树选择器选择框描边宽度 - 悬浮
+$width-treeSelect_focus-border: $width-treeSelect_hover-border; // 树选择器选择框描边宽度 - 选中
 
 $width-treeSelect_default: 80px; // 树选择器最小宽度
 $height-treeSelect_default: $height-control-default; // 树选择器选择器高度 - 默认

package/lib/es/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/es/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/es/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/es/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/es/input/textarea.css

@@ -108,6 +108,9 @@
   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);
 }

package/lib/es/input/textarea.scss

@@ -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;

package/lib/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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;

package/lib/es/select/select.scss

@@ -24,14 +24,16 @@ $multiple: #{$module}-multiple;
 
     &:hover {
         background-color: $color-select-bg-hover;
+        border: $width-select-border-hover solid $color-select-border-hover;
     }
 
     &:active {
         background-color: $color-select-bg-active;
+        border: $width-select-border-active solid $color-select-border-active;
     }
 
     &:focus {
-        border: $border-thickness-control-focus solid $color-select_default-border-focus;
+        border: $width-select-border-focus solid $color-select-border-focus;
         outline: 0;
     }
 
@@ -383,7 +385,7 @@ $multiple: #{$module}-multiple;
 .#{$module}-option-list {
     overflow-x: hidden;
     overflow-y: auto;
-
+    padding: $spacing-select_option_list-paddingTop $spacing-select_option_list-paddingRight $spacing-select_option_list-paddingBottom $spacing-select_option_list-paddingLeft;
     &-chosen {
         .#{$module}-option-icon {
             display: flex;

package/lib/es/select/variables.scss

@@ -3,6 +3,9 @@ $color-select-bg-default: var(--semi-color-fill-0); // 选择器输入框背景
 $color-select-bg-hover: var(--semi-color-fill-1); // 选择器输入框背景色 - 悬停态
 $color-select-bg-active: var(--semi-color-fill-2); // 选择器输入框背景色 - 按下态
 $color-select-border-default: transparent; // 选择器输入框描边颜色
+$color-select-border-hover: $color-select-border-default;  // 选择器输入框描边颜色 - 悬浮
+$color-select-border-active: var(--semi-color-focus-border); // 选择器输入框描边颜色 - 按下态
+$color-select-border-focus: $color-select-border-active;// 选择器输入框描边颜色 - 悬停态
 $color-select_warning-bg-default: var(--semi-color-warning-light-default); // 警示选择器输入框背景色 - 默认态
 $color-select_warning-border-default: var(--semi-color-warning-light-default); // 警示选择器输入框描边颜色 - 默认态
 $color-select_warning-bg-hover: var(--semi-color-warning-light-hover); // 警示选择器输入框背景色 - 悬停态
@@ -56,7 +59,9 @@ $width-select_arrow_empty: 12px; // 选择器输入框下拉箭头为空时（
 $width-select_clear-icon: 32px; // 选择器输入框清空按钮宽度
 $width-select_group_top-border: $border-thickness-control; // 选择器菜单分组标题描边宽度
 $height-select_multiple_content_wrapper-minHeight: $height-select_default - 2; // 多项选择器标签组最小宽度
-
+$width-select-border-hover: $width-select-border;  // 选择器输入框描边宽度 - 悬浮
+$width-select-border-focus: $width-select-border-hover; // 选择器输入框描边宽度 - 按下
+$width-select-border-active: $width-select-border-focus; // 选择器输入框描边宽度 - 选中
 // Spacing
 $spacing-select_option_tick-marginRight: $spacing-tight; // 选择器菜单选中对勾右侧外边距
 $spacing-select_prefix_suffix_text-marginX: $spacing-base-tight; // 选择器输入框前后缀文本水平内边距
@@ -86,9 +91,14 @@ $spacing-select_tag-marginRight: $spacing-extra-tight; // 多项选择器标签
 $spacing-select_tag-marginBottom: $spacing-super-tight - 1; // 多项选择器标签底部外边距
 $spacing-select_selection-marginLeft: $spacing-base-tight; // 选择器内容区左侧外边距
 $spacing-select_insetLabel-marginRight: $spacing-base-tight; // 选择器内嵌标签右侧外边距
+$spacing-select_option_list-paddingTop: 0; // 选择器内容区顶部内边距
+$spacing-select_option_list-paddingRight: 0; // 选择器内容区右侧内边距
+$spacing-select_option_list-paddingBottom: 0; // 选择器内容区底部内边距
+$spacing-select_option_list-paddingLeft: 0; // 选择器内容区左侧内边距
 
 // Radius
 $radius-select: var(--semi-border-radius-small); // 选择器输入框圆角
+$radius-select_option: 0; // 选择器待选项圆角
 
 // Font
 $font-select-fontWeight: $font-weight-regular; // 选择器文本字重

package/lib/es/table/variables.scss

@@ -79,8 +79,8 @@ $font-table_base-fontSize: 14px; // 表格默认文本字号
 $border-table_base-borderStyle: solid; // 表格描边样式
 $shadow-table_left: -3px 0 0 0 $color-table_shadow-bg-default; // 表格滚动阴影 - 左侧
 $shadow-table_right: 3px 0 0 0 $color-table_shadow-bg-default; // 表格滚动阴影 - 右侧
-$border-table: #{$width-table_base_border} #{$border-table_base-borderStyle} $color-table-border-default; // 表格默认描边
-$border-table_head-bottom: #{$width-table_header_border} #{$border-table_base-borderStyle} $color-table_th-border-default; // 表头单元格描边 - 底部
+$border-table: $width-table_base_border $border-table_base-borderStyle $color-table-border-default; // 表格默认描边
+$border-table_head-bottom: $width-table_header_border $border-table_base-borderStyle $color-table_th-border-default; // 表头单元格描边 - 底部
 $border-table_resizer: $width-table_resizer_border solid $color-table_resizer-bg-default; // 表格拉伸标识描边
 
 $z-table-fixed: 101!default; // fixed列的zIndex值

package/lib/es/tree/treeUtil.d.ts

@@ -72,7 +72,7 @@ export declare function filterTreeData(info: any): {
 };
 export declare function getValueOrKey(data: any): any;
 export declare function normalizeValue(value: any, withObject: boolean): any;
-export declare function updateKeys(keySet: Set<string>, keyEntities: KeyEntities): string[];
+export declare function updateKeys(keySet: Set<string> | string[], keyEntities: KeyEntities): string[];
 export declare function calcDisabledKeys(keyEntities: KeyEntities): Set<string>;
 export declare function calcDropRelativePosition(event: any, treeNode: any): 1 | -1 | 0;
 export declare function getDragNodesKeys(key: string, keyEntities: KeyEntities): string[];

package/lib/es/treeSelect/treeSelect.css

@@ -17,6 +17,7 @@
 }
 .semi-tree-select:hover {
   background-color: var(--semi-color-fill-1);
+  border: 1px solid inherit;
 }
 .semi-tree-select-focus {
   border: 1px solid var(--semi-color-focus-border);

package/lib/es/treeSelect/treeSelect.scss

@@ -18,6 +18,7 @@ $module: #{$prefix}-tree-select;
 
     &:hover {
         background-color: $color-treeSelect_default-bg-hover;
+        border: $width-treeSelect_hover-border solid $color-treeSelect_default-border-hover;
     }
 
     &-focus {
@@ -329,4 +330,4 @@ $module: #{$prefix}-tree-select;
     }
 }
 
-@import './rtl.scss';
+@import './rtl.scss';

package/lib/es/treeSelect/variables.scss

@@ -6,6 +6,7 @@ $color-treeSelect_default-icon-hover: var(--semi-color-primary-hover); // 树选
 $color-treeSelect_default-icon-active: var(--semi-color-primary-active); // 树选择器选择框清空按钮颜色 - 按下
 $color-treeSelect_default-bg-hover: var(--semi-color-fill-1); // 树选择器选择框背景颜色 - 悬停
 
+$color-treeSelect_default-border-hover: inherit; // 树选择器选择框描边颜色 - 悬浮
 $color-treeSelect_default-border-focus: var(--semi-color-focus-border);// 树选择器选择框描边颜色 - 选中
 
 $color-treeSelect_search-border-default: var(--semi-color-fill-0); // 树选择器菜单搜索框描边颜色 - 默认
@@ -46,7 +47,8 @@ $radius-treeSelect: var(--semi-border-radius-small); // 树选择器圆角
 $width-treeSelect-border: 1px; // 树选择器描边宽度
 $width-treeSelect_search_wrapper-border: 1px; // 树选择器搜索框描边宽度
 
-$width-treeSelect_focus-border: $border-thickness-control-focus; // 树选择器选择框描边宽度
+$width-treeSelect_hover-border: $border-thickness-control-focus; // 树选择器选择框描边宽度 - 悬浮
+$width-treeSelect_focus-border: $width-treeSelect_hover-border; // 树选择器选择框描边宽度 - 选中
 
 $width-treeSelect_default: 80px; // 树选择器最小宽度
 $height-treeSelect_default: $height-control-default; // 树选择器选择器高度 - 默认

package/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/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.4.0-beta.0",
+    "version": "2.4.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -8,7 +8,7 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.4.0-beta.0",
+        "@douyinfe/semi-animation": "2.4.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.9.0",
@@ -24,7 +24,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "ebf8a78f5152f9733af771cd567f042eccb8c4b9",
+    "gitHead": "d902a6f731475dea585d63907aee06ebe1153419",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",

package/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/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/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/select/select.scss

@@ -24,14 +24,16 @@ $multiple: #{$module}-multiple;
 
     &:hover {
         background-color: $color-select-bg-hover;
+        border: $width-select-border-hover solid $color-select-border-hover;
     }
 
     &:active {
         background-color: $color-select-bg-active;
+        border: $width-select-border-active solid $color-select-border-active;
     }
 
     &:focus {
-        border: $border-thickness-control-focus solid $color-select_default-border-focus;
+        border: $width-select-border-focus solid $color-select-border-focus;
         outline: 0;
     }
 
@@ -383,7 +385,7 @@ $multiple: #{$module}-multiple;
 .#{$module}-option-list {
     overflow-x: hidden;
     overflow-y: auto;
-
+    padding: $spacing-select_option_list-paddingTop $spacing-select_option_list-paddingRight $spacing-select_option_list-paddingBottom $spacing-select_option_list-paddingLeft;
     &-chosen {
         .#{$module}-option-icon {
             display: flex;

package/select/variables.scss

@@ -3,6 +3,9 @@ $color-select-bg-default: var(--semi-color-fill-0); // 选择器输入框背景
 $color-select-bg-hover: var(--semi-color-fill-1); // 选择器输入框背景色 - 悬停态
 $color-select-bg-active: var(--semi-color-fill-2); // 选择器输入框背景色 - 按下态
 $color-select-border-default: transparent; // 选择器输入框描边颜色
+$color-select-border-hover: $color-select-border-default;  // 选择器输入框描边颜色 - 悬浮
+$color-select-border-active: var(--semi-color-focus-border); // 选择器输入框描边颜色 - 按下态
+$color-select-border-focus: $color-select-border-active;// 选择器输入框描边颜色 - 悬停态
 $color-select_warning-bg-default: var(--semi-color-warning-light-default); // 警示选择器输入框背景色 - 默认态
 $color-select_warning-border-default: var(--semi-color-warning-light-default); // 警示选择器输入框描边颜色 - 默认态
 $color-select_warning-bg-hover: var(--semi-color-warning-light-hover); // 警示选择器输入框背景色 - 悬停态
@@ -56,7 +59,9 @@ $width-select_arrow_empty: 12px; // 选择器输入框下拉箭头为空时（
 $width-select_clear-icon: 32px; // 选择器输入框清空按钮宽度
 $width-select_group_top-border: $border-thickness-control; // 选择器菜单分组标题描边宽度
 $height-select_multiple_content_wrapper-minHeight: $height-select_default - 2; // 多项选择器标签组最小宽度
-
+$width-select-border-hover: $width-select-border;  // 选择器输入框描边宽度 - 悬浮
+$width-select-border-focus: $width-select-border-hover; // 选择器输入框描边宽度 - 按下
+$width-select-border-active: $width-select-border-focus; // 选择器输入框描边宽度 - 选中
 // Spacing
 $spacing-select_option_tick-marginRight: $spacing-tight; // 选择器菜单选中对勾右侧外边距
 $spacing-select_prefix_suffix_text-marginX: $spacing-base-tight; // 选择器输入框前后缀文本水平内边距
@@ -86,9 +91,14 @@ $spacing-select_tag-marginRight: $spacing-extra-tight; // 多项选择器标签
 $spacing-select_tag-marginBottom: $spacing-super-tight - 1; // 多项选择器标签底部外边距
 $spacing-select_selection-marginLeft: $spacing-base-tight; // 选择器内容区左侧外边距
 $spacing-select_insetLabel-marginRight: $spacing-base-tight; // 选择器内嵌标签右侧外边距
+$spacing-select_option_list-paddingTop: 0; // 选择器内容区顶部内边距
+$spacing-select_option_list-paddingRight: 0; // 选择器内容区右侧内边距
+$spacing-select_option_list-paddingBottom: 0; // 选择器内容区底部内边距
+$spacing-select_option_list-paddingLeft: 0; // 选择器内容区左侧内边距
 
 // Radius
 $radius-select: var(--semi-border-radius-small); // 选择器输入框圆角
+$radius-select_option: 0; // 选择器待选项圆角
 
 // Font
 $font-select-fontWeight: $font-weight-regular; // 选择器文本字重

package/table/variables.scss

@@ -79,8 +79,8 @@ $font-table_base-fontSize: 14px; // 表格默认文本字号
 $border-table_base-borderStyle: solid; // 表格描边样式
 $shadow-table_left: -3px 0 0 0 $color-table_shadow-bg-default; // 表格滚动阴影 - 左侧
 $shadow-table_right: 3px 0 0 0 $color-table_shadow-bg-default; // 表格滚动阴影 - 右侧
-$border-table: #{$width-table_base_border} #{$border-table_base-borderStyle} $color-table-border-default; // 表格默认描边
-$border-table_head-bottom: #{$width-table_header_border} #{$border-table_base-borderStyle} $color-table_th-border-default; // 表头单元格描边 - 底部
+$border-table: $width-table_base_border $border-table_base-borderStyle $color-table-border-default; // 表格默认描边
+$border-table_head-bottom: $width-table_header_border $border-table_base-borderStyle $color-table_th-border-default; // 表头单元格描边 - 底部
 $border-table_resizer: $width-table_resizer_border solid $color-table_resizer-bg-default; // 表格拉伸标识描边
 
 $z-table-fixed: 101!default; // fixed列的zIndex值

package/tree/treeUtil.ts

@@ -601,7 +601,7 @@ export function normalizeValue(value: any, withObject: boolean) {
     }
 }
 
-export function updateKeys(keySet: Set<string>, keyEntities: KeyEntities) {
+export function updateKeys(keySet: Set<string> | string[], keyEntities: KeyEntities) {
     const keyArr = [...keySet];
     return keyArr.filter(key => key in keyEntities);
 }

package/treeSelect/treeSelect.scss

@@ -18,6 +18,7 @@ $module: #{$prefix}-tree-select;
 
     &:hover {
         background-color: $color-treeSelect_default-bg-hover;
+        border: $width-treeSelect_hover-border solid $color-treeSelect_default-border-hover;
     }
 
     &-focus {
@@ -329,4 +330,4 @@ $module: #{$prefix}-tree-select;
     }
 }
 
-@import './rtl.scss';
+@import './rtl.scss';

package/treeSelect/variables.scss

@@ -6,6 +6,7 @@ $color-treeSelect_default-icon-hover: var(--semi-color-primary-hover); // 树选
 $color-treeSelect_default-icon-active: var(--semi-color-primary-active); // 树选择器选择框清空按钮颜色 - 按下
 $color-treeSelect_default-bg-hover: var(--semi-color-fill-1); // 树选择器选择框背景颜色 - 悬停
 
+$color-treeSelect_default-border-hover: inherit; // 树选择器选择框描边颜色 - 悬浮
 $color-treeSelect_default-border-focus: var(--semi-color-focus-border);// 树选择器选择框描边颜色 - 选中
 
 $color-treeSelect_search-border-default: var(--semi-color-fill-0); // 树选择器菜单搜索框描边颜色 - 默认
@@ -46,7 +47,8 @@ $radius-treeSelect: var(--semi-border-radius-small); // 树选择器圆角
 $width-treeSelect-border: 1px; // 树选择器描边宽度
 $width-treeSelect_search_wrapper-border: 1px; // 树选择器搜索框描边宽度
 
-$width-treeSelect_focus-border: $border-thickness-control-focus; // 树选择器选择框描边宽度
+$width-treeSelect_hover-border: $border-thickness-control-focus; // 树选择器选择框描边宽度 - 悬浮
+$width-treeSelect_focus-border: $width-treeSelect_hover-border; // 树选择器选择框描边宽度 - 选中
 
 $width-treeSelect_default: 80px; // 树选择器最小宽度
 $height-treeSelect_default: $height-control-default; // 树选择器选择器高度 - 默认