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

package/lib/cjs/table/animation.css

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

package/lib/cjs/table/animation.scss

@@ -0,0 +1,3 @@
+$transition_duration-table_body-bg: var(--semi-transition_duration-faster); // 表格-背景颜色-动画持续时间
+$transition_function-table_body-bg: var(--semi-transition_function-easeOut); // 表格-背景颜色-过渡曲线
+$transition_delay-table_body-bg: 0ms; // 表格-背景颜色-延迟时间

package/lib/cjs/table/table.css

@@ -237,6 +237,12 @@
   border-left: 1px solid var(--semi-color-border);
   box-shadow: -3px 0 0 0 var(--semi-color-shadow);
 }
+.semi-table-tbody > .semi-table-row > .semi-table-cell-fixed > * {
+  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeOut) 0ms;
+}
+.semi-table-tbody > .semi-table-row > * {
+  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeOut) 0ms;
+}
 .semi-table-tbody > .semi-table-row-section {
   display: table-row;
 }

package/lib/cjs/table/table.scss

@@ -1,6 +1,7 @@
-@import "./variables.scss";
-@import "./mixin.scss";
-@import "./operationPanel.scss";
+@import './variables.scss';
+@import './mixin.scss';
+@import './operationPanel.scss';
+@import './animation.scss';
 
 $module: #{$prefix}-table;
 
@@ -23,7 +24,7 @@ $module: #{$prefix}-table;
         color: $color-table-text-default;
         width: 100%;
 
-        &[data-column-fixed=true] {
+        &[data-column-fixed='true'] {
             z-index: 1;
         }
     }
@@ -76,7 +77,6 @@ $module: #{$prefix}-table;
             display: table-column;
         }
         .#{$module}-column {
-
             &-expand,
             &-selection {
                 width: $width-table_column_selection;
@@ -102,7 +102,6 @@ $module: #{$prefix}-table;
                 position: relative;
 
                 &.#{$module}-cell-fixed {
-
                     &-left,
                     &-right {
                         z-index: $z-table_fixed_column;
@@ -111,7 +110,7 @@ $module: #{$prefix}-table;
 
                         &::before {
                             background-color: $color-table_th-bg-default;
-                            content: "";
+                            content: '';
                             position: absolute;
                             left: 0;
                             top: 0;
@@ -141,7 +140,7 @@ $module: #{$prefix}-table;
 
                         // scroll-bar 列无需有box-shadow
 
-                        &[x-type="column-scrollbar"] {
+                        &[x-type='column-scrollbar'] {
                             box-shadow: none;
                             border-left: transparent;
                         }
@@ -152,7 +151,7 @@ $module: #{$prefix}-table;
                     text-align: center;
                 }
 
-                &[colspan]:not([colspan="1"]) {
+                &[colspan]:not([colspan='1']) {
                     text-align: center;
                 }
 
@@ -198,14 +197,13 @@ $module: #{$prefix}-table;
                     background-color: $color-table_body-bg-hover;
 
                     &.#{$module}-cell-fixed {
-
                         &-left,
                         &-right {
                             background-color: $color-table_body-bg-default;
 
                             &::before {
                                 background-color: $color-table_body-bg-hover;
-                                content: "";
+                                content: '';
                                 position: absolute;
                                 left: 0;
                                 top: 0;
@@ -236,7 +234,6 @@ $module: #{$prefix}-table;
                 }
             }
             &.#{$module}-row {
-
                 &-expand {
                     & > .#{$module}-row-cell {
                         background-color: $color-table_row_expanded-bg-default;
@@ -245,10 +242,9 @@ $module: #{$prefix}-table;
             }
 
             & > .#{$module}-cell-fixed {
-
                 &-left,
                 &-right {
-                    z-index: $z-table_fixed_column;;
+                    z-index: $z-table_fixed_column;
                     position: sticky;
                     background-color: $color-table-bg-default;
                 }
@@ -262,6 +258,16 @@ $module: #{$prefix}-table;
                     border-left: $width-table_cell_fixed_right_first solid $color-table_shadow-border-default;
                     box-shadow: #{$shadow-table_left};
                 }
+
+                & > * {
+                    transition: background-color $transition_duration-table_body-bg $transition_function-table_body-bg
+                        $transition_delay-table_body-bg;
+                }
+            }
+
+            & > * {
+                transition: background-color $transition_duration-table_body-bg $transition_function-table_body-bg
+                    $transition_delay-table_body-bg;
             }
         }
 
@@ -322,7 +328,6 @@ $module: #{$prefix}-table;
     }
 
     .#{$module}-selection {
-
         &-wrap {
             // inline-flex vertical-align baseline 会导致父元素高度异常
             display: inline-flex;
@@ -339,7 +344,6 @@ $module: #{$prefix}-table;
     }
 
     .#{$module}-column {
