palette.js
1.67 KB
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
const palette = {
/* blue */
blue0: '#e7f5ff',
blue1: '#d0ebff',
blue2: '#a5d8ff',
blue3: '#74c0fc',
blue4: '#4dabf7',
blue5: '#339af0',
blue6: '#228be6',
blue7: '#1c7ed6',
blue8: '#1971c2',
blue9: '#1864ab',
/* cyan */
cyan0: '#e3fafc',
cyan1: '#c5f6fa',
cyan2: '#99e9f2',
cyan3: '#66d9e8',
cyan4: '#3bc9db',
cyan5: '#22b8cf',
cyan6: '#15aabf',
cyan7: '#1098ad',
cyan8: '#0c8599',
cyan9: '#0b7285',
/* gray */
gray0: '#f8f9fa',
gray1: '#f1f3f5',
gray2: '#e9ecef',
gray3: '#dee2e6',
gray4: '#ced4da',
gray5: '#adb5bd',
gray6: '#868e96',
gray7: '#495057',
gray8: '#343a40',
gray9: '#212529',
};
export const buttonColorMap = {
blue: {
background: palette.blue6,
color: 'white',
hoverBackground: palette.blue5,
},
gray: {
background: palette.gray2,
color: 'black',
hoverBackground: palette.gray5,
},
white: {
background: 'white',
color: 'black',
hoverBackground: palette.gray2,
},
};
export const inputColorMap = {
blue: {
borderColor: palette.blue6,
color: 'black',
placeholder: palette.gray5,
},
};
export const dropdownListColorMap = {
blue: {
background: 'white',
color: palette.blue8,
borderColor: palette.blue8,
},
};
export const dropdownHeaderColorMap = {
blue: {
background: palette.blue6,
color: 'white',
hoverBackground: palette.blue5,
borderColor: palette.blue8,
},
white: {
background: 'white',
color: 'black',
hoverBackground: palette.gray2,
},
};
export const searchBoxColorMap = {
blue: {
background: palette.blue6,
color: 'white',
hoverBackground: palette.blue5,
},
};
export default palette;