From 17454b2ceac3261cf4d75ef2e5442503608177fb Mon Sep 17 00:00:00 2001
From: zkwolf <chenhao5866@gmail.com>
Date: Sat, 14 Nov 2020 13:59:20 +0800
Subject: [PATCH] feat: tag support status color (#3166)

---
 components/style/themes/default.less |  1 +
 components/tag/style/index.less      | 25 ++++++++++++++++++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index e77fd7d12..487c45252 100644
--- a/components/style/themes/default.less
+++ b/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
 // ---
diff --git a/components/tag/style/index.less b/components/tag/style/index.less
index 3a033d61c..783eec930 100644
--- a/components/tag/style/index.less
+++ b/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;
+  }
 }