From ca50ed82007bda76285c0057a98e93d7f2b65156 Mon Sep 17 00:00:00 2001
From: Benjamin Staneck <staneck@gmail.com>
Date: Tue, 25 Feb 2020 15:04:58 +0100
Subject: [PATCH] Refactored CSS to use CSS Variables (#1409)

* First stab at using CSS variables

* Port color-black to CSS variables and fix SCSS compile

* add hex2rgb helper function

* Port md-color-white to CSS variables

* Port code color and background

* Fix a rebase mistake

* Fix lint

* adopt upstream changes

Co-authored-by: Martin Donath <squidfunk@users.noreply.github.com>
---
 material/assets/manifest.json                 |  2 +-
 src/assets/stylesheets/_config.scss           | 56 +++++++++++++++++++
 src/assets/stylesheets/app-palette.scss       | 44 +++++++--------
 src/assets/stylesheets/base/_typeset.scss     | 46 +++++++--------
 .../stylesheets/extensions/_codehilite.scss   |  6 +-
 .../stylesheets/extensions/_footnotes.scss    | 10 ++--
 .../stylesheets/extensions/_permalinks.scss   |  4 +-
 .../extensions/pymdown/_details.scss          |  2 +-
 .../extensions/pymdown/_tabbed.scss           |  8 +--
 .../extensions/pymdown/_tasklist.scss         |  2 +-
 src/assets/stylesheets/layout/_announce.scss  |  4 +-
 src/assets/stylesheets/layout/_base.scss      | 10 ++--
 src/assets/stylesheets/layout/_clipboard.scss |  6 +-
 src/assets/stylesheets/layout/_content.scss   |  2 +-
 src/assets/stylesheets/layout/_dialog.scss    |  4 +-
 src/assets/stylesheets/layout/_footer.scss    | 16 +++---
 src/assets/stylesheets/layout/_header.scss    |  6 +-
 src/assets/stylesheets/layout/_hero.scss      |  4 +-
 src/assets/stylesheets/layout/_nav.scss       | 26 ++++-----
 src/assets/stylesheets/layout/_search.scss    | 44 +++++++--------
 src/assets/stylesheets/layout/_sidebar.scss   |  6 +-
 src/assets/stylesheets/layout/_tabs.scss      |  4 +-
 22 files changed, 184 insertions(+), 128 deletions(-)

diff --git a/material/assets/manifest.json b/material/assets/manifest.json
index 558878d77..5cf96501b 100644
--- a/material/assets/manifest.json
+++ b/material/assets/manifest.json
@@ -5,4 +5,4 @@
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.926ffd9e.min.js.map",
   "assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.8adb38b9.min.css",
   "assets/stylesheets/app.scss": "assets/stylesheets/app.d1c09be7.min.css"
-}
\ No newline at end of file
+}
diff --git a/src/assets/stylesheets/_config.scss b/src/assets/stylesheets/_config.scss
index 08a6d3baf..9aca8887a 100644
--- a/src/assets/stylesheets/_config.scss
+++ b/src/assets/stylesheets/_config.scss
@@ -49,6 +49,10 @@ $break-devices: (
   )
 );
 
+@function hex2rgb($hex) {
+  @return red($hex), green($hex), blue($hex);
+}
+
 // ----------------------------------------------------------------------------
 // Variables: base colors
 // ----------------------------------------------------------------------------
@@ -71,6 +75,58 @@ $md-color-white--lighter:             hsla(0, 0%, 100%, 0.3) !default;
 $md-color-white--lightest:            hsla(0, 0%, 100%, 0.12) !default;
 $md-color-white--transparent:         hsla(0, 0%, 100%, 0) !default;
 
+// ----------------------------------------------------------------------------
+// CSS Variables: base colors
+// ----------------------------------------------------------------------------
+
+:root {
+  // Primary and accent colors
+  --md-color-primary:                         #{$md-color-primary};
+  --md-color-primary-values:                  #{hex2rgb($md-color-primary)};
+  --md-color-accent:                          #{$md-color-accent};
+  --md-color-accent-values:                   #{hex2rgb($md-color-accent)};
+
+  // Shades of black
+  --md-color-text:                            #{$md-color-black};
+  --md-color-text-values:                     0, 0, 0;
+  --md-color-text--light:                     #{$md-color-black--light};
+  --md-color-text--lighter:                   #{$md-color-black--lighter};
+  --md-color-text--lightest:                  #{$md-color-black--lightest};
+  --md-color-text--transparent:               #{$md-color-black--transparent};
+
+  // Shades of white
+  --md-color-background:                      #{$md-color-white};
+  --md-color-background--light:               #{$md-color-white--light};
+  --md-color-background--lighter:             #{$md-color-white--lighter};
+  --md-color-background--lightest:            #{$md-color-white--lightest};
+  --md-color-background--transparent:         #{$md-color-white--transparent};
+
+  // Code blocks
+  --md-code-background:                       hsla(0, 0%, 92.5%, 0.5);
+  --md-code-color:                            #37474F;
+}
+
+:root.dark-mode {
+    // Primary and accent colors
+  --md-color-primary:                         #{$md-color-primary};
+  --md-color-accent:                          #{$md-color-accent};
+
+  // Shades of white
+  --md-color-background:                      #{$md-color-white};
+  --md-color-background--light:               #{$md-color-white--light};
+  --md-color-background--lighter:             #{$md-color-white--lighter};
+  --md-color-background--lightest:            #{$md-color-white--lightest};
+  --md-color-background--transparent:         #{$md-color-white--transparent};
+
+  // Shades of black
+  --md-color-text:                            #{$md-color-black};
+  --md-color-text-values:                     255, 255, 255;
+  --md-color-text--light:                     #{$md-color-black--light};
+  --md-color-text--lighter:                   #{$md-color-black--lighter};
+  --md-color-text--lightest:                  #{$md-color-black--lightest};
+  --md-color-text--transparent:               #{$md-color-black--transparent};
+}
+
 // ----------------------------------------------------------------------------
 // Variables: sizing and spacing
 // ----------------------------------------------------------------------------
