Add latest changes from gitlab-org/gitlab@14-10-stable-eev14.10.0-rc42

43 files changed, 822 insertions, 443 deletions

diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss
index 27ddff181c5..598ef70297c 100644
--- a/app/assets/stylesheets/bootstrap_migration.scss
+++ b/app/assets/stylesheets/bootstrap_migration.scss
@@ -1,318 +1,6 @@
-$text-color: $gl-text-color;
-
-$brand-primary: $blue-500;
-$brand-success: $green-500;
-$brand-info: $blue-500;
-$brand-warning: $orange-500;
-$brand-danger: $red-500;
-
-$border-radius-base: $gl-border-radius-base;
-
-$modal-body-bg: $white;
-$input-border: $border-color;
-
-$padding-base-vertical: $gl-vert-padding;
-$padding-base-horizontal: $gl-padding;
-
-/*
- *  Scss to help with bootstrap 3 to 4 migration
- */
-body,
-.form-control,
-.search form {
-  // Override default font size used in non-csslab UI
-  // Use rem to keep default font-size at 14px on body so 1rem still
-  // fits 8px grid, but also allow users to change browser font size
-  font-size: 0.875rem;
-}
-
-legend {
-  border-bottom: 1px solid $border-color;
-  margin-bottom: 20px;
-}
-
-button,
-html [type='button'],
-[type='reset'],
-[type='submit'],
-[role='button'] {
-  // Override bootstrap reboot
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-appearance: inherit;
-  cursor: pointer;
-}
-
-h1,
-.h1,
-h2,
-.h2,
-h3,
-.h3 {
-  margin-top: 20px;
-  margin-bottom: 10px;
-}
-
-h4,
-.h4,
-h5,
-.h5,
-h6,
-.h6 {
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-
-/* Our adjustments to hx & .hx above add unnecessary margins to modal-title
-   and page-title in modals, so we set them to 0 in order to have properly
-   formatted modal headers. */
-.modal-header {
-  .modal-title,
-  .page-title {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-}
-
-h5,
-.h5 {
-  font-size: $gl-font-size;
-}
-
-input[type='file'] {
-  // Bootstrap 4 file input height is taller by default
-  // which makes them look ugly
-  line-height: 1;
-}
-
-b,
-strong {
-  font-weight: bold;
-}
-
-a {
-  color: $blue-600;
-}
-
-hr {
-  overflow: hidden;
-}
-
-.form-group.row .col-form-label {
-  // Bootstrap 4 aligns labels to the left
-  // for horizontal forms
-  @include media-breakpoint-up(md) {
-    text-align: right;
-  }
-}
-
-code {
-  padding: 2px 4px;
-  color: $code-color;
-  background-color: $gray-50;
-  border-radius: $border-radius-default;
-
-  .code > &,
-  .build-log & {
-    background-color: inherit;
-    padding: unset;
-  }
-}
-
-table {
-  // Remove any table border lines
-  border-spacing: 0;
-}
-
-@each $breakpoint in map-keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    .d#{$infix}-table-header-group {
-      display: table-header-group !important;
-    }
-  }
-}
-
-.text-secondary {
-  // Override Bootstrap's light secondary color
-  // We have to use !important because bootstrap has that set as well
-  color: $gl-text-color-secondary !important;
-}
-
-.bg-success,
-.bg-primary,
-.bg-info,
-.bg-danger,
-.bg-warning {
-  .card-header {
-    color: $white;
-  }
-}
-
-// Polyfill deprecated selectors
-
-.hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-.hide {
-  display: none;
-}
-
-.dropdown-toggle::after,
-.dropright .dropdown-menu-toggle::after {
-  // Remove bootstrap's dropdown caret
-  display: none;
-}
-
-// Add to .label so that old system notes that are saved to the db
-// will still receive the correct styling
-.badge:not(.gl-badge),
-.label {
-  padding: 4px 5px;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: $gl-font-weight-normal;
-  display: inline-block;
-
-  &.badge-gray {
-    background-color: $label-gray-bg;
-    color: $gl-text-color;
-    text-shadow: none;
-  }
-
-  &.badge-inverse {
-    background-color: $label-inverse-bg;
-  }
-}
-
-.divider {
-  // copied rules from node_modules/bootstrap/scss/_dropdown.scss:116
-  // this might be safe to just remove instead
-  // most places that use divider add overrides to undo these things
-  // there is also a probably-unintentional use in deprecated_dropdown_divider.scss
-  // so we would end up with .gl-dropdown .dropdown-divider
-  height: 0;
-  margin: 4px 0;
-  overflow: hidden;
-  border-top: 1px solid $border-color;
-}
-
-.info-well {
-  background: $gray-10;
-  color: $gl-text-color;
-  border: 1px solid $border-color;
-  border-radius: 4px;
-  margin-bottom: 16px;
-
-  .well-segment {
-    padding: 16px;
-
-    &:not(:last-of-type) {
-      border-bottom: 1px solid $well-inner-border;
-    }
-
-    p,
-    ol,
-    ul,
-    .form-group {
-      &:last-of-type {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  .badge.badge-gray {
-    background-color: $well-expand-item;
-  }
-}
-
-.card {
-  &.card-without-border,
-  &.bg-light {
-    border: 0 !important;
-  }
-}
-
-.nav-tabs {
-  // Override bootstrap's default border
-  border-bottom: 0;
-
-  .nav-link {
-    border-top: 0;
-    border-left: 0;
-    border-right: 0;
-  }
-
-  .nav-item {
-    margin-bottom: 0;
-  }
-}
-
-pre code {
-  white-space: pre-wrap;
-}
-
-.alert {
-  border-radius: 0;
-}
-
-.alert-success {
-  background-color: $green-500;
-  border-color: $green-500;
-}
-
-.alert-info {
-  background-color: $blue-500;
-  border-color: $blue-500;
-}
-
-.alert-warning {
-  background-color: $orange-500;
-  border-color: $orange-500;
-}
-
-.alert-danger {
-  background-color: $red-500;
-  border-color: $red-500;
-}
-
-.alert-success,
-.alert-info,
-.alert-warning,
-.alert-danger {
-  color: $white;
-
-  h4,
-  .alert-link {
-    color: $white;
-  }
-}
-
-input[type=color].form-control {
-  height: $input-height;
-}
-
-.toggle-sidebar-button {
-  .collapse-text,
-  .icon-chevron-double-lg-left,
-  .icon-chevron-double-lg-right {
-    color: $gl-text-color-secondary;
-  }
-}
-
-.project-templates-buttons {
-  .btn {
-    vertical-align: unset;
-  }
-}
-
-/*
- Bootstrap 4.1.2 introduced a new default vertical alignment which breaks our icons,
- so we need to reset the vertical alignment to the default value. See:
- - https://gitlab.com/gitlab-org/gitlab-foss/issues/51362
- */
-svg {
-  vertical-align: baseline;
-}
+// ---
+// Scss to help with bootstrap 3 to 4 migration
+// ---
+@import 'bootstrap_migration_variables';
+@import 'bootstrap_migration_reset';
+@import 'bootstrap_migration_components';
diff --git a/app/assets/stylesheets/bootstrap_migration_components.scss b/app/assets/stylesheets/bootstrap_migration_components.scss
new file mode 100644
index 00000000000..b6cecbe5806
--- /dev/null
+++ b/app/assets/stylesheets/bootstrap_migration_components.scss
@@ -0,0 +1,216 @@
+// ---
+// Scss to help with bootstrap 3 to 4 migration of bootstrap components
+// ---
+.form-control,
+.search form {
+  // Override default font size used in non-csslab UI
+  // Use rem to keep default font-size at 14px on body so 1rem still
+  // fits 8px grid, but also allow users to change browser font size
+  font-size: 0.875rem;
+}
+
+/* Our adjustments to hx & .hx above add unnecessary margins to modal-title
+   and page-title in modals, so we set them to 0 in order to have properly
+   formatted modal headers. */
+.modal-header {
+  .modal-title,
+  .page-title {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+input[type='file'] {
+  // Bootstrap 4 file input height is taller by default
+  // which makes them look ugly
+  line-height: 1;
+}
+
+.form-group.row .col-form-label {
+  // Bootstrap 4 aligns labels to the left
+  // for horizontal forms
+  @include media-breakpoint-up(md) {
+    text-align: right;
+  }
+}
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .d#{$infix}-table-header-group {
+      display: table-header-group !important;
+    }
+  }
+}
+
+.text-secondary {
+  // Override Bootstrap's light secondary color
+  // We have to use !important because bootstrap has that set as well
+  color: $gl-text-color-secondary !important;
+}
+
+.bg-success,
+.bg-primary,
+.bg-info,
+.bg-danger,
+.bg-warning {
+  .card-header {
+    color: $white;
+  }
+}
+
+// Polyfill deprecated selectors
+
+.hidden {
+  display: none !important;
+  visibility: hidden !important;
+}
+
+.hide {
+  display: none;
+}
+
+.dropdown-toggle::after,
+.dropright .dropdown-menu-toggle::after {
+  // Remove bootstrap's dropdown caret
+  display: none;
+}
+
+// Add to .label so that old system notes that are saved to the db
+// will still receive the correct styling
+.badge:not(.gl-badge),
+.label {
+  padding: 4px 5px;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: $gl-font-weight-normal;
+  display: inline-block;
+
+  &.badge-gray {
+    background-color: $label-gray-bg;
+    color: $gl-text-color;
+    text-shadow: none;
+  }
+
+  &.badge-inverse {
+    background-color: $label-inverse-bg;
+  }
+}
+
+.divider {
+  // copied rules from node_modules/bootstrap/scss/_dropdown.scss:116
+  // this might be safe to just remove instead
+  // most places that use divider add overrides to undo these things
+  // there is also a probably-unintentional use in deprecated_dropdown_divider.scss
+  // so we would end up with .gl-dropdown .dropdown-divider
+  height: 0;
+  margin: 4px 0;
+  overflow: hidden;
+  border-top: 1px solid $border-color;
+}
+
+.info-well {
+  background: $gray-10;
+  color: $gl-text-color;
+  border: 1px solid $border-color;
+  border-radius: 4px;
+  margin-bottom: 16px;
+
+  .well-segment {
+    padding: 16px;
+
+    &:not(:last-of-type) {
+      border-bottom: 1px solid $well-inner-border;
+    }
+
+    p,
+    ol,
+    ul,
+    .form-group {
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .badge.badge-gray {
+    background-color: $well-expand-item;
+  }
+}
+
+.card {
+  &.card-without-border,
+  &.bg-light {
+    border: 0 !important;
+  }
+}
+
+.nav-tabs {
+  // Override bootstrap's default border
+  border-bottom: 0;
+
+  .nav-link {
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+  }
+
+  .nav-item {
+    margin-bottom: 0;
+  }
+}
+
+.alert {
+  border-radius: 0;
+}
+
+.alert-success {
+  background-color: $green-500;
+  border-color: $green-500;
+}
+
+.alert-info {
+  background-color: $blue-500;
+  border-color: $blue-500;
+}
+
+.alert-warning {
+  background-color: $orange-500;
+  border-color: $orange-500;
+}
+
+.alert-danger {
+  background-color: $red-500;
+  border-color: $red-500;
+}
+
+.alert-success,
+.alert-info,
+.alert-warning,
+.alert-danger {
+  color: $white;
+
+  h4,
+  .alert-link {
+    color: $white;
+  }
+}
+
+input[type=color].form-control {
+  height: $input-height;
+}
+
+.toggle-sidebar-button {
+  .collapse-text,
+  .icon-chevron-double-lg-left,
+  .icon-chevron-double-lg-right {
+    color: $gl-text-color-secondary;
+  }
+}
+
+.project-templates-buttons {
+  .btn {
+    vertical-align: unset;
+  }
+}
diff --git a/app/assets/stylesheets/bootstrap_migration_reset.scss b/app/assets/stylesheets/bootstrap_migration_reset.scss
new file mode 100644
index 00000000000..ad315c4ada1
--- /dev/null
+++ b/app/assets/stylesheets/bootstrap_migration_reset.scss
@@ -0,0 +1,94 @@
+// ---
+// Scss to help with bootstrap 3 to 4 migration of core elements
+// ---
+body {
+  // Override default font size used in non-csslab UI
+  // Use rem to keep default font-size at 14px on body so 1rem still
+  // fits 8px grid, but also allow users to change browser font size
+  font-size: 0.875rem;
+}
+
+legend {
+  border-bottom: 1px solid $border-color;
+  margin-bottom: 20px;
+}
+
+button,
+html [type='button'],
+[type='reset'],
+[type='submit'],
+[role='button'] {
+  // Override bootstrap reboot
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-appearance: inherit;
+  cursor: pointer;
+}
+
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3 {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+h5,
+.h5 {
+  font-size: $gl-font-size;
+}
+
+b,
+strong {
+  font-weight: bold;
+}
+
+a {
+  color: $blue-600;
+}
+
+hr {
+  overflow: hidden;
+}
+
+code {
+  padding: 2px 4px;
+  color: $code-color;
+  background-color: $gray-50;
+  border-radius: $border-radius-default;
+
+  .code > &,
+  .build-log & {
+    background-color: inherit;
+    padding: unset;
+  }
+}
+
+table {
+  // Remove any table border lines
+  border-spacing: 0;
+}
+
+pre code {
+  white-space: pre-wrap;
+}
+
+/*
+ Bootstrap 4.1.2 introduced a new default vertical alignment which breaks our icons,
+ so we need to reset the vertical alignment to the default value. See:
+ - https://gitlab.com/gitlab-org/gitlab-foss/issues/51362
+ */
+svg {
+  vertical-align: baseline;
+}
diff --git a/app/assets/stylesheets/bootstrap_migration_variables.scss b/app/assets/stylesheets/bootstrap_migration_variables.scss
new file mode 100644
index 00000000000..f3888de4ed8
--- /dev/null
+++ b/app/assets/stylesheets/bootstrap_migration_variables.scss
@@ -0,0 +1,15 @@
+$text-color: $gl-text-color;
+
+$brand-primary: $blue-500;
+$brand-success: $green-500;
+$brand-info: $blue-500;
+$brand-warning: $orange-500;
+$brand-danger: $red-500;
+
+$border-radius-base: $gl-border-radius-base;
+
+$modal-body-bg: $white;
+$input-border: $border-color;
+
+$padding-base-vertical: $gl-vert-padding;
+$padding-base-horizontal: $gl-padding;
diff --git a/app/assets/stylesheets/components/milestone_combobox.scss b/app/assets/stylesheets/components/milestone_combobox.scss
index 5d1709c22ec..94d295c324b 100644
--- a/app/assets/stylesheets/components/milestone_combobox.scss
+++ b/app/assets/stylesheets/components/milestone_combobox.scss
@@ -1,13 +1,4 @@
 .milestone-combobox {
-  .selected-item {
-    /* stylelint-disable-next-line function-url-quotes */
-    background: url(asset_path('checkmark.png')) no-repeat 0 2px;
-  }
-
-  .dropdown-item-space {
-    padding: 8px 12px;
-  }
-
   .dropdown-menu.show {
     overflow: hidden;
   }
diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index 2c72c4b0f65..1192c51b9aa 100644
--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -244,9 +244,13 @@
 // above will be deprecated once all instances of "award emoji" are
 // migrated to Vue.
 
-.gl-button .award-emoji-block gl-emoji {
-  margin-top: -1px;
-  margin-bottom: -1px;
+.gl-button .award-emoji-block {
+  display: contents;
+
+  gl-emoji {
+    margin-top: -1px;
+    margin-bottom: -1px;
+  }
 }
 
 .add-reaction-button {
diff --git a/app/assets/stylesheets/framework/broadcast_messages.scss b/app/assets/stylesheets/framework/broadcast_messages.scss
index b8934d2797a..58f986ec0ae 100644
--- a/app/assets/stylesheets/framework/broadcast_messages.scss
+++ b/app/assets/stylesheets/framework/broadcast_messages.scss
@@ -15,6 +15,10 @@
 
 .broadcast-banner-message {
   text-align: center;
+
+  p {
+    margin-bottom: 0;
+  }
 }
 
 .broadcast-notification-message {
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 36a0d3ca3ca..be8a890320f 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -254,10 +254,9 @@ li.note {
 }
 
 img.emoji {
-  height: 20px;
+  height: 16px;
   vertical-align: top;
   width: 20px;
-  margin-top: 1px;
 }
 
 .chart {
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 7f960e3da51..5c6d9266f7c 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -503,6 +503,7 @@
 
         &.dropdown-menu-user-link::before {
           top: 50%;
+          transform: translateY(-50%);
         }
       }
 
@@ -520,8 +521,22 @@
       }
 
       &.is-active {
-        /* stylelint-disable-next-line function-url-quotes */
-        background: url(asset_path('checkmark.png')) no-repeat 14px center;
+        position: relative;
+
+        &::before {
+          content: '';
+          display: block;
+          position: absolute;
+          top: 0.5rem;
+          left: 1rem;
+          width: 1rem;
+          height: 1rem;
+          mask-image: asset_url('icons-stacked.svg#check');
+          mask-repeat: no-repeat;
+          mask-size: cover;
+          mask-position: center center;
+          background: $black-normal;
+        }
       }
     }
   }
@@ -692,7 +707,7 @@
 
 .dropdown-label-box {
   position: relative;
-  top: 3px;
+  top: 0;
   margin-right: 5px;
   display: inline-block;
   width: 15px;
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 1004383cfd3..f44123fc2ed 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -1,5 +1,3 @@
-$top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important;
-
 .navbar-gitlab {
   padding: 0 16px;
   z-index: $header-zindex;
@@ -54,7 +52,7 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
       white-space: nowrap;
 
       img {
-        height: 28px;
+        height: 24px;
 
         + .logo-text {
           margin-left: 8px;
@@ -460,7 +458,6 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
       vertical-align: text-top;
     }
 
-    a.upgrade-plan-link gl-emoji,
     a.ci-minutes-emoji gl-emoji,
     a.trial-link gl-emoji {
       font-size: $gl-font-size;
@@ -574,7 +571,7 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
   }
 
   .frequent-items-list-item-container > a:hover {
-    background-color: $top-nav-hover-bg;
+    background-color: $nav-active-bg;
   }
 }
 
@@ -589,11 +586,9 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
 }
 
 .top-nav-menu-item {
-  color: var(--indigo-900, $theme-indigo-900) !important;
-
   &.active,
   &:hover {
-    background-color: $top-nav-hover-bg;
+    background-color: $nav-active-bg;
   }
 
   .gl-icon {
@@ -603,7 +598,6 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
 
 .top-nav-responsive {
   @include gl-display-none;
-  color: var(--indigo-900, $theme-indigo-900);
 }
 
 .top-nav-responsive-open {
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 7731ec751c9..7522f791b8e 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -72,7 +72,6 @@
     @include media-breakpoint-down(xs) {
       .nav-item {
         flex: 1;
-        border-bottom: 1px solid $border-color;
       }
 
       .gl-tab-nav-item {
@@ -84,7 +83,8 @@
         width: 100%;
         display: flex;
         flex-wrap: wrap;
-        margin-top: $gl-padding-8;
+        padding-top: $gl-padding-8;
+        border-top: 1px solid $border-color;
       }
     }
   }
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index e77971d5280..d270f802c56 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -226,3 +226,29 @@
 .edit-link {
   margin-right: -$gl-spacing-scale-2;
 }
+
+.assignee-grid {
+  grid-template-areas: ' attention   user';
+  grid-template-columns: min-content 1fr;
+}
+
+.reviewer-grid {
+  grid-template-areas: ' user approval    rerequest';
+  grid-template-columns: 1fr  min-content min-content;
+
+  &.attention-requests {
+    grid-template-areas: ' attention   user approval';
+    grid-template-columns: min-content 1fr  min-content;
+  }
+}
+
+.assignee-grid,
+.reviewer-grid {
+  [data-css-area='attention'] {
+    grid-area: attention;
+  }
+
+  [data-css-area='user'] {
+    grid-area: user;
+  }
+}
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index c6bc8fa0eac..6348703e9e1 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -48,7 +48,7 @@ table {
       th {
         padding: 10px $gl-padding;
         line-height: 20px;
-        vertical-align: middle;
+        vertical-align: top;
       }
 
       th {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 31ef5ae0646..8e3b34e4eaf 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -363,6 +363,7 @@ $well-expand-item: #e8f2f7 !default;
 $well-inner-border: #eef0f2 !default;
 $well-light-border: #f1f1f1;
 $well-light-text-color: #5b6169;
+$nav-active-bg: var(--nav-active-bg, rgba($black, 0.08)) !important;
 
 /*
  * Text
diff --git a/app/assets/stylesheets/highlight/diff_custom_colors_addition.scss b/app/assets/stylesheets/highlight/diff_custom_colors_addition.scss
new file mode 100644
index 00000000000..30895a55711
--- /dev/null
+++ b/app/assets/stylesheets/highlight/diff_custom_colors_addition.scss
@@ -0,0 +1,36 @@
+/**
+* CSS variables used below are declared in `app/views/layouts/_diffs_colors_css.haml`
+*/
+.diff-custom-addition-color {
+  .code {
+    .line_holder {
+      .diff-line-num,
+      .line-coverage,
+      .line-codequality,
+      .line_content {
+        &.new {
+          &:not(.hll) {
+            background: var(--diff-addition-color);
+          }
+
+          &.line_content span.idiff {
+            background: var(--diff-addition-color) !important;
+          }
+
+          &::before,
+          a {
+            mix-blend-mode: luminosity;
+          }
+        }
+      }
+    }
+
+    .gd {
+      background-color: var(--diff-addition-color);
+    }
+  }
+
+  .idiff.addition {
+    background: var(--diff-addition-color) !important;
+  }
+}
diff --git a/app/assets/stylesheets/highlight/diff_custom_colors_deletion.scss b/app/assets/stylesheets/highlight/diff_custom_colors_deletion.scss
new file mode 100644
index 00000000000..a8ab43909eb
--- /dev/null
+++ b/app/assets/stylesheets/highlight/diff_custom_colors_deletion.scss
@@ -0,0 +1,36 @@
+/**
+* CSS variables used below are declared in `app/views/layouts/_diffs_colors_css.haml`
+*/
+.diff-custom-deletion-color {
+  .code {
+    .line_holder {
+      .diff-line-num,
+      .line-coverage,
+      .line-codequality,
+      .line_content {
+        &.old {
+          &:not(.hll) {
+            background: var(--diff-deletion-color);
+          }
+
+          &.line_content span.idiff {
+            background: var(--diff-deletion-color) !important;
+          }
+
+          &::before,
+          a {
+            mix-blend-mode: luminosity;
+          }
+        }
+      }
+    }
+
+    .gd {
+      background-color: var(--diff-deletion-color);
+    }
+  }
+
+  .idiff.deletion {
+    background: var(--diff-deletion-color) !important;
+  }
+}
diff --git a/app/assets/stylesheets/highlight/hljs.scss b/app/assets/stylesheets/highlight/hljs.scss
new file mode 100644
index 00000000000..2e31e7c1f6d
--- /dev/null
+++ b/app/assets/stylesheets/highlight/hljs.scss
@@ -0,0 +1,125 @@
+.code.highlight {
+  .hljs-comment {
+    color: var(--color-hljs-comment);
+  }
+
+  .hljs-link {
+    color: var(--color-hljs-link);
+  }
+
+  .hljs-meta {
+    color: var(--color-hljs-meta);
+  }
+
+  .hljs-keyword {
+    color: var(--color-hljs-keyword);
+  }
+
+  .hljs-type {
+    color: var(--color-hljs-type);
+  }
+
+  .hljs-attr,
+  .hljs-property {
+    color: var(--color-hljs-attr);
+  }
+
+  .hljs-built_in {
+    color: var(--color-hljs-builtin);
+  }
+
+  .hljs-literal {
+    color: var(--color-hljs-literal);
+  }
+
+  .hljs-title {
+    color: var(--color-hljs-title);
+
+    &.class_ {
+      color: var(--color-hljs-class);
+    }
+
+    &.function_ {
+      color: var(--color-hljs-function);
+    }
+  }
+
+  .hljs-tag ,
+  .hljs-name {
+    color: var(--color-hljs-tag);
+  }
+
+  .hljs-number {
+    color: var(--color-hljs-number);
+  }
+
+  .hljs-subst {
+    color: var(--color-hljs-subst);
+  }
+
+  .hljs-string,
+  .hljs-section,
+  .hljs-bullet {
+    color: var(--color-hljs-string);
+  }
+
+  .hljs-symbol {
+    color: var(--color-hljs-symbol);
+  }
+
+  .hljs-variable {
+    color: var(--color-hljs-variable);
+
+    &.language_ {
+      color: var(--color-hljs-language);
+    }
+
+    &.constant_ {
+      color: var(--color-hljs-constant);
+    }
+  }
+
+  .hljs-attribute {
+    color: var(--color-hljs-attribute);
+  }
+
+  .hljs-operator {
+    color: var(--color-hljs-operator);
+  }
+
+  .hljs-punctuation {
+    color: var(--color-hljs-punctuation);
+  }
+
+  .hljs-regexp {
+    color: var(--color-hljs-regexp);
+  }
+
+  .hljs-params {
+    color: var(--color-hljs-params);
+  }
+
+  .hljs-doctag {
+    color: var(--color-hljs-doctag);
+  }
+
+  .hljs-selector-tag {
+    color: var(--color-hljs-selector-tag);
+  }
+
+  .hljs-selector-class {
+    color: var(--color-hljs-selector-class);
+  }
+
+  .hljs-selector-id {
+    color: var(--color-hljs-selector-id);
+  }
+
+  .hljs-selector-attr {
+    color: var(--color-hljs-selector-attr);
+  }
+
+  .hljs-selector-pseudo {
+    color: var(--color-hljs-selector-pseudo);
+  }
+}
diff --git a/app/assets/stylesheets/highlight/themes/dark.scss b/app/assets/stylesheets/highlight/themes/dark.scss
index 28878280d24..c51b1f04757 100644
--- a/app/assets/stylesheets/highlight/themes/dark.scss
+++ b/app/assets/stylesheets/highlight/themes/dark.scss
@@ -1,6 +1,7 @@
 /* https://github.com/MozMorris/tomorrow-pygments */
 
 @import '../common';
+@import '../hljs';
 
 /*
 * Dark syntax colors
@@ -88,6 +89,41 @@ $dark-vg: #c66;
 $dark-vi: #c66;
 $dark-il: #de935f;
 
+:root {
+  --color-hljs-comment: #{$dark-c};
+  --color-hljs-variable: #{$dark-k};
+  --color-hljs-link: #{$dark-l};
+  --color-hljs-meta: #{$dark-cp};
+  --color-hljs-keyword: #{$dark-kd};
+  --color-hljs-type: #{$dark-kt};
+  --color-hljs-attr: #{$dark-na};
+  --color-hljs-builtin: #{$dark-nb};
+  --color-hljs-title: #{$dark-n};
+  --color-hljs-class: #{$dark-nc};
+  --color-hljs-function: #{$dark-nf};
+  --color-hljs-tag: #{$dark-nt};
+  --color-hljs-number: #{$dark-mi};
+  --color-hljs-subst: #{$dark-sc};
+  --color-hljs-string: #{$dark-s1};
+  --color-hljs-symbol: #{$dark-ss};
+  --color-hljs-variable: #{$dark-vi};
+  --color-hljs-operator: #{$dark-o};
+  --color-hljs-punctuation: #{$dark-p};
+  --color-hljs-regexp: #{$dark-sr};
+  --color-hljs-constant: #{$dark-nx};
+  --color-hljs-literal: #{$dark-kc};
+  --color-hljs-language: #{$dark-nx};
+  --color-hljs-params: #{$dark-nx};
+  --color-hljs-selector-doctag: #{$dark-cm};
+  --color-hljs-selector-tag: #{$dark-nt};
+  --color-hljs-selector-class: #{$dark-nc};
+  --color-hljs-selector-id: #{$dark-nn};
+  --color-hljs-selector-attr: #{$dark-nt};
+  --color-hljs-selector-pseudo: #{$dark-nd};
+  --default-diff-color-deletion: #ff3333;
+  --default-diff-color-addition: #288f2a;
+}
+
 .code.dark {
   // Line numbers
   .file-line-num {
diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss
index 6faf1cffdef..226bb44f0e7 100644
--- a/app/assets/stylesheets/highlight/themes/monokai.scss
+++ b/app/assets/stylesheets/highlight/themes/monokai.scss
@@ -89,6 +89,11 @@ $monokai-gd: #f92672;
 $monokai-gi: #a6e22e;
 $monokai-gh: #75715e;
 
+:root {
+  --default-diff-color-deletion: #c87872;
+  --default-diff-color-addition: #678528;
+}
+
 .code.monokai {
   // Line numbers
   .file-line-num {
diff --git a/app/assets/stylesheets/highlight/themes/none.scss b/app/assets/stylesheets/highlight/themes/none.scss
index 9c28d9463dc..7a36aba8be7 100644
--- a/app/assets/stylesheets/highlight/themes/none.scss
+++ b/app/assets/stylesheets/highlight/themes/none.scss
@@ -9,6 +9,11 @@
   background-color: $white-normal;
 }
 
+:root {
+  --default-diff-color-deletion: #b4b4b4;
+  --default-diff-color-addition: #b4b4b4;
+}
+
 .code.none {
   // Line numbers
   .file-line-num {
diff --git a/app/assets/stylesheets/highlight/themes/solarized-dark.scss b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
index c9f889c79fc..acd401e1694 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
@@ -92,6 +92,11 @@ $solarized-dark-vg: #268bd2;
 $solarized-dark-vi: #268bd2;
 $solarized-dark-il: #2aa198;
 
+:root {
+  --default-diff-color-deletion: #ff362c;
+  --default-diff-color-addition: #647e0e;
+}
+
 .code.solarized-dark {
   // Line numbers
   .file-line-num {
diff --git a/app/assets/stylesheets/highlight/themes/solarized-light.scss b/app/assets/stylesheets/highlight/themes/solarized-light.scss
index 0108d7e496f..ddcecc4cbcf 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-light.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-light.scss
@@ -94,6 +94,11 @@ $solarized-light-vg: #268bd2;
 $solarized-light-vi: #268bd2;
 $solarized-light-il: #2aa198;
 
+:root {
+  --default-diff-color-deletion: #dc322f;
+  --default-diff-color-addition: #859900;
+}
+
 @mixin match-line {
   color: $black-transparent;
   background: $solarized-light-matchline-bg;
diff --git a/app/assets/stylesheets/highlight/themes/white.scss b/app/assets/stylesheets/highlight/themes/white.scss
index ed1d9c924c0..8698e448c94 100644
--- a/app/assets/stylesheets/highlight/themes/white.scss
+++ b/app/assets/stylesheets/highlight/themes/white.scss
@@ -3,3 +3,8 @@
 
   @include conflict-colors('white');
 }
+
+:root {
+  --default-diff-color-deletion: #eb919b;
+  --default-diff-color-addition: #a0f5b4;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss
index 91d8f4a1ba5..20a36d2e8b1 100644
--- a/app/assets/stylesheets/highlight/white_base.scss
+++ b/app/assets/stylesheets/highlight/white_base.scss
@@ -149,7 +149,6 @@ pre.code,
   .diff-line-num {
     &.old {
       background-color: $line-number-old;
-      border-color: $line-removed-dark;
 
       a {
         color: scale-color($line-number-old, $red: -30%, $green: -30%, $blue: -30%);
@@ -158,7 +157,6 @@ pre.code,
 
     &.new {
       background-color: $line-number-new;
-      border-color: $line-added-dark;
 
       a {
         color: scale-color($line-number-new, $red: -30%, $green: -30%, $blue: -30%);
diff --git a/app/assets/stylesheets/notify_base.scss b/app/assets/stylesheets/notify_base.scss
index 8c6f9a27077..0ca1398c609 100644
--- a/app/assets/stylesheets/notify_base.scss
+++ b/app/assets/stylesheets/notify_base.scss
@@ -1,5 +1,6 @@
-@import 'framework/mixins';
 @import 'framework/variables';
+@import 'framework/variables_overrides';
+@import 'framework/mixins';
 
 img {
   max-width: 100%;
diff --git a/app/assets/stylesheets/notify_enhanced.scss b/app/assets/stylesheets/notify_enhanced.scss
index 5df5a8592bf..a366498ea03 100644
--- a/app/assets/stylesheets/notify_enhanced.scss
+++ b/app/assets/stylesheets/notify_enhanced.scss
@@ -2,20 +2,30 @@
 // keep parts that affect elements that can appear in emails;
 // omit Bootstrap Reboot since it adds unnecessary styles to every element.
 @import 'notify_base';
+
+// bootstrap variables, mixins, functions
 @import 'bootstrap/scss/functions';
 @import 'bootstrap/scss/variables';
 @import 'bootstrap/scss/mixins';
+
+// bootstrap styles
 @import 'bootstrap/scss/code';
+
+// @gitlab/ui variables, mixins, functions
 @import '@gitlab/ui/src/scss/variables';
 @import '@gitlab/ui/src/scss/utility-mixins/index';
-@import '@gitlab/ui/src/scss/components';
-@import 'bootstrap_migration';
-@import 'framework/common';
+
+// @gitlab/ui styles
+@import '@gitlab/ui/src/components/base/icon/icon';
+@import '@gitlab/ui/src/components/base/label/label';
+
+// gitlab styles
+@import 'bootstrap_migration_variables';
+@import 'bootstrap_migration_reset';
 @import 'framework/gfm';
 @import 'framework/kbd';
 @import 'framework/tables';
 @import 'framework/typography';
-@import 'framework/emojis';
 
 body {
   font-family: $regular-font;
@@ -26,11 +36,15 @@ a {
   text-decoration: none;
 }
 
-.content {
-  .md {
-    padding: 1rem 0;
-  }
+.gl-mb-5 {
+  @include gl-mb-5;
+}
 
+.gl-mt-5 {
+  @include gl-mt-5;
+}
+
+.content {
   hr {
     border: 1px solid #e1e1e1;
   }
diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss
index f91ca489bdf..eecd4954e39 100644
--- a/app/assets/stylesheets/page_bundles/boards.scss
+++ b/app/assets/stylesheets/page_bundles/boards.scss
@@ -198,7 +198,7 @@
   border-bottom: 1px solid var(--gray-100, $gray-100);
   height: 3rem;
 
-  .js-max-issue-size::before {
+  .max-issue-size::before {
     content: '/';
   }
 }
diff --git a/app/assets/stylesheets/page_bundles/import.scss b/app/assets/stylesheets/page_bundles/import.scss
index b7a4d9564fe..cd5e6d32e4e 100644
--- a/app/assets/stylesheets/page_bundles/import.scss
+++ b/app/assets/stylesheets/page_bundles/import.scss
@@ -1,18 +1,22 @@
 @import 'mixins_and_variables_and_functions';
 
+.import-jobs-from-col {
+  width: 37%;
+}
+
+
 .import-jobs-to-col {
-  width: 39%;
+  width: 37%;
 }
 
 .import-jobs-status-col {
-  width: 15%;
+  width: 25%;
 }
 
 .import-jobs-cta-col {
   width: 1%;
 }
 
-
 .import-entities-target-select {
   &.disabled {
     .import-entities-target-select-separator {
diff --git a/app/assets/stylesheets/page_bundles/jira_connect_users.scss b/app/assets/stylesheets/page_bundles/jira_connect_users.scss
index 6725bf8f1a1..602910adad9 100644
--- a/app/assets/stylesheets/page_bundles/jira_connect_users.scss
+++ b/app/assets/stylesheets/page_bundles/jira_connect_users.scss
@@ -1,13 +1 @@
-@import 'mixins_and_variables_and_functions';
-
-.jira-connect-users-container {
-  margin-left: auto;
-  margin-right: auto;
-  width: px-to-rem(350px);
-}
-
-.devise-layout-html body .navless-container {
-  @include media-breakpoint-down(xs) {
-    padding-top: 65px;
-  }
-}
+@import '../themes/theme_indigo';
diff --git a/app/assets/stylesheets/page_bundles/learn_gitlab.scss b/app/assets/stylesheets/page_bundles/learn_gitlab.scss
index 10a4a210d41..189aefb330b 100644
--- a/app/assets/stylesheets/page_bundles/learn_gitlab.scss
+++ b/app/assets/stylesheets/page_bundles/learn_gitlab.scss
@@ -1,11 +1,3 @@
 .learn-gitlab-info-card-content {
   height: 200px;
 }
-
-.learn-gitlab-section-card {
-  height: 400px;
-}
-
-.learn-gitlab-section-card-header {
-  height: 165px;
-}
diff --git a/app/assets/stylesheets/page_bundles/milestone.scss b/app/assets/stylesheets/page_bundles/milestone.scss
index 989219552a6..aa582db10d2 100644
--- a/app/assets/stylesheets/page_bundles/milestone.scss
+++ b/app/assets/stylesheets/page_bundles/milestone.scss
@@ -7,21 +7,7 @@ $status-box-line-height: 26px;
 }
 
 .milestones {
-  padding: $gl-padding-8;
-  margin-top: $gl-padding-8;
-  border-radius: $border-radius-default;
-  background-color: var(--gray-100, $gray-100);
-
   .milestone {
-    border: 0;
-    padding: $gl-padding-top $gl-padding;
-    border-radius: $border-radius-default;
-    background-color: var(--white, $white);
-
-    &:not(:last-child) {
-      margin-bottom: $gl-padding-4;
-    }
-
     h4 {
       font-weight: $gl-font-weight-bold;
     }
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index d9ad82d4e4b..27d81d8e53b 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -1,12 +1,4 @@
 .clusters-container {
-  .empty-state .svg-content {
-    @include gl-pb-0;
-
-    img {
-      width: 100px;
-    }
-  }
-
   @include media-breakpoint-down(xs) {
     .nav-controls {
       @include gl-w-full;
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 9bb4c5357e7..f127b0dc66c 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -311,7 +311,7 @@ ul.related-merge-requests > li gl-emoji {
 .description.work-items-enabled {
   ul.task-list {
     > li.task-list-item {
-      padding-inline-start: 2.25rem;
+      padding-inline-start: 2.5rem;
 
       .js-add-task {
         svg {
@@ -324,7 +324,7 @@ ul.related-merge-requests > li gl-emoji {
       }
 
       > input.task-list-item-checkbox {
-        left: 0.875rem;
+        left: 1.25rem;
       }
 
       &:hover,
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index c84a83c1fab..18a0f119edf 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -45,6 +45,36 @@ input[type='checkbox']:hover {
     transition: border-color ease-in-out $default-transition-duration,
       background-color ease-in-out $default-transition-duration;
   }
+
+  &.is-not-active {
+    .btn.gl-clear-icon-button {
+      display: none;
+    }
+
+    &::after {
+      content: '/';
+      display: inline-block;
+      position: absolute;
+      top: 0;
+      right: 8px;
+      transform: translateY(calc(50% - 4px));
+      padding: 4px 5px;
+      font-size: $gl-font-size-small;
+      font-family: $monospace-font;
+      line-height: 1;
+      vertical-align: middle;
+      border-width: 0;
+      border-style: solid;
+      border-image: none;
+      border-radius: 3px;
+      box-shadow: none;
+      white-space: pre-wrap;
+      // Safari
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+      word-break: keep-all;
+    }
+  }
 }
 
 .header-search-dropdown-menu {
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 5956368a977..0c7b74684cc 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -110,9 +110,14 @@
 
   .bs-callout,
   .form-check:first-child,
-  .form-text.text-muted {
+  .form-check .form-text.text-muted,
+  .form-check + .form-text.text-muted {
     margin-top: 0;
   }
+
+  .form-check .form-text.text-muted {
+    margin-bottom: $grid-size;
+  }
 }
 
 .settings-list-icon {
diff --git a/app/assets/stylesheets/snippets.scss b/app/assets/stylesheets/snippets.scss
index d38c1818f53..f79237eee3d 100644
--- a/app/assets/stylesheets/snippets.scss
+++ b/app/assets/stylesheets/snippets.scss
@@ -33,6 +33,10 @@
     text-align: left;
   }
 
+  .file-holder {
+    margin: 0;
+  }
+
   .file-content.code {
     border: $border-style;
     border-radius: 0 0 $border-radius-default $border-radius-default;
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
index 00195f553dc..62d45332204 100644
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -9,7 +9,6 @@ body.gl-dark {
   --gray-900: #fafafa;
   --green-100: #0d532a;
   --green-700: #91d4a8;
-  --indigo-900-alpha-008: rgba(235, 235, 250, 0.08);
   --gl-text-color: #fafafa;
   --border-color: #4f4f4f;
   --black: #fff;
@@ -453,9 +452,12 @@ a.gl-badge.badge-warning:active {
 .gl-form-input.form-control:disabled,
 .gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only {
   background-color: #1f1f1f;
-  color: #868686;
   box-shadow: inset 0 0 0 1px #404040;
+}
+.gl-form-input:disabled,
+.gl-form-input.form-control:disabled {
   cursor: not-allowed;
+  color: #868686;
 }
 .gl-form-input::placeholder,
 .gl-form-input.form-control::placeholder {
@@ -544,9 +546,7 @@ a.gl-badge.badge-warning:active {
   padding-right: 2rem;
   padding-left: 1.75rem;
 }
-body,
-.form-control,
-.search form {
+body {
   font-size: 0.875rem;
 }
 button,
@@ -564,6 +564,13 @@ strong {
 a {
   color: #63a6e9;
 }
+svg {
+  vertical-align: baseline;
+}
+.form-control,
+.search form {
+  font-size: 0.875rem;
+}
 .hidden {
   display: none !important;
   visibility: hidden !important;
@@ -588,9 +595,6 @@ a {
 .toggle-sidebar-button .icon-chevron-double-lg-left {
   color: #999;
 }
-svg {
-  vertical-align: baseline;
-}
 html {
   overflow-y: scroll;
 }
@@ -804,7 +808,7 @@ input {
   white-space: nowrap;
 }
 .navbar-gitlab .header-content .title img {
-  height: 28px;
+  height: 24px;
 }
 .navbar-gitlab .header-content .title img + .logo-text {
   margin-left: 8px;
@@ -1512,6 +1516,29 @@ svg.s16 {
 .header-search {
   width: 320px;
 }
+.header-search.is-not-active::after {
+  content: "/";
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  right: 8px;
+  transform: translateY(calc(50% - 4px));
+  padding: 4px 5px;
+  font-size: 12px;
+  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas",
+    "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
+  line-height: 1;
+  vertical-align: middle;
+  border-width: 0;
+  border-style: solid;
+  border-image: none;
+  border-radius: 3px;
+  box-shadow: none;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: keep-all;
+}
 .search {
   margin: 0 8px;
 }
@@ -1739,7 +1766,6 @@ body.gl-dark {
   --indigo-800: #d1d1f0;
   --indigo-900: #ebebfa;
   --indigo-950: #f7f7ff;
-  --indigo-900-alpha-008: rgba(235, 235, 250, 0.08);
   --purple-50: #232150;
   --purple-100: #2f2a6b;
   --purple-200: #453894;
@@ -1769,7 +1795,7 @@ body.gl-dark {
   box-shadow: none;
 }
 .nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) {
-  background-color: var(--indigo-900-alpha-008);
+  background-color: var(--nav-active-bg);
 }
 body.gl-dark {
   --gl-theme-accent: #868686;
@@ -1851,6 +1877,10 @@ body.gl-dark .header-search input::placeholder {
 body.gl-dark .header-search input:active::placeholder {
   color: #868686;
 }
+body.gl-dark .header-search.is-not-active::after {
+  color: #fafafa;
+  background-color: rgba(250, 250, 250, 0.2);
+}
 body.gl-dark .search form {
   background-color: rgba(250, 250, 250, 0.2);
 }
@@ -1972,7 +2002,6 @@ body.gl-dark {
   --indigo-800: #d1d1f0;
   --indigo-900: #ebebfa;
   --indigo-950: #f7f7ff;
-  --indigo-900-alpha-008: rgba(235, 235, 250, 0.08);
   --purple-50: #232150;
   --purple-100: #2f2a6b;
   --purple-200: #453894;
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index 6d66e207bdc..a8b7299b935 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -438,9 +438,12 @@ a.gl-badge.badge-warning:active {
 .gl-form-input.form-control:disabled,
 .gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only {
   background-color: #fafafa;
-  color: #868686;
   box-shadow: inset 0 0 0 1px #dbdbdb;
+}
+.gl-form-input:disabled,
+.gl-form-input.form-control:disabled {
   cursor: not-allowed;
+  color: #868686;
 }
 .gl-form-input::placeholder,
 .gl-form-input.form-control::placeholder {
@@ -529,9 +532,7 @@ a.gl-badge.badge-warning:active {
   padding-right: 2rem;
   padding-left: 1.75rem;
 }
-body,
-.form-control,
-.search form {
+body {
   font-size: 0.875rem;
 }
 button,
@@ -549,6 +550,13 @@ strong {
 a {
   color: #1068bf;
 }
+svg {
+  vertical-align: baseline;
+}
+.form-control,
+.search form {
+  font-size: 0.875rem;
+}
 .hidden {
   display: none !important;
   visibility: hidden !important;
@@ -573,9 +581,6 @@ a {
 .toggle-sidebar-button .icon-chevron-double-lg-left {
   color: #666;
 }
-svg {
-  vertical-align: baseline;
-}
 html {
   overflow-y: scroll;
 }
@@ -789,7 +794,7 @@ input {
   white-space: nowrap;
 }
 .navbar-gitlab .header-content .title img {
-  height: 28px;
+  height: 24px;
 }
 .navbar-gitlab .header-content .title img + .logo-text {
   margin-left: 8px;
@@ -1497,6 +1502,29 @@ svg.s16 {
 .header-search {
   width: 320px;
 }
+.header-search.is-not-active::after {
+  content: "/";
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  right: 8px;
+  transform: translateY(calc(50% - 4px));
+  padding: 4px 5px;
+  font-size: 12px;
+  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas",
+    "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
+  line-height: 1;
+  vertical-align: middle;
+  border-width: 0;
+  border-style: solid;
+  border-image: none;
+  border-radius: 3px;
+  box-shadow: none;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: keep-all;
+}
 .search {
   margin: 0 8px;
 }
diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss
index 213d1c013a0..751ad26ca21 100644
--- a/app/assets/stylesheets/startup/startup-signin.scss
+++ b/app/assets/stylesheets/startup/startup-signin.scss
@@ -301,9 +301,12 @@ fieldset:disabled a.btn {
 .gl-form-input.form-control:disabled,
 .gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only {
   background-color: #fafafa;
-  color: #868686;
   box-shadow: inset 0 0 0 1px #dbdbdb;
+}
+.gl-form-input:disabled,
+.gl-form-input.form-control:disabled {
   cursor: not-allowed;
+  color: #868686;
 }
 .gl-form-input::placeholder,
 .gl-form-input.form-control::placeholder {
@@ -369,8 +372,7 @@ fieldset:disabled a.btn {
   outline: none;
   background-color: #0b5cad;
 }
-body,
-.form-control {
+body {
   font-size: 0.875rem;
 }
 [type="submit"] {
@@ -387,6 +389,12 @@ a {
 hr {
   overflow: hidden;
 }
+svg {
+  vertical-align: baseline;
+}
+.form-control {
+  font-size: 0.875rem;
+}
 .hidden {
   display: none !important;
   visibility: hidden !important;
@@ -394,9 +402,6 @@ hr {
 .hide {
   display: none;
 }
-svg {
-  vertical-align: baseline;
-}
 html {
   overflow-y: scroll;
 }
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss
index 3cb8c58a380..550e3981401 100644
--- a/app/assets/stylesheets/themes/_dark.scss
+++ b/app/assets/stylesheets/themes/_dark.scss
@@ -70,7 +70,6 @@ $indigo-700: #a6a6de;
 $indigo-800: #d1d1f0;
 $indigo-900: #ebebfa;
 $indigo-950: #f7f7ff;
-$indigo-900-alpha-008: rgba($indigo-900, 0.08);
 
 $purple-50: #232150;
 $purple-100: #2f2a6b;
@@ -174,7 +173,6 @@ body.gl-dark {
   --indigo-800: #{$indigo-800};
   --indigo-900: #{$indigo-900};
   --indigo-950: #{$indigo-950};
-  --indigo-900-alpha-008: #{$indigo-900-alpha-008};
 
   --purple-50: #{$purple-50};
   --purple-100: #{$purple-100};
diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss
index bb9a9cf0497..83254fe1a52 100644
--- a/app/assets/stylesheets/themes/dark_mode_overrides.scss
+++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss
@@ -48,7 +48,7 @@
     }
 
     > a:hover {
-      background-color: var(--indigo-900-alpha-008);
+      background-color: var(--nav-active-bg);
     }
 
     &.active {
@@ -56,7 +56,7 @@
 
       &:not(.fly-out-top-item) {
         > a:not(.has-sub-items) {
-          background-color: var(--indigo-900-alpha-008);
+          background-color: var(--nav-active-bg);
         }
       }
     }
diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss
index c6e29c7f8b0..07194e2b532 100644
--- a/app/assets/stylesheets/themes/theme_helper.scss
+++ b/app/assets/stylesheets/themes/theme_helper.scss
@@ -176,6 +176,11 @@
         }
       }
     }
+
+    &.is-not-active::after {
+      color: $search-and-nav-links;
+      background-color: rgba($search-and-nav-links, 0.2);
+    }
   }
 
   .search {
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index 0511a179980..d7a5e21e303 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -366,8 +366,3 @@ to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1709
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-backdrop-filter: blur(2px); // still required by Safari
 }
-
-// Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2708
-.gl-inset-border-l-3-red-600 {
-  box-shadow: inset $gl-border-size-3 0 0 0 $red-600;
-}