@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

package/tabs/tabs.scss

@@ -4,6 +4,8 @@
 
 
 $module: #{$prefix}-tabs;
+// Prevent the Radio and Checkbox in ReactNode passed in through the tab attribute in Tabs from being affected by the icon style override
+$ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix}-icon-checkbox_indeterminate';
 
 .#{$module} {
     box-sizing: border-box;
@@ -41,16 +43,16 @@ $module: #{$prefix}-tabs;
 
             user-select: none;
 
-            .#{$prefix}-icon {
+            .#{$prefix}-icon:not(#{$ignoreIcon}) {
                 position: relative;
                 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
+                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 {
+            .#{$prefix}-icon.#{$module}-tab-icon-close {
                 margin-right: 0;
                 font-size: 14px;
                 color: var(--semi-color-text-2);
@@ -61,7 +63,7 @@ $module: #{$prefix}-tabs;
             &:hover {
                 color: $color-tabs_tab_line_default-text-hover;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab-icon-hover;
                 }
             }
@@ -69,7 +71,7 @@ $module: #{$prefix}-tabs;
             &:active {
                 color: $color-tabs_tab_line_default-text-active;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab-icon-active;
                 }
             }
@@ -84,16 +86,16 @@ $module: #{$prefix}-tabs;
                 font-weight: $font-tabs_tab_active-fontWeight;
                 color: $color-tabs_tab_line_selected-text-default;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab_selected-icon-default;
                 }
 
-                .#{$prefix}-icon-close {
+                .#{$prefix}-icon.#{$module}-tab-icon-close {
                     color: var(--semi-color-text-2);
                 }
             }
 
-            .#{$prefix}-icon-close:hover {
+            .#{$prefix}-icon.#{$module}-tab-icon-close:hover {
                 color: var(--semi-color-text-1);
             }
         }
@@ -109,6 +111,88 @@ $module: #{$prefix}-tabs;
         }
     }
 
+    &-tab-single {
+        &.#{$module}-tab {
+            @include font-size-regular;
+            cursor: pointer;
+            box-sizing: border-box;
+            position: relative;
+            display: inline-block;
+            // float: left;
+
+            font-weight: $font-tabs_tab-fontWeight;
+            color: $color-tabs_tab_line_default-text-default;
+
+            user-select: none;
+
+            .#{$prefix}-icon:not(#{$ignoreIcon}) {
+                position: relative;
+                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.#{$module}-tab-icon-close {
+                margin-right: 0;
+                font-size: 14px;
+                color: var(--semi-color-text-2);
+                margin-left: 10px;
+                cursor: pointer;
+            }
+
+            &:hover {
+                color: $color-tabs_tab_line_default-text-hover;
+
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
+                    color: $color-tabs_tab-icon-hover;
+                }
+            }
+
+            &:active {
+                color: $color-tabs_tab_line_default-text-active;
+
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
+                    color: $color-tabs_tab-icon-active;
+                }
+            }
+        }
+
+        &.#{$module}-tab-active {
+
+            &,
+            &:hover {
+                cursor: default;
+                // border-bottom: 2px solid $color-tabs_tab_line_indicator_selected-icon-default;
+                font-weight: $font-tabs_tab_active-fontWeight;
+                color: $color-tabs_tab_line_selected-text-default;
+
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
+                    color: $color-tabs_tab_selected-icon-default;
+                }
+
+                .#{$prefix}-icon.#{$module}-tab-icon-close {
+                    color: var(--semi-color-text-2);
+                }
+            }
+
+            .#{$prefix}-icon.#{$module}-tab-icon-close:hover {
+                color: var(--semi-color-text-1);
+            }
+        }
+
+        &.#{$module}-tab-disabled {
+            cursor: not-allowed;
+            color: $color-tabs_tab_line_disabled-text-default;
+
+            &:hover {
+                color: $color-tabs_tab_line_disabled-text-hover;
+                border-bottom: none;
+            }
+        }
+    }
+
     &-bar-collapse {
         &,
         .#{$module}-bar-overflow-list {
@@ -134,10 +218,10 @@ $module: #{$prefix}-tabs;
                     outline-offset: $width-tabs-outline-offset;
                 }
             }
