New color system (#4426)

* Add new color patterns algorithm

* Add color palettes

* update other colors

* fix gray color

* update more tint/shade to colorPalette

* new font color

* Update doc for new color system

* improve doc style

.lesshintrc

@@ -16,6 +16,7 @@
     "components/style/core/base.less",
     "components/style/core/iconfont.less",
     "components/style/core/normalize.less",
-    "components/style/mixins/compatibility.less"
+    "components/style/mixins/compatibility.less",
+    "components/style/color/*"
   ]
 }

components/alert/style/index.less

@@ -29,32 +29,32 @@
   }
 
   &-success {
-    border: 1px solid tint(@success-color, 80%);
+    border: 1px solid @green-2;
-    background-color: tint(@success-color, 90%);
+    background-color: @green-1;
     .@{alert-prefix-cls}-icon {
       color: @success-color;
     }
   }
 
   &-info {
-    border: 1px solid tint(@primary-color, 80%);
+    border: 1px solid @primary-2;
-    background-color: tint(@primary-color, 90%);
+    background-color: @primary-1;
     .@{alert-prefix-cls}-icon {
       color: @primary-color;
     }
   }
 
   &-warning {
-    border: 1px solid tint(@warning-color, 80%);
+    border: 1px solid @yellow-2;
-    background-color: tint(@warning-color, 90%);
+    background-color: @yellow-1;
     .@{alert-prefix-cls}-icon {
       color: @warning-color;
     }
   }
 
   &-error {
-    border: 1px solid tint(@error-color, 80%);
+    border: 1px solid @red-2;
-    background-color: tint(@error-color, 90%);
+    background-color: @red-1;
     .@{alert-prefix-cls}-icon {
       color: @error-color;
     }

components/breadcrumb/style/index.less

@@ -10,7 +10,7 @@
     color: @text-color;
     transition: color .3s;
     &:hover {
-      color: tint(@primary-color, 20%);
+      color: @primary-5;
     }
   }
 

components/button/style/mixin.less

@@ -21,15 +21,14 @@
 
 .button-variant-primary(@color; @background) {
   .button-color(@color; @background; @background);
-
   &:hover,
   &:focus {
-    .button-color(@color; tint(@background, 20%); tint(@background, 20%));
+    .button-color(@color; ~`colorPalette("@{background}", 5)`; ~`colorPalette("@{background}", 5)`);
   }
 
   &:active,
   &.active {
-    .button-color(@color; shade(@background, 5%); shade(@background, 5%));
+    .button-color(@color; ~`colorPalette("@{background}", 7)`; ~`colorPalette("@{background}", 7)`);
   }
 
   .button-disabled();
@@ -40,12 +39,12 @@
 
   &:hover,
   &:focus {
-    .button-color(tint(@primary-color, 20%); @background; tint(@primary-color, 20%));
+    .button-color(@primary-5; @background; @primary-5);
   }
 
   &:active,
   &.active {
-    .button-color(shade(@primary-color, 5%); @background; shade(@primary-color, 5%));
+    .button-color(@primary-7; @background; @primary-7);
   }
 
   .button-disabled();

components/calendar/style/index.less

@@ -98,7 +98,7 @@
     line-height: 22px;
 
     &:hover {
-      background: tint(@primary-color, 90%);
+      background: @primary-1;
       cursor: pointer;
     }
   }
@@ -137,7 +137,7 @@
 
   &-last-month-cell &-value,
   &-next-month-btn-day &-value {
-    color: #ccc;
+    color: @disabled-color;
   }
 
   &-month-panel-table {
@@ -179,11 +179,11 @@
     color: @text-color;
     height: 116px;
     padding: 4px 8px;
-    border-top: 2px solid #eee;
+    border-top: 2px solid @border-color-split;
     transition: background 0.3s ease;
 
     &:hover {
-      background: tint(@primary-color, 90%);
+      background: @primary-1;
       cursor: pointer;
     }
   }
@@ -208,7 +208,7 @@
   &-fullscreen &-month-panel-current-cell &-month,
   &-fullscreen &-today &-date {
     border-top-color: @primary-color;
-    background-color: tint(@primary-color, 90%);
+    background-color: @primary-1;
     color: @primary-color;
   }
   &-fullscreen &-month-panel-current-cell &-value {
@@ -216,7 +216,7 @@
   }
   &-fullscreen &-last-month-cell &-date,
   &-fullscreen &-next-month-btn-day &-date {
-    color: #ccc;
+    color: @disabled-color;
   }
 
   &-fullscreen &-content {

components/cascader/style/index.less

@@ -55,7 +55,7 @@
       background: #fff;
       top: 50%;
       font-size: @font-size-base;
-      color: #ccc;
+      color: @disabled-color;
       width: 12px;
       height: 12px;
       margin-top: -6px;
@@ -152,11 +152,11 @@
     white-space: nowrap;
     transition: all 0.3s ease;
     &:hover {
-      background: tint(@primary-color, 90%);
+      background: @primary-1;
     }
     &-disabled {
       cursor: not-allowed;
-      color: #ccc;
+      color: @disabled-color;
       &:hover {
         background: transparent;
       }

components/checkbox/style/mixin.less

@@ -101,7 +101,7 @@
     &.@{checkbox-prefix-cls}-checked {
       .@{checkbox-inner-prefix-cls}:after {
         animation-name: none;
-        border-color: #ccc;
+        border-color: @disabled-color;
       }
     }
 
@@ -115,7 +115,7 @@
     }
 
     & + span {
-      color: #ccc;
+      color: @disabled-color;
       cursor: not-allowed;
     }
   }

