From 546825aec7884088dc3e29161597ab93b087c846 Mon Sep 17 00:00:00 2001
From: Gray Gilmore <graygilmore@gmail.com>
Date: Wed, 2 Aug 2017 10:28:18 -0700
Subject: [PATCH] Use better color naming for style guide Sass variables

Instead of referring to generic `$color-1` variables we should be using
explicitly named Sass variables.
---
 .../spree/backend/globals/_variables.scss        | 10 ++++++++++
 .../spree/backend/sections/_style_guide.scss     | 16 ++++++++--------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss
index 1c9828ada52..261f7028a68 100644
--- a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss
+++ b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss
@@ -49,6 +49,16 @@ $color-error:                    $color-5 !default;
 // Color for spinner
 $color-spinner: #fff;
 
+// Style Guide
+$color-style-guide-code: darken($color-7, 10%);
+$color-style-guide-link: darken($color-7, 65%);
+$color-style-guide-nav: $color-7;
+$color-style-guide-nav-border: darken($color-7, 5%);
+$color-style-guide-nav-link: darken($color-7, 65%);
+$color-style-guide-nav-link-hover: darken($color-7, 5%);
+$color-style-guide-section-border: darken($color-7, 10%);
+$color-style-guide-swatch-border: darken($color-7, 10%);
+
 // Table colors
 $color-tbl-odd:                  $color-1 !default;
 $color-tbl-even:                 very-light($color-3, 4) !default;
diff --git a/backend/app/assets/stylesheets/spree/backend/sections/_style_guide.scss b/backend/app/assets/stylesheets/spree/backend/sections/_style_guide.scss
index 146090a8823..66d957bbd23 100644
--- a/backend/app/assets/stylesheets/spree/backend/sections/_style_guide.scss
+++ b/backend/app/assets/stylesheets/spree/backend/sections/_style_guide.scss
@@ -4,7 +4,7 @@
 
   &-sidebar {
     width: 225px;
-    background: $color-7;
+    background: $color-style-guide-nav;
     padding: 1.5rem;
 
     .brand-link {
@@ -41,7 +41,7 @@
       @include padding(0.75rem null);
 
       &:not(:first-of-type) {
-        border-top: 1px solid darken($color-7, 5%);
+        border-top: 1px solid $color-style-guide-nav-border;
       }
 
       > a {
@@ -52,11 +52,11 @@
 
     a {
       display: block;
-      color: darken($color-7, 65%);
+      color: $color-style-guide-nav-link;
       padding: 0.3rem 0.5rem;
 
       &:hover {
-        background: darken($color-7, 5%);
+        background: $color-style-guide-nav-link-hover;
       }
     }
   }
@@ -68,7 +68,7 @@
 
   &-section-header {
     @include margin(7rem 0 3rem);
-    border-bottom: 1px solid darken($color-7, 10%);
+    border-bottom: 1px solid $color-style-guide-section-border;
     font-size: 1.5rem;
     font-weight: bold;
     line-height: 0.2;
@@ -81,7 +81,7 @@
     }
 
     a {
-      color: darken($color-7, 65%);
+      color: $color-style-guide-link;
     }
   }
 
@@ -101,7 +101,7 @@
   &-code {
     pre {
       margin: 0;
-      border: 1px solid darken($color-7, 10%);
+      border: 1px solid $color-style-guide-code;
     }
   }
 
@@ -132,6 +132,6 @@
 
   .color-swatch {
     height: 50px;
-    border: 1px solid darken($color-7, 10%);
+    border: 1px solid $color-style-guide-swatch-border;
   }
 }