Replace HEX color - font weight with variables

All the HEX colors and font weight style has been replaced with their variable names. Furthermore an oversight about the new font has been fixed.
mdesantis · May 31, 2019 · 9b2b1c4 · 9b2b1c4
1 parent c42c603
commit 9b2b1c4
Show file tree

Hide file tree

Showing 22 changed files with 101 additions and 83 deletions.
diff --git a/...app/assets/fonts/inter/Inter-Regular.woff → ...tylesheets/fonts/inter/Inter-Regular.woff b/...app/assets/fonts/inter/Inter-Regular.woff → ...tylesheets/fonts/inter/Inter-Regular.woff
diff --git a/...pp/assets/fonts/inter/Inter-Regular.woff2 → ...ylesheets/fonts/inter/Inter-Regular.woff2 b/...pp/assets/fonts/inter/Inter-Regular.woff2 → ...ylesheets/fonts/inter/Inter-Regular.woff2
diff --git a/...pp/assets/fonts/inter/Inter-SemiBold.woff → ...ylesheets/fonts/inter/Inter-SemiBold.woff b/...pp/assets/fonts/inter/Inter-SemiBold.woff → ...ylesheets/fonts/inter/Inter-SemiBold.woff
diff --git a/...p/assets/fonts/inter/Inter-SemiBold.woff2 → ...lesheets/fonts/inter/Inter-SemiBold.woff2 b/...p/assets/fonts/inter/Inter-SemiBold.woff2 → ...lesheets/fonts/inter/Inter-SemiBold.woff2
diff --git a/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss b/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss
@@ -8,7 +8,7 @@
 // Grayscale and brand colors for use across Bootstrap.
 
 $primary:          $color-primary !default;
-$secondary:        #C7CDD5 !default;
+$secondary:        $color-dark-accent !default;
 
 $blue:   $color-primary !default;
 $red:    $color-red !default;
@@ -40,7 +40,7 @@ $grid-gutter-width-base:     1.875rem !default;
 //
 // Font, line-height, and color for body text, headings, and more.
 
-$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$font-family-sans-serif: "Inter", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
 $font-family-monospace:  Menlo, Monaco, Consolas, "Courier New", monospace !default;
 $font-family-base:       "Inter", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
 
@@ -69,7 +69,7 @@ $border-radius:          3px !default;
 
 $input-color:                    $color-dark !default;
 $input-placeholder-color:        $color-dark-light !default;
-$input-border-color:             #D7DAE0 !default;
+$input-border-color:             $color-light-accent !default;
 $input-focus-border-color:       $color-primary !default;
 
 $custom-select-focus-border-color: $input-focus-border-color !default;
@@ -78,7 +78,7 @@ $custom-select-focus-border-color: $input-focus-border-color !default;
 //
 // Dropdown menu container and contents.
 
-$dropdown-link-hover-color:      #fff !default;
+$dropdown-link-hover-color:      $color-white !default;
 $dropdown-link-hover-bg:         $color-primary !default;
 
 // Breadcrumbs
@@ -88,5 +88,4 @@ $breadcrumb-active-color:       $color-primary !default;
 
 // Popover
 
-$popover-header-bg:             #e3ebfd !default;
-
+$popover-header-bg:             $color-primary-light !default;
diff --git a/backend/app/assets/stylesheets/spree/backend/components/_breadcrumb.scss b/backend/app/assets/stylesheets/spree/backend/components/_breadcrumb.scss
@@ -3,14 +3,14 @@
   margin-bottom: 0;
 
   a {
-    color: $color-dark-light;
+    color: $breadcrumb-color;
 
     &:hover {
       color: $breadcrumb-active-color;
     }
   }
 
   .active {
-    font-weight: 600;
+    font-weight: $font-weight-bold;
   }
 }
