Change new nav purple to indigo34402-navigation-color-palette-for-new-navigation

3 files changed, 132 insertions, 73 deletions

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index da4d91511e0..97fb841ab35 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -74,11 +74,17 @@ $red-700: #a62d19;
 $red-800: #8b2615;
 $red-900: #711e11;
 
-$purple-600: #6e49cb;
-$purple-650: #5c35ae;
-$purple-700: #4a2192;
-$purple-800: #2c0a5c;
-$purple-900: #380d75;
+$indigo-50: #f7f7ff;
+$indigo-100: #ebebfa;
+$indigo-200: #d1d1f0;
+$indigo-300: #a6a6de;
+$indigo-400: #7c7ccc;
+$indigo-500: #6666c4;
+$indigo-600: #5b5bbd;
+$indigo-700: #4b4ba3;
+$indigo-800: #393982;
+$indigo-900: #292961;
+$indigo-950: #1a1a40;
 
 $black: #000;
 $black-transparent: rgba(0, 0, 0, 0.3);
diff --git a/app/assets/stylesheets/new_nav.scss b/app/assets/stylesheets/new_nav.scss
index bfb7a0c7e25..73cb3a7cf4c 100644
--- a/app/assets/stylesheets/new_nav.scss
+++ b/app/assets/stylesheets/new_nav.scss
@@ -4,7 +4,7 @@
 
 header.navbar-gitlab-new {
   color: $white-light;
-  background-color: $purple-900;
+  background: linear-gradient(to right, $indigo-900, $indigo-800);
   border-bottom: 0;
 
   .header-content {
@@ -24,11 +24,9 @@ header.navbar-gitlab-new {
       > a {
         display: flex;
         align-items: center;
-        padding-top: 3px;
         padding-right: $gl-padding;
         padding-left: $gl-padding;
         margin-left: -$gl-padding;
-        border-bottom: 3px solid transparent;
 
         @media (min-width: $screen-sm-min) {
           padding-right: $gl-padding;
@@ -45,9 +43,8 @@ header.navbar-gitlab-new {
 
         &:hover,
         &:focus {
-          color: currentColor;
+          color: $tanuki-yellow;
           text-decoration: none;
-          border-bottom-color: $white-light;
         }
       }
     }
@@ -71,7 +68,7 @@ header.navbar-gitlab-new {
 
   .navbar-collapse {
     padding-left: 0;
-    color: $white-light;
+    color: $indigo-200;
     box-shadow: 0;
 
     @media (max-width: $screen-xs-max) {
@@ -101,7 +98,7 @@ header.navbar-gitlab-new {
       font-size: 14px;
       text-align: center;
       color: currentColor;
-      border-left: 1px solid lighten($purple-700, 10%);
+      border-left: 1px solid lighten($indigo-700, 10%);
 
       &:hover,
       &:focus,
@@ -120,6 +117,7 @@ header.navbar-gitlab-new {
       li {
         .badge {
           box-shadow: none;
+          font-weight: 600;
         }
       }
     }
@@ -133,12 +131,11 @@ header.navbar-gitlab-new {
 
       > a {
         background: none;
-        opacity: .9;
-        will-change: opacity;
+        will-change: color;
 
         &.header-user-dropdown-toggle {
           .header-user-avatar {
-            border-color: $white-light;
+            border-color: $indigo-200;
           }
         }
 
@@ -165,29 +162,34 @@ header.navbar-gitlab-new {
 .navbar-sub-nav {
   display: flex;
   margin-bottom: 0;
-  color: $white-light;
+  color: $indigo-200;
 
   > li {
-    &.active > a,
-    a:hover,
-    a:focus {
-      border-bottom-color: $white-light;
+    > a:hover,
+    > a:focus {
+      box-shadow: inset 0 -3px 0 rgba($indigo-200, .4);
       text-decoration: none;
       outline: 0;
-      opacity: 1;
+      color: $white-light;
+    }
+
+    &.active > a {
+      box-shadow: inset 0 -3px 0 $indigo-500;
+      color: $white-light;
+      font-weight: 700;
     }
 
     > a {
       display: block;
-      padding: 16px 10px 13px;
+      padding: 16px 10px;
       font-size: 13px;
       color: currentColor;
-      border-bottom: 3px solid transparent;
-      opacity: .9;
-      will-change: opacity;
+      box-shadow: inset 0 0 0 transparent;
+      will-change: box-shadow;
+      transition: box-shadow 0.15s;
 
       @media (min-width: $screen-sm-min) {
-        padding: 15px $gl-padding 12px;
+        padding: 15px $gl-padding;
         font-size: 14px;
       }
     }
@@ -207,55 +209,60 @@ header.navbar-gitlab-new {
 
 .search {
   form {
-    border-color: $purple-800;
+    border: 0;
+    background-color: rgba($indigo-200, .2);
+    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, background-color ease-in-out 0.15s;
 
     &:hover {
-      border-color: rgba($white-light, .6);
+      background-color: rgba($indigo-200, .3);
       box-shadow: none;
     }
   }
 
   &.search-active form {
-    border-color: $white-light;
-  }
-
-  form,
-  .search-input {
-    background-color: $purple-700;
+    background-color: rgba($indigo-200, .3);
+    box-shadow: none;
   }
 
   .search-input {
     color: $white-light;
+    background: none;
   }
 
   .search-input::placeholder {
-    color: rgba($white-light, .6);
+    color: rgba($indigo-200, .8);
   }
 
   .location-badge {
     font-size: 12px;
-    color: rgba($white-light, .6);
-    background-color: $purple-800;
+    color: $indigo-100;
+    background-color: rgba($indigo-200, .1);
     transition: color 0.15s;
     will-change: color;
+    margin: -4px 4px -4px -4px;
+    line-height: 25px;
+    padding: 4px 8px;
+    border-radius: 2px 0 0 2px;
+    border-right: 1px solid $indigo-800;
+    height: 34px;
   }
 
   .search-input-wrap {
     .search-icon,
     .clear-icon {
-      color: rgba($white-light, .6);
+      color: rgba($indigo-200, .8);
     }
   }
 
   &.search-active {
     .location-badge {
       color: $white-light;
-      background-color: $purple-800;
+      background-color: rgba($indigo-200, .2);
     }
 
     .search-input-wrap {
       .search-icon {
-        color: rgba($white-light, .6);
+        color: rgba($indigo-200, .8);
       }
 
       .clear-icon {
diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss
index 17f23f7fce3..de42d185239 100644
--- a/app/assets/stylesheets/new_sidebar.scss
+++ b/app/assets/stylesheets/new_sidebar.scss
@@ -2,6 +2,15 @@
 @import 'framework/tw_bootstrap_variables';
 @import "bootstrap/variables";
 
+$active-background: rgba(0,0,0,.04);
+$active-border: $indigo-500;
+$active-color: $indigo-700;
+$active-hover-background: $active-background;
+$active-hover-color: $gl-text-color;
+$inactive-badge-background: rgba(0,0,0,.08);
+$hover-background: $indigo-700;
+$hover-color: $white-light;
+$inactive-color: $gl-text-color-secondary;
 $new-sidebar-width: 220px;
 
 .page-with-new-sidebar {
@@ -17,24 +26,39 @@ $new-sidebar-width: 220px;
 }
 
 .context-header {
-  background-color: $gray-normal;
   border-bottom: 1px solid $border-color;
   font-weight: 600;
   display: flex;
   align-items: center;
-  padding: 10px 14px;
+  padding: 10px 16px 10px 10px;
+  color: $gl-text-color;
 
   .avatar-container {
     flex: 0 0 40px;
   }
 
   &:hover {
-    background-color: $border-color;
+    background-color: $hover-background;
+    color: $hover-color;
+    border-color: $hover-background;
+
+    .avatar-container {
+      border-color: transparent;
+    }
+
+    .settings-avatar {
+      background-color: $indigo-500;
+
+      i {
+        color: $hover-color;
+      }
+    }
   }
 }
 
 .settings-avatar {
   background-color: $white-light;
+  transition: background-color 100ms linear;
 
   i {
     font-size: 20px;
@@ -42,6 +66,7 @@ $new-sidebar-width: 220px;
     color: $gl-text-color-secondary;
     text-align: center;
     align-self: center;
+    transition: color 100ms linear;
   }
 }
 
@@ -54,11 +79,15 @@ $new-sidebar-width: 220px;
   bottom: 0;
   left: 0;
   overflow: auto;
-  background-color: $gray-light;
-  border-right: 1px solid $border-color;
+  background-color: $gray-normal;
+  box-shadow: inset -2px 0 0 $border-color;
+
+  a {
+    text-decoration: none;
+  }
 
   ul {
-    padding: 0;
+    padding-left: 0;
     list-style: none;
   }
 
@@ -67,13 +96,18 @@ $new-sidebar-width: 220px;
 
     a {
       display: block;
-      padding: 12px 14px;
+      padding: 12px 16px;
+      color: $inactive-color;
     }
   }
 
-  a {
-    color: $gl-text-color;
-    text-decoration: none;
+  li.active {
+    box-shadow: inset 4px 0 0 $active-border;
+
+    > a {
+      color: $active-color;
+      font-weight: 700;
+    }
   }
 
   @media (max-width: $screen-xs-max) {
@@ -83,22 +117,28 @@ $new-sidebar-width: 220px;
 
 .sidebar-sub-level-items {
   display: none;
+  padding-bottom: 8px;
 
   > li {
     a {
-      padding: 12px 24px;
-      color: $gl-text-color-light;
+      font-size: 12px;
+      padding: 8px 16px 8px 24px;
 
-      &:hover {
-        color: $gl-text-color;
-        background-color: $border-color;
+      &:hover,
+      &:focus {
+        background: $active-hover-background;
+        color: $active-hover-color;
       }
     }
 
     &.active {
-      > a {
-        color: $purple-650;
-        font-weight: 600;
+      a {
+        &,
+        &:hover,
+        &:focus {
+          background: $active-background;
+          color: $active-color;
+        }
       }
     }
   }
@@ -108,35 +148,31 @@ $new-sidebar-width: 220px;
   > li {
     .badge {
       float: right;
-      background-color: $border-color;
-      color: $gl-text-color;
+      background-color: $inactive-badge-background;
+      color: $inactive-color;
     }
 
     &.active {
-      > a {
-        background-color: $purple-600;
-        color: $white-light;
-        font-weight: 600;
-      }
+      background: $active-background;
 
       .badge {
-        background-color: $purple-700;
-        color: $white-light;
+        color: $active-color;
+        font-weight: 600;
       }
 
       .sidebar-sub-level-items {
-        background-color: $gray-normal;
-        border-left: 6px solid $purple-600;
         display: block;
       }
     }
 
-    &:not(.active) > a:hover {
-      background-color: $border-color;
+    > a:hover {
+      background-color: $hover-background;
+      color: $hover-color;
 
       .badge {
-        transition: background-color 100ms linear;
-        background-color: $gray-normal;
+        transition: background-color 100ms linear, color 100ms linear;
+        background-color: $indigo-500;
+        color: $hover-color;
       }
     }
   }
@@ -155,3 +191,13 @@ $new-sidebar-width: 220px;
     // scss-lint:enable DuplicateProperty
   }
 }
+
+
+// Change color of all horizontal tabs to match the new indigo color
+.nav-links li.active a {
+  border-bottom-color: $active-border;
+
+  .badge {
+    font-weight: 600;
+  }
+}