mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 19:19:26 +08:00
finish whole color pallate
This commit is contained in:
afc163
parent
af5c8e8b1a
commit
934c4c0de1
@ -45,6 +45,18 @@
|
||||
@green-9: color(~`colorPalette("@{green-6}", 9)`);
|
||||
@green-10: color(~`colorPalette("@{green-6}", 10)`);
|
||||
|
||||
@magenta-1: color(~`colorPalette("@{magenta-6}", 1)`);
|
||||
@magenta-2: color(~`colorPalette("@{magenta-6}", 2)`);
|
||||
@magenta-3: color(~`colorPalette("@{magenta-6}", 3)`);
|
||||
@magenta-4: color(~`colorPalette("@{magenta-6}", 4)`);
|
||||
@magenta-5: color(~`colorPalette("@{magenta-6}", 5)`);
|
||||
@magenta-6: #eb2f96;
|
||||
@magenta-7: color(~`colorPalette("@{magenta-6}", 7)`);
|
||||
@magenta-8: color(~`colorPalette("@{magenta-6}", 8)`);
|
||||
@magenta-9: color(~`colorPalette("@{magenta-6}", 9)`);
|
||||
@magenta-10: color(~`colorPalette("@{magenta-6}", 10)`);
|
||||
|
||||
// alias of magenta
|
||||
@pink-1: color(~`colorPalette("@{pink-6}", 1)`);
|
||||
@pink-2: color(~`colorPalette("@{pink-6}", 2)`);
|
||||
@pink-3: color(~`colorPalette("@{pink-6}", 3)`);
|
||||
@ -83,19 +95,52 @@
|
||||
@yellow-3: color(~`colorPalette("@{yellow-6}", 3)`);
|
||||
@yellow-4: color(~`colorPalette("@{yellow-6}", 4)`);
|
||||
@yellow-5: color(~`colorPalette("@{yellow-6}", 5)`);
|
||||
@yellow-6: #faad14;
|
||||
@yellow-6: #fadb14;
|
||||
@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)`);
|
||||
|
||||
@lemon-1: color(~`colorPalette("@{lemon-6}", 1)`);
|
||||
@lemon-2: color(~`colorPalette("@{lemon-6}", 2)`);
|
||||
@lemon-3: color(~`colorPalette("@{lemon-6}", 3)`);
|
||||
@lemon-4: color(~`colorPalette("@{lemon-6}", 4)`);
|
||||
@lemon-5: color(~`colorPalette("@{lemon-6}", 5)`);
|
||||
@lemon-6: #fadb14;
|
||||
@lemon-7: color(~`colorPalette("@{lemon-6}", 7)`);
|
||||
@lemon-8: color(~`colorPalette("@{lemon-6}", 8)`);
|
||||
@lemon-9: color(~`colorPalette("@{lemon-6}", 9)`);
|
||||
@lemon-10: color(~`colorPalette("@{lemon-6}", 10)`);
|
||||
@volcano-1: color(~`colorPalette("@{volcano-6}", 1)`);
|
||||
@volcano-2: color(~`colorPalette("@{volcano-6}", 2)`);
|
||||
@volcano-3: color(~`colorPalette("@{volcano-6}", 3)`);
|
||||
@volcano-4: color(~`colorPalette("@{volcano-6}", 4)`);
|
||||
@volcano-5: color(~`colorPalette("@{volcano-6}", 5)`);
|
||||
@volcano-6: #fa541c;
|
||||
@volcano-7: color(~`colorPalette("@{volcano-6}", 7)`);
|
||||
@volcano-8: color(~`colorPalette("@{volcano-6}", 8)`);
|
||||
@volcano-9: color(~`colorPalette("@{volcano-6}", 9)`);
|
||||
@volcano-10: color(~`colorPalette("@{volcano-6}", 10)`);
|
||||
|
||||
@geekblue-1: color(~`colorPalette("@{geekblue-6}", 1)`);
|
||||
@geekblue-2: color(~`colorPalette("@{geekblue-6}", 2)`);
|
||||
@geekblue-3: color(~`colorPalette("@{geekblue-6}", 3)`);
|
||||
@geekblue-4: color(~`colorPalette("@{geekblue-6}", 4)`);
|
||||
@geekblue-5: color(~`colorPalette("@{geekblue-6}", 5)`);
|
||||
@geekblue-6: #2f54eb;
|
||||
@geekblue-7: color(~`colorPalette("@{geekblue-6}", 7)`);
|
||||
@geekblue-8: color(~`colorPalette("@{geekblue-6}", 8)`);
|
||||
@geekblue-9: color(~`colorPalette("@{geekblue-6}", 9)`);
|
||||
@geekblue-10: color(~`colorPalette("@{geekblue-6}", 10)`);
|
||||
|
||||
@lime-1: color(~`colorPalette("@{lime-6}", 1)`);
|
||||
@lime-2: color(~`colorPalette("@{lime-6}", 2)`);
|
||||
@lime-3: color(~`colorPalette("@{lime-6}", 3)`);
|
||||
@lime-4: color(~`colorPalette("@{lime-6}", 4)`);
|
||||
@lime-5: color(~`colorPalette("@{lime-6}", 5)`);
|
||||
@lime-6: #a0d911;
|
||||
@lime-7: color(~`colorPalette("@{lime-6}", 7)`);
|
||||
@lime-8: color(~`colorPalette("@{lime-6}", 8)`);
|
||||
@lime-9: color(~`colorPalette("@{lime-6}", 9)`);
|
||||
@lime-10: color(~`colorPalette("@{lime-6}", 10)`);
|
||||
|
||||
@gold-1: color(~`colorPalette("@{gold-6}", 1)`);
|
||||
@gold-2: color(~`colorPalette("@{gold-6}", 2)`);
|
||||
@gold-3: color(~`colorPalette("@{gold-6}", 3)`);
|
||||
@gold-4: color(~`colorPalette("@{gold-6}", 4)`);
|
||||
@gold-5: color(~`colorPalette("@{gold-6}", 5)`);
|
||||
@gold-6: #faad14;
|
||||
@gold-7: color(~`colorPalette("@{gold-6}", 7)`);
|
||||
@gold-8: color(~`colorPalette("@{gold-6}", 8)`);
|
||||
@gold-9: color(~`colorPalette("@{gold-6}", 9)`);
|
||||
@gold-10: color(~`colorPalette("@{gold-6}", 10)`);
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
@success-color : @green-6;
|
||||
@error-color : @red-6;
|
||||
@highlight-color : @red-6;
|
||||
@warning-color : @yellow-6;
|
||||
@warning-color : @gold-6;
|
||||
@normal-color : #d9d9d9;
|
||||
|
||||
// Color used by default to control hover and active backgrounds and for
|
||||
@ -345,7 +345,7 @@
|
||||
|
||||
// Rate
|
||||
// ---
|
||||
@rate-star-color: @lemon-6;
|
||||
@rate-star-color: @yellow-6;
|
||||
@rate-star-bg: @border-color-split;
|
||||
|
||||
// Card
|
||||
|
||||
@ -98,7 +98,7 @@
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@colors: pink, red, orange, yellow, cyan, green, blue, purple;
|
||||
@colors: pink, magenta, red, orange, yellow, cyan, green, blue, purple;
|
||||
|
||||
// mixin to iterate over colors and create CSS class for each one
|
||||
.make-color-classes(@i: length(@colors)) when (@i > 0) {
|
||||
|
||||
@ -28,6 +28,7 @@
|
||||
text-align: center;
|
||||
padding-top: 28px;
|
||||
font-family: Consolas;
|
||||
font-size: 13px;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
@ -36,6 +37,11 @@
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
&-item &-text {
|
||||
transition: all .3s;
|
||||
font-weight: lighter;
|
||||
opacity: 0.8;
|
||||
}
|
||||
&-item &-value {
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
@ -58,7 +64,7 @@
|
||||
}
|
||||
|
||||
.color-description {
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: lighter;
|
||||
color: #777;
|
||||
display: block;
|
||||
@ -68,6 +74,9 @@
|
||||
.main-color-item {
|
||||
padding-top: 4px;
|
||||
}
|
||||
.main-color-text {
|
||||
opacity: 1;
|
||||
}
|
||||
.main-color-value {
|
||||
opacity: 0.7;
|
||||
bottom: 3px;
|
||||
@ -98,10 +107,13 @@
|
||||
.make-palatte(purple);
|
||||
.make-palatte(cyan);
|
||||
.make-palatte(green);
|
||||
.make-palatte(pink);
|
||||
.make-palatte(magenta);
|
||||
.make-palatte(red);
|
||||
.make-palatte(volcano);
|
||||
.make-palatte(orange);
|
||||
.make-palatte(lemon);
|
||||
.make-palatte(gold);
|
||||
.make-palatte(yellow);
|
||||
.make-palatte(lime);
|
||||
.make-palatte(geekblue);
|
||||
.make-palatte(grey);
|
||||
}
|
||||
|
||||
@ -23,8 +23,9 @@ class Palette extends Component {
|
||||
}
|
||||
render() {
|
||||
this.colorNodes = this.colorNodes || {};
|
||||
const { name, description } = this.props.color;
|
||||
const { name, description, english, chinese } = this.props.color;
|
||||
const colors = [];
|
||||
const colorName = `${english} / ${chinese}`;
|
||||
for (let i = 1; i <= 10; i += 1) {
|
||||
const colorText = `${name}-${i}`;
|
||||
colors.push(
|
||||
@ -43,7 +44,7 @@ class Palette extends Component {
|
||||
}}
|
||||
title="click to copy color"
|
||||
>
|
||||
{colorText}
|
||||
<span className="main-color-text">{colorText}</span>
|
||||
{this.hexColors
|
||||
? <span className="main-color-value">{this.hexColors[colorText]}</span>
|
||||
: null}
|
||||
@ -54,7 +55,7 @@ class Palette extends Component {
|
||||
return (
|
||||
<div className="color-palette">
|
||||
<div className="color-title">
|
||||
{name}
|
||||
{colorName}
|
||||
<span className="color-description">{description}</span>
|
||||
</div>
|
||||
<div className="main-color">{colors}</div>
|
||||
@ -67,42 +68,80 @@ const ColorPalettes = () => {
|
||||
const colors = [
|
||||
{
|
||||
name: 'red',
|
||||
description: '热情、警示',
|
||||
english: 'Dust Red',
|
||||
chinese: '薄暮',
|
||||
description: '斗志、奔放',
|
||||
},
|
||||
{
|
||||
name: 'green',
|
||||
description: '成功、通过、安全',
|
||||
},
|
||||
{
|
||||
name: 'blue',
|
||||
description: '专业、科技',
|
||||
},
|
||||
{
|
||||
name: 'pink',
|
||||
description: '典雅、明快、女性',
|
||||
name: 'volcano',
|
||||
english: 'Volcano',
|
||||
chinese: '火山',
|
||||
description: '醒目、澎湃',
|
||||
},
|
||||
{
|
||||
name: 'orange',
|
||||
description: '醒目、温暖',
|
||||
english: 'Sunset Orange',
|
||||
chinese: '日暮',
|
||||
description: '温暖、欢快',
|
||||
},
|
||||
{
|
||||
name: 'purple',
|
||||
description: '高雅、浪漫',
|
||||
name: 'gold',
|
||||
english: 'Calendula Gold',
|
||||
chinese: '金盏花',
|
||||
description: '活力、积极',
|
||||
},
|
||||
{
|
||||
name: 'yellow',
|
||||
description: '活力、提示',
|
||||
english: 'Sunrise Yellow',
|
||||
chinese: '日出',
|
||||
description: '出生、阳光',
|
||||
},
|
||||
{
|
||||
name: 'lemon',
|
||||
description: '活力、提示',
|
||||
name: 'lime',
|
||||
english: 'Lime Green',
|
||||
chinese: '青柠',
|
||||
description: '自然、生机',
|
||||
},
|
||||
{
|
||||
name: 'green',
|
||||
english: 'Polar Green',
|
||||
chinese: '极光绿',
|
||||
description: '健康、创新',
|
||||
},
|
||||
{
|
||||
name: 'cyan',
|
||||
description: '清新、冷静、结构化',
|
||||
english: 'Cyan',
|
||||
chinese: '明青',
|
||||
description: '希望、坚强',
|
||||
},
|
||||
{
|
||||
name: 'blue',
|
||||
english: 'Daybreak Blue',
|
||||
chinese: '拂晓蓝',
|
||||
description: '包容、科技、普惠',
|
||||
},
|
||||
{
|
||||
name: 'geekblue',
|
||||
english: 'Geek Blue',
|
||||
chinese: '极客蓝',
|
||||
description: '探索、钻研',
|
||||
},
|
||||
{
|
||||
name: 'purple',
|
||||
english: 'Golden Purple',
|
||||
chinese: '酱紫',
|
||||
description: '优雅、浪漫',
|
||||
},
|
||||
{
|
||||
name: 'magenta',
|
||||
english: 'Magenta',
|
||||
chinese: '法式洋红',
|
||||
description: '明快、感性',
|
||||
},
|
||||
{
|
||||
name: 'grey',
|
||||
english: 'Grey',
|
||||
chinese: '灰',
|
||||
description: '平稳、中性',
|
||||
},
|
||||
];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user