-
-
Notifications
You must be signed in to change notification settings - Fork 46.7k
/
ColorPalettes.jsx
94 lines (91 loc) · 1.96 KB
/
ColorPalettes.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import React from 'react';
import cls from 'classnames';
import Palette from './Palette';
const ColorPalettes = (props) => {
const { dark } = props;
const colors = [
{
name: 'red',
english: 'Dust Red',
chinese: '薄暮',
description: '斗志、奔放',
},
{
name: 'volcano',
english: 'Volcano',
chinese: '火山',
description: '醒目、澎湃',
},
{
name: 'orange',
english: 'Sunset Orange',
chinese: '日暮',
description: '温暖、欢快',
},
{
name: 'gold',
english: 'Calendula Gold',
chinese: '金盏花',
description: '活力、积极',
},
{
name: 'yellow',
english: 'Sunrise Yellow',
chinese: '日出',
description: '出生、阳光',
},
{
name: 'lime',
english: 'Lime',
chinese: '青柠',
description: '自然、生机',
},
{
name: 'green',
english: 'Polar Green',
chinese: '极光绿',
description: '健康、创新',
},
{
name: 'cyan',
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: '明快、感性',
},
];
const colorCls = cls('color-palettes', {
'color-palettes-dark': !!dark,
});
return (
<div className={colorCls}>
{colors.map((color) => (
<Palette key={color.name} color={color} dark={dark} showTitle />
))}
</div>
);
};
export default ColorPalettes;