Merge branch 'mle/fix-topnav-color' into 'master'

Use neutral colours for nav background

See merge request gitlab-org/gitlab!83593

app/assets/stylesheets/framework/header.scss

-$top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important;
-
 .navbar-gitlab {
   padding: 0 16px;
   z-index: $header-zindex;
@@ -574,7 +572,7 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
   }
 
   .frequent-items-list-item-container > a:hover {
-    background-color: $top-nav-hover-bg;
+    background-color: $nav-active-bg;
   }
 }
 
@@ -589,11 +587,9 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
 }
 
 .top-nav-menu-item {
-  color: var(--indigo-900, $theme-indigo-900) !important;
-
   &.active,
   &:hover {
-    background-color: $top-nav-hover-bg;
+    background-color: $nav-active-bg;
   }
 
   .gl-icon {
@@ -603,7 +599,6 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
 
 .top-nav-responsive {
   @include gl-display-none;
-  color: var(--indigo-900, $theme-indigo-900);
 }
 
 .top-nav-responsive-open {

app/assets/stylesheets/framework/variables.scss

@@ -363,6 +363,7 @@ $well-expand-item: #e8f2f7 !default;
 $well-inner-border: #eef0f2 !default;
 $well-light-border: #f1f1f1;
 $well-light-text-color: #5b6169;
+$nav-active-bg: var(--nav-active-bg, rgba($black, 0.08)) !important;
 
 /*
  * Text

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

@@ -9,7 +9,6 @@ body.gl-dark {
   --gray-900: #fafafa;
   --green-100: #0d532a;
   --green-700: #91d4a8;
-  --indigo-900-alpha-008: rgba(235, 235, 250, 0.08);
   --gl-text-color: #fafafa;
   --border-color: #4f4f4f;
   --black: #fff;
@@ -1739,7 +1738,6 @@ body.gl-dark {
   --indigo-800: #d1d1f0;
   --indigo-900: #ebebfa;
   --indigo-950: #f7f7ff;
-  --indigo-900-alpha-008: rgba(235, 235, 250, 0.08);
   --purple-50: #232150;
   --purple-100: #2f2a6b;
   --purple-200: #453894;
@@ -1769,7 +1767,7 @@ body.gl-dark {
   box-shadow: none;
 }
 .nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) {
-  background-color: var(--indigo-900-alpha-008);
+  background-color: var(--nav-active-bg);
 }
 body.gl-dark {
   --gl-theme-accent: #868686;
@@ -1972,7 +1970,6 @@ body.gl-dark {
   --indigo-800: #d1d1f0;
   --indigo-900: #ebebfa;
   --indigo-950: #f7f7ff;
-  --indigo-900-alpha-008: rgba(235, 235, 250, 0.08);
   --purple-50: #232150;
   --purple-100: #2f2a6b;
   --purple-200: #453894;

app/assets/stylesheets/themes/_dark.scss

@@ -70,7 +70,6 @@ $indigo-700: #a6a6de;
 $indigo-800: #d1d1f0;
 $indigo-900: #ebebfa;
 $indigo-950: #f7f7ff;
-$indigo-900-alpha-008: rgba($indigo-900, 0.08);
 
 $purple-50: #232150;
 $purple-100: #2f2a6b;
@@ -174,7 +173,6 @@ body.gl-dark {
   --indigo-800: #{$indigo-800};
   --indigo-900: #{$indigo-900};
   --indigo-950: #{$indigo-950};
-  --indigo-900-alpha-008: #{$indigo-900-alpha-008};
 
   --purple-50: #{$purple-50};
   --purple-100: #{$purple-100};

app/assets/stylesheets/themes/dark_mode_overrides.scss

@@ -48,7 +48,7 @@
     }
 
     > a:hover {
-      background-color: var(--indigo-900-alpha-008);
+      background-color: var(--nav-active-bg);
     }
 
     &.active {
@@ -56,7 +56,7 @@
 
       &:not(.fly-out-top-item) {
         > a:not(.has-sub-items) {
-          background-color: var(--indigo-900-alpha-008);
+          background-color: var(--nav-active-bg);
         }
       }
     }

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

@@ -9,7 +9,6 @@ body.gl-dark {
   --gray-900: #fafafa;
   --green-100: #0d532a;
   --green-700: #91d4a8;
-  --indigo-900-alpha-008: rgba(235, 235, 250, 0.08);
   --gl-text-color: #fafafa;
   --border-color: #4f4f4f;
   --black: #fff;
@@ -1739,7 +1738,6 @@ body.gl-dark {
   --indigo-800: #d1d1f0;
   --indigo-900: #ebebfa;
   --indigo-950: #f7f7ff;
-  --indigo-900-alpha-008: rgba(235, 235, 250, 0.08);
   --purple-50: #232150;
   --purple-100: #2f2a6b;
   --purple-200: #453894;
@@ -1769,7 +1767,7 @@ body.gl-dark {
   box-shadow: none;
 }
 .nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) {
-  background-color: var(--indigo-900-alpha-008);
+  background-color: var(--nav-active-bg);
 }
 body.gl-dark {
   --gl-theme-accent: #868686;
@@ -1972,7 +1970,6 @@ body.gl-dark {
   --indigo-800: #d1d1f0;
   --indigo-900: #ebebfa;
   --indigo-950: #f7f7ff;
-  --indigo-900-alpha-008: rgba(235, 235, 250, 0.08);
   --purple-50: #232150;
   --purple-100: #2f2a6b;
   --purple-200: #453894;