components/date-picker/style/Calendar.less

@@ -184,13 +184,13 @@
     }
 
     &:hover {
-      background: tint(@primary-color, 90%);
+      background: @primary-1;
       cursor: pointer;
     }
 
     &:active {
       color: #fff;
-      background: tint(@primary-color, 20%);
+      background: @primary-5;
     }
   }
 
@@ -202,7 +202,7 @@
 
   &-last-month-cell &-date,
   &-next-month-btn-day &-date {
-    color: #ccc;
+    color: @disabled-color;
   }
 
   &-selected-day &-date {
@@ -258,7 +258,7 @@
     text-align: center;
     margin: 0 0 0 8px;
     &-disabled {
-      color: #ccc;
+      color: @disabled-color;
       cursor: not-allowed;
     }
   }
@@ -280,7 +280,7 @@
   .@{calendar-prefix-cls}-clear-btn:after {
     .iconfont-font("\e62e");
     font-size: @font-size-base;
-    color: #ccc;
+    color: @disabled-color;
     display: inline-block;
     line-height: 1;
     width: 20px;

components/date-picker/style/DecadePanel.less

@@ -42,7 +42,7 @@
   transition: background 0.3s ease;
 
   &:hover {
-    background: tint(@primary-color, 90%);
+    background: @primary-1;
     cursor: pointer;
   }
 }

components/date-picker/style/MonthPanel.less

@@ -61,7 +61,7 @@
   transition: background 0.3s ease;
 
   &:hover {
-    background: tint(@primary-color, 90%);
+    background: @primary-1;
     cursor: pointer;
   }
 }

components/date-picker/style/Picker.less

@@ -51,7 +51,7 @@
     background: #fff;
     top: 50%;
     font-size: @font-size-base;
-    color: #ccc;
+    color: @disabled-color;
     width: 14px;
     height: 14px;
     margin-top: -7px;

components/date-picker/style/RangePicker.less

@@ -130,7 +130,7 @@
     &:before {
       content: '';
       display: block;
-      background: tint(@primary-color, 90%);
+      background: @primary-1;
       border-radius: 0;
       border: 0;
       position: absolute;

components/date-picker/style/TimePicker.less

@@ -100,7 +100,7 @@
     }
 
     li:hover {
-      background: tint(@primary-color, 90%);
+      background: @primary-1;
     }
 
     li&-option-selected {
@@ -152,7 +152,7 @@
       margin-right: 60px;
 
       &-disabled {
-        color: #ccc;
+        color: @disabled-color;
       }
     }
   }

components/date-picker/style/YearPanel.less

@@ -42,7 +42,7 @@
   transition: background 0.3s ease;
 
   &:hover {
-    background: tint(@primary-color, 90%);
+    background: @primary-1;
     cursor: pointer;
   }
 }

components/dropdown/style/index.less

@@ -68,16 +68,16 @@
       }
 
       &:hover {
-        background-color: tint(@primary-color, 90%);
+        background-color: @primary-1;
       }
 
       &-disabled {
-        color: #ccc;
+        color: @disabled-color;
         cursor: not-allowed;
         pointer-events: none;
 
         &:hover {
-          color: #ccc;
+          color: @disabled-color;
           background-color: @component-background;
           cursor: not-allowed;
         }

components/input-number/style/index.less

@@ -37,7 +37,7 @@
     }
     &:hover &-up-inner,
     &:hover &-down-inner {
-      color: tint(@primary-color, 20%);
+      color: @primary-5;
     }
   }
 

components/input/style/mixin.less

@@ -18,21 +18,21 @@
 // input status
 // == when focus or actived
 .active(@color: @outline-color) {
-  border-color: tint(@color, 20%);
+  border-color: ~`colorPalette("@{color}", 5)`;
   outline: 0;
   box-shadow: 0 0 @outline-blur-size @outline-width fade(@color, 20%);
 }
 
 // == when hoverd
 .hover(@color: @input-hover-border-color) {
-  border-color: tint(@color, 20%);
+  border-color: ~`colorPalette("@{color}", 5)`;
 }
 
 .disabled() {
   background-color: @input-disabled-bg;
   opacity: 1;
   cursor: not-allowed;
-  color: #ccc;
+  color: @disabled-color;
   &:hover {
     .hover(@input-border-color);
   }

components/mention/style/index.less

@@ -54,7 +54,7 @@
   overflow-y: auto;
   font-size: @font-size-base;
   &-notfound.@{ant-prefix}-mention-dropdown-item {
-    color: #ccc;
+    color: @disabled-color;
 
     .@{iconfont-css-prefix}-loading {
       color: @primary-color;
@@ -78,15 +78,15 @@
     &:hover,
     &.focus,
     &-active {
-      background-color: tint(@primary-color, 90%);
+      background-color: @primary-1;
     }
 
     &-disabled {
-      color: #ccc;
+      color: @disabled-color;
       cursor: not-allowed;
 
       &:hover {
-        color: #ccc;
+        color: @disabled-color;
         background-color: @component-background;
         cursor: not-allowed;
       }

components/menu/style/index.less

@@ -97,7 +97,7 @@
   }
 
   &:not(&-horizontal) &-item-selected {
-    background-color: tint(@primary-color, 90%);
+    background-color: @primary-1;
   }
 
   &-horizontal,

components/pagination/style/index.less

@@ -70,7 +70,7 @@
       content: "•••";
       display: block;
       letter-spacing: 2px;
-      color: #ccc;
+      color: @disabled-color;
       text-align: center;
     }
 
@@ -175,13 +175,13 @@
     &:hover {
       border-color: @border-color-base;
       a {
-        color: #ccc;
+        color: @disabled-color;
         cursor: not-allowed;
       }
     }
     cursor: not-allowed;
     a {
-      color: #ccc;
+      color: @disabled-color;
     }
   }
 

components/radio/style/index.less

@@ -103,7 +103,7 @@
   }
 
   & + span {
-    color: #ccc;
+    color: @disabled-color;
     cursor: not-allowed;
   }
 }
