@douyinfe/semi-foundation 2.27.0-alpha.2 → 2.27.0

package/breadcrumb/breadcrumb.scss

@@ -15,10 +15,12 @@ $module: #{$prefix}-breadcrumb;
 
         &-loose {
             @include font-size-regular;
+            font-size: $font-breadcrumb_loose-fontSize;
         }
 
         &-compact {
             @include font-size-small;
+            font-size: $font-breadcrumb_compact-fontSize;
         }
     }
 

package/breadcrumb/variables.scss

@@ -17,3 +17,7 @@ $color-breadcrumb-restItem-text-default: var(--semi-color-text-2); // 面包屑
 
 $font-breadcrumb_default-fontWeight: $font-weight-regular; // 面包屑文字字重 - 未选中
 $font-breadcrumb_active-fontWeight: $font-weight-bold; // 面包屑文字字重 - 选中
+
+
+$font-breadcrumb_compact-fontSize:$font-size-small; // 面包屑文字大小 - 紧凑
+$font-breadcrumb_loose-fontSize:$font-size-regular; // 面包屑文字大小 - 宽松

package/datePicker/datePicker.scss

@@ -859,6 +859,17 @@ $module-list: #{$prefix}-scrolllist;
             height: $height-datepicker_range_input-default;
             color: $color-datepicker_range_input-text-default;
             background-color: $color-datepicker_range_input-bg-default;
+            border: $width-datepicker_range_trigger-border solid $color-datepicker_range_trigger-border;
+
+            &:hover{
+                border-color: $color-datepicker_range_trigger-border-hover
+            }
+
+            &:active{
+                border-color: $color-datepicker_range_trigger-border-active ;
+            }
+
+
 
             &-wrapper {
                 box-sizing: border-box;

package/datePicker/variables.scss

@@ -34,6 +34,7 @@ $width-datepicker_insetInput_month_type_wrapper: 204px; // 月份类型内嵌输
 $height-datepicker_insetInput_separator: 32px;
 $height-datepicker_month_grid_yearType_insetInput: 317px;
 $height-datepicker_month_grid_timeType_insetInput: 317px;
+$width-datepicker_range_trigger-border: 0px; //  触发器边框宽度
 
 // Spacing
 $spacing-datepicker_day-marginX: ($width-datepicker_day - $width-datepicker_day_main) * 0.5; // 日期格子水平外边距
@@ -142,6 +143,11 @@ $color-datepicker_range_input_inputWrapper-bg-focus: var(--semi-color-fill-1);
 $color-datepicker_range_input_separator-text-active: var(--semi-color-text-0);
 $color-datepicker_day_main-border: var(--semi-color-primary-active);
 $color-datepicker_insetInput_separator: var(--semi-color-text-3);
+$color-datepicker_range_trigger-border: transparent; // 范围日期选择模式触发器边框颜色
+$color-datepicker_range_trigger-border-hover: transparent; // 范围日期选择模式触发器边框颜色 - 悬浮
+$color-datepicker_range_trigger-border-active: transparent; // 范围日期选择模式触发器边框颜色 - 激活
+
+
 
 // Font
 $font-datepicker_range_input_prefix_suffix_clearbtn-fontWeight: 600;

package/descriptions/descriptions.scss

@@ -110,10 +110,12 @@ $module: #{$prefix}-descriptions;
             .#{$module}-key {
                 @include font-size-small;
                 padding-bottom: 0;
+                font-size: $font-descriptions_key_small-fontSize;
             }
 
             .#{$module}-value {
                 @include font-size-header-6;
+                font-size: $font-descriptions_value_small-fontSize;
             }
         }
 
@@ -124,10 +126,12 @@ $module: #{$prefix}-descriptions;
 
             & .#{$module}-key {
                 padding-bottom: $spacing-descriptions_key_medium-paddingBottom;
+                font-size: $font-descriptions_key_medium-fontSize;
             }
 
             & .#{$module}-value {
                 @include font-size-header-4;
+                font-size: $font-descriptions_value_medium-fontSize;
             }
         }
 
@@ -138,10 +142,12 @@ $module: #{$prefix}-descriptions;
 
             & .#{$module}-key {
                 padding-bottom: $spacing-descriptions_key_large-paddingBottom;
+                font-size: $font-descriptions_key_large-fontSize;
             }
 
             & .#{$module}-value {
                 @include font-size-header-2;
+                font-size: $font-descriptions_value_large-fontSize;
             }
         }
     }

