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
|
import React, {Component} from 'react';
const colorMap = {
'$white': '#ffffff',
'$blue': '#009fdb',
'$light-blue': '#1eb9f3',
'$lighter-blue': '#e6f6fb',
'$blue-disabled': '#9dd9ef',
'$dark-blue': '#0568ae',
'$black': '#000000',
'$rich-black': '#323943',
'$text-black': '#191919',
'$dark-gray': '#5a5a5a',
'$gray': '#959595',
'$light-gray': '#d2d2d2',
'$silver': '#eaeaea',
'$light-silver': '#f2f2f2',
'$green': '#4ca90c',
'$functional-red': '#cf2a2a',
'$yellow': '#ffb81c',
'$dark-purple': '#702f8a',
'$purple': '#9063cd',
'$light-purple': '#caa2dd'
};
function Color({colorName, colorValue}) {
return (
<div key={colorName} className='color-section'>
<div className='color-circle' style={{backgroundColor: colorValue}} />
<div>{colorName.replace('$', '')}</div>
<div>{colorValue}</div>
</div>
);
}
class Colors extends Component {
render() {
return (
<div>
<h1>Colors Palette</h1>
<div className='colors-table'>
{
Object.keys(colorMap).map(colorName => <Color key={colorName} colorValue={colorMap[colorName]} colorName={colorName}/>)
}
</div>
</div>
);
}
}
export default Colors;
|
