mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 09:26:06 +08:00
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
This commit is contained in:
偏右
ddcat1115
parent
fb6858c3cc
commit
d811ebee5c
@ -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/*"
|
||||
]
|
||||
}
|
||||
|
||||
@ -29,32 +29,32 @@
|
||||
}
|
||||
|
||||
&-success {
|
||||
border: 1px solid tint(@success-color, 80%);
|
||||
background-color: tint(@success-color, 90%);
|
||||
border: 1px solid @green-2;
|
||||
background-color: @green-1;
|
||||
.@{alert-prefix-cls}-icon {
|
||||
color: @success-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
border: 1px solid tint(@primary-color, 80%);
|
||||
background-color: tint(@primary-color, 90%);
|
||||
border: 1px solid @primary-2;
|
||||
background-color: @primary-1;
|
||||
.@{alert-prefix-cls}-icon {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-warning {
|
||||
border: 1px solid tint(@warning-color, 80%);
|
||||
background-color: tint(@warning-color, 90%);
|
||||
border: 1px solid @yellow-2;
|
||||
background-color: @yellow-1;
|
||||
.@{alert-prefix-cls}-icon {
|
||||
color: @warning-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-error {
|
||||
border: 1px solid tint(@error-color, 80%);
|
||||
background-color: tint(@error-color, 90%);
|
||||
border: 1px solid @red-2;
|
||||
background-color: @red-1;
|
||||
.@{alert-prefix-cls}-icon {
|
||||
color: @error-color;
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
color: @text-color;
|
||||
transition: color .3s;
|
||||
&:hover {
|
||||
color: tint(@primary-color, 20%);
|
||||
color: @primary-5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
transition: background 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: tint(@primary-color, 90%);
|
||||
background: @primary-1;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@ -61,7 +61,7 @@
|
||||
transition: background 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: tint(@primary-color, 90%);
|
||||
background: @primary-1;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -130,7 +130,7 @@
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
background: tint(@primary-color, 90%);
|
||||
background: @primary-1;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
position: absolute;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
transition: background 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: tint(@primary-color, 90%);
|
||||
background: @primary-1;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
}
|
||||
&:hover &-up-inner,
|
||||
&:hover &-down-inner {
|
||||
color: tint(@primary-color, 20%);
|
||||
color: @primary-5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -97,7 +97,7 @@
|
||||
}
|
||||
|
||||
&:not(&-horizontal) &-item-selected {
|
||||
background-color: tint(@primary-color, 90%);
|
||||
background-color: @primary-1;
|
||||
}
|
||||
|
||||
&-horizontal,
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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%);
|
||||
box-shadow: -1px 0 0 0 tint(@primary-color, 20%);
|
||||
color: tint(@primary-color, 20%);
|
||||
border-color: @primary-5;
|
||||
box-shadow: -1px 0 0 0@primary-5;
|
||||
color: @primary-5;
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: shade(@primary-color, 5%);
|
||||
box-shadow: -1px 0 0 0 shade(@primary-color, 5%);
|
||||
color: shade(@primary-color, 5%);
|
||||
border-color: @primary-7;
|
||||
box-shadow: -1px 0 0 0@primary-7;
|
||||
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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
101
components/style/color/bezierEasing.less
Normal file
101
components/style/color/bezierEasing.less
Normal file
@ -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);
|
||||
})()`;
|
||||
40
components/style/color/colorPalette.less
Normal file
40
components/style/color/colorPalette.less
Normal file
@ -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();
|
||||
};
|
||||
})()`;
|
||||
90
components/style/color/colors.less
Normal file
90
components/style/color/colors.less
Normal file
@ -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)`);
|
||||
1182
components/style/color/tinyColor.less
Normal file
1182
components/style/color/tinyColor.less
Normal file
File diff suppressed because it is too large
Load Diff
@ -76,7 +76,7 @@ a {
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: #ccc;
|
||||
color: @disabled-color;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -1,22 +1,36 @@
|
||||
@import "../color/colors";
|
||||
|
||||
// Prefix
|
||||
@ant-prefix : ant;
|
||||
|
||||
// Color
|
||||
@primary-color : #108ee9;
|
||||
@success-color : #87d068;
|
||||
@error-color : #f50;
|
||||
@highlight-color : #f50;
|
||||
@warning-color : #fa0;
|
||||
@primary-color : @blue-6;
|
||||
@success-color : @green-6;
|
||||
@error-color : @red-6;
|
||||
@highlight-color : @red-6;
|
||||
@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;
|
||||
@heading-color : #404040;
|
||||
@text-color-secondary : #999;
|
||||
@text-color : fade(#000, 65%);
|
||||
@heading-color : fade(#000, 75%);
|
||||
@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-hover-color : tint(@link-color, 20%);
|
||||
@link-active-color : shade(@link-color, 5%);
|
||||
@link-color : @primary-color;
|
||||
@link-hover-color : @primary-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;
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
return <div className="color-palette">
|
||||
<div className="main-color">
|
||||
{color.colors.map(function(color) {
|
||||
return (<div key={color} style={{backgroundColor:color}}></div>);
|
||||
})}
|
||||
const { name, description, color } = this.props.color;
|
||||
const colors = [];
|
||||
for (let i = 1; i <= 10; i++) {
|
||||
colors.push(
|
||||
<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',
|
||||
'description': '尽管同一种颜色传达的含义会因人而异，受到文化和地域的影响。但颜色还是可以提取出一些共通的特性，例如暖色系的红、橙、黄通常用于象征活力，激情，积极；而冷色系的绿、蓝、紫通常给人感觉是安全、稳定、专业。',
|
||||
'colors': [
|
||||
"#E01515", "#FF6600", "#FAC450",
|
||||
"#E4249B", "#CCCCCC", "#5FBC29",
|
||||
"#582DAA", "#0097DA", "#01B3CA"
|
||||
]
|
||||
name: 'red',
|
||||
description: '热情、警示',
|
||||
},
|
||||
{
|
||||
'title': 'Grey #CCCCCC',
|
||||
'description': '灰色是中性化的颜色，通常传递出来的感觉是沉稳，在配色心理学中描述 “专业化、系统化”的词条中灰色的使用占了较高的比例。建议可用于字体颜色的选择以及界面中大面积背景的底色搭配。',
|
||||
'colors': [
|
||||
"#FFFFFF", "#FCFCFC", "#ECECEC",
|
||||
"#989898", "#CCCCCC", "#D9D9D9",
|
||||
"#666666", "#323232", "#000000"
|
||||
]
|
||||
name: 'green',
|
||||
description: '成功、通过、安全',
|
||||
},
|
||||
{
|
||||
'title': 'Red #E01515',
|
||||
'description': '红色是具有强烈情感因素的颜色，通常红色传递的心理暗示有激情、欲望、战争以及危险。考虑到红色的特性，在后台系统的设计中建议作为辅助色来突出元素特性或是强化信息，常见的有图表元素，状态，危险信号，错误提示等。',
|
||||
'colors': [
|
||||
"#F9CCD6", "#FFA5B4", "#FA727D",
|
||||
"#BB0606", "#E01515", "#FF3858",
|
||||
"#881414", "#4E1212", "#260404"
|
||||
]
|
||||
name: 'blue',
|
||||
description: '专业、科技',
|
||||
},
|
||||
{
|
||||
'title': 'Green #60BE29',
|
||||
'description': '绿色是非常务实的颜色，它吸收了蓝色的沉稳同时具备黄色的活力。绿色蕴含着和平、生命、希望、轻松、富饶的含义。在我们的设计实例中绿色可用来传达任务完成、健康状态以及安全感等状态。',
|
||||
'colors': [
|
||||
"#E2F582", "#D0EE9C", "#A6E33C",
|
||||
"#39A30E", "#60BE29", "#70D445",
|
||||
"#18791B", "#1F4A12", "#102803"
|
||||
]
|
||||
name: 'pink',
|
||||
description: '典雅、明快、女性',
|
||||
},
|
||||
{
|
||||
'title': 'Blue #00A0E9',
|
||||
'description': '这里的蓝色沿用的是蚂蚁金服的品牌色，深蓝色的运用可以传递出可靠和稳定的情绪，而浅蓝色系则更为友好和清新，同时还代表了科技感与想象力。在很多专业类、管理类的后台系统设计中蓝色系常常会被选择作为设计的主色来使用。',
|
||||
'colors': [
|
||||
"#CCE4F6", "#95CCF5", "#6AC2F5",
|
||||
"#1D80D3", "#00A0E9", "#2DB7F5",
|
||||
"#1F5AA3", "#0B366A", "#08172F"
|
||||
]
|
||||
name: 'orange',
|
||||
description: '醒目、温暖',
|
||||
},
|
||||
{
|
||||
'title': 'Magenta #E9259E',
|
||||
'description': '玫红色是较为正面的色彩，含有鼓励、友好、活力的意义。但考虑到洋红色的特性，建议作为辅助色来使用。',
|
||||
'colors': [
|
||||
"#F8C5ED", "#F5A6D3", "#F387C0",
|
||||
"#BC0F69", "#E9259E", "#F056AD",
|
||||
"#890B4C", "#5E0B36", "#230213"
|
||||
]
|
||||
name: 'purple',
|
||||
description: '高雅、浪漫',
|
||||
},
|
||||
{
|
||||
'title': 'Orange #FF6100',
|
||||
'description': '介于红色和黄色之间，传达愉悦，创造力，热情，吸引力。但橙色又不如红色那样具侵略性，同时又能够很好的引起视觉的注意力。可以作为设计的主色也可以用于辅助色。但大面积使用时需要慎重。',
|
||||
'colors': [
|
||||
"#F1DDBD", "#FBCA72", "#FDAC23",
|
||||
"#CE630F", "#FF6100", "#FF8A0C",
|
||||
"#8B4A04", "#523A13", "#341F0B"
|
||||
]
|
||||
name: 'yellow',
|
||||
description: '活力、提示',
|
||||
},
|
||||
{
|
||||
'title': 'Purple #5E30B5',
|
||||
'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"
|
||||
]
|
||||
name: 'cyan',
|
||||
description: '清新、冷静、结构化',
|
||||
}
|
||||
];
|
||||
return <div>
|
||||
{colors.map((color, i) => {
|
||||
return <Palette key={i} color={color} />;
|
||||
})}
|
||||
</div>;
|
||||
return (
|
||||
<div>
|
||||
{colors.map((color, i) => <Palette key={color.name} color={color} />)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
ReactDOM.render(<ExtendPalettes key="palettes" />, mountNode);
|
||||
|
||||
@ -1,40 +1,59 @@
|
||||
.color-palette {
|
||||
margin: 45px 0;
|
||||
overflow: hidden;
|
||||
height: 165px;
|
||||
}
|
||||
|
||||
.main-color {
|
||||
width: 165px;
|
||||
height: 165px;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main-color div {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
.main-color .main-color-item {
|
||||
width: 80px;
|
||||
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 {
|
||||
margin-left: 180px;
|
||||
}
|
||||
|
||||
.color-msg .color-msg-title {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
.color-title {
|
||||
margin: 0 0 16px 0;
|
||||
font-weight: 500;
|
||||
color: #5C6B77;
|
||||
line-height: 1.8;
|
||||
font-size: 21px;
|
||||
font-size: 22px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.color-msg .color-msg-description {
|
||||
color: #777;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
margin-top: 16px;
|
||||
.color-description {
|
||||
font-size: 16px;
|
||||
margin-left: 12px;
|
||||
font-weight: normal;
|
||||
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);
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@ footer {
|
||||
background: #fff;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color: #666;
|
||||
color: @text-color;
|
||||
box-shadow: 0 1000px 0 1000px #fff;
|
||||
}
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
border-left-color: #EBEDEE;
|
||||
}
|
||||
a {
|
||||
color: #666;
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
}
|
||||
|
||||
p {
|
||||
color: #666;
|
||||
color: @text-color;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
.preview-image-title {
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
color: #666;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
.preview-image-description {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -101,8 +101,8 @@
|
||||
button.lang {
|
||||
display: block;
|
||||
margin: 29px auto 16px;
|
||||
color: #666;
|
||||
border-color: #666;
|
||||
color: @text-color;
|
||||
border-color: @text-color;
|
||||
}
|
||||
|
||||
.popover-menu {
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
color: #666;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
.toc a:hover {
|
||||
|
||||
@ -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;
|
||||
border-color: #666;
|
||||
color: @text-color;
|
||||
border-color: @text-color;
|
||||
}
|
||||
.nav-phone-icon:before {
|
||||
background: #eee;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user