Tag add more color and rename old colors

examples/routers/tag.vue

@@ -1,5 +1,25 @@
 <template>
     <div>
+        <div>
+            <Tag color="default">default</Tag>
+            <Tag color="primary">primary</Tag>
+            <Tag color="success">success</Tag>
+            <Tag color="error">error</Tag>
+            <Tag color="warning">warning</Tag>
+            <Tag color="magenta">magenta</Tag>
+            <Tag color="red">red</Tag>
+            <Tag color="volcano">volcano</Tag>
+            <Tag color="orange">orange</Tag>
+            <Tag color="gold">gold</Tag>
+            <Tag color="gold">不错</Tag>
+            <Tag color="lime">lime</Tag>
+            <Tag color="green">green</Tag>
+            <Tag color="cyan">cyan</Tag>
+            <Tag color="blue">blue</Tag>
+            <Tag color="geekblue">geekblue</Tag>
+            <Tag color="purple">purple</Tag>
+            <Tag color="white">purple</Tag>
+        </div>
         <Tag checkable>标签一</Tag>
         <Tag>标签二</Tag>
         <Tag v-if="show" closable @on-close="handleClose">标签三</Tag>
@@ -9,15 +29,15 @@
         <Tag type="dot">标签一</Tag>
         <Tag type="dot" closable>标签二</Tag>
         <br><br>
-        <Tag closable color="blue" checkable>标签一</Tag>
+        <Tag closable color="primary" checkable>标签一</Tag>
-        <Tag closable color="green" checkable>标签二</Tag>
+        <Tag closable color="success" checkable>标签二</Tag>
-        <Tag closable color="red" checkable>标签三</Tag>
+        <Tag closable color="error" checkable>标签三</Tag>
-        <Tag closable color="yellow" checkable>标签四</Tag>
+        <Tag closable color="warning" checkable>标签四</Tag>
         <br><br>
-        <Tag color="blue" checkable>标签一</Tag>
+        <Tag color="primary" checkable>标签一</Tag>
-        <Tag color="green" checkable>标签二</Tag>
+        <Tag color="success" checkable>标签二</Tag>
-        <Tag color="red" checkable>标签三</Tag>
+        <Tag color="error" checkable>标签三</Tag>
-        <Tag color="yellow" checkable>标签四</Tag>
+        <Tag color="warning" checkable>标签四</Tag>
         <br><br>
         <Tag closable color="#EF6AFF" checkable>标签一</Tag>
         <Tag color="#EF6AFF" checkable>标签一</Tag>
@@ -30,15 +50,15 @@
         <Tag type="dot" closable color="#EF6AFF">标签三</Tag>
         <Tag closable color="default">标签四</Tag>
         <br><br>
-        <Tag type="border" closable color="blue" checkable>标签一</Tag>
+        <Tag type="border" closable color="primary" checkable>标签一</Tag>
-        <Tag type="border" closable color="green">标签二</Tag>
+        <Tag type="border" closable color="success">标签二</Tag>
-        <Tag type="border" closable color="red">标签三</Tag>
+        <Tag type="border" closable color="error">标签三</Tag>
-        <Tag type="border" closable color="yellow">标签四</Tag>
+        <Tag type="border" closable color="warning">标签四</Tag>
         <br><br>
-        <Tag type="dot" closable color="blue" checkable>标签一</Tag>
+        <Tag type="dot" closable color="primary" checkable>标签一</Tag>
-        <Tag type="dot" closable color="green">标签二</Tag>
+        <Tag type="dot" closable color="success">标签二</Tag>
-        <Tag type="dot" closable color="red">标签三</Tag>
+        <Tag type="dot" closable color="error">标签三</Tag>
-        <Tag type="dot" closable color="yellow">标签四</Tag>
+        <Tag type="dot" closable color="warning">标签四</Tag>
         <br><br>
         <Tag v-for="item in count" :key="item" :name="item" closable @on-close="handleClose2">标签{{ item + 1 }}</Tag>
         <Button icon="ios-plus-empty" type="dashed" size="small" @click="handleAdd">添加标签</Button>

src/components/poptip/poptip.vue