@@ -193,15 +193,15 @@ span.@{radio-prefix-cls} + * {
     }
 
     &:hover {
-      border-color: tint(@primary-color, 20%);
+      border-color: @primary-5;
-      box-shadow: -1px 0 0 0 tint(@primary-color, 20%);
+      box-shadow: -1px 0 0 0@primary-5;
-      color: tint(@primary-color, 20%);
+      color: @primary-5;
     }
 
     &:active {
-      border-color: shade(@primary-color, 5%);
+      border-color: @primary-7;
-      box-shadow: -1px 0 0 0 shade(@primary-color, 5%);
+      box-shadow: -1px 0 0 0@primary-7;
-      color: shade(@primary-color, 5%);
+      color: @primary-7;
     }
   }
 
@@ -209,13 +209,13 @@ span.@{radio-prefix-cls} + * {
     border-color: @border-color-base;
     background-color: @background-color-base;
     cursor: not-allowed;
-    color: #ccc;
+    color: @disabled-color;
 
     &:first-child,
     &:hover {
       border-color: @border-color-base;
       background-color: @background-color-base;
-      color: #ccc;
+      color: @disabled-color;
     }
     &:first-child {
       border-left-color: @border-color-base;

components/select/style/index.less

@@ -18,7 +18,7 @@
   background: @component-background;
   top: 50%;
   font-size: @font-size-base;
-  color: #ccc;
+  color: @disabled-color;
   width: 12px;
   height: 12px;
   margin-top: -6px;
@@ -107,7 +107,7 @@
   }
 
   &-disabled {
-    color: #ccc;
+    color: @disabled-color;
   }
 
   &-disabled &-selection {
@@ -198,10 +198,10 @@
   }
 
   &-disabled &-selection__choice__remove {
-    color: #ccc;
+    color: @disabled-color;
     cursor: default;
     &:hover {
-      color: #ccc;
+      color: @disabled-color;
     }
   }
 
@@ -450,15 +450,15 @@
 
       &:hover,
       &-active {
-        background-color: tint(@primary-color, 90%);
+        background-color: @primary-1;
       }
 
       &-disabled {
-        color: #ccc;
+        color: @disabled-color;
         cursor: not-allowed;
 
         &:hover {
-          color: #ccc;
+          color: @disabled-color;
           background-color: @component-background;
           cursor: not-allowed;
         }

components/slider/demo/icon-slider.md

@@ -64,7 +64,7 @@ ReactDOM.render(<IconSlider min={0} max={20} value={0} icon={['frown-o', 'smile-
   height: 16px;
   line-height: 1;
   font-size: 16px;
-  color: #ccc;
+  color: @disabled-color;
 }
 
 .icon-wrapper .anticon:first-child {

components/slider/style/index.less

@@ -3,7 +3,7 @@
 
 @slider-prefix-cls: ~"@{ant-prefix}-slider";
 // slider color
-@slider-disabled-color: #ccc;
+@slider-disabled-color: @disabled-color;
 // tooltip
 @slider-tooltip-color: #fff;
 @slider-tooltip-bg: tint(@text-color, 4%);
@@ -39,7 +39,7 @@
   &:hover {
     background-color: #e1e1e1;
     .@{slider-prefix-cls}-handle {
-      border-color: tint(@primary-color, 20%);
+      border-color: @primary-5;
     }
   }
 
@@ -61,7 +61,7 @@
     transition: border-color 0.3s ease, transform .3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
 
     &:hover {
-      border-color: tint(@primary-color, 20%);
+      border-color: @primary-5;
       transform: scale(1.2);
       transform-origin: center center;
     }

components/steps/style/index.less

@@ -6,7 +6,7 @@
 @process-title-color: @text-color;
 @process-description-color: @process-title-color;
 @process-tail-color: @border-color-split;
-@wait-icon-color: #ccc;
+@wait-icon-color: @disabled-color;
 @wait-title-color: @text-color-secondary;
 @wait-description-color: @wait-title-color;
 @wait-tail-color: @process-tail-color;

components/style/color/bezierEasing.less

@@ -0,0 +1,101 @@
+@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);
+})()`;

components/style/color/colorPalette.less

@@ -0,0 +1,40 @@
+@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
+@functions: ~`(function() {
+  var warmDark = 0.5;     // warm color darken radio
+  var warmRotate = -26;  // warm color rotate degree
+  var coldDark = 0.55;     // cold color darken radio
+  var coldRotate = 10;   // cold color rotate degree
+  var getShadeColor = function(c) {
+    var shadeColor = tinycolor(c);
+    // warm and cold color will darken in different radio, and rotate in different degree
+    // warmer color
+    if (shadeColor.toRgb().r > shadeColor.toRgb().b) {
+      return shadeColor.darken(shadeColor.toHsl().l * warmDark * 100).spin(warmRotate).toHexString();
+    }
+    // colder color
+    return shadeColor.darken(shadeColor.toHsl().l * coldDark * 100).spin(coldRotate).toHexString();
+  }
+  var primaryEasing = colorEasing(0.6);
+  this.colorPalette = function(color, index) {
+    var currentEasing = colorEasing(index * 0.1);
+    // return light colors after tint
+    if (index <= 6) {
+      return tinycolor.mix(
+        '#ffffff',
+        color,
+        currentEasing * 100 / primaryEasing
+      ).toHexString();
+    }
+    return tinycolor.mix(
+      getShadeColor(color),
+      color,
+      (1 - (currentEasing - primaryEasing) / (1 - primaryEasing)) * 100
+    ).toHexString();
+  };
+})()`;

components/style/color/colors.less

@@ -0,0 +1,90 @@
+@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: #108ee9;
+@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: #7265E6;
+@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: #00A2AE;
+@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: #00A854;
+@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)`);
+
+@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: #f5317f;
+@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: #F04134;
+@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: #F56A00;
+@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: #ffbf00;
+@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)`);

components/style/core/base.less

@@ -76,7 +76,7 @@ a {
   }
 
   &[disabled] {
-    color: #ccc;
+    color: @disabled-color;
     cursor: not-allowed;
     pointer-events: none;
   }

components/style/themes/default.less

@@ -1,22 +1,36 @@
+@import "../color/colors";
+
 // Prefix
 @ant-prefix             : ant;
 
 // Color
-@primary-color          : #108ee9;
+@primary-color          : @blue-6;
-@success-color          : #87d068;
+@success-color          : @green-6;
-@error-color            : #f50;
+@error-color            : @red-6;
-@highlight-color        : #f50;
+@highlight-color        : @red-6;
-@warning-color          : #fa0;
+@warning-color          : @yellow-6;
 @normal-color           : #d9d9d9;
 
+@primary-1: color(~`colorPalette("@{primary-color}", 1)`);  // replace tint(@primary-color, 90%)
+@primary-2: color(~`colorPalette("@{primary-color}", 2)`);  // replace tint(@primary-color, 80%)
+@primary-3: color(~`colorPalette("@{primary-color}", 3)`);
+@primary-4: color(~`colorPalette("@{primary-color}", 4)`);
+@primary-5: color(~`colorPalette("@{primary-color}", 5)`);  // replace tint(@primary-color, 20%)
+@primary-6: @primary-color;                                 // don't use, use @primary-color
+@primary-7: color(~`colorPalette("@{primary-color}", 7)`);  // replace shade(@primary-color, 5%)
+@primary-8: color(~`colorPalette("@{primary-color}", 8)`);
+@primary-9: color(~`colorPalette("@{primary-color}", 9)`);
+@primary-10: color(~`colorPalette("@{primary-color}", 10)`);
+
 // ------ Base & Require ------
 @body-background        : #fff;
 @component-background   : #fff;
 @font-family            : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
 @code-family            : Consolas, Menlo, Courier, monospace;
-@text-color             : #666;
+@text-color             : fade(#000, 65%);
-@heading-color          : #404040;
+@heading-color          : fade(#000, 75%);
-@text-color-secondary   : #999;
+@text-color-secondary   : fade(#000, 43%);
+@disabled-color         : fade(#000, 25%);
 @font-size-base         : 12px;
 @font-size-lg           : @font-size-base + 2px;
 @line-height-base       : 1.5;
@@ -28,9 +42,9 @@
 @icon-url               : "https://at.alicdn.com/t/font_r5u29ls31bgldi";
 
 // LINK
-@link-color             : #108ee9;
+@link-color             : @primary-color;
-@link-hover-color       : tint(@link-color, 20%);
+@link-hover-color       : @primary-5;
-@link-active-color      : shade(@link-color, 5%);
+@link-active-color      : @primary-7;
 @link-hover-decoration  : none;
 
 // Animation
@@ -75,7 +89,7 @@
 
 @btn-primary-color      : #fff;
 @btn-primary-bg         : @primary-color;
-@btn-group-border       : shade(@primary-color, 5%);
+@btn-group-border       : @primary-7;
 
 @btn-default-color      : @text-color;
 @btn-default-bg         : @background-color-base;
@@ -85,7 +99,7 @@
 @btn-ghost-bg           : transparent;
 @btn-ghost-border       : @border-color-base;
 
-@btn-disable-color      : #ccc;
+@btn-disable-color      : @disabled-color;
 @btn-disable-bg         : @background-color-base;
 @btn-disable-border     : @border-color-base;
 

components/switch/style/index.less

@@ -14,7 +14,7 @@
   vertical-align: middle;
   border-radius: 20px;
   border: 1px solid #ccc;
-  background-color: #ccc;
+  background-color: @disabled-color;
   cursor: pointer;
   transition: all @switch-duration;
   user-select: none;
@@ -122,7 +122,7 @@
     }
 
     .@{switch-prefix-cls}-inner {
-      color: #ccc;
+      color: @disabled-color;
     }
   }
 }

components/table/style/index.less

@@ -60,7 +60,7 @@
     transition: all .3s ease;
     &.@{table-prefix-cls}-row-hover,
     &:hover {
-      background: tint(@primary-color, 90%);
+      background: @primary-1;
     }
   }
 
@@ -369,7 +369,7 @@
         .@{ant-prefix}-dropdown-menu-submenu-title:after {
           color: @primary-color;
           font-weight: bold;
-          text-shadow: 0 0 2px tint(@primary-color, 80%);
+          text-shadow: 0 0 2px@primary-2;
         }
       }
     }

components/tabs/style/index.less

@@ -92,7 +92,7 @@
     cursor: not-allowed;
     &,
     &:hover {
-      color: #ccc;
+      color: @disabled-color;
     }
   }
 
@@ -146,7 +146,7 @@
     .@{tab-prefix-cls}-tab-disabled {
       pointer-events: none;
       cursor: default;
-      color: #ccc;
+      color: @disabled-color;
     }
 
     .@{tab-prefix-cls}-tab {
@@ -162,11 +162,11 @@
       text-decoration: none;
 
       &:hover {
-        color: tint(@primary-color, 20%);
+        color: @primary-5;
       }
 
       &:active {
-        color: shade(@primary-color, 5%);
+        color: @primary-7;
       }
       .@{iconfont-css-prefix} {
         width: 14px;

components/tag/style/index.less

@@ -88,11 +88,11 @@
       color: #fff;
     }
     &:hover {
-      background-color: tint(@primary-color, 20%);
+      background-color: @primary-5;
     }
     &:active,
     &-checked {
-      background-color: shade(@primary-color, 5%);
+      background-color: @primary-7;
     }
   }
 

components/time-picker/style/index.less

@@ -61,7 +61,7 @@
 
   &-clear-btn:after {
     font-size: @font-size-base;
-    color: #ccc;
+    color: @disabled-color;
     display: inline-block;
     line-height: 1;
     width: 20px;
@@ -127,7 +127,7 @@
     }
 
     li:hover {
-      background: tint(@primary-color, 90%);
+      background: @primary-1;
     }
 
     li&-option-selected {

components/transfer/style/index.less

@@ -25,7 +25,7 @@
 
     &-search {
       &-action {
-        color: #ccc;
+        color: @disabled-color;
         position: absolute;
         top: 4px;
         right: 4px;
@@ -37,7 +37,7 @@
         .@{iconfont-css-prefix} {
           transition: all .3s;
           font-size: @font-size-base;
-          color: #ccc;
+          color: @disabled-color;
           &:hover {
             color: @text-color-secondary;
           }
@@ -98,7 +98,7 @@
 
       &-item:not(&-item-disabled):hover {
         cursor: pointer;
-        background-color: tint(@primary-color, 90%);
+        background-color: @primary-1;
       }
 
       &-item-disabled {
@@ -114,7 +114,7 @@
 
     &-body-not-found {
       padding-top: 0;
-      color: #ccc;
+      color: @disabled-color;
       text-align: center;
       display: none;
       position: absolute;
@@ -159,7 +159,7 @@
 
 @keyframes transferHighlightIn {
   0% {
-    background: tint(@primary-color, 80%);
+    background: @primary-2;
   }
   100% {
     background: transparent;

components/tree-select/style/index.less

@@ -38,10 +38,10 @@
       color: @text-color;
       transition: all 0.3s ease;
       &:hover {
-        background-color: tint(@primary-color, 90%);
+        background-color: @primary-1;
       }
       &.@{select-tree-prefix-cls}-node-selected {
-        background-color: tint(@primary-color, 80%);
+        background-color: @primary-2;
       }
     }
     span {
@@ -102,7 +102,7 @@
     > span,
     > a,
     > a span {
-      color: #ccc;
+      color: @disabled-color;
       cursor: not-allowed;
     }
   }
@@ -137,7 +137,7 @@
   }
   .@{select-prefix-cls}-not-found {
     cursor: not-allowed;
-    color: #ccc;
+    color: @disabled-color;
     padding: 7px 16px;
     display: block;
   }

components/tree/style/index.less

@@ -61,10 +61,10 @@
       color: @text-color;
       transition: all 0.3s ease;
       &:hover {
-        background-color: tint(@primary-color, 90%);
+        background-color: @primary-1;
       }
       &.@{tree-prefix-cls}-node-selected {
-        background-color: tint(@primary-color, 80%);
+        background-color: @primary-2;
       }
     }
     span {
@@ -132,7 +132,7 @@
     >span,
     >a,
     >a span {
-      color: #ccc;
+      color: @disabled-color;
       cursor: not-allowed;
     }
   }

components/upload/style/index.less

@@ -60,7 +60,7 @@
     position: relative;
 
     &.@{upload-prefix-cls}-drag-hover:not(.@{upload-prefix-cls}-disabled) {
-      border: 2px dashed tint(@primary-color, 20%);
+      border: 2px dashed@primary-5;
     }
 
     &.@{upload-prefix-cls}-disabled {
@@ -78,14 +78,14 @@
     }
 
     &:not(.@{upload-prefix-cls}-disabled):hover {
-      border-color: tint(@primary-color, 20%);
+      border-color: @primary-5;
     }
 
     p.@{upload-prefix-cls}-drag-icon {
       .@{iconfont-css-prefix} {
         font-size: 80px;
         margin-top: -5px;
-        color: tint(@primary-color, 20%);
+        color: @primary-5;
       }
       height: 60px;
       margin-bottom: 24px;
@@ -100,7 +100,7 @@
     .@{iconfont-css-prefix}-plus {
       font-size: 30px;
       transition: all 0.3s ease;
-      color: #ccc;
+      color: @disabled-color;
       &:hover {
         color: @text-color-secondary;
       }
@@ -144,7 +144,7 @@
     }
 
     &:hover &-info {
-      background-color: tint(@primary-color, 90%);
+      background-color: @primary-1;
     }
 
     &:hover .@{iconfont-css-prefix}-cross {

docs/spec/colors.md

@@ -14,124 +14,81 @@ title:
 
 ## Ant Design Colors
 
-Ant Design 的色板由 9 种基本色彩组成，每种基本色又衍生出九宫格色板，在此基础上还可以通过黑白叠加的方式实现色彩明暗的效果。
+Ant Design 的色板由 8 种基本色彩组成，通过一套[精心设计的色彩算法](https://github.com/ant-design/ant-design/blob/734beb84ffc3f0469fbae1566aa8450f966cb261/components/style/color/colorPalette.less)，每种基本色又自动衍生出 10 种渐变色，其中第 6 种为基本色。
+
+> 我们结合了色彩加白、加黑、加深，贝塞尔曲线，以及针对冷暖色的不同旋转角度，调教出一套色彩算法。使用者只需指定主色，便可导出一条完整的渐变色板。
 
 `````__react
 const Palette = React.createClass({
   render() {
-    const color = this.props.color;
+    const { name, description, color } = this.props.color;
-    return <div className="color-palette">
+    const colors = [];
-      <div className="main-color">
+    for (let i = 1; i <= 10; i++) {
-        {color.colors.map(function(color) {
+      colors.push(
-          return (<div key={color} style={{backgroundColor:color}}></div>);
+        <div
-        })}
+          key={i}
+          className={`main-color-item palatte-${name}-${i}`}
+          style={{
+            color: i > 5 ? '#fff' : 'unset',
+            fontWeight: i === 6 ? 'bold' : 'normal',
+          }}
+        >
+          {name}-{i}
+        </div>
+      );
+    }
+    return (
+      <div className="color-palette">
+        <div className="color-title">
+          {name}
+          <span className="color-description">{description}</span>
+        </div>
+        <div className="main-color">{colors}</div>
       </div>
-      <div className={"color-msg"}>
+    );
-        <p className={"color-msg-title"}>{color.title}</p>
-        <p className={"color-msg-description"}>{color.description}</p>
-      </div>
-    </div>;
   }
 });
 const ExtendPalettes = React.createClass({
   render() {
     const colors = [
       {
-        'title': 'Primary Color',
+        name: 'red',
-        'description': '尽管同一种颜色传达的含义会因人而异，受到文化和地域的影响。但颜色还是可以提取出一些共通的特性，例如暖色系的红、橙、黄通常用于象征活力，激情，积极；而冷色系的绿、蓝、紫通常给人感觉是安全、稳定、专业。',
+        description: '热情、警示',
-        'colors': [
-          "#E01515", "#FF6600", "#FAC450",
-          "#E4249B", "#CCCCCC", "#5FBC29",
-          "#582DAA", "#0097DA", "#01B3CA"
-        ]
       },
       {
-        'title': 'Grey #CCCCCC',
+        name: 'green',
-        'description': '灰色是中性化的颜色，通常传递出来的感觉是沉稳，在配色心理学中描述 “专业化、系统化”的词条中灰色的使用占了较高的比例。建议可用于字体颜色的选择以及界面中大面积背景的底色搭配。',
+        description: '成功、通过、安全',
-        'colors': [
-          "#FFFFFF", "#FCFCFC", "#ECECEC",
-          "#989898", "#CCCCCC", "#D9D9D9",
-          "#666666", "#323232", "#000000"
-        ]
       },
       {
-        'title': 'Red #E01515',
+        name: 'blue',
-        'description': '红色是具有强烈情感因素的颜色，通常红色传递的心理暗示有激情、欲望、战争以及危险。考虑到红色的特性，在后台系统的设计中建议作为辅助色来突出元素特性或是强化信息，常见的有图表元素，状态，危险信号，错误提示等。',
+        description: '专业、科技',
-        'colors': [
-          "#F9CCD6", "#FFA5B4", "#FA727D",
-          "#BB0606", "#E01515", "#FF3858",
-          "#881414", "#4E1212", "#260404"
-        ]
       },
       {
-        'title': 'Green #60BE29',
+        name: 'pink',
-        'description': '绿色是非常务实的颜色，它吸收了蓝色的沉稳同时具备黄色的活力。绿色蕴含着和平、生命、希望、轻松、富饶的含义。在我们的设计实例中绿色可用来传达任务完成、健康状态以及安全感等状态。',
+        description: '典雅、明快、女性',
-        'colors': [
-          "#E2F582", "#D0EE9C", "#A6E33C",
-          "#39A30E", "#60BE29", "#70D445",
-          "#18791B", "#1F4A12", "#102803"
-        ]
       },
       {
-        'title': 'Blue #00A0E9',
+        name: 'orange',
-        'description': '这里的蓝色沿用的是蚂蚁金服的品牌色，深蓝色的运用可以传递出可靠和稳定的情绪，而浅蓝色系则更为友好和清新，同时还代表了科技感与想象力。在很多专业类、管理类的后台系统设计中蓝色系常常会被选择作为设计的主色来使用。',
+        description: '醒目、温暖',
-        'colors': [
-          "#CCE4F6", "#95CCF5", "#6AC2F5",
-          "#1D80D3", "#00A0E9", "#2DB7F5",
-          "#1F5AA3", "#0B366A", "#08172F"
-        ]
       },
       {
-        'title': 'Magenta #E9259E',
+        name: 'purple',
-        'description': '玫红色是较为正面的色彩，含有鼓励、友好、活力的意义。但考虑到洋红色的特性，建议作为辅助色来使用。',
+        description: '高雅、浪漫',
-        'colors': [
-          "#F8C5ED", "#F5A6D3", "#F387C0",
-          "#BC0F69", "#E9259E", "#F056AD",
-          "#890B4C", "#5E0B36", "#230213"
-        ]
       },
       {
-        'title': 'Orange #FF6100',
+        name: 'yellow',
-        'description': '介于红色和黄色之间，传达愉悦，创造力，热情，吸引力。但橙色又不如红色那样具侵略性，同时又能够很好的引起视觉的注意力。可以作为设计的主色也可以用于辅助色。但大面积使用时需要慎重。',
+        description: '活力、提示',
-        'colors': [
-          "#F1DDBD", "#FBCA72", "#FDAC23",
-          "#CE630F", "#FF6100", "#FF8A0C",
-          "#8B4A04", "#523A13", "#341F0B"
-        ]
       },
       {
-        'title': 'Purple #5E30B5',
+        name: 'cyan',
-        'description': '紫色是赤黄黄绿青蓝紫中最后一名，也是人类可见光谱中波长最短的光，有华贵、信仰、神秘等含义，同时是红与蓝的结合体，传达中性、中立等信息。在界面设计中建议作为辅助颜色使用。',
+        description: '清新、冷静、结构化',
-        'colors': [
-          "#E8DFFA", "#B196EE", "#8867D2",
-          "#581CB6", "#5E30B5", "#7A43E2",
-          "#3F187D", "#2B1845", "#0F061B"
-        ]
-      },
-      {
-        'title': 'Yellow #FAC450',
-        'description': '黄色传达了愉悦，活力，创造力等正面的情绪，是具正能量的色彩。在具体设计中黄色常常于表达警示性的信息。建议作为辅助色来使用。',
-        'colors': [
-          "#FAF4B2", "#FDF161", "#FDE023",
-          "#D9B416", "#FAC450", "#F7CD07",
-          "#B48513", "#6B4C01", "#241A06"
-        ]
-      },
-      {
-        'title': 'Cyan #01BAD2',
-        'description': '介于蓝色和绿色之间，带有专业、冷静、从容的心理暗示。在体验专业化和结构化的设计中常常被用到，可以作为系统主色来使用。',
-        'colors': [
-          "#E0F7FA", "#B2EBF2", "#80DEEA",
-          "#00ACC2", "#01BAD2", "#26C6DA",
-          "#00708F", "#014B62", "#031213"
-        ]
       }
     ];
-    return <div>
+    return (
-      {colors.map((color, i) => {
+      <div>
-        return <Palette key={i} color={color} />;
+        {colors.map((color, i) => <Palette key={color.name} color={color} />)}
-      })}
+      </div>
-    </div>;
+    );
   }
 });
 ReactDOM.render(<ExtendPalettes key="palettes" />, mountNode);

