Merge branch 'psi-dark-navbar' into 'master'

Small tweaks for navbar, tabs, and some other fixes

See merge request gitlab-org/gitlab!58891

app/assets/stylesheets/application_dark.scss

 @import './themes/dark';
 
 @import './application';
+
+@import './themes/theme_helper';
+
+body.gl-dark {
+  @include gitlab-theme(
+    $gray-900,
+    $gray-400,
+    $gray-500,
+    $gray-800,
+    $gray-900,
+    $white
+  );
+
+  .logo-text svg {
+    fill: var(--gl-text-color);
+  }
+
+  .navbar-gitlab {
+    background-color: var(--gray-50);
+    box-shadow: 0 1px 0 0 var(--gray-100);
+
+    .navbar-sub-nav,
+    .navbar-nav {
+      li {
+        > a:hover,
+        > a:focus,
+        > button:hover,
+        > button:focus {
+          color: var(--gl-text-color);
+          background-color: var(--gray-200);
+        }
+      }
+
+      li.active,
+      li.dropdown.show {
+        > a,
+        > button {
+          color: var(--gl-text-color);
+          background-color: var(--gray-200);
+        }
+      }
+    }
+
+    .search {
+      form {
+        background-color: var(--gray-100);
+        box-shadow: inset 0 0 0 1px var(--border-color);
+
+        &:active,
+        &:hover {
+          background-color: var(--gray-100);
+          box-shadow: inset 0 0 0 1px var(--blue-200);
+        }
+      }
+    }
+  }
+}

app/assets/stylesheets/framework/header.scss

@@ -442,22 +442,22 @@
     font-weight: $gl-font-weight-normal;
     margin-left: -6px;
     font-size: 11px;
-    color: $white;
+    color: var(--gray-950, $white);
     padding: 0 5px;
     line-height: 12px;
     border-radius: 7px;
     box-shadow: 0 1px 0 rgba($gl-header-color, 0.2);
 
     &.green-badge {
-      background-color: $green-400;
+      background-color: var(--green-400, $green-400);
     }
 
     &.merge-requests-count {
-      background-color: $orange-400;
+      background-color: var(--orange-400, $orange-400);
     }
 
     &.todos-count {
-      background-color: $blue-400;
+      background-color: var(--blue-400, $blue-400);
     }
   }
 
@@ -511,7 +511,7 @@
 .header-user {
   &.show .dropdown-menu {
     margin-top: 4px;
-    color: $gl-text-color;
+    color: var(--gl-text-color, $gl-text-color);
     left: auto;
     max-height: $dropdown-max-height-lg;
 
@@ -580,7 +580,7 @@
   .no-emoji-placeholder,
   .clear-user-status {
     svg {
-      fill: $gl-text-color-secondary;
+      fill: var(--gray-500, $gray-500);
     }
   }
 

app/assets/stylesheets/framework/variables.scss

@@ -590,7 +590,7 @@ $gl-btn-xs-line-height: 13px;
 /*
 * Badges
 */
-$badge-bg: rgba(0, 0, 0, 0.07);
+$badge-bg: rgba($black, 0.07);
 
 /*
 * Pagination

app/assets/stylesheets/themes/theme_light.scss

@@ -81,50 +81,4 @@ body {
       color: $gray-900;
     }
   }
-
-  &.gl-dark {
-    .logo-text svg {
-      fill: var(--gl-text-color);
-    }
-
-    .navbar-gitlab {
-      background-color: var(--gray-50);
-      box-shadow: 0 1px 0 0 var(--gray-100);
-
-      .navbar-sub-nav,
-      .navbar-nav {
-        li {
-          > a:hover,
-          > a:focus,
-          > button:hover,
-          > button:focus {
-            color: var(--gl-text-color);
-            background-color: var(--gray-200);
-          }
-        }
-
-        li.active,
-        li.dropdown.show {
-          > a,
-          > button {
-            color: var(--gl-text-color);
-            background-color: var(--gray-200);
-          }
-        }
-      }
-
-      .search {
-        form {
-          background-color: var(--gray-100);
-          box-shadow: inset 0 0 0 1px var(--border-color);
-
-          &:active,
-          &:hover {
-            background-color: var(--gray-100);
-            box-shadow: inset 0 0 0 1px var(--blue-200);
-          }
-        }
-      }
-    }
-  }
 }

changelogs/unreleased/psi-dark-navbar.yml

+---
+title: Dark mode nav improvements
+merge_request: 58891
+author:
+type: fixed