@@ -168,7 +168,7 @@
             },
             contentPaddingStyle () {
                 const styles = {};
-                if (!!this.padding) styles['padding'] = this.padding;
+                if (this.padding !== '') styles['padding'] = this.padding;
                 return styles;
             }
         },

src/components/tag/tag.vue

@@ -16,7 +16,9 @@
     import Icon from '../icon';
     import { oneOf } from '../../utils/assist';
     const prefixCls = 'ivu-tag';
-    const initColorList = ['blue', 'green', 'red', 'yellow', 'default'];
+    const initColorList = ['default', 'primary', 'success', 'warning', 'error', 'blue', 'green', 'red', 'yellow', 'pink', 'magenta', 'volcano', 'orange', 'gold', 'lime', 'cyan', 'geekblue', 'purple'];
+    const colorList = ['pink', 'magenta', 'volcano', 'orange', 'gold', 'lime', 'cyan', 'geekblue', 'purple'];
+
     export default {
         name: 'Tag',
         components: { Icon },
@@ -74,7 +76,7 @@
                 return [
                     `${prefixCls}-text`,
                     this.type === 'border' ? (oneOf(this.color, initColorList) ? `${prefixCls}-color-${this.color}` : '') : '',
-                    (this.type !== 'dot' && this.type !== 'border' && this.color !== 'default') ? (this.isChecked ? `${prefixCls}-color-white` : '') : ''
+                    (this.type !== 'dot' && this.type !== 'border' && this.color !== 'default') ? (this.isChecked && colorList.indexOf(this.color) < 0 ? `${prefixCls}-color-white` : '') : ''
                 ];
             },
             dotClasses () {

src/styles/color/bezierEasing.less

@@ -0,0 +1,110 @@
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
+.bezierEasingMixin() {
+@functions: ~`(function() {
+  var NEWTON_ITERATIONS = 4;
+  var NEWTON_MIN_SLOPE = 0.001;
+  var SUBDIVISION_PRECISION = 0.0000001;
+  var SUBDIVISION_MAX_ITERATIONS = 10;
+
+  var kSplineTableSize = 11;
+  var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
+
+  var float32ArraySupported = typeof Float32Array === 'function';
+
+  function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
+  function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
+  function C (aA1)      { return 3.0 * aA1; }
+
+  // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
+  function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; }
+
+  // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
+  function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); }
+
+  function binarySubdivide (aX, aA, aB, mX1, mX2) {
+    var currentX, currentT, i = 0;
+    do {
+      currentT = aA + (aB - aA) / 2.0;
+      currentX = calcBezier(currentT, mX1, mX2) - aX;
+      if (currentX > 0.0) {
+        aB = currentT;
+      } else {
+        aA = currentT;
+      }
+    } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
+    return currentT;
+  }
+
+  function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) {
+   for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
+     var currentSlope = getSlope(aGuessT, mX1, mX2);
+     if (currentSlope === 0.0) {
+       return aGuessT;
+     }
+     var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
+     aGuessT -= currentX / currentSlope;
+   }
+   return aGuessT;
+  }
+
+  var BezierEasing = function (mX1, mY1, mX2, mY2) {
+    if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
+      throw new Error('bezier x values must be in [0, 1] range');
+    }
+
+    // Precompute samples table
+    var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
+    if (mX1 !== mY1 || mX2 !== mY2) {
+      for (var i = 0; i < kSplineTableSize; ++i) {
+        sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
+      }
+    }
+
+    function getTForX (aX) {
+      var intervalStart = 0.0;
+      var currentSample = 1;
+      var lastSample = kSplineTableSize - 1;
+
+      for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
+        intervalStart += kSampleStepSize;
+      }
+      --currentSample;
+
+      // Interpolate to provide an initial guess for t
+      var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
+      var guessForT = intervalStart + dist * kSampleStepSize;
+
+      var initialSlope = getSlope(guessForT, mX1, mX2);
+      if (initialSlope >= NEWTON_MIN_SLOPE) {
+        return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
+      } else if (initialSlope === 0.0) {
+        return guessForT;
+      } else {
+        return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
+      }
+    }
+
+    return function BezierEasing (x) {
+      if (mX1 === mY1 && mX2 === mY2) {
+        return x; // linear
+      }
+      // Because JavaScript number are imprecise, we should guarantee the extremes are right.
+      if (x === 0) {
+        return 0;
+      }
+      if (x === 1) {
+        return 1;
+      }
+      return calcBezier(getTForX(x), mY1, mY2);
+    };
+  };
+
+  this.colorEasing = BezierEasing(0.26, 0.09, 0.37, 0.18);
+  // less 3 requires a return
+  return '';
+})()`;
+}
+// It is hacky way to make this function will be compiled preferentially by less
+// resolve error: `ReferenceError: colorPalette is not defined`
+// https://github.com/ant-design/ant-motion/issues/44
+.bezierEasingMixin();

src/styles/color/colorPalette.less

@@ -0,0 +1,75 @@
+/* stylelint-disable no-duplicate-selectors */
+@import "bezierEasing";
+@import "tinyColor";
+
+// We create a very complex algorithm which take the place of original tint/shade color system
+// to make sure no one can understand it 👻
+// and create an entire color palette magicly by inputing just a single primary color.
+// We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin
+.colorPaletteMixin() {
+@functions: ~`(function() {
+  var hueStep = 2;
+  var saturationStep = 16;
+  var saturationStep2 = 5;
+  var brightnessStep1 = 5;
+  var brightnessStep2 = 15;
+  var lightColorCount = 5;
+  var darkColorCount = 4;
+
+  var getHue = function(hsv, i, isLight) {
+    var hue;
+    if (hsv.h >= 60 && hsv.h <= 240) {
+      hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
+    } else {
+      hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
+    }
+    if (hue < 0) {
+      hue += 360;
+    } else if (hue >= 360) {
+      hue -= 360;
+    }
+    return Math.round(hue);
+  };
+  var getSaturation = function(hsv, i, isLight) {
+    var saturation;
+    if (isLight) {
+      saturation = Math.round(hsv.s * 100) - saturationStep * i;
+    } else if (i == darkColorCount) {
+      saturation = Math.round(hsv.s * 100) + saturationStep;
+    } else {
+      saturation = Math.round(hsv.s * 100) + saturationStep2 * i;
+    }
+    if (saturation > 100) {
+      saturation = 100;
+    }
+    if (isLight && i === lightColorCount && saturation > 10) {
+      saturation = 10;
+    }
+    if (saturation < 6) {
+      saturation = 6;
+    }
+    return Math.round(saturation);
+  };
+  var getValue = function(hsv, i, isLight) {
+    if (isLight) {
+      return Math.round(hsv.v * 100) + brightnessStep1 * i;
+    }
+    return Math.round(hsv.v * 100) - brightnessStep2 * i;
+  };
+
+  this.colorPalette = function(color, index) {
+    var isLight = index <= 6;
+    var hsv = tinycolor(color).toHsv();
+    var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
+    return tinycolor({
+      h: getHue(hsv, i, isLight),
+      s: getSaturation(hsv, i, isLight),
+      v: getValue(hsv, i, isLight),
+    }).toHexString();
+  };
+})()`;
+}
+// It is hacky way to make this function will be compiled preferentially by less
+// resolve error: `ReferenceError: colorPalette is not defined`
+// https://github.com/ant-design/ant-motion/issues/44
+.colorPaletteMixin();

src/styles/color/colors.less

@@ -0,0 +1,146 @@
+@import 'colorPalette';
+
+// color palettes
+@blue-1: color(~`colorPalette("@{blue-6}", 1)`);
+@blue-2: color(~`colorPalette("@{blue-6}", 2)`);
+@blue-3: color(~`colorPalette("@{blue-6}", 3)`);
+@blue-4: color(~`colorPalette("@{blue-6}", 4)`);
+@blue-5: color(~`colorPalette("@{blue-6}", 5)`);
+@blue-6: #1890ff;
+@blue-7: color(~`colorPalette("@{blue-6}", 7)`);
+@blue-8: color(~`colorPalette("@{blue-6}", 8)`);
+@blue-9: color(~`colorPalette("@{blue-6}", 9)`);
+@blue-10: color(~`colorPalette("@{blue-6}", 10)`);
+
+@purple-1: color(~`colorPalette("@{purple-6}", 1)`);
+@purple-2: color(~`colorPalette("@{purple-6}", 2)`);
+@purple-3: color(~`colorPalette("@{purple-6}", 3)`);
+@purple-4: color(~`colorPalette("@{purple-6}", 4)`);
+@purple-5: color(~`colorPalette("@{purple-6}", 5)`);
+@purple-6: #722ed1;
+@purple-7: color(~`colorPalette("@{purple-6}", 7)`);
+@purple-8: color(~`colorPalette("@{purple-6}", 8)`);
+@purple-9: color(~`colorPalette("@{purple-6}", 9)`);
+@purple-10: color(~`colorPalette("@{purple-6}", 10)`);
+
+@cyan-1: color(~`colorPalette("@{cyan-6}", 1)`);
+@cyan-2: color(~`colorPalette("@{cyan-6}", 2)`);
+@cyan-3: color(~`colorPalette("@{cyan-6}", 3)`);
+@cyan-4: color(~`colorPalette("@{cyan-6}", 4)`);
+@cyan-5: color(~`colorPalette("@{cyan-6}", 5)`);
+@cyan-6: #13c2c2;
+@cyan-7: color(~`colorPalette("@{cyan-6}", 7)`);
+@cyan-8: color(~`colorPalette("@{cyan-6}", 8)`);
+@cyan-9: color(~`colorPalette("@{cyan-6}", 9)`);
+@cyan-10: color(~`colorPalette("@{cyan-6}", 10)`);
+
+@green-1: color(~`colorPalette("@{green-6}", 1)`);
+@green-2: color(~`colorPalette("@{green-6}", 2)`);
+@green-3: color(~`colorPalette("@{green-6}", 3)`);
+@green-4: color(~`colorPalette("@{green-6}", 4)`);
+@green-5: color(~`colorPalette("@{green-6}", 5)`);
+@green-6: #52c41a;
+@green-7: color(~`colorPalette("@{green-6}", 7)`);
+@green-8: color(~`colorPalette("@{green-6}", 8)`);
+@green-9: color(~`colorPalette("@{green-6}", 9)`);
+@green-10: color(~`colorPalette("@{green-6}", 10)`);
+
+@magenta-1: color(~`colorPalette("@{magenta-6}", 1)`);
+@magenta-2: color(~`colorPalette("@{magenta-6}", 2)`);
+@magenta-3: color(~`colorPalette("@{magenta-6}", 3)`);
+@magenta-4: color(~`colorPalette("@{magenta-6}", 4)`);
+@magenta-5: color(~`colorPalette("@{magenta-6}", 5)`);
+@magenta-6: #eb2f96;
+@magenta-7: color(~`colorPalette("@{magenta-6}", 7)`);
+@magenta-8: color(~`colorPalette("@{magenta-6}", 8)`);
+@magenta-9: color(~`colorPalette("@{magenta-6}", 9)`);
+@magenta-10: color(~`colorPalette("@{magenta-6}", 10)`);
+
+// alias of magenta
+@pink-1: color(~`colorPalette("@{pink-6}", 1)`);
+@pink-2: color(~`colorPalette("@{pink-6}", 2)`);
+@pink-3: color(~`colorPalette("@{pink-6}", 3)`);
+@pink-4: color(~`colorPalette("@{pink-6}", 4)`);
+@pink-5: color(~`colorPalette("@{pink-6}", 5)`);
+@pink-6: #eb2f96;
+@pink-7: color(~`colorPalette("@{pink-6}", 7)`);
+@pink-8: color(~`colorPalette("@{pink-6}", 8)`);
+@pink-9: color(~`colorPalette("@{pink-6}", 9)`);
+@pink-10: color(~`colorPalette("@{pink-6}", 10)`);
+
+@red-1: color(~`colorPalette("@{red-6}", 1)`);
+@red-2: color(~`colorPalette("@{red-6}", 2)`);
+@red-3: color(~`colorPalette("@{red-6}", 3)`);
+@red-4: color(~`colorPalette("@{red-6}", 4)`);
+@red-5: color(~`colorPalette("@{red-6}", 5)`);
+@red-6: #f5222d;
+@red-7: color(~`colorPalette("@{red-6}", 7)`);
+@red-8: color(~`colorPalette("@{red-6}", 8)`);
+@red-9: color(~`colorPalette("@{red-6}", 9)`);
+@red-10: color(~`colorPalette("@{red-6}", 10)`);
+
+@orange-1: color(~`colorPalette("@{orange-6}", 1)`);
+@orange-2: color(~`colorPalette("@{orange-6}", 2)`);
+@orange-3: color(~`colorPalette("@{orange-6}", 3)`);
+@orange-4: color(~`colorPalette("@{orange-6}", 4)`);
+@orange-5: color(~`colorPalette("@{orange-6}", 5)`);
+@orange-6: #fa8c16;
+@orange-7: color(~`colorPalette("@{orange-6}", 7)`);
+@orange-8: color(~`colorPalette("@{orange-6}", 8)`);
+@orange-9: color(~`colorPalette("@{orange-6}", 9)`);
+@orange-10: color(~`colorPalette("@{orange-6}", 10)`);
+
+@yellow-1: color(~`colorPalette("@{yellow-6}", 1)`);
+@yellow-2: color(~`colorPalette("@{yellow-6}", 2)`);
+@yellow-3: color(~`colorPalette("@{yellow-6}", 3)`);
+@yellow-4: color(~`colorPalette("@{yellow-6}", 4)`);
+@yellow-5: color(~`colorPalette("@{yellow-6}", 5)`);
+@yellow-6: #fadb14;
+@yellow-7: color(~`colorPalette("@{yellow-6}", 7)`);
+@yellow-8: color(~`colorPalette("@{yellow-6}", 8)`);
+@yellow-9: color(~`colorPalette("@{yellow-6}", 9)`);
+@yellow-10: color(~`colorPalette("@{yellow-6}", 10)`);
+
+@volcano-1: color(~`colorPalette("@{volcano-6}", 1)`);
+@volcano-2: color(~`colorPalette("@{volcano-6}", 2)`);
+@volcano-3: color(~`colorPalette("@{volcano-6}", 3)`);
+@volcano-4: color(~`colorPalette("@{volcano-6}", 4)`);
+@volcano-5: color(~`colorPalette("@{volcano-6}", 5)`);
+@volcano-6: #fa541c;
+@volcano-7: color(~`colorPalette("@{volcano-6}", 7)`);
+@volcano-8: color(~`colorPalette("@{volcano-6}", 8)`);
+@volcano-9: color(~`colorPalette("@{volcano-6}", 9)`);
+@volcano-10: color(~`colorPalette("@{volcano-6}", 10)`);
+
+@geekblue-1: color(~`colorPalette("@{geekblue-6}", 1)`);
+@geekblue-2: color(~`colorPalette("@{geekblue-6}", 2)`);
+@geekblue-3: color(~`colorPalette("@{geekblue-6}", 3)`);
+@geekblue-4: color(~`colorPalette("@{geekblue-6}", 4)`);
+@geekblue-5: color(~`colorPalette("@{geekblue-6}", 5)`);
+@geekblue-6: #2f54eb;
+@geekblue-7: color(~`colorPalette("@{geekblue-6}", 7)`);
+@geekblue-8: color(~`colorPalette("@{geekblue-6}", 8)`);
+@geekblue-9: color(~`colorPalette("@{geekblue-6}", 9)`);
+@geekblue-10: color(~`colorPalette("@{geekblue-6}", 10)`);
+
+@lime-1: color(~`colorPalette("@{lime-6}", 1)`);
+@lime-2: color(~`colorPalette("@{lime-6}", 2)`);
+@lime-3: color(~`colorPalette("@{lime-6}", 3)`);
+@lime-4: color(~`colorPalette("@{lime-6}", 4)`);
+@lime-5: color(~`colorPalette("@{lime-6}", 5)`);
+@lime-6: #a0d911;
+@lime-7: color(~`colorPalette("@{lime-6}", 7)`);
+@lime-8: color(~`colorPalette("@{lime-6}", 8)`);
+@lime-9: color(~`colorPalette("@{lime-6}", 9)`);
+@lime-10: color(~`colorPalette("@{lime-6}", 10)`);
+
+@gold-1: color(~`colorPalette("@{gold-6}", 1)`);
+@gold-2: color(~`colorPalette("@{gold-6}", 2)`);
+@gold-3: color(~`colorPalette("@{gold-6}", 3)`);
+@gold-4: color(~`colorPalette("@{gold-6}", 4)`);
+@gold-5: color(~`colorPalette("@{gold-6}", 5)`);
+@gold-6: #faad14;
+@gold-7: color(~`colorPalette("@{gold-6}", 7)`);
+@gold-8: color(~`colorPalette("@{gold-6}", 8)`);
+@gold-9: color(~`colorPalette("@{gold-6}", 9)`);
+@gold-10: color(~`colorPalette("@{gold-6}", 10)`);

src/styles/components/tag.less

@@ -28,19 +28,19 @@
     }
 
     &-color{
-        &-red{
+        &-error{
             color: @error-color !important;
             border-color: @error-color;
         }
-        &-green{
+        &-success{
             color: @success-color !important;
             border-color: @success-color;
         }
-        &-blue{
+        &-primary{
             color: @link-color !important;
             border-color: @link-color;
         }
-        &-yellow{
+        &-warning{
             color: @warning-color !important;
             border-color: @warning-color;
         }
@@ -106,7 +106,7 @@
             }
         }
 
-        &.@{tag-prefix-cls}-blue {
+        &.@{tag-prefix-cls}-primary {
             color: @link-color !important;
             border: 1px solid @link-color !important;
 
@@ -117,7 +117,7 @@
                 color: @link-color !important;
             }
         }
-        &.@{tag-prefix-cls}-green {
+        &.@{tag-prefix-cls}-success {
             color: @success-color !important;
             border: 1px solid @success-color !important;
 
@@ -128,7 +128,7 @@
                 color: @success-color !important;
             }
         }
-        &.@{tag-prefix-cls}-yellow {
+        &.@{tag-prefix-cls}-warning {
             color: @warning-color !important;
             border: 1px solid @warning-color !important;
 
@@ -139,7 +139,7 @@
                 color: @warning-color !important;
             }
         }
-        &.@{tag-prefix-cls}-red {
+        &.@{tag-prefix-cls}-error {
             color: @error-color !important;
             border: 1px solid @error-color !important;
 
@@ -186,10 +186,10 @@
         }
     }
 
-    &-blue,
+    &-primary,
-    &-green,
+    &-success,
-    &-yellow,
+    &-warning,
-    &-red {
+    &-error {
         border: 0;
         &,
         a,
@@ -200,27 +200,47 @@
         }
     }
 
-    &-blue,
+    &-primary,
-    &-blue&-dot &-dot-inner
+    &-primary&-dot &-dot-inner
     {
         background: @link-color;
     }
 
-    &-green,
+    &-success,
-    &-green&-dot &-dot-inner
+    &-success&-dot &-dot-inner
     {
         background: @success-color;
     }
 
-    &-yellow,
+    &-warning,
-    &-yellow&-dot &-dot-inner
+    &-warning&-dot &-dot-inner
     {
         background: @warning-color;
     }
 
-    &-red,
+    &-error,
-    &-red&-dot &-dot-inner
+    &-error&-dot &-dot-inner
     {
         background: @error-color;
     }
+
+    @colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue, purple;
+
+    .make-color-classes(@i: length(@colors)) when (@i > 0) {
+        .make-color-classes(@i - 1);
+        @color: extract(@colors, @i);
+        @lightColor: "@{color}-1";
+        @lightBorderColor: "@{color}-3";
+        @darkColor: "@{color}-6";
+        &-@{color} {
+            line-height: 20px;
+            background: @@lightColor;
+            border-color: @@lightBorderColor;
+            .@{tag-prefix-cls}-text{
+                color: @@darkColor !important;
+            }
+        }
+    }
+
+    .make-color-classes();
 }

src/styles/custom.less

@@ -1,3 +1,5 @@
+@import "color/colors";
+
 // Prefix
 @css-prefix             : ivu-;
 @css-prefix-iconfont    : ivu-icon;