Merge pull request #3192 from nebulab/mfrecchiami/color-palette-update

Update admin color palette and font
solidusio · May 31, 2019 · 1611335 · 1611335
2 parents 8f3ea04 + c5fb960
commit 1611335
Show file tree

Hide file tree

Showing 54 changed files with 407 additions and 191 deletions.
diff --git a/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss b/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss
@@ -7,24 +7,27 @@
 //
 // Grayscale and brand colors for use across Bootstrap.
 
-$blue:   $color-3 !default;
-$red:    $color-5 !default;
-$orange: $color-6 !default;
-$green:  $color-2 !default;
+$primary:          $color-primary !default;
+$secondary:        $color-dark-accent !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
@@ -37,9 +40,9 @@ $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:       "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
+$font-family-base:       "Inter", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
 
 $font-size-root: 13px !default;
 
@@ -54,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
 //
@@ -64,20 +67,25 @@ $border-radius:          3px !default;
 
 // Forms
 
-$input-color:                    $color-3 !default;
-$input-border-color:             $color-border !default;
-$input-focus-border-color:       $color-2 !default;
+$input-color:                    $color-dark !default;
+$input-placeholder-color:        $color-dark-light !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;
 
 // Dropdowns
 //
 // Dropdown menu container and contents.
 
-$dropdown-link-hover-color:      #fff !default;
-$dropdown-link-hover-bg:         $color-3 !default;
+$dropdown-link-hover-color:      $color-white !default;
+$dropdown-link-hover-bg:         $color-primary !default;
 
 // Breadcrumbs
 
 $breadcrumb-bg:                 transparent !default;
-$breadcrumb-active-color:       $color-4 !default;
+$breadcrumb-active-color:       $color-primary !default;
+
+// Popover
+
+$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
@@ -1,4 +1,16 @@
 .breadcrumb {
   font-size: 16px;
   margin-bottom: 0;
+
+  a {
+    color: $breadcrumb-color;
+
+    &:hover {
+      color: $breadcrumb-active-color;
+    }
+  }
+
+  .active {
+    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
@@ -0,0 +1,18 @@
+.btn-default {
+  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);
+  }
+
+  &.disabled,
+  &:disabled {
+    color: $color-disabled;
+  }
+}
+
+.btn-primary {
+  border-color: darken($color-primary, 6%);
+}
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/_messages.scss b/backend/app/assets/stylesheets/spree/backend/components/_messages.scss
@@ -1,14 +1,13 @@
 .errorExplanation {
-  padding: 5px;
-  border: 1px solid very-light(theme-color("danger"), 12);
-  background-color: very-light(theme-color("danger"), 6);
-  border-radius: 3px;
-  color: very-light(theme-color("danger"), 30);
+  padding: 10px 15px;
+  border-top: 3px solid theme-color("danger");
+  background-color: lighten(theme-color("danger"), 40);
+  border-radius: 0 0 $border-radius $border-radius;
+  color: $body-color;
   margin-bottom: 15px;
 
   h2 {
     font-size: 140%;
-    color: very-light(theme-color("danger"), 30);
     margin-bottom: 5px;
   }
 
@@ -34,15 +33,24 @@
 }
 
 .flash {
+  border-top: 3px solid;
   padding: 16px;
   text-align: center;
   font-size: 120%;
-  color: $color-1;
-  font-weight: $font-weight-bold;
+  color: $body-color;
 
-  &.notice  { background-color: rgba(theme-color("warning"),  0.8) }
-  &.success { background-color: rgba(theme-color("success"), 0.8) }
-  &.error   { background-color: rgba(theme-color("danger"),   0.8) }
+  &.notice {
+    background-color: rgba(very-light($color-notice, 15), .95);
+    border-top-color: $color-notice;
+  }
+  &.success {
+    background-color: rgba(very-light($color-success, 30), .95);
+    border-top-color: $color-success;
+  }
+  &.error {
+    background-color: rgba(very-light($color-error, 30), .95);
+    border-top-color: $color-error;
+  }
 }
 
 .alert {
@@ -53,5 +61,5 @@
     text-decoration: underline;
   }
 
-  &.error a { color: very-light(theme-color("danger"), 10) }
+  &.error a { color: lighten(theme-color("danger"), 8); }
 }
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,17 +32,21 @@ 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;
   // Using line height for proper vertical centering.
   // As line height does not take the border width into account we need to subtract it.
   line-height: $main-header-height - 1px;
 }
 
 .admin-nav-menu {
+  > ul {
+    margin: 1.5em 0 0;
+  }
+
   ul {
-    margin: 0;
     padding: 0;
     list-style: none;
   }
@@ -62,7 +66,7 @@ nav.menu {
       background: $color-navbar-active-bg;
 
       > a {
-        color: $color-navbar-active;
+        color: $color-navbar;
       }
     }
 
@@ -84,15 +88,37 @@ nav.menu {
         left: 100%;
         width: $width-sidebar-flyout;
         margin-left: 0;
-        border: $border-sidebar;
-        background: $color-navbar-submenu-bg;
-        box-shadow: $box-shadow;
-        @include caret($direction: left, $color-caret: $color-navbar-submenu-bg);
+        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-white);
 
       &:before {
         z-index: 1;
         top: 1.5em;
       }
+
+      &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        border-width: 1em 1em;
+        border-style: solid;
+        border-color: transparent;
+        border-right-color: $color-border;
+        left: -2.1em;
+        top: 1.5em;
+        margin-top: -1em;
+      }
+
+      > li {
+        background: $color-white;
+
+        a {
+          font-weight: $font-weight-bold;
+        }
+      }
      }
     }
   }
@@ -101,13 +127,15 @@ nav.menu {
     display: block;
     padding: $padding-y-navbar $padding-x-navbar;
     color: $color-navbar;
-    font-weight: normal;
+    font-weight: $font-weight-bold;
   }
 
   .icon_link {
     text-indent: 2em;
 
     &:before {
+      color: $color-icon-navbar;
+      font-weight: $font-weight-normal;
       position: absolute;
       left: 1em;
       transform: translateX(-50%);
@@ -123,6 +151,7 @@ nav.menu {
 
   .admin-subnav {
     background: $color-navbar-submenu-bg;
+    margin: 0;
     padding-top:    $padding-y-navbar - $padding-y-navbar-submenu;
     padding-bottom: $padding-y-navbar - $padding-y-navbar-submenu;
 
@@ -132,6 +161,7 @@ nav.menu {
 
     a {
       color: $color-navbar-submenu;
+      font-weight: $font-weight-normal;
       padding-top:    $padding-y-navbar-submenu;
       padding-bottom: $padding-y-navbar-submenu;
 
@@ -143,6 +173,7 @@ nav.menu {
     .selected {
       a {
         color: $color-navbar-submenu-active;
+        font-weight: $font-weight-bold;
       }
     }
   }
@@ -183,6 +214,7 @@ nav.menu {
 
   a {
     display: inline-block;
+    font-weight: $font-weight-bold;
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -193,3 +225,7 @@ nav.menu {
     margin-right: 0.5rem;
   }
 }
+
+.brand-link {
+  display: block;
+}
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,7 +12,6 @@
 
 .sidebar-title {
   @include line-through($color: $color-border);
-  color: $color-2;
+  color: $color-dark;
   font-size: 14px;
-  font-weight: $font-weight-normal;
 }