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.
solidusio · Aug 9, 2017 · 546825a · 546825a
1 parent 004c7d0
commit 546825a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git 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
@@ -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;
   }
 }