perf: update default less

pull/3598/head
tangjinzhou 2021-01-24 13:18:51 +08:00
parent b6c75bc73c
commit b30a316f4b
2 changed files with 51 additions and 28 deletions

View File

@ -9,10 +9,10 @@
.colorPaletteMixin() { .colorPaletteMixin() {
@functions: ~`(function() { @functions: ~`(function() {
var hueStep = 2; var hueStep = 2;
var saturationStep = 16; var saturationStep = 0.16;
var saturationStep2 = 5; var saturationStep2 = 0.05;
var brightnessStep1 = 5; var brightnessStep1 = 0.05;
var brightnessStep2 = 15; var brightnessStep2 = 0.15;
var lightColorCount = 5; var lightColorCount = 5;
var darkColorCount = 4; var darkColorCount = 4;
@ -33,28 +33,34 @@
var getSaturation = function(hsv, i, isLight) { var getSaturation = function(hsv, i, isLight) {
var saturation; var saturation;
if (isLight) { if (isLight) {
saturation = Math.round(hsv.s * 100) - saturationStep * i; saturation = hsv.s - saturationStep * i;
} else if (i === darkColorCount) { } else if (i === darkColorCount) {
saturation = Math.round(hsv.s * 100) + saturationStep; saturation = hsv.s + saturationStep;
} else { } else {
saturation = Math.round(hsv.s * 100) + saturationStep2 * i; saturation = hsv.s + saturationStep2 * i;
} }
if (saturation > 100) { if (saturation > 1) {
saturation = 100; saturation = 1;
} }
if (isLight && i === lightColorCount && saturation > 10) { if (isLight && i === lightColorCount && saturation > 0.1) {
saturation = 10; saturation = 0.1;
} }
if (saturation < 6) { if (saturation < 0.06) {
saturation = 6; saturation = 0.06;
} }
return Math.round(saturation); return Number(saturation.toFixed(2));
}; };
var getValue = function(hsv, i, isLight) { var getValue = function(hsv, i, isLight) {
var value;
if (isLight) { if (isLight) {
return Math.round(hsv.v * 100) + brightnessStep1 * i; value = hsv.v + brightnessStep1 * i;
}else{
value = hsv.v - brightnessStep2 * i
} }
return Math.round(hsv.v * 100) - brightnessStep2 * i; if (value > 1) {
value = 1;
}
return Number(value.toFixed(2))
}; };
this.colorPalette = function(color, index) { this.colorPalette = function(color, index) {

View File

@ -1,6 +1,8 @@
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
@import '../color/colors'; @import '../color/colors';
@theme: default; @theme: default;
// The prefix to use on all css classes from ant. // The prefix to use on all css classes from ant.
@ant-prefix: ant; @ant-prefix: ant;
@ -9,11 +11,11 @@
// -------- Colors ----------- // -------- Colors -----------
@primary-color: @blue-6; @primary-color: @blue-6;
@info-color: @blue-6; @info-color: @primary-color;
@success-color: @green-6; @success-color: @green-6;
@processing-color: @blue-6; @processing-color: @blue-6;
@error-color: @red-6; @error-color: @red-5;
@highlight-color: @red-6; @highlight-color: @red-5;
@warning-color: @gold-6; @warning-color: @gold-6;
@normal-color: #d9d9d9; @normal-color: #d9d9d9;
@white: #fff; @white: #fff;
@ -43,17 +45,17 @@
@component-background: #fff; @component-background: #fff;
// Popover background color // Popover background color
@popover-background: @component-background; @popover-background: @component-background;
@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', @popover-customize-border-color: @border-color-split;
'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', @font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
'Segoe UI Emoji', 'Segoe UI Symbol'; 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
@code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; @code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
@text-color: fade(@black, 85%); @text-color: fade(@black, 85%);
@text-color-secondary: fade(@black, 45%); @text-color-secondary: fade(@black, 45%);
@text-color-inverse: @white; @text-color-inverse: @white;
@icon-color: inherit; @icon-color: inherit;
@icon-color-hover: fade(@black, 75%); @icon-color-hover: fade(@black, 75%);
@heading-color: fade(#000, 85%); @heading-color: fade(@black, 85%);
@heading-color-dark: fade(@white, 100%);
@text-color-dark: fade(@white, 85%); @text-color-dark: fade(@white, 85%);
@text-color-secondary-dark: fade(@white, 65%); @text-color-secondary-dark: fade(@white, 65%);
@text-selection-bg: @primary-color; @text-selection-bg: @primary-color;
@ -62,10 +64,12 @@
@font-size-base: 14px; @font-size-base: 14px;
@font-size-lg: @font-size-base + 2px; @font-size-lg: @font-size-base + 2px;
@font-size-sm: 12px; @font-size-sm: 12px;
@heading-1-size: ceil((@font-size-base * 2.71)); @heading-1-size: ceil(@font-size-base * 2.71);
@heading-2-size: ceil((@font-size-base * 2.14)); @heading-2-size: ceil(@font-size-base * 2.14);
@heading-3-size: ceil((@font-size-base * 1.71)); @heading-3-size: ceil(@font-size-base * 1.71);
@heading-4-size: ceil((@font-size-base * 1.42)); @heading-4-size: ceil(@font-size-base * 1.42);
@heading-5-size: ceil(@font-size-base * 1.14);
// https://github.com/ant-design/ant-design/issues/20210
@line-height-base: 1.5715; @line-height-base: 1.5715;
@border-radius-base: 2px; @border-radius-base: 2px;
@border-radius-sm: @border-radius-base; @border-radius-sm: @border-radius-base;
@ -75,11 +79,24 @@
@padding-md: 16px; // small containers and buttons @padding-md: 16px; // small containers and buttons
@padding-sm: 12px; // Form controls and items @padding-sm: 12px; // Form controls and items
@padding-xs: 8px; // small items @padding-xs: 8px; // small items
@padding-xss: 4px; // more small
// vertical padding for all form controls // vertical padding for all form controls
@control-padding-horizontal: @padding-sm; @control-padding-horizontal: @padding-sm;
@control-padding-horizontal-sm: @padding-xs; @control-padding-horizontal-sm: @padding-xs;
// vertical margins
@margin-lg: 24px; // containers
@margin-md: 16px; // small containers and buttons
@margin-sm: 12px; // Form controls and items
@margin-xs: 8px; // small items
@margin-xss: 4px; // more small
// height rules
@height-base: 32px;
@height-lg: 40px;
@height-sm: 24px;
// The background colors for active and hover states for things like // The background colors for active and hover states for things like
// list items or table cells. // list items or table cells.
@item-active-bg: @primary-1; @item-active-bg: @primary-1;