@douyinfe/semi-foundation 2.1.1 → 2.1.5

package/lib/cjs/tabs/tabs.scss

@@ -0,0 +1,411 @@
+//@import '../theme/variables.scss';
+@import "./variables.scss";
+
+$module: #{$prefix}-tabs;
+
+.#{$module} {
+    box-sizing: border-box;
+    position: relative;
+    
+    &-left {
+        display: flex;
+        flex-direction: row;
+    }
+    
+    &-bar {
+        position: relative;
+        white-space: nowrap;
+        outline: none;
+        
+        &-left {
+            display: flex;
+            flex-direction: column;
+        }
+        
+        &-extra {
+            padding: $spacing-tabs_bar_extra-paddingY $spacing-tabs_bar_extra-paddingX;
+        }
+        
+        .#{$module}-tab {
+            @include font-size-regular;
+            cursor: pointer;
+            box-sizing: border-box;
+            position: relative;
+            display: block;
+            float: left;
+            
+            font-weight: $font-tabs_tab-fontWeight;
+            color: $color-tabs_tab_line_default-text-default;
+            
+            user-select: none;
+            
+            .#{$prefix}-icon {
+                position: relative;
+                margin-right: $spacing-tabs_tab_icon-marginRight;
+                top: $spacing-tabs_tab_icon-top;
+                color: $color-tabs_tab-icon-default;
+            }
+            
+            .#{$prefix}-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 {
+                    color: $color-tabs_tab-icon-hover;
+                }
+            }
+            
+            &:active {
+                color: $color-tabs_tab_line_default-text-active;
+                
+                .#{$prefix}-icon {
+                    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 {
+                    color: $color-tabs_tab_selected-icon-default;
+                }
+                
+                .#{$prefix}-icon-close {
+                    color: var(--semi-color-text-2);
+                }
+            }
+            
+            .#{$prefix}-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 {
+            display: flex;
+            align-items: center;
+        }
+        
+        .#{$prefix}-overflow-list {
+            flex: 1;
+            
+            .#{$prefix}-overflow-list-scroll-wrapper {
+                -ms-overflow-style: none; /* Internet Explorer 10+ */
+                scrollbar-width: none; /* Firefox */
+                
+                &::-webkit-scrollbar {
+                    display: none; /* Safari and Chrome */
+                    width: 0;
+                    height: 0;
+                }
+            }
+        }
+        
+        .#{$module}-bar-arrow-start {
+            margin-right: $spacing-tabs_overflow_icon-marginRight;
+        }
+        
+        .#{$module}-bar-arrow-end {
+            margin-left: $spacing-tabs_overflow_icon-marginLeft;
+        }
+    }
+    
+    &-bar-dropdown {
+        max-height: $height-tabs_overflow_list;
+        overflow-y: auto;
+    }
+    
+    &-bar:after {
+        content: "";
+        height: 0;
+        display: block;
+        clear: both;
+    }
+    
+    &-bar-line {
+        &.#{$module}-bar-top {
+            border-bottom: $width-tabs_bar_line-border solid $color-tabs_tab_line_default-border-default;
+            
+            .#{$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;
+                
+                &: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;
+                }
+                
+                &: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}-bar-left {
+            border-right: $width-tabs_bar_line-border solid $color-tabs_tab_line_default-border-default;
+            
+            .#{$module}-tab {
+                padding: $spacing-tabs_bar_line_tab_left-padding;
+                border-left: $width-tabs_bar_line_tab-border solid transparent;
+                
+                &: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;
+                }
+                
+                &: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;
+                }
+            }
+        }
+        
+        // type='bar' extar need specific
+        .#{$module}-bar-extra {
+            height: $height-tabs_bar_extra_large;
+            line-height: $font-tabs_bar_extra_large-lineHeight;
+        }
+        
+        .#{$module}-bar-line-extra-small {
+            height: $height-tabs_bar_extra_small;
+            line-height: $font-tabs_bar_extra_small-lineHeight;
+        }
+    }
+    
+    &-bar-card {
+        &.#{$module}-bar-top {
+            
+            &::before {
+                position: absolute;
+                right: 0;
+                left: 0;
+                bottom: 0;
+                border-bottom: $width-tabs_bar_card-border solid $color-tabs_tab_card_default-border-default;
+                content: "";
+            }
+            
+            // border-bottom: $border-thickness-control solid $color-tabs_tab_line_default-border-default;
+            
+            .#{$module}-tab {
+                border: $width-tabs_bar_card-border solid transparent;
+                border-bottom: none;
+                border-radius: $radius-tabs_tab_card;
+                
+                &:hover {
+                    border-bottom: none;
+                }
+                
+                &:not(:last-of-type) {
+                    margin-right: $spacing-tabs_bar_card_tab-marginRight;
+                }
+            }
+            
+            .#{$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}-bar-left {
+            border-right: $width-tabs_bar_card-border solid $color-tabs_tab_line_default-border-default;
+            
+            .#{$module}-tab {
+                border: $width-tabs_bar_card-border solid transparent;
+                border-right: none;
+                border-radius: $radius-tabs_tab_card_left;
+                
+                &:hover {
+                    border-right: none;
+                }
+                
+                &:not(:last-of-type) {
+                    margin-bottom: $spacing-tabs_bar_card_tab_left-marginBottom;
+                }
+            }
+            
+            .#{$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;
+            
+            &:hover {
+                background: $color-tabs_tab_card-bg-hover;
+            }
+            
+            &:active {
+                background: $color-tabs_tab_card-bg-active;
+            }
+        }
+    }
+    
+    &-bar-button {
+        border: none;
+        
+        &.#{$module}-bar-left {
+            .#{$module}-tab {
+                
+                &:not(:last-of-type) {
+                    margin-bottom: $spacing-tabs_bar_button_tab_left-marginBottom;
+                }
+            }
+        }
+        
+        &.#{$module}-bar-top {
+            .#{$module}-tab {
+                
+                &:not(:last-of-type) {
+                    margin-right: $spacing-tabs_bar_button_tab-marginRight;
+                }
+            }
+        }
+        
+        .#{$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;
+            
+            &:hover {
+                border: none;
+                background-color: $color-tabs_tab_button-bg-hover;
+            }
+            
+            &: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;
+            }
+        }
+    }
+    
+    &-content {
+        width: 100%;
+        padding: $spacing-tabs_content-paddingY $spacing-tabs_content-paddingX;
+        // overflow: hidden;
+        // display: flex;
+    }
+    
+    &-content-left {
+        height: 100%;
+        padding: $spacing-tabs_content_left-paddingY $spacing-tabs_content_left-paddingX;
+    }
+    
+    &-pane {
+        width: 100%;
+        overflow: hidden;
+        // position: absolute;
+        // flex-shrink: 0;
+        // position: absolute;
+    }
+    
+    &-pane-inactive,
+    &-content-no-animated &-pane-inactive {
+        display: none;
+    }
+}
+
+@import "./rtl.scss";