package/descriptions/variables.scss

@@ -13,3 +13,13 @@ $color-descriptions_value-text-default: var(--semi-color-text-0); // value 文
 
 $spacing-descriptions_value_plain-paddingLeft: 8px; // 普通显示 plain 模式下 value 左侧内边距
 $spacing-descriptions_item_double-padding: 0; // 双行显示右侧 item 内边距
+
+
+$font-descriptions_key_small-fontSize:$font-size-small; // 双行显示 key 文字大小 - 小尺寸
+$font-descriptions_value_small-fontSize:$font-size-header-6; // 双行显示 value 文字大小 - 小尺寸
+
+$font-descriptions_key_medium-fontSize:$font-size-regular; // 双行显示 key 文字大小 - 小尺寸
+$font-descriptions_value_medium-fontSize:$font-size-header-4; // 双行显示 value 文字大小 - 小尺寸
+
+$font-descriptions_key_large-fontSize:$font-size-regular; // 双行显示 key 文字大小 - 小尺寸
+$font-descriptions_value_large-fontSize:$font-size-header-2; // 双行显示 value 文字大小 - 小尺寸

package/form/form.scss

@@ -92,6 +92,7 @@ $rating: #{$prefix}-rating;
         font-weight: $font-form_label-fontWeight;
         color: $color-form_label-text-default;
         margin-bottom: $spacing-form_label-marginBottom;
+        margin-top: $spacing-form_label-marginTop;
         padding-right: $spacing-form_label-paddingRight;
         display: inline-block;
         vertical-align: middle;
@@ -288,8 +289,10 @@ $rating: #{$prefix}-rating;
         font-weight: 600;
         width: 100%;
         padding-bottom: $spacing-form_section_text-paddingBottom;
+        padding-top: $spacing-form_section_text-paddingTop;
         border-bottom: $width-form_section-border solid $color-form_section-border-default;
         margin-bottom: $spacing-form_section_text-marginBottom;
+        margin-top: $spacing-form_section_text-marginTop;
         color: $color-form_section-text-default;
     }
 

package/form/variables.scss

@@ -10,6 +10,7 @@ $spacing-form_field_group_vertical-paddingBottom: $spacing-base-tight; // 垂直
 $spacing-form_label-paddingRight: $spacing-base; // 表单项标签右侧边距（水平布局）
 $spacing-form_label-paddingTop: ($height-control-default - 20px) * 0.5; // 表单项标签顶部内边距（水平布局）
 $spacing-form_label-marginBottom: $spacing-extra-tight; // 表单项标签底部外边距
+$spacing-form_label-marginTop: 0px; // 表单项标签顶部外边距
 $spacing-form_label_extra-marginLeft: $spacing-extra-tight; // 表单项标签额外信息左侧边距
 $spacing-form_label_required-marginLeft: $spacing-extra-tight; // 表单项标签必填标志左侧边距
 $spacing-form_label_posLeft-marginRight: 0; // 表单项左侧标签右侧外边距
@@ -47,4 +48,6 @@ $width-form_section-border: $border-thickness-control; // 表单分组标题底
 $spacing-form_section-marginTop: $spacing-super-loose - $spacing-base-tight; // 表单分组顶部内边距
 $spacing-form_section_text-paddingBottom: $spacing-tight; // 表单分组标题底部内边距
 $spacing-form_section_text-marginBottom: $spacing-extra-tight; // 表单分组标题底部外边距
+$spacing-form_section_text-paddingTop: 0px; // 表单分组标题顶部内边距
+$spacing-form_section_text-marginTop: 0px; // 表单分组标题顶部外边距
 

package/lib/cjs/breadcrumb/breadcrumb.css

@@ -12,11 +12,13 @@
   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;
+  font-size: 14px;
 }
 .semi-breadcrumb-wrapper-compact {
   font-size: 12px;
   line-height: 16px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 12px;
 }
 .semi-breadcrumb-item-wrap {
   display: inline-flex;

package/lib/cjs/breadcrumb/breadcrumb.scss

@@ -15,10 +15,12 @@ $module: #{$prefix}-breadcrumb;
 
         &-loose {
             @include font-size-regular;
+            font-size: $font-breadcrumb_loose-fontSize;
         }
 
         &-compact {
             @include font-size-small;
+            font-size: $font-breadcrumb_compact-fontSize;
         }
     }
 

package/lib/cjs/breadcrumb/variables.scss

