Revert "Merge branch '35012-navigation-add-option-to-change-navigation-color-palette' into 'master'"revert-f2421b2b

This reverts merge request !13619

7 files changed, 97 insertions, 399 deletions

diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 35e7a10379f..c0524bf6aa3 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -19,7 +19,6 @@
 @import "framework/flash";
 @import "framework/forms";
 @import "framework/gfm";
-@import "framework/gitlab-theme";
 @import "framework/header";
 @import "framework/highlight";
 @import "framework/issue_box";
diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss
deleted file mode 100644
index 71f764923ff..00000000000
--- a/app/assets/stylesheets/framework/gitlab-theme.scss
+++ /dev/null
@@ -1,265 +0,0 @@
-/**
- * Styles the GitLab application with a specific color theme
- */
-
-@mixin gitlab-theme($color-100, $color-200, $color-500, $color-700, $color-800, $color-900, $color-alternate) {
-  // Header
-
-  header.navbar-gitlab-new {
-    background: linear-gradient(to right, $color-900, $color-800);
-
-    .navbar-collapse {
-      color: $color-200;
-    }
-
-    .container-fluid {
-      .navbar-toggle {
-        border-left: 1px solid lighten($color-700, 10%);
-      }
-    }
-
-    .navbar-sub-nav,
-    .navbar-nav {
-      > li {
-        > a:hover,
-        > a:focus {
-          background-color: rgba($color-200, .2);
-        }
-
-        &.active > a,
-        &.dropdown.open > a {
-          color: $color-900;
-          background-color: $color-alternate;
-
-          svg {
-            fill: currentColor;
-          }
-        }
-
-        &.line-separator {
-          border-left: 1px solid rgba($color-200, .2);
-        }
-      }
-    }
-
-    .navbar-sub-nav {
-      color: $color-200;
-    }
-
-    .nav {
-      > li {
-        color: $color-200;
-
-        > a {
-          svg {
-            fill: $color-200;
-          }
-
-          &.header-user-dropdown-toggle {
-            .header-user-avatar {
-              border-color: $color-200;
-            }
-          }
-
-          &:hover,
-          &:focus {
-            @media (min-width: $screen-sm-min) {
-              background-color: rgba($color-200, .2);
-            }
-
-            svg {
-              fill: currentColor;
-            }
-          }
-        }
-
-        &.active > a,
-        &.dropdown.open > a {
-          color: $color-900;
-          background-color: $color-alternate;
-
-          &:hover {
-            svg {
-              fill: $color-900;
-            }
-          }
-        }
-
-        .impersonated-user,
-        .impersonated-user:hover {
-          svg {
-            fill: $color-900;
-          }
-        }
-      }
-    }
-  }
-
-  .title {
-    > a {
-      &:hover,
-      &:focus {
-        background-color: rgba($color-200, .2);
-      }
-    }
-  }
-
-  .search {
-    form {
-      background-color: rgba($color-200, .2);
-
-      &:hover {
-        background-color: rgba($color-200, .3);
-      }
-    }
-
-    .location-badge {
-      color: $color-100;
-      background-color: rgba($color-200, .1);
-      border-right: 1px solid $color-800;
-    }
-
-    .search-input::placeholder {
-      color: rgba($color-200, .8);
-    }
-
-    .search-input-wrap {
-      .search-icon,
-      .clear-icon {
-        color: rgba($color-200, .8);
-      }
-    }
-
-    &.search-active {
-      form {
-        background-color: $white-light;
-      }
-
-      .location-badge {
-        color: $gl-text-color;
-      }
-
-      .search-input-wrap {
-        .search-icon {
-          color: rgba($color-200, .8);
-        }
-      }
-    }
-  }
-
-  .btn-sign-in {
-    background-color: $color-100;
-    color: $color-900;
-  }
-
-
-  // Sidebar
-  .nav-sidebar li.active {
-    box-shadow: inset 4px 0 0 $color-700;
-
-    > a {
-      color: $color-900;
-    }
-
-    svg {
-      fill: $color-900;
-    }
-  }
-}
-
-
-body {
-  &.ui_indigo {
-    @include gitlab-theme($indigo-100, $indigo-200, $indigo-500, $indigo-700, $indigo-800, $indigo-900, $white-light);
-  }
-
-  &.ui_dark {
-    @include gitlab-theme($theme-gray-100, $theme-gray-200, $theme-gray-500, $theme-gray-700, $theme-gray-800, $theme-gray-900, $white-light);
-  }
-
-  &.ui_blue {
-    @include gitlab-theme($theme-blue-100, $theme-blue-200, $theme-blue-500, $theme-blue-700, $theme-blue-800, $theme-blue-900, $white-light);
-  }
-
-  &.ui_green {
-    @include gitlab-theme($theme-green-100, $theme-green-200, $theme-green-500, $theme-green-700, $theme-green-800, $theme-green-900, $white-light);
-  }
-
-  &.ui_light {
-    @include gitlab-theme($theme-gray-900, $theme-gray-700, $theme-gray-800, $theme-gray-700, $theme-gray-700, $theme-gray-100, $theme-gray-700);
-
-    header.navbar-gitlab-new {
-      background: $theme-gray-100;
-      box-shadow: 0 2px 0 0 $border-color;
-
-      .logo-text svg {
-        fill: $theme-gray-900;
-      }
-
-      .navbar-sub-nav,
-      .navbar-nav {
-        > li {
-          > a:hover,
-          > a:focus {
-            color: $theme-gray-900;
-          }
-
-          &.active > a {
-            color: $white-light;
-
-            &:hover {
-              color: $white-light;
-            }
-          }
-        }
-      }
-
-      .container-fluid {
-        .navbar-toggle,
-        .navbar-toggle:hover {
-          color: $theme-gray-700;
-          border-left: 1px solid $theme-gray-200;
-        }
-      }
-    }
-
-    .search {
-      form {
-        background-color: $white-light;
-        box-shadow: inset 0 0 0 1px $border-color;
-
-        &:hover {
-          background-color: $white-light;
-          box-shadow: inset 0 0 0 1px $blue-100;
-
-          .location-badge {
-            box-shadow: inset 0 0 0 1px $blue-100;
-          }
-        }
-      }
-
-      .search-input-wrap {
-        .search-icon {
-          color: $theme-gray-200;
-        }
-      }
-
-      .location-badge {
-        color: $theme-gray-700;
-        box-shadow: inset 0 0 0 1px $border-color;
-        background-color: $nav-badge-bg;
-        border-right: 0;
-      }
-    }
-
-    .nav-sidebar li.active {
-      > a {
-        color: $theme-gray-900;
-      }
-
-      svg {
-        fill: $theme-gray-900;
-      }
-    }
-  }
-}
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index ab3c34df1fb..b00a2d053e2 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -111,6 +111,7 @@ header {
         svg {
           height: 16px;
           width: 23px;
+          fill: currentColor;
         }
       }
 
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 3857226cddb..e300b006026 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -74,8 +74,6 @@ $red-700: #a62d19;
 $red-800: #8b2615;
 $red-900: #711e11;
 
