mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 16:06:28 +08:00
New colors (#7661)
* New colors * use yellow color for rate * change font colors * use non-transparent color
This commit is contained in:
偏右
GitHub
parent
759b0bb821
commit
8b3ef51c4f
@ -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);
|
||||
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 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();
|
||||
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();
|
||||
};
|
||||
})()`;
|
||||
}
|
||||
|
||||
@ -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)`);
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user