-
         &-hidden {
             display: none;
         }
@@ -433,7 +437,6 @@ $module: #{$prefix}-table;
         }
 
         .#{$module}-header {
-
             &::-webkit-scrollbar {
                 border-right: $border-table;
             }
@@ -446,7 +449,6 @@ $module: #{$prefix}-table;
         }
 
         .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
-
             .react-resizable-handle {
                 background-color: transparent;
             }
@@ -496,7 +498,6 @@ $module: #{$prefix}-table;
 
         // when header is fixed, table should use `table-layout: fixed` to avoid align bug
         &-header {
-
             table {
                 table-layout: fixed;
             }
@@ -504,9 +505,7 @@ $module: #{$prefix}-table;
     }
 
     &-scroll {
-
         &-position {
-
             &-left {
                 .#{$module}-tbody,
                 .#{$module}-thead {
@@ -550,4 +549,4 @@ $module: #{$prefix}-table;
     }
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

package/lib/cjs/tabs/animation.css

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

package/lib/cjs/tabs/animation.scss

@@ -0,0 +1,23 @@
+$transition_duration-tabs_tab_line-border: var(--semi-transition_duration-faster);//线条式标签页标示线-边框-动画持续时间
+$transition_function-tabs_tab_line-border: var(--semi-transition_function-easeIn);//线条式标签页标示线-边框-过渡曲线
+$transition_delay-tabs_tab_line-border: var(--semi-transition_delay-fastest);//线条式标签页标示线-边框-延迟时间
+
+$transition_duration-tabs_tab_line-text: var(--semi-transition_duration-faster);//线条式标签页-文字-动画持续时间
+$transition_function-tabs_tab_line-text: var(--semi-transition_function-easeIn);//线条式标签页-文字-过渡曲线
+$transition_delay-tabs_tab_line-text: var(--semi-transition_delay-fastest);//线条式标签页-文字-延迟时间
+
+
+$transition_duration-tabs_tab_button-bg: var(--semi-transition_duration-faster);//按钮式标签页-背景色-动画持续时间
+$transition_function-tabs_tab_button-bg: var(--semi-transition_function-easeIn);//按钮式标签页-背景色-过渡曲线
+$transition_delay-tabs_tab_button-bg: var(--semi-transition_delay-fastest);//按钮式标签页-背景色-延迟时间
+
+
+$transition_duration-tabs_tab_card-bg: var(--semi-transition_duration-faster);//卡片式标签页文字-背景色-动画持续时间
+$transition_function-tabs_tab_card-bg: var(--semi-transition_function-easeIn);//卡片式标签页文字-背景色-过渡曲线
+$transition_delay-tabs_tab_card-bg: var(--semi-transition_delay-fastest);//卡片式标签页文字-背景色-延迟时间
+
+//transform token
+
+$transform_scale-tabs_tab_line-item: var(--semi-transform_scale-none);//线条式标签页item 放大
+$transform_scale-tabs_tab_button-item: var(--semi-transform_scale-none);//按钮式标签页item 放大
+$transform_scale-tabs_tab_card-item: var(--semi-transform_scale-none);//线条式标签页item 放大

package/lib/cjs/tabs/tabs.css

@@ -39,6 +39,7 @@
   margin-right: 8px;
   top: 3px;
   color: var(--semi-color-text-2);
+  transition: color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
 }
 .semi-tabs-bar .semi-tabs-tab .semi-icon-close {
   margin-right: 0;
@@ -123,9 +124,12 @@
 }
 .semi-tabs-bar-line.semi-tabs-bar-top {
   border-bottom: 1px solid var(--semi-color-border);
+  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-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab {
   padding: 16px 4px 14px 4px;
+  transition: border-bottom-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);
   border-bottom: 2px solid transparent;
 }
 .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:nth-of-type(1) {
@@ -159,6 +163,7 @@
 .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab {
   padding: 12px;
   border-left: 2px solid transparent;
+  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);
 }
 .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:hover {
   border-left: 2px solid var(--semi-color-fill-0);
@@ -249,6 +254,8 @@
 }
 .semi-tabs-bar-card .semi-tabs-tab {
   padding: 8px 12px;
+  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);
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-tabs-bar-card .semi-tabs-tab:hover {
   background: var(--semi-color-fill-0);
@@ -274,6 +281,8 @@
   border-radius: var(--semi-border-radius-small);
   color: var(--semi-color-text-2);
   border: none;
+  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);
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-tabs-bar-button .semi-tabs-tab:hover {
   border: none;

package/lib/cjs/tabs/tabs.scss

@@ -1,5 +1,6 @@
 //@import '../theme/variables.scss';
 @import "./variables.scss";
+@import "./animation.scss";
 
 $module: #{$prefix}-tabs;
 
@@ -44,6 +45,8 @@ $module: #{$prefix}-tabs;
                 margin-right: $spacing-tabs_tab_icon-marginRight;
                 top: $spacing-tabs_tab_icon-top;
                 color: $color-tabs_tab-icon-default;
+                transition: color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//线条式tabs的 color的transition
+           
             }
             
             .#{$prefix}-icon-close {
@@ -156,10 +159,13 @@ $module: #{$prefix}-tabs;
     &-bar-line {
         &.#{$module}-bar-top {
             border-bottom: $width-tabs_bar_line-border solid $color-tabs_tab_line_default-border-default;
+            transition: color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//线条式tabs的 color的transition
+            transform:scale($transform_scale-tabs_tab_line-item);
             
             .#{$module}-tab {
                 padding: $spacing-tabs_bar_line_tab-paddingTop $spacing-tabs_bar_line_tab-paddingRight $spacing-tabs_bar_line_tab-paddingBottom $spacing-tabs_bar_line_tab-paddingLeft;
-                
+                transition: border-bottom-color $transition_duration-tabs_tab_line-border $transition_function-tabs_tab_line-border $transition_delay-tabs_tab_line-border,
+                color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//线条式tabs的border-color 的 transition
                 &:nth-of-type(1) {
                     padding-left: 0;
                 }
@@ -207,7 +213,9 @@ $module: #{$prefix}-tabs;
             .#{$module}-tab {
                 padding: $spacing-tabs_bar_line_tab_left-padding;
                 border-left: $width-tabs_bar_line_tab-border solid transparent;
-                
+                transition: background-color $transition_duration-tabs-tab_button-bg $transition_function-tabs_tab_button-bg $transition_delay-tabs_tab_button-bg,//按钮tabs的背景色的transition
+                color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//按钮式tabs的 color的transition
+          
                 &:hover {
                     border-left: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
                     background-color: $color-tabs_tab_line_vertical-bg-hover;
@@ -338,6 +346,10 @@ $module: #{$prefix}-tabs;
         
         .#{$module}-tab {
             padding: $spacing-tabs_bar_card_tab-paddingY $spacing-tabs_bar_card_tab-paddingX;
+            transition: background-color $transition_duration-tabs_tab_card-bg $transition_function-tabs_tab_card-bg $transition_delay-tabs_tab_card-bg, //卡片式tabs的bg的transition
+            color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//卡片式tabs的 color的transition
+          
+            transform:scale($transform_scale-tabs_tab_card-item);
             
             &:hover {
                 background: $color-tabs_tab_card-bg-hover;
@@ -380,6 +392,10 @@ $module: #{$prefix}-tabs;
             border-radius: $radius-tabs_tab_button;
             color: $color-tabs_tab_button-text-default;
             border: none;
+            transition: background-color $transition_duration-tabs-tab_button-bg $transition_function-tabs_tab_button-bg $transition_delay-tabs_tab_button-bg,//按钮tabs的背景色的transition
+            color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//按钮式tabs的 color的transition
+          
+            transform:scale($transform_scale-tabs_tab_button-item);
             
             &:hover {
                 border: none;

package/lib/cjs/tagInput/animation.css

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

package/lib/cjs/tagInput/animation.scss

@@ -0,0 +1,7 @@
+$transition_duration-tagInput-bg: var(--semi-transition_duration-faster);//标签输入框-背景色-动画持续时间
+$transition_function-tagInput-bg: var(--semi-transition_function-easeIn);//标签输入框-背景色-过渡曲线
+$transition_delay-tagInput-bg: var(--semi-transition_delay-fastest);//标签输入框-背景色-延迟时间
+
+$transition_duration-tagInput-border: var(--semi-transition_duration-faster);//标签输入框-边框-动画持续时间
+$transition_function-tagInput-border: var(--semi-transition_function-easeIn);//标签输入框-边框-过渡曲线
+$transition_delay-tagInput-border: var(--semi-transition_delay-fastest);//标签输入框-边框-延迟时间

package/lib/cjs/tagInput/tagInput.css

@@ -9,6 +9,7 @@
   font-weight: 400;
   width: 100%;
   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);
 }
 .semi-tagInput-drag-item {
   display: flex;

package/lib/cjs/tagInput/tagInput.scss

@@ -1,4 +1,5 @@
 @import "./variables.scss";
+@import "./animation.scss";
 
 $module: #{$prefix}-tagInput;
 
@@ -10,7 +11,9 @@ $module: #{$prefix}-tagInput;
     font-weight: $font-weight-regular;
     width: 100%;
     box-sizing: border-box;
-    
+    transition: background-color $transition_duration-tagInput-bg $transition_function-tagInput-bg $transition_delay-tagInput-bg,
+    border $transition_duration-tagInput-border $transition_function-tagInput-border $transition_delay-tagInput-border;
+
     &-drag {
 
         &-item {

package/lib/cjs/timePicker/utils/animation.css

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

package/lib/cjs/timePicker/utils/animation.scss

@@ -0,0 +1,7 @@
+$transition_duration-timePicker-bg: var(--semi-transition_duration-faster);//标签输入框-背景色-动画持续时间
+$transition_function-tagInput-bg: var(--semi-transition_function-easeIn);//标签输入框-背景色-过渡曲线
+$transition_delay-tagInput-bg: var(--semi-transition_delay-fastest);//标签输入框-背景色-延迟时间
+
+$transition_duration-tagInput-border: var(--semi-transition_duration-faster);//标签输入框-边框-动画持续时间
+$transition_function-tagInput-border: var(--semi-transition_function-easeIn);//标签输入框-边框-过渡曲线
+$transition_delay-tagInput-border: var(--semi-transition_delay-fastest);//标签输入框-边框-延迟时间

package/lib/cjs/transfer/animation.css

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

package/lib/cjs/transfer/animation.scss

@@ -0,0 +1,4 @@
+$transition_duration_transfer_item-bg: var(--semi-transition_duration-faster);//穿梭框条目-背景色-动画持续时间
+$transition_function_transfer_item-bg: var(--semi-transition_function-easeIn);//穿梭框条目-背景色-过渡曲线
+$transition_delay_transfer_item-bg: var(--semi-transition_delay-fastest);//穿梭框条目-背景色-延迟时间
+

package/lib/cjs/transfer/transfer.css

@@ -71,6 +71,7 @@
   flex-wrap: nowrap;
   color: var(--semi-color-text-1);
   cursor: pointer;
+  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
 }
 .semi-transfer-item:hover {
   background-color: var(--semi-color-fill-0);

package/lib/cjs/transfer/transfer.scss

@@ -1,4 +1,5 @@
 @import "./variables.scss";
+@import "./animation.scss";
 
 $module: #{$prefix}-transfer;
 
@@ -75,6 +76,9 @@ $module: #{$prefix}-transfer;
         flex-wrap: nowrap;
         color: $color-transfer_item-text;
         cursor: pointer;
+        transition: background-color $transition_duration_transfer_item-bg $transition_function-transfer_item-bg $transition_delay-transfer_item-bg;
+
+
 
         &:hover {
             background-color: $color-transfer_item-bg-hover;

package/lib/cjs/tree/animation.css

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

package/lib/cjs/tree/animation.scss

@@ -0,0 +1,7 @@
+$transition_duration-tree_option-bg: var(--semi-transition_duration-faster);//树选项-背景色-动画持续时间
+$transition_function-tree_option-bg: var(--semi-transition_function-easeIn);//树选项-背景色-过渡曲线
+$transition_delay-tree_option-bg: var(--semi-transition_delay-fastest);//树选项-背景色-延迟时间
+
+//transform token
+
+$transform_scale-tree-option: var(--semi-transform_scale-none);//树选项-放大

package/lib/cjs/tree/tree.css

@@ -45,6 +45,8 @@
   display: flex;
   align-items: center;
   cursor: pointer;
+  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));
   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/tree/tree.scss

@@ -1,4 +1,5 @@
 @import './variables.scss';
+@import "./animation.scss";
 
 $module: #{$prefix}-tree;
 
@@ -53,6 +54,8 @@ $module: #{$prefix}-tree;
         display: flex;
         align-items: center;
         cursor: pointer;
+        transition: background-color $transition_duration-tree_option-bg $transition_function-tree_option-bg $transition_delay-tree_option-bg;
+        transform:scale($transform_scale-tree-option);
 
         @include font-size-regular;
         word-break: break-word;

package/lib/es/anchor/anchor.css

@@ -19,6 +19,8 @@
   left: 0;
   top: 0;
   height: 100%;
+  box-sizing: border-box;
+  padding: 2px 0;
 }
 .semi-anchor-slide-muted {
   display: none;
@@ -57,6 +59,10 @@
 .semi-anchor-link {
   padding-left: 8px;
 }
+.semi-anchor-link-wrapper {
+  padding-right: 2px;
+  margin: 2px 0;
+}
 .semi-anchor-link-title {
   cursor: pointer;
   color: var(--semi-color-text-2);
@@ -65,6 +71,9 @@
   overflow: hidden;
   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);
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-anchor-link-title:hover {
   color: var(--semi-color-tertiary-hover);
@@ -72,6 +81,9 @@
 .semi-anchor-link-title-active {
   color: var(--semi-color-text-0);
 }
+.semi-anchor-link-title:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
 .semi-anchor-link-title-disabled {
   color: var(--semi-color-disabled-text);
   cursor: not-allowed;

package/lib/es/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/es/anchor/animation.css

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

package/lib/es/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/es/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/es/autoComplete/animation.css

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

package/lib/es/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);//选择器-选项-延迟时间