-            & > .#{$prefix}-button-disabled{
+            & > .#{$prefix}-button-disabled {
                 color: $color-tabs_tab-pane_arrow_disabled-text-default;
                 background-color: $color-tabs_tab-pane_arrow_disabled-bg-default;
-                &:hover{
+                &:hover {
                     color: $color-tabs_tab-pane_arrow_disabled-text-hover;
                     background-color: $color-tabs_tab-pane_arrow_disabled-bg-hover;
                 }
@@ -146,12 +230,12 @@ $module: #{$prefix}-tabs;
 
         .#{$module}-bar-arrow-start {
             margin-right: $spacing-tabs_overflow_icon-marginRight;
-            & > .#{$prefix}-button{
+            & > .#{$prefix}-button {
                 color: $color-tabs_tab-pane_arrow-text-default;
                 padding: $spacing-tabs_tab-pane_arrow;
                 border: $width-tabs_tab-pane_arrow-border solid $color-tabs_tab-pane_arrow-border-default;
                 background-color: $color-tabs_tab-pane_arrow-bg-default;
-                &:hover{
+                &:hover {
                     background-color: var(--semi-color-fill-0);
                     color: $color-tabs_tab-pane_arrow-text-hover;
                     border-color: $color-tabs_tab-pane_arrow-border-hover;
@@ -167,17 +251,17 @@ $module: #{$prefix}-tabs;
 
         .#{$module}-bar-arrow-end {
             margin-left: $spacing-tabs_overflow_icon-marginLeft;
-            & > .#{$prefix}-button{
+            & > .#{$prefix}-button {
                 color: $color-tabs_tab-pane_arrow-text-default;
                 padding: $spacing-tabs_tab-pane_arrow;
                 border: $width-tabs_tab-pane_arrow-border solid $color-tabs_tab-pane_arrow-border-default;
                 background-color: $color-tabs_tab-pane_arrow-bg-default;
-                &:hover{
+                &:hover {
                     background-color: var(--semi-color-fill-0);
                     color: $color-tabs_tab-pane_arrow-text-hover;
                     border-color: $color-tabs_tab-pane_arrow-border-hover;
                 }
-                &:active{
+                &:active {
                     background-color: var(--semi-color-fill-1);
                     color: $color-tabs_tab-pane_arrow-text-active;
                     border-color: $color-tabs_tab-pane_arrow-border-active;
@@ -202,12 +286,13 @@ $module: #{$prefix}-tabs;
         &.#{$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);
+            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
+                    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;
                 }
@@ -391,7 +476,7 @@ $module: #{$prefix}-tabs;
             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);
+            transform: scale($transform_scale-tabs_tab_card-item);
 
             &:hover {
                 background: $color-tabs_tab_card-bg-hover;
@@ -435,9 +520,9 @@ $module: #{$prefix}-tabs;
             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
+                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);
+            transform: scale($transform_scale-tabs_tab_button-item);
 
             &:hover {
                 border: none;
@@ -496,10 +581,12 @@ $module: #{$prefix}-tabs;
 
 
     @keyframes #{$module}-panel-keyframe-leftShow {
+
         0% {
             transform: translateX($animation_transform_translateX-tabs_tabPanel-leftShow);
             opacity: $animation_opacity-tabs_tabPanel_show;
         }
+
         100% {
             transform: translateX(0);
             opacity: 1;
@@ -507,10 +594,12 @@ $module: #{$prefix}-tabs;
 
     }
     @keyframes #{$module}-panel-keyframe-rightShow {
+
         0% {
             transform: translateX($animation_transform_translateX-tabs_tabPanel-rightShow);
             opacity: $animation_opacity-tabs_tabPanel_show;
         }
+
         100% {
             transform: translateX(0);
             opacity: 1;
@@ -518,10 +607,12 @@ $module: #{$prefix}-tabs;
     }
 
     @keyframes #{$module}-panel-keyframe-topShow {
+        
         0% {
             transform: translateY($animation_transform_translateX-tabs_tabPanel-leftShow);
             opacity: $animation_opacity-tabs_tabPanel_show;
         }
+        
         100% {
             transform: translateY(0);
             opacity: 1;
@@ -529,10 +620,12 @@ $module: #{$prefix}-tabs;
 
     }
     @keyframes #{$module}-panel-keyframe-bottomShow {
+        
         0% {
             transform: translateY($animation_transform_translateX-tabs_tabPanel-rightShow);
             opacity: $animation_opacity-tabs_tabPanel_show;
         }
+         
         100% {
             transform: translateY(0);
             opacity: 1;
@@ -540,18 +633,240 @@ $module: #{$prefix}-tabs;
     }
 
 
-    &-pane-animate-leftShow{
+    &-pane-animate-leftShow {
         animation: $animation_duration-tabs_tabPanel-show #{$module}-panel-keyframe-leftShow $animation_function-tabs_tabPanel-show $animation_delay-tabs_tabPanel-show;
+        animation-fill-mode: forwards;
     }
-    &-pane-animate-rightShow{
+    &-pane-animate-rightShow {
         animation: $animation_duration-tabs_tabPanel-show #{$module}-panel-keyframe-rightShow $animation_function-tabs_tabPanel-show $animation_delay-tabs_tabPanel-show;
+        animation-fill-mode: forwards;
     }
 
-    &-pane-animate-topShow{
+    &-pane-animate-topShow {
         animation: $animation_duration-tabs_tabPanel-show #{$module}-panel-keyframe-topShow $animation_function-tabs_tabPanel-show $animation_delay-tabs_tabPanel-show;
+        animation-fill-mode: forwards;
     }
-    &-pane-animate-bottomShow{
+
+    &-pane-animate-bottomShow {
         animation: $animation_duration-tabs_tabPanel-show #{$module}-panel-keyframe-bottomShow $animation_function-tabs_tabPanel-show $animation_delay-tabs_tabPanel-show;
+        animation-fill-mode: forwards;
+    }
+
+    &-tab-line {
+        &.#{$module}-tab-top {
+
+            &.#{$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;
+                }
+
+                border-bottom: $width-tabs_bar_line_tab-border solid transparent;
+
+                &:hover {
+                    border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
+                }
+
+                &:focus-visible {
+                    outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+                    outline-offset: $width-tabs_bar_line-outline-offset;
+                }
+
+                &:active {
+                    border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-active;
+                }
+
+                // &:not(:last-of-type) {
+                //     margin-right: $spacing-tabs_bar_line_tab-marginRight;
+                // }
+
+                &-small {
+                    padding: $spacing-tabs_bar_line_tab_small-paddingTop $spacing-tabs_bar_line_tab_small-paddingRight $spacing-tabs_bar_line_tab_small-paddingBottom $spacing-tabs_bar_line_tab_small-paddingLeft;
+                }
+
+                &-medium {
+                    padding: $spacing-tabs_bar_line_tab_medium-paddingTop $spacing-tabs_bar_line_tab_medium-paddingRight $spacing-tabs_bar_line_tab_medium-paddingBottom $spacing-tabs_bar_line_tab_medium-paddingLeft;
+                }
+            }
+
+            &.#{$module}-tab-active {
+
+                &,
+                &:hover {
+                    border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_indicator_selected-icon-default;
+                }
+            }
+        }
+
+        &.#{$module}-tab-left {
+
+            &.#{$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;
+                }
+
+                &:focus-visible {
+                    outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+                    outline-offset: $width-tabs-outline-offset;
+                }
+
+                &:active {
+                    border-left: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-active;
+                    background-color: $color-tabs_tab_line_vertical-bg-active;
+                }
+
+                &-small {
+                    padding: $spacing-tabs_bar_line_tab_left_small-padding;
+                }
+
+                &-medium {
+                    padding: $spacing-tabs_bar_line_tab_left_medium-padding;
+                }
+            }
+
+            &.#{$module}-tab-active {
+                background-color: $color-tabs_tab_line_vertical_selected-bg-default;
+
+                &,
+                &:hover {
+                    border-left: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_indicator_selected-icon-default;
+                    background-color: $color-tabs_tab_line_vertical_selected-bg-default;
+                }
+            }
+        }
+    }
+
+    &-tab-card {
+        &.#{$module}-tab-top {
+
+            &.#{$module}-tab {
+                border: $width-tabs_bar_card-border solid transparent;
+                border-bottom: none;
+                border-radius: $radius-tabs_tab_card;
+
+                &:hover {
+                    border-bottom: none;
+                }
+
+            }
+
+            &.#{$module}-tab-active {
+
+                &,
+                &:hover {
+                    padding: $spacing-tabs_bar_card_tab_active-paddingTop $spacing-tabs_bar_card_tab_active-paddingRight $spacing-tabs_bar_card_tab_active-paddingBottom $spacing-tabs_bar_card_tab_active-paddingLeft;
+                    border: $width-tabs_bar_card-border solid $color-tabs_tab_card_indicator_selected-icon-default;
+                    border-bottom: $width-tabs_bar_card-border solid $color-tabs_tab_card_selected-bg-default;
+                    background: transparent;
+                    // padding-bottom: $spacing-tight + 1;
+                }
+            }
+        }
+
+        &.#{$module}-tab-left {
+
+            &.#{$module}-tab {
+                border: $width-tabs_bar_card-border solid transparent;
+                border-right: none;
+                border-radius: $radius-tabs_tab_card_left;
+
+                &:hover {
+                    border-right: none;
+                }
+
+            }
+
+            &.#{$module}-tab-active {
+
+                &:after {
+                    content: " ";
+                    width: 1px;
+                    position: absolute;
+                    right: -1px;
+                    top: 0;
+                    bottom: 0;
+                    background: $color-tabs_tab_card_selected-bg-default;
+                }
+
+                &,
+                &:hover {
+                    padding: $spacing-tabs_bar_card_tab_left_active-paddingY $spacing-tabs_bar_card_tab_left_active-paddingX;
+                    border: $width-tabs_bar_card-border solid $color-tabs_tab_card_indicator_selected-icon-default;
+                    border-right: none;
+                    background: transparent;
+                    // padding-bottom: $spacing-tight + 1;
+                }
+            }
+        }
+
+        &.#{$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;
+            }
+
+            &:focus-visible {
+                outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+                outline-offset: $width-tabs-outline-offset;
+            }
+
+            &:active {
+                background: $color-tabs_tab_card-bg-active;
+            }
+        }
+    }
+
+    &-tab-button {
+        border: none;
+
+        &.#{$module}-tab {
+            padding: $spacing-tabs_bar_button_tab-paddingY $spacing-tabs_bar_button_tab-paddingX;
+            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;
+                background-color: $color-tabs_tab_button-bg-hover;
+            }
+
+            &:focus-visible {
+                outline: $width-tabs-outline solid $color-tabs_tab-outline-focus;
+                outline-offset: $width-tabs-outline-offset;
+            }
+
+            &:active {
+                background-color: $color-tabs_tab_button-bg-active;
+            }
+        }
+
+        &.#{$module}-tab-active {
+
+            &,
+            &:hover {
+                color: $color-tabs_tab_button_selected-text-default;
+                border: none;
+                background-color: $color-tabs_tab_button_selected-bg-default;
+            }
+        }
     }
 }
 

