GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

New colors (#7661) 

* New colors

* use yellow color for rate

* change font colors

* use non-transparent color
pull/7654/head
偏右 7 years ago
committed by GitHub
parent
759b0bb821
commit
8b3ef51c4f
3 changed files with 76 additions and 48 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 84
      components/style/color/colorPalette.less
  2. 16
      components/style/color/colors.less
  3. 24
      components/style/themes/default.less

84
components/style/color/colorPalette.less
View File

@ -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 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();
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;
}
// 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();
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;
}
return tinycolor.mix(
getShadeColor(color),
color,
(1 - (currentEasing - primaryEasing) / (1 - primaryEasing)) * 100
).toHexString();
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();
};
})()`;
}

16
components/style/color/colors.less
View File

@ -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)`);

24
components/style/themes/default.less
View File

@ -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%);
@heading-color-dark : fade(#fff, 97%);
@text-color-dark : fade(#fff, 91%);
@text-color-secondary-dark: fade(#fff, 67%);
@text-color-secondary : fade(#000, 45%);
@heading-color-dark : fade(#fff, 100%);
@text-color-dark : fade(#fff,85%);
@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-split : #e9e9e9; // split border inside a component
@border-color-base : hsv(0, 0, 85%); // base border outline 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-header-background : #404040;
@layout-body-background : hsv(0, 0, 96%);
@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-collapsed-width: 64px;
@menu-dark-submenu-bg: #000b14;
@menu-collapsed-width: 80px;
// Spin
// ---
@ -326,7 +326,7 @@
// Rate
// ---
@rate-star-color: #f5a623;
@rate-star-color: @yellow-6;
@rate-star-bg: #e9e9e9;
// Card

Write Preview
Loading…
Cancel
Save