From 1ef5d0ca62f88fa756b950266052aaa2d30e20af Mon Sep 17 00:00:00 2001
From: Jed Fox <git@twopointzero.us>
Date: Sat, 11 Aug 2018 18:22:23 -0400
Subject: [PATCH] Eliminate the final uses of SCSS variables
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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     |  2 +-
 assets/stylesheets/components/_settings.scss   |  2 +-
 assets/stylesheets/components/_sidebar.scss    |  2 +-
 assets/stylesheets/global/_variables-dark.scss | 13 +++++--------
 assets/stylesheets/global/_variables.scss      | 13 +++++--------
 assets/stylesheets/pages/_rdoc.scss            |  2 +-
 6 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/assets/stylesheets/components/_header.scss b/assets/stylesheets/components/_header.scss
index 5ec16a8c..1ac9d78a 100644
--- a/assets/stylesheets/components/_header.scss
+++ b/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;
 }
diff --git a/assets/stylesheets/components/_settings.scss b/assets/stylesheets/components/_settings.scss
index 79f5ecd3..86bbf005 100644
--- a/assets/stylesheets/components/_settings.scss
+++ b/assets/stylesheets/components/_settings.scss
@@ -62,7 +62,7 @@
   }
 }
 
-@media (max-width: $maxWidth) {
+@media (max-width: 80rem) {
   ._setting-max-width { display: none; }
 }
 
diff --git a/assets/stylesheets/components/_sidebar.scss b/assets/stylesheets/components/_sidebar.scss
index 8c14c951..8813f92d 100644
--- a/assets/stylesheets/components/_sidebar.scss
+++ b/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;
 }
 
diff --git a/assets/stylesheets/global/_variables-dark.scss b/assets/stylesheets/global/_variables-dark.scss
index c5d0686d..dda63b6e 100644
--- a/assets/stylesheets/global/_variables-dark.scss
+++ b/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;
diff --git a/assets/stylesheets/global/_variables.scss b/assets/stylesheets/global/_variables.scss
index 9b1532af..7887c971 100644
--- a/assets/stylesheets/global/_variables.scss
+++ b/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;
diff --git a/assets/stylesheets/pages/_rdoc.scss b/assets/stylesheets/pages/_rdoc.scss
index 6cf7050f..7873900a 100644
--- a/assets/stylesheets/pages/_rdoc.scss
+++ b/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; }