solidus_backend 2.8.6 → 2.9.0.rc.1

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

@@ -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-navbar-submenu;
     display: block;
     border: 1px solid $color-border;
-    border-radius: 2px 2px 0 0;
+    border-radius: 4px 4px 0 0;
     line-height: 1;
   }
 
@@ -44,12 +45,12 @@
   &.active:hover {
     background: white;
     border-bottom-color: white;
-    color: $body-color;
+    color: $color-navbar-active;
+    font-weight: $font-weight-bold;
   }
 
   &:not(.active):hover > a {
-    background: darken($color-tbl-thead, 5%);
-    color: $link-color;
+    color: $color-navbar-active;
   }
 }
 

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/_variables.scss

@@ -4,65 +4,85 @@
 
 // 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-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;
+$color-icon-navbar:             $color-dark-light !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:                 very-light($color-dark-light, 4) !default;
+$color-tbl-thead:                very-light($color-dark-light, 4) !default;
 
 // Pill colors
 //
@@ -146,3 +166,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);
     }
   }
 

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

@@ -48,7 +48,7 @@
 
       > a {
         font-size: 1.2rem;
-        font-weight: 300;
+        font-weight: $font-weight-normal;
       }
     }
 
@@ -64,7 +64,7 @@
   }
 
   &-intro,
-  &-section:not(:last-child) {
+  &-section {
     margin: 4rem 0;
   }
 
@@ -112,8 +112,8 @@
   table.with-actions-borders {
     th, td {
       &.actions {
-        border-right: 1px solid #cee1f4 !important;
-        border-bottom: 1px solid #cee1f4 !important;
+        border-right: 1px solid $color-style-guide-table-border !important;
+        border-bottom: 1px solid $color-style-guide-table-border !important;
       }
     }
   }

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

data/app/assets/stylesheets/spree/backend/shared/_fonts.scss

@@ -0,0 +1,15 @@
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: $font-weight-normal;
+  src: font-url("inter/Inter-Regular.woff2") format("woff2"),
+       font-url("inter/Inter-Regular.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: $font-weight-bold;
+  src: font-url("inter/Inter-SemiBold.woff2") format("woff2"),
+       font-url("inter/Inter-SemiBold.woff") format("woff");
+}

data/app/assets/stylesheets/spree/backend/shared/_forms.scss

@@ -41,6 +41,8 @@ textarea {
 }
 
 label {
+  font-size: inherit;
+  
   &.required:after {
     content: " *";
   }
@@ -64,7 +66,19 @@ button,
     // In order to avoid the clashing between using `:not(.btn)` and
     // `@extend .btn` we need to use an attribute selector of `[class*="btn"]`.
     @extend .btn;
-    @include button-variant(theme-color("primary"), theme-color("primary"));
+    background: linear-gradient($color-white, lighten($color-light-dark, 2%));
+    color: $color-dark;
+    border-color: $color-dark-accent;
+    
+    &:hover {
+      background: linear-gradient($color-white, $color-light-dark);
+      color: $color-primary;
+    }
+    
+    &.disabled,
+    &:disabled {
+      color: $color-disabled;
+    }
   }
 
   &:before {
@@ -106,6 +120,10 @@ span.info {
       margin-top: 2.25rem;
     }
   }
+  
+  label {
+    font-size: $label-font-size;
+  }
 
   ul {
     list-style: none;
@@ -131,21 +149,21 @@ span.info {
   &.withError {
     .field_with_errors {
       label {
-        color: very-light(theme-color("danger"), 30);
+        color: theme-color("danger");
       }
 
       input {
-        border-color: very-light(theme-color("danger"), 15);
+        border-color: theme-color("danger");
       }
     }
     .formError {
-      color: very-light(theme-color("danger"), 30);
+      color: lighten(theme-color("danger"), 15);
       font-style: italic;
       font-size: 85%;
     }
     .select2-container {
       border-radius: 4px;
-      border: 1px solid very-light(theme-color("danger"), 15);
+      border: 1px solid theme-color("danger");
     }
   }
 }
@@ -172,12 +190,14 @@ fieldset {
   }
 
   legend {
-    color: $color-2;
-    font-size: 16px;
+    color: $color-dark;
+    font-size: 14px;
     font-weight: $font-weight-bold;
     text-align: center;
     padding: 8px 15px;
     width: auto;
+    margin-left: auto;
+    margin-right: auto;
 
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;