@@ -17,3 +17,7 @@ $color-breadcrumb-restItem-text-default: var(--semi-color-text-2); // 面包屑
 
 $font-breadcrumb_default-fontWeight: $font-weight-regular; // 面包屑文字字重 - 未选中
 $font-breadcrumb_active-fontWeight: $font-weight-bold; // 面包屑文字字重 - 选中
+
+
+$font-breadcrumb_compact-fontSize:$font-size-small; // 面包屑文字大小 - 紧凑
+$font-breadcrumb_loose-fontSize:$font-size-regular; // 面包屑文字大小 - 宽松

package/lib/cjs/datePicker/datePicker.css

@@ -577,6 +577,13 @@
   height: 32px;
   color: var(--semi-color-text-2);
   background-color: var(--semi-color-fill-0);
+  border: 0px solid transparent;
+}
+.semi-datepicker-range-input:hover {
+  border-color: transparent;
+}
+.semi-datepicker-range-input:active {
+  border-color: transparent;
 }
 .semi-datepicker-range-input-wrapper {
   box-sizing: border-box;

package/lib/cjs/datePicker/datePicker.scss

@@ -859,6 +859,17 @@ $module-list: #{$prefix}-scrolllist;
             height: $height-datepicker_range_input-default;
             color: $color-datepicker_range_input-text-default;
             background-color: $color-datepicker_range_input-bg-default;
+            border: $width-datepicker_range_trigger-border solid $color-datepicker_range_trigger-border;
+
+            &:hover{
+                border-color: $color-datepicker_range_trigger-border-hover
+            }
+
+            &:active{
+                border-color: $color-datepicker_range_trigger-border-active ;
+            }
+
+
 
             &-wrapper {
                 box-sizing: border-box;

package/lib/cjs/datePicker/variables.scss

@@ -34,6 +34,7 @@ $width-datepicker_insetInput_month_type_wrapper: 204px; // 月份类型内嵌输
 $height-datepicker_insetInput_separator: 32px;
 $height-datepicker_month_grid_yearType_insetInput: 317px;
 $height-datepicker_month_grid_timeType_insetInput: 317px;
+$width-datepicker_range_trigger-border: 0px; //  触发器边框宽度
 
 // Spacing
 $spacing-datepicker_day-marginX: ($width-datepicker_day - $width-datepicker_day_main) * 0.5; // 日期格子水平外边距
@@ -142,6 +143,11 @@ $color-datepicker_range_input_inputWrapper-bg-focus: var(--semi-color-fill-1);
 $color-datepicker_range_input_separator-text-active: var(--semi-color-text-0);
 $color-datepicker_day_main-border: var(--semi-color-primary-active);
 $color-datepicker_insetInput_separator: var(--semi-color-text-3);
+$color-datepicker_range_trigger-border: transparent; // 范围日期选择模式触发器边框颜色
+$color-datepicker_range_trigger-border-hover: transparent; // 范围日期选择模式触发器边框颜色 - 悬浮
+$color-datepicker_range_trigger-border-active: transparent; // 范围日期选择模式触发器边框颜色 - 激活
+
+
 
 // Font
 $font-datepicker_range_input_prefix_suffix_clearbtn-fontWeight: 600;

package/lib/cjs/descriptions/descriptions.css

@@ -86,33 +86,39 @@
   line-height: 16px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   padding-bottom: 0;
+  font-size: 12px;
 }
 .semi-descriptions-double-small .semi-descriptions-value {
   font-size: 16px;
   line-height: 22px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 16px;
 }
 .semi-descriptions-double-medium .semi-descriptions-item {
   padding-right: 60px;
 }
 .semi-descriptions-double-medium .semi-descriptions-key {
   padding-bottom: 4px;
+  font-size: 14px;
 }
 .semi-descriptions-double-medium .semi-descriptions-value {
   font-size: 20px;
   line-height: 28px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 20px;
 }
 .semi-descriptions-double-large .semi-descriptions-item {
   padding-right: 80px;
 }
 .semi-descriptions-double-large .semi-descriptions-key {
   padding-bottom: 4px;
+  font-size: 14px;
 }
 .semi-descriptions-double-large .semi-descriptions-value {
   font-size: 28px;
   line-height: 40px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 28px;
 }
 
 .semi-rtl .semi-descriptions,

package/lib/cjs/descriptions/descriptions.scss

@@ -110,10 +110,12 @@ $module: #{$prefix}-descriptions;
             .#{$module}-key {
                 @include font-size-small;
                 padding-bottom: 0;
+                font-size: $font-descriptions_key_small-fontSize;
             }
 
             .#{$module}-value {
                 @include font-size-header-6;
