Eliminate the final uses of SCSS variables

I’ve dropped the 95% opacity on the background of the method source code overlay in RDoc since the difference isn’t noticeable but it makes implementation a lot easier.

assets/stylesheets/components/_header.scss

@@ -213,7 +213,7 @@
   max-width: 50%;
   font-size: .8125rem;
   color: var(--textColorLight);
-  background: darken($headerBackground, 5%);
+  background: var(--searchTagBackground);
   border-radius: 2px;
   @extend %truncate-text;
 }

assets/stylesheets/components/_settings.scss

@@ -62,7 +62,7 @@
   }
 }
 
-@media (max-width: $maxWidth) {
+@media (max-width: 80rem) {
   ._setting-max-width { display: none; }
 }
 

assets/stylesheets/components/_sidebar.scss

@@ -347,7 +347,7 @@
   font-weight: var(--bolderFontWeight);
   color: var(--textColorLight);
   text-transform: uppercase;
-  background: linear-gradient(to bottom, $sidebarBackground, $sidebarBackground 75%, rgba($sidebarBackground, 0));
+  background: linear-gradient(to bottom, var(--sidebarBackground), var(--sidebarBackground) 75%, var(--transparentSidebarBackground));
   cursor: default;
 }
 

assets/stylesheets/global/_variables-dark.scss

@@ -1,8 +1,3 @@
-// TODO: convert uses of these to CSS variables
-$sidebarBackground: #24282a;
-$headerBackground: #1c1c1c;
-$contentBackground: #33373a;
-
 html.dark {
   --baseFont: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
   --monoFont: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
@@ -17,7 +12,7 @@ html.dark {
   --sidebarMediumWidth: 16rem;
 
   --documentBackground: #222;
-  --contentBackground: $contentBackground;
+  --contentBackground: #33373a;
 
   --textColor: #cbd0d0;
   --textColorLight: #9da5ad;
@@ -43,10 +38,12 @@ html.dark {
   --linkColorHover: white;
   --linkTextDecoration: underline;
 
-  --headerBackground: $headerBackground;
+  --headerBackground: #1c1c1c;
   --headerBorder: #000;
+  --searchTagBackground: darken(#1c1c1c, 5%);
 
-  --sidebarBackground: $sidebarBackground;
+  --sidebarBackground: #24282a;
+  --transparentSidebarBackground: rgba(#24282a, 0);
   --sidebarBorder: #000;
 
   --scrollbarColor: #6c6c6f;

assets/stylesheets/global/_variables.scss

@@ -1,8 +1,3 @@
-// TODO: convert uses of these to CSS variables
-$sidebarBackground: #f9f9f9;
-$headerBackground: #eee;
-$contentBackground: #fff;
-
 html:not(.dark) {
   --baseFont: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
   --monoFont: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
@@ -17,7 +12,7 @@ html:not(.dark) {
   --sidebarMediumWidth: 16rem;
 
   --documentBackground: #f3f3f3;
-  --contentBackground: $contentBackground;
+  --contentBackground: #fff;
 
   --textColor: #333;
   --textColorLight: #666;
@@ -44,10 +39,12 @@ html:not(.dark) {
   --linkColorHover: #2f6cb6;
   --linkTextDecoration: none;
 
-  --headerBackground: $headerBackground;
+  --headerBackground: #eee;
   --headerBorder: #d7d7d7;
+  --searchTagBackground: darken(#eee, 5%);
 
-  --sidebarBackground: $sidebarBackground;
+  --sidebarBackground: #f9f9f9;
+  --transparentSidebarBackground: rgba(#f9f9f9, 0);
   --sidebarBorder: #e1e1e1;
 
   --scrollbarColor: #ccc;

assets/stylesheets/pages/_rdoc.scss

@@ -42,7 +42,7 @@
     top: 0;
     left: -1em;
     right: 0;
-    background: rgba($contentBackground, .95);
+    background: var(--contentBackground);
     box-shadow: 0 1em 1em 1em var(--contentBackground);
 
     > pre { margin: 0; }