solidus_backend 2.8.5 → 2.9.2

data/app/assets/stylesheets/spree/backend/components/_tabs.scss

@@ -1,7 +1,7 @@
 .tabs {
   display: flex;
   margin: 1em 0;
-  border-bottom: 1px solid $color-border;
+  border-bottom: 1px solid $color-tab-border;
   white-space: nowrap;
 
   &,
@@ -23,12 +23,13 @@
 
   // Move down one pixel to sit on top of the ul's border-bottom
   position: relative;
-  top: 1px;
+  top: 2px;
 
   > a {
+    color: $color-tab;
     display: block;
-    border: 1px solid $color-border;
-    border-radius: 2px 2px 0 0;
+    border: 1px solid $color-tab-border;
+    border-radius: 4px 4px 0 0;
     line-height: 1;
   }
 
@@ -37,19 +38,19 @@
   }
 
   &:not(.active) > a {
-    background: $color-tbl-thead;
+    background: $color-tab-bg;
   }
 
   &.active > a,
   &.active:hover {
-    background: white;
-    border-bottom-color: white;
-    color: $body-color;
+    background: $color-tab-active-bg;
+    border-bottom-color: $color-tab-active-border;
+    color: $color-tab-active;
+    font-weight: $font-weight-bold;
   }
 
   &:not(.active):hover > a {
-    background: darken($color-tbl-thead, 5%);
-    color: $link-color;
+    color: $color-tab-active;
   }
 }
 
