Skip to content

Commit d45e972

Browse files
dschodscho
committed
css: switch to using CSS custom properties
CSS custom properties are wildly popular, and have been supported by every major browser (except Internet Explorer, but you're not supposed to use it anymore, even Microsoft says so in https://blogs.windows.com/windowsexperience/2021/05/19/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge/ because Internet Explorer has been unsupported since June 15, 2022). There is a slight complication here, though: We use the `darken()` and `lighten()` functions extensively, and they are SASS preprocessor functions, i.e. they are evaluated at compile time, while the actual CSS custom properties are evaluated in the browser. Therefore, we need to move every `darken()`/`lighten()` call into an individual CSS custom property that is evaluated at compile time. This is the first step in preparation for supporting dark mode on https://git-scm.com/. Signed-off-by: Johannes Schindelin <[email protected]>
1 parent e45839e commit d45e972

14 files changed

+135
-110
lines changed

‎assets/sass/application.scss

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ pre {
3737
background-color: #fff;
3838
border: solid 1px #efeee6;
3939
border-radius: 3px;
40-
color: $orange;
40+
color: var(--orange);
4141
display: block;
4242
font-family: $fixed-width-font-family;
4343
font-variant-ligatures: none;
@@ -50,3 +50,30 @@ pre {
5050
.d-flex{
5151
display: flex;
5252
}
53+
54+
html {
55+
--orange: #{$orange};
56+
--orange-darker-5: #{darken($orange, 5%)};
57+
--blue: #{$blue};
58+
--font-color: #{$font-color};
59+
--aside-font-color: #{lighten($font-color, 20%)};
60+
--light-font-color: #{$light-font-color};
61+
--light-font-color-darker-10: #{darken($light-font-color, 10%)};
62+
--light-font-color-darker-25: #{darken($light-font-color, 25%)};
63+
--light-font-color-darker-35: #{darken($light-font-color, 35%)};
64+
--light-font-color-darker-55: #{darken($light-font-color, 55%)};
65+
--light-font-color-lighter-20: #{lighten($light-font-color, 20%)};
66+
--link-color: #{$link-color};
67+
--link-hover-color: #{lighten($link-color, 10%)};
68+
--fixed-width-font-color: #{$fixed-width-font-color};
69+
--base-border-color: #{$base-border-color};
70+
--base-border-color-darker-8: #{darken($base-border-color, 8%)};
71+
--base-border-color-lighter-10: #{lighten($base-border-color, 10%)};
72+
--callout-color: #{$callout-color};
73+
--highlight-bg-color: #{$highlight-bg-color};
74+
75+
--black-3: #{$black-3};
76+
--main-bg: #{$main-bg};
77+
--button-bg-color: #{$button-bg-color};
78+
--button-bg-hover-color: #{$button-bg-hover-color};
79+
}

‎assets/sass/book.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
padding-bottom: 20px !important;
1313
background-color: transparent !important;
1414
overflow: hidden;
15-
border: solid 1px lighten($base-border-color, 10%);
15+
border: solid 1px var(--base-border-color-lighter-10);
1616
}
1717

1818
#book-intro {
@@ -35,7 +35,7 @@
3535
.license {
3636
font-size: 11px;
3737
line-height: 1.3;
38-
color: $light-font-color;
38+
color: var(--light-font-color);
3939
}
4040

4141
a#open-book {
@@ -51,7 +51,7 @@
5151
display: none;
5252
padding-left: 22px;
5353
font-size: 12px;
54-
color: $light-font-color;
54+
color: var(--light-font-color);
5555
text-align: center;
5656
text-indent: 40px;
5757

@@ -73,7 +73,7 @@ ol.book-toc {
7373
}
7474

7575
h2 {
76-
color: $font-color;
76+
color: var(--font-color);
7777
}
7878

7979
a {
@@ -139,7 +139,7 @@ ol.book-toc {
139139

140140
&.active {
141141
font-weight: bold;
142-
color: $orange;
142+
color: var(--orange);
143143
}
144144
}
145145
}

‎assets/sass/downloads.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
p {
1010
font-size: 12px;
1111
line-height: 1.4;
12-
color: $light-font-color;
12+
color: var(--light-font-color);
1313
}
1414

1515
p + p {
@@ -55,7 +55,7 @@
5555

5656
a {
5757
display: block;
58-
color: $font-color;
58+
color: var(--font-color);
5959
text-align: center;
6060
background-repeat: no-repeat;
6161
background-position: 0 0;
@@ -74,7 +74,7 @@
7474
h3 {
7575
font-size: 18px;
7676
font-weight: bold;
77-
color: $orange;
77+
color: var(--orange);
7878
}
7979

8080
p {
@@ -89,7 +89,7 @@
8989
}
9090

9191
h3 {
92-
color: darken($orange, 5%);
92+
color: var(--orange-darker-5);
9393
}
9494
}
9595
}
@@ -99,7 +99,7 @@
9999
top: 8px;
100100
left: 12px;
101101
display: none;
102-
color: $orange;
102+
color: var(--orange);
103103
}
104104

105105
.downloading .hide {

‎assets/sass/errors.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ body {
55
font-size: $base-font-size;
66
line-height: $base-line-height;
77
font-family: $base-font-family;
8-
color: $font-color;
8+
color: var(--font-color);
99
background: #f0efe7 url($baseurl + "images/bg/body.jpg");
1010
}
1111

@@ -43,9 +43,9 @@ nav ul {
4343
li {
4444
a {
4545
display: block;
46-
color: $orange;
46+
color: var(--orange);
4747
&:hover {
48-
color: darken($orange, 5%);
48+
color: var(--orange-darker-5);
4949
}
5050
}
5151
}

‎assets/sass/forms.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ input.inactive {
1414
}
1515

1616
input.active {
17-
color: $font-color !important;
17+
color: var(--font-color) !important;
1818
}
1919

2020
input, textarea {
@@ -38,7 +38,7 @@ form#search {
3838
width: 262px;
3939
padding-left: 32px;
4040
@include background-image-2x($baseurl + "images/icons/search", 17px, 17px, 10px 50%);
41-
background-color: $main-bg !important;
41+
background-color: var(--main-bg) !important;
4242
border: solid 1px #ceccc5;
4343
@include border-radius(20px);
4444
@include box-shadow(inset 0 1px 4px #ddd);
@@ -50,7 +50,7 @@ form#search {
5050
margin-top: 4px;
5151
margin-bottom: 2px;
5252
line-height: 1em;
53-
color: $font-color;
53+
color: var(--font-color);
5454
background-color: transparent;
5555
border: 0;
5656
}

‎assets/sass/front-page.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
float: left;
1010
width: 618px;
1111
margin-bottom: 24px;
12-
border-right: solid 1px $base-border-color;
12+
border-right: solid 1px var(--base-border-color);
1313
}
1414
}
1515

@@ -42,7 +42,7 @@
4242
display: block;
4343
height: 86px;
4444
padding-left: 90px;
45-
color: $font-color;
45+
color: var(--font-color);
4646
background-repeat: no-repeat;
4747
background-position: 0 0;
4848
transition-duration: 0.3s;
@@ -60,7 +60,7 @@
6060
h3 {
6161
font-size: 18px;
6262
font-weight: bold;
63-
color: $orange;
63+
color: var(--orange);
6464
}
6565

6666
p {
@@ -75,7 +75,7 @@
7575
}
7676

7777
h3 {
78-
color: darken($orange, 5%);
78+
color: var(--orange-darker-5);
7979
}
8080
}
8181
}
@@ -84,7 +84,7 @@
8484
float: left;
8585
width: 590px;
8686
padding-top: 20px;
87-
border-top: solid 1px $base-border-color;
87+
border-top: solid 1px var(--base-border-color);
8888

