feat: Badge add succss type (#1673)

content/show/badge/index-en-US.md

@@ -265,7 +265,7 @@ import { Badge } from '@douyinfe/semi-ui';
         <br/>
         <span><Badge dot type='tertiary' /> info</span>
         <br/>
-        <span><Badge dot style={{ backgroundColor: 'var(--semi-color-success)' }} /> success</span>
+        <span><Badge dot type='success' /> success</span>
         <br/>
         <span><Badge dot type='warning' /> warning</span>
         <br/>
@@ -285,7 +285,7 @@ import { Badge } from '@douyinfe/semi-ui';
 | position      | Badge position, optional `left Top`, `left Bottom`, `right Top`, `right Bottom` | string     | `rightTop` |
 | style         | style                                                                           | CSSProperties     | -          |
 | theme         | Badge theme, one of `solid`, `light`, `inverted`                                | string     | `solid`    |
-| type          | Badge type, one of `primary`, `secondary`, `sense`, `danger`, `warning`         | string     | `primary`  |
+| type          | Badge type, one of `primary`, `secondary`, `tertiary`, `danger`, `warning`,`success`,         | string     | `primary`  |
 
 ## Content Guidelines
 

content/show/badge/index.md

@@ -263,7 +263,7 @@ import { Badge } from '@douyinfe/semi-ui';
         <br/>
         <span><Badge dot type='tertiary' /> 信息 info</span>
         <br/>
-        <span><Badge dot style={{ backgroundColor: 'var(--semi-color-success)' }} /> 成功 success</span>
+        <span><Badge dot type='success' /> 成功 success</span>
         <br/>
         <span><Badge dot type='warning' /> 提醒 warning</span>
         <br/>
@@ -283,7 +283,7 @@ import { Badge } from '@douyinfe/semi-ui';
 | position | 徽章位置，可选 `leftTop`、 `leftBottom`、 `rightTop`、 `rightBottom` | string | `rightTop`  |
 | style | 徽章的样式 | CSSProperties | 无 | 
 | theme | 徽章主题，可选 `solid`、 `light`、 `inverted` | string | `solid` |
-| type | 徽章类型，可选 `primary`、 `secondary`、 `tertiary`、 `danger`、 `warning` | string | `primary`  |
+| type | 徽章类型，可选 `primary`、 `secondary`、 `tertiary`、 `danger`、 `warning`、 `success` | string | `primary`  |
 
 
 ## 文案规范

packages/semi-foundation/badge/badge.scss

@@ -163,6 +163,19 @@ $module: #{$prefix}-badge;
         }
     }
 
+    &-success {
+        &.#{$module}-solid {
+            background-color: $color-badge_success_solid-bg-default;
+        }
+        &.#{$module}-light {
+            background-color: $color-badge_success_light-bg-default;
+            color: $color-badge_success_light-text-default;
+        }
+        &.#{$module}-inverted {
+            color: $color-badge_success_inverted-text-default;
+        }
+    }
+
 }
 
 @import "./rtl.scss";

packages/semi-foundation/badge/variables.scss

@@ -29,6 +29,10 @@ $color-badge_warning_light-bg-default: var(--semi-color-warning-light-default);
 $color-badge_warning_light-text-default: var(--semi-color-warning); // 文字颜色 - 浅版危险
 $color-badge_warning_inverted-text-default: var(--semi-color-warning); // 文字颜色 - 白底
 
+$color-badge_success_solid-bg-default: var(--semi-color-success); // 背景颜色 - 成功
+$color-badge_success_light-bg-default: var(--semi-color-success-light-default); // 背景颜色 - 浅版成功
+$color-badge_success_light-text-default: var(--semi-color-success); // 文字颜色 - 浅版成功
+$color-badge_success_inverted-text-default: var(--semi-color-success); // 文字颜色 - 白底
 
 $width-badge_dot: 8px; // 点状徽标宽度
 $height-badge_dot: 8px; // 点状徽标高度

packages/semi-ui/badge/_story/badge.stories.jsx

@@ -46,7 +46,7 @@ export const MaxCount = () => (
 );
 
 export const Type = () => (
-  <div>
+  <div style={{ marginTop: 20}}>
     <Badge count={5} type="primary">
       <a style={style}></a>
     </Badge>
@@ -65,6 +65,9 @@ export const Type = () => (
     <Badge dot type="primary">
       <a style={style}></a>
     </Badge>
+    <Badge dot type="success">
+      <a style={style}></a>
+    </Badge>
   </div>
 );
 

packages/semi-ui/badge/index.tsx

@@ -8,7 +8,7 @@ import '@douyinfe/semi-foundation/badge/badge.scss';
 
 const prefixCls = cssClasses.PREFIX;
 
-export type BadgeType = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning';
+export type BadgeType = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success';
 export type BadgeTheme = 'solid' | 'light' | 'inverted';
 export type BadgePosition = 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';