style: update tag

components/style/themes/default.less

@@ -14,9 +14,38 @@
 @primary-color-hover: color(~`colorPalette('@{primary-color}', 5) `);
 @primary-color-active: color(~`colorPalette('@{primary-color}', 7) `);
 @primary-color-outline: fade(@primary-color, @outline-fade);
-@info-color: @primary-color;
-@success-color: @green-6;
+
 @processing-color: @blue-6;
+
+// >>> Info
+@info-color: @primary-color;
+@info-color-deprecated-bg: color(~`colorPalette('@{info-color}', 1) `);
+@info-color-deprecated-border: color(~`colorPalette('@{info-color}', 3) `);
+
+// >>> Success
+@success-color: @green-6;
+@success-color-hover: color(~`colorPalette('@{success-color}', 5) `);
+@success-color-active: color(~`colorPalette('@{success-color}', 7) `);
+@success-color-outline: fade(@success-color, @outline-fade);
+@success-color-deprecated-bg: color(~`colorPalette('@{success-color}', 1) `);
+@success-color-deprecated-border: color(~`colorPalette('@{success-color}', 3) `);
+
+// >>> Warning
+@warning-color: @gold-6;
+@warning-color-hover: color(~`colorPalette('@{warning-color}', 5) `);
+@warning-color-active: color(~`colorPalette('@{warning-color}', 7) `);
+@warning-color-outline: fade(@warning-color, @outline-fade);
+@warning-color-deprecated-bg: color(~`colorPalette('@{warning-color}', 1) `);
+@warning-color-deprecated-border: color(~`colorPalette('@{warning-color}', 3) `);
+
+// >>> Error
+@error-color: @red-5;
+@error-color-hover: color(~`colorPalette('@{error-color}', 5) `);
+@error-color-active: color(~`colorPalette('@{error-color}', 7) `);
+@error-color-outline: fade(@error-color, @outline-fade);
+@error-color-deprecated-bg: color(~`colorPalette('@{error-color}', 1) `);
+@error-color-deprecated-border: color(~`colorPalette('@{error-color}', 3) `);
+
 @highlight-color: @red-5;
 @normal-color: #d9d9d9;
 @white: #fff;

components/tag/style/index.less

@@ -58,16 +58,20 @@
     background-color: transparent;
     border-color: transparent;
     cursor: pointer;
+
     &:not(&-checked):hover {
       color: @primary-color;
     }
+
     &:active,
     &-checked {
       color: @text-color-inverse;
     }
+
     &-checked {
       background-color: @primary-6;
     }
+
     &:active {
       background-color: @primary-7;
     }
@@ -97,23 +101,23 @@
     }
   }
 
-  .make-status-color-classes(@color, @status) {
-    @lightColor: '@{color}-1';
-    @lightBorderColor: '@{color}-3';
-    @darkColor: '@{color}-6';
+  .make-status-color-classes(@status, @cssVariableType) {
+    @bgColor: '@{cssVariableType}-color-deprecated-bg';
+    @borderColor: '@{cssVariableType}-color-deprecated-border';
+    @textColor: '@{cssVariableType}-color';
     &-@{status} {
-      color: @@darkColor;
-      background: @@lightColor;
-      border-color: @@lightBorderColor;
+      color: @@textColor;
+      background: @@bgColor;
+      border-color: @@borderColor;
     }
   }
 
   .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);
+  .make-status-color-classes(success, success);
+  .make-status-color-classes(processing, info);
+  .make-status-color-classes(error, error);
+  .make-status-color-classes(warning, warning);
 
   // To ensure that a space will be placed between character and `Icon`.
   > .@{iconfont-css-prefix} + span,