package/tag/constants.ts

@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 import { BASE_CLASS_PREFIX } from '../base/constants';
 
 const cssClasses = {
@@ -7,7 +6,25 @@ const cssClasses = {
 
 const strings = {
     TAG_SIZE: ['default', 'small', 'large'],
-    TAG_COLOR: ['grey', 'red', 'pink', 'purple', 'violet', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'white'],
+    TAG_COLOR: [
+        'grey',
+        'red',
+        'pink',
+        'purple',
+        'violet',
+        'indigo',
+        'blue',
+        'light-blue',
+        'cyan',
+        'teal',
+        'green',
+        'light-green',
+        'lime',
+        'yellow',
+        'amber',
+        'orange',
+        'white',
+    ],
     TAG_TYPE: ['light', 'solid', 'ghost'],
     AVATAR_SHAPE: ['square', 'circle'],
 };

package/tag/tag.scss

@@ -10,7 +10,6 @@ $types: "ghost", "solid", "light";
 
 .#{$module} {
     box-sizing: border-box;
-    display: inline-block;
     border-radius: $radius-tag;
     background-color: transparent;
     position: relative;
@@ -19,6 +18,8 @@ $types: "ghost", "solid", "light";
     overflow: hidden;
     white-space: nowrap;
     vertical-align: bottom;
+    @include all-center;
+    display: inline-flex;
 
     &-default,
     &-small {
@@ -50,10 +51,31 @@ $types: "ghost", "solid", "light";
         display: none;
     }
 
-    &-content {
+    &-prefix-icon {
         display: flex;
-        @include all-center;
-        height: 100%;
+        padding-right: $spacing-tag_prefix_icon_paddingRight;
+    }
+
+    &-suffix-icon {
+        display: flex;
+        padding-left: $spacing-tag_suffix_icon_paddingLeft;
+    }
+
+    &-content {
+        flex: 1;
+
+        &-ellipsis {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        &-center {
+            display: flex;
+            @include all-center;
+            height: 100%;
+            min-width: 0;
+        }
     }
 
     &-close {
@@ -61,6 +83,14 @@ $types: "ghost", "solid", "light";
         color: $color-tag_close-icon-default;
         padding-left: $spacing-tag_close-paddingLeft;
         cursor: pointer;
+
+        &:hover {
+            color: $color-tag_close-icon-hover;
+        }
+
+        &:active {
+            color: $color-tag_close-icon-active;
+        }
     }
 
     &-closable {
@@ -198,6 +228,15 @@ $types: "ghost", "solid", "light";
 .#{$module}-solid {
     .#{$module}-close {
         color: $color-tag_close-icon_deep-default;
+        opacity: .8;
+
+        &:hover {
+            opacity: 1.0;
+        }
+
+        &:active {
+            opacity: .9;
+        }
     }
 }
 

package/tag/variables.scss

@@ -25,10 +25,15 @@ $radius-tag_circle: var(--semi-border-radius-full); // 胶囊标签圆角大小
 $spacing-tag_small-paddingY: 2px; // 小尺寸标签垂直方向内边距
 $spacing-tag_small-paddingX: $spacing-tight; // 小尺寸标签水平方向内边距
 
+$spacing-tag_prefix_icon_paddingRight: $spacing-extra-tight; // 后缀图标右侧边距 
+$spacing-tag_suffix_icon_paddingLeft: $spacing-extra-tight; // 后缀图标左侧边距
+
 $spacing-tag_large-paddingY: 4px; // 大尺寸标签垂直方向内边距
 $spacing-tag_large-paddingX: $spacing-tight; // 大尺寸标签水平方向内边距
 
 $color-tag_close-icon-default: var(--semi-color-text-2); // 可删除的标签删除按钮颜色
+$color-tag_close-icon-hover: var(--semi-color-text-1); // 可删除的标签删除按钮颜色 - 悬浮
+$color-tag_close-icon-active: var(--semi-color-text-0); // 可删除的标签删除按钮颜色 - 按下
 $color-tag_close-icon_deep-default: var(--semi-color-white); // 深色模式下可删除的标签删除按钮颜色
 $spacing-tag_close-paddingLeft: $spacing-extra-tight; // 可删除的标签删除按钮左侧内边距
 $spacing-tag_closable-paddingTop: $spacing-extra-tight; // 可删除的标签删除按钮顶部内边距