diff --git a/src/assets/stylesheets/app-palette.scss b/src/assets/stylesheets/app-palette.scss
index 38dfd9d7d..3ab5ff5a5 100644
--- a/src/assets/stylesheets/app-palette.scss
+++ b/src/assets/stylesheets/app-palette.scss
@@ -51,7 +51,7 @@ button[data-md-color-accent] {
     background-color 250ms,
     opacity          250ms;
   border-radius: px2rem(2px);
-  color: $md-color-white;
+  color: var(--md-color-background);
   font-size: ms(-1);
   text-align: left;
   cursor: pointer;
@@ -128,7 +128,7 @@ button[data-md-color-accent] {
 
       // Repository containing source
       .md-nav__source {
-        background-color: mix($color, $md-color-black, 75%);
+        background-color: $color; // TODO: https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables mix($color, var(--md-color-text), 75%);
       }
     }
 
@@ -158,9 +158,9 @@ button[data-md-color-accent] {
 
 // Color tile for presentation in theme documentation
 button[data-md-color-primary="white"] {
-  background-color: $md-color-white;
-  color: $md-color-black;
-  box-shadow: 0 0 px2rem(1px) $md-color-black--light inset;
+  background-color: var(--md-color-background);
+  color: var(--md-color-text);
+  box-shadow: 0 0 px2rem(1px) var(--md-color-text--light) inset;
 }
 
 // Overrides for black color
@@ -168,18 +168,18 @@ button[data-md-color-primary="white"] {
 
   // Application header (stays always on top)
   .md-header {
-    background-color: $md-color-white;
-    color: $md-color-black;
+    background-color: var(--md-color-background);
+    color: var(--md-color-text);
   }
 
   // Hero teaser
   .md-hero {
-    background-color: $md-color-white;
-    color: $md-color-black;
+    background-color: var(--md-color-background);
+    color: var(--md-color-text);
 
     // Add a border if there are no tabs
     &--expand {
-      border-bottom: px2rem(1px) solid $md-color-black--lightest;
+      border-bottom: px2rem(1px) solid var(--md-color-text--lightest);
     }
   }
 
@@ -188,8 +188,8 @@ button[data-md-color-primary="white"] {
 
     // Repository containing source
     .md-nav__source {
-      background-color: $md-color-black--lightest;
-      color: $md-color-black;
+      background-color: var(--md-color-text--lightest);
+      color: var(--md-color-text);
     }
   }
 
@@ -198,11 +198,11 @@ button[data-md-color-primary="white"] {
 
     // Search input
     .md-search__input {
-      background-color: $md-color-black--lightest;
+      background-color: var(--md-color-text--lightest);
 
       // Search input placeholder
       &::placeholder {
-        color: $md-color-black--light;
+        color: var(--md-color-text--light);
       }
     }
   }
@@ -212,13 +212,13 @@ button[data-md-color-primary="white"] {
 
     // Site title in main navigation
     html & .md-nav--primary .md-nav__title[for="__drawer"] {
-      background-color: $md-color-white;
-      color: $md-color-black;
+      background-color: var(--md-color-background);
+      color: var(--md-color-text);
     }
 
     // Hero teaser
     .md-hero {
-      border-bottom: px2rem(1px) solid $md-color-black--lightest;
+      border-bottom: px2rem(1px) solid var(--md-color-text--lightest);
     }
   }
 
@@ -227,9 +227,9 @@ button[data-md-color-primary="white"] {
 
     // Tabs with outline
     .md-tabs {
-      border-bottom: px2rem(1px) solid $md-color-black--lightest;
-      background-color: $md-color-white;
-      color: $md-color-black;
+      border-bottom: px2rem(1px) solid var(--md-color-text--lightest);
+      background-color: var(--md-color-background);
+      color: var(--md-color-text);
     }
   }
 }
@@ -261,7 +261,7 @@ button[data-md-color-primary="black"] {
 
     // Repository containing source
     .md-nav__source {
-      background-color: mix($clr-black, $md-color-white, 75%);
+      background-color: var(--md-color-background); // TODO: mix($clr-black, var(--md-color-background, 75%);
     }
   }
 
@@ -270,7 +270,7 @@ button[data-md-color-primary="black"] {
 
     // Search input
     .md-search__input {
-      background-color: $md-color-white--lighter;
+      background-color: var(--md-color-background--lighter);
     }
   }
 
diff --git a/src/assets/stylesheets/base/_typeset.scss b/src/assets/stylesheets/base/_typeset.scss
index cc783b021..20ce80b2e 100644
--- a/src/assets/stylesheets/base/_typeset.scss
+++ b/src/assets/stylesheets/base/_typeset.scss
@@ -33,7 +33,7 @@ body {
 // Default fonts
 body,
 input {
-  color: $md-color-black;
+  color: var(--md-color-text);
   font-feature-settings: "kern", "liga";
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
@@ -42,7 +42,7 @@ input {
 pre,
 code,
 kbd {
-  color: $md-color-black;
+  color: var(--md-color-text);
   font-feature-settings: "kern";
   font-family: "Courier New", Courier, monospace;
 }
@@ -73,7 +73,7 @@ kbd {
   // 1st level headline
   h1 {
     margin: 0 0 px2rem(40px);
-    color: $md-color-black--light;
+    color: var(--md-color-text--light);
     font-size: ms(3);
     font-weight: 300;
     letter-spacing: -0.01em;
@@ -115,7 +115,7 @@ kbd {
   h5,
   h6 {
     margin: px2rem(16px) 0;
-    color: $md-color-black--light;
+    color: var(--md-color-text--light);
     font-size: ms(-1);
     font-weight: 700;
     letter-spacing: -0.01em;
@@ -129,12 +129,12 @@ kbd {
   // Horizontal separators
   hr {
     margin: 1.5em 0;
-    border-bottom: px2rem(1px) dotted $md-color-black--lighter;
+    border-bottom: px2rem(1px) dotted var(--md-color-text--lighter);
   }
 
   // Links
   a {
-    color: $md-color-primary;
+    color: var(--md-color-primary);
     word-break: break-word;
 
     // Also enable color transition on pseudo elements
@@ -146,7 +146,7 @@ kbd {
     // Focused or hover links
     &:focus,
     &:hover {
-      color: $md-color-accent;
+      color: var(--md-color-accent);
     }
 
     // Add URLs for print
@@ -154,7 +154,7 @@ kbd {
 
       // Show link URL
       &::after {
-        color: $md-color-black--light;
+        color: var(--md-color-text--light);
         content: " [" attr(href) "]";
       }
     }
@@ -163,8 +163,8 @@ kbd {
   // Code blocks
   code,
   pre {
-    background-color: $md-code-background;
-    color: $md-code-color;
+    background-color: var(--md-code-background);
+    color: var(--md-code-color);
     font-size: 85%;
     direction: ltr;
 
@@ -182,8 +182,8 @@ kbd {
     padding: 0.0625em * $correct 0;
     border-radius: px2rem(2px);
     box-shadow:
-      +0.25em * $correct 0 0 $md-code-background,
-      -0.25em * $correct 0 0 $md-code-background;
+      +0.25em * $correct 0 0 var(--md-code-background),
+      -0.25em * $correct 0 0 var(--md-code-background);
     word-break: break-word;
     box-decoration-break: clone;
 
@@ -244,11 +244,11 @@ kbd {
 
       // Scrollbar thumb
       &::-webkit-scrollbar-thumb {
-        background-color: $md-color-black--lighter;
+        background-color: var(--md-color-text--lighter);
 
         // Hovered scrollbar thumb
         &:hover {
-          background-color: $md-color-accent;
+          background-color: var(--md-color-accent);
         }
       }
     }
@@ -299,7 +299,7 @@ kbd {
 
   // Abbreviations
   abbr {
-    border-bottom: px2rem(1px) dotted $md-color-black--light;
+    border-bottom: px2rem(1px) dotted var(--md-color-text--light);
     text-decoration: none;
     cursor: help;
   }
@@ -324,14 +324,14 @@ kbd {
   // Blockquotes, possibly nested
   blockquote {
     padding-left: px2rem(12px);
-    border-left: px2rem(4px) solid $md-color-black--lighter;
-    color: $md-color-black--light;
+    border-left: px2rem(4px) solid var(--md-color-text--lighter);
+    color: var(--md-color-text--light);
 
     // Adjust for right-to-left languages
     [dir="rtl"] & {
       padding-right: px2rem(12px);
       padding-left: initial;
-      border-right: px2rem(4px) solid $md-color-black--lighter;
+      border-right: px2rem(4px) solid var(--md-color-text--lighter);
       border-left: initial;
     }
   }
@@ -423,7 +423,7 @@ kbd {
     max-width: 100%;
     border-radius: px2rem(2px);
     font-size: ms(-1);
-    box-shadow: inset 0 0 0 px2rem(1px) $md-color-black--lightest;
+    box-shadow: inset 0 0 0 px2rem(1px) var(--md-color-text--lightest);
     overflow: auto;
     -webkit-overflow-scrolling: touch;
 
@@ -449,15 +449,15 @@ kbd {
     th {
       min-width: px2rem(100px);
       padding: px2rem(12px) px2rem(16px);
-      background-color: $md-color-black--light;
-      color: $md-color-white;
+      background-color: var(--md-color-text--light);
+      color: var(--md-color-background);
       vertical-align: top;
     }
 
     // Table cells
     td {
       padding: px2rem(12px) px2rem(16px);
-      border-top: px2rem(1px) solid $md-color-black--lightest;
+      border-top: px2rem(1px) solid var(--md-color-text--lightest);
       vertical-align: top;
     }
 
@@ -468,7 +468,7 @@ kbd {
       // Add background on hover
       &:hover {
         background-color: rgba(0, 0, 0, 0.035);
-        box-shadow: 0 px2rem(1px)  0 $md-color-white inset;
+        box-shadow: 0 px2rem(1px)  0 var(--md-color-background) inset;
       }
 
       // Remove top border on first row
diff --git a/src/assets/stylesheets/extensions/_codehilite.scss b/src/assets/stylesheets/extensions/_codehilite.scss
index 25929c912..82f6ac870 100644
--- a/src/assets/stylesheets/extensions/_codehilite.scss
+++ b/src/assets/stylesheets/extensions/_codehilite.scss
@@ -245,7 +245,7 @@ $codehilite-whitespace: transparent;
   // Disable user selection, so code can be easily copied without
   // accidentally also copying the line numbers
   .linenos {
-    color: $md-color-black--lighter;
+    color: var(--md-color-text--lighter);
     box-shadow: inset 0 0 0 px2rem(1px) $md-code-background;
     user-select: none;
 
@@ -273,9 +273,9 @@ $codehilite-whitespace: transparent;
       margin-right: px2rem(12px);
       margin-left: px2rem(-12px);
       padding-left: px2rem(12px);
-      border-right: px2rem(1px) solid $md-color-black--lightest;
+      border-right: px2rem(1px) solid var(--md-color-text--lightest);
       background-color: $md-code-gutter;
-      color: $md-color-black--lighter;
+      color: var(--md-color-text--lighter);
       content: attr(data-linenos);
       user-select: none;
 
diff --git a/src/assets/stylesheets/extensions/_footnotes.scss b/src/assets/stylesheets/extensions/_footnotes.scss
index eaf803618..32896e909 100644
--- a/src/assets/stylesheets/extensions/_footnotes.scss
+++ b/src/assets/stylesheets/extensions/_footnotes.scss
@@ -60,7 +60,7 @@
 
   // Footnotes extension
   .footnote {
-    color: $md-color-black--light;
+    color: var(--md-color-text--light);
     font-size: ms(-1);
 
     // Remove additional spacing on footnotes
@@ -74,7 +74,7 @@
 
       // Darken color for targeted footnote
       &:target {
-        color: $md-color-black;
+        color: var(--md-color-text);
       }
 
       // Remove spacing on first element
@@ -92,7 +92,7 @@
       // Active or targeted back reference
       &:hover  .footnote-backref:hover,
       &:target .footnote-backref {
-        color: $md-color-accent;
+        color: var(--md-color-accent);
       }
     }
   }
@@ -106,7 +106,7 @@
     &::before {
       display: inline;
       margin: 0 0.2em;
-      border-left: px2rem(1px) solid $md-color-black--lighter;
+      border-left: px2rem(1px) solid var(--md-color-text--lighter);
       font-size: 1.25em;
       content: "";
       vertical-align: px2rem(-5px);
@@ -121,7 +121,7 @@
       transform 250ms 125ms,
       color     250ms,
       opacity   125ms 125ms;
-    color: $md-color-black--lighter;
+    color: var(--md-color-black--lighter);
     // Hack: remove Unicode arrow for icon
     font-size: 0;
     opacity: 0;
diff --git a/src/assets/stylesheets/extensions/_permalinks.scss b/src/assets/stylesheets/extensions/_permalinks.scss
index 97d6eef3c..846ba3cca 100644
--- a/src/assets/stylesheets/extensions/_permalinks.scss
+++ b/src/assets/stylesheets/extensions/_permalinks.scss
@@ -50,7 +50,7 @@
 
     // Higher specificity for color due to palettes integration
     html body & {
-      color: $md-color-black--lighter;
+      color: var(--md-color-text--lighter);
     }
 
     // Hide for print
@@ -77,7 +77,7 @@
   .headerlink:focus,
   .headerlink:hover,
   :target .headerlink {
-    color: $md-color-accent;
+    color: var(--md-color-accent);
   }
 
   // Correct anchor offset for link blurring
diff --git a/src/assets/stylesheets/extensions/pymdown/_details.scss b/src/assets/stylesheets/extensions/pymdown/_details.scss
index e02b28b31..422527a48 100644
--- a/src/assets/stylesheets/extensions/pymdown/_details.scss
+++ b/src/assets/stylesheets/extensions/pymdown/_details.scss
@@ -81,7 +81,7 @@
       right: px2rem(12px);
       width: px2rem(20px);
       height: px2rem(20px);
-      background-color: $md-color-black--lighter;
+      background-color: var(--md-color-black--lighter);
       mask-image: url("{{ chevron-down }}");
       content: "";
 
diff --git a/src/assets/stylesheets/extensions/pymdown/_tabbed.scss b/src/assets/stylesheets/extensions/pymdown/_tabbed.scss
index 43a132fe8..983bec9ee 100644
--- a/src/assets/stylesheets/extensions/pymdown/_tabbed.scss
+++ b/src/assets/stylesheets/extensions/pymdown/_tabbed.scss
@@ -32,7 +32,7 @@
     display: none;
     order: 99;
     width: 100%;
-    background-color: $md-color-white;
+    background-color: var(--md-color-background);
 
     // Actual content
     pre {
@@ -47,7 +47,7 @@
     position: relative;
     flex-wrap: wrap;
     margin: 1em 0;
-    border: px2rem(1px) solid $md-color-black--lightest;
+    border: px2rem(1px) solid var(--md-color-text--lightest);
     border-radius: 0.2em;
 
     // Hide radio buttons
@@ -95,7 +95,7 @@
 
       // Hovered tab label
       html &:hover {
-        color: $md-color-accent;
+        color: var(--md-color-accent);
       }
     }
   }
@@ -107,7 +107,7 @@
     @include break-to-device(mobile) {
       margin: 1em px2rem(-16px);
       border: 0;
-      border-top: px2rem(1px) solid $md-color-black--lightest;
+      border-top: px2rem(1px) solid var(--md-color-text--lightest);
       border-radius: 0;
 
       // Actual container with code, overflowing
diff --git a/src/assets/stylesheets/extensions/pymdown/_tasklist.scss b/src/assets/stylesheets/extensions/pymdown/_tasklist.scss
index 3b6f1a3cb..72c901cda 100644
--- a/src/assets/stylesheets/extensions/pymdown/_tasklist.scss
+++ b/src/assets/stylesheets/extensions/pymdown/_tasklist.scss
@@ -57,7 +57,7 @@
       left: px2em(-24px);
       width: px2em(20px);
       height: px2em(20px);
-      background-color: $md-color-black--lightest;
+      background-color: var(--md-color-black--lightest);
       mask-image: url("{{ checkbox-blank-circle }}");
       content: "";
 
diff --git a/src/assets/stylesheets/layout/_announce.scss b/src/assets/stylesheets/layout/_announce.scss
index e61638ac6..4d554abd6 100644
--- a/src/assets/stylesheets/layout/_announce.scss
+++ b/src/assets/stylesheets/layout/_announce.scss
@@ -26,13 +26,13 @@
 
 // Announcement bar
 .md-announcement {
-  background-color: $md-color-black;
+  background-color: var(--md-color-text);
 
   // Actual content
   &__inner {
     min-height: px2rem(48px);
     padding: 0 px2rem(16px);
-    color: $md-color-white;
+    color: var(--md-color-background);
     font-size: px2rem(14px);
     line-height: px2rem(48px);
   }
diff --git a/src/assets/stylesheets/layout/_base.scss b/src/assets/stylesheets/layout/_base.scss
index faf2ba948..4a2771299 100644
--- a/src/assets/stylesheets/layout/_base.scss
+++ b/src/assets/stylesheets/layout/_base.scss
@@ -35,8 +35,8 @@ $md-toggle__drawer--checked:
 // Stretch container to viewport and set base font-size to 10px for simple
 // calculations base on relative ems (rems)
 html {
-  height: 100%;
-  background-color: $md-color-white;
+  min-height: 100%;
+  background-color: var(--md-color-background);
   // Hack: normally, we would set the base font-size to 62.5%, so we can base
   // all calculations on 10px, but Chromium and Chrome define a minimal font
   // size of 12 if the system language is set to Chinese. For this reason we
@@ -146,7 +146,7 @@ hr {
     width     0ms 250ms,
     height    0ms 250ms,
     opacity 250ms;
-  background-color: $md-color-black--light;
+  background-color: var(--md-color-black--light);
   opacity: 0;
   z-index: 3;
 
@@ -177,8 +177,8 @@ hr {
   padding: px2rem(6px) px2rem(10px);
   transform: translateY(px2rem(8px));
   border-radius: px2rem(2px);
-  background-color: $md-color-black;
-  color: $md-color-white;
+  background-color: var(--md-color-text);
+  color: var(--md-color-background);
   font-size: ms(-1);
   opacity: 0;
 
diff --git a/src/assets/stylesheets/layout/_clipboard.scss b/src/assets/stylesheets/layout/_clipboard.scss
index ee237555c..7d240425c 100644
--- a/src/assets/stylesheets/layout/_clipboard.scss
+++ b/src/assets/stylesheets/layout/_clipboard.scss
@@ -33,7 +33,7 @@
   height: px2rem(24px);
   transition: color 250ms;
   border-radius: px2rem(2px);
-  color: $md-color-black--lightest;
+  color: var(--md-color-text--lightest);
   cursor: pointer;
   z-index: 1;
   // Hack: put everything on the GPU to omit flickering
@@ -52,12 +52,12 @@
 
   // Show on container hover
   pre:hover & {
-    color: $md-color-black--light;
+    color: var(md-color-text--light);
   }
 
   // Focused or hovered icon
   pre &:focus,
   pre &:hover {
-    color: $md-color-accent;
+    color: var(--md-color-accent);
   }
 }
diff --git a/src/assets/stylesheets/layout/_content.scss b/src/assets/stylesheets/layout/_content.scss
index 79ec0d21b..0b73bded8 100644
--- a/src/assets/stylesheets/layout/_content.scss
+++ b/src/assets/stylesheets/layout/_content.scss
@@ -94,7 +94,7 @@
 
     // Override default link color for icons
     .md-typeset & {
-      color: $md-color-black--lighter;
+      color: var(--md-color-text--lighter);
     }
 
     // Align text with icon
diff --git a/src/assets/stylesheets/layout/_dialog.scss b/src/assets/stylesheets/layout/_dialog.scss
index 7be33e40a..fb1e16ac2 100644
--- a/src/assets/stylesheets/layout/_dialog.scss
+++ b/src/assets/stylesheets/layout/_dialog.scss
@@ -41,8 +41,8 @@
     opacity   400ms;
   border: none;
   border-radius: px2rem(2px);
-  background: $md-color-black;
-  color: $md-color-white;
+  background: var(--md-color-text);
+  color: var(--md-color-background);
   font-size: px2rem(14px);
   opacity: 0;
   z-index: 2;
diff --git a/src/assets/stylesheets/layout/_footer.scss b/src/assets/stylesheets/layout/_footer.scss
index 4d3a9e594..0ba9066b7 100644
--- a/src/assets/stylesheets/layout/_footer.scss
+++ b/src/assets/stylesheets/layout/_footer.scss
@@ -35,8 +35,8 @@
 
 // Navigation within footer
 .md-footer-nav {
-  background-color: $md-color-black;
-  color: $md-color-white;
+  background-color: var(--md-color-text);
+  color: var(--md-color-background);
 
   // Set spacing
   &__inner {
@@ -123,14 +123,14 @@
     left: 0;
     margin-top: px2rem(-20px);
     padding: 0 px2rem(20px);
-    color: $md-color-white--light;
+    color: var(--md-color-background--light);
     font-size: px2rem(15px);
   }
 }
 
 // Non-navigational information
 .md-footer-meta {
-  background-color: opacify($md-color-black, 0.025);
+  background-color: rgba(var(--md-color-text-values), 1.025);
 
   // Set spacing
   &__inner {
@@ -140,12 +140,12 @@
 
   // Use a decent color for non-hovered links and ensure specificity
   html &.md-typeset a {
-    color: $md-color-white--light;
+    color: var(--md-color-background--light);
 
     // Focused or hovered link
     &:focus,
     &:hover {
-      color: $md-color-white;
+      color: var(--md-color-background);
     }
   }
 }
@@ -154,7 +154,7 @@
 .md-footer-copyright {
   margin: 0 px2rem(12px);
   padding: px2rem(8px) 0;
-  color: $md-color-white--lighter;
+  color: var(--md-color-background--lighter);
   font-size: ms(-1);
 
   // [tablet portrait +]: Show next to social media links
@@ -170,7 +170,7 @@
 
   // Highlight copyright information
   &__highlight {
-    color: $md-color-white--light;
+    color: var(--md-color-background--light);
   }
 }
 
diff --git a/src/assets/stylesheets/layout/_header.scss b/src/assets/stylesheets/layout/_header.scss
index 3e3ed9467..66bdb6731 100644
--- a/src/assets/stylesheets/layout/_header.scss
+++ b/src/assets/stylesheets/layout/_header.scss
@@ -33,9 +33,9 @@
   height: px2rem(48px);
   transition:
     background-color 250ms,
-    color            250ms;
-  background-color: $md-color-primary;
-  color: $md-color-white;
+    color 250ms;
+  background-color: var(--md-color-primary);
+  color: var(--md-color-background);
   box-shadow: none;
   z-index: 2;
   // Hack: putting the header on the GPU avoids unnecessary repaints
diff --git a/src/assets/stylesheets/layout/_hero.scss b/src/assets/stylesheets/layout/_hero.scss
index 85b5e6cbe..b6b2d1543 100644
--- a/src/assets/stylesheets/layout/_hero.scss
+++ b/src/assets/stylesheets/layout/_hero.scss
@@ -27,8 +27,8 @@
 // Hero teaser
 .md-hero {
   transition: background 250ms;
-  background-color: $md-color-primary;
-  color: $md-color-white;
+  background-color: var(--md-color-primary);
+  color: var(--md-color-background);
   font-size: ms(1);
   overflow: hidden;
 
diff --git a/src/assets/stylesheets/layout/_nav.scss b/src/assets/stylesheets/layout/_nav.scss
index 4719c48a3..f250cd5ce 100644
--- a/src/assets/stylesheets/layout/_nav.scss
+++ b/src/assets/stylesheets/layout/_nav.scss
@@ -118,12 +118,12 @@
 
     // Blurred link
     &[data-md-state="blur"] {
-      color: $md-color-black--light;
+      color: var(--md-color-text--light);
     }
 
     // Active link
     .md-nav__item &--active {
-      color: $md-color-primary;
+      color: var(--md-color-primary);
     }
 
     // Reset active color for nested list titles
@@ -134,7 +134,7 @@
     // Focused or hovered link
     &:focus,
     &:hover {
-      color: $md-color-accent;
+      color: var(--md-color-accent);
     }
   }
 
@@ -145,7 +145,7 @@
 
   // [tablet -]: Layered navigation
   @include break-to-device(tablet) {
-    background-color: $md-color-white;
+    background-color: var(--md-color-background);
 
     // Stretch primary navigation to drawer
     &--primary,
@@ -175,8 +175,8 @@
         position: relative;
         height: px2rem(112px);
         padding: px2rem(60px) px2rem(16px) px2rem(4px);
-        background-color: $md-color-black--lightest;
-        color: $md-color-black--light;
+        background-color: var(--md-color-text--lightest);
+        color: var(--md-color-text--light);
         font-weight: 400;
         line-height: px2rem(48px);
         white-space: nowrap;
@@ -201,8 +201,8 @@
 
         // Main lists
         ~ .md-nav__list {
-          background-color: $md-color-white;
-          box-shadow: inset 0 px2rem(1px) 0 $md-color-black--lightest;
+          background-color: var(--md-color-background);
+          box-shadow: inset 0 px2rem(1px) 0 var(--md-color-text--lightest);
           overflow-y: auto;
           scroll-snap-type: y mandatory;
 
@@ -215,8 +215,8 @@
         // Site title in main navigation
         &[for="__drawer"] {
           position: relative;
-          background-color: $md-color-primary;
-          color: $md-color-white;
+          background-color: var(--md-color-primary);
+          color: var(--md-color-background);
 
           // Site logo
           .md-nav__button {
@@ -251,7 +251,7 @@
       // List item
       .md-nav__item {
         padding: 0;
-        border-top: px2rem(1px) solid $md-color-black--lightest;
+        border-top: px2rem(1px) solid var(--md-color-text--lightest);
 
         // Adjust for right-to-left languages
         [dir="rtl"] & {
@@ -421,8 +421,8 @@
     &__source {
       display: block;
       padding: 0 px2rem(4px);
-      background-color: mix($md-color-primary, $md-color-black, 75%);
-      color: $md-color-white;
+      background-color: var(--md-color-primary); // mix(var(--md-color-primary), $md-color-black, 75%); // TODO: fix calculation https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables
+      color: var(--md-color-background);
     }
   }
 
diff --git a/src/assets/stylesheets/layout/_search.scss b/src/assets/stylesheets/layout/_search.scss
index 46d98660b..02c817dc3 100644
--- a/src/assets/stylesheets/layout/_search.scss
+++ b/src/assets/stylesheets/layout/_search.scss
@@ -63,7 +63,7 @@ $md-toggle__search--checked:
         transform 300ms 100ms,
         opacity   200ms 200ms;
       border-radius: px2rem(20px);
-      background-color: $md-color-white;
+      background-color: var(--md-color-background);
       overflow: hidden;
       pointer-events: none;
 
@@ -112,7 +112,7 @@ $md-toggle__search--checked:
         width     0ms 250ms,
         height    0ms 250ms,
         opacity 250ms;
-      background-color: $md-color-black--light;
+      background-color: var(--md-color-black--light);
       cursor: pointer;
 
       // Adjust for right-to-left languages
@@ -238,7 +238,7 @@ $md-toggle__search--checked:
     // Placeholder and icon color in active state
     ~ .md-search__icon,
     &::placeholder {
-      color: $md-color-black--light;
+      color: var(--md-color-text--light);
     }
 
     // Remove the "x" rendered by Internet Explorer
@@ -262,7 +262,7 @@ $md-toggle__search--checked:
         background-color 250ms cubic-bezier(0.1, 0.7, 0.1, 1),
         color            250ms cubic-bezier(0.1, 0.7, 0.1, 1);
       border-radius: px2rem(2px);
-      background-color: $md-color-black--lighter;
+      background-color: var(--md-color-text--lighter);
       color: inherit;
       font-size: ms(0);
 
@@ -273,30 +273,30 @@ $md-toggle__search--checked:
 
       // Icon color
       + .md-search__icon {
-        color: $md-color-white;
+        color: var(--md-color-background);
       }
 
       // Placeholder color
       &::placeholder {
-        color: $md-color-white--light;
+        color: var(--md-color-background--light);
       }
 
       // Hovered search field
       &:hover {
-        background-color: $md-color-white--lightest;
+        background-color: var(--md-color-background--lightest);
       }
 
       // Set light background on active search field
       #{$md-toggle__search--checked} & {
         border-radius: px2rem(2px) px2rem(2px) 0 0;
-        background-color: $md-color-white;
-        color: $md-color-black;
+        background-color: var(--md-color-background);
+        color: var(--md-color-text);
         text-overflow: clip;
 
         // Placeholder and icon color in active state
         + .md-search__icon,
         &::placeholder {
-          color: $md-color-black--light;
+          color: var(--md-color-text--light);
         }
       }
     }
@@ -435,8 +435,8 @@ $md-toggle__search--checked:
   // Wrapper for scrolling on overflow
   &__scrollwrap {
     height: 100%;
-    background-color: $md-color-white;
-    box-shadow: inset 0 px2rem(1px) 0 $md-color-black--lightest;
+    background-color: var(--md-color-background);
+    box-shadow: inset 0 px2rem(1px) 0 var(md-color-text--lightest);
     overflow-y: auto;
     scroll-snap-type: y mandatory;
     -webkit-overflow-scrolling: touch;
@@ -473,11 +473,11 @@ $md-toggle__search--checked:
 
       // Scrollbar thumb
       &::-webkit-scrollbar-thumb {
-        background-color: $md-color-black--lighter;
+        background-color: var(--md-color-text--lighter);
 
         // Hovered scrollbar thumb
         &:hover {
-          background-color: $md-color-accent;
+          background-color: var(--md-color-accent);
         }
       }
     }
@@ -486,14 +486,14 @@ $md-toggle__search--checked:
 
 // Search result
 .md-search-result {
-  color: $md-color-black;
+  color: var(--md-color-text);
   word-break: break-word;
 
   // Search metadata
   &__meta {
     padding: 0 px2rem(16px);
-    background-color: $md-color-black--lightest;
-    color: $md-color-black--light;
+    background-color: var(--md-color-text--lightest);
+    color: var(--md-color-text--light);
     font-size: ms(-1);
     line-height: px2rem(36px);
     scroll-snap-align: start;
@@ -514,13 +514,13 @@ $md-toggle__search--checked:
   &__list {
     margin: 0;
     padding: 0;
-    border-top: px2rem(1px) solid $md-color-black--lightest;
+    border-top: px2rem(1px) solid var(--md-color-text--lightest);
     list-style: none;
   }
 
   // List item
   &__item {
-    box-shadow: 0 px2rem(-1px) 0 $md-color-black--lightest;
+    box-shadow: 0 px2rem(-1px) 0 var(--md-color-text--lightest);
   }
 
   // Link inside item
@@ -534,7 +534,7 @@ $md-toggle__search--checked:
     // Focused or hovered link
     &:focus,
     &:hover {
-      background-color: transparentize($md-color-accent, 0.9);
+      background-color: rgba(var(--md-color-accent-values), 0.9);
 
       // Slightly transparent icon
       .md-search-result__article::before {
@@ -584,7 +584,7 @@ $md-toggle__search--checked:
     left: 0;
     margin: px2rem(2px);
     transition: opacity 250ms;
-    color: $md-color-black--light;
+    color: var(--md-color-text--light);
 
     // Adjust for right-to-left languages
     [dir="rtl"] & {
@@ -613,7 +613,7 @@ $md-toggle__search--checked:
     display: -webkit-box;
     max-height: px2rem(33px);
     margin: 0.5em 0;
-    color: $md-color-black--light;
+    color: var(--md-color-text--light);
     font-size: ms(-1);
     line-height: 1.4;
     text-overflow: ellipsis;
diff --git a/src/assets/stylesheets/layout/_sidebar.scss b/src/assets/stylesheets/layout/_sidebar.scss
index 681207af3..7c3dd0d54 100644
--- a/src/assets/stylesheets/layout/_sidebar.scss
+++ b/src/assets/stylesheets/layout/_sidebar.scss
@@ -64,7 +64,7 @@ $md-toggle__drawer--checked:
       transition:
         transform  250ms cubic-bezier(0.4, 0, 0.2, 1),
         box-shadow 250ms;
-      background-color: $md-color-white;
+      background-color: var(--md-color-background);
       z-index: 3;
 
       // Adjust for right-to-left languages
@@ -158,11 +158,11 @@ $md-toggle__drawer--checked:
 
     // Scrollbar thumb
     &::-webkit-scrollbar-thumb {
-      background-color: $md-color-black--lighter;
+      background-color: var(--md-color-text--lighter);
 
       // Hovered scrollbar thumb
       &:hover {
-        background-color: $md-color-accent;
+        background-color: var(--md-color-accent);
       }
     }
   }
diff --git a/src/assets/stylesheets/layout/_tabs.scss b/src/assets/stylesheets/layout/_tabs.scss
index d3e072d38..359087e03 100644
--- a/src/assets/stylesheets/layout/_tabs.scss
+++ b/src/assets/stylesheets/layout/_tabs.scss
@@ -28,8 +28,8 @@
 .md-tabs {
   width: 100%;
   transition: background 250ms;
-  background-color: $md-color-primary;
-  color: $md-color-white;
+  background-color: var(--md-color-primary);
+  color: var(--md-color-background);
   overflow: auto;
 
   // Omit transitions, in case JavaScript is not available