+                font-size: $font-descriptions_value_small-fontSize;
             }
         }
 
@@ -124,10 +126,12 @@ $module: #{$prefix}-descriptions;
 
             & .#{$module}-key {
                 padding-bottom: $spacing-descriptions_key_medium-paddingBottom;
+                font-size: $font-descriptions_key_medium-fontSize;
             }
 
             & .#{$module}-value {
                 @include font-size-header-4;
+                font-size: $font-descriptions_value_medium-fontSize;
             }
         }
 
@@ -138,10 +142,12 @@ $module: #{$prefix}-descriptions;
 
             & .#{$module}-key {
                 padding-bottom: $spacing-descriptions_key_large-paddingBottom;
+                font-size: $font-descriptions_key_large-fontSize;
             }
 
             & .#{$module}-value {
                 @include font-size-header-2;
+                font-size: $font-descriptions_value_large-fontSize;
             }
         }
     }

package/lib/cjs/descriptions/variables.scss

@@ -13,3 +13,13 @@ $color-descriptions_value-text-default: var(--semi-color-text-0); // value 文
 
 $spacing-descriptions_value_plain-paddingLeft: 8px; // 普通显示 plain 模式下 value 左侧内边距
 $spacing-descriptions_item_double-padding: 0; // 双行显示右侧 item 内边距
+
+
+$font-descriptions_key_small-fontSize:$font-size-small; // 双行显示 key 文字大小 - 小尺寸
+$font-descriptions_value_small-fontSize:$font-size-header-6; // 双行显示 value 文字大小 - 小尺寸
+
+$font-descriptions_key_medium-fontSize:$font-size-regular; // 双行显示 key 文字大小 - 小尺寸
+$font-descriptions_value_medium-fontSize:$font-size-header-4; // 双行显示 value 文字大小 - 小尺寸
+
+$font-descriptions_key_large-fontSize:$font-size-regular; // 双行显示 key 文字大小 - 小尺寸
+$font-descriptions_value_large-fontSize:$font-size-header-2; // 双行显示 value 文字大小 - 小尺寸

package/lib/cjs/form/form.css

@@ -48,6 +48,7 @@
   font-weight: 600;
   color: var(--semi-color-text-0);
   margin-bottom: 4px;
+  margin-top: 0px;
   padding-right: 16px;
   display: inline-block;
   vertical-align: middle;
@@ -201,8 +202,10 @@
   font-weight: 600;
   width: 100%;
   padding-bottom: 8px;
+  padding-top: 0px;
   border-bottom: 1px solid var(--semi-color-border);
   margin-bottom: 4px;
+  margin-top: 0px;
   color: var(--semi-color-text-0);
 }
 .semi-form-section:nth-of-type(1) {

package/lib/cjs/form/form.scss

@@ -92,6 +92,7 @@ $rating: #{$prefix}-rating;
         font-weight: $font-form_label-fontWeight;
         color: $color-form_label-text-default;
         margin-bottom: $spacing-form_label-marginBottom;
+        margin-top: $spacing-form_label-marginTop;
         padding-right: $spacing-form_label-paddingRight;
         display: inline-block;
         vertical-align: middle;
@@ -288,8 +289,10 @@ $rating: #{$prefix}-rating;
         font-weight: 600;
         width: 100%;
         padding-bottom: $spacing-form_section_text-paddingBottom;
+        padding-top: $spacing-form_section_text-paddingTop;
         border-bottom: $width-form_section-border solid $color-form_section-border-default;
         margin-bottom: $spacing-form_section_text-marginBottom;
+        margin-top: $spacing-form_section_text-marginTop;
         color: $color-form_section-text-default;
     }
 

package/lib/cjs/form/variables.scss

@@ -10,6 +10,7 @@ $spacing-form_field_group_vertical-paddingBottom: $spacing-base-tight; // 垂直
 $spacing-form_label-paddingRight: $spacing-base; // 表单项标签右侧边距（水平布局）
 $spacing-form_label-paddingTop: ($height-control-default - 20px) * 0.5; // 表单项标签顶部内边距（水平布局）
 $spacing-form_label-marginBottom: $spacing-extra-tight; // 表单项标签底部外边距
