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]>

Author: dscho

assets/sass/application.scss

@@ -36,7 +36,7 @@ pre {
   background-color: #fff;
   border: solid 1px #efeee6;
   border-radius: 3px;
-  color: $orange;
+  color: var(--orange);
   display: block;
   font-family: $fixed-width-font-family;
   font-variant-ligatures: none;
@@ -49,3 +49,27 @@ pre {
 .d-flex{
   display: flex;
 }
+
+html {
+  --orange:                       #{$orange};
+  --orange-darker-5:              #{darken($orange, 5%)};
+  --blue:                         #{$blue};
+  --font-color:                   #{$font-color};
+  --font-color-lighter-20:        #{lighten($font-color, 20%)};
+  --light-font-color:             #{$light-font-color};
+  --light-font-color-darker-10:   #{darken($light-font-color, 10%)};
+  --light-font-color-darker-25:   #{darken($light-font-color, 25%)};
+  --light-font-color-darker-35:   #{darken($light-font-color, 35%)};
+  --light-font-color-darker-55:   #{darken($light-font-color, 55%)};
+  --light-font-color-lighter-20:  #{lighten($light-font-color, 20%)};
+  --link-color:                   #{$link-color};
+  --link-hover-color:             #{lighten($link-color, 10%)};
+  --fixed-width-font-color:       #{$fixed-width-font-color};
+  --base-border-color:            #{$base-border-color};
+  --base-border-color-darker-8:   #{darken($base-border-color, 8%)};
+  --base-border-color-lighter-10: #{lighten($base-border-color, 10%)};
+  --callout-color:                #{$callout-color};
+
+  --black-3:                      #{$black-3};
+  --main-bg:                      #{$main-bg};
+}

assets/sass/book.scss

@@ -13,7 +13,7 @@
   padding-bottom: 20px !important;
   background-color: transparent !important;
   overflow: hidden;
-  border: solid 1px lighten($base-border-color, 10%);
+  border: solid 1px var(--base-border-color-lighter-10);
 }
 
 #book-intro {
@@ -36,7 +36,7 @@
   .license {
     font-size: 11px;
     line-height: 1.3;
-    color: $light-font-color;
+    color: var(--light-font-color);
   }
 
   a#open-book {
@@ -52,7 +52,7 @@
   display: none;
   padding-left: 22px;
   font-size: 12px;
-  color: $light-font-color;
+  color: var(--light-font-color);
   text-align: center;
   text-indent: 40px;
 
@@ -74,7 +74,7 @@ ol.book-toc {
   }
 
   h2 {
-    color: $font-color;
+    color: var(--font-color);
   }
 
   a {
@@ -139,7 +139,7 @@ ol.book-toc {
 
           &.active {
             font-weight: bold;
-            color: $orange;
+            color: var(--orange);
           }
         }
       }

assets/sass/downloads.scss

@@ -10,7 +10,7 @@
   p {
     font-size: 12px;
     line-height: 1.4;
-    color: $light-font-color;
+    color: var(--light-font-color);
   }
 
   p + p {
@@ -56,7 +56,7 @@
 
   a {
     display: block;
-    color: $font-color;
+    color: var(--font-color);
     text-align: center;
     background-repeat: no-repeat;
     background-position: 0 0;
@@ -75,7 +75,7 @@
     h3 {
       font-size: 18px;
       font-weight: bold;
-      color: $orange;
+      color: var(--orange);
     }
 
     p {
@@ -90,7 +90,7 @@
     }
 
     h3 {
-      color: darken($orange, 5%);
+      color: var(--orange-darker-5);
     }
   }
 }
@@ -100,7 +100,7 @@
   top: 8px;
   left: 12px;
   display: none;
-  color: $orange;
+  color: var(--orange);
 }
 
 .downloading .hide {

assets/sass/errors.scss

@@ -5,7 +5,7 @@ body {
   font-size: $base-font-size;
   line-height: $base-line-height;
   font-family: $base-font-family;
-  color: $font-color;
+  color: var(--font-color);
   background: #f0efe7 url($baseurl + "images/bg/body.jpg");
 }
 
@@ -43,9 +43,9 @@ nav ul {
     li {
       a {
         display: block;
-        color: $orange;
+        color: var(--orange);
         &:hover {
-          color: darken($orange, 5%);
+          color: var(--orange-darker-5);
         }
       }
     }

assets/sass/forms.scss

@@ -15,7 +15,7 @@ input.inactive {
 }
 
 input.active {
-  color: $font-color !important;
+  color: var(--font-color) !important;
 }
 
 input, textarea {
@@ -39,7 +39,7 @@ form#search {
   width: 262px;
   padding-left: 32px;
   @include background-image-2x($baseurl + "images/icons/search", 17px, 17px, 10px 50%);
-  background-color: $main-bg !important;
+  background-color: var(--main-bg) !important;
   border: solid 1px #ceccc5;
   @include border-radius(20px);
   @include box-shadow(inset 0 1px 4px #ddd);
@@ -51,7 +51,7 @@ form#search {
     margin-top: 4px;
     margin-bottom: 2px;
     line-height: 1em;
-    color: $font-color;
+    color: var(--font-color);
     background-color: transparent;
     border: 0;
   }

assets/sass/front-page.scss

@@ -10,7 +10,7 @@
     float: left;
     width: 618px;
     margin-bottom: 24px;
-    border-right: solid 1px $base-border-color;
+    border-right: solid 1px var(--base-border-color);
   }
 }
 
@@ -43,7 +43,7 @@
     display: block;
     height: 86px;
     padding-left: 90px;
-    color: $font-color;
+    color: var(--font-color);
     background-repeat: no-repeat;
     background-position: 0 0;
     transition-duration: 0.3s;
@@ -61,7 +61,7 @@
     h3 {
       font-size: 18px;
       font-weight: bold;
-      color: $orange;
+      color: var(--orange);
     }
 
     p {
@@ -76,7 +76,7 @@
     }
 
     h3 {
-      color: darken($orange, 5%);
+      color: var(--orange-darker-5);
     }
   }
 }
