feat: tag support status color (#3166)

components/style/themes/default.less

@@ -487,6 +487,7 @@
 @tag-default-bg: @background-color-light;
 @tag-default-color: @text-color;
 @tag-font-size: @font-size-sm;
+@tag-line-height: 20px;
 
 // TimePicker
 // ---

components/tag/style/index.less

@@ -11,7 +11,7 @@
   margin-right: 8px;
   padding: 0 7px;
   font-size: @tag-font-size;
-  line-height: 20px;
+  line-height: @tag-line-height;
   white-space: nowrap;
   background: @tag-default-bg;
   border: @border-width-base @border-style-base @border-color-base;
@@ -64,6 +64,7 @@
   &-checkable {
     background-color: transparent;
     border-color: transparent;
+    cursor: pointer;
     &:not(&-checked):hover {
       color: @primary-color;
     }
@@ -102,5 +103,27 @@
     }
   }
 
+  .make-status-color-classes(@color, @status) {
+    @lightColor: '@{color}-1';
+    @lightBorderColor: '@{color}-3';
+    @darkColor: '@{color}-6';
+    &-@{status} {
+      color: @@darkColor;
+      background: @@lightColor;
+      border-color: @@lightBorderColor;
+    }
+  }
+
   .make-color-classes();
+
+  .make-status-color-classes('green', success);
+  .make-status-color-classes('blue', processing);
+  .make-status-color-classes('red', error);
+  .make-status-color-classes('orange', warning);
+
+  // To ensure that a space will be placed between character and `Icon`.
+  > .@{iconfont-css-prefix} + span,
+  > span + .@{iconfont-css-prefix} {
+    margin-left: 7px;
+  }
 }