@douyinfe/semi-foundation 2.23.0-beta.0 → 2.23.0

package/anchor/animation.scss

@@ -1,6 +1,6 @@
-$transition_duration-anchor_title-text: var(--semi-transition_duration-faster);//锚点标题文字-文字-动画持续时间
+$transition_duration-anchor_title-text: var(--semi-transition_duration-none);//锚点标题文字-文字-动画持续时间
 $transition_function-anchor_title-text: var(--semi-transition_function-easeIn);//锚点标题文字-文字-过渡曲线
-$transition_delay-anchor_title-text: var(--semi-transition_delay-fastest);//锚点标题文字-文字-延迟时间
+$transition_delay-anchor_title-text: var(--semi-transition_delay-none);//锚点标题文字-文字-延迟时间
 
 //transform token
 $transform_scale-anchor_title-text: var(--semi-transform_scale-none);//锚点-放大

package/autoComplete/animation.scss

@@ -1,3 +1,3 @@
-$transition_duration-autoComplete_option-bg: var(--semi-transition_duration-faster);//选择器-选项-动画持续时间
+$transition_duration-autoComplete_option-bg: var(--semi-transition_duration-none);//选择器-选项-动画持续时间
 $transition_function-autoComplete_option-bg: var(--semi-transition_function-easeIn);//选择器-选项-过渡曲线
-$transition_delay-autoComplete_option-bg: var(--semi-transition_delay-fastest);//选择器-选项-延迟时间
+$transition_delay-autoComplete_option-bg: var(--semi-transition_delay-none);//选择器-选项-延迟时间

package/breadcrumb/animation.scss

@@ -1,6 +1,6 @@
-$transition_duration-breadcrumb_link-text: var(--semi-transition_duration-faster);//面包屑文字-文字-动画持续时间
+$transition_duration-breadcrumb_link-text: var(--semi-transition_duration-none);//面包屑文字-文字-动画持续时间
 $transition_function-breadcrumb_link-text: var(--semi-transition_function-easeIn);//面包屑文字-文字-过渡曲线
-$transition_delay-breadcrumb_link-text: var(--semi-transition_delay-fastest);//面包屑文字-文字-延迟时间
+$transition_delay-breadcrumb_link-text: var(--semi-transition_delay-none);//面包屑文字-文字-延迟时间
 
 //transform token
 $transform_scale-breadcrumb_link-text: var(--semi-transform_scale-none);//面包屑文字-放大

package/button/animation.scss

@@ -1,60 +1,60 @@
-$transition_duration-button_primary-bg: var(--semi-transition_duration-faster);//主要按钮-背景色-动画持续时间
+$transition_duration-button_primary-bg: var(--semi-transition_duration-none);//主要按钮-背景色-动画持续时间
 $transition_function-button_primary-bg: var(--semi-transition_function-easeIn);//主要按钮-背景色-过渡曲线
-$transition_delay-button_primary-bg: var(--semi-transition_delay-fastest);//主要按钮-背景色-延迟时间
+$transition_delay-button_primary-bg: var(--semi-transition_delay-none);//主要按钮-背景色-延迟时间
 
 
-$transition_duration-button_secondary-bg: var(--semi-transition_duration-faster);//次要按钮-背景色-动画持续时间
+$transition_duration-button_secondary-bg: var(--semi-transition_duration-none);//次要按钮-背景色-动画持续时间
 $transition_function-button_secondary-bg: var(--semi-transition_function-easeIn);//次要按钮-背景色-过渡曲线
-$transition_delay-button_secondary-bg: var(--semi-transition_delay-fastest);//次要按钮-背景色-延迟时间
+$transition_delay-button_secondary-bg: var(--semi-transition_delay-none);//次要按钮-背景色-延迟时间
 
 
-$transition_duration-button_tertiary-bg: var(--semi-transition_duration-faster);//三级按钮-背景色-动画持续时间
+$transition_duration-button_tertiary-bg: var(--semi-transition_duration-none);//三级按钮-背景色-动画持续时间
 $transition_function-button_tertiary-bg: var(--semi-transition_function-easeIn);//三级按钮-背景色-过渡曲线
-$transition_delay-button_tertiary-bg: var(--semi-transition_delay-fastest);//三级按钮-背景色-延迟时间
+$transition_delay-button_tertiary-bg: var(--semi-transition_delay-none);//三级按钮-背景色-延迟时间
 
 
-$transition_duration-button_light-bg: var(--semi-transition_duration-faster);//浅色按钮-背景色-动画持续时间
+$transition_duration-button_light-bg: var(--semi-transition_duration-none);//浅色按钮-背景色-动画持续时间
 $transition_function-button_light-bg: var(--semi-transition_function-easeIn);//浅色按钮-背景色-过渡曲线
