-
Notifications
You must be signed in to change notification settings - Fork 15
/
palette.ts
110 lines (103 loc) · 2.48 KB
/
palette.ts
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
interface ColorSample {
lightest?: string
lighter?: string
lighter2?: string
light?: string
light2?: string
main?: string
main2?: string
dark?: string
darker?: string
}
declare module '@material-ui/core/styles/createPalette' {
export interface SimplePaletteColorOptions extends ColorSample {}
interface Palette {
blue: SimplePaletteColorOptions
green: SimplePaletteColorOptions
yellow: SimplePaletteColorOptions
red: SimplePaletteColorOptions
purple: SimplePaletteColorOptions
gradients: {
blue: string
darkerBlue: string
lightGrey: string
grey: string
darkerGrey: string
}
}
}
declare module '@material-ui/core' {
export interface Color extends ColorSample {}
}
export const colors = {
grey: {
lightest: '#fcfcfc',
lighter: '#f3f4f6',
lighter2: '#ebeced',
light: '#e5e7ea',
light2: '#d8d9dc',
main: '#c4c6ca',
main2: '#84888e',
dark: '#455065',
darker: '#262d3d',
},
blue: {
lighter: '#edf1fd',
light: '#25a9ef',
main: '#204ecf',
dark: '#183a9e',
darker: '#0f256e',
},
yellow: {
lighter: '#fff5e3',
main: '#e59c01',
},
red: {
lighter: '#fbedf1',
main: '#d42551',
},
green: {
lighter: '#eafbf5',
main: '#00cc83',
dark: '#03b080',
darker: '#05947c',
},
purple: {
main: '#6727cf',
},
common: {
black: '#000',
white: '#fff',
},
}
export const gradients = {
blue: `linear-gradient(to right bottom, ${colors.blue.darker}, ${colors.blue.main})`,
darkerBlue: `linear-gradient(to right bottom, #071237, ${colors.blue.darker})`,
lightGrey: `linear-gradient(to right bottom, ${colors.grey.light}, ${colors.common.white})`,
grey: `linear-gradient(to right bottom, ${colors.grey.darker}, ${colors.grey.dark})`,
darkerGrey: `linear-gradient(to right bottom, ${colors.common.black}, ${colors.grey.darker})`,
}
const palette = {
// MUI adds additional colors, like `contrastText` to the
// palette. So to prevent changing colors object we should
// deep copy it.
...JSON.parse(JSON.stringify(colors)),
primary: JSON.parse(JSON.stringify(colors.blue)),
error: JSON.parse(JSON.stringify(colors.red)),
grey: {
100: colors.grey.lighter2,
200: colors.grey.light2,
300: colors.grey.main,
400: colors.grey.dark,
500: colors.grey.darker,
...colors.grey,
},
text: {
primary: colors.grey.dark,
},
background: {
default: colors.common.white,
},
gradients,
}
export default palette