Skip to content

Commit a989220

Browse files
zoltantothcomzoltantothcom
committed
Refactor themes to use color constants
1 parent 5f9ed80 commit a989220

File tree

20 files changed

+242
-255
lines changed

20 files changed

+242
-255
lines changed

‎__tests__/components/__snapshots__/Button.test.js.snap‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`<Button /> component renders with a DARK theme 1`] = `
44
.c0 {
55
background-color: #484848;
6-
border: 1px solid #707070;
6+
border: 1px solid #484848;
77
border-radius: 4px;
88
cursor: pointer;
99
font: 400 1rem 'Karla','sans-serif';
@@ -15,16 +15,16 @@ exports[`<Button /> component renders with a DARK theme 1`] = `
1515
}
1616
1717
.c0 span {
18-
color: #f5f5f5;
18+
color: #F5F5F5;
1919
}
2020
2121
.c0:hover {
2222
background-color: #888888;
23-
border-color: #c4c4c4;
23+
border-color: #888888;
2424
}
2525
2626
.c0:hover span {
27-
color: #ffffff;
27+
color: #FFFFFF;
2828
}
2929
3030
<button
@@ -40,8 +40,8 @@ exports[`<Button /> component renders with a DARK theme 1`] = `
4040

4141
exports[`<Button /> component renders with a LIGHT theme 1`] = `
4242
.c0 {
43-
background-color: #e8e8e8;
44-
border: 1px solid #cccccc;
43+
background-color: #F2E8F2;
44+
border: 1px solid #EDB8ED;
4545
border-radius: 4px;
4646
cursor: pointer;
4747
font: 400 1rem 'Karla','sans-serif';
@@ -53,16 +53,16 @@ exports[`<Button /> component renders with a LIGHT theme 1`] = `
5353
}
5454
5555
.c0 span {
56-
color: #707070;
56+
color: #6F256F;
5757
}
5858
5959
.c0:hover {
60-
background-color: #e22a23;
61-
border-color: #aaaaaa;
60+
background-color: #6F256F;
61+
border-color: #6F256F;
6262
}
6363
6464
.c0:hover span {
65-
color: #ffffff;
65+
color: #FFFFFF;
6666
}
6767
6868
<button

‎__tests__/components/__snapshots__/Header.test.js.snap‎

Lines changed: 41 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -2,49 +2,38 @@
22

33
exports[`<Header /> component renders with DARK theme 1`] = `
44
.c5 {
5-
background-color: #222222;
6-
border: 1px solid #484848;
5+
background-color: #484848;
6+
border: 1px solid #707070;
77
border-radius: 50%;
8-
color: #888888;
98
cursor: pointer;
109
height: 2.5rem;
1110
margin: 0 0 0 1rem;
1211
outline: 0;
1312
width: 2.5rem;
1413
}
1514
15+
.c5 svg,
16+
.c5 g {
17+
fill: #C8C8C8;
18+
}
19+
1620
.c5:hover {
17-
background-color: #484848;
21+
background-color: #707070;
1822
}
1923
2024
.c5:hover svg,
2125
.c5:hover g {
22-
fill: #ffffff;
26+
fill: #F5F5F5;
2327
}
2428
2529
.c5.active {
26-
background-color: #e22a23;
27-
border-color: #e22a23;
30+
background-color: #C8C8C8;
31+
border-color: #C8C8C8;
2832
}
2933
3034
.c5.active svg,
3135
.c5.active g {
32-
fill: #ffffff;
33-
}
34-
35-
.c5.light {
36-
background-color: #ffffff;
37-
border-color: #c4c4c4;
38-
}
39-
40-
.c5.light svg,
41-
.c5.light g {
42-
fill: #707070;
43-
}
44-
45-
.c5.light:hover svg,
46-
.c5.light:hover g {
47-
fill: #707070;
36+
fill: #484848;
4837
}
4938
5039
.c6 {
@@ -53,6 +42,7 @@ exports[`<Header /> component renders with DARK theme 1`] = `
5342
border-radius: 4px;
5443
background: #282828;
5544
font-size: 1.75rem;
45+
color: #E22A23;
5646
margin: 1rem 0 0;
5747
text-align: center;
5848
width: 100%;
@@ -92,8 +82,8 @@ exports[`<Header /> component renders with DARK theme 1`] = `
9282
}
9383
9484
.c3 {
95-
border-bottom: 1px solid transparent;
96-
color: #888888;
85+
border-bottom: 1px solid #C8C8C8;
86+
color: #C8C8C8;
9787
display: -webkit-inline-box;
9888
display: -webkit-inline-flex;
9989
display: -ms-inline-flexbox;
@@ -106,13 +96,12 @@ exports[`<Header /> component renders with DARK theme 1`] = `
10696
}
10797
10898
.c3:hover {
109-
border-bottom: 1px solid #f5f5f5;
110-
color: #f5f5f5;
99+
border-bottom: none;
111100
}
112101
113102
.c2 {
114-
border-bottom: 1px solid transparent;
115-
color: #888888;
103+
border-bottom: 1px solid #C8C8C8;
104+
color: #C8C8C8;
116105
display: -webkit-inline-box;
117106
display: -webkit-inline-flex;
118107
display: -ms-inline-flexbox;
@@ -122,7 +111,8 @@ exports[`<Header /> component renders with DARK theme 1`] = `
122111
padding-bottom: 1px;
123112
-webkit-text-decoration: none;
124113
text-decoration: none;
125-
color: #f5f5f5;
114+
border-bottom: none;
115+
color: #FFFFFF;
126116
}
127117
128118
@media (min-width:769px) {
@@ -162,7 +152,6 @@ exports[`<Header /> component renders with DARK theme 1`] = `
162152
onClick={[Function]}
163153
>
164154
<svg
165-
fill="#707070"
166155
height="100%"
167156
viewBox="0 0 24 23"
168157
width="100%"
@@ -189,7 +178,6 @@ exports[`<Header /> component renders with DARK theme 1`] = `
189178
onClick={[Function]}
190179
>
191180
<svg
192-
fill="#707070"
193181
height="100%"
194182
viewBox="0 0 24 23"
195183
width="100%"
@@ -217,57 +205,47 @@ exports[`<Header /> component renders with DARK theme 1`] = `
217205

218206
exports[`<Header /> component renders with LIGHT theme 1`] = `
219207
.c5 {
220-
background-color: #f4f4f4;
221-
border: 1px solid #e8e8e8;
208+
background-color: #F2E8F2;
209+
border: 1px solid #EDB8ED;
222210
border-radius: 50%;
223-
color: #e22a23;
224211
cursor: pointer;
225212
height: 2.5rem;
226213
margin: 0 0 0 1rem;
227214
outline: 0;
228215
width: 2.5rem;
229216
}
230217
218+
.c5 svg,
219+
.c5 g {
220+
fill: #A568A5;
221+
}
222+
231223
.c5:hover {
232-
background-color: #e8e8e8;
224+
background-color: #EDB8ED;
233225
}
234226
235227
.c5:hover svg,
236228
.c5:hover g {
237-
fill: #ffffff;
229+
fill: #6F256F;
238230
}
239231
240232
.c5.active {
241-
background-color: #e22a23;
242-
border-color: #e22a23;
233+
background-color: #A568A5;
234+
border-color: #6F256F;
243235
}
244236
245237
.c5.active svg,
246238
.c5.active g {
247-
fill: #ffffff;
248-
}
249-
250-
.c5.light {
251-
background-color: #ffffff;
252-
border-color: #aaaaaa;
253-
}
254-
255-
.c5.light svg,
256-
.c5.light g {
257-
fill: #cccccc;
258-
}
259-
260-
.c5.light:hover svg,
261-
.c5.light:hover g {
262-
fill: #cccccc;
239+
fill: #F2E8F2;
263240
}
264241
265242
.c6 {
266243
font-family: 'Karla',sans-serif;
267244
padding: 1.5rem;
268245
border-radius: 4px;
269-
background: #ededed;
246+
background: #F2E8F2;
270247
font-size: 1.75rem;
248+
color: #6F256F;
271249
margin: 1rem 0 0;
272250
text-align: center;
273251
width: 100%;
@@ -307,8 +285,8 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
307285
}
308286
309287
.c3 {
310-
border-bottom: 1px solid transparent;
311-
color: #e22a23;
288+
border-bottom: 1px solid #6F256F;
289+
color: #6F256F;
312290
display: -webkit-inline-box;
313291
display: -webkit-inline-flex;
314292
display: -ms-inline-flexbox;
@@ -321,13 +299,12 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
321299
}
322300
323301
.c3:hover {
324-
border-bottom: 1px solid #707070;
325-
color: #707070;
302+
border-bottom: none;
326303
}
327304
328305
.c2 {
329-
border-bottom: 1px solid transparent;
330-
color: #e22a23;
306+
border-bottom: 1px solid #6F256F;
307+
color: #6F256F;
331308
display: -webkit-inline-box;
332309
display: -webkit-inline-flex;
333310
display: -ms-inline-flexbox;
@@ -337,7 +314,8 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
337314
padding-bottom: 1px;
338315
-webkit-text-decoration: none;
339316
text-decoration: none;
340-
color: #707070;
317+
border-bottom: none;
318+
color: #EDB8ED;
341319
}
342320
343321
@media (min-width:769px) {
@@ -377,7 +355,6 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
377355
onClick={[Function]}
378356
>
379357
<svg
380-
fill="#707070"
381358
height="100%"
382359
viewBox="0 0 24 23"
383360
width="100%"
@@ -404,7 +381,6 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
404381
onClick={[Function]}
405382
>
406383
<svg
407-
fill="#707070"
408384
height="100%"
409385
viewBox="0 0 24 23"
410386
width="100%"

‎__tests__/components/__snapshots__/ProgressBar.test.js.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ exports[`<ProgressBar /> component matches the snapshot 1`] = `
2626
}
2727
2828
.c2 {
29-
background: #FF0000;
29+
background: #E22A23;
3030
display: -webkit-box;
3131
display: -webkit-flex;
3232
display: -ms-flexbox;

‎__tests__/components/__snapshots__/SVG.test.js.snap‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
exports[`<SVG /> component renders JS control 1`] = `
44
<div>
55
<svg
6-
fill="#707070"
76
height="100%"
87
viewBox="0 0 24 23"
98
width="100%"
@@ -30,7 +29,6 @@ exports[`<SVG /> component renders JS control 1`] = `
3029
exports[`<SVG /> component renders MODE control in DARK mode 1`] = `
3130
<div>
3231
<svg
33-
fill="#707070"
3432
height="100%"
3533
viewBox="0 0 24 23"
3634
width="100%"
@@ -51,7 +49,6 @@ exports[`<SVG /> component renders MODE control in DARK mode 1`] = `
5149
exports[`<SVG /> component renders MODE control in LIGHT mode 1`] = `
5250
<div>
5351
<svg
54-
fill="#707070"
5552
height="100%"
5653
viewBox="0 0 24 23"
5754
width="100%"

‎__tests__/components/__snapshots__/Title.test.js.snap‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ exports[`<Title /> component renders with a DARK theme 1`] = `
77
border-radius: 4px;
88
background: #282828;
99
font-size: 1.75rem;
10+
color: #E22A23;
1011
margin: 1rem 0 0;
1112
text-align: center;
1213
width: 100%;
@@ -24,8 +25,9 @@ exports[`<Title /> component renders with a LIGHT theme 1`] = `
2425
font-family: 'Karla',sans-serif;
2526
padding: 1.5rem;
2627
border-radius: 4px;
27-
background: #ededed;
28+
background: #F2E8F2;
2829
font-size: 1.75rem;
30+
color: #6F256F;
2931
margin: 1rem 0 0;
3032
text-align: center;
3133
width: 100%;

0 commit comments

Comments
 (0)