-$transition_delay-button_light-bg: var(--semi-transition_delay-fastest);//浅色按钮-背景色-延迟时间
+$transition_delay-button_light-bg: var(--semi-transition_delay-none);//浅色按钮-背景色-延迟时间
 
 
-$transition_duration-button_warning-bg: var(--semi-transition_duration-faster);//警告按钮-背景色-动画持续时间
+$transition_duration-button_warning-bg: var(--semi-transition_duration-none);//警告按钮-背景色-动画持续时间
 $transition_function-button_warning-bg: var(--semi-transition_function-easeIn);//警告按钮-背景色-过渡曲线
-$transition_delay-button_warning-bg: var(--semi-transition_delay-fastest);//警告按钮-背景色-延迟时间
+$transition_delay-button_warning-bg: var(--semi-transition_delay-none);//警告按钮-背景色-延迟时间
 
 
-$transition_duration-button_danger-bg: var(--semi-transition_duration-faster);//危险按钮-背景色-动画持续时间
+$transition_duration-button_danger-bg: var(--semi-transition_duration-none);//危险按钮-背景色-动画持续时间
 $transition_function-button_danger-bg: var(--semi-transition_function-easeIn);//危险按钮-背景色-过渡曲线
-$transition_delay-button_danger-bg: var(--semi-transition_delay-fastest);//危险按钮-背景色-延迟时间
+$transition_delay-button_danger-bg: var(--semi-transition_delay-none);//危险按钮-背景色-延迟时间
 
 
-$transition_duration-button_borderless-bg: var(--semi-transition_duration-faster);//无边框按钮-背景色-动画持续时间
+$transition_duration-button_borderless-bg: var(--semi-transition_duration-none);//无边框按钮-背景色-动画持续时间
 $transition_function-button_borderless-bg: var(--semi-transition_function-easeIn);//无边框按钮-背景色-过渡曲线
-$transition_delay-button_borderless-bg: var(--semi-transition_delay-fastest);//无边框按钮-背景色-延迟时间
+$transition_delay-button_borderless-bg: var(--semi-transition_delay-none);//无边框按钮-背景色-延迟时间
 
-$transition_duration-button_primary-border: var(--semi-transition_duration-faster);//主要按钮-边框-动画持续时间
+$transition_duration-button_primary-border: var(--semi-transition_duration-none);//主要按钮-边框-动画持续时间
 $transition_function-button_primary-border: var(--semi-transition_function-easeIn);//主要按钮-边框-过渡曲线
-$transition_delay-button_primary-border: var(--semi-transition_delay-fastest);//主要按钮-边框-延迟时间
+$transition_delay-button_primary-border: var(--semi-transition_delay-none);//主要按钮-边框-延迟时间
 
-$transition_duration-button_secondary-border: var(--semi-transition_duration-faster);//次要按钮-边框-动画持续时间
+$transition_duration-button_secondary-border: var(--semi-transition_duration-none);//次要按钮-边框-动画持续时间
 $transition_function-button_secondary-border: var(--semi-transition_function-easeIn);//次要按钮-边框-过渡曲线
-$transition_delay-button_secondary-border: var(--semi-transition_delay-fastest);//次要按钮-边框-延迟时间
+$transition_delay-button_secondary-border: var(--semi-transition_delay-none);//次要按钮-边框-延迟时间
 
-$transition_duration-button_tertiary-border: var(--semi-transition_duration-faster);//三级按钮-边框-动画持续时间
+$transition_duration-button_tertiary-border: var(--semi-transition_duration-none);//三级按钮-边框-动画持续时间
 $transition_function-button_tertiary-border: var(--semi-transition_function-easeIn);//三级按钮-边框-过渡曲线
-$transition_delay-button_tertiary-border: var(--semi-transition_delay-fastest);//三级按钮-边框-延迟时间
+$transition_delay-button_tertiary-border: var(--semi-transition_delay-none);//三级按钮-边框-延迟时间
 
-$transition_duration-button_light-border: var(--semi-transition_duration-faster);//浅色按钮-边框-动画持续时间
+$transition_duration-button_light-border: var(--semi-transition_duration-none);//浅色按钮-边框-动画持续时间
 $transition_function-button_light-border: var(--semi-transition_function-easeIn);//浅色按钮-边框-过渡曲线
-$transition_delay-button_light-border: var(--semi-transition_delay-fastest);//浅色按钮-边框-延迟时间
+$transition_delay-button_light-border: var(--semi-transition_delay-none);//浅色按钮-边框-延迟时间
 
