New colors (#7661)

* New colors

* use yellow color for rate

* change font colors

* use non-transparent color

components/style/color/colorPalette.less

@@ -7,36 +7,64 @@
 // We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin
 .colorPaletteMixin() {
 @functions: ~`(function() {
-  var warmDark = 0.5;     // warm color darken radio
+  var hueStep = 2;
-  var warmRotate = -26;  // warm color rotate degree
+  var saturationStep = 16;
-  var coldDark = 0.55;     // cold color darken radio
+  var saturationStep2 = 5;
-  var coldRotate = 10;   // cold color rotate degree
+  var brightnessStep1 = 5;
-  var getShadeColor = function(c) {
+  var brightnessStep2 = 15;
-    var shadeColor = tinycolor(c);
+  var lightColorCount = 5;
-    // warm and cold color will darken in different radio, and rotate in different degree
+  var darkColorCount = 4;
-    // warmer color
+
-    if (shadeColor.toRgb().r > shadeColor.toRgb().b) {
+  var getHue = function(hsv, i, isLight) {
-      return shadeColor.darken(shadeColor.toHsl().l * warmDark * 100).spin(warmRotate).toHexString();
+    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;
     }
-    // colder color
+    if (hue < 0) {
-    return shadeColor.darken(shadeColor.toHsl().l * coldDark * 100).spin(coldRotate).toHexString();
+      hue += 360;
-  }
+    } else if (hue >= 360) {
-  var primaryEasing = colorEasing(0.6);
+      hue -= 360;
-  this.colorPalette = function(color, index) {
+    }
-    var currentEasing = colorEasing(index * 0.1);
+    return Math.round(hue);
-    // return light colors after tint
+  };
-    if (index <= 6) {
+  var getSaturation = function(hsv, i, isLight) {
-      return tinycolor.mix(
+    var saturation;
-        '#ffffff',
+    if (isLight) {
-        color,
+      saturation = Math.round(hsv.s * 100) - saturationStep * i;
-        currentEasing * 100 / primaryEasing
+    } else if (i == darkColorCount) {
-      ).toHexString();
+      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;
     }
-    return tinycolor.mix(
+    if (saturation < 6) {
-      getShadeColor(color),
+      saturation = 6;
-      color,
+    }
-      (1 - (currentEasing - primaryEasing) / (1 - primaryEasing)) * 100
+    return Math.round(saturation);
-    ).toHexString();
+  };
+  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();
   };
 })()`;
 }

components/style/color/colors.less

@@ -6,7 +6,7 @@
 @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-6: #1890ff;
 @blue-7: color(~`colorPalette("@{blue-6}", 7)`);
 @blue-8: color(~`colorPalette("@{blue-6}", 8)`);
 @blue-9: color(~`colorPalette("@{blue-6}", 9)`);
@@ -17,7 +17,7 @@
 @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-6: #722ed1;
 @purple-7: color(~`colorPalette("@{purple-6}", 7)`);
 @purple-8: color(~`colorPalette("@{purple-6}", 8)`);
 @purple-9: color(~`colorPalette("@{purple-6}", 9)`);
@@ -28,7 +28,7 @@
 @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-6: #13c2c2;
 @cyan-7: color(~`colorPalette("@{cyan-6}", 7)`);
 @cyan-8: color(~`colorPalette("@{cyan-6}", 8)`);
 @cyan-9: color(~`colorPalette("@{cyan-6}", 9)`);
@@ -39,7 +39,7 @@
 @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-6: #52c41a;
 @green-7: color(~`colorPalette("@{green-6}", 7)`);
 @green-8: color(~`colorPalette("@{green-6}", 8)`);
 @green-9: color(~`colorPalette("@{green-6}", 9)`);
@@ -50,7 +50,7 @@
 @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-6: #eb2f96;
 @pink-7: color(~`colorPalette("@{pink-6}", 7)`);
 @pink-8: color(~`colorPalette("@{pink-6}", 8)`);
 @pink-9: color(~`colorPalette("@{pink-6}", 9)`);
@@ -61,7 +61,7 @@
 @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-6: #f5222d;
 @red-7: color(~`colorPalette("@{red-6}", 7)`);
 @red-8: color(~`colorPalette("@{red-6}", 8)`);
 @red-9: color(~`colorPalette("@{red-6}", 9)`);
@@ -72,7 +72,7 @@
 @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-6: #fa541c;
 @orange-7: color(~`colorPalette("@{orange-6}", 7)`);
 @orange-8: color(~`colorPalette("@{orange-6}", 8)`);
 @orange-9: color(~`colorPalette("@{orange-6}", 9)`);
@@ -83,7 +83,7 @@
 @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-6: #faad14;
 @yellow-7: color(~`colorPalette("@{yellow-6}", 7)`);
 @yellow-8: color(~`colorPalette("@{yellow-6}", 8)`);
 @yellow-9: color(~`colorPalette("@{yellow-6}", 9)`);

components/style/themes/default.less

@@ -38,10 +38,10 @@
 @code-family            : Consolas, Menlo, Courier, monospace;
 @heading-color          : fade(#000, 85%);
 @text-color             : fade(#000, 65%);
-@text-color-secondary   : fade(#000, 43%);
+@text-color-secondary   : fade(#000, 45%);
-@heading-color-dark     : fade(#fff, 97%);
+@heading-color-dark     : fade(#fff, 100%);
-@text-color-dark        : fade(#fff, 91%);
+@text-color-dark        : fade(#fff,85%);
-@text-color-secondary-dark: fade(#fff, 67%);
+@text-color-secondary-dark: fade(#fff, 65%);
 @font-size-base         : 14px;
 @font-size-lg           : @font-size-base + 2px;
 @line-height-base       : 1.5;
@@ -78,8 +78,8 @@
 @ease-in-out-quint   : cubic-bezier(0.86, 0, 0.07, 1);
 
 // Border color
-@border-color-base      : #d9d9d9;        // base border outline a component
+@border-color-base      : hsv(0, 0, 85%);  // base border outline a component
-@border-color-split     : #e9e9e9;        // split border inside a component
+@border-color-split     : hsv(0, 0, 91%);  // split border inside a component
 @border-width-base      : 1px;            // width of the border for a component
 @border-style-base      : solid;          // style of a components border
 
@@ -90,7 +90,7 @@
 
 // Default background color for disabled states, Collapse wrappers,
 // and several active and hover states.
-@background-color-base  : #f7f7f7;
+@background-color-base  : hsv(0, 0, 98%);
 @background-color-active: #eee;
 
 // Disabled states
@@ -183,8 +183,8 @@
 @grid-gutter-width      : 0;
 
 // Layout
-@layout-body-background      : #ececec;
+@layout-body-background      : hsv(0, 0, 96%);
-@layout-header-background    : #404040;
+@layout-header-background    : #00182e;
 @layout-header-height        : 64px;
 @layout-header-padding       : 0 50px;
 @layout-footer-padding       : 24px 50px;
@@ -282,8 +282,8 @@
 // Menu
 // ---
 @menu-dark-bg: @layout-header-background;
-@menu-dark-submenu-bg: #333;
+@menu-dark-submenu-bg: #000b14;
-@menu-collapsed-width: 64px;
+@menu-collapsed-width: 80px;
 
 // Spin
 // ---
@@ -326,7 +326,7 @@
 
 // Rate
 // ---
-@rate-star-color: #f5a623;
+@rate-star-color: @yellow-6;
 @rate-star-bg: #e9e9e9;
 
 // Card