Skip to content

Commit 15508f7

Browse files
hellcphellcp
committed
Replace bg, fg and border colours with css variables
Signed-off-by: Stasia Michalska <[email protected]>
1 parent 03b3566 commit 15508f7

21 files changed

+128
-90
lines changed

‎source/_sass/app.scss‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,8 @@ html {
4040

4141
body {
4242
padding-top: $header-height;
43-
background-color: $gray-01;
43+
background-color: var(--dev-bg-primary);
44+
color: var(--dev-fg-primary);
4445
}
4546

4647
.anchor[id],
@@ -59,17 +60,17 @@ body {
5960
}
6061

6162
code {
62-
background-color: $white;
63+
background-color: var(--dev-bg-secondary);
6364
border-radius: 2px;
64-
color: color.adjust($base-font-color, $lightness: -20%, $space: hsl);
65+
color: var(--dev-fg-tertiary);
6566
font-family: $monospace;
6667
font-size: $base-font-size;
6768
padding: 2px 4px;
6869
box-shadow: inset 0 0 2px #bbb;
6970
}
7071

7172
a code {
72-
color: color.adjust($base-link-color, $lightness: -10%, $space: hsl);
73+
color: var(--dev-fg-tertiary);
7374
}
7475

7576
.container {
@@ -238,7 +239,7 @@ a code {
238239
}
239240

240241
.modal-content {
241-
background-color: $gray-01;
242+
background-color: var(--dev-bg-primary);
242243
}
243244

244245
.header--skinny {

‎source/_sass/base/_typography.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ a {
7676
}
7777

7878
hr {
79-
border-bottom: 1px solid $base-border-color;
79+
border-bottom: 1px solid var(--dev-fg-primary);
8080
border-left: none;
8181
border-right: none;
8282
border-top: none;
@@ -89,14 +89,14 @@ img {
8989
}
9090

9191
blockquote {
92-
border-left: 2px solid $base-border-color;
93-
color: color.adjust($base-font-color, $lightness: 15%, $space: hsl);
92+
border-left: 2px solid var(--dev-fg-primary);
93+
color: var(--dev-fg-secondary);
9494
margin: $base-line-height 0;
9595
padding-left: $base-line-height * 0.5;
9696
}
9797

9898
cite {
99-
color: color.adjust($base-font-color, $lightness: 25%, $space: hsl);
99+
color: var(--dev-fg-secondary);
100100
font-style: italic;
101101

102102
&:before {

‎source/_sass/base/_variables.scss‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -31,30 +31,28 @@ $header-line-height: 1.3;
3131
$base-border-radius: em(3);
3232

3333
// Background Color
34-
$base-background-color: #fff;
34+
$base-background-color: var(--dev-bg-primary);
3535

3636
// Font Colors
37-
$base-font-color: $gray-08;
37+
$base-font-color: var(--dev-fg-primary);
38+
$base-text-color: $base-font-color;
3839
$base-accent-color: $lightblue;
3940

4041
// Link Colors
41-
$base-link-color: $base-accent-color;
42-
$hover-link-color: color.adjust($base-accent-color, $lightness: -15%, $space: hsl);
42+
$base-link-color: var(--dev-link);
43+
$hover-link-color: var(--dev-link-hover);
4344
$base-button-color: $base-link-color;
4445
$hover-button-color: $hover-link-color;
4546

46-
// Border color
47-
$base-border-color: $gray-08;
48-
4947
// Flash Colors
5048
$alert-color: $yellow;
5149
$error-color: $red;
5250
$notice-color: $yellow;
5351
$success-color: $green;
5452

5553
// Forms
56-
$form-border-color: $base-border-color;
57-
$form-border-color-hover: color.adjust($base-border-color, $lightness: -10%, $space: hsl);
54+
$form-border-color: var(--dev-border-primary);
55+
$form-border-color-hover: var(--dev-border-tertiary);
5856
$form-border-color-focus: $base-accent-color;
5957
$form-border-radius: $base-border-radius;
6058
$form-box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);

‎source/_sass/colors.scss‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ $gray-02: #eee;
5959
$gray-03: #e5e4e4;
6060
$gray-04: #d9d9d9;
6161
$gray-05: #bebebe;
62-
$gray-06: ;
62+
$gray-06: #beef69;
6363
$gray-07: #666;
6464
$gray-08: #444;
6565
$gray-09: #272822;
@@ -87,3 +87,41 @@ $modifier-colors: $color-guides, $color-docs, $color-community, $color-more,
8787
$color-blog;
8888

8989
$modifier-colors-fg: $white $white $white $white $white $white $white $white;
90+
91+
@media all {
92+
:root {
93+
/* Dark Mode Support */
94+
color-scheme: light dark;
95+
96+
--dev-bg-primary: #{$gray-01};
97+
--dev-bg-secondary: #{$white};
98+
--dev-bg-tertiary: #{$gray-03};
99+
--dev-bg-prominent: #{$gray-02};
100+
--dev-fg-primary: #{$gray-08};
101+
--dev-fg-secondary: #{$gray-07};
102+
--dev-fg-tertiary: #{$gray-09};
103+
--dev-fg-muted: #{$gray-05};
104+
--dev-border-primary: #{$gray-04};
105+
--dev-border-secondary: #{$gray-03};
106+
--dev-border-tertiary: #{$gray-05};
107+
--dev-link: #{$pebble-blue};
108+
--dev-link-hover: #{$pebble-blue-alt};
109+
}
110+
}
111+
112+
@media screen and (prefers-color-scheme: dark) {
113+
:root {
114+
--dev-bg-primary: #{$gray-10};
115+
--dev-bg-secondary: #{$gray-09};
116+
--dev-bg-tertiary: #{$black};
117+
--dev-bg-prominent: #{$gray-08};
118+
--dev-fg-primary: #{$white};
119+
--dev-fg-secondary: #{$breakfast-room-white};
120+
--dev-fg-tertiary: #{$gray-01};
121+
--dev-border-primary: #{$black};
122+
--dev-border-secondary: #{$gray-10};
123+
--dev-border-tertiary: #{$gray-09};
124+
--dev-link: #{color.adjust(#16b5d8, $lightness: 20%, $space: hsl)};
125+
--dev-link-hover: #{$pebble-blue};
126+
}
127+
}

‎source/_sass/elements/bigbox.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,10 +99,12 @@
9999

100100
.bigbox--lightgray {
101101
background-color: $gray-02;
102+
color: $gray-08;
102103
}
103104

104105
.bigbox--gray {
105106
background-color: $gray-03;
107+
color: $gray-08;
106108
}
107109

108110
.bigbox--darkgray {

‎source/_sass/elements/form.scss‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,11 @@
2424
input,
2525
select,
2626
textarea {
27-
background-color: white;
28-
border: 1px solid $gray-04;
27+
background-color: var(--dev-bg-secondary);
28+
border: 1px solid var(--dev-border-primary);
2929
border-left: none;
3030
border-radius: 0 5px 5px 0;
31-
color: $gray-08;
31+
color: var(--dev-fg-primary);
3232
display: table-cell;
3333
font-family: $sans-serif;
3434
font-size: 15px;
@@ -57,11 +57,11 @@
5757
}
5858

5959
.select-style {
60-
background-color: white;
60+
background-color: var(--dev-bg-secondary);
6161
border-radius: 0 5px 5px 0;
62-
border: 1px solid $gray-04;
62+
border: 1px solid var(--dev-border-primary);
6363
border-left-width: 0;
64-
color: color.adjust(#444, $alpha: -0.5);
64+
color: var(--dev-fg-secondary);
6565
display: table-cell;
6666
font-family: $sans-serif;
6767
font-size: 15px;
@@ -91,11 +91,11 @@
9191
}
9292

9393
label {
94-
background-color: #fff;
95-
border: 1px solid $gray-04;
94+
background-color: var(--dev-bg-secondary);
95+
border: 1px solid var(--dev-border-primary);
9696
border-right: none;
9797
border-radius: 5px 0 0 5px;
98-
color: #111;
98+
color: var(--dev-fg-tertiary);
9999
display: table-cell;
100100
font-size: 14px;
101101
font-weight: 400;

‎source/_sass/elements/gray-box.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
*/
1616

1717
.gray-box {
18-
background-color: $gray-02;
18+
background-color: var(--dev-bg-prominent);
1919
border-radius: $base-border-radius;
2020
margin-bottom: 1em;
2121
overflow-x: hidden;
@@ -38,15 +38,15 @@
3838
}
3939

4040
h3 {
41-
color: $gray-08;
41+
color: var(--dev-fg-primary);
4242
font-size: 1.3em;
4343
font-weight: 600;
4444
text-transform: uppercase;
4545

4646
a,
4747
a:hover,
4848
a:active {
49-
color: $gray-08;
49+
color: var(--dev-fg-primary);
5050
}
5151

5252
a:hover,
@@ -61,7 +61,7 @@
6161
}
6262

6363
.white-box {
64-
background-color: $white;
64+
background-color: var(--dev-bg-secondary);
6565
border-radius: $base-border-radius;
6666
margin-bottom: 1em;
6767
padding: 0.5em;

‎source/_sass/elements/inline-list.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ ul.inline-list {
3131
}
3232

3333
.inline-list--piped li::after {
34-
color: color.adjust($base-font-color, $lightness: 30%, $space: hsl);
34+
color: var(--dev-fg-secondary);
3535
content: ' | ';
3636
display: inline;
3737
}
@@ -41,7 +41,7 @@ ul.inline-list {
4141
}
4242

4343
.inline-list--dashed li::after {
44-
color: color.adjust($base-font-color, $lightness: 40%, $space: hsl);
44+
color: var(--dev-fg-secondary);
4545
content: ' — ';
4646
display: inline;
4747
}

‎source/_sass/elements/markdown.scss‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,10 @@
2626
@extend %default-ol;
2727
}
2828

29-
$table-border-color: $gray-04;
29+
$table-border-color: var(--dev-border-primary);
3030
$table-border: 1px solid $table-border-color;
31-
$table-background: $white;
3231
$table-header-background: $gray-08;
3332
$table-header-color: $white;
34-
$table-hover-color: color.adjust($table-background, $lightness: -5%, $space: hsl);
35-
$table-stripe-color: color.adjust($table-background, $lightness: -4%, $space: hsl);
36-
$table-stripe-color-hover: color.adjust($table-stripe-color, $lightness: -5%, $space: hsl);
3733
$table-padding: 0.5em;
3834

3935
table {
@@ -46,7 +42,7 @@
4642
}
4743

4844
tbody {
49-
background-color: $table-background;
45+
background-color: var(--dev-bg-secondary);
5046

5147
td {
5248
border-bottom: 0;
@@ -57,14 +53,14 @@
5753

5854
tr:hover > td,
5955
tr:hover > th {
60-
background-color: $table-hover-color;
56+
background-color: var(--dev-bg-prominent);
6157
}
6258

6359
tr:nth-child(even) {
64-
background-color: $table-stripe-color;
60+
background-color: var(--dev-bg-primary);
6561

6662
&:hover > td {
67-
background-color: $table-stripe-color-hover;
63+
background-color: var(--dev-bg-tertiary);
6864
}
6965
}
7066
}

‎source/_sass/elements/pagination.scss‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,10 @@
2222
}
2323

2424
a {
25-
border: 1px solid $gray-04;
25+
border: 1px solid var(--dev-border-secondary);
2626
border-radius: $base-border-radius;
27-
color: $gray-08;
27+
color: var(--dev-fg-primary);
28+
background-color: var(--dev-bg-secondary);
2829
display: block;
2930
padding: 0.5rem 1rem;
3031

@@ -37,7 +38,7 @@
3738

3839
.active a {
3940
background-color: $base-link-color;
40-
color: $white;
41+
color: var(--dev-border-primary);
4142
font-weight: bold;
4243
border-color: $base-link-color;
4344
}

0 commit comments

Comments
 (0)