-// GitLab themes
-
 $indigo-50: #f7f7ff;
 $indigo-100: #ebebfa;
 $indigo-200: #d1d1f0;
@@ -88,43 +86,6 @@ $indigo-800: #393982;
 $indigo-900: #292961;
 $indigo-950: #1a1a40;
 
-$theme-gray-50: #fafafa;
-$theme-gray-100: #f2f2f2;
-$theme-gray-200: #dfdfdf;
-$theme-gray-300: #cccccc;
-$theme-gray-400: #bababa;
-$theme-gray-500: #a7a7a7;
-$theme-gray-600: #949494;
-$theme-gray-700: #707070;
-$theme-gray-800: #4f4f4f;
-$theme-gray-900: #2e2e2e;
-$theme-gray-950: #1f1f1f;
-
-$theme-blue-50: #f4f8fc;
-$theme-blue-100: #e6edf5;
-$theme-blue-200: #c8d7e6;
-$theme-blue-300: #97b3cf;
-$theme-blue-400: #648cb4;
-$theme-blue-500: #4a79a8;
-$theme-blue-600: #3e6fa0;
-$theme-blue-700: #305c88;
-$theme-blue-800: #25496e;
-$theme-blue-900: #1a3652;
-$theme-blue-950: #0f2235;
-
-$theme-green-50: #f2faf6;
-$theme-green-100: #e4f3ea;
-$theme-green-200: #c0dfcd;
-$theme-green-300: #8ac2a1;
-$theme-green-400: #52a274;
-$theme-green-500: #35935c;
-$theme-green-600: #288a50;
-$theme-green-700: #1c7441;
-$theme-green-800: #145d33;
-$theme-green-900: #0d4524;
-$theme-green-950: #072d16;
-
-
 $black: #000;
 $black-transparent: rgba(0, 0, 0, 0.3);
 $almost-black: #242424;