-$transition_duration-button_warning-border: var(--semi-transition_duration-faster);//警告按钮-边框-动画持续时间
+$transition_duration-button_warning-border: var(--semi-transition_duration-none);//警告按钮-边框-动画持续时间
 $transition_function-button_warning-border: var(--semi-transition_function-easeIn);//警告按钮-边框-过渡曲线
-$transition_delay-button_warning-border: var(--semi-transition_delay-fastest);//警告按钮-边框-延迟时间
+$transition_delay-button_warning-border: var(--semi-transition_delay-none);//警告按钮-边框-延迟时间
 
-$transition_duration-button_danger-border: var(--semi-transition_duration-faster);//危险按钮-边框-动画持续时间
+$transition_duration-button_danger-border: var(--semi-transition_duration-none);//危险按钮-边框-动画持续时间
 $transition_function-button_danger-border: var(--semi-transition_function-easeIn);//危险按钮-边框-过渡曲线
-$transition_delay-button_danger-border: var(--semi-transition_delay-fastest);//危险按钮-边框-延迟时间
+$transition_delay-button_danger-border: var(--semi-transition_delay-none);//危险按钮-边框-延迟时间
 
 //transform token
 

package/carousel/animation.scss

@@ -1,7 +1,7 @@
-$transition_duration_carousel_indicator-bg: var(--semi-transition_delay-fastest); // 指示器-背景色-动画持续时间
+$transition_duration_carousel_indicator-bg: var(--semi-transition_delay-none); // 指示器-背景色-动画持续时间
 $transition_function_carousel_indicator-bg: var(--semi-transition_function-easeOut); // 指示器-背景色-过渡曲线
 $transition_delay_carousel_indicator-bg: var(--semi-transition_delay-none); // 指示器-背景色-延迟时间
 
-$transition_duration_carousel_arrow-bg: var(--semi-transition_delay-fastest); // 箭头-背景色-动画持续时间
+$transition_duration_carousel_arrow-bg: var(--semi-transition_delay-none); // 箭头-背景色-动画持续时间
 $transition_funciton_carousel_arrow-bg: var(--semi-transition_function-easeOut); // 箭头-背景色-过渡曲线
 $transition_delay_carousel_arrow-bg: var(--semi-transition_delay-none); // 箭头-背景色-延迟时间

package/cascader/animation.scss

@@ -1,4 +1,4 @@
-$transition_duration-cascader_option-bg: var(--semi-transition_duration-faster);//级联选项-背景色-动画持续时间
+$transition_duration-cascader_option-bg: var(--semi-transition_duration-none);//级联选项-背景色-动画持续时间
 $transition_function-cascader_option-bg: var(--semi-transition_function-easeIn);//级联选项-背景色-过渡曲线
-$transition_delay-cascader_option-bg: var(--semi-transition_delay-fastest);//级联选项-背景色-延迟时间
+$transition_delay-cascader_option-bg: var(--semi-transition_delay-none);//级联选项-背景色-延迟时间
 

package/cascader/cascader.scss

@@ -408,6 +408,21 @@ $module: #{$prefix}-cascader;
             &-empty {
                 margin-right: $spacing-cascader_empty_icon-marginRight;
             }
