Skip to content

Commit 821ae5d

Browse files
BrunoQuaresmaBrunoQuaresma
authored
chore: Add colors object with the Coder color palette (#3173)
1 parent 4d53934 commit 821ae5d

File tree

2 files changed

+246
-20
lines changed

2 files changed

+246
-20
lines changed

‎site/src/theme/colors.ts

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
// Based on https://codepen.io/hkfoster/pen/YzeYRwR
2+
3+
export const colors = {
4+
white: "hsl(0, 0%, 100%)",
5+
6+
gray: {
7+
17: "hsl(220, 50%, 3%)",
8+
16: "hsl(223, 44%, 9%)",
9+
15: "hsl(222, 38%, 14%)",
10+
14: "hsl(222, 32%, 19%)",
11+
13: "hsl(222, 31%, 25%)",
12+
12: "hsl(222, 30%, 31%)",
13+
11: "hsl(219, 29%, 38%)",
14+
10: "hsl(219, 28%, 45%)",
15+
9: "hsl(219, 28%, 52%)",
16+
8: "hsl(218, 29%, 58%)",
17+
7: "hsl(219, 30%, 64%)",
18+
6: "hsl(219, 31%, 71%)",
19+
5: "hsl(218, 32%, 77%)",
20+
4: "hsl(223, 38%, 84%)",
21+
3: "hsl(218, 44%, 92%)",
22+
2: "hsl(220, 50%, 95%)",
23+
1: "hsl(220, 55%, 98%)",
24+
},
25+
26+
red: {
27+
17: "hsl(355, 95%, 3%)",
28+
16: "hsl(355, 88%, 9%)",
29+
15: "hsl(355, 86%, 14%)",
30+
14: "hsl(355, 84%, 19%)",
31+
13: "hsl(355, 82%, 25%)",
32+
12: "hsl(355, 74%, 31%)",
33+
11: "hsl(355, 70%, 38%)",
34+
10: "hsl(355, 66%, 45%)",
35+
9: "hsl(355, 69%, 52%)",
36+
8: "hsl(355, 73%, 58%)",
37+
7: "hsl(355, 76%, 64%)",
38+
6: "hsl(355, 78%, 71%)",
39+
5: "hsl(355, 79%, 77%)",
40+
4: "hsl(355, 85%, 84%)",
41+
3: "hsl(355, 88%, 92%)",
42+
2: "hsl(355, 95%, 96%)",
43+
1: "hsl(355, 100%, 98%) ",
44+
},
45+
46+
orange: {
47+
17: "hsl(20, 100%, 3%)",
48+
16: "hsl(20, 98%, 9%)",
49+
15: "hsl(20, 97%, 14%)",
50+
14: "hsl(20, 93%, 19%)",
51+
13: "hsl(20, 88%, 25%)",
52+
12: "hsl(20, 84%, 32%)",
53+
11: "hsl(20, 80%, 38%)",
54+
10: "hsl(20, 76%, 46%)",
55+
9: "hsl(20, 79%, 53%)",
56+
8: "hsl(20, 83%, 59%)",
57+
7: "hsl(20, 86%, 65%)",
58+
6: "hsl(20, 88%, 72%)",
59+
5: "hsl(20, 93%, 78%)",
60+
4: "hsl(20, 97%, 84%)",
61+
3: "hsl(20, 98%, 91%)",
62+
2: "hsl(20, 99%, 96%)",
63+
1: "hsl(20, 100%, 98%)",
64+
},
65+
66+
yellow: {
67+
17: "hsl(48, 100%, 3%)",
68+
16: "hsl(48, 87%, 9%)",
69+
15: "hsl(48, 83%, 14%)",
70+
14: "hsl(48, 88%, 19%)",
71+
13: "hsl(48, 82%, 25%)",
72+
12: "hsl(48, 74%, 32%)",
73+
11: "hsl(48, 70%, 38%)",
74+
10: "hsl(48, 66%, 46%)",
75+
9: "hsl(48, 69%, 53%)",
76+
8: "hsl(48, 73%, 59%)",
77+
7: "hsl(48, 76%, 65%)",
78+
6: "hsl(48, 78%, 72%)",
79+
5: "hsl(48, 79%, 78%)",
80+
4: "hsl(48, 85%, 84%)",
81+
3: "hsl(48, 90%, 89%)",
82+
2: "hsl(46, 95%, 93%)",
83+
1: "hsl(46, 100%, 97%)",
84+
},
85+
86+
green: {
87+
17: "hsl(132, 98%, 3%)",
88+
16: "hsl(140, 94%, 8%)",
89+
15: "hsl(144, 93%, 12%)",
90+
14: "hsl(145, 99%, 16%)",
91+
13: "hsl(143, 83%, 22%)",
92+
12: "hsl(143, 74%, 27%)",
93+
11: "hsl(142, 64%, 34%)",
94+
10: "hsl(141, 57%, 41%)",
95+
9: "hsl(140, 50%, 49%)",
96+
8: "hsl(140, 51%, 54%)",
97+
7: "hsl(138, 54%, 61%)",
98+
6: "hsl(137, 56%, 68%)",
99+
5: "hsl(137, 55%, 75%)",
100+
4: "hsl(137, 60%, 82%)",
101+
3: "hsl(136, 74%, 91%)",
102+
2: "hsl(136, 82%, 95%)",
103+
1: "hsl(136, 100%, 97%)",
104+
},
105+
106+
turquoise: {
107+
17: "hsl(162, 88%, 3%)",
108+
16: "hsl(164, 84%, 8%)",
109+
15: "hsl(165, 76%, 14%)",
110+
14: "hsl(167, 85%, 18%)",
111+
13: "hsl(166, 74%, 25%)",
112+
12: "hsl(166, 65%, 32%)",
113+
11: "hsl(165, 61%, 38%)",
114+
10: "hsl(165, 56%, 46%)",
115+
9: "hsl(165, 56%, 53%)",
116+
8: "hsl(165, 60%, 57%)",
117+
7: "hsl(164, 65%, 64%)",
118+
6: "hsl(163, 66%, 70%)",
119+
5: "hsl(163, 66%, 77%)",
120+
4: "hsl(162, 74%, 83%)",
121+
3: "hsl(162, 97%, 91%)",
122+
2: "hsl(163, 93%, 94%)",
123+
1: "hsl(163, 100%, 97%)",
124+
},
125+
126+
cyan: {
127+
17: "hsl(186, 100%, 3%)",
128+
16: "hsl(185, 86%, 8%)",
129+
15: "hsl(186, 80%, 14%)",
130+
14: "hsl(185, 83%, 18%)",
131+
13: "hsl(185, 76%, 25%)",
132+
12: "hsl(185, 68%, 31%)",
133+
11: "hsl(185, 64%, 37%)",
134+
10: "hsl(185, 59%, 45%)",
135+
9: "hsl(185, 57%, 52%)",
136+
8: "hsl(185, 61%, 57%)",
137+
7: "hsl(185, 64%, 63%)",
138+
6: "hsl(185, 66%, 70%)",
139+
5: "hsl(185, 66%, 77%)",
140+
4: "hsl(185, 72%, 83%)",
141+
3: "hsl(185, 91%, 91%)",
142+
2: "hsl(182, 96%, 94%)",
143+
1: "hsl(182, 100%, 97%)",
144+
},
145+
146+
blue: {
147+
17: "hsl(215, 100%, 3%)",
148+
16: "hsl(215, 92%, 7%)",
149+
15: "hsl(215, 88%, 12%)",
150+
14: "hsl(215, 93%, 17%)",
151+
13: "hsl(215, 87%, 23%)",
152+
12: "hsl(215, 79%, 30%)",
153+
11: "hsl(215, 75%, 36%)",
154+
10: "hsl(215, 71%, 44%)",
155+
9: "hsl(215, 74%, 51%)",
156+
8: "hsl(215, 78%, 57%)",
157+
7: "hsl(215, 81%, 63%)",
158+
6: "hsl(215, 83%, 70%)",
159+
5: "hsl(215, 84%, 76%)",
160+
4: "hsl(215, 90%, 82%)",
161+
3: "hsl(215, 93%, 89%)",
162+
2: "hsl(215, 97%, 95%)",
163+
1: "hsl(215, 100%, 98%)",
164+
},
165+
166+
indigo: {
167+
17: "hsl(256, 100%, 3%)",
168+
16: "hsl(254, 87%, 9%)",
169+
15: "hsl(252, 83%, 14%)",
170+
14: "hsl(250, 88%, 19%)",
171+
13: "hsl(248, 82%, 25%)",
172+
12: "hsl(246, 74%, 32%)",
173+
11: "hsl(244, 70%, 38%)",
174+
10: "hsl(242, 66%, 44%)",
175+
9: "hsl(240, 67%, 53%)",
176+
8: "hsl(238, 70%, 59%)",
177+
7: "hsl(232, 74%, 63%)",
178+
6: "hsl(236, 78%, 72%)",
179+
5: "hsl(234, 79%, 78%)",
180+
4: "hsl(232, 85%, 84%)",
181+
3: "hsl(230, 90%, 91%)",
182+
2: "hsl(228, 95%, 96%)",
183+
1: "hsl(226, 100%, 98%)",
184+
},
185+
186+
violet: {
187+
17: "hsl(264, 100%, 3%)",
188+
16: "hsl(265, 87%, 9%)",
189+
15: "hsl(265, 83%, 14%)",
190+
14: "hsl(265, 88%, 19%)",
191+
13: "hsl(265, 82%, 25%)",
192+
12: "hsl(265, 74%, 32%)",
193+
11: "hsl(265, 70%, 38%)",
194+
10: "hsl(265, 66%, 46%)",
195+
9: "hsl(265, 69%, 53%)",
196+
8: "hsl(265, 73%, 59%)",
197+
7: "hsl(265, 76%, 65%)",
198+
6: "hsl(265, 78%, 72%)",
199+
5: "hsl(265, 79%, 78%)",
200+
4: "hsl(264, 85%, 84%)",
201+
3: "hsl(265, 90%, 91%)",
202+
2: "hsl(265, 95%, 96%)",
203+
1: "hsl(265, 100%, 98%)",
204+
},
205+
206+
magenta: {
207+
17: "hsl(316, 100%, 3%)",
208+
16: "hsl(316, 86%, 9%)",
209+
15: "hsl(314, 83%, 14%)",
210+
14: "hsl(315, 85%, 19%)",
211+
13: "hsl(315, 80%, 25%)",
212+
12: "hsl(315, 71%, 31%)",
213+
11: "hsl(315, 68%, 38%)",
214+
10: "hsl(315, 62%, 45%)",
215+
9: "hsl(315, 63%, 52%)",
216+
8: "hsl(315, 67%, 58%)",
217+
7: "hsl(315, 70%, 64%)",
218+
6: "hsl(315, 71%, 71%)",
219+
5: "hsl(315, 72%, 77%)",
220+
4: "hsl(315, 79%, 84%)",
221+
3: "hsl(316, 88%, 92%)",
222+
2: "hsl(315, 95%, 96%)",
223+
1: "hsl(315, 100%, 98%)",
224+
},
225+
}

‎site/src/theme/palettes.ts

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,42 @@
11
import { PaletteOptions } from "@material-ui/core/styles/createPalette"
2+
import { colors } from "./colors"
23

34
export const darkPalette: PaletteOptions = {
45
type: "dark",
56
primary: {
6-
main: "hsl(215, 81%, 63%)",
7-
contrastText: "hsl(218, 44%, 92%)",
8-
light: "hsl(215, 83%, 70%)",
9-
dark: "hsl(215, 74%, 51%)",
7+
main: colors.blue[7],
8+
contrastText: colors.gray[3],
9+
light: colors.blue[6],
10+
dark: colors.blue[9],
1011
},
1112
secondary: {
12-
main: "hsl(142, 64%, 34%)",
13-
contrastText: "hsl(218, 44%, 92%)",
14-
dark: "hsl(233, 73%, 63%)",
13+
main: colors.green[11],
14+
contrastText: colors.gray[3],
15+
dark: colors.indigo[7],
1516
},
1617
background: {
17-
default: "hsl(222, 38%, 14%)",
18-
paper: "hsl(222, 32%, 19%)",
18+
default: colors.gray[15],
19+
paper: colors.gray[14],
1920
},
2021
text: {
21-
primary: "hsl(218, 44%, 92%)",
22-
secondary: "hsl(218, 32%, 77%)",
22+
primary: colors.gray[3],
23+
secondary: colors.gray[5],
2324
},
24-
divider: "hsl(221, 32%, 26%)",
25+
divider: colors.gray[13],
2526
warning: {
26-
main: "hsl(20, 79%, 53%)",
27-
dark: "#57250C",
27+
main: colors.orange[11],
28+
dark: colors.orange[15],
2829
},
2930
success: {
30-
main: "hsl(142, 58%, 41%)",
31-
dark: "#205027",
31+
main: colors.green[11],
32+
dark: colors.green[15],
3233
},
3334
info: {
34-
main: "hsl(219, 67%, 54%)",
35-
dark: "#0C2551",
35+
main: colors.blue[11],
36+
dark: colors.blue[15],
3637
},
3738
error: {
38-
main: "#D8666C",
39-
dark: "#511112",
39+
main: colors.red[11],
40+
dark: colors.red[15],
4041
},
4142
}

0 commit comments

Comments
 (0)