diff --git a/app/assets/stylesheets/new_nav.scss b/app/assets/stylesheets/new_nav.scss
index 8e095cbdd7e..2b6c0fc015c 100644
--- a/app/assets/stylesheets/new_nav.scss
+++ b/app/assets/stylesheets/new_nav.scss
@@ -9,20 +9,10 @@
 
 header.navbar-gitlab-new {
   color: $white-light;
+  background: linear-gradient(to right, $indigo-900, $indigo-800);
   border-bottom: 0;
   min-height: $new-navbar-height;
 
-  .logo-text {
-    line-height: initial;
-
-    svg {
-      width: 55px;
-      height: 14px;
-      margin: 0;
-      fill: $white-light;
-    }
-  }
-
   .header-content {
     display: -webkit-flex;
     display: flex;
@@ -48,10 +38,10 @@ header.navbar-gitlab-new {
 
       img {
         height: 28px;
-        margin-right: 8px;
+        margin-right: 10px;
       }
 
-      a {
+      > a {
         display: -webkit-flex;
         display: flex;
         align-items: center;
@@ -64,6 +54,22 @@ header.navbar-gitlab-new {
             margin-right: 8px;
           }
         }
+
+        .logo-text {
+          line-height: initial;
+
+          svg {
+            width: 55px;
+            height: 14px;
+            margin: 0;
+            fill: $white-light;
+          }
+        }
+
+        &:hover,
+        &:focus {
+          background-color: rgba($indigo-200, .2);
+        }
       }
     }
 
@@ -100,6 +106,7 @@ header.navbar-gitlab-new {
 
   .navbar-collapse {
     padding-left: 0;
+    color: $indigo-200;
     box-shadow: 0;
 
     @media (max-width: $screen-xs-max) {
@@ -125,6 +132,7 @@ header.navbar-gitlab-new {
       font-size: 14px;
       text-align: center;
       color: currentColor;
+      border-left: 1px solid lighten($indigo-700, 10%);
 
       &:hover,
       &:focus,
@@ -159,41 +167,51 @@ header.navbar-gitlab-new {
         will-change: color;
         margin: 4px 2px;
         padding: 6px 8px;
+        color: $indigo-200;
         height: 32px;
 
         @media (max-width: $screen-xs-max) {
           padding: 0;
         }
 
+        svg {
+          fill: $indigo-200;
+        }
+
         &.header-user-dropdown-toggle {
           margin-left: 2px;
 
           .header-user-avatar {
+            border-color: $indigo-200;
             margin-right: 0;
           }
         }
+      }
 
-        &:hover,
-        &:focus {
-          text-decoration: none;
-          outline: 0;
-          opacity: 1;
-          color: $white-light;
+      .header-new-dropdown-toggle {
+        margin-right: 0;
+      }
 
-          svg {
-            fill: currentColor;
-          }
+      > a:hover,
+      > a:focus {
+        text-decoration: none;
+        outline: 0;
+        opacity: 1;
+        color: $white-light;
 
-          &.header-user-dropdown-toggle {
-            .header-user-avatar {
-              border-color: $white-light;
-            }
-          }
+        @media (min-width: $screen-sm-min) {
+          background-color: rgba($indigo-200, .2);
         }
-      }
 
-      .header-new-dropdown-toggle {
-        margin-right: 0;
+        svg {
+          fill: currentColor;
+        }
+
+        &.header-user-dropdown-toggle {
+          .header-user-avatar {
+            border-color: $white-light;
+          }
+        }
       }
 
       .impersonated-user,
@@ -202,6 +220,10 @@ header.navbar-gitlab-new {
         background-color: $white-light;
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
+
+        svg {
+          fill: $indigo-900;
+        }
       }
 
       .impersonation-btn,
@@ -219,6 +241,8 @@ header.navbar-gitlab-new {
 
       &.active > a,
       &.dropdown.open > a {
+        color: $indigo-900;
+        background-color: $white-light;
 
         svg {
           fill: currentColor;
@@ -232,6 +256,7 @@ header.navbar-gitlab-new {
   display: -webkit-flex;
   display: flex;
   margin: 0 0 0 6px;
+  color: $indigo-200;
 
   .dropdown-chevron {
     position: relative;
@@ -249,6 +274,17 @@ header.navbar-gitlab-new {
         text-decoration: none;
         outline: 0;
         color: $white-light;
+        background-color: rgba($indigo-200, .2);
+
+        svg {
+          fill: currentColor;
+        }
+      }
+
+      &.active > a,
+      &.dropdown.open > a {
+        color: $indigo-900;
+        background-color: $white-light;
 
         svg {
           fill: currentColor;
@@ -273,6 +309,7 @@ header.navbar-gitlab-new {
       }
 
       &.line-separator {
+        border-left: 1px solid rgba($indigo-200, .2);
         margin: 8px;
       }
     }
@@ -302,14 +339,17 @@ header.navbar-gitlab-new {
     height: 32px;
     border: 0;
     border-radius: $border-radius-default;
+    background-color: rgba($indigo-200, .2);
     transition: border-color ease-in-out 0.15s, background-color ease-in-out 0.15s;
 
     &:hover {
+      background-color: rgba($indigo-200, .3);
       box-shadow: none;
     }
   }
 
   &.search-active form {
+    background-color: $white-light;
     box-shadow: none;
 
     .search-input {
@@ -337,26 +377,43 @@ header.navbar-gitlab-new {
   }
 
   .search-input::placeholder {
+    color: rgba($indigo-200, .8);
     transition: color ease-in-out 0.15s;
   }
 
   .location-badge {
     font-size: 12px;
+    color: $indigo-100;
+    background-color: rgba($indigo-200, .1);
+    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: 32px;
     transition: border-color ease-in-out 0.15s;
   }
 
+  .search-input-wrap {
+    .search-icon,
+    .clear-icon {
+      color: rgba($indigo-200, .8);
+    }
+  }
+
   &.search-active {
     .location-badge {
+      color: $gl-text-color;
       background-color: $nav-badge-bg;
       border-color: $border-color;
     }
 
     .search-input-wrap {
+      .search-icon {
+        color: rgba($indigo-200, .8);
+      }
+
       .clear-icon {
         color: $white-light;
       }
@@ -460,6 +517,8 @@ header.navbar-gitlab-new {
 
 .btn-sign-in {
   margin-top: 3px;
+  background-color: $indigo-100;
+  color: $indigo-900;
   font-weight: $gl-font-weight-bold;
 
   &:hover {
diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss
index 4bbd30056a9..3082f728ac8 100644
--- a/app/assets/stylesheets/new_sidebar.scss
+++ b/app/assets/stylesheets/new_sidebar.scss
@@ -155,9 +155,16 @@ $new-sidebar-collapsed-width: 50px;
   }
 
   li.active {
+    box-shadow: inset 4px 0 0 $active-border;
+
     > a {
+      color: $active-color;
       font-weight: $gl-font-weight-bold;
     }
+
+    svg {
+      fill: $active-color;
+    }
   }
 
   @media (max-width: $screen-xs-max) {
diff --git a/app/assets/stylesheets/pages/profiles/preferences.scss b/app/assets/stylesheets/pages/profiles/preferences.scss
index c197494b152..305feaacaa1 100644
--- a/app/assets/stylesheets/pages/profiles/preferences.scss
+++ b/app/assets/stylesheets/pages/profiles/preferences.scss
@@ -1,67 +1,3 @@
-@mixin application-theme-preview($color-1, $color-2, $color-3, $color-4) {
-  .one {
-    background-color: $color-1;
-    border-top-left-radius: $border-radius-default;
-  }
-
-  .two {
-    background-color: $color-2;
-    border-top-right-radius: $border-radius-default;
-  }
-
-  .three {
-    background-color: $color-3;
-    border-bottom-left-radius: $border-radius-default;
-  }
-
-  .four {
-    background-color: $color-4;
-    border-bottom-right-radius: $border-radius-default;
-  }
-}
-
-.application-theme {
-  label {
-    margin-right: 20px;
-    text-align: center;
-  }
-
-  .preview {
-    font-size: 0;
-    margin-bottom: 10px;
-
-    &.indigo {
-      @include application-theme-preview($indigo-900, $indigo-700, $indigo-800, $indigo-500);
-    }
-
-    &.dark {
-      @include application-theme-preview($theme-gray-900, $theme-gray-700, $theme-gray-800, $theme-gray-600);
-    }
-
-    &.light {
-      @include application-theme-preview($theme-gray-600, $theme-gray-200, $theme-gray-400, $theme-gray-100);
-    }
-
-    &.blue {
-      @include application-theme-preview($theme-blue-900, $theme-blue-700, $theme-blue-800, $theme-blue-500);
-    }
-
-    &.green {
-      @include application-theme-preview($theme-green-900, $theme-green-700, $theme-green-800, $theme-green-500);
-    }
-  }
-
-  .preview-row {
-    display: block;
-  }
-
-  .quadrant {
-    display: inline-block;
-    height: 50px;
-    width: 80px;
-  }
-}
-
 .syntax-theme {
   label {
     margin-right: 20px;