From b211286b37111dded16ef277ab90ce228bf5ee6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thiago=20Figueir=C3=B3?= <tfigueiro@gitlab.com>
Date: Thu, 10 Nov 2022 23:55:25 +0000
Subject: [PATCH] Revert "Merge branch 'renovate/gitlab-uisvg' into 'master'"

This reverts merge request !103040
---
 .../vue_shared/gl_feature_flags_plugin.js     |  16 +-
 .../stylesheets/framework/variables.scss      |  54 ++--
 .../stylesheets/startup/startup-dark.scss     | 258 +++++++++---------
 .../stylesheets/startup/startup-general.scss  | 122 ++++-----
 .../stylesheets/startup/startup-signin.scss   |  94 +++----
 app/assets/stylesheets/themes/_dark.scss      |  24 +-
 .../stylesheets/startup/startup-dark.scss     | 258 +++++++++---------
 .../stylesheets/startup/startup-general.scss  | 122 ++++-----
 .../stylesheets/startup/startup-signin.scss   |  94 +++----
 .../merge_request_table_spec.js.snap          |   3 +-
 .../analytics/cycle_analytics/mock_data.js    |   4 +-
 .../board_content_sidebar_spec.js.snap        |   2 +-
 .../__snapshots__/util_spec.js.snap           |   4 +-
 ee/spec/frontend/insights/mock_data.js        |   4 +-
 .../filters/policy_source_filter_spec.js      |   2 +-
 .../filters/policy_type_filter_spec.js        |   2 +-
 .../iteration_dropdown_spec.js.snap           |   1 -
 .../__snapshots__/modal_spec.js.snap          |   4 +-
 .../__snapshots__/index_spec.js.snap          |   4 +-
 .../new_vulnerability/section_details_spec.js |   4 +-
 .../section_identifiers_spec.js               |   6 +-
 .../new_vulnerability/section_name_spec.js    |   2 +-
 package.json                                  |   2 +-
 .../groups/members/sort_members_spec.rb       |   2 +-
 .../features/projects/members/sorting_spec.rb |   2 +-
 .../expires_at_field_spec.js.snap             |   1 -
 .../__snapshots__/new_cluster_spec.js.snap    |   2 +-
 .../__snapshots__/toolbar_button_spec.js.snap |   2 +-
 .../components/group_select_spec.js           |   2 +-
 .../jira_import_form_spec.js.snap             |   6 +-
 .../filter_sort/sort_dropdown_spec.js         |   2 +-
 .../components/table/role_dropdown_spec.js    |   2 +-
 .../packages_list_app_spec.js.snap            |   2 +
 .../pypi_installation_spec.js.snap            |  10 +-
 .../pages/__snapshots__/list_spec.js.snap     |   2 +
 .../mr_widget_auto_merge_enabled_spec.js.snap |   4 +-
 .../__snapshots__/awards_list_spec.js.snap    |   2 +-
 yarn.lock                                     |  27 +-
 38 files changed, 576 insertions(+), 578 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/gl_feature_flags_plugin.js b/app/assets/javascripts/vue_shared/gl_feature_flags_plugin.js
