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

package/lib/cjs/button/button.css

@@ -50,7 +50,7 @@
 .semi-button-danger {
   background-color: var(--semi-color-danger);
   color: rgba(var(--semi-white), 1);
-  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border 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), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
 }
 .semi-button-danger:hover {
@@ -68,7 +68,7 @@
 .semi-button-warning {
   background-color: var(--semi-color-warning);
   color: rgba(var(--semi-white), 1);
-  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border 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), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
 }
 .semi-button-warning:hover {
@@ -86,7 +86,7 @@
 .semi-button-tertiary {
   background-color: var(--semi-color-tertiary);
   color: rgba(var(--semi-white), 1);
-  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border 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), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
 }
 .semi-button-tertiary:hover {
@@ -101,7 +101,7 @@
 .semi-button-primary {
   background-color: var(--semi-color-primary);
   color: rgba(var(--semi-white), 1);
-  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border 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), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
 }
 .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):hover {
@@ -117,7 +117,7 @@
   background-color: var(--semi-color-secondary);
   outline-color: var(--semi-color-secondary);
   color: rgba(var(--semi-white), 1);
-  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border 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), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
 }
 .semi-button-secondary:hover {
@@ -144,7 +144,7 @@
 .semi-button-borderless {
   background-color: transparent;
   border: 0 transparent solid;
-  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);
   transform: scale(var(--semi-transform_scale-none));
 }
 .semi-button-borderless:not(.semi-button-disabled):hover {
@@ -158,7 +158,7 @@
 .semi-button-light {
   background-color: var(--semi-color-fill-0);
   border: 0 transparent solid;
-  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border 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), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
 }
 .semi-button-light:not(.semi-button-disabled):hover {

package/lib/cjs/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/lib/cjs/carousel/carousel.css

@@ -83,7 +83,7 @@
 }
 .semi-carousel-indicator-dot .semi-carousel-indicator-item-primary {
   background-color: rgba(var(--semi-blue-6), 0.4);
-  transition: background-color var(--semi-transition_delay-fastest) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none);
+  transition: background-color var(--semi-transition_delay-none) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none);
 }
 .semi-carousel-indicator-dot .semi-carousel-indicator-item-primary.semi-carousel-indicator-item-active {
   background: rgba(var(--semi-blue-6), 1);
@@ -96,7 +96,7 @@
 }
 .semi-carousel-indicator-dot .semi-carousel-indicator-item-light {
   background-color: rgba(var(--semi-white), 0.4);
-  transition: background-color var(--semi-transition_delay-fastest) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none);
+  transition: background-color var(--semi-transition_delay-none) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none);
 }
 .semi-carousel-indicator-dot .semi-carousel-indicator-item-light.semi-carousel-indicator-item-active {
   background: rgba(var(--semi-white), 1);
@@ -109,7 +109,7 @@
 }
 .semi-carousel-indicator-dot .semi-carousel-indicator-item-dark {
   background-color: rgba(var(--semi-black), 0.5);
-  transition: background-color var(--semi-transition_delay-fastest) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none);
+  transition: background-color var(--semi-transition_delay-none) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none);
 }
 .semi-carousel-indicator-dot .semi-carousel-indicator-item-dark.semi-carousel-indicator-item-active {
   background-color: rgba(var(--semi-black), 1);
@@ -249,21 +249,21 @@
 }
 .semi-carousel-arrow-light {
   color: rgba(var(--semi-white), 0.4);
-  transition: color var(--semi-transition_delay-fastest) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none);
+  transition: color var(--semi-transition_delay-none) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none);
 }
 .semi-carousel-arrow-light:hover {
   color: rgba(var(--semi-white), 1);
 }
 .semi-carousel-arrow-primary {
   color: rgba(var(--semi-blue-6), 0.4);
-  transition: color var(--semi-transition_delay-fastest) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none);
+  transition: color var(--semi-transition_delay-none) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none);
 }
 .semi-carousel-arrow-primary:hover {
   color: rgba(var(--semi-blue-6), 1);
 }
 .semi-carousel-arrow-dark {
   color: rgba(var(--semi-black), 0.5);
-  transition: color var(--semi-transition_delay-fastest) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none);
+  transition: color var(--semi-transition_delay-none) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none);
 }
 .semi-carousel-arrow-dark:hover {
   color: rgba(var(--semi-black), 1);

package/lib/cjs/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/lib/cjs/cascader/cascader.css

@@ -313,7 +313,7 @@
   align-items: center;
   justify-content: space-between;
   cursor: pointer;
-  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);
   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/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/lib/cjs/checkbox/checkbox.css