package/lib/cjs/tabs/variables.scss

@@ -0,0 +1,115 @@
+$color-tabs_tab_line_default-border-default: var(--semi-color-border); // 线条式页签描边颜色默认
+
+$color-tabs_tab_line_default-bg-default: transparent; // 线条式页签背景颜色 - 默认
+$color-tabs_tab_line_default-text-default: var(--semi-color-text-2); // 线条式页签文本颜色 - 默认
+$color-tabs_tab_line_default-icon-default: var(--semi-color-text-2); // 线条式页签标示线颜色 - 默认
+
+$color-tabs_tab_line_default-bg-hover: transparent; // 线条式页签背景颜色 - 悬浮
+$color-tabs_tab_line_default-text-hover: var(--semi-color-text-0); // 线条式页签文本颜色 - 悬浮
+$color-tabs_tab_line_default-border-hover: var(--semi-color-fill-0); // 线条式页签标示线颜色 - 悬浮
+
+$color-tabs_tab_line_default-bg-active: transparent; // 线条式页签背景颜色 - 按下
+$color-tabs_tab_line_default-text-active: var(--semi-color-text-0); // 线条式页签文本颜色 - 按下
+$color-tabs_tab_line_default-border-active: var(--semi-color-fill-1); // 线条式页签标示线颜色 - 按下
+
+$color-tabs_tab_line_selected-bg-default: transparent; // 线条式页签背景颜色 - 选中
+$color-tabs_tab_line_selected-text-default: var(--semi-color-text-0); // 线条式页签文本颜色 - 选中
+$color-tabs_tab_line_indicator_selected-icon-default: var(--semi-color-primary); // 线条式页签标示线颜色 - 选中
+$color-tabs_tab_line_selected-icon-default: var(--semi-color-primary); // 线条式页签图标颜色 - 选中
+
+$color-tabs_tab_line_vertical_selected-bg-default: var(--semi-color-primary-light-default); // 垂直线条式页签背景颜色 - 选中
+$color-tabs_tab_line_vertical-bg-hover: var(--semi-color-fill-0); // 垂直线条式页签背景颜色 - 悬浮
+$color-tabs_tab_line_vertical-bg-active: var(--semi-color-fill-1); // 垂直线条式页签背景颜色 - 按下
+
+$color-tabs_tab_line_disabled-text-default: var(--semi-color-disabled-text); // 禁用线条式页签文本颜色 - 默认
+$color-tabs_tab_line_disabled-text-hover: var(--semi-color-disabled-text); // 禁用线条式页签文本颜色 - 悬浮
+
+$color-tabs_tab_card_default-border-default: var(--semi-color-border); // 卡片式页签描边颜色 - 默认
+
+$color-tabs_tab_button_selected-bg-default: var(--semi-color-primary-light-default); // 按钮式页签背景颜色 - 选中
+$color-tabs_tab_button_selected-text-default: var(--semi-color-primary); // 按钮式页签文本颜色 - 选中
+$color-tabs_tab_button-text-default: var(--semi-color-text-2); // 按钮式页签文本颜色 - 默认
+$color-tabs_tab_button-bg-hover: var(--semi-color-fill-0); // 按钮式页签背景颜色 - 悬浮
+$color-tabs_tab_button-bg-active: var(--semi-color-fill-1); // 按钮式页签背景颜色 - 按下
+
+$color-tabs_tab_card_indicator_selected-icon-default: var(--semi-color-border); // 卡片式页签描边
+$color-tabs_tab_card-bg-hover: var(--semi-color-fill-0); // 卡片式页签背景颜色 - 悬浮
+
+$color-tabs_tab_card_selected-bg-default: var(--semi-color-bg-1); // 卡片式页签背景颜色 - 选中
+$color-tabs_tab_card-bg-active: var(--semi-color-fill-1); // 卡片式页签背景颜色 -按下
+
+
+$color-tabs_tab-icon-default: var(--semi-color-text-2); // 页签图标颜色 - 默认
+$color-tabs_tab-icon-hover: var(--semi-color-text-0); // 页签图标颜色 - 悬浮
+$color-tabs_tab-icon-active: var(--semi-color-text-0); // 页签图标颜色 - 按下
+$color-tabs_tab_selected-icon-default: var(--semi-color-primary); // 页签图标颜色 - 选中
+
+
+$font-tabs_tab-fontWeight: $font-weight-regular; // 页签文本字重 - 默认
+$font-tabs_tab_active-fontWeight: $font-weight-bold; // 页签文本字重 - 选中
+
+$height-tabs_overflow_list: 300px;  // 页签折叠收起菜单高度
+
+$width-tabs_bar_line-border: $border-thickness-control; // 线条式页签底部分割线宽度
+$width-tabs_bar_line_tab-border: 2px; // 页签标示线宽度
+
+$width-tabs_bar_card-border: $border-thickness-control; // 卡片式页签底部分割线宽度
+
+$height-tabs_bar_extra_large: 50px; // 大尺寸页签高度
+$font-tabs_bar_extra_large-lineHeight: $height-tabs_bar_extra_large; // 大尺寸页签文字行高
+
+$height-tabs_bar_extra_small: 36px; // 小尺寸页签高度
+$font-tabs_bar_extra_small-lineHeight: $height-tabs_bar_extra_small; // 小尺寸页签文字行高
+
+$spacing-tabs_bar_extra-paddingY: 0; // 附加操作垂直内边距
+$spacing-tabs_bar_extra-paddingX: 5px; // 附加操作水平内边距
+$spacing-tabs_tab_icon-marginRight: $spacing-tight; // 附加操作垂直内边距
+$spacing-tabs_tab_icon-top: 3px; // 页签图标顶部位置
+$spacing-tabs_overflow_icon-marginRight: 4px; // 页签折叠切换按钮右侧外边距
+$spacing-tabs_overflow_icon-marginLeft: 4px; // 页签折叠切换按钮左侧外边距
+
+$spacing-tabs_bar_line_tab-paddingTop: $spacing-base; // 线条式页签
+$spacing-tabs_bar_line_tab-paddingRight: $spacing-extra-tight; // 线条式页签右侧内边距
+$spacing-tabs_bar_line_tab-paddingBottom: $spacing-base - $width-tabs_bar_line_tab-border; // 线条式页签底部内边距
+$spacing-tabs_bar_line_tab-paddingLeft: $spacing-extra-tight; // 线条式页签左侧内边距
+$spacing-tabs_bar_line_tab-marginRight: $spacing-loose; // 线条式页签右侧外边距
+
+$spacing-tabs_bar_line_tab_small-paddingTop: $spacing-tight; // 小尺寸线条式页签顶部内边距
+$spacing-tabs_bar_line_tab_small-paddingRight: $spacing-extra-tight; // 小尺寸线条式页签右侧内边距
+$spacing-tabs_bar_line_tab_small-paddingBottom: $spacing-tight - $width-tabs_bar_line_tab-border; // 小尺寸线条式页签底部内边距
+$spacing-tabs_bar_line_tab_small-paddingLeft: $spacing-extra-tight; // 小尺寸线条式页签左侧内边距
+
+$spacing-tabs_bar_line_tab_medium-paddingTop: $spacing-base-tight; // 中等尺寸线条式页签顶部内边距
+$spacing-tabs_bar_line_tab_medium-paddingRight: $spacing-extra-tight; // 中等尺寸线条式页签右侧内边距
+$spacing-tabs_bar_line_tab_medium-paddingBottom: $spacing-base-tight - $width-tabs_bar_line_tab-border; // 中等尺寸线条式页签底部内边距
+$spacing-tabs_bar_line_tab_medium-paddingLeft: $spacing-extra-tight; // 中等尺寸线条式页签左侧内边距
+
+$spacing-tabs_bar_line_tab_left-padding: 12px; // 垂直线条式页签左侧内边距
+$spacing-tabs_bar_line_tab_left_small-padding: $spacing-tight - 2;  // 小尺寸垂直线条式页签左侧内边距
+$spacing-tabs_bar_line_tab_left_medium-padding: $spacing-base-tight - 2; // 中等尺寸垂直线条式页签左侧内边距
+
+$spacing-tabs_content-paddingY: 5px; // 页签内容区垂直方向内边距
+$spacing-tabs_content-paddingX: 0; // 页签内容区水平方向内边距
+
+$spacing-tabs_content_left-paddingX: 5px; // 垂直页签内容区垂直方向内边距
+$spacing-tabs_content_left-paddingY: 0; // 垂直页签内容区水平方向内边距
+
+$spacing-tabs_bar_card_tab-marginRight: $spacing-tight; // 卡片式页签右侧外边距
+$spacing-tabs_bar_card_tab_active-paddingTop: $spacing-tight; // 卡片式选中页签顶部内边距
+$spacing-tabs_bar_card_tab_active-paddingBottom: $spacing-tight - 1; // 卡片式选中页签底部内边距
+$spacing-tabs_bar_card_tab_active-paddingLeft: $spacing-base-tight; // 卡片式选中页签左侧内边距
+$spacing-tabs_bar_card_tab_active-paddingRight: $spacing-base-tight; // 卡片式选中页签右侧内边距
+$spacing-tabs_bar_card_tab_left-marginBottom: $spacing-tight; // 垂直卡片式页签底部外边距
+$spacing-tabs_bar_card_tab_left_active-paddingY: $spacing-tight; // 垂直卡片式选中页签垂直内边距
+$spacing-tabs_bar_card_tab_left_active-paddingX: $spacing-base-tight; // 垂直卡片式选中页签水平内边距
+$spacing-tabs_bar_card_tab-paddingY: $spacing-tight; // 卡片式选中页签垂直内边距
+$spacing-tabs_bar_card_tab-paddingX: $spacing-base-tight; // 卡片式选中页签水平内边距
+
+$spacing-tabs_bar_button_tab_left-marginBottom: $spacing-tight; // 垂直按钮式页签底部外边距
+$spacing-tabs_bar_button_tab-marginRight: $spacing-tight; // 按钮式页签右侧外边距
+$spacing-tabs_bar_button_tab-paddingY: $spacing-tight; // 按钮式页签垂直内边距
+$spacing-tabs_bar_button_tab-paddingX: $spacing-base-tight; // 按钮式页签水平内边距
+
+$radius-tabs_tab_card: var(--semi-border-radius-small) var(--semi-border-radius-small) 0 0; // 卡片式页签四向圆角
+$radius-tabs_tab_card_left: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); // 垂直卡片式页签四向圆角
+$radius-tabs_tab_button: var(--semi-border-radius-small); // 按钮式页签圆角

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

