Merge branch '37573-fix-sidebar-active-color' into 'master'

Update badge color to match theme; lighten active color in sidebar

Closes #37573

See merge request gitlab-org/gitlab-ce!14116

2 files changed, 18 insertions, 16 deletions

diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss
index 71f764923ff..f844d6f1d5a 100644
--- a/app/assets/stylesheets/framework/gitlab-theme.scss
+++ b/app/assets/stylesheets/framework/gitlab-theme.scss
@@ -158,11 +158,23 @@
     box-shadow: inset 4px 0 0 $color-700;
 
     > a {
-      color: $color-900;
+      color: $color-800;
     }
 
     svg {
-      fill: $color-900;
+      fill: $color-800;
+    }
+  }
+
+  .sidebar-top-level-items > li.active .badge {
+    color: $color-800;
+  }
+
+  .nav-links li.active a {
+    border-bottom-color: $color-500;
+
+    .badge {
+      font-weight: $gl-font-weight-bold;
     }
   }
 }
@@ -261,5 +273,9 @@ body {
         fill: $theme-gray-900;
       }
     }
+
+    .sidebar-top-level-items > li.active .badge {
+      color: $theme-gray-900;
+    }
   }
 }
diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss
index 4bbd30056a9..35cb71d422b 100644
--- a/app/assets/stylesheets/new_sidebar.scss
+++ b/app/assets/stylesheets/new_sidebar.scss
@@ -3,8 +3,6 @@
 @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);
@@ -210,7 +208,6 @@ $new-sidebar-collapsed-width: 50px;
         &:hover,
         &:focus {
           background: $active-background;
-          color: $active-color;
         }
       }
     }
@@ -310,7 +307,6 @@ $new-sidebar-collapsed-width: 50px;
       }
 
       .badge {
-        color: $active-color;
         font-weight: $gl-font-weight-bold;
       }
 
@@ -487,13 +483,3 @@ $new-sidebar-collapsed-width: 50px;
 .with-performance-bar .boards-list {
   height: calc(100vh - #{$new-navbar-height} - #{$performance-bar-height});
 }
-
-
-// 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: $gl-font-weight-bold;
-  }
-}