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

package/lib/cjs/checkbox/checkbox.scss

@@ -1,6 +1,7 @@
 //@import '../theme/variables.scss';
 // @import '../theme/mixin.scss';
 @import "./variables.scss";
+@import "./animation.scss";
 @import "./mixin.scss";
 
 $module: #{$prefix}-checkbox;
@@ -14,6 +15,9 @@ $module: #{$prefix}-checkbox;
     flex-wrap: wrap;
     @include font-size-regular;
     cursor: pointer;
+    transition: background-color $transition_duration-checkbox-bg $transition_function-checkbox-bg $transition_delay-checkbox-bg,
+    border $transition_duration-checkbox-border $transition_function-checkbox-border $transition_delay-checkbox-border;
+    transform: scale($transform_scale-checkbox);
 
     input[type="checkbox"] {
         position: absolute;
@@ -93,6 +97,8 @@ $module: #{$prefix}-checkbox;
             height: $width-checkbox_inner;
             margin: 0;
             background: $color-checkbox_default-bg-default;
+            transition: background-color $transition_duration-checkbox-bg $transition_function-checkbox-bg $transition_delay-checkbox-bg,
+                border $transition_duration-checkbox-border $transition_function-checkbox-border $transition_delay-checkbox-border;
 
             box-shadow: inset 0 0 0 $size-checkbox_inner-shadow $color-checkbox_default-border-default;
             border-radius: $radius-checkbox_inner;
@@ -112,7 +118,7 @@ $module: #{$prefix}-checkbox;
             border-radius: $radius-checkbox_inner;
         }
 
-        & > .#{$module}-addon {
+        &>.#{$module}-addon {
             color: $color-checkbox_label-text-default;
         }
     }
@@ -178,11 +184,14 @@ $module: #{$prefix}-checkbox;
         background: transparent;
         border: $width-checkbox_cardType_checked-border solid transparent;
 
+
         .#{$module}-inner {
             position: relative;
+
             &-display {
                 background: $color-checkbox_cardType_inner-bg-default;
             }
+
             margin-right: $spacing-checkbox_cardType_inner-marginRight;
             flex-shrink: 0;
         }
@@ -232,6 +241,7 @@ $module: #{$prefix}-checkbox;
             &:hover {
                 background: $color-checkbox_cardType_checked-bg;
                 border-color: $color-checkbox_cardType_checked_border-hover;
+
                 .#{$module}-inner-checked .#{$module}-inner-display {
                     box-shadow: none;
                 }
@@ -247,12 +257,13 @@ $module: #{$prefix}-checkbox;
             &:active {
                 background: transparent;
             }
+
             &:hover {
                 background: transparent;
             }
         }
 
-        &_checked_disabled.#{$module}-cardType  {
+        &_checked_disabled.#{$module}-cardType {
             background: $color-checkbox_cardType_checked_disabled-bg;
             border: $width-checkbox_cardType_checked_disabled-border solid $color-checkbox_cardType_checked_disabled_border-default;
 
@@ -355,7 +366,7 @@ $module: #{$prefix}-checkbox;
 
     &-focus {
         outline: $width-checkbox-outline solid $color-checkbox_primary-outline-focus;
-        
+
         &-border {
             box-shadow: inset 0 0 0 $size-checkbox_inner-shadow $color-checkbox_default-border-hover;
         }
@@ -366,6 +377,7 @@ $module: #{$prefix}-checkbox;
     @include font-size-regular;
     // make sure group height 32px
     line-height: $font-size-regular;
+
     .#{$module} {
         &.#{$module}-vertical {
             margin-bottom: $spacing-checkbox_group_vertical-marginBottom;
@@ -376,6 +388,7 @@ $module: #{$prefix}-checkbox;
         .#{$module} {
             margin-right: $spacing-checkbox_group_horizontal-marginRight;
             display: inline-flex;
+
             &:last-of-type {
                 margin-right: 0;
             }
@@ -385,10 +398,12 @@ $module: #{$prefix}-checkbox;
     &-vertical {
         .#{$module} {
             margin-bottom: $spacing-checkbox_group_vertical_item-marginBottom;
+
             &:last-of-type {
                 margin-bottom: 0;
             }
         }
+
         &-cardType {
             .#{$module} {
                 margin-bottom: $spacing-checkbox_card_group_vertical-marginBottom;
@@ -397,4 +412,4 @@ $module: #{$prefix}-checkbox;
     }
 }
 
-@import "./rtl.scss";
+@import "./rtl.scss";

package/lib/cjs/datePicker/animation.css

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

package/lib/cjs/datePicker/animation.scss

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

