@douyinfe/semi-foundation 2.17.0 → 2.18.0

package/lib/cjs/button/button.scss

@@ -1,4 +1,5 @@
 @import './variables.scss';
+@import './animation.scss';
 @import './splitButtonGroup.scss';
 
 $module: #{$prefix}-button;
@@ -39,6 +40,11 @@ $module: #{$prefix}-button;
     &-danger {
         background-color: $color-button_danger-bg-default;
         color: $color-button_danger-text-default;
+      transition: background-color $transition_duration-button_danger-bg $transition_function-button_danger-bg $transition_delay-button_danger-bg,
+      border $transition_duration-button_danger-border $transition_function-button_danger-border $transition_delay-button_danger-border;
+      transform: scale($transform-scale-button_danger);
+
+
         &:hover {
             background-color: $color-button_danger-bg-hover;
         }
@@ -56,6 +62,10 @@ $module: #{$prefix}-button;
     &-warning {
         background-color: $color-button_warning-bg-default;
         color: $color-button_warning-text-default;
+      transition: background-color $transition_duration-button_warning-bg $transition_function-button_warning-bg $transition_delay-button_warning-bg,
+      border $transition_duration-button_warning-border $transition_function-button_warning-border $transition_delay-button_warning-border;
+      transform:scale($transform_scale-button_warning);
+
         &:hover {
             background-color: $color-button_warning-bg-hover;
         }
@@ -73,6 +83,10 @@ $module: #{$prefix}-button;
     &-tertiary {
         background-color: $color-button_tertiary-bg-default;
         color: $color-button_tertiary-text-default;
+      transition: background-color $transition_duration-button_tertiary-bg $transition_function-button_tertiary-bg $transition_delay-button_tertiary-bg,
+      border $transition_duration-button_tertiary-border $transition_function-button_tertiary-border $transition_delay-button_tertiary-border;
+      transform:scale($transform_scale_button_tertiary);
+
         &:hover {
             background-color: $color-button_tertiary-bg-hover;
         }
@@ -87,6 +101,10 @@ $module: #{$prefix}-button;
     &-primary {
         background-color: $color-button_primary-bg-default;
         color: $color-button_primary-text-default;
+        transition: background-color $transition_duration-button_primary-bg $transition_function-button_primary-bg $transition_delay-button_primary-bg,
+        border $transition_duration-button_primary-border $transition_function-button_primary-border $transition_delay-button_primary-border;;
+      transform:scale($transform_scale-button_primary);
+
         &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
             background-color: $color-button_primary-bg-hover;
         }
@@ -103,6 +121,10 @@ $module: #{$prefix}-button;
         background-color: $color-button_secondary-bg-default;
         outline-color: $color-button_secondary-border-default;
         color: $color-button_secondary-text-default;
+      transition: background-color $transition_duration-button_secondary-bg $transition_function-button_secondary-bg $transition_delay-button_secondary-bg,
+      border $transition_duration-button_secondary-border $transition_function-button_secondary-border $transition_delay-button_secondary-border;
+      transform:scale($transform_scale-button_secondary);
+
         &:hover {
             background-color: $color-button_secondary-bg-hover;
         }
@@ -132,6 +154,9 @@ $module: #{$prefix}-button;
     &-borderless {
         background-color: transparent;
         border: $width-button_borderless-border $color-button_borderless-border-default solid;
+      transition:background-color $transition_duration-button_borderless-bg $transition_function-button_borderless-bg $transition_delay-button_borderless-bg;
+      transform:scale($transform_scale-button_borderless);
+
         &:not(.#{$module}-disabled):hover {
             background-color: $color-button_borderless-bg-hover;
             border: $width-button_borderless-border $color-button_borderless-border-hover solid;
@@ -145,6 +170,10 @@ $module: #{$prefix}-button;
     &-light {
         background-color: $color-button_light-bg-default;
         border: $width-button_light-border $color-button_light-border-default solid;
+      transition: background-color $transition_duration-button_light-bg $transition_function-button_light-bg $transition_delay-button_light-bg,
+      border $transition_duration-button_light-border $transition_function-button_light-border $transition_delay-button_light-border;
+      transform:scale($transform_scale-button_light);
+
         &:not(.#{$module}-disabled):hover {
             background-color: $color-button_light-bg-hover;
             border: $width-button_light-border $color-button_light-border-hover solid;

package/lib/cjs/calendar/eventUtil.d.ts

@@ -30,6 +30,7 @@ export interface DateObj {
     isSameMonth: boolean;
     month: string;
 }
+export declare type weeekStartsOnEnum = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 export declare const calcRangeData: (value: Date, start: Date, rangeLen: number, mode: string, locale: Locale) => DateObj[];
 /**
  *
@@ -39,7 +40,7 @@ export declare const calcRangeData: (value: Date, start: Date, rangeLen: number,
  * @returns {object[]} { date: Date, dayString: string, ind: number, isToday: boolean, isWeekend: boolean, weekday: string }
  * create weekly object array
  */
-export declare const calcWeekData: (value: Date, mode: string, locale: Locale) => DateObj[];
+export declare const calcWeekData: (value: Date, mode: string, locale: Locale, weekStartsOn: weeekStartsOnEnum) => DateObj[];
 /**
  *
  * @param {object} event

package/lib/cjs/calendar/eventUtil.js

@@ -161,7 +161,10 @@ exports.calcRangeData = calcRangeData;
 const calcWeekData = function (value) {
   let mode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'week';
   let locale = arguments.length > 2 ? arguments[2] : undefined;
-  const start = (0, _dateFns.startOfWeek)(value);
+  let weekStartsOn = arguments.length > 3 ? arguments[3] : undefined;
+  const start = (0, _dateFns.startOfWeek)(value, {
+    weekStartsOn
+  });
   return calcRangeData(value, start, 7, mode, locale);
 };
 /**

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

@@ -1,6 +1,7 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { Locale } from 'date-fns';
-import { DateObj } from './eventUtil';
+import { DateObj, weeekStartsOnEnum } from './eventUtil';
+export { weeekStartsOnEnum };
 export interface EventObject {
     [x: string]: any;
     key: string;

package/lib/cjs/calendar/foundation.js

@@ -140,7 +140,10 @@ class CalendarFoundation extends _foundation.default {
     data.month = (0, _dateFns.format)(value, 'LLL', {
       locale: dateFnsLocale
     });
-    data.week = (0, _eventUtil.calcWeekData)(value, 'week', dateFnsLocale);
+    const {
+      weekStartsOn
+    } = this.getProps();
+    data.week = (0, _eventUtil.calcWeekData)(value, 'week', dateFnsLocale, weekStartsOn);
 
     this._adapter.setWeeklyData(data);
 
@@ -168,9 +171,12 @@ class CalendarFoundation extends _foundation.default {
 
     const monthStart = (0, _dateFns.startOfMonth)(value);
     const data = {};
+    const {
+      weekStartsOn
+    } = this.getProps();
     const numberOfWeek = (0, _dateFns.getWeeksInMonth)(value);
     (0, _map.default)(_context = [...(0, _keys.default)(_context2 = Array(numberOfWeek)).call(_context2)]).call(_context, ind => {
-      data[ind] = (0, _eventUtil.calcWeekData)((0, _dateFns.addDays)(monthStart, ind * 7), 'month', dateFnsLocale);
+      data[ind] = (0, _eventUtil.calcWeekData)((0, _dateFns.addDays)(monthStart, ind * 7), 'month', dateFnsLocale, weekStartsOn);
     });
 
     this._adapter.setMonthlyData(data);

package/lib/cjs/carousel/animation.scss

@@ -0,0 +1,7 @@
+$transition_duration_carousel_indicator-bg: var(--semi-transition_delay-fastest); // 指示器-背景色-动画持续时间
+$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_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,6 +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);
 }
 .semi-carousel-indicator-dot .semi-carousel-indicator-item-primary.semi-carousel-indicator-item-active {
   background: rgba(var(--semi-blue-6), 1);
@@ -95,6 +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);
 }
 .semi-carousel-indicator-dot .semi-carousel-indicator-item-light.semi-carousel-indicator-item-active {
   background: rgba(var(--semi-white), 1);
@@ -107,6 +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);
 }
 .semi-carousel-indicator-dot .semi-carousel-indicator-item-dark.semi-carousel-indicator-item-active {
   background-color: rgba(var(--semi-black), 1);
@@ -246,18 +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);
 }
 .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);
 }
 .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);
 }
 .semi-carousel-arrow-dark:hover {
   color: rgba(var(--semi-black), 1);
@@ -265,7 +271,6 @@
 .semi-carousel-arrow-hover div {
   z-index: 2;
   opacity: 0;
-  transition: all 0.3s;
 }
 .semi-carousel:hover .semi-carousel-arrow-hover div {
   opacity: 1;

package/lib/cjs/carousel/carousel.scss

@@ -1,4 +1,5 @@
-@import "./variables.scss";
+@import './variables.scss';
+@import './animation.scss';
 
 $module: #{$prefix}-carousel;
 
@@ -23,22 +24,20 @@ $module: #{$prefix}-carousel;
             &-current {
                 z-index: 1;
             }
-
         }
 
         &-fade {
-            
             > * {
                 opacity: 0;
             }
-    
+
             .#{$module}-content-item-current {
                 opacity: 1;
             }
         }
 
         &-slide {
-            &>*:not(.#{$module}-content-item-current) {
+            & > *:not(.#{$module}-content-item-current) {
                 visibility: hidden;
             }
 
@@ -46,21 +45,20 @@ $module: #{$prefix}-carousel;
                 display: block;
                 animation: #{$module}-content-item-keyframe-slide-out;
             }
-        
+
             .#{$module}-content-item-slide-in {
                 display: block;
                 animation: #{$module}-content-item-keyframe-slide-in;
             }
-          
         }
 
         &-reverse {
             .#{$module}-content-item-slide-out {
-                animation: #{$module}-content-item-keyframe-slide-out-reverse ;
+                animation: #{$module}-content-item-keyframe-slide-out-reverse;
             }
-    
+
             .#{$module}-content-item-slide-in {
-                animation: #{$module}-content-item-keyframe-slide-in-reverse ;
+                animation: #{$module}-content-item-keyframe-slide-in-reverse;
             }
         }
     }
@@ -89,7 +87,6 @@ $module: #{$prefix}-carousel;
             bottom: $spacing-carousel_indicator-padding;
         }
 
-    
         &-dot {
             .#{$module}-indicator-item {
                 border-radius: $radius-carousel_indicator_dot;
@@ -102,7 +99,6 @@ $module: #{$prefix}-carousel;
                 &-small {
                     width: $width-carousel_indicator_dot_small;
                     height: $width-carousel_indicator_dot_small;
-                   
                 }
 
                 &-medium {
@@ -112,6 +108,8 @@ $module: #{$prefix}-carousel;
 
                 &-primary {
                     background-color: $color-carousel_indicator_theme_primary-bg-default;
+                    transition: background-color $transition_duration-carousel_indicator-bg
+                        $transition_function-carousel_indicator-bg $transition_delay-carousel_indicator-bg;
 
                     &.#{$module}-indicator-item-active {
                         background: $color-carousel_indicator_theme_primary-bg-active;
@@ -127,8 +125,9 @@ $module: #{$prefix}-carousel;
                 }
 
                 &-light {
-
                     background-color: $color-carousel_indicator_theme_light-bg-default;
+                    transition: background-color $transition_duration-carousel_indicator-bg
+                        $transition_function-carousel_indicator-bg $transition_delay-carousel_indicator-bg;
 
                     &.#{$module}-indicator-item-active {
                         background: $color-carousel_indicator_theme_light-bg-active;
@@ -145,6 +144,8 @@ $module: #{$prefix}-carousel;
 
                 &-dark {
                     background-color: $color-carousel_indicator_theme_dark-bg-default;
+                    transition: background-color $transition_duration-carousel_indicator-bg
+                        $transition_function-carousel_indicator-bg $transition_delay-carousel_indicator-bg;
 
                     &.#{$module}-indicator-item-active {
                         background-color: $color-carousel_indicator_theme_dark-bg-active;
@@ -159,14 +160,13 @@ $module: #{$prefix}-carousel;
                     }
                 }
             }
-
         }
 
         &-line {
             width: $width-carousel_indicator_line;
 
             .#{$module}-indicator-item {
-                flex: 1; 
+                flex: 1;
                 cursor: pointer;
 
                 &:not(:last-child) {
@@ -175,7 +175,6 @@ $module: #{$prefix}-carousel;
 
                 &-small {
                     height: $height-carousel_indicator_line_small;
-                   
                 }
 
                 &-medium {
@@ -199,7 +198,6 @@ $module: #{$prefix}-carousel;
                 }
 
                 &-light {
-
                     background-color: $color-carousel_indicator_theme_light-bg-default;
 
                     &.#{$module}-indicator-item-active {
@@ -216,7 +214,6 @@ $module: #{$prefix}-carousel;
                 }
 
                 &-dark {
-
                     background-color: $color-carousel_indicator_theme_dark-bg-default;
 
                     &.#{$module}-indicator-item-active {
@@ -231,15 +228,13 @@ $module: #{$prefix}-carousel;
                         background: $color-carousel_indicator_theme_dark-bg-active;
                     }
                 }
-        
             }
-
         }
 
         &-columnar {
             .#{$module}-indicator-item {
                 cursor: pointer;
-                
+
                 &:not(:last-child) {
                     margin-right: $spacing-carousel_indicator_columnar-marginX;
                 }
@@ -262,11 +257,9 @@ $module: #{$prefix}-carousel;
                     }
                 }
 
-
                 &-primary {
                     background-color: $color-carousel_indicator_theme_primary-bg-default;
 
-
                     &.#{$module}-indicator-item-active {
                         background: $color-carousel_indicator_theme_primary-bg-active;
                     }
@@ -298,7 +291,7 @@ $module: #{$prefix}-carousel;
 
                 &-dark {
                     background-color: $color-carousel_indicator_theme_dark-bg-default;
-                    
+
                     &.#{$module}-indicator-item-active {
                         background: $color-carousel_indicator_theme_dark-bg-active;
                     }
@@ -311,9 +304,7 @@ $module: #{$prefix}-carousel;
                         background: $color-carousel_indicator_theme_dark-bg-active;
                     }
                 }
-        
             }
-
         }
     }
 
@@ -340,15 +331,18 @@ $module: #{$prefix}-carousel;
 
         &-light {
             color: $color-carousel_arrow_theme_light-bg-default;
+            transition: color $transition_duration-carousel_arrow-bg $transition_funciton_carousel_arrow-bg
+                $transition_delay-carousel_arrow-bg;
 
             &:hover {
                 color: $color-carousel_arrow_theme_light-bg-hover;
             }
         }
 
-
         &-primary {
             color: $color-carousel_arrow_theme_primary-bg-default;
+            transition: color $transition_duration-carousel_arrow-bg $transition_funciton_carousel_arrow-bg
+                $transition_delay-carousel_arrow-bg;
 
             &:hover {
                 color: $color-carousel_arrow_theme_primary-bg-hover;
@@ -357,20 +351,20 @@ $module: #{$prefix}-carousel;
 
         &-dark {
             color: $color-carousel_arrow_theme_dark-bg-default;
+            transition: color $transition_duration-carousel_arrow-bg $transition_funciton_carousel_arrow-bg
+                $transition_delay-carousel_arrow-bg;
 
             &:hover {
                 color: $color-carousel_arrow_theme_dark-bg-hover;
             }
         }
-
     }
 
     &-arrow-hover div {
         z-index: 2;
         opacity: 0;
-        transition: all .3s;
     }
-    
+
     &:hover {
         .#{$module}-arrow-hover div {
             opacity: 1;
@@ -379,47 +373,43 @@ $module: #{$prefix}-carousel;
 }
 
 @keyframes #{$module}-content-item-keyframe-slide-in {
-
     from {
         transform: translateX(100%);
     }
-    
+
     to {
         transform: translateX(0);
     }
 }
 
 @keyframes #{$module}-content-item-keyframe-slide-out {
-
     from {
         transform: translateX(0);
     }
-    
+
     to {
         transform: translateX(-100%);
     }
 }
 
 @keyframes #{$module}-content-item-keyframe-slide-in-reverse {
-
     from {
         transform: translateX(-100%);
     }
-  
+
     to {
         transform: translateX(0);
     }
 }
-  
-@keyframes #{$module}-content-item-keyframe-slide-out-reverse {
 
+@keyframes #{$module}-content-item-keyframe-slide-out-reverse {
     from {
         transform: translateX(0);
     }
-  
+
     to {
         transform: translateX(100%);
     }
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

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

@@ -19,7 +19,7 @@ declare class CarouselFoundation<P = Record<string, any>, S = Record<string, any
     _notifyChange(activeIndex: number): void;
     getValidIndex(index: number): number;
     getSwitchingTime(): number;
-    getIsControledComponent(): boolean;
+    getIsControlledComponent(): boolean;
     handleAutoPlay(): void;
     handleKeyDown(event: any): void;
     onIndicatorChange(activeIndex: number): void;

package/lib/cjs/carousel/foundation.js

@@ -52,7 +52,7 @@ class CarouselFoundation extends _foundation.default {
 
     this._adapter.setIsReverse(stateActiveIndex > targetIndex);
 
-    if (this.getIsControledComponent()) {
+    if (this.getIsControlledComponent()) {
       this._notifyChange(targetIndex);
     } else {
       this._notifyChange(targetIndex);
@@ -69,7 +69,7 @@ class CarouselFoundation extends _foundation.default {
 
     this._adapter.setIsReverse(false);
 
-    if (this.getIsControledComponent()) {
+    if (this.getIsControlledComponent()) {
       this._notifyChange(targetIndex);
     } else {
       this._notifyChange(targetIndex);
@@ -86,7 +86,7 @@ class CarouselFoundation extends _foundation.default {
 
     this._adapter.setIsReverse(true);
 
-    if (this.getIsControledComponent()) {
+    if (this.getIsControlledComponent()) {
       this._notifyChange(targetIndex);
     } else {
       this._notifyChange(targetIndex);
@@ -148,7 +148,7 @@ class CarouselFoundation extends _foundation.default {
     return speed;
   }
 
-  getIsControledComponent() {
+  getIsControlledComponent() {
     return this._isInProps('activeIndex');
   }
 
@@ -182,7 +182,7 @@ class CarouselFoundation extends _foundation.default {
 
     this._notifyChange(activeIndex);
 
-    if (!this.getIsControledComponent()) {
+    if (!this.getIsControlledComponent()) {
       this.handleNewActiveIndex(activeIndex);
     }
   }

package/lib/cjs/cascader/animation.scss

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

package/lib/cjs/cascader/cascader.css

@@ -313,6 +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);
   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/cascader/cascader.scss

@@ -1,4 +1,5 @@
 @import './variables.scss';
+@import "./animation.scss";
 
 $module: #{$prefix}-cascader;
 
@@ -380,6 +381,7 @@ $module: #{$prefix}-cascader;
         align-items: center;
         justify-content: space-between;
         cursor: pointer;
+        transition: background-color $transition_duration-cascader_option-bg $transition_function-cascader_option-bg $transition_delay-cascader_option-bg;
 
         @include font-size-regular;
         min-width: min-content;

package/lib/cjs/checkbox/animation.scss

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

package/lib/cjs/checkbox/checkbox.css

@@ -11,6 +11,8 @@
   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);
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-checkbox input[type=checkbox] {
   position: absolute;
@@ -69,6 +71,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);
   box-shadow: inset 0 0 0 1px var(--semi-color-text-3);
   border-radius: var(--semi-border-radius-extra-small);
 }