Tag: add chalk theme

examples/docs/en-US/tag.md

@@ -4,11 +4,10 @@
       return {
         tags: [
           { name: 'Tag 1', type: '' },
-          { name: 'Tag 2', type: 'gray' },
-          { name: 'Tag 3', type: 'primary' },
-          { name: 'Tag 4', type: 'success' },
-          { name: 'Tag 5', type: 'warning' },
-          { name: 'Tag 6', type: 'danger' }
+          { name: 'Tag 2', type: 'success' },
+          { name: 'Tag 3', type: 'info' },
+          { name: 'Tag 4', type: 'warning' },
+          { name: 'Tag 5', type: 'danger' }
         ],
         dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],
         inputVisible: false,
@@ -46,17 +45,17 @@
     }
     .button-new-tag {
       margin-left: 10px;
-      height: 24px;
-      line-height: 22px;
+      height: 30px;
+      line-height: 28px;
       padding: 0 *;
     }
     .input-new-tag {
-      width: 78px;
+      width: 90px;
       margin-left: 10px;
       vertical-align: bottom;
 
       .el-input__inner {
-        height: 24px;
+        height: 30px;
       }
     }
   }
@@ -72,11 +71,10 @@ Used for marking and selection.
 
 ```html
 <el-tag>Tag One</el-tag>
-<el-tag type="gray">Tag Two</el-tag>
-<el-tag type="primary">Tag Three</el-tag>
-<el-tag type="success">Tag Four</el-tag>
-<el-tag type="warning">Tag Five</el-tag>
-<el-tag type="danger">Tag Six</el-tag>
+<el-tag type="success">Tag Two</el-tag>
+<el-tag type="info">Tag Three</el-tag>
+<el-tag type="warning">Tag Four</el-tag>
+<el-tag type="danger">Tag Five</el-tag>
 ```
 :::
 
@@ -88,10 +86,9 @@ Used for marking and selection.
 <el-tag
   v-for="tag in tags"
   :key="tag.name"
-  :closable="true"
-  :type="tag.type"
->
-{{tag.name}}
+  closable
+  :type="tag.type">
+  {{tag.name}}
 </el-tag>
 
 <script>
@@ -100,11 +97,10 @@ Used for marking and selection.
       return {
         tags: [
           { name: 'Tag 1', type: '' },
-          { name: 'Tag 2', type: 'gray' },
-          { name: 'Tag 3', type: 'primary' },
-          { name: 'Tag 4', type: 'success' },
-          { name: 'Tag 5', type: 'warning' },
-          { name: 'Tag 6', type: 'danger' }
+          { name: 'Tag 2', type: 'success' },
+          { name: 'Tag 3', type: 'info' },
+          { name: 'Tag 4', type: 'warning' },
+          { name: 'Tag 5', type: 'danger' }
         ]
       };
     }
@@ -122,11 +118,10 @@ You can use the `close` event to add and remove tag dynamically.
 <el-tag
   :key="tag"
   v-for="tag in dynamicTags"
-  :closable="true"
+  closable
   :close-transition="false"
-  @close="handleClose(tag)"
->
-{{tag}}
+  @close="handleClose(tag)">
+  {{tag}}
 </el-tag>
 <el-input
   class="input-new-tag"
@@ -139,6 +134,28 @@ You can use the `close` event to add and remove tag dynamically.
 >
 </el-input>
 <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