package/lib/cjs/dropdown/animation.css

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

package/lib/cjs/dropdown/animation.scss

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

package/lib/cjs/dropdown/dropdown.css

@@ -45,6 +45,7 @@
   max-width: 280px;
   display: flex;
   align-items: center;
+  transition: background-color var(--semi-transition_duration-fastest) 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/dropdown.scss

@@ -1,5 +1,6 @@
 //@import '../theme/variables.scss';
 @import './variables.scss';
+@import './animation.scss';
 
 $module: #{$prefix}-dropdown;
 
@@ -43,6 +44,9 @@ $module: #{$prefix}-dropdown;
         max-width: $width-dropdown;
         display: flex;
         align-items: center;
+        transition: background-color $transition_duration-dropdown_item-bg $transition_function-dropdown_item-bg
+            $transition_delay-dropdown_item-bg;
+
         &:not(.#{$module}-item-active):hover {
             background-color: $color-dropdown_item-bg-hover;
             cursor: pointer;
@@ -107,4 +111,4 @@ $module: #{$prefix}-dropdown;
     }
 }
 
-@import './rtl.scss';
+@import './rtl.scss';

package/lib/cjs/form/form.css

@@ -68,6 +68,9 @@
 .semi-form-field-label-required-disabled {
   color: var(--semi-color-danger);
 }
+.semi-form-field-label-optional-text {
+  color: var(--semi-color-tertiary);
+}
 .semi-form-field-label-left {
   text-align: left;
 }

package/lib/cjs/form/form.scss

@@ -109,14 +109,15 @@ $rating: #{$prefix}-rating;
                     font-weight: $font-form_requiredMark-fontWeight;
                 }
             }
-            // .#{$field}-label-extra {
-            // }
-
             &-disabled {
                 color: $color-form_requiredMark_disabled-text-default;
             }
         }
 
+        &-optional-text {
+            color: $color-form_label_optional-text-default;
+        }
+
         &-left {
             text-align: left;
         }

package/lib/cjs/form/variables.scss

@@ -32,6 +32,7 @@ $font-form_label-fontWeight: $font-weight-bold; // 表单标题字重
 $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); // 表单额外信息辅助文字颜色
 
 $color-form_label_disabled-text-default: var(--semi-color-disabled-text); // 禁用表单项标题文字颜色

package/lib/cjs/input/animation.css

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

package/lib/cjs/input/animation.scss

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

package/lib/cjs/input/input.css

@@ -17,6 +17,11 @@
     transform: scale(1);
   }
 }
+.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);
+  transform: scale(var(--semi-transform_scale-none));
+}
+
 .semi-input-wrapper {
   display: inline-block;
   position: relative;
@@ -33,6 +38,8 @@
   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);
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-input-wrapper-default {
   height: 32px;

package/lib/cjs/input/input.scss

@@ -1,5 +1,6 @@
 //@import '../theme/variables.scss';
 @import './variables.scss';
+@import "./animation.scss";
 
 $module: #{$prefix}-input;
 
@@ -23,6 +24,12 @@ $module: #{$prefix}-input;
     }
 }
 
+.#{$module}{
+    transition: background-color $transition_duration-input-bg $transition_function-input-bg $transition_delay-input-bg,
+    border $transition_duration-input-border $transition_function-input-border $transition_delay-input-border;
+    transform: scale($transform_scale-input);
+}
+
 .#{$module}-wrapper {
     display: inline-block;
     position: relative;
@@ -40,6 +47,11 @@ $module: #{$prefix}-input;
     box-sizing: border-box;
     color: $color-input_default-text-default;
 
+    transition: background-color $transition_duration-input-bg $transition_function-input-bg $transition_delay-input-bg,
+     border $transition_duration-input-border $transition_function-input-border $transition_delay-input-border;
+
+    transform: scale($transform_scale-input);
+
     &-default {
         height: $height-input_wrapper_default;
         @include font-size-regular;

package/lib/cjs/input/textarea.css

@@ -10,6 +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);
 }
 .semi-input-textarea-wrapper:hover {
   background-color: var(--semi-color-fill-1);

package/lib/cjs/input/textarea.scss

@@ -1,4 +1,5 @@
 @import "./variables.scss";
+@import "./animation.scss";
 
 $module: #{$prefix}-input;
 
@@ -12,6 +13,8 @@ $module: #{$prefix}-input;
     border-radius: $radius-input_wrapper;
     vertical-align: bottom;
     background-color: $color-input_default-bg-default;
+    transition: background-color $transition_duration-input-bg $transition_function-input-bg $transition_delay-input-bg,
+    border $transition_duration-input-border $transition_function-input-border $transition_delay-input-border;
 
     &:hover {
         background-color: $color-input_default-bg-hover;

package/lib/cjs/inputNumber/animation.css

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

package/lib/cjs/inputNumber/animation.scss

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

package/lib/cjs/inputNumber/inputNumber.css

@@ -5,6 +5,8 @@
   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);
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-input-number-suffix-btns {
   display: inline-flex;

package/lib/cjs/inputNumber/inputNumber.scss

@@ -1,3 +1,4 @@
+@import "./animation.scss";
 @import '../input/variables.scss';
 @import './variables.scss';
 
@@ -7,6 +8,9 @@ $module: #{$prefix}-input-number;
     display: inline-flex;
     align-items: center;
     box-sizing: border-box;
+    transition: background-color $transition_duration-inputNumber-bg $transition_function-inputNumber-bg $transition_delay-inputNumber-bg,
+    border $transition_duration-inputNumber-border $transition_function-inputNumber-border $transition_delay-inputNumber-border;
+    transform: scale($transform_scale-inputNumber);
 
     &-suffix-btns {
         display: inline-flex;

package/lib/cjs/modal/modal.css

@@ -38,6 +38,10 @@
   -webkit-overflow-scrolling: touch;
   outline: 0;
 }
+.semi-modal-wrap-center {
+  display: flex;
+  align-items: center;
+}
 .semi-modal-title {
   display: inline-flex;
   align-items: flex-start;

package/lib/cjs/modal/modal.scss

@@ -42,6 +42,10 @@ $module: #{$prefix}-modal;
         z-index: $z-modal;
         -webkit-overflow-scrolling: touch;
         outline: 0;
+        &-center{
+            display: flex;
+            align-items: center;
+        }
     }
     
     &-title {

package/lib/cjs/navigation/animation.css

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

package/lib/cjs/navigation/animation.scss

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

package/lib/cjs/navigation/navigation.css

@@ -63,6 +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);
 }
 .semi-navigation-sub-wrap .semi-navigation-sub-title-text, .semi-navigation-item-text {
   overflow: hidden;

package/lib/cjs/navigation/navigation.scss

@@ -1,6 +1,7 @@
 //@import '../theme/variables.scss';
 @import "./variables.scss";
 @import "./mixin.scss";
+@import "./animation.scss";
 
 $module: #{$prefix}-navigation;
 
@@ -82,6 +83,8 @@ $module: #{$prefix}-navigation;
         color: $color-navigation_itemL1-text-default;
         width: 100%;
 
+        transition: background-color $transition_duration-navigation_itemL1-bg $transition_function-navigation_itemL1-bg $transition_delay-navigation_itemL1-bg;//nav item的bg transition
+
         &-text {
             overflow: hidden;
             white-space: nowrap;

package/lib/cjs/notification/notification.scss

@@ -1,5 +1,5 @@
 //@import '../theme/variables.scss';
-@import "./variables.scss";
+@import './variables.scss';
 
 $module: #{$prefix}-notification;
 
@@ -15,41 +15,40 @@ $module: #{$prefix}-notification;
     z-index: $z-notification;
     pointer-events: none;
 
-    &[placement="topRight"] {
+    &[placement='topRight'] {
         right: 0;
         top: 0;
     }
 
-    &[placement="top"] {
+    &[placement='top'] {
         top: 0;
         left: 50%;
         transform: translateX(-50%);
     }
 
-    &[placement="topLeft"] {
+    &[placement='topLeft'] {
         left: 0;
         top: 0;
     }
 
-    &[placement="bottom"] {
+    &[placement='bottom'] {
         bottom: 0;
         left: 50%;
         transform: translateX(-50%);
     }
 
-    &[placement="bottomRight"] {
+    &[placement='bottomRight'] {
         bottom: 0;
         right: 0;
     }
 
-    &[placement="bottomLeft"] {
+    &[placement='bottomLeft'] {
         bottom: 0;
         left: 0;
     }
 }
 
 .#{$module} {
-
     &-notice {
         @include shadow-elevated;
         border-radius: $radius-notification_notice;
@@ -169,4 +168,4 @@ $module: #{$prefix}-notification;
     }
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

package/lib/cjs/pagination/animation.css

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

package/lib/cjs/pagination/animation.scss

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

package/lib/cjs/pagination/pagination.css

@@ -37,6 +37,8 @@
   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);
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-page-item:hover {
   border-color: transparent;

package/lib/cjs/pagination/pagination.scss

@@ -1,5 +1,6 @@
 //@import '../theme/variables.scss';
 @import "./variables.scss";
+@import "./animation.scss";
 
 $module: #{$prefix}-page;
 
@@ -36,6 +37,9 @@ $module: #{$prefix}-page;
         display: flex;
         align-items: center;
         justify-content: center;
+        transition: background-color $transition_duration-pagination_item-bg $transition_function-pagination_item-bg $transition_delay-pagination_item-bg,
+        color $transition_duration-pagination_item-text $transition_function-pagination_item-text $transition_delay-pagination_item-text;
+        transform:scale($transform_scale-pagination_item);
 
         &:hover {
             border-color: $color-pagination_item-border-hover;

package/lib/cjs/radio/animation.css

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

package/lib/cjs/radio/animation.scss

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

package/lib/cjs/radio/radio.css

@@ -9,6 +9,7 @@
   position: relative;
   display: inline-flex;
   flex-wrap: wrap;
+  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);
   min-height: 20px;
   min-width: 16px;
   cursor: pointer;
@@ -77,6 +78,7 @@
   padding: 12px 16px;
   background: transparent;
   border: 1px solid 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);
 }
 .semi-radio-cardRadioGroup .semi-radio-inner {
   position: relative;
@@ -168,6 +170,7 @@
   border: solid 1px var(--semi-color-text-3);
   border-radius: 16px;
   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);
 }
 .semi-radio-inner-display .semi-icon {
   position: absolute;
@@ -197,6 +200,7 @@
   color: var(--semi-color-text-1);
   font-size: 12px;
   padding: 4px 16px;
+  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-radio-addon-buttonRadio-hover {
   font-weight: 600;

package/lib/cjs/radio/radio.scss

@@ -1,4 +1,5 @@
 @import "./variables.scss";
+@import "./animation.scss";
 
 $module: #{$prefix}-radio;
 $inner-width: $width-icon-medium;
@@ -9,6 +10,8 @@ $inner-width: $width-icon-medium;
     position: relative;
     display: inline-flex;
     flex-wrap: wrap;
+    transition: background-color $transition_duration-radio-bg $transition_function-radio-bg $transition_delay-radio-bg,
+    border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
 
     &.#{$module}-vertical {
         display: block;
@@ -104,6 +107,8 @@ $inner-width: $width-icon-medium;
         padding: $spacing-radio_cardRadioGroup-paddingY $spacing-radio_cardRadioGroup-paddingX;
         background: transparent;
         border: $width-radio_cardRadioGroup_checked-border solid transparent;
+        transition: background-color $transition_duration_radio-bg $transition_function-radio-bg $transition_delay-radio-bg,
+        border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
 
         .#{$module}-inner {
             position: relative;
@@ -224,7 +229,9 @@ $inner-width: $width-icon-medium;
             border: solid $width-radio_innder-border $color-radio_default-border-default;
             border-radius: $width-radio_inner;
             background: $color-radio_default-bg-default;
-
+            transition: background-color $transition_duration-radio-bg $transition_function-radio-bg $transition_delay-radio-bg,
+            border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
+        
             .#{$prefix}-icon {
                 position: absolute;
                 width: 100%;
@@ -262,6 +269,8 @@ $inner-width: $width-icon-medium;
             color: $color-radio_buttonRadio-text-default;
             font-size: $font-radio_buttonRadio_middle-default-size;
             padding: $spacing-radio_addon_buttonRadio_middle-paddingY $spacing-radio_addon_buttonRadio_middle-paddingX;
+            transition: background-color $transition_duration-radio-bg $transition_function-radio-bg $transition_delay-radio-bg,
+            border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
 
             &-hover {
                 font-weight: $font-radio_buttonRadio-hover-fontWeight;

package/lib/cjs/rating/animation.css

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

package/lib/cjs/rating/animation.scss

@@ -0,0 +1,6 @@
+$transition_duration-rating-color: var(--semi-transition_duration-faster);//评分-背景色-动画持续时间
+$transition_function-rating-color: var(--semi-transition_function-easeIn);//评分-背景色-过渡曲线
+$transition_delay-rating-color: var(--semi-transition_delay-fastest);//评分-背景色-延迟时间
+
+// transform token
+$transform_scale-rating: var(--semi-transform_scale-none);//评分-变大

package/lib/cjs/rating/rating.css

@@ -30,6 +30,7 @@
   color: inherit;
   cursor: pointer;
   transition: all 0.5s;
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-rating-star:not(:last-child) {
   margin-right: 6px;
@@ -58,6 +59,7 @@
   height: 100%;
 }
 .semi-rating-star-first, .semi-rating-star-second {
+  transition: color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
   color: var(--semi-color-fill-0);
   user-select: none;
 }