site/theme/static/colors.less

@@ -1,40 +1,59 @@
 .color-palette {
   margin: 45px 0;
-  overflow: hidden;
-  height: 165px;
 }
 
 .main-color {
-  width: 165px;
+  overflow: hidden;
-  height: 165px;
-  float: left;
 }
 
-.main-color div {
+.main-color .main-color-item {
-  width: 50px;
+  width: 80px;
-  height: 50px;
+  height: 60px;
   border-radius: 4px;
   float: left;
   margin: 0 5px 5px 0;
+  transition: all .2s;
+  position: relative;
+  text-align: center;
+  padding-top: 20px;
+  font-family: Consolas;
+  font-size: 12px;
+  &:after {
+    font-size: 12px;
+    position: absolute;
+    bottom: -4px;
+    transform: scale(0.85);
+    left: 0;
+    width: 100%;
+    text-align: center;
+    opacity: 0;
+    transition: all .2s ease .1s;
+  }
 }
 
-.color-palette .color-msg {
+.color-title {
-  margin-left: 180px;
+  margin: 0 0 16px 0;
-}
+  font-weight: 500;
-
-.color-msg .color-msg-title {
-  margin: 0;
-  font-weight: 600;
   color: #5C6B77;
-  line-height: 1.8;
+  font-size: 22px;
-  font-size: 21px;
+  text-transform: capitalize;
 }
 
-.color-msg .color-msg-description {
+.color-description {
-  color: #777;
+  font-size: 16px;
-  font-size: 14px;
+  margin-left: 12px;
-  line-height: 1.8;
+  font-weight: normal;
-  margin-top: 16px;
+  color: #888;
+}
+
+.main-color:hover {
+  .main-color-item {
+    padding-top: 4px;
+    &:after {
+      opacity: 0.7;
+      bottom: 3px;
+    }
+  }
 }
 
 .color-block {
@@ -68,3 +87,23 @@
 .color-block.dark:after {
   color: #fff;
 }
+
+.make-palatte(@color, @index: 1) when (@index <= 10) {
+  .palatte-@{color}-@{index} {
+    @background: "@{color}-@{index}";
+    background: @@background;
+    &:after {
+      content: "@{@{background}}";
+    }
+  }
+  .make-palatte(@color, (@index + 1));    // next iteration
+}
+
+.make-palatte(blue);
+.make-palatte(purple);
+.make-palatte(cyan);
+.make-palatte(green);
+.make-palatte(pink);
+.make-palatte(red);
+.make-palatte(orange);
+.make-palatte(yellow);

site/theme/static/common.less

@@ -12,7 +12,7 @@ body {
 body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
   line-height: 1.5;
-  color: #666;
+  color: @text-color;
   font-size: 14px;
   background: #FFF;
   transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1);
@@ -86,4 +86,4 @@ div.main-container {
 
 .page-wrapper {
   background: #ECECEC;
-}
+}

site/theme/static/demo.less

@@ -48,7 +48,7 @@
 .code-box {
   .code-box-title a,
   .code-box-title a:hover {
-    color: #666;
+    color: @text-color;
     font-size: 14px;
     font-weight: 500;
   }

site/theme/static/footer.less

@@ -5,7 +5,7 @@ footer {
   background: #fff;
   position: relative;
   z-index: 1;
-  color: #666;
+  color: @text-color;
   box-shadow: 0 1000px 0 1000px #fff;
 }
 

site/theme/static/header.less

@@ -16,7 +16,7 @@
       border-left-color: #EBEDEE;
     }
     a {
-      color: #666;
+      color: @text-color;
     }
   }
 }

site/theme/static/highlight.less

@@ -7,7 +7,7 @@
 pre code {
  display: block;
  background: white;
- color: #666;
+ color: @text-color;
  line-height: 1.7;
  border: 1px solid #e9e9e9;
  padding: 10px 15px;

site/theme/static/home.less

@@ -135,7 +135,7 @@
   .text-wrapper h2,
   .text-wrapper-bottom h2 {
     font-size: 32px;
-    color: #666;
+    color: @text-color;
     font-weight: normal;
     white-space: nowrap;
   }

site/theme/static/markdown.less

@@ -1,5 +1,5 @@
 .markdown {
-  color: #666;
+  color: @text-color;
   font-size: 14px;
   line-height: 1.8;
 }
@@ -14,7 +14,7 @@
 }
 
 .markdown h1 {
-  color: #404040;
+  color: @heading-color;
   font-weight: 500;
   line-height: 40px;
   margin-bottom: 24px;
@@ -33,7 +33,7 @@
 .markdown h4,
 .markdown h5,
 .markdown h6 {
-  color: #404040;
+  color: @heading-color;
   font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
   margin: 1.6em 0 0.6em 0;
   font-weight: 500;
@@ -109,7 +109,7 @@
   margin: 0;
   padding: 0;
   font-size: 13px;
-  color: #666;
+  color: @text-color;
   overflow: auto;
 }
 

site/theme/static/not-found.less

@@ -29,7 +29,7 @@
   }
 
   p {
-    color: #666;
+    color: @text-color;
     font-size: 18px;
   }
 }

site/theme/static/preview-img.less

@@ -73,7 +73,7 @@
 .preview-image-title {
   font-size: 12px;
   margin-top: 5px;
-  color: #666;
+  color: @text-color;
 }
 
 .preview-image-description {

site/theme/static/resource.less

@@ -55,7 +55,7 @@
 .resource-card-title {
   display: block;
   font-size: 16px;
-  color: #666;
+  color: @text-color;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

site/theme/static/responsive.less

@@ -101,8 +101,8 @@
   button.lang {
     display: block;
     margin: 29px auto 16px;
-    color: #666;
+    color: @text-color;
-    border-color: #666;
+    border-color: @text-color;
   }
 
   .popover-menu {

site/theme/static/toc.less

@@ -29,7 +29,7 @@
   transition: all 0.3s ease;
   white-space: nowrap;
   overflow: hidden;
-  color: #666;
+  color: @text-color;
 }
 
 .toc a:hover {

site/theme/template/Home/index.jsx

@@ -43,11 +43,11 @@ function getStyle() {
       border-left-color: #EBEDEE;
     }
     .home-nav-white #nav a {
-      color: #666;
+      color: @text-color;
     }
     .home-nav-white .lang:not(:hover) {
-      color: #666;
+      color: @text-color;
-      border-color: #666;
+      border-color: @text-color;
     }
     .nav-phone-icon:before {
       background: #eee;