+
+            &-left {
+                margin-left: $spacing-cascader_option-icon-marginLeft;
+            }
+        }
+
+        &-spin-icon {
+            width: $width-cascader-icon;
+            height: $width-cascader-icon;
+            line-height: 0;
+
+            & svg {
+                width: $width-cascader-icon;
+                height: $width-cascader-icon;
+            }
         }
 
         &-label {

package/cascader/variables.scss

@@ -51,6 +51,7 @@ $spacing-cascader_selection_tagInput-marginLeft: - $spacing-extra-tight; // 级
 $spacing-cascader_selection_input-marginLeft: $spacing-extra-tight; // 级联选择触发器多选搜索时输入框的左外边距
 $spacing-cascader_selection_n-marginRight: $spacing-extra-tight; // 超出 maxTagCount 后，+n 的右外边距
 $spacing-cascader_clearBtn-marginRight: 12px; // 级联选择触发器清空按钮右侧外边距
+$spacing-cascader_option-icon-marginLeft: 8px; // 级联选择菜单项图标左侧外边距
 
 $color-cascader_selection_n-text-default: var(--semi-color-text-0); // 超出 maxTagCount 后，+n 的文字默认颜色
 $color-cascader_selection_n-text-disabled: var(--semi-color-disabled-text); // 超出 maxTagCount 后，+n 的文字disabled颜色

package/checkbox/animation.scss

@@ -1,10 +1,10 @@
-$transition_duration-checkbox-bg: var(--semi-transition_duration-faster);//复选框-背景色-动画持续时间
+$transition_duration-checkbox-bg: var(--semi-transition_duration-none);//复选框-背景色-动画持续时间
 $transition_function-checkbox-bg: var(--semi-transition_function-easeIn);//复选框-背景色-过渡曲线
-$transition_delay-checkbox-bg: var(--semi-transition_delay-fastest);//复选框-背景色-延迟时间
+$transition_delay-checkbox-bg: var(--semi-transition_delay-none);//复选框-背景色-延迟时间
 
-$transition_duration-checkbox-border: var(--semi-transition_duration-faster);//复选框-边框-动画持续时间
+$transition_duration-checkbox-border: var(--semi-transition_duration-none);//复选框-边框-动画持续时间
 $transition_function-checkbox-border: var(--semi-transition_function-easeIn);//复选框-边框-过渡曲线
-$transition_delay-checkbox-border: var(--semi-transition_delay-fastest);//复选框-边框-延迟时间
+$transition_delay-checkbox-border: var(--semi-transition_delay-none);//复选框-边框-延迟时间
 
 // transform token
 $transform_scale-checkbox: var(--semi-transform_scale-none);//复选框-放大

package/checkbox/variables.scss

@@ -52,7 +52,7 @@ $spacing-checkbox_extra-marginTop: $spacing-extra-tight; // extra 副标题顶
 $spacing-checkbox_cardType-paddingX: $spacing-base; // 卡片类型复选框的水平内间距
 $spacing-checkbox_cardType-paddingY: $spacing-base-tight; // 卡片类型复选框的垂直内间距
 $spacing-checkbox_cardType_inner-marginRight: $spacing-tight; // 卡片类型复选框 inner 的右外边距
-$spacing-checkbox_card_group_vertical-marginBottom: $spacing-base; // 卡片类型复选框的垂直向下外边距
+$spacing-checkbox_card_group_vertical-marginBottom: $spacing-base; // 卡片样式复选框的下间距
 
 $color-checkbox_extra-text-default: var(--semi-color-text-2); // extra 副标题文字颜色
 

package/collapsible/animation.scss

@@ -1,10 +1,10 @@
 $transition_duration-collapsible-height: 250ms;//折叠-高度-动画持续时间
 $transition_function-collapsible-height: cubic-bezier(0.25,0.1,0.25,1);//折叠-高度-过渡曲线
-$transition_delay-collapsible-height: var(--semi-transition_delay-fastest);//折叠-高度-延迟时间
+$transition_delay-collapsible-height: var(--semi-transition_delay-none);//折叠-高度-延迟时间
 
 $transition_duration-collapsible-opacity: 250ms;//折叠-透明度-动画持续时间
 $transition_function-collapsible-opacity: var(--semi-transition_function-easeIn);//折叠-透明度-过渡曲线
-$transition_delay-collapsible-opacity: var(--semi-transition_delay-fastest);//折叠-透明度-延迟时间
+$transition_delay-collapsible-opacity: var(--semi-transition_delay-none);//折叠-透明度-延迟时间
 
 
 

package/datePicker/animation.scss

@@ -1,4 +1,4 @@
-$transition_duration-datepicker_date-bg: var(--semi-transition_duration-faster);//时间选择器-格子背景色-动画持续时间
+$transition_duration-datepicker_date-bg: var(--semi-transition_duration-none);//时间选择器-格子背景色-动画持续时间
 $transition_function-datepicker_date-bg: var(--semi-transition_function-easeIn);//时间选择器-格子背景色-过渡曲线
-$transition_delay-datepicker_date-bg: var(--semi-transition_delay-fastest);//时间选择器-格子背景色-延迟时间
+$transition_delay-datepicker_date-bg: var(--semi-transition_delay-none);//时间选择器-格子背景色-延迟时间
 

package/dropdown/animation.scss

@@ -1,3 +1,3 @@
-$transition_duration-dropdown_item-bg: var(--semi-transition_duration-fastest); // 下拉菜单项-背景颜色-动画持续时间
+$transition_duration-dropdown_item-bg: var(--semi-transition_duration-none); // 下拉菜单项-背景颜色-动画持续时间
 $transition_function-dropdown_item-bg: var(--semi-transition_function-easeOut); // 下拉菜单项-背景颜色-过渡曲线
 $transition_delay-dropdown_item-bg: 0ms; // 下拉菜单项-背景颜色-延迟时间

package/dropdown/foundation.ts

@@ -3,33 +3,40 @@ import { handlePrevent, setFocusToFirstItem, setFocusToLastItem } from '../utils
 
 export interface DropdownAdapter extends Partial<DefaultAdapter> {
     setPopVisible(visible: boolean): void;
-    notifyVisibleChange(visible: boolean): void
+    notifyVisibleChange(visible: boolean): void;
+    getPopupId(): string
 }
 
 export default class DropdownFoundation extends BaseFoundation<DropdownAdapter> {
     handleVisibleChange(visible: boolean) {
         this._adapter.setPopVisible(visible);
         this._adapter.notifyVisibleChange(visible);
+
+        const { trigger } = this.getProps();
+        if (visible && trigger === "click"){
+            const popupId = this._adapter.getPopupId();
+            this.setFocusToFirstMenuItem(popupId);
+        }
     }
 
-    getMenuItemNodes(target: any): HTMLElement[] {
-        const id = target.attributes['data-popupid'].value;
+    getMenuItemNodes(id: string): HTMLElement[] {
         const menuWrapper = document.getElementById(id);
         // if has dropdown item, the item must wrapped by li
         return menuWrapper ? Array.from(menuWrapper.getElementsByTagName('li')).filter(item => item.ariaDisabled === "false") : null;
     }
 
-    setFocusToFirstMenuItem(target: any): void {
-        const menuItemNodes = this.getMenuItemNodes(target);
+    setFocusToFirstMenuItem(id: string): void {
+        const menuItemNodes = this.getMenuItemNodes(id);
         menuItemNodes && setFocusToFirstItem(menuItemNodes);
     }
 
-    setFocusToLastMenuItem(target: any): void {
-        const menuItemNodes = this.getMenuItemNodes(target);
+    setFocusToLastMenuItem(id: string): void {
+        const menuItemNodes = this.getMenuItemNodes(id);
         menuItemNodes && setFocusToLastItem(menuItemNodes);
     }
 
     handleKeyDown(event: any): void {
+        const id = event.target?.attributes['data-popupid']?.value;
         switch (event.key) {
             case ' ':
             case 'Enter':
@@ -38,11 +45,11 @@ export default class DropdownFoundation extends BaseFoundation<DropdownAdapter>
                 // handlePrevent(event);
                 break;
             case 'ArrowDown':
-                this.setFocusToFirstMenuItem(event.target);
+                this.setFocusToFirstMenuItem(id);
                 handlePrevent(event);
                 break;
             case 'ArrowUp':
-                this.setFocusToLastMenuItem(event.target);
+                this.setFocusToLastMenuItem(id);
                 handlePrevent(event);
                 break;
             default:

package/dropdown/menuFoundation.ts

@@ -1,22 +1,11 @@
 
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-import { handlePrevent, isPrintableCharacter, findIndexByCharacter, getAncestorNodeByRole, getMenuButton, setFocusToFirstItem, setFocusToItem, setFocusToNextMenuitem, setFocusToPreviousMenuItem } from '../utils/a11y';
-
+import { handlePrevent, isPrintableCharacter, findIndexByCharacter, getAncestorNodeByRole, getMenuButton, setFocusToItem, setFocusToNextMenuitem, setFocusToPreviousMenuItem } from '../utils/a11y';
 
 export default class DropdownMenuFoundation extends BaseFoundation<Partial<DefaultAdapter>> {
     menuItemNodes: HTMLElement[] = null;
     firstChars: string[] = [];
 
-    // if trigger is click, auto focus to the first menu item
-    autoFocus(ulElement: any): void {
-        const trigger = this._adapter.getContext('trigger');
-        if (trigger === 'click'){
-            // find all non-disabled li under this menu and set focus to the first menu
-            this.menuItemNodes = [...ulElement.getElementsByTagName('li')].filter(item => item.ariaDisabled !== "true");
-            setFocusToFirstItem(this.menuItemNodes);
-        }
-    }
-
     handleEscape(menu: Element): void {
         const trigger = this._adapter.getContext('trigger');
         if (trigger === 'custom'){

package/form/form.scss

@@ -88,9 +88,7 @@ $rating: #{$prefix}-rating;
     }
 
     &-field-label {
-        // padding-left: $spacing-base;
         box-sizing: border-box;
-        padding-right: $spacing-form_label-paddingRight;
         font-weight: $font-form_label-fontWeight;
         color: $color-form_label-text-default;
         margin-bottom: $spacing-form_label-marginBottom;
@@ -146,6 +144,7 @@ $rating: #{$prefix}-rating;
         @include font-size-regular;
         display: flex;
         align-items: center;
+        // TODO help text margin token?
         margin-top: $spacing-form_message-marginTop;
         .#{$prefix}-icon-alert_triangle {
             color: $color-form_alertIcon-icon-default;
@@ -204,8 +203,8 @@ $rating: #{$prefix}-rating;
         .#{$switch},
         .#{$rating} {
             vertical-align: middle;
-            margin-top: $spacing-form_label_small-paddingTop;
-            margin-bottom: $spacing-form_label_small-paddingTop;
+            margin-top: $spacing-form_switch_rating_marginY;
+            margin-bottom: $spacing-form_switch_rating_marginY;
         }
     }
 

package/form/rtl.scss

@@ -33,7 +33,6 @@ $rating: #{$prefix}-rating;
     
         &-field-label {
             padding-right: 0;
-            padding-left: $spacing-form_label-paddingRight;
     
             &-with-extra {
                 .#{$field}-label-extra {

package/form/variables.scss

@@ -1,45 +1,48 @@
-$spacing-form_label-paddingTop: ($height-control-default - 20px) * 0.5; // 水平布局表单标题顶部内边距
-$spacing-form_label_small-paddingTop: ($height-control-default - 24px) * 0.5; // 水平布局 小尺寸表单标题顶部内边距
-
-$spacing-form_field_horizontal-paddingRight: $spacing-base; // 水平布局表单标题右侧内边距
+// form field
+$spacing-form_field_horizontal-paddingRight: $spacing-base; // 水平布局表单项右侧内边距
 $spacing-form_field_group_horizontal-paddingRight: $spacing-base; // 水平布局表单组标题右侧内边距
-
-$spacing-form_field_vertical-paddingTop: $spacing-base-tight; // 垂直布局表单顶部内边距
-$spacing-form_field_vertical-paddingBottom: $spacing-base-tight; // 垂直布局表单底部内边距
-
+$spacing-form_field_vertical-paddingTop: $spacing-base-tight; // 表单项顶部内边距（垂直布局）
+$spacing-form_field_vertical-paddingBottom: $spacing-base-tight; // 表单项底部内边距（垂直布局）
 $spacing-form_field_group_vertical-paddingTop: $spacing-base-tight; // 垂直布局表单组顶部内边距
 $spacing-form_field_group_vertical-paddingBottom: $spacing-base-tight; // 垂直布局表单组底部内边距
-$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_label-paddingRight: $spacing-base; // 表单标题右侧内边距
-$spacing-form_label-marginBottom: $spacing-extra-tight; // 表单标题底部外边距
-$spacing-form_label_extra-marginLeft: $spacing-extra-tight; // 表单标题图标左侧内边距
-$spacing-form_label_required-marginLeft: $spacing-extra-tight; // 表单标题必填标志左侧内边距
-$spacing-form_label_posLeft-marginRight: 0; // 水平布局表单标题右侧外边距
-$spacing-form_label_posLeft-marginBottom: 0; // 水平布局表单标题底部外边距
-$spacing-form_label_posTop-paddingTop: $spacing-extra-tight; // 垂直布局表单标题顶部内边距
-$spacing-form_label_posTop-paddingBottom: $spacing-extra-tight; // 垂直布局表单标题底部内边距
-$spacing-form_label_extra_posMid-marginTop: $spacing-extra-tight; // 表单额外信息辅助文字顶部外边距 - 居中
-$spacing-form_label_extra_posMid-marginBottom: $spacing-extra-tight; // 表单额外信息辅助文字底部外边距 - 居中
-$spacing-form_label_extra_posBottom-marginTop: $spacing-extra-tight; // 表单额外信息辅助文字顶部外边距 - 底部
-$spacing-form_statusIcon-marginRight: $spacing-extra-tight;  // 表单校验图标右侧外边距
+// form label
+$spacing-form_label-paddingTop: ($height-control-default - 20px) * 0.5; // 表单项标签顶部内边距（水平布局）
+$spacing-form_label-marginBottom: $spacing-extra-tight; // 表单项标签底部外边距
+$spacing-form_label_extra-marginLeft: $spacing-extra-tight; // 表单项标签额外信息左侧边距
+$spacing-form_label_required-marginLeft: $spacing-extra-tight; // 表单项标签必填标志左侧边距
+$spacing-form_label_posLeft-marginRight: 0; // 表单项左侧标签右侧外边距
+$spacing-form_label_posLeft-marginBottom: 0; // 表单项左侧标签底部外边距
+$spacing-form_label_posTop-paddingTop: $spacing-extra-tight; // 表单项顶部标签顶部边距
+$spacing-form_label_posTop-paddingBottom: $spacing-extra-tight; // 表单项顶部标签底部边距
+$spacing-form_label_extra_posMid-marginTop: $spacing-extra-tight; // 表单项标签 图标/可选标记 顶部外边距
+$spacing-form_label_extra_posMid-marginBottom: $spacing-extra-tight; // 表单项标签 图标/可选标记 底部外边距 - 居中
+$spacing-form_label_extra_posBottom-marginTop: $spacing-extra-tight; // 表单项标签 图标/可选标记 顶部外边距 - 底部
+
+// form switch rating需要额外margin以对齐高度 32px
+$spacing-form_switch_rating_marginY: ($height-control-default - 24px) * 0.5; // Switch / Rating 表单项顶部内边距（水平布局）
 
-$spacing-form_message-marginTop: $spacing-extra-tight; // 表单校验信息顶部外边距
+$color-form_requiredMark_disabled-text-default: var(--semi-color-danger);  // 禁用表单项必填标记颜色
+$color-form_label_disabled-text-default: var(--semi-color-disabled-text); // 禁用表单项标签文字颜色
+$font-form_label-fontWeight: $font-weight-bold; // 表单项标签字重
 
-$font-form_label-fontWeight: $font-weight-bold; // 表单标题字重
+$color-form_label-text-default: var(--semi-color-text-0); // 表单项标签文字颜色
+$color-form_label_optional-text-default: var(--semi-color-tertiary); // 表单项标签可选标记颜色
+$color-form_label_extra-text-default: var(--semi-color-tertiary); // 表单项标签图标颜色
+$color-form_requiredMark-text-default: var(--semi-color-danger); // 必填标记颜色
 $font-form_requiredMark-fontWeight: $font-weight-bold; // 表单必填标识字重
 
-$color-form_label-text-default: var(--semi-color-text-0); // 表单标题文字颜色
-$color-form_label_optional-text-default: var(--semi-color-tertiary); // 表单可选标记文字颜色
-$color-form_label_extra-text-default: var(--semi-color-tertiary); // 表单额外信息辅助文字颜色
+// form errormessage
+$color-form_message_error-text-default: var(--semi-color-danger); // 错误提示颜色
+$color-form_alertIcon-icon-default: var(--semi-color-warning); // 警告图标颜色
+$spacing-form_statusIcon-marginRight: $spacing-extra-tight;  // 表单校验状态图标右侧外边距
+$spacing-form_message-marginTop: $spacing-extra-tight; // 表单错误信息、辅助文字顶部外边距
 
-$color-form_label_disabled-text-default: var(--semi-color-disabled-text); // 禁用表单项标题文字颜色
-$color-form_requiredMark-text-default: var(--semi-color-danger); // 必填标记颜色
-$color-form_requiredMark_disabled-text-default: var(--semi-color-danger);  // 禁用表单项必填标记颜色
-$color-form_alertIcon-icon-default: var(--semi-color-warning); // 警告表单项图标颜色
-$color-form_message_error-text-default: var(--semi-color-danger); // 错误表单项图标颜色
+// form section
 $color-form_section-text-default: var(--semi-color-text-0); // 表单分组标题文字颜色
-$color-form_section-border-default: var(--semi-color-border); // 表单分组描边颜色
-$width-form_section-border: $border-thickness-control; // 表单分组描边宽度
+$color-form_section-border-default: var(--semi-color-border); // 表单分组标题底部描边颜色
+$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; // 表单分组标题底部外边距
+

package/input/animation.scss

@@ -1,14 +1,14 @@
-$transition_duration-input-bg: var(--semi-transition_duration-faster);//输入框-背景色-动画持续时间
+$transition_duration-input-bg: var(--semi-transition_duration-none);//输入框-背景色-动画持续时间
 $transition_function-input-bg: var(--semi-transition_function-easeIn);//输入框-背景色-过渡曲线
-$transition_delay-input-bg: var(--semi-transition_delay-fastest);//输入框-背景色-延迟时间
+$transition_delay-input-bg: var(--semi-transition_delay-none);//输入框-背景色-延迟时间
 
-$transition_duration-input-border: var(--semi-transition_duration-faster);//输入框-边框-动画持续时间
+$transition_duration-input-border: var(--semi-transition_duration-none);//输入框-边框-动画持续时间
 $transition_function-input-border: var(--semi-transition_function-easeIn);//输入框-边框-过渡曲线
-$transition_delay-input-border: var(--semi-transition_delay-fastest);//输入框-边框-延迟时间
+$transition_delay-input-border: var(--semi-transition_delay-none);//输入框-边框-延迟时间
 
-$transition_duration-input-text: var(--semi-transition_duration-faster);//输入框-文字或图标-动画持续时间
+$transition_duration-input-text: var(--semi-transition_duration-none);//输入框-文字或图标-动画持续时间
 $transition_function-input-text: var(--semi-transition_function-easeIn);//输入框-文字或图标-过渡曲线
-$transition_delay-input-text: var(--semi-transition_delay-fastest);//输入框-文字或图标-延迟时间
+$transition_delay-input-text: var(--semi-transition_delay-none);//输入框-文字或图标-延迟时间
 
 // transform token
 $transform_scale-input: var(--semi-transform_scale-none);//输入框-变大

package/inputNumber/animation.scss

@@ -1,10 +1,10 @@
-$transition_duration-inputNumber-bg: var(--semi-transition_duration-faster);//数字输入框-背景色-动画持续时间
+$transition_duration-inputNumber-bg: var(--semi-transition_duration-none);//数字输入框-背景色-动画持续时间
 $transition_function-inputNumber-bg: var(--semi-transition_function-easeIn);//数字输入框-背景色-过渡曲线
-$transition_delay-inputNumber-bg: var(--semi-transition_delay-fastest);//数字输入框-背景色-延迟时间
+$transition_delay-inputNumber-bg: var(--semi-transition_delay-none);//数字输入框-背景色-延迟时间
 
-$transition_duration-inputNumber-border: var(--semi-transition_duration-faster);//数字输入框-边框-动画持续时间
+$transition_duration-inputNumber-border: var(--semi-transition_duration-none);//数字输入框-边框-动画持续时间
 $transition_function-inputNumber-border: var(--semi-transition_function-easeIn);//数字输入框-边框-过渡曲线
-$transition_delay-inputNumber-border: var(--semi-transition_delay-fastest);//数字输入框-边框-延迟时间
+$transition_delay-inputNumber-border: var(--semi-transition_delay-none);//数字输入框-边框-延迟时间
 
 // transform token
 $transform_scale-inputNumber: var(--semi-transform_scale-none);//数字输入框-变大

package/lib/cjs/anchor/anchor.css

@@ -63,7 +63,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   border-radius: 3px;
-  transition: color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
 }
 .semi-anchor-link-title:hover {

package/lib/cjs/anchor/animation.scss

@@ -1,6 +1,6 @@
-$transition_duration-anchor_title-text: var(--semi-transition_duration-faster);//锚点标题文字-文字-动画持续时间
+$transition_duration-anchor_title-text: var(--semi-transition_duration-none);//锚点标题文字-文字-动画持续时间
 $transition_function-anchor_title-text: var(--semi-transition_function-easeIn);//锚点标题文字-文字-过渡曲线
-$transition_delay-anchor_title-text: var(--semi-transition_delay-fastest);//锚点标题文字-文字-延迟时间
+$transition_delay-anchor_title-text: var(--semi-transition_delay-none);//锚点标题文字-文字-延迟时间
 
 //transform token
 $transform_scale-anchor_title-text: var(--semi-transform_scale-none);//锚点-放大

package/lib/cjs/autoComplete/animation.scss

@@ -1,3 +1,3 @@
-$transition_duration-autoComplete_option-bg: var(--semi-transition_duration-faster);//选择器-选项-动画持续时间
+$transition_duration-autoComplete_option-bg: var(--semi-transition_duration-none);//选择器-选项-动画持续时间
 $transition_function-autoComplete_option-bg: var(--semi-transition_function-easeIn);//选择器-选项-过渡曲线
-$transition_delay-autoComplete_option-bg: var(--semi-transition_delay-fastest);//选择器-选项-延迟时间
+$transition_delay-autoComplete_option-bg: var(--semi-transition_delay-none);//选择器-选项-延迟时间

package/lib/cjs/autoComplete/autoComplete.css

@@ -18,7 +18,7 @@
   align-items: center;
   cursor: pointer;
   box-sizing: border-box;
-  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
 }
 .semi-autoComplete-option-icon {
   width: 12px;

package/lib/cjs/breadcrumb/animation.scss

@@ -1,6 +1,6 @@
-$transition_duration-breadcrumb_link-text: var(--semi-transition_duration-faster);//面包屑文字-文字-动画持续时间
+$transition_duration-breadcrumb_link-text: var(--semi-transition_duration-none);//面包屑文字-文字-动画持续时间
 $transition_function-breadcrumb_link-text: var(--semi-transition_function-easeIn);//面包屑文字-文字-过渡曲线
-$transition_delay-breadcrumb_link-text: var(--semi-transition_delay-fastest);//面包屑文字-文字-延迟时间
+$transition_delay-breadcrumb_link-text: var(--semi-transition_delay-none);//面包屑文字-文字-延迟时间
 
 //transform token
 $transform_scale-breadcrumb_link-text: var(--semi-transform_scale-none);//面包屑文字-放大

package/lib/cjs/breadcrumb/breadcrumb.css

@@ -60,7 +60,7 @@
   align-items: center;
   column-gap: 4px;
   text-decoration: inherit;
-  transition: color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
 }
 .semi-breadcrumb-item-link:hover {