@@ -69,7 +70,7 @@
 
   > a {
     position: relative;
-    background: white;
+    background: $color-tab-active-bg;
     z-index: 1;
 
     &:before {
@@ -80,7 +81,7 @@
   }
 
   &:hover > a {
-    background: white;
+    background: $color-tab-active-bg;
   }
 
   &:not(:hover) ul {
@@ -98,7 +99,7 @@
 .tabs li.in-dropdown {
   a {
     display: block;
-    border: 1px solid $color-border;
+    border: 1px solid $color-tab-border;
     background: white;
   }
 

data/app/assets/stylesheets/spree/backend/globals/_deprecated_variables.scss

@@ -0,0 +1,24 @@
+// Numbered colors variables are deprecated and will be removed in Solidus v3.0
+@include solidus-deprecated-variable("color-1", "color-white");
+$color-1:    $color-white !default;
+
+@include solidus-deprecated-variable("color-2", "color-primary");
+$color-2:    $color-primary !default;
+
+@include solidus-deprecated-variable("color-3", "color-dark-light");
+$color-3:    $color-dark-light !default;
+
+@include solidus-deprecated-variable("color-4", "color-dark");
+$color-4:    $color-dark !default;
+
+@include solidus-deprecated-variable("color-5", "color-red");
+$color-5:    $color-red !default;
+
+@include solidus-deprecated-variable("color-6", "color-yellow");
+$color-6:    $color-yellow !default;
+
+@include solidus-deprecated-variable("color-7", "color-light");
+$color-7:    $color-light !default;
+
+@include solidus-deprecated-variable("color-8", "color-dark-light");
+$color-8:    $color-dark-light !default;

data/app/assets/stylesheets/spree/backend/globals/_deprecation.scss

@@ -7,7 +7,7 @@
 
 $output-solidus-deprecation-warnings: true !default;
 
-@mixin solidus-deprecated-variable($variable, $replacement) {
+@mixin bs-deprecated-variable($variable, $replacement) {
   @if $output-solidus-deprecation-warnings == true {
     @if global-variable-exists($variable) {
       @warn "[Solidus] [Deprecation] `$#{$variable}` is deprecated and will be " +
@@ -15,3 +15,12 @@ $output-solidus-deprecation-warnings: true !default;
     }
   }
 }
+
+@mixin solidus-deprecated-variable($variable, $replacement) {
+  @if $output-solidus-deprecation-warnings == true {
+    @if global-variable-exists($variable) {
+      @warn "[Solidus] [Deprecation] `$#{$variable}` is deprecated and will be " +
+        "removed in Solidus 3.0. Please use `$#{$replacement}` instead";
+    }
+  }
+}

data/app/assets/stylesheets/spree/backend/globals/_functions.scss

@@ -1,5 +1,7 @@
 // Make color very close to white
 @function very-light($color, $adjust: 3){
+  @warn "The `very-light` function is deprecated. Please use the default sass `lighten` function, instead.";
+  
   @if type-of($adjust) == 'number' and $adjust > 0 {
     @for $i from 0 through 100 {
       @if lighten($color, $i) == white and ($i - $adjust) > $adjust {

data/app/assets/stylesheets/spree/backend/globals/_variables.scss

@@ -4,65 +4,93 @@
 
 // Fonts
 //--------------------------------------------------------------
-$font-size-pill: 11px;
+$font-size-pill:      11px;
+$label-font-size:     12px;
 
 // Colors
 //--------------------------------------------------------------
 
 // Basic color palette for admin
-$color-1:                        #FFFFFF !default;    // White
-$color-2:                        #9FC820 !default;    // Green
-$color-3:                        #5498DA !default;    // Light Blue
-$color-4:                        #6788A2 !default;    // Dark Blue
-$color-5:                        #C60F13 !default;    // Red
-$color-6:                        #FF9300 !default;    // Yellow
-$color-7:                        #F4F4F4 !default;    // Light Gray
+
+$color-dark:          #24282F !default;
+$color-dark-dark:     #5B6778 !default;
+$color-dark-light:    #808C9E !default;
+$color-dark-accent:   #C7CDD5 !default;
+
+$color-primary:       #3D76F1 !default;
+$color-primary-light: #E3EBFD !default;
+
+$color-light:         #F9FAFB !default;
+$color-light-dark:    #E5E7EB !default;
+$color-light-accent:  #D7DAE0 !default;
+
+$color-white:         #FFFFFF !default;
+
+$color-red:           #CE452A !default;
+$color-yellow:        #FFDD59 !default;
+$color-green:         #52B73B !default;
 
 // Basic accents for admin
-$box-shadow:                     0px 3px 3px -2px hsla(0, 0%, 0%, 0.2) !default;
+$box-shadow:          0 0 4px 0 rgba(0, 0, 0, .12) !default;
 
 // Body base colors
-$color-border:                   very-light($color-3, 12) !default;
+$color-border:       $color-light-dark !default;
+$color-disabled:     $color-dark-light !default;
 
 // Basic navigation colors
-$color-sidebar-bg:              $color-1 !default;
+$color-header-bg:               $color-light !default;
+$color-sidebar-bg:              $color-light !default;
 $color-sidebar-border:          $color-border !default;
-$color-navbar:                  $color-1 !default;
-$color-navbar-bg:               $color-3 !default;
-$color-navbar-active:           $color-1 !default;
-$color-navbar-active-bg:        $color-2 !default;
-$color-navbar-submenu:          $color-3 !default;
-$color-navbar-submenu-bg:       very-light($color-navbar-bg, 4) !default;
-$color-navbar-submenu-active:   $color-2 !default;
-$color-navbar-footer:           $color-3 !default;
-$color-navbar-footer-bg:        $color-sidebar-bg !default;
-$color-navbar-footer-active:    $color-2 !default;
+$color-navbar:                  $color-dark !default;
+$color-navbar-bg:               $color-light !default;
+$color-navbar-active:           $color-white !default;
+$color-navbar-active-bg:        $color-primary !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;
+$color-icon-navbar:             $color-dark-light !default;
+
+// Basic Tabs colors
+$color-tab:                     $color-dark-light !default;
+$color-tab-bg:                  $color-light !default;
+$color-tab-border:              $color-border !default;
+$color-tab-active:              $color-primary !default;
+$color-tab-active-bg:           $color-white !default;
+$color-tab-active-border:       $color-white !default;
 
 // Basic flash colors
-@include solidus-deprecated-variable("color-success", "brand-success");
-$color-success:                  $color-2 !default;
-@include solidus-deprecated-variable("color-notice", "brand-warning");
-$color-notice:                   $color-6 !default;
-@include solidus-deprecated-variable("color-error", "brand-danger");
-$color-error:                    $color-5 !default;
+@include bs-deprecated-variable("color-success", "brand-success");
+$color-success:                 $color-green !default;
+@include bs-deprecated-variable("color-notice", "brand-warning");
+$color-notice:                  $color-yellow !default;
+@include bs-deprecated-variable("color-error", "brand-danger");
+$color-error:                   $color-red !default;
+
+// Breadcrumb custom variable
+
+$breadcrumb-color: $color-dark-light;
 
 // Color for spinner
-$color-spinner: #fff;
+$color-spinner: $color-white;
 
 // 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%);
+$color-style-guide-table-border:    #CEE1F4;
 
 // 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:                 $color-light !default;
+$color-tbl-thead:                $color-light !default;
 
 // Pill colors
 //
@@ -86,24 +114,24 @@ $color-pill-error: #ff967b;
 $color-pill-error-text: $color-pill-text;
 
 // Actions colors
-$color-action-edit-bg:           very-light($color-success, 5  ) !default;
-$color-action-edit-brd:          very-light($color-success, 20 ) !default;
-$color-action-clone-bg:          very-light($color-notice,  5  ) !default;
-$color-action-clone-brd:         very-light($color-notice,  15 ) !default;
-$color-action-remove-bg:         very-light($color-error,   5  ) !default;
-$color-action-remove-brd:        very-light($color-error,   10 ) !default;
-$color-action-void-bg:           very-light($color-error,   10 ) !default;
-$color-action-void-brd:          very-light($color-error,   20 ) !default;
-$color-action-cancel-bg:         very-light($color-notice,  10 ) !default;
-$color-action-cancel-brd:        very-light($color-notice,  20 ) !default;
-$color-action-capture-bg:        very-light($color-success, 5  ) !default;
-$color-action-capture-brd:       very-light($color-success, 20 ) !default;
-$color-action-save-bg:           very-light($color-success, 5  ) !default;
-$color-action-save-brd:          very-light($color-success, 20 ) !default;
-$color-action-mail-bg:           very-light($color-success, 5  ) !default;
-$color-action-mail-brd:          very-light($color-success, 20 ) !default;
-$color-action-failure-bg:        very-light($color-error,   10 ) !default;
-$color-action-failure-brd:       very-light($color-error,   20 ) !default;
+$color-action-edit-bg:           lighten($color-success, (5 * 5)  ) !default;
+$color-action-edit-brd:          lighten($color-success, (20 * 5) ) !default;
+$color-action-clone-bg:          lighten($color-notice,  (5 * 5)  ) !default;
+$color-action-clone-brd:         lighten($color-notice,  (15 * 5) ) !default;
+$color-action-remove-bg:         lighten($color-error,   (5 * 5)  ) !default;
+$color-action-remove-brd:        lighten($color-error,   (10 * 5) ) !default;
+$color-action-void-bg:           lighten($color-error,   (10 * 5) ) !default;
+$color-action-void-brd:          lighten($color-error,   (20 * 5) ) !default;
+$color-action-cancel-bg:         lighten($color-notice,  (10 * 5) ) !default;
+$color-action-cancel-brd:        lighten($color-notice,  (20 * 5) ) !default;
+$color-action-capture-bg:        lighten($color-success, (5 * 5)  ) !default;
+$color-action-capture-brd:       lighten($color-success, (20 * 5) ) !default;
+$color-action-save-bg:           lighten($color-success, (5 * 5)  ) !default;
+$color-action-save-brd:          lighten($color-success, (20 * 5) ) !default;
+$color-action-mail-bg:           lighten($color-success, (5 * 5)  ) !default;
+$color-action-mail-brd:          lighten($color-success, (20 * 5) ) !default;
+$color-action-failure-bg:        lighten($color-error,   (10 * 5) ) !default;
+$color-action-failure-brd:       lighten($color-error,   (20 * 5) ) !default;
 
 // Available states
 $states: (
@@ -146,3 +174,6 @@ $border-sidebar:                 1px solid $color-sidebar-border !default;
 // Main
 //--------------------------------------------------------------
 $main-header-height:             75px !default;
+
+$content-wrapper-bg:             $color-white;
+$admin-body-bg:                  $color-white;

data/app/assets/stylesheets/spree/backend/globals/_variables_override.scss

@@ -5,3 +5,4 @@
   file in your application and set variables according to
   globals/_variables.scss file.
   --------------------------------------------------------- */
+

data/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;

data/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;
 

data/app/assets/stylesheets/spree/backend/sections/_log_entries.scss

@@ -1,17 +1,23 @@
 .log_entry {
   &.success {
-    background: lighten($color-2, 15);
+    background: lighten($color-primary, 15);
 
     td h4 {
       color: darken($body-color, 25);
+      i {
+        color: $color-primary;
+      }
     }
   }
 
   &.fail {
-    background: lighten($color-5, 25);
+    background: lighten($color-red, 25);
 
     td h4 {
       color: lighten($body-color, 50);
+      i {
+        color: $color-red;
+      }
     }
   }
 }

data/app/assets/stylesheets/spree/backend/sections/_orders.scss

@@ -17,7 +17,9 @@
   .order-total {
     font-size: 35px;
     font-weight: $font-weight-bold;
-    color: theme-color("success");
+    background: $color-primary-light;
+    padding: .1em .3em;
+    border-radius: 3px;
   }
 }
 
@@ -28,7 +30,9 @@
   .customer {
     font-size: 20px;
     font-weight: $font-weight-bold;
-    color: theme-color("success");
+    background: $color-primary-light;
+    padding: .1em .3em;
+    border-radius: 3px;
   }
 }
 
@@ -37,10 +41,17 @@
     color: $body-color;
 
     .shipment-number {
-      color: theme-color("success");
+      color: $color-dark-dark;
+      background: $color-primary-light;
+      padding: .1em .3em;
+      border-radius: 3px;
     }
     .stock-location-name {
-      color: theme-color("success");
+      color: $color-dark-dark;
+      background: $color-primary-light;
+      padding: .1em .3em;
+      border-radius: 3px;
+      word-break: break-word;
     }
   }
 }
@@ -58,8 +69,8 @@ label[for="order_bill_address_attributes_firstname"] {
 }
 
 #risk_analysis legend {
-  background-color: #c00;
-  color: #FFF;
+  background-color: $color-red;
+  color: $color-white;
   font-size: 2em;
 }
 

data/app/assets/stylesheets/spree/backend/sections/_products.scss

@@ -31,7 +31,9 @@ div[data-hook="admin_products_index_search_buttons"] {
   margin-bottom: 15px;
 
   strong {
-    color: $color-2;
+    background: $color-primary-light;
+    padding: .1em .3em;
+    border-radius: 3px;
   }
 }
 

data/app/assets/stylesheets/spree/backend/sections/_promotions.scss

@@ -51,7 +51,7 @@
       top: 10px;
 
       &:hover {
-        color: #c60f13;
+        color: $color-red;
       }
     }
   }
@@ -71,7 +71,7 @@
       top: 10px;
 
       &:hover {
-        color: #c60f13;
+        color: $color-red;
       }
     }
   }
@@ -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);
     }
   }