@@ -11,7 +11,7 @@
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   cursor: pointer;
-  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border 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), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
   column-gap: 8px;
 }
@@ -77,7 +77,7 @@
   height: 16px;
   margin: 0;
   background: transparent;
-  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border 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), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   box-shadow: inset 0 0 0 1px var(--semi-color-text-3);
   border-radius: var(--semi-border-radius-extra-small);
 }

package/lib/cjs/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/lib/cjs/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/lib/cjs/collapsible/collapsible.css

@@ -2,5 +2,5 @@
 /* sizing */
 /* spacing */
 .semi-collapsible-transition {
-  transition: height 250ms cubic-bezier(0.25, 0.1, 0.25, 1) var(--semi-transition_delay-fastest), opacity 250ms var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  transition: height 250ms cubic-bezier(0.25, 0.1, 0.25, 1) var(--semi-transition_delay-none), opacity 250ms var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
 }

package/lib/cjs/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/lib/cjs/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/lib/cjs/dropdown/dropdown.css

@@ -45,7 +45,7 @@
   max-width: 280px;
   display: flex;
   align-items: center;
-  transition: background-color var(--semi-transition_duration-fastest) var(--semi-transition_function-easeOut) 0ms;
+  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeOut) 0ms;
 }
 .semi-dropdown-item:not(.semi-dropdown-item-active):hover {
   background-color: var(--semi-color-fill-0);

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

@@ -2,11 +2,12 @@ import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 export interface DropdownAdapter extends Partial<DefaultAdapter> {
     setPopVisible(visible: boolean): void;
     notifyVisibleChange(visible: boolean): void;
+    getPopupId(): string;
 }
 export default class DropdownFoundation extends BaseFoundation<DropdownAdapter> {
     handleVisibleChange(visible: boolean): void;
-    getMenuItemNodes(target: any): HTMLElement[];
-    setFocusToFirstMenuItem(target: any): void;
-    setFocusToLastMenuItem(target: any): void;
+    getMenuItemNodes(id: string): HTMLElement[];
+    setFocusToFirstMenuItem(id: string): void;
+    setFocusToLastMenuItem(id: string): void;
     handleKeyDown(event: any): void;
 }

package/lib/cjs/dropdown/foundation.js

@@ -16,26 +16,39 @@ class DropdownFoundation extends _foundation.default {
     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) {
-    const id = target.attributes['data-popupid'].value;
+  getMenuItemNodes(id) {
     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) {
-    const menuItemNodes = this.getMenuItemNodes(target);
+  setFocusToFirstMenuItem(id) {
+    const menuItemNodes = this.getMenuItemNodes(id);
     menuItemNodes && (0, _a11y.setFocusToFirstItem)(menuItemNodes);
   }
 
-  setFocusToLastMenuItem(target) {
-    const menuItemNodes = this.getMenuItemNodes(target);
+  setFocusToLastMenuItem(id) {
+    const menuItemNodes = this.getMenuItemNodes(id);
     menuItemNodes && (0, _a11y.setFocusToLastItem)(menuItemNodes);
   }
 
   handleKeyDown(event) {
+    var _a, _b;
+
+    const id = (_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.attributes['data-popupid']) === null || _b === void 0 ? void 0 : _b.value;
+
     switch (event.key) {
       case ' ':
       case 'Enter':
@@ -45,12 +58,12 @@ class DropdownFoundation extends _foundation.default {
         break;
 
       case 'ArrowDown':
-        this.setFocusToFirstMenuItem(event.target);
+        this.setFocusToFirstMenuItem(id);
         (0, _a11y.handlePrevent)(event);
         break;
 
       case 'ArrowUp':
-        this.setFocusToLastMenuItem(event.target);
+        this.setFocusToLastMenuItem(id);
         (0, _a11y.handlePrevent)(event);
         break;
 

package/lib/cjs/dropdown/menuFoundation.d.ts

@@ -2,7 +2,6 @@ import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 export default class DropdownMenuFoundation extends BaseFoundation<Partial<DefaultAdapter>> {
     menuItemNodes: HTMLElement[];
     firstChars: string[];
-    autoFocus(ulElement: any): void;
     handleEscape(menu: Element): void;
     setFocusByFirstCharacter(curItem: any, char: string): void;
     onMenuKeydown(event: any): void;

package/lib/cjs/dropdown/menuFoundation.js

@@ -16,17 +16,6 @@ class DropdownMenuFoundation extends _foundation.default {
     super(...arguments);
     this.menuItemNodes = null;
     this.firstChars = [];
-  } // if trigger is click, auto focus to the first menu item
-
-
-  autoFocus(ulElement) {
-    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");
-      (0, _a11y.setFocusToFirstItem)(this.menuItemNodes);
-    }
   }
 
   handleEscape(menu) {

package/lib/cjs/form/form.css

@@ -45,7 +45,6 @@
 }
 .semi-form-field-label {
   box-sizing: border-box;
-  padding-right: 16px;
   font-weight: 600;
   color: var(--semi-color-text-0);
   margin-bottom: 4px;
@@ -232,7 +231,6 @@
 .semi-rtl .semi-form-field-label,
 .semi-portal-rtl .semi-form-field-label {
   padding-right: 0;
-  padding-left: 16px;
 }
 .semi-rtl .semi-form-field-label-with-extra .semi-form-field-label-extra,
 .semi-portal-rtl .semi-form-field-label-with-extra .semi-form-field-label-extra {

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

@@ -18,7 +18,7 @@
   }
 }
 .semi-input {
-  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border 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), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
 }
 
@@ -38,7 +38,7 @@
   cursor: text;
   box-sizing: border-box;
   color: var(--semi-color-text-0);
-  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border 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), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
 }
 .semi-input-wrapper-default {

package/lib/cjs/input/textarea.css

@@ -10,7 +10,7 @@
   border-radius: var(--semi-border-radius-small);
   vertical-align: bottom;
   background-color: var(--semi-color-fill-0);
-  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border 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), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
 }
 .semi-input-textarea-wrapper:hover {
   background-color: var(--semi-color-fill-1);

package/lib/cjs/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/inputNumber/inputNumber.css

@@ -5,7 +5,7 @@
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
-  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border 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), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
 }
 .semi-input-number-suffix-btns {

package/lib/cjs/navigation/animation.scss

@@ -1,4 +1,4 @@
-$transition_duration-navigation_itemL1-bg: var(--semi-transition_duration-faster);//导航一级菜单-背景色-动画持续时间
+$transition_duration-navigation_itemL1-bg: var(--semi-transition_duration-none);//导航一级菜单-背景色-动画持续时间
 $transition_function-navigation_itemL1-bg: var(--semi-transition_function-easeIn);//导航一级菜单-背景色-过渡曲线
-$transition_delay-navigation_itemL1-bg: var(--semi-transition_delay-fastest);//导航一级菜单-背景色-延迟时间
+$transition_delay-navigation_itemL1-bg: var(--semi-transition_delay-none);//导航一级菜单-背景色-延迟时间
 

package/lib/cjs/navigation/navigation.css

@@ -63,7 +63,7 @@
   font-weight: 400;
   color: var(--semi-color-text-0);
   width: 100%;
-  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-navigation-sub-wrap .semi-navigation-sub-title-text, .semi-navigation-item-text {
   overflow: hidden;

package/lib/cjs/pagination/animation.scss

@@ -1,10 +1,10 @@
-$transition_duration-pagination_item-bg: var(--semi-transition_duration-faster);//翻页器页码-背景色-动画持续时间
+$transition_duration-pagination_item-bg: var(--semi-transition_duration-none);//翻页器页码-背景色-动画持续时间
 $transition_function-pagination_item-bg: var(--semi-transition_function-easeIn);//翻页器页码-背景色-过渡曲线
-$transition_delay-pagination_item-bg: var(--semi-transition_delay-fastest);//翻页器页码-背景色-延迟时间
+$transition_delay-pagination_item-bg: var(--semi-transition_delay-none);//翻页器页码-背景色-延迟时间
 
-$transition_duration-pagination_item-text: var(--semi-transition_duration-faster);//翻页器页码文本-背景色-动画持续时间
+$transition_duration-pagination_item-text: var(--semi-transition_duration-none);//翻页器页码文本-背景色-动画持续时间
 $transition_function-pagination_item-text: var(--semi-transition_function-easeIn);//翻页器页码文本-背景色-过渡曲线
-$transition_delay-pagination_item-text: var(--semi-transition_delay-fastest);//翻页器页码文本-背景色-延迟时间
+$transition_delay-pagination_item-text: var(--semi-transition_delay-none);//翻页器页码文本-背景色-延迟时间
 
 //transform token
 

package/lib/cjs/pagination/pagination.css

@@ -37,7 +37,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), 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), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
 }
 .semi-page-item:hover {