+$spacing-form_label-marginTop: 0px; // 表单项标签顶部外边距
 $spacing-form_label_extra-marginLeft: $spacing-extra-tight; // 表单项标签额外信息左侧边距
 $spacing-form_label_required-marginLeft: $spacing-extra-tight; // 表单项标签必填标志左侧边距
 $spacing-form_label_posLeft-marginRight: 0; // 表单项左侧标签右侧外边距
@@ -47,4 +48,6 @@ $width-form_section-border: $border-thickness-control; // 表单分组标题底
 $spacing-form_section-marginTop: $spacing-super-loose - $spacing-base-tight; // 表单分组顶部内边距
 $spacing-form_section_text-paddingBottom: $spacing-tight; // 表单分组标题底部内边距
 $spacing-form_section_text-marginBottom: $spacing-extra-tight; // 表单分组标题底部外边距
+$spacing-form_section_text-paddingTop: 0px; // 表单分组标题顶部内边距
+$spacing-form_section_text-marginTop: 0px; // 表单分组标题顶部外边距
 

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

@@ -131,5 +131,6 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     updateScrollTop(): void;
     updateIsFullTags(): void;
     handlePopoverClose(): void;
+    handleSlotMouseEnter(): void;
 }
 export {};

package/lib/cjs/select/foundation.js

@@ -1410,6 +1410,11 @@ class SelectFoundation extends _foundation.default {
 
   handlePopoverClose() {
     this._adapter.emit('popoverClose');
+  } // need to remove focus style of option when user hover slot
+
+
+  handleSlotMouseEnter() {
+    this._adapter.updateFocusIndex(-1);
   }
 
 }

package/lib/cjs/sideSheet/sideSheet.css

@@ -61,6 +61,7 @@
   line-height: 24px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 600;
+  font-size: 18px;
   color: var(--semi-color-text-0);
   text-align: left;
 }

package/lib/cjs/sideSheet/sideSheet.scss

@@ -76,6 +76,7 @@ $module: #{$prefix}-sidesheet;
         margin: $spacing-sideSheet_title-margin;
         @include font-size-header-5;
         font-weight: $font-sideSheet_title-fontWeight;
+        font-size: $font-sideSheet_title-fontSize;
         color: $color-sideSheet_main-text;
         text-align: left;
     }

package/lib/cjs/sideSheet/variables.scss

@@ -14,3 +14,4 @@ $spacing-sideSheet_footer-padding: $spacing-loose; // 侧边栏 footer 内边距
 
 // Font
 $font-sideSheet_title-fontWeight: $font-weight-bold; // 侧边栏标题文本字重
+$font-sideSheet_title-fontSize: $font-size-header-5; // 侧边栏标题文本字号

package/lib/cjs/steps/variables.scss

@@ -16,10 +16,10 @@ $color-steps_item_error_left-icon: var(--semi-color-danger); // 错误步骤条
 $color-steps_item_error_left_number-icon: var(--semi-color-primary); // 错误步骤条数字序号文本颜色
 $color-steps_item_finish-icon: var(--semi-color-primary); // 已完成步骤条图标颜色
 $color-steps_item_finish_number-icon: var(--semi-color-white); // 已完成步骤条对勾图标颜色
-$color-steps_item_left_number_icon-bg: var(--semi-color-primary); // 已完成步骤条图标背景颜色
-$color-steps_item_left_number_icon-icon: var(--semi-color-white); // 已完成步骤条图标文字颜色
+$color-steps_item_left_number_icon-bg: var(--semi-color-primary); // 步骤条图标背景颜色
+$color-steps_item_left_number_icon-icon: var(--semi-color-white); // 步骤条图标文字颜色
 $color-steps_item_process_left-icon: var(--semi-color-primary); // 进行中步骤条对勾图标颜色
-$color-steps_item_process_left_number-icon: var(--semi-color-white); // 进行中步骤条对勾图标颜色
+$color-steps_item_process_left_number-icon: var(--semi-color-white); // 进行中步骤条内部图标颜色
 $color-steps_item_title-text-hover: var(--semi-color-focus-border); // 步骤条标题文字悬停颜色
 $color-steps_item_wait_left_icon-icon: var(--semi-color-text-2); // 未到达步骤条图标颜色
 $color-steps_item_wait_left_number_icon-bg-hover: var(--semi-color-secondary-light-default); // 未到达步骤条图标背景颜色 - 悬浮态