index 79946ebaecd1..c12ffaac40ae 100644
--- a/app/assets/javascripts/vue_shared/gl_feature_flags_plugin.js
+++ b/app/assets/javascripts/vue_shared/gl_feature_flags_plugin.js
@@ -1,14 +1,12 @@
 export default (Vue) => {
   Vue.mixin({
-    provide() {
-      return {
-        glFeatures:
-          {
-            ...window.gon?.features,
-            // TODO: extract into glLicensedFeatures https://gitlab.com/gitlab-org/gitlab/-/issues/322460
-            ...window.gon?.licensed_features,
-          } || {},
-      };
+    provide: {
+      glFeatures:
+        {
+          ...window.gon?.features,
+          // TODO: extract into glLicensedFeatures https://gitlab.com/gitlab-org/gitlab/-/issues/322460
+          ...window.gon?.licensed_features,
+        } || {},
     },
   });
 };
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 99284ea0a64b..504fae466bb9 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -88,6 +88,14 @@ $white-normal: #f0f0f0 !default;
 $white-dark: #eaeaea !default;
 $white-transparent: rgba($white, 0.8) !default;
 
+$gray-lightest: #fdfdfd !default;
+$gray-light: #fafafa !default;
+$gray-lighter: #f9f9f9 !default;
+$gray-normal: #f5f5f5 !default;
+$gray-dark: darken($gray-light, $darken-dark-factor) !default;
+$gray-darker: #eee !default;
+$gray-darkest: #c4c4c4 !default;
+
 $purple: #6d49cb !default;
 $purple-light: #ede8fb !default;
 
@@ -95,6 +103,11 @@ $black: #000 !default;
 $black-transparent: rgba(0, 0, 0, 0.3) !default;
 $almost-black: #242424 !default;
 
+$t-gray-a-02: rgba($black, 0.02) !default;
+$t-gray-a-04: rgba($black, 0.04) !default;
+$t-gray-a-06: rgba($black, 0.06) !default;
+$t-gray-a-08: rgba($black, 0.08) !default;
+
 $green-50: #ecf4ee !default;
 $green-100: #c3e6cd !default;
 $green-200: #91d4a8 !default;
@@ -155,33 +168,18 @@ $purple-800: #453894 !default;
 $purple-900: #2f2a6b !default;
 $purple-950: #232150 !default;
 
-$gray-10: #fbfafd !default;
-$gray-50: #ececef !default;
-$gray-100: #dcdcde !default;
-$gray-200: #bfbfc3 !default;
-$gray-300: #a4a3a8 !default;
-$gray-400: #89888d !default;
-$gray-500: #737278 !default;
-$gray-600: #626168 !default;
-$gray-700: #535158 !default;
-$gray-800: #434248 !default;
-$gray-900: #333238 !default;
-$gray-950: #1f1e24 !default;
-
-$gray-lightest: lighten($gray-10, 1) !default;
-$gray-light: $gray-10 !default;
-$gray-lighter: lighten($gray-50, 4) !default;
-$gray-normal: lighten($gray-50, 2) !default;
-$gray-dark: darken($gray-light, $darken-dark-factor) !default;
-$gray-darker: $gray-50 !default;
-$gray-darkest: $gray-200 !default;
-
-$t-gray-a-02: rgba($gray-950, 0.02) !default;
-$t-gray-a-04: rgba($gray-950, 0.04) !default;
-$t-gray-a-06: rgba($gray-950, 0.06) !default;
-$t-gray-a-08: rgba($gray-950, 0.08) !default;
-$t-gray-a-16: rgba($gray-950, 0.16) !default;
-$t-gray-a-24: rgba($gray-950, 0.24) !default;
+$gray-10: #f5f5f5 !default;
+$gray-50: #f0f0f0 !default;
+$gray-100: #dbdbdb !default;
+$gray-200: #bfbfbf !default;
+$gray-300: #999 !default;
+$gray-400: #868686 !default;
+$gray-500: #666 !default;
+$gray-600: #5e5e5e !default;
+$gray-700: #525252 !default;
+$gray-800: #404040 !default;
+$gray-900: #303030 !default;
+$gray-950: #1f1f1f !default;
 
 $greens: (
   '50': $green-50,
@@ -372,7 +370,7 @@ $border-gray-normal-dashed: darken($gray-normal, $darken-border-dashed-factor);
 /*
  * UI elements
  */
-$contextual-sidebar-bg-color: $gray-10;
+$contextual-sidebar-bg-color: #f5f5f5;
 $contextual-sidebar-border-color: #e9e9e9;
 $border-color: $gray-100;
 $shadow-color: $t-gray-a-08;
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
index 47e7a2b64660..3a81eec34e33 100644
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -6,15 +6,15 @@
   color-scheme: dark;
 }
 body.gl-dark {
-  --gray-10: #1f1e24;
-  --gray-50: #333238;
-  --gray-100: #434248;
-  --gray-200: #535158;
-  --gray-700: #bfbfc3;
-  --gray-900: #ececef;
+  --gray-10: #1f1f1f;
+  --gray-50: #303030;
+  --gray-100: #404040;
+  --gray-200: #525252;
+  --gray-700: #dbdbdb;
+  --gray-900: #fafafa;
   --green-100: #0d532a;
   --green-700: #91d4a8;
-  --gl-text-color: #ececef;
+  --gl-text-color: #fafafa;
   --border-color: #4f4f4f;
   --black: #fff;
 }
@@ -42,9 +42,9 @@ body {
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #ececef;
+  color: #fafafa;
   text-align: left;
-  background-color: #1f1e24;
+  background-color: #1f1f1f;
 }
 ul {
   margin-top: 0;
@@ -118,7 +118,7 @@ kbd {
   padding: 0.2rem 0.4rem;
   font-size: 90%;
   color: #333;
-  background-color: #ececef;
+  background-color: #fafafa;
   border-radius: 0.2rem;
 }
 kbd kbd {
@@ -141,24 +141,24 @@ kbd kbd {
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #ececef;
+  color: #fafafa;
   background-color: #333;
   background-clip: padding-box;
-  border: 1px solid #737278;
+  border: 1px solid #868686;
   border-radius: 0.25rem;
 }
 @media (prefers-reduced-motion: reduce) {
 }
 .form-control:-moz-focusring {
   color: transparent;
-  text-shadow: 0 0 0 #ececef;
+  text-shadow: 0 0 0 #fafafa;
 }
 .form-control::placeholder {
-  color: #a4a3a8;
+  color: #bfbfbf;
   opacity: 1;
 }
 .form-control:disabled {
-  background-color: #333238;
+  background-color: #303030;
   opacity: 1;
 }
 .form-inline {
@@ -176,7 +176,7 @@ kbd kbd {
 .btn {
   display: inline-block;
   font-weight: 400;
-  color: #ececef;
+  color: #fafafa;
   text-align: center;
   vertical-align: middle;
   user-select: none;
@@ -212,7 +212,7 @@ kbd kbd {
   padding: 0.5rem 0;
   margin: 0.125rem 0 0;
   font-size: 1rem;
-  color: #ececef;
+  color: #fafafa;
   text-align: left;
   list-style: none;
   background-color: #333;
@@ -319,15 +319,15 @@ kbd kbd {
   border-radius: 10rem;
 }
 .badge-success {
-  color: #fbfafd;
+  color: #fff;
   background-color: #2da160;
 }
 .badge-info {
-  color: #fbfafd;
+  color: #fff;
   background-color: #428fdc;
 }
 .badge-warning {
-  color: #fbfafd;
+  color: #fff;
   background-color: #c17d10;
 }
 .rounded-circle {
@@ -455,8 +455,8 @@ a.gl-badge.badge-warning:active {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   height: auto;
-  color: #ececef;
-  box-shadow: inset 0 0 0 1px #737278;
+  color: #fafafa;
+  box-shadow: inset 0 0 0 1px #868686;
   border-style: none;
   appearance: none;
   -moz-appearance: none;
@@ -465,17 +465,17 @@ a.gl-badge.badge-warning:active {
 .gl-form-input:not(.form-control-plaintext):not([type="color"]):read-only,
 .gl-form-input.form-control:disabled,
 .gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only {
-  background-color: #1f1e24;
-  box-shadow: inset 0 0 0 1px #434248;
+  background-color: #1f1f1f;
+  box-shadow: inset 0 0 0 1px #404040;
 }
 .gl-form-input:disabled,
 .gl-form-input.form-control:disabled {
   cursor: not-allowed;
-  color: #89888d;
+  color: #999;
 }
 .gl-form-input::placeholder,
 .gl-form-input.form-control::placeholder {
-  color: #737278;
+  color: #868686;
 }
 .gl-icon {
   fill: currentColor;
@@ -518,9 +518,9 @@ a.gl-badge.badge-warning:active {
   padding-right: 0.75rem;
   background-color: transparent;
   line-height: 1rem;
-  color: #ececef;
+  color: #fafafa;
   fill: currentColor;
-  box-shadow: inset 0 0 0 1px #535158;
+  box-shadow: inset 0 0 0 1px #525252;
   justify-content: center;
   align-items: center;
   font-size: 0.875rem;
@@ -531,20 +531,20 @@ a.gl-badge.badge-warning:active {
 }
 .gl-button.gl-button.btn-default:active,
 .gl-button.gl-button.btn-default.active {
-  box-shadow: inset 0 0 0 1px #a4a3a8, 0 0 0 1px #333, 0 0 0 3px #1f75cb;
+  box-shadow: inset 0 0 0 1px #bfbfbf, 0 0 0 1px #333, 0 0 0 3px #1f75cb;
   outline: none;
-  background-color: #434248;
+  background-color: #404040;
 }
 .gl-button.gl-button.btn-default:active .gl-icon,
 .gl-button.gl-button.btn-default.active .gl-icon {
-  color: #ececef;
+  color: #fafafa;
 }
 .gl-button.gl-button.btn-default .gl-icon {
-  color: #89888d;
+  color: #999;
 }
 .gl-search-box-by-type-search-icon {
   margin: 0.5rem;
-  color: #89888d;
+  color: #999;
   width: 1rem;
   position: absolute;
 }
@@ -594,11 +594,11 @@ svg {
   height: 0;
   margin: 4px 0;
   overflow: hidden;
-  border-top: 1px solid #434248;
+  border-top: 1px solid #404040;
 }
 .toggle-sidebar-button .collapse-text,
 .toggle-sidebar-button .icon-chevron-double-lg-left {
-  color: #89888d;
+  color: #999;
 }
 html {
   overflow-y: scroll;
@@ -614,20 +614,20 @@ html {
   font-weight: 400;
   padding: 6px 10px;
   background-color: #333;
-  border-color: #434248;
-  color: #ececef;
-  color: #ececef;
+  border-color: #404040;
+  color: #fafafa;
+  color: #fafafa;
   white-space: nowrap;
 }
 .btn:active {
-  background-color: #333238;
+  background-color: #303030;
   box-shadow: none;
 }
 .btn:active,
 .btn.active {
   background-color: #444;
   border-color: #4f4f4f;
-  color: #ececef;
+  color: #fafafa;
 }
 .btn svg {
   height: 15px;
@@ -639,7 +639,7 @@ html {
 .badge.badge-pill:not(.gl-badge) {
   font-weight: 400;
   background-color: rgba(255, 255, 255, 0.07);
-  color: #bfbfc3;
+  color: #dbdbdb;
   vertical-align: baseline;
 }
 .gl-font-sm {
@@ -658,10 +658,10 @@ html {
 .dropdown-menu-toggle {
   padding: 6px 8px 6px 10px;
   background-color: #333;
-  color: #ececef;
+  color: #fafafa;
   font-size: 14px;
   text-align: left;
-  border: 1px solid #434248;
+  border: 1px solid #404040;
   border-radius: 0.25rem;
   white-space: nowrap;
 }
@@ -690,7 +690,7 @@ html {
   font-weight: 400;
   padding: 8px 0;
   background-color: #333;
-  border: 1px solid #434248;
+  border: 1px solid #404040;
   border-radius: 0.25rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
@@ -713,7 +713,7 @@ html {
   font-weight: 400;
   position: relative;
   padding: 8px 12px;
-  color: #ececef;
+  color: #fafafa;
   line-height: 16px;
   white-space: normal;
   overflow: hidden;
@@ -723,7 +723,7 @@ html {
 .dropdown-menu li > a:active,
 .dropdown-menu li button:active {
   background-color: #4f4f4f;
-  color: #ececef;
+  color: #fafafa;
   outline: 0;
   text-decoration: none;
 }
@@ -737,7 +737,7 @@ html {
   height: 1px;
   margin: 0.25rem 0;
   padding: 0;
-  background-color: #434248;
+  background-color: #404040;
 }
 .dropdown-menu .badge.badge-pill + span:not(.badge):not(.badge-pill) {
   margin-right: 40px;
@@ -764,7 +764,7 @@ html {
 }
 input {
   border-radius: 0.25rem;
-  color: #ececef;
+  color: #fafafa;
   background-color: #333;
 }
 .form-control {
@@ -772,23 +772,23 @@ input {
   padding: 6px 10px;
 }
 .form-control::placeholder {
-  color: #737278;
+  color: #868686;
 }
 kbd {
   display: inline-block;
   padding: 3px 5px;
   font-size: 0.6875rem;
   line-height: 10px;
-  color: var(--gray-700, #bfbfc3);
+  color: var(--gray-700, #dbdbdb);
   vertical-align: middle;
-  background-color: var(--gray-10, #1f1e24);
+  background-color: var(--gray-10, #1f1f1f);
   border-width: 1px;
   border-style: solid;
-  border-color: var(--gray-100, #434248) var(--gray-100, #434248)
-    var(--gray-200, #535158);
+  border-color: var(--gray-100, #404040) var(--gray-100, #404040)
+    var(--gray-200, #525252);
   border-image: none;
   border-radius: 3px;
-  box-shadow: 0 -1px 0 var(--gray-200, #535158) inset;
+  box-shadow: 0 -1px 0 var(--gray-200, #525252) inset;
 }
 .navbar-gitlab {
   padding: 0 16px;
@@ -1042,7 +1042,7 @@ kbd {
   width: 100%;
   align-items: center;
   padding: 10px 16px 10px 10px;
-  color: #ececef;
+  color: #fafafa;
   background-color: transparent;
   border: 0;
   text-align: left;
@@ -1054,7 +1054,7 @@ kbd {
 .context-header .sidebar-context-title {
   overflow: hidden;
   text-overflow: ellipsis;
-  color: #ececef;
+  color: #fafafa;
 }
 @media (min-width: 768px) {
   .page-with-contextual-sidebar {
@@ -1078,7 +1078,7 @@ kbd {
   z-index: 600;
   width: 256px;
   top: var(--header-height, 48px);
-  background-color: #1f1e24;
+  background-color: #f5f5f5;
   border-right: 1px solid #e9e9e9;
   transform: translate3d(0, 0, 0);
 }
@@ -1115,7 +1115,7 @@ kbd {
 }
 .nav-sidebar a {
   text-decoration: none;
-  color: #ececef;
+  color: #fafafa;
 }
 .nav-sidebar li {
   white-space: nowrap;
@@ -1400,7 +1400,7 @@ kbd {
   display: block;
 }
 .sidebar-top-level-items li > a.gl-link {
-  color: #ececef;
+  color: #fafafa;
 }
 .sidebar-top-level-items li > a.gl-link:active {
   text-decoration: none;
@@ -1417,12 +1417,12 @@ kbd {
 .close-nav-button {
   height: 48px;
   padding: 0 16px;
-  background-color: #333238;
+  background-color: #303030;
   border: 0;
-  color: #89888d;
+  color: #999;
   display: flex;
   align-items: center;
-  background-color: #1f1e24;
+  background-color: #f5f5f5;
   position: fixed;
   bottom: 0;
   width: 255px;
@@ -1493,14 +1493,14 @@ kbd {
   }
 }
 input::-moz-placeholder {
-  color: #737278;
+  color: #868686;
   opacity: 1;
 }
 input::-ms-input-placeholder {
-  color: #737278;
+  color: #868686;
 }
 input:-ms-input-placeholder {
-  color: #737278;
+  color: #868686;
 }
 svg {
   fill: currentColor;
@@ -1629,7 +1629,7 @@ svg.s16 {
   padding: 0;
   background: #222;
   overflow: hidden;
-  box-shadow: inset 0 0 0 1px rgba(251, 250, 253, 0.1);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
 }
 .avatar.avatar-tile {
   border-radius: 0;
@@ -1638,8 +1638,8 @@ svg.s16 {
 .identicon {
   text-align: center;
   vertical-align: top;
-  color: #ececef;
-  background-color: #333238;
+  color: #fafafa;
+  background-color: #303030;
 }
 .identicon.s16 {
   font-size: 10px;
@@ -1668,7 +1668,7 @@ svg.s16 {
   background-color: #5c2900;
 }
 .identicon.bg7 {
-  background-color: #333238;
+  background-color: #303030;
 }
 .avatar-container {
   overflow: hidden;
@@ -1707,18 +1707,18 @@ svg.s16 {
   color-scheme: dark;
 }
 body.gl-dark {
-  --gray-10: #1f1e24;
-  --gray-50: #333238;
-  --gray-100: #434248;
-  --gray-200: #535158;
-  --gray-300: #626168;
-  --gray-400: #737278;
-  --gray-500: #89888d;
-  --gray-600: #a4a3a8;
-  --gray-700: #bfbfc3;
-  --gray-800: #dcdcde;
-  --gray-900: #ececef;
-  --gray-950: #fbfafd;
+  --gray-10: #1f1f1f;
+  --gray-50: #303030;
+  --gray-100: #404040;
+  --gray-200: #525252;
+  --gray-300: #5e5e5e;
+  --gray-400: #868686;
+  --gray-500: #999;
+  --gray-600: #bfbfbf;
+  --gray-700: #dbdbdb;
+  --gray-800: #f0f0f0;
+  --gray-900: #fafafa;
+  --gray-950: #fff;
   --green-50: #0a4020;
   --green-100: #0d532a;
   --green-200: #24663b;
@@ -1790,59 +1790,59 @@ body.gl-dark {
   --dark-icon-color-purple-3: #9a79f7;
   --dark-icon-color-orange-1: #665349;
   --dark-icon-color-orange-2: #b37a5d;
-  --gl-text-color: #ececef;
+  --gl-text-color: #fafafa;
   --border-color: #4f4f4f;
   --white: #333;
   --black: #fff;
-  --gray-light: #333238;
+  --gray-light: #303030;
   --svg-status-bg: #333;
 }
 .nav-sidebar,
 .toggle-sidebar-button,
 .close-nav-button {
-  background-color: #29282d;
-  border-right: 1px solid #333238;
+  background-color: #262626;
+  border-right: 1px solid #303030;
 }
 .gl-avatar:not(.gl-avatar-identicon),
 .avatar-container,
 .avatar {
-  background: rgba(251, 250, 253, 0.04);
+  background: rgba(255, 255, 255, 0.04);
 }
 .gl-avatar {
   border-style: none;
-  box-shadow: inset 0 0 0 1px rgba(251, 250, 253, 0.1);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
 }
 body.gl-dark {
-  --gl-theme-accent: #737278;
+  --gl-theme-accent: #868686;
 }
 body.gl-dark .navbar-gitlab {
-  background-color: #ececef;
+  background-color: #fafafa;
 }
 body.gl-dark .navbar-gitlab .navbar-collapse {
-  color: #ececef;
+  color: #fafafa;
 }
 body.gl-dark .navbar-gitlab .container-fluid .navbar-toggler {
-  border-left: 1px solid #a3a2a6;
-  color: #ececef;
+  border-left: 1px solid #b3b3b3;
+  color: #fafafa;
 }
 body.gl-dark .navbar-gitlab .navbar-sub-nav > li.active > a,
 body.gl-dark .navbar-gitlab .navbar-sub-nav > li.active > button,
 body.gl-dark .navbar-gitlab .navbar-nav > li.active > a,
 body.gl-dark .navbar-gitlab .navbar-nav > li.active > button {
-  color: #ececef;
+  color: #fafafa;
   background-color: #333;
 }
 body.gl-dark .navbar-gitlab .navbar-sub-nav {
-  color: #ececef;
+  color: #fafafa;
 }
 body.gl-dark .navbar-gitlab .nav > li {
-  color: #ececef;
+  color: #fafafa;
 }
 body.gl-dark .navbar-gitlab .nav > li.header-search-new {
-  color: #ececef;
+  color: #fafafa;
 }
 body.gl-dark .navbar-gitlab .nav > li > a .notification-dot {
-  border: 2px solid #ececef;
+  border: 2px solid #fafafa;
 }
 body.gl-dark
   .navbar-gitlab
@@ -1850,7 +1850,7 @@ body.gl-dark
   > li
   > a.header-help-dropdown-toggle
   .notification-dot {
-  background-color: #ececef;
+  background-color: #fafafa;
 }
 body.gl-dark
   .navbar-gitlab
@@ -1858,10 +1858,10 @@ body.gl-dark
   > li
   > a.header-user-dropdown-toggle
   .header-user-avatar {
-  border-color: #ececef;
+  border-color: #fafafa;
 }
 body.gl-dark .navbar-gitlab .nav > li.active > a {
-  color: #ececef;
+  color: #fafafa;
   background-color: #333;
 }
 body.gl-dark .navbar-gitlab .nav > li.active > a .notification-dot {
@@ -1873,48 +1873,48 @@ body.gl-dark
   > li.active
   > a.header-help-dropdown-toggle
   .notification-dot {
-  background-color: #ececef;
+  background-color: #fafafa;
 }
 body.gl-dark .header-search {
-  background-color: rgba(236, 236, 239, 0.2) !important;
+  background-color: rgba(250, 250, 250, 0.2) !important;
   border-radius: 4px;
 }
 body.gl-dark .header-search svg.gl-search-box-by-type-search-icon {
-  color: rgba(236, 236, 239, 0.8);
+  color: rgba(250, 250, 250, 0.8);
 }
 body.gl-dark .header-search input {
   background-color: transparent;
-  color: rgba(236, 236, 239, 0.8);
-  box-shadow: inset 0 0 0 1px rgba(236, 236, 239, 0.4);
+  color: rgba(250, 250, 250, 0.8);
+  box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.4);
 }
 body.gl-dark .header-search input::placeholder {
-  color: rgba(236, 236, 239, 0.8);
+  color: rgba(250, 250, 250, 0.8);
 }
 body.gl-dark .header-search input:active::placeholder {
-  color: #737278;
+  color: #868686;
 }
 body.gl-dark .header-search .keyboard-shortcut-helper {
-  color: #ececef;
-  background-color: rgba(236, 236, 239, 0.2);
+  color: #fafafa;
+  background-color: rgba(250, 250, 250, 0.2);
 }
 body.gl-dark .search form {
-  background-color: rgba(236, 236, 239, 0.2);
+  background-color: rgba(250, 250, 250, 0.2);
 }
 body.gl-dark .search .search-input::placeholder {
-  color: rgba(236, 236, 239, 0.8);
+  color: rgba(250, 250, 250, 0.8);
 }
 body.gl-dark .search .search-input-wrap .search-icon,
 body.gl-dark .search .search-input-wrap .clear-icon {
-  fill: rgba(236, 236, 239, 0.8);
+  fill: rgba(250, 250, 250, 0.8);
 }
 body.gl-dark .nav-sidebar li.active > a {
-  color: #ececef;
+  color: #fafafa;
 }
 body.gl-dark .nav-sidebar .fly-out-top-item a,
 body.gl-dark .nav-sidebar .fly-out-top-item.active a,
 body.gl-dark .nav-sidebar .fly-out-top-item .fly-out-top-item-container {
-  background-color: var(--gray-100, #333238);
-  color: var(--gray-900, #ececef);
+  background-color: var(--gray-100, #303030);
+  color: var(--gray-900, #fafafa);
 }
 body.gl-dark .navbar-gitlab {
   background-color: var(--gray-50);
@@ -1951,18 +1951,18 @@ body.gl-dark .navbar-gitlab .search form .search-input {
   color-scheme: dark;
 }
 body.gl-dark {
-  --gray-10: #1f1e24;
-  --gray-50: #333238;
-  --gray-100: #434248;
-  --gray-200: #535158;
-  --gray-300: #626168;
-  --gray-400: #737278;
-  --gray-500: #89888d;
-  --gray-600: #a4a3a8;
-  --gray-700: #bfbfc3;
-  --gray-800: #dcdcde;
-  --gray-900: #ececef;
-  --gray-950: #fbfafd;
+  --gray-10: #1f1f1f;
+  --gray-50: #303030;
+  --gray-100: #404040;
+  --gray-200: #525252;
+  --gray-300: #5e5e5e;
+  --gray-400: #868686;
+  --gray-500: #999;
+  --gray-600: #bfbfbf;
+  --gray-700: #dbdbdb;
+  --gray-800: #f0f0f0;
+  --gray-900: #fafafa;
+  --gray-950: #fff;
   --green-50: #0a4020;
   --green-100: #0d532a;
   --green-200: #24663b;
@@ -2034,11 +2034,11 @@ body.gl-dark {
   --dark-icon-color-purple-3: #9a79f7;
   --dark-icon-color-orange-1: #665349;
   --dark-icon-color-orange-2: #b37a5d;
-  --gl-text-color: #ececef;
+  --gl-text-color: #fafafa;
   --border-color: #4f4f4f;
   --white: #333;
   --black: #fff;
-  --gray-light: #333238;
+  --gray-light: #303030;
   --svg-status-bg: #333;
 }
 .tab-width-8 {
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index 90927bd0086a..802262ba3460 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -23,7 +23,7 @@ body {
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #333238;
+  color: #303030;
   text-align: left;
   background-color: #fff;
 }
@@ -99,7 +99,7 @@ kbd {
   padding: 0.2rem 0.4rem;
   font-size: 90%;
   color: #fff;
-  background-color: #333238;
+  background-color: #303030;
   border-radius: 0.2rem;
 }
 kbd kbd {
@@ -122,24 +122,24 @@ kbd kbd {
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #333238;
+  color: #303030;
   background-color: #fff;
   background-clip: padding-box;
-  border: 1px solid #89888d;
+  border: 1px solid #868686;
   border-radius: 0.25rem;
 }
 @media (prefers-reduced-motion: reduce) {
 }
 .form-control:-moz-focusring {
   color: transparent;
-  text-shadow: 0 0 0 #333238;
+  text-shadow: 0 0 0 #303030;
 }
 .form-control::placeholder {
-  color: #626168;
+  color: #5e5e5e;
   opacity: 1;
 }
 .form-control:disabled {
-  background-color: #fbfafd;
+  background-color: #fafafa;
   opacity: 1;
 }
 .form-inline {
@@ -157,7 +157,7 @@ kbd kbd {
 .btn {
   display: inline-block;
   font-weight: 400;
-  color: #333238;
+  color: #303030;
   text-align: center;
   vertical-align: middle;
   user-select: none;
@@ -193,7 +193,7 @@ kbd kbd {
   padding: 0.5rem 0;
   margin: 0.125rem 0 0;
   font-size: 1rem;
-  color: #333238;
+  color: #303030;
   text-align: left;
   list-style: none;
   background-color: #fff;
@@ -436,8 +436,8 @@ a.gl-badge.badge-warning:active {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   height: auto;
-  color: #333238;
-  box-shadow: inset 0 0 0 1px #89888d;
+  color: #303030;
+  box-shadow: inset 0 0 0 1px #868686;
   border-style: none;
   appearance: none;
   -moz-appearance: none;
@@ -446,17 +446,17 @@ a.gl-badge.badge-warning:active {
 .gl-form-input:not(.form-control-plaintext):not([type="color"]):read-only,
 .gl-form-input.form-control:disabled,
 .gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only {
-  background-color: #fbfafd;
-  box-shadow: inset 0 0 0 1px #dcdcde;
+  background-color: #f5f5f5;
+  box-shadow: inset 0 0 0 1px #dbdbdb;
 }
 .gl-form-input:disabled,
 .gl-form-input.form-control:disabled {
   cursor: not-allowed;
-  color: #737278;
+  color: #666;
 }
 .gl-form-input::placeholder,
 .gl-form-input.form-control::placeholder {
-  color: #89888d;
+  color: #868686;
 }
 .gl-icon {
   fill: currentColor;
@@ -499,9 +499,9 @@ a.gl-badge.badge-warning:active {
   padding-right: 0.75rem;
   background-color: transparent;
   line-height: 1rem;
-  color: #333238;
+  color: #303030;
   fill: currentColor;
-  box-shadow: inset 0 0 0 1px #bfbfc3;
+  box-shadow: inset 0 0 0 1px #bfbfbf;
   justify-content: center;
   align-items: center;
   font-size: 0.875rem;
@@ -512,20 +512,20 @@ a.gl-badge.badge-warning:active {
 }
 .gl-button.gl-button.btn-default:active,
 .gl-button.gl-button.btn-default.active {
-  box-shadow: inset 0 0 0 1px #626168, 0 0 0 1px #fff, 0 0 0 3px #428fdc;
+  box-shadow: inset 0 0 0 1px #5e5e5e, 0 0 0 1px #fff, 0 0 0 3px #428fdc;
   outline: none;
-  background-color: #dcdcde;
+  background-color: #dbdbdb;
 }
 .gl-button.gl-button.btn-default:active .gl-icon,
 .gl-button.gl-button.btn-default.active .gl-icon {
-  color: #333238;
+  color: #303030;
 }
 .gl-button.gl-button.btn-default .gl-icon {
-  color: #737278;
+  color: #666;
 }
 .gl-search-box-by-type-search-icon {
   margin: 0.5rem;
-  color: #737278;
+  color: #666;
   width: 1rem;
   position: absolute;
 }
@@ -575,11 +575,11 @@ svg {
   height: 0;
   margin: 4px 0;
   overflow: hidden;
-  border-top: 1px solid #dcdcde;
+  border-top: 1px solid #dbdbdb;
 }
 .toggle-sidebar-button .collapse-text,
 .toggle-sidebar-button .icon-chevron-double-lg-left {
-  color: #737278;
+  color: #666;
 }
 html {
   overflow-y: scroll;
@@ -595,20 +595,20 @@ html {
   font-weight: 400;
   padding: 6px 10px;
   background-color: #fff;
-  border-color: #dcdcde;
-  color: #333238;
-  color: #333238;
+  border-color: #dbdbdb;
+  color: #303030;
+  color: #303030;
   white-space: nowrap;
 }
 .btn:active {
-  background-color: #ececef;
+  background-color: #f0f0f0;
   box-shadow: none;
 }
 .btn:active,
 .btn.active {
   background-color: #eaeaea;
   border-color: #e3e3e3;
-  color: #333238;
+  color: #303030;
 }
 .btn svg {
   height: 15px;
@@ -620,7 +620,7 @@ html {
 .badge.badge-pill:not(.gl-badge) {
   font-weight: 400;
   background-color: rgba(0, 0, 0, 0.07);
-  color: #535158;
+  color: #525252;
   vertical-align: baseline;
 }
 .gl-font-sm {
@@ -639,10 +639,10 @@ html {
 .dropdown-menu-toggle {
   padding: 6px 8px 6px 10px;
   background-color: #fff;
-  color: #333238;
+  color: #303030;
   font-size: 14px;
   text-align: left;
-  border: 1px solid #dcdcde;
+  border: 1px solid #dbdbdb;
   border-radius: 0.25rem;
   white-space: nowrap;
 }
@@ -671,7 +671,7 @@ html {
   font-weight: 400;
   padding: 8px 0;
   background-color: #fff;
-  border: 1px solid #dcdcde;
+  border: 1px solid #dbdbdb;
   border-radius: 0.25rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
@@ -694,7 +694,7 @@ html {
   font-weight: 400;
   position: relative;
   padding: 8px 12px;
-  color: #333238;
+  color: #303030;
   line-height: 16px;
   white-space: normal;
   overflow: hidden;
@@ -703,8 +703,8 @@ html {
 }
 .dropdown-menu li > a:active,
 .dropdown-menu li button:active {
-  background-color: #ececef;
-  color: #333238;
+  background-color: #eee;
+  color: #303030;
   outline: 0;
   text-decoration: none;
 }
@@ -718,7 +718,7 @@ html {
   height: 1px;
   margin: 0.25rem 0;
   padding: 0;
-  background-color: #dcdcde;
+  background-color: #dbdbdb;
 }
 .dropdown-menu .badge.badge-pill + span:not(.badge):not(.badge-pill) {
   margin-right: 40px;
@@ -745,7 +745,7 @@ html {
 }
 input {
   border-radius: 0.25rem;
-  color: #333238;
+  color: #303030;
   background-color: #fff;
 }
 .form-control {
@@ -753,23 +753,23 @@ input {
   padding: 6px 10px;
 }
 .form-control::placeholder {
-  color: #89888d;
+  color: #868686;
 }
 kbd {
   display: inline-block;
   padding: 3px 5px;
   font-size: 0.6875rem;
   line-height: 10px;
-  color: var(--gray-700, #535158);
+  color: var(--gray-700, #525252);
   vertical-align: middle;
-  background-color: var(--gray-10, #fbfafd);
+  background-color: var(--gray-10, #f5f5f5);
   border-width: 1px;
   border-style: solid;
-  border-color: var(--gray-100, #dcdcde) var(--gray-100, #dcdcde)
-    var(--gray-200, #bfbfc3);
+  border-color: var(--gray-100, #dbdbdb) var(--gray-100, #dbdbdb)
+    var(--gray-200, #bfbfbf);
   border-image: none;
   border-radius: 3px;
-  box-shadow: 0 -1px 0 var(--gray-200, #bfbfc3) inset;
+  box-shadow: 0 -1px 0 var(--gray-200, #bfbfbf) inset;
 }
 .navbar-gitlab {
   padding: 0 16px;
@@ -991,7 +991,7 @@ kbd {
   float: left;
   margin-right: 5px;
   border-radius: 50%;
-  border: 1px solid #f2f2f4;
+  border: 1px solid #f5f5f5;
 }
 .notification-dot {
   background-color: #d99530;
@@ -1023,7 +1023,7 @@ kbd {
   width: 100%;
   align-items: center;
   padding: 10px 16px 10px 10px;
-  color: #333238;
+  color: #303030;
   background-color: transparent;
   border: 0;
   text-align: left;
@@ -1035,7 +1035,7 @@ kbd {
 .context-header .sidebar-context-title {
   overflow: hidden;
   text-overflow: ellipsis;
-  color: #333238;
+  color: #303030;
 }
 @media (min-width: 768px) {
   .page-with-contextual-sidebar {
@@ -1059,7 +1059,7 @@ kbd {
   z-index: 600;
   width: 256px;
   top: var(--header-height, 48px);
-  background-color: #fbfafd;
+  background-color: #f5f5f5;
   border-right: 1px solid #e9e9e9;
   transform: translate3d(0, 0, 0);
 }
@@ -1096,7 +1096,7 @@ kbd {
 }
 .nav-sidebar a {
   text-decoration: none;
-  color: #333238;
+  color: #303030;
 }
 .nav-sidebar li {
   white-space: nowrap;
@@ -1381,7 +1381,7 @@ kbd {
   display: block;
 }
 .sidebar-top-level-items li > a.gl-link {
-  color: #333238;
+  color: #303030;
 }
 .sidebar-top-level-items li > a.gl-link:active {
   text-decoration: none;
@@ -1398,12 +1398,12 @@ kbd {
 .close-nav-button {
   height: 48px;
   padding: 0 16px;
-  background-color: #fbfafd;
+  background-color: #fafafa;
   border: 0;
-  color: #737278;
+  color: #666;
   display: flex;
   align-items: center;
-  background-color: #fbfafd;
+  background-color: #f5f5f5;
   position: fixed;
   bottom: 0;
   width: 255px;
@@ -1474,14 +1474,14 @@ kbd {
   }
 }
 input::-moz-placeholder {
-  color: #89888d;
+  color: #868686;
   opacity: 1;
 }
 input::-ms-input-placeholder {
-  color: #89888d;
+  color: #868686;
 }
 input:-ms-input-placeholder {
-  color: #89888d;
+  color: #868686;
 }
 svg {
   fill: currentColor;
@@ -1608,9 +1608,9 @@ svg.s16 {
   width: 40px;
   height: 40px;
   padding: 0;
-  background: #fefefe;
+  background: #fdfdfd;
   overflow: hidden;
-  box-shadow: inset 0 0 0 1px rgba(31, 30, 36, 0.1);
+  box-shadow: inset 0 0 0 1px rgba(31, 31, 31, 0.1);
 }
 .avatar.avatar-tile {
   border-radius: 0;
@@ -1619,8 +1619,8 @@ svg.s16 {
 .identicon {
   text-align: center;
   vertical-align: top;
-  color: #333238;
-  background-color: #ececef;
+  color: #303030;
+  background-color: #f0f0f0;
 }
 .identicon.s16 {
   font-size: 10px;
@@ -1649,7 +1649,7 @@ svg.s16 {
   background-color: #fdf1dd;
 }
 .identicon.bg7 {
-  background-color: #ececef;
+  background-color: #f0f0f0;
 }
 .avatar-container {
   overflow: hidden;
diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss
index 7ae158b3930c..33e10b9bd620 100644
--- a/app/assets/stylesheets/startup/startup-signin.scss
+++ b/app/assets/stylesheets/startup/startup-signin.scss
@@ -22,7 +22,7 @@ body {
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #333238;
+  color: #303030;
   text-align: left;
   background-color: #fff;
 }
@@ -110,7 +110,7 @@ h3 {
   margin-bottom: 0.25rem;
   font-weight: 600;
   line-height: 1.2;
-  color: #333238;
+  color: #303030;
 }
 h1 {
   font-size: 2.1875rem;
@@ -196,24 +196,24 @@ hr {
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #333238;
+  color: #303030;
   background-color: #fff;
   background-clip: padding-box;
-  border: 1px solid #89888d;
+  border: 1px solid #868686;
   border-radius: 0.25rem;
 }
 @media (prefers-reduced-motion: reduce) {
 }
 .form-control:-moz-focusring {
   color: transparent;
-  text-shadow: 0 0 0 #333238;
+  text-shadow: 0 0 0 #303030;
 }
 .form-control::placeholder {
-  color: #626168;
+  color: #5e5e5e;
   opacity: 1;
 }
 .form-control:disabled {
-  background-color: #fbfafd;
+  background-color: #fafafa;
   opacity: 1;
 }
 .form-group {
@@ -222,7 +222,7 @@ hr {
 .btn {
   display: inline-block;
   font-weight: 400;
-  color: #333238;
+  color: #303030;
   text-align: center;
   vertical-align: middle;
   user-select: none;
@@ -282,10 +282,10 @@ input.btn-block[type="button"] {
   border-color: #b3d7ff;
 }
 .custom-control-input:disabled ~ .custom-control-label {
-  color: #626168;
+  color: #5e5e5e;
 }
 .custom-control-input:disabled ~ .custom-control-label::before {
-  background-color: #fbfafd;
+  background-color: #fafafa;
 }
 .custom-control-label {
   position: relative;
@@ -302,7 +302,7 @@ input.btn-block[type="button"] {
   pointer-events: none;
   content: "";
   background-color: #fff;
-  border: #737278 solid 1px;
+  border: #666 solid 1px;
 }
 .custom-control-label::after {
   position: absolute;
@@ -400,8 +400,8 @@ input.btn-block[type="button"] {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   height: auto;
-  color: #333238;
-  box-shadow: inset 0 0 0 1px #89888d;
+  color: #303030;
+  box-shadow: inset 0 0 0 1px #868686;
   border-style: none;
   appearance: none;
   -moz-appearance: none;
@@ -410,27 +410,27 @@ input.btn-block[type="button"] {
 .gl-form-input:not(.form-control-plaintext):not([type="color"]):read-only,
 .gl-form-input.form-control:disabled,
 .gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only {
-  background-color: #fbfafd;
-  box-shadow: inset 0 0 0 1px #dcdcde;
+  background-color: #f5f5f5;
+  box-shadow: inset 0 0 0 1px #dbdbdb;
 }
 .gl-form-input:disabled,
 .gl-form-input.form-control:disabled {
   cursor: not-allowed;
-  color: #737278;
+  color: #666;
 }
 .gl-form-input::placeholder,
 .gl-form-input.form-control::placeholder {
-  color: #89888d;
+  color: #868686;
 }
 .gl-form-checkbox {
   font-size: 0.875rem;
   line-height: 1rem;
-  color: #333238;
+  color: #303030;
 }
 .gl-form-checkbox .custom-control-input:disabled,
 .gl-form-checkbox .custom-control-input:disabled ~ .custom-control-label {
   cursor: not-allowed;
-  color: #89888d;
+  color: #868686;
 }
 .gl-form-checkbox.custom-control .custom-control-input ~ .custom-control-label {
   cursor: pointer;
@@ -447,7 +447,7 @@ input.btn-block[type="button"] {
   .custom-control-input
   ~ .custom-control-label::before {
   background-color: #fff;
-  border-color: #89888d;
+  border-color: #868686;
 }
 .gl-form-checkbox.custom-control
   .custom-control-input:checked
@@ -490,8 +490,8 @@ input.btn-block[type="button"] {
 .gl-form-checkbox.custom-control
   .custom-control-input:disabled
   ~ .custom-control-label::before {
-  background-color: #ececef;
-  border-color: #dcdcde;
+  background-color: #f0f0f0;
+  border-color: #dbdbdb;
   pointer-events: auto;
 }
 .gl-form-checkbox.custom-control
@@ -500,8 +500,8 @@ input.btn-block[type="button"] {
 .gl-form-checkbox.custom-control
   .custom-control-input[type="checkbox"]:indeterminate:disabled
   ~ .custom-control-label::before {
-  background-color: #dcdcde;
-  border-color: #dcdcde;
+  background-color: #dbdbdb;
+  border-color: #dbdbdb;
 }
 .gl-form-checkbox.custom-control
   .custom-control-input:checked:disabled
@@ -509,7 +509,7 @@ input.btn-block[type="button"] {
 .gl-form-checkbox.custom-control
   .custom-control-input[type="checkbox"]:indeterminate:disabled
   ~ .custom-control-label::after {
-  background-color: #626168;
+  background-color: #5e5e5e;
 }
 .gl-button {
   display: inline-flex;
@@ -526,9 +526,9 @@ input.btn-block[type="button"] {
   padding-right: 0.75rem;
   background-color: transparent;
   line-height: 1rem;
-  color: #333238;
+  color: #303030;
   fill: currentColor;
-  box-shadow: inset 0 0 0 1px #bfbfc3;
+  box-shadow: inset 0 0 0 1px #bfbfbf;
   justify-content: center;
   align-items: center;
   font-size: 0.875rem;
@@ -560,9 +560,9 @@ input.btn-block[type="button"] {
 .gl-button.gl-button.btn-default.active,
 .gl-button.gl-button.btn-block.btn-default:active,
 .gl-button.gl-button.btn-block.btn-default.active {
-  box-shadow: inset 0 0 0 1px #626168, 0 0 0 1px #fff, 0 0 0 3px #428fdc;
+  box-shadow: inset 0 0 0 1px #5e5e5e, 0 0 0 1px #fff, 0 0 0 3px #428fdc;
   outline: none;
-  background-color: #dcdcde;
+  background-color: #dbdbdb;
 }
 .gl-button.gl-button.btn-confirm,
 .gl-button.gl-button.btn-block.btn-confirm {
@@ -636,20 +636,20 @@ body.navless {
   font-weight: 400;
   padding: 6px 10px;
   background-color: #fff;
-  border-color: #dcdcde;
-  color: #333238;
-  color: #333238;
+  border-color: #dbdbdb;
+  color: #303030;
+  color: #303030;
   white-space: nowrap;
 }
 .btn:active {
-  background-color: #ececef;
+  background-color: #f0f0f0;
   box-shadow: none;
 }
 .btn:active,
 .btn.active {
   background-color: #eaeaea;
   border-color: #e3e3e3;
-  color: #333238;
+  color: #303030;
 }
 .btn svg {
   height: 15px;
@@ -676,7 +676,7 @@ body.navless {
 }
 hr {
   margin: 1.5rem 0;
-  border-top: 1px solid #ececef;
+  border-top: 1px solid #eee;
 }
 .footer-links {
   margin-bottom: 20px;
@@ -704,7 +704,7 @@ hr {
 }
 input {
   border-radius: 0.25rem;
-  color: #333238;
+  color: #303030;
   background-color: #fff;
 }
 label {
@@ -721,7 +721,7 @@ label.label-bold {
   padding: 6px 10px;
 }
 .form-control::placeholder {
-  color: #89888d;
+  color: #868686;
 }
 .gl-show-field-errors .form-control:not(textarea) {
   height: 34px;
@@ -730,7 +730,7 @@ label.label-bold {
   justify-content: center;
   height: var(--header-height, 48px);
   background: #fff;
-  border-bottom: 1px solid #dcdcde;
+  border-bottom: 1px solid #dbdbdb;
 }
 .navbar-empty .tanuki-logo,
 .navbar-empty .brand-header-logo {
@@ -747,14 +747,14 @@ label.label-bold {
   fill: #fca326;
 }
 input::-moz-placeholder {
-  color: #89888d;
+  color: #868686;
   opacity: 1;
 }
 input::-ms-input-placeholder {
-  color: #89888d;
+  color: #868686;
 }
 input:-ms-input-placeholder {
-  color: #89888d;
+  color: #868686;
 }
 svg {
   fill: currentColor;
@@ -805,7 +805,7 @@ svg {
 }
 .login-page .login-box,
 .login-page .omniauth-container {
-  box-shadow: 0 0 0 1px #dcdcde;
+  box-shadow: 0 0 0 1px #dbdbdb;
   border-radius: 0.25rem;
 }
 .login-page .login-box .login-heading h3,
@@ -863,7 +863,7 @@ svg {
 }
 .login-page .new-session-tabs {
   display: flex;
-  box-shadow: 0 0 0 1px #dcdcde;
+  box-shadow: 0 0 0 1px #dbdbdb;
   border-top-right-radius: 4px;
   border-top-left-radius: 4px;
 }
@@ -874,7 +874,7 @@ svg {
 .login-page .new-session-tabs.nav-links-unboxed .nav-item {
   border-left: 0;
   border-right: 0;
-  border-bottom: 1px solid #dcdcde;
+  border-bottom: 1px solid #dbdbdb;
   background-color: transparent;
 }
 .login-page .new-session-tabs.custom-provider-tabs {
@@ -885,7 +885,7 @@ svg {
   flex-basis: auto;
 }
 .login-page .new-session-tabs.custom-provider-tabs li:nth-child(n + 5) {
-  border-top: 1px solid #dcdcde;
+  border-top: 1px solid #dbdbdb;
 }
 .login-page .new-session-tabs.custom-provider-tabs a {
   font-size: 16px;
@@ -893,7 +893,7 @@ svg {
 .login-page .new-session-tabs li {
   flex: 1;
   text-align: center;
-  border-left: 1px solid #dcdcde;
+  border-left: 1px solid #dbdbdb;
 }
 .login-page .new-session-tabs li:first-of-type {
   border-left: 0;
@@ -903,7 +903,7 @@ svg {
   border-top-right-radius: 4px;
 }
 .login-page .new-session-tabs li:not(.active) {
-  background-color: #fbfafd;
+  background-color: #fafafa;
 }
 .login-page .new-session-tabs li a {
   width: 100%;
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss
index a3474d2ed503..7126c99988c1 100644
--- a/app/assets/stylesheets/themes/_dark.scss
+++ b/app/assets/stylesheets/themes/_dark.scss
@@ -1,15 +1,15 @@
-$gray-10: #1f1e24;
-$gray-50: #333238;
-$gray-100: #434248;
-$gray-200: #535158;
-$gray-300: #626168;
-$gray-400: #737278;
-$gray-500: #89888d;
-$gray-600: #a4a3a8;
-$gray-700: #bfbfc3;
-$gray-800: #dcdcde;
-$gray-900: #ececef;
-$gray-950: #fbfafd;
+$gray-10: #1f1f1f;
+$gray-50: #303030;
+$gray-100: #404040;
+$gray-200: #525252;
+$gray-300: #5e5e5e;
+$gray-400: #868686;
+$gray-500: #999;
+$gray-600: #bfbfbf;
+$gray-700: #dbdbdb;
+$gray-800: #f0f0f0;
+$gray-900: #fafafa;
+$gray-950: #fff;
 
 $green-50: #0a4020;
 $green-100: #0d532a;
diff --git a/ee/app/assets/stylesheets/startup/startup-dark.scss b/ee/app/assets/stylesheets/startup/startup-dark.scss
index 47e7a2b64660..3a81eec34e33 100644
--- a/ee/app/assets/stylesheets/startup/startup-dark.scss
+++ b/ee/app/assets/stylesheets/startup/startup-dark.scss
@@ -6,15 +6,15 @@
   color-scheme: dark;
 }
 body.gl-dark {
-  --gray-10: #1f1e24;
-  --gray-50: #333238;
-  --gray-100: #434248;
-  --gray-200: #535158;
-  --gray-700: #bfbfc3;
-  --gray-900: #ececef;
+  --gray-10: #1f1f1f;
+  --gray-50: #303030;
+  --gray-100: #404040;
+  --gray-200: #525252;
+  --gray-700: #dbdbdb;
+  --gray-900: #fafafa;
   --green-100: #0d532a;
   --green-700: #91d4a8;
-  --gl-text-color: #ececef;
+  --gl-text-color: #fafafa;
   --border-color: #4f4f4f;
   --black: #fff;
 }
@@ -42,9 +42,9 @@ body {
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #ececef;
+  color: #fafafa;
   text-align: left;
-  background-color: #1f1e24;
+  background-color: #1f1f1f;
 }
 ul {
   margin-top: 0;
@@ -118,7 +118,7 @@ kbd {
   padding: 0.2rem 0.4rem;
   font-size: 90%;
   color: #333;
-  background-color: #ececef;
+  background-color: #fafafa;
   border-radius: 0.2rem;
 }
 kbd kbd {
@@ -141,24 +141,24 @@ kbd kbd {
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #ececef;
+  color: #fafafa;
   background-color: #333;
   background-clip: padding-box;
-  border: 1px solid #737278;
+  border: 1px solid #868686;
   border-radius: 0.25rem;
 }
 @media (prefers-reduced-motion: reduce) {
 }
 .form-control:-moz-focusring {
   color: transparent;
-  text-shadow: 0 0 0 #ececef;
+  text-shadow: 0 0 0 #fafafa;
 }
 .form-control::placeholder {
-  color: #a4a3a8;
+  color: #bfbfbf;
   opacity: 1;
 }
 .form-control:disabled {
-  background-color: #333238;
+  background-color: #303030;
   opacity: 1;
 }
 .form-inline {
@@ -176,7 +176,7 @@ kbd kbd {
 .btn {
   display: inline-block;
   font-weight: 400;
-  color: #ececef;
+  color: #fafafa;
   text-align: center;
   vertical-align: middle;
   user-select: none;
@@ -212,7 +212,7 @@ kbd kbd {
   padding: 0.5rem 0;
   margin: 0.125rem 0 0;
   font-size: 1rem;
-  color: #ececef;
+  color: #fafafa;
   text-align: left;
   list-style: none;
   background-color: #333;
@@ -319,15 +319,15 @@ kbd kbd {
   border-radius: 10rem;
 }
 .badge-success {
-  color: #fbfafd;
+  color: #fff;
   background-color: #2da160;
 }
 .badge-info {
-  color: #fbfafd;
+  color: #fff;
   background-color: #428fdc;
 }
 .badge-warning {
-  color: #fbfafd;
+  color: #fff;
   background-color: #c17d10;
 }
 .rounded-circle {
@@ -455,8 +455,8 @@ a.gl-badge.badge-warning:active {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   height: auto;
-  color: #ececef;
-  box-shadow: inset 0 0 0 1px #737278;
+  color: #fafafa;
+  box-shadow: inset 0 0 0 1px #868686;
   border-style: none;
   appearance: none;
   -moz-appearance: none;
@@ -465,17 +465,17 @@ a.gl-badge.badge-warning:active {
 .gl-form-input:not(.form-control-plaintext):not([type="color"]):read-only,
 .gl-form-input.form-control:disabled,
 .gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only {
-  background-color: #1f1e24;
-  box-shadow: inset 0 0 0 1px #434248;
+  background-color: #1f1f1f;
+  box-shadow: inset 0 0 0 1px #404040;
 }
 .gl-form-input:disabled,
 .gl-form-input.form-control:disabled {
   cursor: not-allowed;
-  color: #89888d;
+  color: #999;
 }
 .gl-form-input::placeholder,
 .gl-form-input.form-control::placeholder {
-  color: #737278;
+  color: #868686;
 }
 .gl-icon {
   fill: currentColor;
@@ -518,9 +518,9 @@ a.gl-badge.badge-warning:active {
   padding-right: 0.75rem;
   background-color: transparent;
   line-height: 1rem;
-  color: #ececef;
+  color: #fafafa;
   fill: currentColor;
-  box-shadow: inset 0 0 0 1px #535158;
+  box-shadow: inset 0 0 0 1px #525252;
   justify-content: center;
   align-items: center;
   font-size: 0.875rem;
@@ -531,20 +531,20 @@ a.gl-badge.badge-warning:active {
 }
 .gl-button.gl-button.btn-default:active,
 .gl-button.gl-button.btn-default.active {
-  box-shadow: inset 0 0 0 1px #a4a3a8, 0 0 0 1px #333, 0 0 0 3px #1f75cb;
+  box-shadow: inset 0 0 0 1px #bfbfbf, 0 0 0 1px #333, 0 0 0 3px #1f75cb;
   outline: none;
-  background-color: #434248;
+  background-color: #404040;
 }
 .gl-button.gl-button.btn-default:active .gl-icon,
 .gl-button.gl-button.btn-default.active .gl-icon {
-  color: #ececef;
+  color: #fafafa;
 }
 .gl-button.gl-button.btn-default .gl-icon {
-  color: #89888d;
+  color: #999;
 }
 .gl-search-box-by-type-search-icon {
   margin: 0.5rem;
-  color: #89888d;
+  color: #999;
   width: 1rem;
   position: absolute;
 }
@@ -594,11 +594,11 @@ svg {
   height: 0;
   margin: 4px 0;
   overflow: hidden;
-  border-top: 1px solid #434248;
+  border-top: 1px solid #404040;
 }
 .toggle-sidebar-button .collapse-text,
 .toggle-sidebar-button .icon-chevron-double-lg-left {
-  color: #89888d;
+  color: #999;
 }
 html {
   overflow-y: scroll;
@@ -614,20 +614,20 @@ html {
   font-weight: 400;
   padding: 6px 10px;
   background-color: #333;
-  border-color: #434248;
-  color: #ececef;
-  color: #ececef;
+  border-color: #404040;
+  color: #fafafa;
+  color: #fafafa;
   white-space: nowrap;
 }
 .btn:active {
-  background-color: #333238;
+  background-color: #303030;
   box-shadow: none;
 }
 .btn:active,
 .btn.active {
   background-color: #444;
   border-color: #4f4f4f;
-  color: #ececef;
+  color: #fafafa;
 }
 .btn svg {
   height: 15px;
@@ -639,7 +639,7 @@ html {
 .badge.badge-pill:not(.gl-badge) {
   font-weight: 400;
   background-color: rgba(255, 255, 255, 0.07);
-  color: #bfbfc3;
+  color: #dbdbdb;
   vertical-align: baseline;
 }
 .gl-font-sm {
@@ -658,10 +658,10 @@ html {
 .dropdown-menu-toggle {
   padding: 6px 8px 6px 10px;
   background-color: #333;
-  color: #ececef;
+  color: #fafafa;
   font-size: 14px;
   text-align: left;
-  border: 1px solid #434248;
+  border: 1px solid #404040;
   border-radius: 0.25rem;
   white-space: nowrap;
 }
@@ -690,7 +690,7 @@ html {
   font-weight: 400;
   padding: 8px 0;
   background-color: #333;
-  border: 1px solid #434248;
+  border: 1px solid #404040;
   border-radius: 0.25rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
@@ -713,7 +713,7 @@ html {
   font-weight: 400;
   position: relative;
   padding: 8px 12px;
-  color: #ececef;
+  color: #fafafa;
   line-height: 16px;
   white-space: normal;
   overflow: hidden;
@@ -723,7 +723,7 @@ html {
 .dropdown-menu li > a:active,
 .dropdown-menu li button:active {
   background-color: #4f4f4f;
-  color: #ececef;
+  color: #fafafa;
   outline: 0;
   text-decoration: none;
 }
@@ -737,7 +737,7 @@ html {
   height: 1px;
   margin: 0.25rem 0;
   padding: 0;
-  background-color: #434248;
+  background-color: #404040;
 }
 .dropdown-menu .badge.badge-pill + span:not(.badge):not(.badge-pill) {
   margin-right: 40px;
@@ -764,7 +764,7 @@ html {
 }
 input {
   border-radius: 0.25rem;
-  color: #ececef;
+  color: #fafafa;
   background-color: #333;
 }
 .form-control {
@@ -772,23 +772,23 @@ input {
   padding: 6px 10px;
 }
 .form-control::placeholder {
-  color: #737278;
+  color: #868686;
 }
 kbd {
   display: inline-block;
   padding: 3px 5px;
   font-size: 0.6875rem;
   line-height: 10px;
-  color: var(--gray-700, #bfbfc3);
+  color: var(--gray-700, #dbdbdb);
   vertical-align: middle;
-  background-color: var(--gray-10, #1f1e24);
+  background-color: var(--gray-10, #1f1f1f);
   border-width: 1px;
   border-style: solid;
-  border-color: var(--gray-100, #434248) var(--gray-100, #434248)
-    var(--gray-200, #535158);
+  border-color: var(--gray-100, #404040) var(--gray-100, #404040)
+    var(--gray-200, #525252);
   border-image: none;
   border-radius: 3px;
-  box-shadow: 0 -1px 0 var(--gray-200, #535158) inset;
+  box-shadow: 0 -1px 0 var(--gray-200, #525252) inset;
 }
 .navbar-gitlab {
   padding: 0 16px;
@@ -1042,7 +1042,7 @@ kbd {
   width: 100%;
   align-items: center;
   padding: 10px 16px 10px 10px;
-  color: #ececef;
+  color: #fafafa;
   background-color: transparent;
   border: 0;
   text-align: left;
@@ -1054,7 +1054,7 @@ kbd {
 .context-header .sidebar-context-title {
   overflow: hidden;
   text-overflow: ellipsis;
-  color: #ececef;
+  color: #fafafa;
 }
 @media (min-width: 768px) {
   .page-with-contextual-sidebar {
@@ -1078,7 +1078,7 @@ kbd {
   z-index: 600;
   width: 256px;
   top: var(--header-height, 48px);
-  background-color: #1f1e24;
+  background-color: #f5f5f5;
   border-right: 1px solid #e9e9e9;
   transform: translate3d(0, 0, 0);
 }
@@ -1115,7 +1115,7 @@ kbd {
 }
 .nav-sidebar a {
   text-decoration: none;
-  color: #ececef;
+  color: #fafafa;
 }
 .nav-sidebar li {
   white-space: nowrap;
@@ -1400,7 +1400,7 @@ kbd {
   display: block;
 }
 .sidebar-top-level-items li > a.gl-link {
-  color: #ececef;
+  color: #fafafa;
 }
 .sidebar-top-level-items li > a.gl-link:active {
   text-decoration: none;
@@ -1417,12 +1417,12 @@ kbd {
 .close-nav-button {
   height: 48px;
   padding: 0 16px;
-  background-color: #333238;
+  background-color: #303030;
   border: 0;
-  color: #89888d;
+  color: #999;
   display: flex;
   align-items: center;
-  background-color: #1f1e24;
+  background-color: #f5f5f5;
   position: fixed;
   bottom: 0;
   width: 255px;
@@ -1493,14 +1493,14 @@ kbd {
   }
 }
 input::-moz-placeholder {
-  color: #737278;
+  color: #868686;
   opacity: 1;
 }
 input::-ms-input-placeholder {
-  color: #737278;
+  color: #868686;
 }
 input:-ms-input-placeholder {
-  color: #737278;
+  color: #868686;
 }
 svg {
   fill: currentColor;
@@ -1629,7 +1629,7 @@ svg.s16 {
   padding: 0;
   background: #222;
   overflow: hidden;
-  box-shadow: inset 0 0 0 1px rgba(251, 250, 253, 0.1);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
 }
 .avatar.avatar-tile {
   border-radius: 0;
@@ -1638,8 +1638,8 @@ svg.s16 {
 .identicon {
   text-align: center;
   vertical-align: top;
-  color: #ececef;
-  background-color: #333238;
+  color: #fafafa;
+  background-color: #303030;
 }
 .identicon.s16 {
   font-size: 10px;
@@ -1668,7 +1668,7 @@ svg.s16 {
   background-color: #5c2900;
 }
 .identicon.bg7 {
-  background-color: #333238;
+  background-color: #303030;
 }
 .avatar-container {
   overflow: hidden;
@@ -1707,18 +1707,18 @@ svg.s16 {
   color-scheme: dark;
 }
 body.gl-dark {
-  --gray-10: #1f1e24;
-  --gray-50: #333238;
-  --gray-100: #434248;
-  --gray-200: #535158;
-  --gray-300: #626168;
-  --gray-400: #737278;
-  --gray-500: #89888d;
-  --gray-600: #a4a3a8;
-  --gray-700: #bfbfc3;
-  --gray-800: #dcdcde;
-  --gray-900: #ececef;
-  --gray-950: #fbfafd;
+  --gray-10: #1f1f1f;
+  --gray-50: #303030;
+  --gray-100: #404040;
+  --gray-200: #525252;
+  --gray-300: #5e5e5e;
+  --gray-400: #868686;
+  --gray-500: #999;
+  --gray-600: #bfbfbf;
+  --gray-700: #dbdbdb;
+  --gray-800: #f0f0f0;
+  --gray-900: #fafafa;
+  --gray-950: #fff;
   --green-50: #0a4020;
   --green-100: #0d532a;
   --green-200: #24663b;
@@ -1790,59 +1790,59 @@ body.gl-dark {
   --dark-icon-color-purple-3: #9a79f7;
   --dark-icon-color-orange-1: #665349;
   --dark-icon-color-orange-2: #b37a5d;
-  --gl-text-color: #ececef;
+  --gl-text-color: #fafafa;
   --border-color: #4f4f4f;
   --white: #333;
   --black: #fff;
-  --gray-light: #333238;
+  --gray-light: #303030;
   --svg-status-bg: #333;
 }
 .nav-sidebar,
 .toggle-sidebar-button,
 .close-nav-button {
-  background-color: #29282d;
-  border-right: 1px solid #333238;
+  background-color: #262626;
+  border-right: 1px solid #303030;
 }
 .gl-avatar:not(.gl-avatar-identicon),
 .avatar-container,
 .avatar {
-  background: rgba(251, 250, 253, 0.04);
+  background: rgba(255, 255, 255, 0.04);
 }
 .gl-avatar {
   border-style: none;
-  box-shadow: inset 0 0 0 1px rgba(251, 250, 253, 0.1);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
 }
 body.gl-dark {
-  --gl-theme-accent: #737278;
+  --gl-theme-accent: #868686;
 }
 body.gl-dark .navbar-gitlab {
-  background-color: #ececef;
+  background-color: #fafafa;
 }
 body.gl-dark .navbar-gitlab .navbar-collapse {
-  color: #ececef;
+  color: #fafafa;
 }
 body.gl-dark .navbar-gitlab .container-fluid .navbar-toggler {
-  border-left: 1px solid #a3a2a6;
-  color: #ececef;
+  border-left: 1px solid #b3b3b3;
+  color: #fafafa;
 }
 body.gl-dark .navbar-gitlab .navbar-sub-nav > li.active > a,
 body.gl-dark .navbar-gitlab .navbar-sub-nav > li.active > button,
 body.gl-dark .navbar-gitlab .navbar-nav > li.active > a,
 body.gl-dark .navbar-gitlab .navbar-nav > li.active > button {
-  color: #ececef;
+  color: #fafafa;
   background-color: #333;
 }
 body.gl-dark .navbar-gitlab .navbar-sub-nav {
-  color: #ececef;
+  color: #fafafa;
 }
 body.gl-dark .navbar-gitlab .nav > li {
-  color: #ececef;
+  color: #fafafa;
 }
 body.gl-dark .navbar-gitlab .nav > li.header-search-new {
-  color: #ececef;
+  color: #fafafa;
 }
 body.gl-dark .navbar-gitlab .nav > li > a .notification-dot {
-  border: 2px solid #ececef;
+  border: 2px solid #fafafa;
 }
 body.gl-dark
   .navbar-gitlab
@@ -1850,7 +1850,7 @@ body.gl-dark
   > li
   > a.header-help-dropdown-toggle
   .notification-dot {
-  background-color: #ececef;
+  background-color: #fafafa;
 }
 body.gl-dark
   .navbar-gitlab
@@ -1858,10 +1858,10 @@ body.gl-dark
   > li
   > a.header-user-dropdown-toggle
   .header-user-avatar {
-  border-color: #ececef;
+  border-color: #fafafa;
 }
 body.gl-dark .navbar-gitlab .nav > li.active > a {
-  color: #ececef;
+  color: #fafafa;
   background-color: #333;
 }
 body.gl-dark .navbar-gitlab .nav > li.active > a .notification-dot {
@@ -1873,48 +1873,48 @@ body.gl-dark
   > li.active
   > a.header-help-dropdown-toggle
   .notification-dot {
-  background-color: #ececef;
+  background-color: #fafafa;
 }
 body.gl-dark .header-search {
-  background-color: rgba(236, 236, 239, 0.2) !important;
+  background-color: rgba(250, 250, 250, 0.2) !important;
   border-radius: 4px;
 }
 body.gl-dark .header-search svg.gl-search-box-by-type-search-icon {
-  color: rgba(236, 236, 239, 0.8);
+  color: rgba(250, 250, 250, 0.8);
 }
 body.gl-dark .header-search input {
   background-color: transparent;
-  color: rgba(236, 236, 239, 0.8);
-  box-shadow: inset 0 0 0 1px rgba(236, 236, 239, 0.4);
+  color: rgba(250, 250, 250, 0.8);
+  box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.4);
 }
 body.gl-dark .header-search input::placeholder {
-  color: rgba(236, 236, 239, 0.8);
+  color: rgba(250, 250, 250, 0.8);
 }
 body.gl-dark .header-search input:active::placeholder {
-  color: #737278;
+  color: #868686;
 }
 body.gl-dark .header-search .keyboard-shortcut-helper {
-  color: #ececef;
-  background-color: rgba(236, 236, 239, 0.2);
+  color: #fafafa;
+  background-color: rgba(250, 250, 250, 0.2);
 }
 body.gl-dark .search form {
-  background-color: rgba(236, 236, 239, 0.2);
+  background-color: rgba(250, 250, 250, 0.2);
 }
 body.gl-dark .search .search-input::placeholder {
-  color: rgba(236, 236, 239, 0.8);
+  color: rgba(250, 250, 250, 0.8);
 }
 body.gl-dark .search .search-input-wrap .search-icon,
 body.gl-dark .search .search-input-wrap .clear-icon {
-  fill: rgba(236, 236, 239, 0.8);
+  fill: rgba(250, 250, 250, 0.8);
 }
 body.gl-dark .nav-sidebar li.active > a {
-  color: #ececef;
+  color: #fafafa;
 }
 body.gl-dark .nav-sidebar .fly-out-top-item a,
 body.gl-dark .nav-sidebar .fly-out-top-item.active a,
 body.gl-dark .nav-sidebar .fly-out-top-item .fly-out-top-item-container {
-  background-color: var(--gray-100, #333238);
-  color: var(--gray-900, #ececef);
+  background-color: var(--gray-100, #303030);
+  color: var(--gray-900, #fafafa);
 }
 body.gl-dark .navbar-gitlab {
   background-color: var(--gray-50);
@@ -1951,18 +1951,18 @@ body.gl-dark .navbar-gitlab .search form .search-input {
   color-scheme: dark;
 }
 body.gl-dark {
-  --gray-10: #1f1e24;
-  --gray-50: #333238;
-  --gray-100: #434248;
-  --gray-200: #535158;
-  --gray-300: #626168;
-  --gray-400: #737278;
-  --gray-500: #89888d;
-  --gray-600: #a4a3a8;
-  --gray-700: #bfbfc3;
-  --gray-800: #dcdcde;
-  --gray-900: #ececef;
-  --gray-950: #fbfafd;
+  --gray-10: #1f1f1f;
+  --gray-50: #303030;
+  --gray-100: #404040;
+  --gray-200: #525252;
+  --gray-300: #5e5e5e;
+  --gray-400: #868686;
+  --gray-500: #999;
+  --gray-600: #bfbfbf;
+  --gray-700: #dbdbdb;
+  --gray-800: #f0f0f0;
+  --gray-900: #fafafa;
+  --gray-950: #fff;
   --green-50: #0a4020;
   --green-100: #0d532a;
   --green-200: #24663b;
@@ -2034,11 +2034,11 @@ body.gl-dark {
   --dark-icon-color-purple-3: #9a79f7;
   --dark-icon-color-orange-1: #665349;
   --dark-icon-color-orange-2: #b37a5d;
-  --gl-text-color: #ececef;
+  --gl-text-color: #fafafa;
   --border-color: #4f4f4f;
   --white: #333;
   --black: #fff;
-  --gray-light: #333238;
+  --gray-light: #303030;
   --svg-status-bg: #333;
 }
 .tab-width-8 {
diff --git a/ee/app/assets/stylesheets/startup/startup-general.scss b/ee/app/assets/stylesheets/startup/startup-general.scss
index 90927bd0086a..802262ba3460 100644
--- a/ee/app/assets/stylesheets/startup/startup-general.scss
+++ b/ee/app/assets/stylesheets/startup/startup-general.scss
@@ -23,7 +23,7 @@ body {
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #333238;
+  color: #303030;
   text-align: left;
   background-color: #fff;
 }
@@ -99,7 +99,7 @@ kbd {
   padding: 0.2rem 0.4rem;
   font-size: 90%;
   color: #fff;
-  background-color: #333238;
+  background-color: #303030;
   border-radius: 0.2rem;
 }
 kbd kbd {
@@ -122,24 +122,24 @@ kbd kbd {
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #333238;
+  color: #303030;
   background-color: #fff;
   background-clip: padding-box;
-  border: 1px solid #89888d;
+  border: 1px solid #868686;
   border-radius: 0.25rem;
 }
 @media (prefers-reduced-motion: reduce) {
 }
 .form-control:-moz-focusring {
   color: transparent;
-  text-shadow: 0 0 0 #333238;
+  text-shadow: 0 0 0 #303030;
 }
 .form-control::placeholder {
-  color: #626168;
+  color: #5e5e5e;
   opacity: 1;
 }
 .form-control:disabled {
-  background-color: #fbfafd;
+  background-color: #fafafa;
   opacity: 1;
 }
 .form-inline {
@@ -157,7 +157,7 @@ kbd kbd {
 .btn {
   display: inline-block;
   font-weight: 400;
-  color: #333238;
+  color: #303030;
   text-align: center;
   vertical-align: middle;
   user-select: none;
@@ -193,7 +193,7 @@ kbd kbd {
   padding: 0.5rem 0;
   margin: 0.125rem 0 0;
   font-size: 1rem;
-  color: #333238;
+  color: #303030;
   text-align: left;
   list-style: none;
   background-color: #fff;
@@ -436,8 +436,8 @@ a.gl-badge.badge-warning:active {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   height: auto;
-  color: #333238;
-  box-shadow: inset 0 0 0 1px #89888d;
+  color: #303030;
+  box-shadow: inset 0 0 0 1px #868686;
   border-style: none;
   appearance: none;
   -moz-appearance: none;
@@ -446,17 +446,17 @@ a.gl-badge.badge-warning:active {
 .gl-form-input:not(.form-control-plaintext):not([type="color"]):read-only,
 .gl-form-input.form-control:disabled,
 .gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only {
-  background-color: #fbfafd;
-  box-shadow: inset 0 0 0 1px #dcdcde;
+  background-color: #f5f5f5;
+  box-shadow: inset 0 0 0 1px #dbdbdb;
 }
 .gl-form-input:disabled,
 .gl-form-input.form-control:disabled {
   cursor: not-allowed;
-  color: #737278;
+  color: #666;
 }
 .gl-form-input::placeholder,
 .gl-form-input.form-control::placeholder {
-  color: #89888d;
+  color: #868686;
 }
 .gl-icon {
   fill: currentColor;
@@ -499,9 +499,9 @@ a.gl-badge.badge-warning:active {
   padding-right: 0.75rem;
   background-color: transparent;
   line-height: 1rem;
-  color: #333238;
+  color: #303030;
   fill: currentColor;
-  box-shadow: inset 0 0 0 1px #bfbfc3;
+  box-shadow: inset 0 0 0 1px #bfbfbf;
   justify-content: center;
   align-items: center;
   font-size: 0.875rem;
@@ -512,20 +512,20 @@ a.gl-badge.badge-warning:active {
 }
 .gl-button.gl-button.btn-default:active,
 .gl-button.gl-button.btn-default.active {
-  box-shadow: inset 0 0 0 1px #626168, 0 0 0 1px #fff, 0 0 0 3px #428fdc;
+  box-shadow: inset 0 0 0 1px #5e5e5e, 0 0 0 1px #fff, 0 0 0 3px #428fdc;
   outline: none;
-  background-color: #dcdcde;
+  background-color: #dbdbdb;
 }
 .gl-button.gl-button.btn-default:active .gl-icon,
 .gl-button.gl-button.btn-default.active .gl-icon {
-  color: #333238;
+  color: #303030;
 }
 .gl-button.gl-button.btn-default .gl-icon {
-  color: #737278;
+  color: #666;
 }
 .gl-search-box-by-type-search-icon {
   margin: 0.5rem;
-  color: #737278;
+  color: #666;
   width: 1rem;
   position: absolute;
 }
@@ -575,11 +575,11 @@ svg {
   height: 0;
   margin: 4px 0;
   overflow: hidden;
-  border-top: 1px solid #dcdcde;
+  border-top: 1px solid #dbdbdb;
 }
 .toggle-sidebar-button .collapse-text,
 .toggle-sidebar-button .icon-chevron-double-lg-left {
-  color: #737278;
+  color: #666;
 }
 html {
   overflow-y: scroll;
@@ -595,20 +595,20 @@ html {
   font-weight: 400;
   padding: 6px 10px;
   background-color: #fff;
-  border-color: #dcdcde;
-  color: #333238;
-  color: #333238;
+  border-color: #dbdbdb;
+  color: #303030;
+  color: #303030;
   white-space: nowrap;
 }
 .btn:active {
-  background-color: #ececef;
+  background-color: #f0f0f0;
   box-shadow: none;
 }
 .btn:active,
 .btn.active {
   background-color: #eaeaea;
   border-color: #e3e3e3;
-  color: #333238;
+  color: #303030;
 }
 .btn svg {
   height: 15px;
@@ -620,7 +620,7 @@ html {
 .badge.badge-pill:not(.gl-badge) {
   font-weight: 400;
   background-color: rgba(0, 0, 0, 0.07);
-  color: #535158;
+  color: #525252;
   vertical-align: baseline;
 }
 .gl-font-sm {
@@ -639,10 +639,10 @@ html {
 .dropdown-menu-toggle {
   padding: 6px 8px 6px 10px;
   background-color: #fff;
-  color: #333238;
+  color: #303030;
   font-size: 14px;
   text-align: left;
-  border: 1px solid #dcdcde;
+  border: 1px solid #dbdbdb;
   border-radius: 0.25rem;
   white-space: nowrap;
 }
@@ -671,7 +671,7 @@ html {
   font-weight: 400;
   padding: 8px 0;
   background-color: #fff;
-  border: 1px solid #dcdcde;
+  border: 1px solid #dbdbdb;
   border-radius: 0.25rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
@@ -694,7 +694,7 @@ html {
   font-weight: 400;
   position: relative;
   padding: 8px 12px;
-  color: #333238;
+  color: #303030;
   line-height: 16px;
   white-space: normal;
   overflow: hidden;
@@ -703,8 +703,8 @@ html {
 }
 .dropdown-menu li > a:active,
 .dropdown-menu li button:active {
-  background-color: #ececef;
-  color: #333238;
+  background-color: #eee;
+  color: #303030;
   outline: 0;
   text-decoration: none;
 }
@@ -718,7 +718,7 @@ html {
   height: 1px;
   margin: 0.25rem 0;
   padding: 0;
-  background-color: #dcdcde;
+  background-color: #dbdbdb;
 }
 .dropdown-menu .badge.badge-pill + span:not(.badge):not(.badge-pill) {
   margin-right: 40px;
@@ -745,7 +745,7 @@ html {
 }
 input {
   border-radius: 0.25rem;
-  color: #333238;
+  color: #303030;
   background-color: #fff;
 }
 .form-control {
@@ -753,23 +753,23 @@ input {
   padding: 6px 10px;
 }
 .form-control::placeholder {
-  color: #89888d;
+  color: #868686;
 }
 kbd {
   display: inline-block;
   padding: 3px 5px;
   font-size: 0.6875rem;
   line-height: 10px;
-  color: var(--gray-700, #535158);
+  color: var(--gray-700, #525252);
   vertical-align: middle;
-  background-color: var(--gray-10, #fbfafd);
+  background-color: var(--gray-10, #f5f5f5);
   border-width: 1px;
   border-style: solid;
-  border-color: var(--gray-100, #dcdcde) var(--gray-100, #dcdcde)
-    var(--gray-200, #bfbfc3);
+  border-color: var(--gray-100, #dbdbdb) var(--gray-100, #dbdbdb)
+    var(--gray-200, #bfbfbf);
   border-image: none;
   border-radius: 3px;
-  box-shadow: 0 -1px 0 var(--gray-200, #bfbfc3) inset;
+  box-shadow: 0 -1px 0 var(--gray-200, #bfbfbf) inset;
 }
 .navbar-gitlab {
   padding: 0 16px;
@@ -991,7 +991,7 @@ kbd {
   float: left;
   margin-right: 5px;
   border-radius: 50%;
-  border: 1px solid #f2f2f4;
+  border: 1px solid #f5f5f5;
 }
 .notification-dot {
   background-color: #d99530;
@@ -1023,7 +1023,7 @@ kbd {
   width: 100%;
   align-items: center;
   padding: 10px 16px 10px 10px;
-  color: #333238;
+  color: #303030;
   background-color: transparent;
   border: 0;
   text-align: left;
@@ -1035,7 +1035,7 @@ kbd {
 .context-header .sidebar-context-title {
   overflow: hidden;
   text-overflow: ellipsis;
-  color: #333238;
+  color: #303030;
 }
 @media (min-width: 768px) {
   .page-with-contextual-sidebar {
@@ -1059,7 +1059,7 @@ kbd {
   z-index: 600;
   width: 256px;
   top: var(--header-height, 48px);
-  background-color: #fbfafd;
+  background-color: #f5f5f5;
   border-right: 1px solid #e9e9e9;
   transform: translate3d(0, 0, 0);
 }
@@ -1096,7 +1096,7 @@ kbd {
 }
 .nav-sidebar a {
   text-decoration: none;
-  color: #333238;
+  color: #303030;
 }
 .nav-sidebar li {
   white-space: nowrap;
@@ -1381,7 +1381,7 @@ kbd {
   display: block;
 }
 .sidebar-top-level-items li > a.gl-link {
-  color: #333238;
+  color: #303030;
 }
 .sidebar-top-level-items li > a.gl-link:active {
   text-decoration: none;
@@ -1398,12 +1398,12 @@ kbd {
 .close-nav-button {
   height: 48px;
   padding: 0 16px;
-  background-color: #fbfafd;
+  background-color: #fafafa;
   border: 0;
-  color: #737278;
+  color: #666;
   display: flex;
   align-items: center;
-  background-color: #fbfafd;
+  background-color: #f5f5f5;
   position: fixed;
   bottom: 0;
   width: 255px;
@@ -1474,14 +1474,14 @@ kbd {
   }
 }
 input::-moz-placeholder {
-  color: #89888d;
+  color: #868686;
   opacity: 1;
 }
 input::-ms-input-placeholder {
-  color: #89888d;
+  color: #868686;
 }
 input:-ms-input-placeholder {
-  color: #89888d;
+  color: #868686;
 }
 svg {
   fill: currentColor;
@@ -1608,9 +1608,9 @@ svg.s16 {
   width: 40px;
   height: 40px;
   padding: 0;
-  background: #fefefe;
+  background: #fdfdfd;
   overflow: hidden;
-  box-shadow: inset 0 0 0 1px rgba(31, 30, 36, 0.1);
+  box-shadow: inset 0 0 0 1px rgba(31, 31, 31, 0.1);
 }
 .avatar.avatar-tile {
   border-radius: 0;
@@ -1619,8 +1619,8 @@ svg.s16 {
 .identicon {
   text-align: center;
   vertical-align: top;
-  color: #333238;
-  background-color: #ececef;
+  color: #303030;
+  background-color: #f0f0f0;
 }
 .identicon.s16 {
   font-size: 10px;
@@ -1649,7 +1649,7 @@ svg.s16 {
   background-color: #fdf1dd;
 }
 .identicon.bg7 {
-  background-color: #ececef;
+  background-color: #f0f0f0;
 }
 .avatar-container {
   overflow: hidden;
diff --git a/ee/app/assets/stylesheets/startup/startup-signin.scss b/ee/app/assets/stylesheets/startup/startup-signin.scss
index 7ae158b3930c..33e10b9bd620 100644
--- a/ee/app/assets/stylesheets/startup/startup-signin.scss
+++ b/ee/app/assets/stylesheets/startup/startup-signin.scss
@@ -22,7 +22,7 @@ body {
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #333238;
+  color: #303030;
   text-align: left;
   background-color: #fff;
 }
@@ -110,7 +110,7 @@ h3 {
   margin-bottom: 0.25rem;
   font-weight: 600;
   line-height: 1.2;
-  color: #333238;
+  color: #303030;
 }
 h1 {
   font-size: 2.1875rem;
@@ -196,24 +196,24 @@ hr {
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #333238;
+  color: #303030;
   background-color: #fff;
   background-clip: padding-box;
-  border: 1px solid #89888d;
+  border: 1px solid #868686;
   border-radius: 0.25rem;
 }
 @media (prefers-reduced-motion: reduce) {
 }
 .form-control:-moz-focusring {
   color: transparent;
-  text-shadow: 0 0 0 #333238;
+  text-shadow: 0 0 0 #303030;
 }
 .form-control::placeholder {
-  color: #626168;
+  color: #5e5e5e;
   opacity: 1;
 }
 .form-control:disabled {
-  background-color: #fbfafd;
+  background-color: #fafafa;
   opacity: 1;
 }
 .form-group {
@@ -222,7 +222,7 @@ hr {
 .btn {
   display: inline-block;
   font-weight: 400;
-  color: #333238;
+  color: #303030;
   text-align: center;
   vertical-align: middle;
   user-select: none;
@@ -282,10 +282,10 @@ input.btn-block[type="button"] {
   border-color: #b3d7ff;
 }
 .custom-control-input:disabled ~ .custom-control-label {
-  color: #626168;
+  color: #5e5e5e;
 }
 .custom-control-input:disabled ~ .custom-control-label::before {
-  background-color: #fbfafd;
+  background-color: #fafafa;
 }
 .custom-control-label {
   position: relative;
@@ -302,7 +302,7 @@ input.btn-block[type="button"] {
   pointer-events: none;
   content: "";
   background-color: #fff;
-  border: #737278 solid 1px;
+  border: #666 solid 1px;
 }
 .custom-control-label::after {
   position: absolute;
@@ -400,8 +400,8 @@ input.btn-block[type="button"] {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   height: auto;
-  color: #333238;
-  box-shadow: inset 0 0 0 1px #89888d;
+  color: #303030;
+  box-shadow: inset 0 0 0 1px #868686;
   border-style: none;
   appearance: none;
   -moz-appearance: none;
@@ -410,27 +410,27 @@ input.btn-block[type="button"] {
 .gl-form-input:not(.form-control-plaintext):not([type="color"]):read-only,
 .gl-form-input.form-control:disabled,
 .gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only {
-  background-color: #fbfafd;
-  box-shadow: inset 0 0 0 1px #dcdcde;
+  background-color: #f5f5f5;
+  box-shadow: inset 0 0 0 1px #dbdbdb;
 }
 .gl-form-input:disabled,
 .gl-form-input.form-control:disabled {
   cursor: not-allowed;
-  color: #737278;
+  color: #666;
 }
 .gl-form-input::placeholder,
 .gl-form-input.form-control::placeholder {
-  color: #89888d;
+  color: #868686;
 }
 .gl-form-checkbox {
   font-size: 0.875rem;
   line-height: 1rem;
-  color: #333238;
+  color: #303030;
 }
 .gl-form-checkbox .custom-control-input:disabled,
 .gl-form-checkbox .custom-control-input:disabled ~ .custom-control-label {
   cursor: not-allowed;
-  color: #89888d;
+  color: #868686;
 }
 .gl-form-checkbox.custom-control .custom-control-input ~ .custom-control-label {
   cursor: pointer;
@@ -447,7 +447,7 @@ input.btn-block[type="button"] {
   .custom-control-input
   ~ .custom-control-label::before {
   background-color: #fff;
-  border-color: #89888d;
+  border-color: #868686;
 }
 .gl-form-checkbox.custom-control
   .custom-control-input:checked
@@ -490,8 +490,8 @@ input.btn-block[type="button"] {
 .gl-form-checkbox.custom-control
   .custom-control-input:disabled
   ~ .custom-control-label::before {
-  background-color: #ececef;
-  border-color: #dcdcde;
+  background-color: #f0f0f0;
+  border-color: #dbdbdb;
   pointer-events: auto;
 }
 .gl-form-checkbox.custom-control
@@ -500,8 +500,8 @@ input.btn-block[type="button"] {
 .gl-form-checkbox.custom-control
   .custom-control-input[type="checkbox"]:indeterminate:disabled
   ~ .custom-control-label::before {
-  background-color: #dcdcde;
-  border-color: #dcdcde;
+  background-color: #dbdbdb;
+  border-color: #dbdbdb;
 }
 .gl-form-checkbox.custom-control
   .custom-control-input:checked:disabled
@@ -509,7 +509,7 @@ input.btn-block[type="button"] {
 .gl-form-checkbox.custom-control
   .custom-control-input[type="checkbox"]:indeterminate:disabled
   ~ .custom-control-label::after {
-  background-color: #626168;
+  background-color: #5e5e5e;
 }
 .gl-button {
   display: inline-flex;
@@ -526,9 +526,9 @@ input.btn-block[type="button"] {
   padding-right: 0.75rem;
   background-color: transparent;
   line-height: 1rem;
-  color: #333238;
+  color: #303030;
   fill: currentColor;
-  box-shadow: inset 0 0 0 1px #bfbfc3;
+  box-shadow: inset 0 0 0 1px #bfbfbf;
   justify-content: center;
   align-items: center;
   font-size: 0.875rem;
@@ -560,9 +560,9 @@ input.btn-block[type="button"] {
 .gl-button.gl-button.btn-default.active,
 .gl-button.gl-button.btn-block.btn-default:active,
 .gl-button.gl-button.btn-block.btn-default.active {
-  box-shadow: inset 0 0 0 1px #626168, 0 0 0 1px #fff, 0 0 0 3px #428fdc;
+  box-shadow: inset 0 0 0 1px #5e5e5e, 0 0 0 1px #fff, 0 0 0 3px #428fdc;
   outline: none;
-  background-color: #dcdcde;
+  background-color: #dbdbdb;
 }
 .gl-button.gl-button.btn-confirm,
 .gl-button.gl-button.btn-block.btn-confirm {
@@ -636,20 +636,20 @@ body.navless {
   font-weight: 400;
   padding: 6px 10px;
   background-color: #fff;
-  border-color: #dcdcde;
-  color: #333238;
-  color: #333238;
+  border-color: #dbdbdb;
+  color: #303030;
+  color: #303030;
   white-space: nowrap;
 }
 .btn:active {
-  background-color: #ececef;
+  background-color: #f0f0f0;
   box-shadow: none;
 }
 .btn:active,
 .btn.active {
   background-color: #eaeaea;
   border-color: #e3e3e3;
-  color: #333238;
+  color: #303030;
 }
 .btn svg {
   height: 15px;
@@ -676,7 +676,7 @@ body.navless {
 }
 hr {
   margin: 1.5rem 0;
-  border-top: 1px solid #ececef;
+  border-top: 1px solid #eee;
 }
 .footer-links {
   margin-bottom: 20px;
@@ -704,7 +704,7 @@ hr {
 }
 input {
   border-radius: 0.25rem;
-  color: #333238;
+  color: #303030;
   background-color: #fff;
 }
 label {
@@ -721,7 +721,7 @@ label.label-bold {
   padding: 6px 10px;
 }
 .form-control::placeholder {
-  color: #89888d;
+  color: #868686;
 }
 .gl-show-field-errors .form-control:not(textarea) {
   height: 34px;
@@ -730,7 +730,7 @@ label.label-bold {
   justify-content: center;
   height: var(--header-height, 48px);
   background: #fff;
-  border-bottom: 1px solid #dcdcde;
+  border-bottom: 1px solid #dbdbdb;
 }
 .navbar-empty .tanuki-logo,
 .navbar-empty .brand-header-logo {
@@ -747,14 +747,14 @@ label.label-bold {
   fill: #fca326;
 }
 input::-moz-placeholder {
-  color: #89888d;
+  color: #868686;
   opacity: 1;
 }
 input::-ms-input-placeholder {
-  color: #89888d;
+  color: #868686;
 }
 input:-ms-input-placeholder {
-  color: #89888d;
+  color: #868686;
 }
 svg {
   fill: currentColor;
@@ -805,7 +805,7 @@ svg {
 }
 .login-page .login-box,
 .login-page .omniauth-container {
-  box-shadow: 0 0 0 1px #dcdcde;
+  box-shadow: 0 0 0 1px #dbdbdb;
   border-radius: 0.25rem;
 }
 .login-page .login-box .login-heading h3,
@@ -863,7 +863,7 @@ svg {
 }
 .login-page .new-session-tabs {
   display: flex;
-  box-shadow: 0 0 0 1px #dcdcde;
+  box-shadow: 0 0 0 1px #dbdbdb;
   border-top-right-radius: 4px;
   border-top-left-radius: 4px;
 }
@@ -874,7 +874,7 @@ svg {
 .login-page .new-session-tabs.nav-links-unboxed .nav-item {
   border-left: 0;
   border-right: 0;
-  border-bottom: 1px solid #dcdcde;
+  border-bottom: 1px solid #dbdbdb;
   background-color: transparent;
 }
 .login-page .new-session-tabs.custom-provider-tabs {
@@ -885,7 +885,7 @@ svg {
   flex-basis: auto;
 }
 .login-page .new-session-tabs.custom-provider-tabs li:nth-child(n + 5) {
-  border-top: 1px solid #dcdcde;
+  border-top: 1px solid #dbdbdb;
 }
 .login-page .new-session-tabs.custom-provider-tabs a {
   font-size: 16px;
@@ -893,7 +893,7 @@ svg {
 .login-page .new-session-tabs li {
   flex: 1;
   text-align: center;
-  border-left: 1px solid #dcdcde;
+  border-left: 1px solid #dbdbdb;
 }
 .login-page .new-session-tabs li:first-of-type {
   border-left: 0;
@@ -903,7 +903,7 @@ svg {
   border-top-right-radius: 4px;
 }
 .login-page .new-session-tabs li:not(.active) {
-  background-color: #fbfafd;
+  background-color: #fafafa;
 }
 .login-page .new-session-tabs li a {
   width: 100%;
diff --git a/ee/spec/frontend/analytics/code_review_analytics/components/__snapshots__/merge_request_table_spec.js.snap b/ee/spec/frontend/analytics/code_review_analytics/components/__snapshots__/merge_request_table_spec.js.snap
index 8379f37ca113..1fc2529a4159 100644
--- a/ee/spec/frontend/analytics/code_review_analytics/components/__snapshots__/merge_request_table_spec.js.snap
+++ b/ee/spec/frontend/analytics/code_review_analytics/components/__snapshots__/merge_request_table_spec.js.snap
@@ -2,8 +2,9 @@
 
 exports[`MergeRequestTable component template matches the snapshot 1`] = `
 <table
-  aria-busy=""
+  aria-busy="false"
   aria-colcount="7"
+  aria-describedby="__BVID__36__caption_"
   class="table b-table gl-table my-3 b-table-stacked-sm"
   id="__BVID__36"
   role="table"
diff --git a/ee/spec/frontend/analytics/cycle_analytics/mock_data.js b/ee/spec/frontend/analytics/cycle_analytics/mock_data.js
index 61dce4f03709..a2044cfbaddd 100644
--- a/ee/spec/frontend/analytics/cycle_analytics/mock_data.js
+++ b/ee/spec/frontend/analytics/cycle_analytics/mock_data.js
@@ -346,10 +346,10 @@ export const durationDataNullSeries = {
     ['2019-01-02', null],
   ],
   itemStyle: {
-    color: '#a4a3a8',
+    color: '#999',
   },
   lineStyle: {
-    color: '#a4a3a8',
+    color: '#999',
     type: 'dashed',
   },
   name: `${DURATION_CHART_Y_AXIS_TITLE} no data series`,
diff --git a/ee/spec/frontend/boards/components/__snapshots__/board_content_sidebar_spec.js.snap b/ee/spec/frontend/boards/components/__snapshots__/board_content_sidebar_spec.js.snap
index 467441a7acbe..fca7fc3085ff 100644
--- a/ee/spec/frontend/boards/components/__snapshots__/board_content_sidebar_spec.js.snap
+++ b/ee/spec/frontend/boards/components/__snapshots__/board_content_sidebar_spec.js.snap
@@ -143,7 +143,7 @@ exports[`ee/BoardContentSidebar incident sidebar matches the snapshot 1`] = `
         <!---->
         <button
           aria-expanded="false"
-          aria-haspopup="menu"
+          aria-haspopup="true"
           class="btn dropdown-toggle btn-default btn-md btn-block dropdown-menu-toggle gl-mb-2 gl-button gl-dropdown-toggle"
           id="__BVID__40__BV_toggle_"
           type="button"
diff --git a/ee/spec/frontend/dora/components/__snapshots__/util_spec.js.snap b/ee/spec/frontend/dora/components/__snapshots__/util_spec.js.snap
index d1e1ea7e61c1..a575dd7e6fd9 100644
--- a/ee/spec/frontend/dora/components/__snapshots__/util_spec.js.snap
+++ b/ee/spec/frontend/dora/components/__snapshots__/util_spec.js.snap
@@ -37,10 +37,10 @@ Array [
       ],
     ],
     "itemStyle": Object {
-      "color": "#a4a3a8",
+      "color": "#999",
     },
     "lineStyle": Object {
-      "color": "#a4a3a8",
+      "color": "#999",
       "type": "dashed",
     },
     "name": "No data available",
diff --git a/ee/spec/frontend/insights/mock_data.js b/ee/spec/frontend/insights/mock_data.js
index 33de00071ec0..92605974772c 100644
--- a/ee/spec/frontend/insights/mock_data.js
+++ b/ee/spec/frontend/insights/mock_data.js
@@ -88,10 +88,10 @@ export const doraSeries = [
       ['February', null],
     ],
     itemStyle: {
-      color: '#a4a3a8',
+      color: '#999',
     },
     lineStyle: {
-      color: '#a4a3a8',
+      color: '#999',
       type: 'dashed',
     },
     name: 'No data available',
diff --git a/ee/spec/frontend/security_orchestration/components/policies/filters/policy_source_filter_spec.js b/ee/spec/frontend/security_orchestration/components/policies/filters/policy_source_filter_spec.js
index 85fd81172138..0d6f8524d240 100644
--- a/ee/spec/frontend/security_orchestration/components/policies/filters/policy_source_filter_spec.js
+++ b/ee/spec/frontend/security_orchestration/components/policies/filters/policy_source_filter_spec.js
@@ -14,7 +14,7 @@ describe('PolicySourceFilter component', () => {
     });
   };
 
-  const findToggle = () => wrapper.find('button[aria-haspopup="menu"]');
+  const findToggle = () => wrapper.find('button[aria-haspopup="true"]');
 
   afterEach(() => {
     wrapper.destroy();
diff --git a/ee/spec/frontend/security_orchestration/components/policies/filters/policy_type_filter_spec.js b/ee/spec/frontend/security_orchestration/components/policies/filters/policy_type_filter_spec.js
index e921226ef27d..24b11372dbcf 100644
--- a/ee/spec/frontend/security_orchestration/components/policies/filters/policy_type_filter_spec.js
+++ b/ee/spec/frontend/security_orchestration/components/policies/filters/policy_type_filter_spec.js
@@ -14,7 +14,7 @@ describe('PolicyTypeFilter component', () => {
     });
   };
 
-  const findToggle = () => wrapper.find('button[aria-haspopup="menu"]');
+  const findToggle = () => wrapper.find('button[aria-haspopup="true"]');
 
   afterEach(() => {
     wrapper.destroy();
diff --git a/ee/spec/frontend/sidebar/components/__snapshots__/iteration_dropdown_spec.js.snap b/ee/spec/frontend/sidebar/components/__snapshots__/iteration_dropdown_spec.js.snap
index 5eef6c3555e4..62b5997cd880 100644
--- a/ee/spec/frontend/sidebar/components/__snapshots__/iteration_dropdown_spec.js.snap
+++ b/ee/spec/frontend/sidebar/components/__snapshots__/iteration_dropdown_spec.js.snap
@@ -11,7 +11,6 @@ exports[`IterationDropdown default shows gl-dropdown 1`] = `
   size="md"
   splitbuttontype="button"
   splitclass=",[object Object]"
-  toggleattrs="[object Object]"
   toggleclass=",[object Object]"
   toggletag="button"
   toggletext="Toggle dropdown"
diff --git a/ee/spec/frontend/subscriptions/new/components/__snapshots__/modal_spec.js.snap b/ee/spec/frontend/subscriptions/new/components/__snapshots__/modal_spec.js.snap
index c24dcdb3af1e..36fb747dc405 100644
--- a/ee/spec/frontend/subscriptions/new/components/__snapshots__/modal_spec.js.snap
+++ b/ee/spec/frontend/subscriptions/new/components/__snapshots__/modal_spec.js.snap
@@ -4,16 +4,16 @@ exports[`Modal component matches the snapshot 1`] = `
 <b-modal-stub
   canceltitle="Cancel"
   cancelvariant="secondary"
-  footertag="footer"
   headerclosecontent="&times;"
   headercloselabel="Close"
-  headertag="header"
   id="subscription-modal"
+  ignoreenforcefocusselector=""
   lazy="true"
   modalclass="gl-modal,"
   oktitle="OK"
   okvariant="primary"
   size="sm"
+  title=""
   titletag="h4"
 >
   
diff --git a/ee/spec/frontend/vue_merge_request_widget/extensions/license_compliance/__snapshots__/index_spec.js.snap b/ee/spec/frontend/vue_merge_request_widget/extensions/license_compliance/__snapshots__/index_spec.js.snap
index 206d5588751b..bef2e6a2e526 100644
--- a/ee/spec/frontend/vue_merge_request_widget/extensions/license_compliance/__snapshots__/index_spec.js.snap
+++ b/ee/spec/frontend/vue_merge_request_widget/extensions/license_compliance/__snapshots__/index_spec.js.snap
@@ -159,7 +159,7 @@ exports[`License Compliance extension expanded data with new licenses displays a
                       <!---->
                       <button
                         aria-expanded="false"
-                        aria-haspopup="menu"
+                        aria-haspopup="true"
                         class="btn dropdown-toggle btn-default btn-sm gl-p-2! gl-button gl-dropdown-toggle btn-default-tertiary dropdown-icon-only dropdown-toggle-no-caret"
                         id="__BVID__619__BV_toggle_"
                         type="button"
@@ -572,7 +572,7 @@ exports[`License Compliance extension expanded data with new licenses displays u
                       <!---->
                       <button
                         aria-expanded="false"
-                        aria-haspopup="menu"
+                        aria-haspopup="true"
                         class="btn dropdown-toggle btn-default btn-sm gl-p-2! gl-button gl-dropdown-toggle btn-default-tertiary dropdown-icon-only dropdown-toggle-no-caret"
                         id="__BVID__527__BV_toggle_"
                         type="button"
diff --git a/ee/spec/frontend/vulnerabilities/new_vulnerability/section_details_spec.js b/ee/spec/frontend/vulnerabilities/new_vulnerability/section_details_spec.js
index d1f6467e26a7..3c70d88d6c3c 100644
--- a/ee/spec/frontend/vulnerabilities/new_vulnerability/section_details_spec.js
+++ b/ee/spec/frontend/vulnerabilities/new_vulnerability/section_details_spec.js
@@ -96,11 +96,11 @@ describe('New vulnerability - Section Details', () => {
     await nextTick();
 
     // severity input
+    expect(wrapper.findAllByRole('alert').at(0).text()).toBe('Select a severity level');
     expect(findFormGroup(1).attributes('aria-invalid')).toBe('true');
-    expect(findFormGroup(1).find('.invalid-feedback').text()).toBe('Select a severity level');
 
     // status input
+    expect(wrapper.findAllByRole('alert').at(1).text()).toBe('Select a status');
     expect(findFormGroup(2).attributes('aria-invalid')).toBe('true');
-    expect(findFormGroup(2).find('.invalid-feedback').text()).toBe('Select a status');
   });
 });
diff --git a/ee/spec/frontend/vulnerabilities/new_vulnerability/section_identifiers_spec.js b/ee/spec/frontend/vulnerabilities/new_vulnerability/section_identifiers_spec.js
index b7e496c3eea7..692ec14f3c20 100644
--- a/ee/spec/frontend/vulnerabilities/new_vulnerability/section_identifiers_spec.js
+++ b/ee/spec/frontend/vulnerabilities/new_vulnerability/section_identifiers_spec.js
@@ -50,12 +50,10 @@ describe('New vulnerability - Section Identifiers', () => {
     await nextTick();
 
     expect(findFormGroup(0).attributes('aria-invalid')).toBe('true');
-    expect(findFormGroup(0).find('.invalid-feedback').text()).toBe('Enter the CVE or CWE code');
+    expect(wrapper.findAllByRole('alert').at(0).text()).toBe('Enter the CVE or CWE code');
 
     expect(findFormGroup(1).attributes('aria-invalid')).toBe('true');
-    expect(findFormGroup(1).find('.invalid-feedback').text()).toBe(
-      'Enter the CVE or CWE identifier URL',
-    );
+    expect(wrapper.findAllByRole('alert').at(1).text()).toBe('Enter the CVE or CWE identifier URL');
   });
 
   it('emits change event when input changes', () => {
diff --git a/ee/spec/frontend/vulnerabilities/new_vulnerability/section_name_spec.js b/ee/spec/frontend/vulnerabilities/new_vulnerability/section_name_spec.js
index 0b26d32e1689..19fafb246128 100644
--- a/ee/spec/frontend/vulnerabilities/new_vulnerability/section_name_spec.js
+++ b/ee/spec/frontend/vulnerabilities/new_vulnerability/section_name_spec.js
@@ -80,7 +80,7 @@ describe('New vulnerability - Section Name', () => {
 
     await nextTick();
 
-    expect(wrapper.find('.invalid-feedback').text()).toBe('Enter a name');
+    expect(wrapper.findByRole('alert').text()).toBe('Enter a name');
     expect(findFormGroup(0).attributes('aria-invalid')).toBe('true');
   });
 });
diff --git a/package.json b/package.json
index 98379a91baf6..84da16079e62 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "@gitlab/at.js": "1.5.7",
     "@gitlab/favicon-overlay": "2.0.0",
     "@gitlab/svgs": "3.7.0",
-    "@gitlab/ui": "49.5.1",
+    "@gitlab/ui": "49.3.0",
     "@gitlab/visual-review-tools": "1.7.3",
     "@gitlab/web-ide": "0.0.1-dev-20220815034418",
     "@rails/actioncable": "6.1.4-7",
diff --git a/spec/features/groups/members/sort_members_spec.rb b/spec/features/groups/members/sort_members_spec.rb
index 9892d6fec1ee..bf8e64fa1e29 100644
--- a/spec/features/groups/members/sort_members_spec.rb
+++ b/spec/features/groups/members/sort_members_spec.rb
@@ -18,7 +18,7 @@
 
   def expect_sort_by(text, sort_direction)
     within('[data-testid="members-sort-dropdown"]') do
-      expect(page).to have_css('button[aria-haspopup="menu"]', text: text)
+      expect(page).to have_css('button[aria-haspopup="true"]', text: text)
       expect(page).to have_button("Sorting Direction: #{sort_direction == :asc ? 'Ascending' : 'Descending'}")
     end
   end
diff --git a/spec/features/projects/members/sorting_spec.rb b/spec/features/projects/members/sorting_spec.rb
index 3fc5a1258e4f..8aadd6302d0b 100644
--- a/spec/features/projects/members/sorting_spec.rb
+++ b/spec/features/projects/members/sorting_spec.rb
@@ -148,7 +148,7 @@ def second_member
 
   def expect_sort_by(text, sort_direction)
     within('[data-testid="members-sort-dropdown"]') do
-      expect(page).to have_css('button[aria-haspopup="menu"]', text: text)
+      expect(page).to have_css('button[aria-haspopup="true"]', text: text)
       expect(page).to have_button("Sorting Direction: #{sort_direction == :asc ? 'Ascending' : 'Descending'}")
     end
   end
diff --git a/spec/frontend/access_tokens/components/__snapshots__/expires_at_field_spec.js.snap b/spec/frontend/access_tokens/components/__snapshots__/expires_at_field_spec.js.snap
index 42818c14029a..2bd2b17a12d1 100644
--- a/spec/frontend/access_tokens/components/__snapshots__/expires_at_field_spec.js.snap
+++ b/spec/frontend/access_tokens/components/__snapshots__/expires_at_field_spec.js.snap
@@ -21,7 +21,6 @@ exports[`~/access_tokens/components/expires_at_field should render datepicker wi
     mindate="Mon Jul 06 2020 00:00:00 GMT+0000 (Greenwich Mean Time)"
     placeholder="YYYY-MM-DD"
     showclearbutton="true"
-    size="medium"
     theme=""
   />
 </gl-form-group-stub>
diff --git a/spec/frontend/clusters/components/__snapshots__/new_cluster_spec.js.snap b/spec/frontend/clusters/components/__snapshots__/new_cluster_spec.js.snap
index 21ffda8578a6..656e72baf778 100644
--- a/spec/frontend/clusters/components/__snapshots__/new_cluster_spec.js.snap
+++ b/spec/frontend/clusters/components/__snapshots__/new_cluster_spec.js.snap
@@ -3,7 +3,7 @@
 exports[`NewCluster renders the cluster component correctly 1`] = `
 "<div class=\\"gl-pt-4\\">
   <h4>Enter your Kubernetes cluster certificate details</h4>
-  <p>Enter details about your cluster. <b-link-stub href=\\"/help/user/project/clusters/add_existing_cluster\\" class=\\"gl-link\\">How do I use a certificate to connect to my cluster?</b-link-stub>
+  <p>Enter details about your cluster. <b-link-stub href=\\"/help/user/project/clusters/add_existing_cluster\\" event=\\"click\\" routertag=\\"a\\" class=\\"gl-link\\">How do I use a certificate to connect to my cluster?</b-link-stub>
   </p>
 </div>"
 `;
diff --git a/spec/frontend/content_editor/components/__snapshots__/toolbar_button_spec.js.snap b/spec/frontend/content_editor/components/__snapshots__/toolbar_button_spec.js.snap
index b8e6bcbc3c4f..a63cca006dad 100644
--- a/spec/frontend/content_editor/components/__snapshots__/toolbar_button_spec.js.snap
+++ b/spec/frontend/content_editor/components/__snapshots__/toolbar_button_spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`content_editor/components/toolbar_button displays tertiary, medium button with a provided label and icon 1`] = `
-"<b-button-stub size=\\"md\\" tag=\\"button\\" type=\\"button\\" variant=\\"default\\" aria-label=\\"Bold\\" title=\\"Bold\\" class=\\"gl-button btn-default-tertiary btn-icon\\">
+"<b-button-stub size=\\"md\\" variant=\\"default\\" type=\\"button\\" tag=\\"button\\" aria-label=\\"Bold\\" title=\\"Bold\\" class=\\"gl-button btn-default-tertiary btn-icon\\">
   <!---->
   <gl-icon-stub name=\\"bold\\" size=\\"16\\" class=\\"gl-button-icon\\"></gl-icon-stub>
   <!---->
diff --git a/spec/frontend/invite_members/components/group_select_spec.js b/spec/frontend/invite_members/components/group_select_spec.js
index e540e8856bae..e1563a7bb3ad 100644
--- a/spec/frontend/invite_members/components/group_select_spec.js
+++ b/spec/frontend/invite_members/components/group_select_spec.js
@@ -33,7 +33,7 @@ describe('GroupSelect', () => {
 
   const findSearchBoxByType = () => wrapper.findComponent(GlSearchBoxByType);
   const findDropdown = () => wrapper.findComponent(GlDropdown);
-  const findDropdownToggle = () => findDropdown().find('button[aria-haspopup="menu"]');
+  const findDropdownToggle = () => findDropdown().find('button[aria-haspopup="true"]');
   const findAvatarByLabel = (text) =>
     wrapper
       .findAllComponents(GlAvatarLabeled)
diff --git a/spec/frontend/jira_import/components/__snapshots__/jira_import_form_spec.js.snap b/spec/frontend/jira_import/components/__snapshots__/jira_import_form_spec.js.snap
index b2b3a93a11da..a72528ae36b3 100644
--- a/spec/frontend/jira_import/components/__snapshots__/jira_import_form_spec.js.snap
+++ b/spec/frontend/jira_import/components/__snapshots__/jira_import_form_spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`JiraImportForm table body shows correct information in each cell 1`] = `
 <table
-  aria-busy=""
+  aria-busy="false"
   aria-colcount="3"
   class="table b-table gl-table b-table-fixed"
   role="table"
@@ -92,7 +92,7 @@ exports[`JiraImportForm table body shows correct information in each cell 1`] =
           <!---->
           <button
             aria-expanded="false"
-            aria-haspopup="menu"
+            aria-haspopup="true"
             class="btn dropdown-toggle btn-default btn-md gl-button gl-dropdown-toggle"
             type="button"
           >
@@ -223,7 +223,7 @@ exports[`JiraImportForm table body shows correct information in each cell 1`] =
           <!---->
           <button
             aria-expanded="false"
-            aria-haspopup="menu"
+            aria-haspopup="true"
             class="btn dropdown-toggle btn-default btn-md gl-button gl-dropdown-toggle"
             type="button"
           >
diff --git a/spec/frontend/members/components/filter_sort/sort_dropdown_spec.js b/spec/frontend/members/components/filter_sort/sort_dropdown_spec.js
index 526f839ece87..ef3c8bde3cf9 100644
--- a/spec/frontend/members/components/filter_sort/sort_dropdown_spec.js
+++ b/spec/frontend/members/components/filter_sort/sort_dropdown_spec.js
@@ -46,7 +46,7 @@ describe('SortDropdown', () => {
   const findSortingComponent = () => wrapper.findComponent(GlSorting);
   const findSortDirectionToggle = () =>
     findSortingComponent().find('button[title^="Sort direction"]');
-  const findDropdownToggle = () => wrapper.find('button[aria-haspopup="menu"]');
+  const findDropdownToggle = () => wrapper.find('button[aria-haspopup="true"]');
   const findDropdownItemByText = (text) =>
     wrapper
       .findAllComponents(GlSortingItem)
diff --git a/spec/frontend/members/components/table/role_dropdown_spec.js b/spec/frontend/members/components/table/role_dropdown_spec.js
index 3835d3fd33dc..b254cce4d721 100644
--- a/spec/frontend/members/components/table/role_dropdown_spec.js
+++ b/spec/frontend/members/components/table/role_dropdown_spec.js
@@ -60,7 +60,7 @@ describe('RoleDropdown', () => {
       .findAllComponents(GlDropdownItem)
       .wrappers.find((dropdownItemWrapper) => dropdownItemWrapper.props('isChecked'));
 
-  const findDropdownToggle = () => wrapper.find('button[aria-haspopup="menu"]');
+  const findDropdownToggle = () => wrapper.find('button[aria-haspopup="true"]');
   const findDropdown = () => wrapper.findComponent(GlDropdown);
 
   afterEach(() => {
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/__snapshots__/packages_list_app_spec.js.snap b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/__snapshots__/packages_list_app_spec.js.snap
index 9bd435badc47..a33528d2d918 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/__snapshots__/packages_list_app_spec.js.snap
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/__snapshots__/packages_list_app_spec.js.snap
@@ -48,7 +48,9 @@ exports[`packages_list_app renders 1`] = `
             Learn how to 
             <b-link-stub
               class="gl-link"
+              event="click"
               href="helpUrl"
+              routertag="a"
               target="_blank"
             >
               publish and share your packages
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/pypi_installation_spec.js.snap b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/pypi_installation_spec.js.snap
index 84b37824390b..92c2cd905689 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/pypi_installation_spec.js.snap
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/pypi_installation_spec.js.snap
@@ -20,7 +20,7 @@ exports[`PypiInstallation renders all the messages 1`] = `
         <!---->
         <button
           aria-expanded="false"
-          aria-haspopup="menu"
+          aria-haspopup="true"
           class="btn dropdown-toggle btn-default btn-md gl-button gl-dropdown-toggle"
           id="__BVID__27__BV_toggle_"
           type="button"
@@ -59,6 +59,7 @@ exports[`PypiInstallation renders all the messages 1`] = `
   </div>
    
   <fieldset
+    aria-describedby="installation-pip-command-group__BV_description_"
     class="form-group gl-form-group"
     id="installation-pip-command-group"
   >
@@ -74,7 +75,12 @@ exports[`PypiInstallation renders all the messages 1`] = `
        
       <!---->
     </legend>
-    <div>
+    <div
+      aria-labelledby="installation-pip-command-group__BV_label_"
+      class="bv-no-focus-ring"
+      role="group"
+      tabindex="-1"
+    >
       <div
         data-testid="pip-command"
         id="installation-pip-command"
diff --git a/spec/frontend/packages_and_registries/package_registry/pages/__snapshots__/list_spec.js.snap b/spec/frontend/packages_and_registries/package_registry/pages/__snapshots__/list_spec.js.snap
index b279a7d0936c..7759c3667965 100644
--- a/spec/frontend/packages_and_registries/package_registry/pages/__snapshots__/list_spec.js.snap
+++ b/spec/frontend/packages_and_registries/package_registry/pages/__snapshots__/list_spec.js.snap
@@ -94,7 +94,9 @@ exports[`PackagesListApp renders 1`] = `
             Learn how to 
             <b-link-stub
               class="gl-link"
+              event="click"
               href="/help/user/packages/package_registry/index"
+              routertag="a"
               target="_blank"
             >
               publish and share your packages
diff --git a/spec/frontend/vue_merge_request_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap b/spec/frontend/vue_merge_request_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap
index 0ba327df297e..8c3a4978bb82 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap
+++ b/spec/frontend/vue_merge_request_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap
@@ -84,7 +84,7 @@ exports[`MRWidgetAutoMergeEnabled when graphql is disabled template should have
             <!---->
             <button
               aria-expanded="false"
-              aria-haspopup="menu"
+              aria-haspopup="true"
               class="btn dropdown-toggle btn-default btn-sm gl-p-2! gl-button gl-dropdown-toggle btn-default-tertiary dropdown-icon-only dropdown-toggle-no-caret"
               type="button"
             >
@@ -261,7 +261,7 @@ exports[`MRWidgetAutoMergeEnabled when graphql is enabled template should have c
             <!---->
             <button
               aria-expanded="false"
-              aria-haspopup="menu"
+              aria-haspopup="true"
               class="btn dropdown-toggle btn-default btn-sm gl-p-2! gl-button gl-dropdown-toggle btn-default-tertiary dropdown-icon-only dropdown-toggle-no-caret"
               type="button"
             >
diff --git a/spec/frontend/vue_shared/components/__snapshots__/awards_list_spec.js.snap b/spec/frontend/vue_shared/components/__snapshots__/awards_list_spec.js.snap
index aaf0466f0ac4..bdf5ea23812a 100644
--- a/spec/frontend/vue_shared/components/__snapshots__/awards_list_spec.js.snap
+++ b/spec/frontend/vue_shared/components/__snapshots__/awards_list_spec.js.snap
@@ -234,7 +234,7 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
         <!---->
         <button
           aria-expanded="false"
-          aria-haspopup="menu"
+          aria-haspopup="true"
           class="btn dropdown-toggle btn-default btn-md add-reaction-button btn-icon gl-relative! gl-button gl-dropdown-toggle btn-default-secondary"
           id="__BVID__13__BV_toggle_"
           type="button"
diff --git a/yarn.lock b/yarn.lock
index 6385a61f0f50..406fde7c7721 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1113,13 +1113,13 @@
   resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-3.7.0.tgz#1257b69fb9898ea5614f992aa6b6dc3619c3c38c"
   integrity sha512-6vTqWZzY63ZUTUqk0dmMDcfU27qtkAu0WmlK4e3FMWmISvTxNhAk2j11c/YlLauf6okE4W2T2fnhvXp1mzcPgA==
 
-"@gitlab/ui@49.5.1":
-  version "49.5.1"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-49.5.1.tgz#aae75d633059110395caa452967c8d439c6e204f"
-  integrity sha512-2/m9VZw42kY4Bdrsfs7QbjXFL9r3bXbpagQnKC/msR5YcOScB3TXs7Vr/Hnzv+6xoOHEhGMySrL0Wd4EqaBv+Q==
+"@gitlab/ui@49.3.0":
+  version "49.3.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-49.3.0.tgz#63e6a375d66c6f6ae568f0d1a08fe0e9bd4e355b"
+  integrity sha512-c8GSajEdW2Q1ME7lYuQgImR493WaELKJOq/T+1zVs3i82cc1YDWbGEJyKZh6srJ6xNSLuIbn6d7oSqfM/jeSAQ==
   dependencies:
     "@popperjs/core" "^2.11.2"
-    bootstrap-vue "2.23.1"
+    bootstrap-vue "2.20.1"
     dompurify "^2.4.0"
     echarts "^5.3.2"
     iframe-resizer "^4.3.2"
@@ -3118,27 +3118,22 @@ boolbase@^1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-bootstrap-vue@2.23.1:
-  version "2.23.1"
-  resolved "https://registry.yarnpkg.com/bootstrap-vue/-/bootstrap-vue-2.23.1.tgz#8f866f7cda27eb0e7e13a0bea8d55d8fc7a82199"
-  integrity sha512-SEWkG4LzmMuWjQdSYmAQk1G/oOKm37dtNfjB5kxq0YafnL2W6qUAmeDTcIZVbPiQd2OQlIkWOMPBRGySk/zGsg==
+bootstrap-vue@2.20.1:
+  version "2.20.1"
+  resolved "https://registry.yarnpkg.com/bootstrap-vue/-/bootstrap-vue-2.20.1.tgz#1b6cd4368632c1a6dd4a5ed161242baa131c3cd5"
+  integrity sha512-s+w83q0T2mo/RbFwTM8gExbLJMEOYpdTUqmyFaHv2Ir+TFprMvTWpeAzeNuawJ130W1gePZ3LW3cNp1t/tZbOw==
   dependencies:
     "@nuxt/opencollective" "^0.3.2"
-    bootstrap "^4.6.1"
+    bootstrap ">=4.5.3 <5.0.0"
     popper.js "^1.16.1"
     portal-vue "^2.1.7"
     vue-functional-data-merge "^3.1.0"
 
-bootstrap@4.5.3:
+bootstrap@4.5.3, "bootstrap@>=4.5.3 <5.0.0":
   version "4.5.3"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.5.3.tgz#c6a72b355aaf323920be800246a6e4ef30997fe6"
   integrity sha512-o9ppKQioXGqhw8Z7mah6KdTYpNQY//tipnkxppWhPbiSWdD+1raYsnhwEZjkTHYbGee4cVQ0Rx65EhOY/HNLcQ==
 
-bootstrap@^4.6.1:
-  version "4.6.2"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.2.tgz#8e0cd61611728a5bf65a3a2b8d6ff6c77d5d7479"
-  integrity sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==
-
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
-- 
GitLab