@@ -0,0 +1,10 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+declare const strings: {
+    TAG_SIZE: string[];
+    TAG_COLOR: string[];
+    TAG_TYPE: string[];
+    AVATAR_SHAPE: string[];
+};
+export { cssClasses, strings };

package/lib/cjs/tag/constants.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.strings = exports.cssClasses = void 0;
+
+var _constants = require("../base/constants");
+
+/* eslint-disable max-len */
+const cssClasses = {
+  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-tag")
+};
+exports.cssClasses = 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_TYPE: ['light', 'solid', 'ghost'],
+  AVATAR_SHAPE: ['square', 'circle']
+};
+exports.strings = strings;

package/lib/cjs/tag/mixin.css

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

package/lib/cjs/tag/mixin.scss

@@ -0,0 +1,21 @@
+@mixin tag-style($color, $type) {
+    @if $type==solid {
+        background-color: unquote("rgba(var(--semi-#{$color}-5), 1)");
+        color: white;
+    }
+
+    @else if $type==ghost {
+        background-color: transparent;
+        border: 1px solid unquote("rgba(var(--semi-#{$color}-4), 1)");
+        color: unquote("rgba(var(--semi-#{$color}-5), 1)");
+    }
+
+    @else if $type==light {
+        background-color: unquote("rgba(var(--semi-#{$color}-5), 0.15)");
+        color: unquote("rgba(var(--semi-#{$color}-8), 1)");
+    }
+
+    @else {
+        @error "Unknown type #{$type}.";
+    }
+}

