Merge branch 'mle/neutral-active-sidebar' into 'master'

Change the active link color in the sidebar

Update active link color in 
the sidebar to be $gray-900
which is #fafafa

Changelog: changed

See merge request gitlab-org/gitlab!73077

app/assets/stylesheets/startup/startup-dark.scss

@@ -5,6 +5,7 @@
 body.gl-dark {
   --gray-50: #303030;
   --gray-100: #404040;
+  --gray-600: #bfbfbf;
   --gray-900: #fafafa;
   --gray-950: #fff;
   --green-100: #0d532a;
@@ -12,6 +13,7 @@ body.gl-dark {
   --green-700: #91d4a8;
   --blue-400: #1f75cb;
   --orange-400: #ab6100;
+  --indigo-900-alpha-008: rgba(235, 235, 250, 0.08);
   --gl-text-color: #fafafa;
   --border-color: #4f4f4f;
   --black: #fff;
@@ -1693,9 +1695,15 @@ body.gl-dark {
   --black: #fff;
   --svg-status-bg: #333;
 }
+.nav-sidebar li a {
+  color: var(--gray-600);
+}
 .nav-sidebar li.active {
   box-shadow: none;
 }
+.nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) {
+  background-color: var(--indigo-900-alpha-008);
+}
 body.gl-dark .navbar-gitlab {
   background-color: #fafafa;
 }
@@ -1780,7 +1788,7 @@ body.gl-dark .search .search-input-wrap .clear-icon {
   fill: rgba(250, 250, 250, 0.8);
 }
 body.gl-dark .nav-sidebar li.active > a {
-  color: #f0f0f0;
+  color: #fafafa;
 }
 body.gl-dark .nav-sidebar .fly-out-top-item a,
 body.gl-dark .nav-sidebar .fly-out-top-item.active a,

app/assets/stylesheets/themes/dark_mode_overrides.scss

@@ -42,8 +42,24 @@
 }
 
 .nav-sidebar {
-  li.active {
-    box-shadow: none;
+  li {
+    a {
+      color: var(--gray-600);
+    }
+
+    > a:hover {
+      background-color: var(--indigo-900-alpha-008);
+    }
+
+    &.active {
+      box-shadow: none;
+
+      &:not(.fly-out-top-item) {
+        > a:not(.has-sub-items) {
+          background-color: var(--indigo-900-alpha-008);
+        }
+      }
+    }
   }
 
   .sidebar-sub-level-items.fly-out-list {
@@ -53,7 +69,7 @@
 }
 
 body.gl-dark {
-  @include gitlab-theme($gray-900, $gray-400, $gray-500, $gray-800, $gray-900, $white);
+  @include gitlab-theme($gray-900, $gray-400, $gray-500, $gray-900, $gray-900, $white);
 
   .logo-text svg {
     fill: var(--gl-text-color);

app/assets/stylesheets/themes/theme_blue.scss

@@ -6,7 +6,7 @@ body {
       $theme-blue-200,
       $theme-blue-500,
       $theme-blue-700,
-      $theme-blue-800,
+      $gray-900,
       $theme-blue-900,
       $white
     );

app/assets/stylesheets/themes/theme_dark.scss

@@ -6,7 +6,7 @@ body {
       $gray-200,
       $gray-300,
       $gray-500,
-      $gray-700,
+      $gray-900,
       $gray-900,
       $white
     );

app/assets/stylesheets/themes/theme_green.scss

@@ -6,7 +6,7 @@ body {
       $theme-green-200,
       $theme-green-500,
       $theme-green-700,
-      $theme-green-800,
+      $gray-900,
       $theme-green-900,
       $white
     );

app/assets/stylesheets/themes/theme_indigo.scss

@@ -6,7 +6,7 @@ body {
       $indigo-200,
       $indigo-500,
       $indigo-700,
-      $purple-900,
+      $gray-900,
       $indigo-900,
       $white
     );

app/assets/stylesheets/themes/theme_light.scss

@@ -6,7 +6,7 @@ body {
       $gray-500,
       $gray-700,
       $gray-500,
-      $gray-500,
+      $gray-900,
       $gray-50,
       $gray-500
     );

app/assets/stylesheets/themes/theme_light_blue.scss

@@ -6,7 +6,7 @@ body {
       $theme-light-blue-200,
       $theme-light-blue-500,
       $theme-light-blue-500,
-      $theme-light-blue-700,
+      $gray-900,
       $theme-light-blue-700,
       $white
     );

app/assets/stylesheets/themes/theme_light_green.scss

@@ -6,7 +6,7 @@ body {
       $theme-green-200,
       $theme-green-500,
       $theme-green-500,
-      $theme-light-green-700,
+      $gray-900,
       $theme-light-green-700,
       $white
     );

app/assets/stylesheets/themes/theme_light_indigo.scss

@@ -6,7 +6,7 @@ body {
       $indigo-200,
       $indigo-500,
       $indigo-500,
-      $indigo-700,
+      $gray-900,
       $indigo-700,
       $white
     );

app/assets/stylesheets/themes/theme_light_red.scss

@@ -6,7 +6,7 @@ body {
       $theme-light-red-200,
       $theme-light-red-500,
       $theme-light-red-500,
-      $theme-light-red-700,
+      $gray-900,
       $theme-light-red-700,
       $white
     );

app/assets/stylesheets/themes/theme_red.scss

@@ -6,7 +6,7 @@ body {
       $theme-red-200,
       $theme-red-500,
       $theme-red-700,
-      $theme-red-800,
+      $gray-900,
       $theme-red-900,
       $white
     );

ee/app/assets/stylesheets/startup/startup-dark.scss

@@ -5,6 +5,7 @@
 body.gl-dark {
   --gray-50: #303030;
   --gray-100: #404040;
+  --gray-600: #bfbfbf;
   --gray-900: #fafafa;
   --gray-950: #fff;
   --green-100: #0d532a;
@@ -12,6 +13,7 @@ body.gl-dark {
   --green-700: #91d4a8;
   --blue-400: #1f75cb;
   --orange-400: #ab6100;
+  --indigo-900-alpha-008: rgba(235, 235, 250, 0.08);
   --gl-text-color: #fafafa;
   --border-color: #4f4f4f;
   --black: #fff;
@@ -1693,9 +1695,15 @@ body.gl-dark {
   --black: #fff;
   --svg-status-bg: #333;
 }
+.nav-sidebar li a {
+  color: var(--gray-600);
+}
 .nav-sidebar li.active {
   box-shadow: none;
 }
+.nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) {
+  background-color: var(--indigo-900-alpha-008);
+}
 body.gl-dark .navbar-gitlab {
   background-color: #fafafa;
 }
@@ -1780,7 +1788,7 @@ body.gl-dark .search .search-input-wrap .clear-icon {
   fill: rgba(250, 250, 250, 0.8);
 }
 body.gl-dark .nav-sidebar li.active > a {
-  color: #f0f0f0;
+  color: #fafafa;
 }
 body.gl-dark .nav-sidebar .fly-out-top-item a,
 body.gl-dark .nav-sidebar .fly-out-top-item.active a,