+
+<style>
+  .el-tag + .el-tag {
+    margin-left: 10px;
+  }
+  .button-new-tag {
+    margin-left: 10px;
+    height: 30px;
+    line-height: 28px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
+  .el-input__inner {
+    height: 30px;
+  }
+</style>
+
 <script>
   export default {
     data() {
@@ -177,14 +194,14 @@ You can use the `close` event to add and remove tag dynamically.
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| type | theme | string | primary/gray/success/warning/danger | — |
-| closable | whether Tab can be removed | boolean | — | false |
+| type | theme | string | success/info/warning/danger | — |
+| closable | whether Tag can be removed | boolean | — | false |
 | close-transition | whether to disable animations | boolean | — | false |
 | hit | whether Tag has a highlighted border | boolean | — | false |
-| color | background color of the tag | string | — | — |
+| color | background color of the Tag | string | — | — |
 
 
 ### Events
 | Event Name | Description | Parameters |
 |---------- |-------- |---------- |
-| close | triggers when Tab is removed | — |
+| close | triggers when Tag is removed | — |

examples/docs/zh-CN/tag.md

@@ -4,11 +4,10 @@
       return {
         tags: [
           { name: '标签一', type: '' },
-          { name: '标签二', type: 'gray' },
-          { name: '标签三', type: 'primary' },
-          { name: '标签四', type: 'success' },
-          { name: '标签五', type: 'warning' },
-          { name: '标签六', type: 'danger' }
+          { name: '标签二', type: 'success' },
+          { name: '标签三', type: 'info' },
+          { name: '标签四', type: 'warning' },
+          { name: '标签五', type: 'danger' }
         ],
         dynamicTags: ['标签一', '标签二', '标签三'],
         inputVisible: false,
@@ -46,17 +45,17 @@
     }
     .button-new-tag {
       margin-left: 10px;
-      height: 24px;
-      line-height: 22px;
+      height: 30px;
+      line-height: 28px;
       padding: 0 *;
     }
     .input-new-tag {
-      width: 78px;
+      width: 90px;
       margin-left: 10px;
       vertical-align: bottom;
 
       .el-input__inner {
-        height: 24px;
+        height: 30px;
       }
     }
   }
@@ -72,11 +71,10 @@
 
 ```html
 <el-tag>标签一</el-tag>
-<el-tag type="gray">标签二</el-tag>
-<el-tag type="primary">标签三</el-tag>
-<el-tag type="success">标签四</el-tag>
-<el-tag type="warning">标签五</el-tag>
-<el-tag type="danger">标签六</el-tag>
+<el-tag type="success">标签二</el-tag>
+<el-tag type="info">标签三</el-tag>
+<el-tag type="warning">标签四</el-tag>
+<el-tag type="danger">标签五</el-tag>
 ```
 :::
 
@@ -88,10 +86,9 @@
 <el-tag
   v-for="tag in tags"
   :key="tag.name"
-  :closable="true"
-  :type="tag.type"
->
-{{tag.name}}
+  closable
+  :type="tag.type">
+  {{tag.name}}
 </el-tag>
 
 <script>
@@ -100,11 +97,10 @@
       return {
         tags: [
           { name: '标签一', type: '' },
-          { name: '标签二', type: 'gray' },
-          { name: '标签三', type: 'primary' },
-          { name: '标签四', type: 'success' },
-          { name: '标签五', type: 'warning' },
-          { name: '标签六', type: 'danger' }
+          { name: '标签二', type: 'success' },
+          { name: '标签三', type: 'info' },
+          { name: '标签四', type: 'warning' },
+          { name: '标签五', type: 'danger' }
         ]
       };
     }
@@ -122,11 +118,10 @@
 <el-tag
   :key="tag"
   v-for="tag in dynamicTags"
-  :closable="true"
+  closable
   :close-transition="false"
-  @close="handleClose(tag)"
->
-{{tag}}
+  @close="handleClose(tag)">
+ {{tag}}
 </el-tag>
 <el-input
   class="input-new-tag"
@@ -139,6 +134,28 @@
 >
 </el-input>
 <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
+
+<style>
+  .el-tag + .el-tag {
+    margin-left: 10px;
+  }
+  .button-new-tag {
+    margin-left: 10px;
+    height: 30px;
+    line-height: 28px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
+  .el-input__inner {
+    height: 30px;
+  }
+</style>
+
 <script>
   export default {
     data() {
@@ -177,7 +194,7 @@
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| type | 主题 | string | primary/gray/success/warning/danger | — |
+| type | 主题 | string | success/info/warning/danger | — |
 | closable | 是否可关闭 | boolean | — | false |
 | close-transition | 是否禁用渐变动画 | boolean | — | false |
 | hit | 是否有边框描边 | boolean | — | false |
@@ -187,4 +204,4 @@
 ### Events
 | 事件名称 | 说明 | 回调参数 |
 |---------- |-------- |---------- |
-| close | 关闭tag时触发的事件 | — |
+| close | 关闭 Tag 时触发的事件 | — |

packages/theme-chalk/src/common/var.scss

@@ -506,31 +506,31 @@ $--tooltip-padding: 10px;
 
 /* Tag
 -------------------------- */
-$--tag-padding: 0 5px;
-$--tag-fill: $--border-color-hover;
-$--tag-color: $--color-white;
-$--tag-close-color: #666;
+$--tag-padding: 0 10px;
+$--tag-fill: rgba($--color-primary, 0.10);
+$--tag-color: $--color-primary;
+$--tag-border: rgba($--color-primary, 0.20);
 $--tag-font-size: 12px;
 $--tag-border-radius: 4px;
 
-$--tag-gray-fill: $--color-text-secondary;
-$--tag-gray-border: $--color-text-secondary;
-$--tag-gray-color: $--link-color;
+$--tag-info-fill: rgba($--color-info, 0.10);
+$--tag-info-border: rgba($--color-info, 0.20);
+$--tag-info-color: $--color-info;
 
-$--tag-primary-fill: rgba($--color-primary,0.10);
-$--tag-primary-border: rgba($--color-primary,0.20);
+$--tag-primary-fill: rgba($--color-primary, 0.10);
+$--tag-primary-border: rgba($--color-primary, 0.20);
 $--tag-primary-color: $--color-primary;
 
-$--tag-success-fill: rgba(18,206,102,0.10);
-$--tag-success-border: rgba(18,206,102,0.20);
+$--tag-success-fill: rgba($--color-success, 0.10);
+$--tag-success-border: rgba($--color-success, 0.20);
 $--tag-success-color: $--color-success;
 
-$--tag-warning-fill: rgba(247,186,41,0.10);
-$--tag-warning-border: rgba(247,186,41,0.20);
+$--tag-warning-fill: rgba($--color-warning, 0.10);
+$--tag-warning-border: rgba($--color-warning, 0.20);
 $--tag-warning-color: $--color-warning;
 
-$--tag-danger-fill: rgba(255,73,73,0.10);
-$--tag-danger-border: rgba(255,73,73,0.20);
+$--tag-danger-fill: rgba($--color-danger, 0.10);
+$--tag-danger-border: rgba($--color-danger, 0.20);
 $--tag-danger-color: $--color-danger;
 
 /* Tree

packages/theme-chalk/src/tag.scss

@@ -5,13 +5,13 @@
   background-color: $--tag-fill;
   display: inline-block;
   padding: $--tag-padding;
-  height: 24px;
-  line-height: 22px;
+  height: 30px;
+  line-height: 28px;
   font-size: $--tag-font-size;
   color: $--tag-color;
   border-radius: $--tag-border-radius;
   box-sizing: border-box;
-  border: 1px solid transparent;
+  border: 1px solid $--tag-border;
   white-space: nowrap;
 
   & .el-icon-close {
@@ -27,36 +27,28 @@
     vertical-align: middle;
     top: -1px;
     right: -2px;
+    color: $--tag-color;
 
     &:hover {
-      background-color: $--color-white;
-      color: $--tag-fill;
+      background-color: $--tag-color;
+      color: $--color-white;
     }
   }
 
-  @include m(gray) {
-    background-color: $--tag-gray-fill;
-    border-color: $--tag-gray-border;
-    color: $--tag-gray-color;
+  @include m(info) {
+    background-color: $--tag-info-fill;
+    border-color: $--tag-info-border;
+    color: $--tag-info-color;
     @include when(hit) {
-      border-color: $--tag-gray-color;
+      border-color: $--tag-info-color;
     }
 
-    & .el-tag__close:hover {
-      background-color: $--tag-gray-color;
-      color: $--color-white;
-    }
-  }
-  @include m(primary) {
-    background-color: $--tag-primary-fill;
-    border-color: $--tag-primary-border;
-    color: $--tag-primary-color;
-    @include when(hit) {
-      border-color: $--tag-primary-color;
+    & .el-tag__close {
+      color: $--tag-info-color;
     }
 
     & .el-tag__close:hover {
-      background-color: $--tag-primary-color;
+      background-color: $--tag-info-color;
       color: $--color-white;
     }
   }
@@ -68,6 +60,10 @@
       border-color: $--tag-success-color;
     }
 
+    & .el-tag__close {
+      color: $--tag-success-color;
+    }
+
     & .el-tag__close:hover {
       background-color: $--tag-success-color;
       color: $--color-white;
@@ -81,6 +77,10 @@
       border-color: $--tag-warning-color;
     }
 
+    & .el-tag__close {
+      color: $--tag-warning-color;
+    }
+
     & .el-tag__close:hover {
       background-color: $--tag-warning-color;
       color: $--color-white;
@@ -94,6 +94,10 @@
       border-color: $--tag-danger-color;
     }
 
+    & .el-tag__close {
+      color: $--tag-danger-color;
+    }
+
     & .el-tag__close:hover {
       background-color: $--tag-danger-color;
       color: $--color-white;