Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a989220

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /