Update main colors variables name

While we are changing the colors palette, we've decided to give conventional names to the main colors variables that were: color-1, color-2, color-3 and so on. Now we can recognize the colors easily. The style guide has also been updated.
solidusio · May 31, 2019 · 9552ccc · 9552ccc
1 parent 7a60ff5
commit 9552ccc
Show file tree

Hide file tree

Showing 19 changed files with 127 additions and 97 deletions.
diff --git a/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss b/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss
@@ -7,27 +7,27 @@
 //
 // Grayscale and brand colors for use across Bootstrap.
 
-$primary:          $color-2 !default;
+$primary:          $color-primary !default;
 $secondary:        #C7CDD5 !default;
 
-$blue:   $color-2 !default;
-$red:    $color-5 !default;
-$orange: $color-6 !default;
+$blue:   $color-primary !default;
+$red:    $color-red !default;
+$orange: $color-yellow !default;
 $green:  $color-success !default;
 
 // Body
 //
 // Settings for the `<body>` element.
 
-$body-bg:       $color-1 !default;
-$body-color:    $color-4 !default;
+$body-bg:       $color-white !default;
+$body-color:    $color-dark !default;
 
 // Links
 //
 // Style anchor elements.
 
 $link-decoration:       none !default;
-$link-hover-color:      $color-2 !default;
+$link-hover-color:      $color-primary !default;
 $link-hover-decoration: none !default;
 
 // Grid columns
@@ -57,7 +57,7 @@ $h5-font-size: $font-size-root + 4 !default;
 $h6-font-size: $font-size-root + 2 !default;
 
 $headings-font-weight:   $font-weight-bold !default;
-$headings-color:         $color-4 !default;
+$headings-color:         $color-dark !default;
 
 // Components
 //
@@ -67,10 +67,10 @@ $border-radius:          3px !default;
 
 // Forms
 
-$input-color:                    $color-4 !default;
-$input-placeholder-color:        $color-8 !default;
+$input-color:                    $color-dark !default;
+$input-placeholder-color:        $color-dark-light !default;
 $input-border-color:             #D7DAE0 !default;
-$input-focus-border-color:       $color-2 !default;
+$input-focus-border-color:       $color-primary !default;
 
 $custom-select-focus-border-color: $input-focus-border-color !default;
 
@@ -79,9 +79,13 @@ $custom-select-focus-border-color: $input-focus-border-color !default;
 // Dropdown menu container and contents.
 
 $dropdown-link-hover-color:      #fff !default;
-$dropdown-link-hover-bg:         $color-2 !default;
+$dropdown-link-hover-bg:         $color-primary !default;
 
 // Breadcrumbs
 
 $breadcrumb-bg:                 transparent !default;
-$breadcrumb-active-color:       $color-2 !default;
+$breadcrumb-active-color:       $color-primary !default;
+
+// Popover
+
+$popover-header-bg:             #e3ebfd !default;
diff --git a/backend/app/assets/stylesheets/spree/backend/components/_breadcrumb.scss b/backend/app/assets/stylesheets/spree/backend/components/_breadcrumb.scss
@@ -3,7 +3,7 @@
   margin-bottom: 0;
 
   a {
-    color: $color-8;
+    color: $color-dark-light;
 
     &:hover {
       color: $breadcrumb-active-color;

diff --git a/backend/app/assets/stylesheets/spree/backend/components/_buttons.scss b/backend/app/assets/stylesheets/spree/backend/components/_buttons.scss
@@ -9,6 +9,6 @@
 
   &.disabled,
   &:disabled {
-    color: $color-8;
+    color: $color-disabled;
   }
 }
diff --git a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
@@ -17,9 +17,9 @@ nav.menu {
       }
 
       &.active a {
-        color: $color-2;
+        color: $color-primary;
         border-left-width: 0;
-        border-bottom-color: $color-2;
+        border-bottom-color: $color-primary;
       }
     }
   }
@@ -32,7 +32,7 @@ nav.menu {
 }
 
 .admin-nav-header {
-  background-color: $color-1;
+  background-color: $color-white;
   border-bottom: 1px solid $color-border;
   text-align: center;
   padding: 0 1.25em;
@@ -88,11 +88,11 @@ nav.menu {
         left: 100%;
         width: $width-sidebar-flyout;
         margin-left: 0;
-        background: $color-1;
+        background: $color-white;
         box-shadow: 1px 0 4px 0 rgba(0, 0, 0, 0.1);
         border-radius: 0 4px 4px 4px;
         border: 1px solid $color-border;
-        @include caret($direction: left, $color-caret: $color-1);
+        @include caret($direction: left, $color-caret: $color-white);
 
       &:before {
         z-index: 1;
@@ -113,7 +113,7 @@ nav.menu {
       }
 
       > li {
-        background: $color-1;
+        background: $color-white;
 
         a {
           font-weight: $font-weight-bold;
@@ -134,7 +134,7 @@ nav.menu {
     text-indent: 2em;
 
     &:before {
-      color: $color-8;
+      color: $color-dark-light;
       font-weight: $font-weight-normal;
       position: absolute;
       left: 1em;

diff --git a/backend/app/assets/stylesheets/spree/backend/components/_progress.scss b/backend/app/assets/stylesheets/spree/backend/components/_progress.scss
@@ -1,5 +1,5 @@
 .turbolinks-progress-bar {
-  background-color: $color-3;
+  background-color: $color-dark-light;
 }
 
 #progress {
@@ -22,8 +22,8 @@
     margin-left: -100px;
     margin-top: -50px;
     padding: 11px 0;
-    background-color: $color-3;
-    color: $color-1;
+    background-color: $color-dark-light;
+    color: $color-white;
     text-align: center;
   }
 

diff --git a/backend/app/assets/stylesheets/spree/backend/components/_sidebar.scss b/backend/app/assets/stylesheets/spree/backend/components/_sidebar.scss
@@ -12,6 +12,6 @@
 
 .sidebar-title {
   @include line-through($color: $color-border);
-  color: $color-4;
+  color: $color-dark;
   font-size: 14px;
 }
diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss
@@ -10,61 +10,68 @@ $font-size-pill: 11px;
 //--------------------------------------------------------------
 
 // Basic color palette for admin
-$color-1:                        #FFFFFF !default;    // White
-$color-2:                        #3D76F1 !default;    // Blue
-$color-3:                        #808C9E !default;    // Gray
-$color-4:                        #24282F !default;    // Black
-$color-5:                        #CE452A !default;    // Red
-$color-6:                        #FFDD59 !default;    // Yellow
-$color-7:                        #F9FAFB !default;    // Lighter Gray
-$color-8:                        #808C9E !default;    // Gray
+
+$color-dark:         #24282F !default;
+$color-dark-light:   #808C9E !default;
+
+$color-primary:      #3D76F1 !default;
+
+$color-light:        #F9FAFB !default;
+$color-light-dark:   #E5E7EB !default;
+
+$color-white:        #FFFFFF !default;
+
+$color-red:          #CE452A !default;
+$color-yellow:       #FFDD59 !default;
+$color-green:        #52B73B !default;
 
 // Basic accents for admin
-$box-shadow:                     0 0 4px 0 rgba(0, 0, 0, .12) !default;
+$box-shadow:         0 0 4px 0 rgba(0, 0, 0, .12) !default;
 
 // Body base colors
-$color-border:                  #E5E7EB !default;
+$color-border:       $color-light-dark !default;
+$color-disabled:     $color-dark-light !default;
 
 // Basic navigation colors
-$color-header-bg:               $color-7 !default;
-$color-sidebar-bg:              $color-7 !default;
+$color-header-bg:               $color-light !default;
+$color-sidebar-bg:              $color-light !default;
 $color-sidebar-border:          $color-border !default;
-$color-navbar:                  $color-4 !default;
-$color-navbar-bg:               $color-7 !default;
-$color-navbar-active:           $color-2 !default;
-$color-navbar-active-bg:        $color-7 !default;
-$color-navbar-submenu:          $color-8 !default;
-$color-navbar-submenu-bg:       $color-7 !default;
-$color-navbar-submenu-active:   $color-2 !default;
-$color-navbar-footer:           $color-4 !default;
-$color-navbar-footer-bg:        $color-7 !default;
-$color-navbar-footer-active:    $color-2 !default;
+$color-navbar:                  $color-dark !default;
+$color-navbar-bg:               $color-light !default;
+$color-navbar-active:           $color-primary !default;
+$color-navbar-active-bg:        $color-light !default;
+$color-navbar-submenu:          $color-dark-light !default;
+$color-navbar-submenu-bg:       $color-light !default;
+$color-navbar-submenu-active:   $color-primary !default;
+$color-navbar-footer:           $color-dark !default;
+$color-navbar-footer-bg:        $color-light !default;
+$color-navbar-footer-active:    $color-primary !default;
 
 // Basic flash colors
 @include solidus-deprecated-variable("color-success", "brand-success");
-$color-success:                  #52B73B !default;
+$color-success:                  $color-green !default;
 @include solidus-deprecated-variable("color-notice", "brand-warning");
-$color-notice:                   $color-6 !default;
+$color-notice:                   $color-yellow !default;
 @include solidus-deprecated-variable("color-error", "brand-danger");
-$color-error:                    $color-5 !default;
+$color-error:                    $color-red !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%);
+$color-style-guide-code: darken($color-light, 10%);
+$color-style-guide-link: darken($color-light, 65%);
+$color-style-guide-nav: $color-light;
+$color-style-guide-nav-border: darken($color-light, 5%);
+$color-style-guide-nav-link: darken($color-light, 65%);
+$color-style-guide-nav-link-hover: darken($color-light, 5%);
+$color-style-guide-section-border: darken($color-light, 10%);
+$color-style-guide-swatch-border: darken($color-light, 10%);
 
 // Table colors
-$color-tbl-odd:                  $color-1 !default;
-$color-tbl-even:                 very-light($color-3, 4) !default;
-$color-tbl-thead:                very-light($color-3, 4) !default;
+$color-tbl-odd:                  $color-white !default;
+$color-tbl-even:                 very-light($color-dark-light, 4) !default;
+$color-tbl-thead:                very-light($color-dark-light, 4) !default;
 
 // Pill colors
 //

diff --git a/backend/app/assets/stylesheets/spree/backend/globals/mixins/_caret.scss b/backend/app/assets/stylesheets/spree/backend/globals/mixins/_caret.scss
@@ -1,4 +1,4 @@
-@mixin caret($width: 1em, $height: 1em, $direction: up, $color-caret: $color-3) {
+@mixin caret($width: 1em, $height: 1em, $direction: up, $color-caret: $color-dark-light) {
   &:before {
     content: '';
     display: block;

diff --git a/backend/app/assets/stylesheets/spree/backend/globals/mixins/_line_through.scss b/backend/app/assets/stylesheets/spree/backend/globals/mixins/_line_through.scss
@@ -1,4 +1,4 @@
-@mixin line-through($color: $color-2, $background: $body-bg) {
+@mixin line-through($color: $color-primary, $background: $body-bg) {
   position: relative;
   text-align: center;
 

diff --git a/backend/app/assets/stylesheets/spree/backend/sections/_log_entries.scss b/backend/app/assets/stylesheets/spree/backend/sections/_log_entries.scss
@@ -1,13 +1,23 @@
 .log_entry {
   &.success {
-    i {
-      color: $color-2;
-    }
+    background: lighten($color-primary, 15);
+
+    td h4 {
+      color: darken($body-color, 25);
+		  i {
+		    color: $color-2;
+		  }
+		}
   }
 
   &.fail {
-    i {
-      color: $color-5;
-    }
+    background: lighten($color-red, 25);
+
+    td h4 {
+      color: lighten($body-color, 50);
+		  i {
+		    color: $color-5;
+		  }
+		}
   }
 }
diff --git a/backend/app/assets/stylesheets/spree/backend/sections/_products.scss b/backend/app/assets/stylesheets/spree/backend/sections/_products.scss
@@ -31,7 +31,6 @@ div[data-hook="admin_products_index_search_buttons"] {
   margin-bottom: 15px;
 
   strong {
-    color: #5B6778;
     background: #e3ebfd;
     padding: .1em .3em;
     border-radius: 3px;

diff --git a/backend/app/assets/stylesheets/spree/backend/sections/_promotions.scss b/backend/app/assets/stylesheets/spree/backend/sections/_promotions.scss
@@ -97,13 +97,13 @@
   }
 
   &.action-remove {
-    background-color: lighten($color-5, 50);
-    border-color: lighten($color-5, 45);
+    background-color: lighten($color-red, 50);
+    border-color: lighten($color-red, 45);
     text-decoration: line-through;
 
     .promotion-title, input[type="text"], input[type="number"],
     .token-input-list {
-      border-color: lighten($color-5, 45);
+      border-color: lighten($color-red, 45);
     }
   }
 

diff --git a/backend/app/assets/stylesheets/spree/backend/sections/_taxonomies.scss b/backend/app/assets/stylesheets/spree/backend/sections/_taxonomies.scss
@@ -12,7 +12,7 @@
   }
 
   .taxon {
-    background-color: very-light($color-3);
+    background-color: very-light($color-dark-light);
     border: 1px solid $color-border;
     border-radius: $border-radius;
     color: $body-color;

diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss b/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss
@@ -76,7 +76,7 @@ button,
 
     &.disabled,
     &:disabled {
-      color: $color-8;
+      color: $color-disabled;
     }
   }
 
@@ -185,7 +185,7 @@ fieldset {
   }
 
   legend {
-    color: $color-4;
+    color: $color-dark;
     font-size: 14px;
     font-weight: $font-weight-bold;
     text-align: center;

diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_header.scss b/backend/app/assets/stylesheets/spree/backend/shared/_header.scss
@@ -4,7 +4,7 @@
   padding: 15px $grid-gutter-width;
   background-color: $color-header-bg;
   border-bottom: 1px solid $color-border;
-  border-top: 4px solid $color-2;
+  border-top: 4px solid $color-primary;
   height: $main-header-height;
 
   @media print { display: none }
@@ -18,7 +18,7 @@
   -moz-osx-font-smoothing: grayscale;
 
   i {
-    color: $color-2;
+    color: $color-primary;
   }
 }