@douyinfe/semi-foundation 2.17.1 → 2.18.0-beta.0

package/lib/cjs/anchor/anchor.scss

@@ -1,4 +1,5 @@
 @import './variables.scss';
+@import "./animation.scss";
 
 $module: #{$prefix}-anchor;
 
@@ -17,6 +18,8 @@ $module: #{$prefix}-anchor;
         left: $spacing-anchor_slide-left;
         top: $spacing-anchor_slide-top;
         height: 100%;
+        box-sizing: border-box;
+        padding: $width-anchor-outline 0;
 
         &-muted {
             display: none;
@@ -64,6 +67,11 @@ $module: #{$prefix}-anchor;
     &-link {
         padding-left: $spacing-anchor_link-paddingLeft;
 
+        &-wrapper {
+            padding-right: $width-anchor-outline;
+            margin: $width-anchor-outline 0;
+        }
+
         &-title {
             cursor: pointer;
             color: $color-anchor_title-text-default;
@@ -72,7 +80,9 @@ $module: #{$prefix}-anchor;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
-
+            border-radius: $width-anchor-outline_border_radius;
+            transition: color $transition_duration-anchor_title-text $transition_function-anchor_title-text $transition_delay-anchor_title-text;//锚点选项文字的动效
+            transform: scale($transform_scale-anchor_title-text);
             &:hover {
                 color: $color-anchor_title-text-hover;
             }
@@ -81,6 +91,10 @@ $module: #{$prefix}-anchor;
                 color: $color-anchor_title-text-active;
             }
 
+            &:focus-visible {
+                outline: $width-anchor-outline solid $color-anchor_title-outline-focus;
+            }
+
             &-disabled {
                 color: $color-anchor_title-text-disabled;
                 cursor: not-allowed;

package/lib/cjs/anchor/animation.css

@@ -0,0 +1,3 @@
+/* shadow */
+/* sizing */
+/* spacing */

package/lib/cjs/anchor/animation.scss

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

package/lib/cjs/anchor/variables.scss

@@ -9,6 +9,8 @@ $color-anchor_title-text-hover: var(--semi-color-tertiary-hover); // 文字颜
 $color-anchor_title-text-active: var(--semi-color-text-0); // 文字颜色 - 选中
 $color-anchor_title-text-disabled: var(--semi-color-disabled-text); // 文字颜色 - 禁用
 
+$color-anchor_title-outline-focus: var(--semi-color-primary-light-active); // 轮廓 - 聚焦
+
 // Spacing
 $spacing-anchor_slide-left: $spacing-none; // 滑轨左侧位置
 $spacing-anchor_slide-top: $spacing-none; // 滑轨顶部位置
@@ -24,4 +26,8 @@ $height-anchor_slide_default: 20px; // 选项高度 - 默认
 $height-anchor_slide_small: 16px; // 选项高度 - 小尺寸
 
 // Radius
-$radius-anchor_slide: 1px; // 滑轨圆角
+$radius-anchor_slide: 1px; // 滑轨圆角
+
+// Witdh
+$width-anchor-outline: 2px; // anchor轮廓宽度
+$width-anchor-outline_border_radius: 3px; // anchor轮廓圆角

package/lib/cjs/autoComplete/animation.css

@@ -0,0 +1,3 @@
+/* shadow */
+/* sizing */
+/* spacing */

package/lib/cjs/autoComplete/animation.scss

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

package/lib/cjs/autoComplete/autoComplete.css

@@ -1,7 +1,7 @@
 /* shadow */
 /* sizing */
 /* spacing */
-.semi-select-option {
+.semi-autoComplete-option {
   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;
@@ -11,15 +11,16 @@
   padding-top: 8px;
   padding-bottom: 8px;
   color: var(--semi-color-text-0);
-  border-radius: 0;
+  border-radius: 0px;
   position: relative;
   display: flex;
   flex-wrap: nowrap;
   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);
 }
-.semi-select-option-icon {
+.semi-autoComplete-option-icon {
   width: 12px;
   color: transparent;
   visibility: hidden;
@@ -28,51 +29,51 @@
   justify-content: center;
   align-content: center;
 }
-.semi-select-option-text {
+.semi-autoComplete-option-text {
   display: flex;
   flex-wrap: wrap;
   white-space: pre;
 }
-.semi-select-option-keyword {
+.semi-autoComplete-option-keyword {
   color: var(--semi-color-primary);
   background-color: inherit;
   font-weight: 600;
 }
-.semi-select-option:active {
+.semi-autoComplete-option:active {
   background-color: var(--semi-color-fill-1);
 }
-.semi-select-option-empty {
+.semi-autoComplete-option-empty {
   cursor: not-allowed;
   color: var(--semi-color-disabled-text);
   justify-content: center;
 }
-.semi-select-option-empty:hover {
+.semi-autoComplete-option-empty:hover {
   background-color: inherit;
 }
-.semi-select-option-empty:active {
+.semi-autoComplete-option-empty:active {
   background-color: inherit;
 }
-.semi-select-option-disabled {
+.semi-autoComplete-option-disabled {
   color: var(--semi-color-disabled-text);
   cursor: not-allowed;
 }
-.semi-select-option-disabled:hover {
+.semi-autoComplete-option-disabled:hover {
   background-color: var(--semi-color-fill-0);
 }
-.semi-select-option-selected {
+.semi-autoComplete-option-selected {
   font-weight: 600;
 }
-.semi-select-option-selected .semi-select-option-icon {
+.semi-autoComplete-option-selected .semi-autoComplete-option-icon {
   visibility: visible;
   color: var(--semi-color-text-2);
 }
-.semi-select-option-focused {
+.semi-autoComplete-option-focused {
   background-color: var(--semi-color-fill-0);
 }
-.semi-select-option:first-of-type {
+.semi-autoComplete-option:first-of-type {
   margin-top: 4px;
 }
-.semi-select-option:last-of-type {
+.semi-autoComplete-option:last-of-type {
   margin-bottom: 4px;
 }
 

package/lib/cjs/autoComplete/autoComplete.scss

@@ -1,5 +1,6 @@
 @import "./variables.scss";
-@import "../select/option.scss";
+@import "./animation.scss";
+@import "./option.scss";
 
 $module: #{$prefix}-autocomplete;
 

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

@@ -1,5 +1,7 @@
 declare const cssClasses: {
     PREFIX: string;
+    PREFIX_OPTION: string;
+    PREFIX_GROUP: string;
 };
 declare const strings: {
     readonly SIZE: readonly ["small", "large", "default"];

package/lib/cjs/autoComplete/constants.js

@@ -13,7 +13,9 @@ var _constants = require("../tooltip/constants");
 var _constants2 = require("../base/constants");
 
 const cssClasses = {
-  PREFIX: "".concat(_constants2.BASE_CLASS_PREFIX, "-autocomplete")
+  PREFIX: "".concat(_constants2.BASE_CLASS_PREFIX, "-autocomplete"),
+  PREFIX_OPTION: "".concat(_constants2.BASE_CLASS_PREFIX, "-autoComplete-option"),
+  PREFIX_GROUP: "".concat(_constants2.BASE_CLASS_PREFIX, "-autoComplete-group")
 };
 exports.cssClasses = cssClasses;
 const strings = {

package/lib/cjs/autoComplete/option.scss

@@ -0,0 +1,93 @@
+$module: #{$prefix}-autoComplete;
+$filterable: #{$module}-filterable;
+
+.#{$module}-option {
+    @include font-size-regular;
+    word-break: break-all;
+    padding-left: $spacing-autoComplete_option-paddingLeft;
+    padding-right: $spacing-autoComplete_option-paddingRight;
+    padding-top: $spacing-autoComplete_option-paddingTop;
+    padding-bottom: $spacing-autoComplete_option-paddingBottom;
+    color: $color-autoComplete_option_main-text;
+    border-radius: $radius-autoComplete_option;
+    position: relative;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    cursor: pointer;
+    box-sizing: border-box;
+    transition: background-color $transition_duration-autoComplete_option-bg $transition_function-autoComplete_option-bg $transition_delay-autoComplete_option-bg;
+
+    &-icon {
+        width: $width-autoComplete_option_tick;
+        color: $color-autoComplete_option-icon-default;
+        visibility: hidden;
+        margin-right: $spacing-autoComplete_option_tick-marginRight;
+        display: flex;
+        justify-content: center;
+        align-content: center;
+    }
+
+    &-text {
+        display: flex;
+        flex-wrap: wrap;
+        white-space: pre;
+    }
+
+    &-keyword {
+        color: $color-autoComplete_option_keyword-text;
+        background-color: inherit;
+        font-weight: $font-autoComplete_keyword-fontWeight;
+    }
+    // &:hover {
+    //     background-color: $color-autoComplete_option-bg-hover;
+    // }
+
+    &:active {
+        background-color: $color-autoComplete_option-bg-active;
+    }
+
+    &-empty {
+        cursor: not-allowed;
+        color: $color-autoComplete_option_disabled-text;
+        justify-content: center;
+
+        &:hover {
+            background-color: inherit;
+        }
+
+        &:active {
+            background-color: inherit;
+        }
+    }
+
+    &-disabled {
+        color: $color-autoComplete_option_disabled-text;
+        cursor: not-allowed;
+
+        &:hover {
+            background-color: $color-autoComplete_option-bg-hover;
+        }
+    }
+
+    &-selected {
+        font-weight: $font-weight-bold;
+
+        .#{$module}-option-icon {
+            visibility: visible;
+            color: $color-autoComplete_option-icon-active;
+        }
+    }
+
+    &-focused {
+        background-color: $color-autoComplete_option-bg-hover;
+    }
+
+    &:first-of-type {
+        margin-top: $spacing-autoComplete_option_first-marginTop;
+    }
+
+    &:last-of-type {
+        margin-bottom: $spacing-autoComplete_option_last-marginBottom;
+    }
+}

package/lib/cjs/autoComplete/optionFoundation.d.ts

@@ -0,0 +1,21 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export interface BasicOptionProps {
+    [x: string]: any;
+    value?: string | number;
+    label?: string | number | unknown;
+    children?: unknown;
+    disabled?: boolean;
+    showTick?: boolean;
+    className?: string;
+    style?: Record<string, any>;
+}
+export interface OptionDefaultAdapter extends Partial<DefaultAdapter> {
+    notifyClick(option: BasicOptionProps): void;
+}
+export default class OptionFoundation extends BaseFoundation<OptionDefaultAdapter> {
+    constructor(adapter: OptionDefaultAdapter);
+    init(): void;
+    destroy(): void;
+    onOptionClick(option: BasicOptionProps): void;
+    _isDisabled(): any;
+}

package/lib/cjs/autoComplete/optionFoundation.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+class OptionFoundation extends _foundation.default {
+  constructor(adapter) {
+    super((0, _assign.default)({}, adapter));
+  } // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+
+  init() {} // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+
+  destroy() {}
+
+  onOptionClick(option) {
+    const isDisabled = this._isDisabled();
+
+    if (!isDisabled) {
+      this._adapter.notifyClick(option);
+    }
+  }
+
+  _isDisabled() {
+    return this.getProp('disabled');
+  }
+
+}
+
+exports.default = OptionFoundation;

package/lib/cjs/autoComplete/variables.scss

@@ -1,3 +1,50 @@
 // Spacing
 $spacing-autoComplete_loading_wrapper-paddingTop: $spacing-tight; //加载搜索结果时的顶部内边距
 $spacing-autoComplete_loading_wrapper-paddingBottom: $spacing-tight; //加载搜索结果时的底部内边距
+
+
+
+
+
+$color-autoComplete_option_keyword-text: var(--semi-color-primary); // 自动完成菜单选项匹配搜索结果文本颜色
+$color-autoComplete_option-bg-default: transparent; // 自动完成菜单选项背景颜色 - 默认态
+$color-autoComplete_option-icon-default: transparent; // 自动完成菜单选项图标颜色 - 默认态
+$color-autoComplete_option-bg-hover: var(--semi-color-fill-0); // 自动完成菜单选项背景颜色 - 悬停态
+$color-autoComplete_option-bg-active: var(--semi-color-fill-1); // 自动完成菜单选项背景颜色 - 按下态
+$color-autoComplete_option_disabled-text: var(--semi-color-disabled-text); // 禁用自动完成菜单选项文字颜色
+$color-autoComplete_option_disabled-bg: transparent; // 禁用自动完成菜单选项背景颜色
+$color-autoComplete_option-icon-active: var(--semi-color-text-2); // 禁用自动完成菜单选项图标颜色 - 选中态
+$color-autoComplete_option-border-default: var(--semi-color-border); // 分组自动完成菜单项描边颜色
+
+$width-autoComplete_option_tick: $width-icon-small; // 自动完成菜单项选中对勾图标大小
+$spacing-autoComplete_option_tick-marginRight: $spacing-tight; // 自动完成菜单选中对勾右侧外边距
+
+$spacing-autoComplete_option-paddingLeft: $spacing-base-tight; // 自动完成菜单项左侧内边距
+$spacing-autoComplete_option-paddingRight: $spacing-base-tight; // 自动完成菜单项右侧内边距
+$spacing-autoComplete_option-paddingTop: $spacing-tight; // 自动完成菜单项顶部内边距
+$spacing-autoComplete_option-paddingBottom: $spacing-tight; // 自动完成菜单项底部内边距
+$spacing-autoComplete_option_first-marginTop: $spacing-extra-tight; // 自动完成第一个菜单项顶部外边距
+$spacing-autoComplete_option_last-marginBottom: $spacing-extra-tight; // 自动完成最后一个菜单项顶部外边距
+
+$spacing-autoComplete_option_list-paddingTop: 0px; // 自动完成内容区顶部内边距
+$spacing-autoComplete_option_list-paddingRight: 0px; // 自动完成内容区右侧内边距
+$spacing-autoComplete_option_list-paddingBottom: 0px; // 自动完成内容区底部内边距
+$spacing-autoComplete_option_list-paddingLeft: 0px; // 自动完成内容区左侧内边距
+
+$radius-autoComplete_option: 0px; // 自动完成待选项圆角
+
+$color-autoComplete_option_main-text: var(--semi-color-text-0); // 自动完成菜单选项文本颜色
+
+$color-autoComplete_option-bg-default: transparent; // 自动完成菜单选项背景颜色 - 默认态
+$color-autoComplete_option-icon-default: transparent; // 自动完成菜单选项图标颜色 - 默认态
+$color-autoComplete_option-bg-hover: var(--semi-color-fill-0); // 自动完成菜单选项背景颜色 - 悬停态
+$color-autoComplete_option-bg-active: var(--semi-color-fill-1); // 自动完成菜单选项背景颜色 - 按下态
+$color-autoComplete_option_disabled-text: var(--semi-color-disabled-text); // 禁用自动完成菜单选项文字颜色
+$color-autoComplete_option_disabled-bg: transparent; // 禁用自动完成菜单选项背景颜色
+$color-autoComplete_option-icon-active: var(--semi-color-text-2); // 禁用自动完成菜单选项图标颜色 - 选中态
+$color-autoComplete_option-border-default: var(--semi-color-border); // 分组自动完成菜单项描边颜色
+
+
+$font-autoComplete-fontWeight: $font-weight-regular; // 自动完成文本字重
+$font-autoComplete_inset_label-fontWeight: 600; // 自动完成内嵌标签文本字重
+$font-autoComplete_keyword-fontWeight: 600; // 自动完成搜索结果命关键词中文本字重

package/lib/cjs/avatar/avatar.scss

@@ -1,10 +1,9 @@
-@import "./variables.scss";
-@import "./mixin.scss";
+@import './variables.scss';
+@import './mixin.scss';
 
 $module: #{$prefix}-avatar;
-$colors: "amber", "blue", "cyan", "green", "grey", "indigo", "light-blue", "light-green", "lime", "orange", "pink",
-    "purple", "red", "teal", "violet", "yellow";
-
+$colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'light-green', 'lime', 'orange', 'pink',
+    'purple', 'red', 'teal', 'violet', 'yellow';
 
 .#{$module} {
     position: relative;
@@ -211,4 +210,4 @@ $colors: "amber", "blue", "cyan", "green", "grey", "indigo", "light-blue", "ligh
     }
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

package/lib/cjs/breadcrumb/animation.css

@@ -0,0 +1,3 @@
+/* shadow */
+/* sizing */
+/* spacing */

package/lib/cjs/breadcrumb/animation.scss

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

package/lib/cjs/breadcrumb/breadcrumb.css

@@ -21,7 +21,7 @@
 .semi-breadcrumb-item-wrap {
   display: inline-flex;
   align-items: center;
-  margin: 4px 0;
+  margin: 4px 0px;
   margin-right: 4px;
 }
 .semi-breadcrumb-item {
@@ -60,6 +60,8 @@
   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);
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-breadcrumb-item-link:hover {
   color: var(--semi-color-link);

package/lib/cjs/breadcrumb/breadcrumb.scss

@@ -2,6 +2,7 @@
 // @import '../theme/mixin.scss';
 // @import '../theme/_font.scss';
 @import './variables.scss';
+@import "./animation.scss";
 
 $module: #{$prefix}-breadcrumb;
 
@@ -24,7 +25,7 @@ $module: #{$prefix}-breadcrumb;
     &-item-wrap {
         display: inline-flex;
         align-items: center;
-        margin: $spacing-breadcrumb_item_wrap-marginY 0;
+        margin: $spacing-breadcrumb_item_wrap-marginY 0px;
         margin-right: $spacing-breadcrumb_item_wrap-marginRight;
     }
 
@@ -88,6 +89,8 @@ $module: #{$prefix}-breadcrumb;
         align-items: center;
         column-gap: 4px;
         text-decoration: inherit;
+        transition: color $transition_duration-breadcrumb_link-text $transition-function_breadcrumb_link-text $transition_delay-breadcrumb_link-text;
+        transform: scale($transform_scale-breadcrumb_link-text);
 
         &:hover {
             color: $color-breadcrumb_default-text-hover;

package/lib/cjs/button/animation.css

@@ -0,0 +1,3 @@
+/* shadow */
+/* sizing */
+/* spacing */

package/lib/cjs/button/animation.scss

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

package/lib/cjs/button/button.css

@@ -50,6 +50,8 @@
 .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);
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-button-danger:hover {
   background-color: var(--semi-color-danger-hover);
@@ -66,6 +68,8 @@
 .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);
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-button-warning:hover {
   background-color: var(--semi-color-warning-hover);
@@ -82,6 +86,8 @@
 .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);
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-button-tertiary:hover {
   background-color: var(--semi-color-tertiary-hover);
@@ -95,6 +101,8 @@
 .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);
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):hover {
   background-color: var(--semi-color-primary-hover);
@@ -109,6 +117,8 @@
   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);
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-button-secondary:hover {
   background-color: var(--semi-color-secondary-hover);
@@ -134,6 +144,8 @@
 .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);
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-button-borderless:not(.semi-button-disabled):hover {
   background-color: var(--semi-color-fill-0);
@@ -146,6 +158,8 @@
 .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);
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-button-light:not(.semi-button-disabled):hover {
   background-color: var(--semi-color-fill-1);