package/lib/cjs/tag/rtl.scss

@@ -0,0 +1,61 @@
+$module: #{$prefix}-tag;
+$tag-small: 20px;
+$tag-large: 24px;
+
+$tag-margin-bottom: $spacing-tight;
+$tag-margin-right: $spacing-tight;
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+        direction: rtl;
+
+        &-close {
+            padding-left: auto;
+            padding-right: $spacing-tag_close-paddingLeft;
+        }
+
+        &-closable {
+            padding: $spacing-tag_closable-paddingTop $spacing-tag_closable-paddingLeft $spacing-tag_closable-paddingBottom $spacing-tag_closable-paddingRight;
+        }
+
+        &-avatar-square,
+        &-avatar-circle {
+            .#{$prefix}-avatar {
+                margin-right: auto;
+                margin-left: $spacing-tag_avatar-marginRight;
+            }
+        }
+
+        &-avatar-square {
+            padding-right: auto;
+            padding-left: $spacing-tag_avatar_square-paddingRight;
+        }
+
+        &-avatar-circle {
+            padding: $spacing-tag_avatar_circle-paddingTop $spacing-tag_avatar_circle-paddingLeft $spacing-tag_avatar_circle-paddingBottom $spacing-tag_avatar_circle-paddingRight;
+        }
+    }
+
+    .#{$module}-group {
+        direction: rtl;
+
+        .#{$module} {
+            margin-right: auto;
+            margin-left: $spacing-tag_group-marginRight;
+        }
+    }
+
+    .#{$module}-rest-group-popover {
+        direction: rtl;
+
+        .#{$module} {
+            margin-right: 0;
+            margin-left: $spacing-tag_group-marginRight;
+            &:last-of-type {
+                margin-right: auto;
+                margin-left: 0;
+            }
+        }
+    }
+}