Skip to content

Commit

Permalink
finish whole color pallate
Browse files Browse the repository at this point in the history
  • Loading branch information
@afc163
afc163 committed Oct 9, 2017
1 parent af5c8e8 commit 934c4c0
Show file tree
Hide file tree
Showing 5 changed files with 133 additions and 37 deletions.
67 changes: 56 additions & 11 deletions components/style/color/colors.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)`);
Expand Down Expand Up @@ -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)`);
4 changes: 2 additions & 2 deletions components/style/themes/default.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -345,7 +345,7 @@

// Rate
// ---
@rate-star-color: @lemon-6;
@rate-star-color: @yellow-6;
@rate-star-bg: @border-color-split;

// Card
Expand Down
2 changes: 1 addition & 1 deletion components/tag/style/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
18 changes: 15 additions & 3 deletions site/theme/static/colors.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
text-align: center;
padding-top: 28px;
font-family: Consolas;
font-size: 13px;
&:last-child {
margin-right: 0;
}
Expand All @@ -36,6 +37,11 @@
height: 90px;
}
}
&-item &-text {
transition: all .3s;
font-weight: lighter;
opacity: 0.8;
}
&-item &-value {
position: absolute;
bottom: -4px;
Expand All @@ -58,7 +64,7 @@
}

.color-description {
font-size: 12px;
font-size: 14px;
font-weight: lighter;
color: #777;
display: block;
Expand All @@ -68,6 +74,9 @@
.main-color-item {
padding-top: 4px;
}
.main-color-text {
opacity: 1;
}
.main-color-value {
opacity: 0.7;
bottom: 3px;
Expand Down Expand Up @@ -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);
}
79 changes: 59 additions & 20 deletions site/theme/template/Color/ColorPalettes.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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}
Expand All @@ -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>
Expand All @@ -67,42 +68,80 @@ const ColorPalettes = () => {
const colors = [
{
name: 'red',
description: '热情、警示',
english: 'Dust Red',
chinese: '薄暮',
description: '斗志、奔放',
},
{
name: 'green',
description: '成功、通过、安全',
name: 'volcano',
english: 'Volcano',
chinese: '火山',
description: '醒目、澎湃',
},
{
name: 'blue',
description: '专业、科技',
name: 'orange',
english: 'Sunset Orange',
chinese: '日暮',
description: '温暖、欢快',
},
{
name: 'pink',
description: '典雅、明快、女性',
name: 'gold',
english: 'Calendula Gold',
chinese: '金盏花',
description: '活力、积极',
},
{
name: 'orange',
description: '醒目、温暖',
name: 'yellow',
english: 'Sunrise Yellow',
chinese: '日出',
description: '出生、阳光',
},
{
name: 'purple',
description: '高雅、浪漫',
name: 'lime',
english: 'Lime Green',
chinese: '青柠',
description: '自然、生机',
},
{
name: 'yellow',
description: '活力、提示',
name: 'green',
english: 'Polar Green',
chinese: '极光绿',
description: '健康、创新',
},
{
name: 'cyan',
english: 'Cyan',
chinese: '明青',
description: '希望、坚强',
},
{
name: 'lemon',
description: '活力、提示',
name: 'blue',
english: 'Daybreak Blue',
chinese: '拂晓蓝',
description: '包容、科技、普惠',
},
{
name: 'cyan',
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: '平稳、中性',
},
];
Expand Down

0 comments on commit 934c4c0

Please sign in to comment.