8989
img {
9090
float: left;
@@ -202,7 +202,7 @@ $monitor-height: 271px;
202202
#companies-projects {
203203
padding-top: 20px;
204204
clear: both;
205-
border-top: solid 1px $base-border-color;
205+
border-top: solid 1px var(--base-border-color);
206206

207207
ul {
208208
@extend .unstyled !optional;
@@ -394,7 +394,7 @@ a.icon {
394394
}
395395
}
396396
#front-downloads {
397-
border-bottom: 1px solid $base-border-color;
397+
border-bottom: 1px solid var(--base-border-color);
398398
margin-bottom: 2rem;
399399
padding-bottom: 1rem;
400400
.monitor, table {

‎assets/sass/layout.scss

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ body {
77
font-family: $base-font-family;
88
font-size: $base-font-size;
99
line-height: $base-line-height;
10-
color: $font-color;
10+
color: var(--font-color);
1111
background: #f0efe7 url($baseurl + "images/bg/body.jpg");
1212
}
1313

@@ -40,7 +40,7 @@ aside {
4040
#main {
4141
padding: 22px;
4242
margin-bottom: 35px;
43-
background-color: $main-bg;
43+
background-color: var(--main-bg);
4444
border: solid 1px #e2e0d8;
4545
@include border-radius(5px);
4646

@@ -59,7 +59,7 @@ aside {
5959
}
6060

6161
.callout {
62-
background-color: $callout-color;
62+
background-color: var(--callout-color);
6363
@include border-radius(3px);
6464
padding: 8px 14px 4px;
6565
margin-bottom: 1.4em;
@@ -122,7 +122,7 @@ header {
122122
margin-top: 1px;
123123
font-size: 24px;
124124
line-height: 24px;
125-
color: $light-font-color;
125+
color: var(--light-font-color);
126126

127127
em {
128128
letter-spacing: 1px;
@@ -145,7 +145,7 @@ aside nav ul {
145145
color: #413932;
146146

147147
&.active, &:hover {
148-
color: $orange;
148+
color: var(--orange);
149149
}
150150
}
151151

@@ -208,7 +208,7 @@ p.center {
208208
p {
209209
font-size: 12px;
210210
line-height: 1.4;
211-
color: $light-font-color;
211+
color: var(--light-font-color);
212212
}
213213

214214
p + p {
@@ -222,12 +222,12 @@ p.center {
222222
}
223223

224224
.callout.downloading {
225-
background: $callout-color url($baseurl + "images/icons/download.png") 24px 24px no-repeat;
225+
background: var(--callout-color) url($baseurl + "images/icons/download.png") 24px 24px no-repeat;
226226
padding: 20px 30px 20px 100px !important;
227227

228228
h3 {
229229
font-size: 18px;
230-
color: $orange;
230+
color: var(--orange);
231231
}
232232

233233
p {
@@ -240,7 +240,7 @@ p.center {
240240
margin-bottom: 0 !important;
241241
font-size: 12px;
242242
line-height: 1.4;
243-
color: $light-font-color;
243+
color: var(--light-font-color);
244244
}
245245
}
246246

@@ -301,7 +301,7 @@ a.dropdown-trigger {
301301
background-color: #fff !important;
302302
@include border-top-left-radius(3px);
303303
@include border-top-right-radius(3px);
304-
border: solid 1px darken($base-border-color, 8%);
304+
border: solid 1px var(--base-border-color-darker-8);
305305
border-bottom: 0;
306306
}
307307
}
@@ -311,7 +311,7 @@ a.dropdown-trigger {
311311
z-index: 199;
312312
display: none;
313313
background-color: #fff;
314-
border: solid 1px darken($base-border-color, 8%);
314+
border: solid 1px var(--base-border-color-darker-8);
315315
@include border-radius(3px);
316316
@include box-shadow(0 1px 2px #ccc);
317317

@@ -332,14 +332,14 @@ footer {
332332
@include clearfix;
333333
font-size: 12px;
334334
line-height: $base-line-height * 0.7;
335-
color: $light-font-color;
336-
border-top: solid 1px $base-border-color;
335+
color: var(--light-font-color);
336+
border-top: solid 1px var(--base-border-color);
337337

338338
a {
339-
color: darken($light-font-color, 35%);
339+
color: var(--light-font-color-darker-35);
340340

341341
&:hover {
342-
color: darken($light-font-color, 55%);
342+
color: var(--light-font-color-darker-55);
343343
}
344344
}
345345

@@ -385,15 +385,15 @@ table.benchmarks {
385385
@include border-radius(50px);
386386
display: none;
387387
position: fixed;
388-
background-color: rgba(223, 221, 213, 0.33);
388+
background-color: var(--button-bg-color);
389389
right: 20px;
390390
bottom: 6.25rem;
391391
padding: 0.8rem;
392392
height: 20px;
393393
transition: background-color 0.2s;
394394
width: 20px;
395395
&:hover{
396-
background-color: rgba(250, 250, 250, 0.9);
396+
background-color: var(--button-bg-hover-color);
397397
@include box-shadow(2px);
398398
&::before {
399399
@include center-transformX;
@@ -402,7 +402,7 @@ table.benchmarks {
402402
color: var(--color-neutral-emphasis-plus);
403403
content: "";
404404
border: 6px solid transparent;
405-
border-color:$black-3 transparent transparent;
405+
border-color:var(--black-3) transparent transparent;
406406
top: -0.55rem;
407407
position: absolute;
408408
}
@@ -415,8 +415,8 @@ table.benchmarks {
415415
word-wrap: break-word;
416416
white-space: pre;
417417
padding: .5em .75em;
418-
color:$callout-color;
419-
background-color:$black-3;
418+
color:var(--callout-color);
419+
background-color:var(--black-3);
420420
font: normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
421421
}
422422
}

0 commit comments

Comments
 (0)