diff --git a/backend/app/assets/stylesheets/spree/backend/components/_buttons.scss b/backend/app/assets/stylesheets/spree/backend/components/_buttons.scss
@@ -1,12 +1,12 @@
 .btn-default {
-  background: linear-gradient(#FFF, #ECEDF1);
-  color: #24282F;
-  border-color: #C7CDD5;
-  
+  background: linear-gradient($color-white, $color-light-dark);
+  color: $color-dark;
+  border-color: $color-dark-accent;
+
   &:hover {
-    background: linear-gradient(#FFF, darken(#ECEDF1, 3%));
+    background: linear-gradient($color-white, darken($color-light-dark, 3%));
   }
-  
+
   &.disabled,
   &:disabled {
     color: $color-disabled;

diff --git a/backend/app/assets/stylesheets/spree/backend/components/_image_placeholder.scss b/backend/app/assets/stylesheets/spree/backend/components/_image_placeholder.scss
@@ -14,8 +14,8 @@
   display: inline-block;
   margin: auto;
   text-align: center;
-  border: 1px solid #ddd;
-  color: #aaa;
+  border: 1px solid $color-light-dark;
+  color: $color-light-accent;
 
   &:before {
     font: normal normal normal 14px/1 FontAwesome;

diff --git a/backend/app/assets/stylesheets/spree/backend/components/_list_group.scss b/backend/app/assets/stylesheets/spree/backend/components/_list_group.scss
@@ -8,7 +8,7 @@
   padding: 10px 15px;
   // Place the border on the list items and negative margin up for better styling
   margin-bottom: -1px;
-  border: 1px solid #cee1f4;
+  border: 1px solid $color-border;
 
   // Round the first and last items
   &:first-child {
@@ -22,5 +22,5 @@
 
 a.list-group-item:focus {
   text-decoration: none;
-  background-color: #eff5fc;
+  background-color: $color-light;
 }
diff --git a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
@@ -134,7 +134,7 @@ nav.menu {
     text-indent: 2em;
 
     &:before {
-      color: $color-dark-light;
+      color: $color-icon-navbar;
       font-weight: $font-weight-normal;
       position: absolute;
       left: 1em;
@@ -214,7 +214,7 @@ nav.menu {
 
   a {
     display: inline-block;
-    font-weight: 600;
+    font-weight: $font-weight-bold;
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;

diff --git a/backend/app/assets/stylesheets/spree/backend/components/_tabs.scss b/backend/app/assets/stylesheets/spree/backend/components/_tabs.scss
@@ -46,7 +46,7 @@
     background: white;
     border-bottom-color: white;
     color: $color-navbar-active;
-    font-weight: 600;
+    font-weight: $font-weight-bold;
   }
 
   &:not(.active):hover > a {

diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_fonts.scss b/backend/app/assets/stylesheets/spree/backend/globals/_fonts.scss
diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss
@@ -4,29 +4,34 @@
 
 // Fonts
 //--------------------------------------------------------------
-$font-size-pill: 11px;
+$font-size-pill:      11px;
+$label-font-size:     12px;
 
 // Colors
 //--------------------------------------------------------------
 
 // Basic color palette for admin
 
-$color-dark:         #24282F !default;
-$color-dark-light:   #808C9E !default;
+$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:       #3D76F1 !default;
+$color-primary-light: #E3EBFD !default;
 
-$color-light:        #F9FAFB !default;
-$color-light-dark:   #E5E7EB !default;
+$color-light:         #F9FAFB !default;
+$color-light-dark:    #E5E7EB !default;
+$color-light-accent:  #D7DAE0 !default;
 
-$color-white:        #FFFFFF !default;
+$color-white:         #FFFFFF !default;
 
-$color-red:          #CE452A !default;
-$color-yellow:       #FFDD59 !default;
-$color-green:        #52B73B !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:       $color-light-dark !default;
@@ -46,27 +51,33 @@ $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-green !default;
+$color-success:                 $color-green !default;
 @include solidus-deprecated-variable("color-notice", "brand-warning");
-$color-notice:                   $color-yellow !default;
+$color-notice:                  $color-yellow !default;
 @include solidus-deprecated-variable("color-error", "brand-danger");
-$color-error:                    $color-red !default;
+$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-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-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-white !default;
@@ -155,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;
diff --git a/backend/app/assets/stylesheets/spree/backend/sections/_orders.scss b/backend/app/assets/stylesheets/spree/backend/sections/_orders.scss
@@ -17,7 +17,7 @@
   .order-total {
     font-size: 35px;
     font-weight: $font-weight-bold;
-    background: #e3ebfd;
+    background: $color-primary-light;
     padding: .1em .3em;
     border-radius: 3px;
   }
@@ -30,7 +30,7 @@
   .customer {
     font-size: 20px;
     font-weight: $font-weight-bold;
-    background: #e3ebfd;
+    background: $color-primary-light;
     padding: .1em .3em;
     border-radius: 3px;
   }
@@ -41,14 +41,14 @@
     color: $body-color;
 
     .shipment-number {
-      color: #5B6778;
-      background: #e3ebfd;
+      color: $color-dark-dark;
+      background: $color-primary-light;
       padding: .1em .3em;
       border-radius: 3px;
     }
     .stock-location-name {
-      color: #5B6778;
-      background: #e3ebfd;
+      color: $color-dark-dark;
+      background: $color-primary-light;
       padding: .1em .3em;
       border-radius: 3px;
       word-break: break-word;
@@ -69,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;
 }
 

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,7 @@ div[data-hook="admin_products_index_search_buttons"] {
   margin-bottom: 15px;
 
   strong {
-    background: #e3ebfd;
+    background: $color-primary-light;
     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
@@ -51,7 +51,7 @@
       top: 10px;
 
       &:hover {
-        color: #c60f13;
+        color: $color-red;
       }
     }
   }
@@ -71,7 +71,7 @@
       top: 10px;
 
       &:hover {
-        color: #c60f13;
+        color: $color-red;
       }
     }
   }

diff --git a/backend/app/assets/stylesheets/spree/backend/sections/_style_guide.scss b/backend/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;
       }
     }
 
@@ -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;
       }
     }
   }

diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_fonts.scss b/backend/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("../../fonts/inter/Inter-Regular.woff2") format("woff2"),
+       font-url("../../fonts/inter/Inter-Regular.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: $font-weight-bold;
+  src: font-url("../../fonts/inter/Inter-SemiBold.woff2") format("woff2"),
+       font-url("../../fonts/inter/Inter-SemiBold.woff") format("woff");
+}
diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss b/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss
@@ -41,7 +41,7 @@ textarea {
 }
 
 label {
-  font-size: 12px;
+  font-size: inherit;
 
   &.required:after {
     content: " *";
@@ -66,12 +66,13 @@ 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;
-    background: linear-gradient(#FFF, #ECEDF1);
-    color: #24282F;
-    border-color: #C7CDD5;
+    background: linear-gradient($color-white, $color-light-dark);
+    color: $color-dark;
+    border-color: $color-dark-accent;
 
     &:hover {
-      background: linear-gradient(#FFF, darken(#ECEDF1, 3%));
+      background: linear-gradient($color-white, darken($color-light-dark, 3%));
+      color: $color-primary;
     }
 
     &.disabled,
@@ -119,6 +120,10 @@ span.info {
       margin-top: 2.25rem;
     }
   }
+
+  label {
+    font-size: $label-font-size;
+  }
 
   ul {
     list-style: none;