@@ -85,7 +85,7 @@
   float: left;
   width: 590px;
   padding-top: 20px;
-  border-top: solid 1px $base-border-color;
+  border-top: solid 1px var(--base-border-color);
 
   img {
     float: left;
@@ -203,7 +203,7 @@ $monitor-height: 271px;
 #companies-projects {
   padding-top: 20px;
   clear: both;
-  border-top: solid 1px $base-border-color;
+  border-top: solid 1px var(--base-border-color);
 
   ul {
     @extend .unstyled !optional;
@@ -395,7 +395,7 @@ a.icon {
       }
     }
     #front-downloads {
-      border-bottom: 1px solid $base-border-color;
+      border-bottom: 1px solid var(--base-border-color);
       margin-bottom: 2rem;
       padding-bottom: 1rem;
       .monitor, table {

assets/sass/layout.scss

@@ -7,7 +7,7 @@ body {
   font-family: $base-font-family;
   font-size: $base-font-size;
   line-height: $base-line-height;
-  color: $font-color;
+  color: var(--font-color);
   background: #f0efe7 url($baseurl + "images/bg/body.jpg");
 }
 
@@ -40,7 +40,7 @@ aside {
 #main {
   padding: 22px;
   margin-bottom: 35px;
-  background-color: $main-bg;
+  background-color: var(--main-bg);
   border: solid 1px #e2e0d8;
   @include border-radius(5px);
 
@@ -59,7 +59,7 @@ aside {
   }
 
   .callout {
-    background-color: $callout-color;
+    background-color: var(--callout-color);
     @include border-radius(3px);
     padding: 8px 14px 4px;
     margin-bottom: 1.4em;
@@ -122,7 +122,7 @@ header {
     margin-top: 1px;
     font-size: 24px;
     line-height: 24px;
-    color: $light-font-color;
+    color: var(--light-font-color);
 
     em {
       letter-spacing: 1px;
@@ -145,7 +145,7 @@ aside nav ul {
       color: #413932;
 
       &.active, &:hover {
-        color: $orange;
+        color: var(--orange);
       }
     }
 
@@ -208,7 +208,7 @@ p.center {
   p {
     font-size: 12px;
     line-height: 1.4;
-    color: $light-font-color;
+    color: var(--light-font-color);
   }
 
   p + p {
@@ -222,12 +222,12 @@ p.center {
 }
 
 .callout.downloading {
-  background: $callout-color url($baseurl + "images/icons/download.png") 24px 24px no-repeat;
+  background: var(--callout-color) url($baseurl + "images/icons/download.png") 24px 24px no-repeat;
   padding: 20px 30px 20px 100px !important;
 
   h3 {
     font-size: 18px;
-    color: $orange;
+    color: var(--orange);
   }
 
   p {
@@ -240,7 +240,7 @@ p.center {
     margin-bottom: 0 !important;
     font-size: 12px;
     line-height: 1.4;
-    color: $light-font-color;
+    color: var(--light-font-color);
   }
 }
 
@@ -301,7 +301,7 @@ a.dropdown-trigger {
     background-color: #fff !important;
     @include border-top-left-radius(3px);
     @include border-top-right-radius(3px);
-    border: solid 1px darken($base-border-color, 8%);
+    border: solid 1px var(--base-border-color-darker-8);
     border-bottom: 0;
   }
 }
@@ -311,7 +311,7 @@ a.dropdown-trigger {
   z-index: 199;
   display: none;
   background-color: #fff;
-  border: solid 1px darken($base-border-color, 8%);
+  border: solid 1px var(--base-border-color-darker-8);
   @include border-radius(3px);
   @include box-shadow(0 1px 2px #ccc);
 
@@ -332,14 +332,14 @@ footer {
   @include clearfix;
   font-size: 12px;
   line-height: $base-line-height * 0.7;
-  color: $light-font-color;
-  border-top: solid 1px $base-border-color;
+  color: var(--light-font-color);
+  border-top: solid 1px var(--base-border-color);
 
   a {
-    color: darken($light-font-color, 35%);
+    color: var(--light-font-color-darker-35);
 
     &:hover {
-      color: darken($light-font-color, 55%);
+      color: var(--light-font-color-darker-55);
     }
   }
 
@@ -402,7 +402,7 @@ table.benchmarks {
       color: var(--color-neutral-emphasis-plus);
       content: "";
       border: 6px solid transparent;
-      border-color:$black-3 transparent transparent;
+      border-color:var(--black-3) transparent transparent;
       top: -0.55rem;
       position: absolute;
     }
@@ -415,8 +415,8 @@ table.benchmarks {
       word-wrap: break-word;
       white-space: pre;
       padding: .5em .75em;
-      color:$callout-color;
-      background-color:$black-3;
+      color:var(--callout-color);
+      background-color:var(--black-3);
       font: normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
     }
   }