Add latest changes from gitlab-org/gitlab@15-9-stable-eev15.9.0-rc42

47 files changed, 447 insertions, 1454 deletions

diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 0bc920b1f73..cc7a45e1c82 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -301,12 +301,6 @@ img.emoji {
   height: 4px;
 }
 
-.project-item-select-holder {
-  .project-item-select {
-    min-width: 250px;
-  }
-}
-
 .gl-accessibility {
   &:focus {
     display: flex;
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index f7cd5d7e183..4eb26d533c2 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -450,6 +450,16 @@
   }
 }
 
+.code .diff-grid-row.line_holder.diff-tr .diff-td.commented:not(.hll) {
+  --highlight-border-color: #{$blue-300};
+  background-color: $blue-50;
+
+  .gl-dark & {
+    --highlight-border-color: #{$blue-600};
+    background-color: $blue-900;
+  }
+}
+
 .diff-table.code,
 table.code {
   width: 100%;
@@ -461,6 +471,21 @@ table.code {
   table-layout: fixed;
   border-radius: 0 0 $border-radius-default $border-radius-default;
 
+  .diff-td.highlight-top {
+    box-shadow: 0 -1px var(--highlight-border-color, $blue-300);
+    z-index: 1;
+  }
+
+  .diff-td.highlight-bottom {
+    box-shadow: 0 1px var(--highlight-border-color, $blue-300);
+    z-index: 1;
+  }
+
+  .diff-td.highlight-top.highlight-bottom {
+    box-shadow: 0 -1px var(--highlight-border-color, $blue-300), 0 1px var(--highlight-border-color, $blue-300);
+    z-index: 2;
+  }
+
   .diff-tr.line_holder .diff-td,
   tr.line_holder td {
     line-height: $code-line-height;
@@ -485,13 +510,16 @@ table.code {
       user-select: none;
       margin: 0;
       padding: 0 10px 0 5px;
-      border-right-width: 1px;
-      border-right-style: solid;
       text-align: right;
       width: 50px;
       position: relative;
       white-space: nowrap;
 
+      &:nth-of-type(2) {
+        border-right-width: 1px;
+        border-right-style: solid;
+      }
+
       a {
         transition: none;
         float: left;
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 65d7eafb8b8..ebb9466eb15 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -632,21 +632,16 @@
   display: block;
   width: 100%;
   min-height: 30px;
-  padding: 0 7px;
+  @include gl-py-0;
+  @include gl-px-3;
   color: $gray-700;
   line-height: 30px;
-  border: 1px solid $dropdown-divider-bg;
-  border-radius: 2px;
+  border: 1px solid $gray-400;
+  @include gl-rounded-base;
   outline: 0;
 
   &:focus {
-    color: $gray-700;
-    border-color: $blue-300;
-    box-shadow: 0 0 4px $dropdown-input-focus-shadow;
-
-    ~ .dropdown-input-clear {
-      color: $gray-700;
-    }
+    @include gl-focus;
   }
 
   &:hover {
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index b28302f29ef..9ea5a66b3bc 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -142,106 +142,6 @@
       padding: 100px 0;
     }
 
-    /**
-     *  Blame file
-     */
-    &.blame {
-      table {
-        border: 0;
-        margin: 0;
-      }
-
-      //
-      // IMPORTANT PERFORMANCE OPTIMIZATION
-      //
-      // When viewinng a blame with many commits a lot of content is rendered on the page.
-      // content-visibility rule below ensure that we only render what is visible to the user,
-      // thus reducing TBT in the browser.
-      // Grid is used instead of table layout because content-visibility performs better with it.
-      tr {
-        content-visibility: auto;
-        display: grid;
-        grid-template-columns: 400px max-content auto;
-        border-bottom: 1px solid $gray-darker;
-
-        &:last-child {
-          border-bottom: 0;
-        }
-      }
-
-      td {
-        border-top: 0;
-        border-bottom: 0;
-
-        &:first-child {
-          border-left: 0;
-        }
-
-        &:last-child {
-          border-right: 0;
-        }
-
-        &.blame-commit {
-          padding: 5px 10px;
-          min-width: 400px;
-          max-width: 400px;
-          background: $gray-light;
-          border-left: 3px solid;
-
-          .commit-row-title {
-            display: flex;
-          }
-
-          .item-title {
-            flex: 1;
-            margin-right: 0.5em;
-          }
-        }
-
-        &.line-numbers {
-          float: none;
-          border-left: 1px solid $gray-100;
-
-          .file-line-num {
-            @include gl-min-w-9;
-          }
-
-          i {
-            float: none;
-            margin-right: 0;
-          }
-        }
-
-        &.lines {
-          padding: 0;
-        }
-
-        .code {
-          height: 100%;
-        }
-      }
-
-      @for $i from 0 through 5 {
-        td.blame-commit-age-#{$i} {
-          border-left-color: mix($blame-cyan, $blame-blue, $i / 5 * 100%);
-        }
-      }
-
-      @for $i from 1 through 4 {
-        td.blame-commit-age-#{$i + 5} {
-          border-left-color: mix($blame-gray, $blame-cyan, $i / 4 * 100%);
-        }
-      }
-
-      .doc-versions {
-        color: $gray-400;
-
-        &:hover {
-          color: $gray-900;
-        }
-      }
-    }
-
     &.logs {
       background: $gray-darker;
       max-height: 700px;
@@ -271,14 +171,6 @@
       }
     }
 
-    /**
-     *  Code file
-     */
-    &.code {
-      padding: 0;
-      border-radius: 0 0 $border-radius-default $border-radius-default;
-    }
-
     .list-inline.previews {
       display: flex;
       flex-wrap: wrap;
@@ -591,3 +483,100 @@ span.idiff {
 .file-holder [data-loading] .file-content *:nth-of-type(1n+30) {
   @include gl-display-none;
 }
+
+.tree-list-scroll:not(.tree-list-blobs) {
+  .tree-list-parent::before {
+    @include gl-content-empty;
+    @include gl-absolute;
+    @include gl-z-index-1;
+    @include gl-pointer-events-none;
+
+    top: 28px;
+    left: calc(14px + (var(--level) * 16px));
+    width: 1px;
+    height: calc(100% - 24px);
+    background-color: var(--gray-100, $gray-100);
+  }
+}
+
+.blame-table {
+  margin: 0;
+}
+
+.blame-table-wrapper {
+  overflow-x: auto;
+  min-width: max-content;
+}
+
+.blame {
+  position: relative;
+
+  .tr {
+    display: flex;
+    border-bottom: 1px solid $gray-darker;
+
+    &.last-row {
+      border-bottom: 0;
+    }
+  }
+
+  .blame-commit {
+    padding: 5px 10px;
+    width: 400px;
+    flex: none;
+    background: $gray-light;
+    border-left: 3px solid;
+
+    .commit-row-title {
+      display: flex;
+    }
+
+    .item-title {
+      flex: 1;
+      margin-right: 0.5em;
+    }
+  }
+
+  .lines {
+    flex: 1;
+  }
+
+  .code {
+    height: 100%;
+  }
+
+  @for $i from 0 through 5 {
+    .blame-commit-age-#{$i} {
+      border-left-color: mix($blame-cyan, $blame-blue, $i / 5 * 100%);
+    }
+  }
+
+  @for $i from 1 through 4 {
+    .blame-commit-age-#{$i + 5} {
+      border-left-color: mix($blame-gray, $blame-cyan, $i / 4 * 100%);
+    }
+  }
+
+  .doc-versions {
+    color: $gray-400;
+
+    &:hover {
+      color: $gray-900;
+    }
+  }
+}
+
+.blame.file-content .td.line-numbers {
+  float: none;
+  border-left: 1px solid $gray-100;
+  border-radius: 0;
+
+  .file-line-num {
+    @include gl-min-w-9;
+  }
+}
+
+.code {
+  padding: 0;
+  border-radius: 0 0 $border-radius-default $border-radius-default;
+}
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index e86edff3f13..c0fe8ca6f76 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -36,6 +36,24 @@ input[type='number'].hide-spinners {
 }
 /* stylelint-enable property-no-vendor-prefix */
 
+/**
+ * When form input type is search, browsers add a clear input button inside
+ * the input field. This overlaps with the input field we have already added.
+ */
+
+/* stylelint-disable property-no-vendor-prefix */
+input[type='search'] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-results-button {
+    @include gl-display-none;
+  }
+}
+/* stylelint-enable property-no-vendor-prefix */
+
 .datetime-controls {
   select {
     width: 100px;
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 4b1efcc1e9a..7baf84198e4 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -1,5 +1,4 @@
 $search-input-field-min-width: 320px;
-$search-input-field-max-width: 640px;
 $search-input-field-x-min-width: 200px;
 
 .navbar-gitlab {
@@ -64,11 +63,6 @@ $search-input-field-x-min-width: 200px;
           @include gl-focus($focus-ring: $focus-ring-dark);
         }
       }
-
-      .project-item-select {
-        right: auto;
-        left: 0;
-      }
     }
 
     .dropdown.open {
@@ -80,16 +74,6 @@ $search-input-field-x-min-width: 200px;
     .navbar-collapse > ul.nav > li:not(.d-none) {
       margin: 0 2px;
     }
-
-    .header-search-new {
-      max-width: $search-input-field-max-width;
-    }
-
-    &.header-search-is-active {
-      .global-search-container {
-        flex-grow: 1;
-      }
-    }
   }
 
   .header-search {
@@ -446,18 +430,6 @@ $search-input-field-x-min-width: 200px;
   margin-left: auto;
 }
 
-.btn-sign-in {
-  background-color: $indigo-100;
-  color: $indigo-900;
-  font-weight: $gl-font-weight-bold;
-  line-height: 18px;
-  margin: 4px 0 4px 2px;
-
-  &:hover {
-    background-color: $white;
-  }
-}
-
 @include media-breakpoint-down(xs) {
   .navbar-gitlab .container-fluid {
     font-size: 18px;
diff --git a/app/assets/stylesheets/framework/images.scss b/app/assets/stylesheets/framework/images.scss
index 195a66bf9e5..3ac63b8f608 100644
--- a/app/assets/stylesheets/framework/images.scss
+++ b/app/assets/stylesheets/framework/images.scss
@@ -1,4 +1,5 @@
-.appearance-logo-preview {
+.appearance-logo-preview,
+.appearance-pwa-icon-preview {
   max-width: 400px;
   margin-bottom: 20px;
 }
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 628406d5889..c5e50299e6d 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -21,20 +21,6 @@
   }
 }
 
-@keyframes blinking-scroll-button {
-  0% {
-    opacity: 0.2;
-  }
-
-  50% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0.2;
-  }
-}
-
 @mixin str-truncated($max-width: 82%) {
   display: inline-block;
   overflow: hidden;
@@ -308,27 +294,6 @@
       margin-right: 0;
     }
   }
-
-  .btn-scroll.animate {
-    .scroll-arrow {
-      animation: blinking-scroll-button 1.5s ease-in-out infinite;
-    }
-
-    .scroll-dot {
-      animation: blinking-scroll-button 1.5s ease-in-out infinite;
-      animation-delay: 0.3s;
-    }
-
-    &:disabled {
-      opacity: 1;
-    }
-  }
-
-  .btn-scroll:disabled,
-  .btn-refresh:disabled {
-    opacity: 0.35;
-    cursor: not-allowed;
-  }
 }
 
 @mixin build-loader-animation {
diff --git a/app/assets/stylesheets/framework/page_header.scss b/app/assets/stylesheets/framework/page_header.scss
index c8b4e306a2e..c2bd475ab90 100644
--- a/app/assets/stylesheets/framework/page_header.scss
+++ b/app/assets/stylesheets/framework/page_header.scss
@@ -42,8 +42,4 @@
       margin: 0 2px 0 3px;
     }
   }
-
-  .ci-status {
-    margin-right: 10px;
-  }
 }
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index 7e0a601223d..5ba0b1d0828 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -179,11 +179,6 @@
         display: inline-block;
       }
 
-      .project-item-select-holder {
-        margin: 0;
-        width: 100%;
-      }
-
       &.inline {
         display: flex;
         flex-flow: row wrap;
@@ -367,13 +362,3 @@
     }
   }
 }
-
-.project-item-select-holder.btn-group {
-  .new-project-item-select-button {
-    max-width: 32px;
-  }
-}
-
-.empty-state .project-item-select-holder.btn-group {
-  max-width: 320px;
-}
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index eb34d91476b..a07a57f40f7 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -741,20 +741,6 @@
   top: calc(#{$header-height} + #{$performance-bar-height});
 }
 
-.sidebar-move-issue-confirmation-button {
-  width: 100%;
-
-  &.is-loading {
-    .sidebar-move-issue-confirmation-loading-icon {
-      display: inline-block;
-    }
-  }
-}
-
-.sidebar-move-issue-confirmation-loading-icon {
-  display: none;
-}
-
 .issuable-show-labels {
   .gl-label {
     margin-bottom: 5px;
diff --git a/app/assets/stylesheets/framework/snippets.scss b/app/assets/stylesheets/framework/snippets.scss
index 14971e3b2ee..9f8d5d25cb8 100644
--- a/app/assets/stylesheets/framework/snippets.scss
+++ b/app/assets/stylesheets/framework/snippets.scss
@@ -17,7 +17,6 @@
   border-radius: 3px;
 
   .file-content {
-    max-height: 500px;
     overflow-y: auto;
   }
 
diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss
index 59a9df9ede0..4b55b39d6f3 100644
--- a/app/assets/stylesheets/framework/super_sidebar.scss
+++ b/app/assets/stylesheets/framework/super_sidebar.scss
@@ -1,6 +1,7 @@
 .super-sidebar {
   top: 0;
   width: $contextual-sidebar-width;
+  z-index: 600;
 
   .user-bar {
     background-color: $t-gray-a-04;
@@ -10,11 +11,53 @@
     }
   }
 
+  .counter .gl-icon {
+    color: var(--gray-500, $gray-500);
+  }
+
+  .counter:hover,
+  .counter:focus,
+  .gl-dropdown-custom-toggle:hover .counter,
+  .gl-dropdown-custom-toggle:focus .counter,
+  .gl-dropdown-custom-toggle[aria-expanded='true'] .counter {
+    background-color: $gray-50;
+    border-color: transparent;
+    mix-blend-mode: multiply;
+
+    .gl-icon {
+      color: var(--gray-700, $gray-700);
+    }
+  }
+
   .context-switcher-toggle {
     &[aria-expanded='true'] {
       background-color: $t-gray-a-08;
     }
   }
+
+  .btn-with-notification {
+    mix-blend-mode: unset !important; // Our tertiary buttons otherwise use another mix-blend mode, making border-color semi-transparent.
+    position: relative;
+
+    .notification {
+      background-color: $blue-500;
+      border: 2px solid $gray-10; // Same as the sidebar's background color.
+      position: absolute;
+      height: 9px;
+      width: 9px;
+      top: 5px;
+      left: 22px;
+      border-radius: 50%;
+      transition: background-color 100ms linear, border-color 100ms linear;
+    }
+
+    &:hover,
+    &:focus {
+      .notification {
+        border-color: $gray-50; // Same as the button's hover background color.
+      }
+    }
+  }
 }
 
 .with-performance-bar .super-sidebar {
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 0a475845fd3..9b5897b7df9 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -688,8 +688,7 @@ code {
 }
 
 .commit-sha,
-.ref-name,
-.pipeline-number {
+.ref-name {
   font-family: $monospace-font;
   font-size: 95%;
 }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 539e92eeca4..c616915073e 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -634,9 +634,10 @@ $status-icon-size: 22px;
 /*
 * Social Icons
 */
-$twitter: #1d9bf0;
-$skype: #0078d7;
+$discord: #5865f2;
 $linkedin: #2867b2;
+$skype: #0078d7;
+$twitter: #1d9bf0;
 
 /*
  *  Award emoji
@@ -787,12 +788,6 @@ $stat-graph-selection-fill: #333;
 $stat-graph-selection-stroke: #333;
 
 /*
-* Selects
-*/
-$select2-drop-shadow1: rgba(76, 86, 103, 0.247059);
-$select2-drop-shadow2: rgba(31, 37, 50, 0.317647);
-
-/*
 * Typography
 */
 $body-text-shadow: rgba(255, 255, 255, 0.01);
diff --git a/app/assets/stylesheets/highlight/common.scss b/app/assets/stylesheets/highlight/common.scss
index 96df8487c0e..085e25a0cdc 100644
--- a/app/assets/stylesheets/highlight/common.scss
+++ b/app/assets/stylesheets/highlight/common.scss
@@ -57,6 +57,15 @@
   }
 }
 
+@mixin line-number-hover-dark {
+  background-color: $purple-800;
+  border-color: $purple-300;
+
+  a {
+    color: $purple-50;
+  }
+}
+
 @mixin conflict-colors($theme) {
   .diff-line-num {
     &.conflict_marker_our,
@@ -75,6 +84,8 @@
   .line_holder {
     .line_content,
     .line-coverage {
+      position: relative;
+
       &.conflict_marker_our {
         background-color: map-get($conflict-colors, #{$theme}-header-head-neutral);
         border-color: map-get($conflict-colors, #{$theme}-header-head-neutral);
diff --git a/app/assets/stylesheets/highlight/themes/dark.scss b/app/assets/stylesheets/highlight/themes/dark.scss
index 3438a73eff6..02469cf5165 100644
--- a/app/assets/stylesheets/highlight/themes/dark.scss
+++ b/app/assets/stylesheets/highlight/themes/dark.scss
@@ -131,7 +131,7 @@ $dark-il: #de935f;
   @include hljs-override('title\\.class\\.inherited', $dark-no);
   @include hljs-override('variable\\.constant', $dark-no);
   @include hljs-override('title\\.function', $dark-nf);
-  
+
 
   // Line numbers
   .file-line-num {
@@ -174,6 +174,11 @@ $dark-il: #de935f;
     @include diff-expansion($gray-600, $gray-200, $gray-300, $white);
   }
 
+  .diff-grid-row.line_holder.diff-tr .diff-td.commented:not(.hll) {
+    --highlight-border-color: #{$blue-600};
+    background-color: $blue-900;
+  }
+
   // Diff line
   .line_holder {
     &.match .line_content,
@@ -188,15 +193,15 @@ $dark-il: #de935f;
       @include dark-diff-expansion-line;
     }
 
-    .diff-td.diff-line-num.hll:not(.empty-cell),
-    .diff-td.line-coverage.hll:not(.empty-cell),
-    .diff-td.line-codequality.hll:not(.empty-cell),
-    .diff-td.line_content.hll:not(.empty-cell),
-    td.diff-line-num.hll:not(.empty-cell),
-    td.line-coverage.hll:not(.empty-cell),
-    td.line_content.hll:not(.empty-cell) {
-      background-color: $dark-diff-not-empty-bg;
-      border-color: darken($dark-diff-not-empty-bg, 15%);
+    .diff-td.diff-line-num.hll,
+    .diff-td.line-coverage.hll,
+    .diff-td.line-codequality.hll,
+    .diff-td.line_content.hll,
+    td.diff-line-num.hll,
+    td.line-coverage.hll,
+    td.line_content.hll {
+      --highlight-border-color: #{$orange-500};
+      background-color: $orange-800;
     }
 
     .line-coverage {
@@ -239,14 +244,14 @@ $dark-il: #de935f;
     &:not(.match) .diff-grid-right:hover,
     &.code-search-line:hover {
       .diff-line-num:not(.empty-cell) {
-        @include line-number-hover;
+        @include line-number-hover-dark;
       }
     }
 
     .diff-line-num {
       &.is-over,
       &.hll:not(.empty-cell).is-over {
-        @include line-number-hover;
+        @include line-number-hover-dark;
       }
     }
 
diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss
index 75dd342393d..30d04b4002e 100644
--- a/app/assets/stylesheets/highlight/themes/monokai.scss
+++ b/app/assets/stylesheets/highlight/themes/monokai.scss
@@ -1,7 +1,7 @@
 /* https://github.com/richleland/pygments-css/blob/master/monokai.css */
 
 @import '../common';
-@import 'highlight.js/styles/base16/monokai.css';
+@import 'highlight.js/styles/base16/monokai';
 
 /*
 * Monokai Colors
@@ -148,6 +148,11 @@ $monokai-gh: #75715e;
     color: $monokai-line-num-color;
   }
 
+  .diff-grid-row.line_holder.diff-tr .diff-td.commented:not(.hll) {
+    --highlight-border-color: #{$blue-600};
+    background-color: $blue-900;
+  }
+
   // Code itself
   pre.code,
   .diff-line-num {
@@ -179,15 +184,15 @@ $monokai-gh: #75715e;
       @include dark-diff-expansion-line;
     }
 
-    .diff-td.diff-line-num.hll:not(.empty-cell),
-    .diff-td.line-coverage.hll:not(.empty-cell),
-    .diff-td.line-codequality.hll:not(.empty-cell),
-    .diff-td.line_content.hll:not(.empty-cell),
-    td.diff-line-num.hll:not(.empty-cell),
-    td.line-coverage.hll:not(.empty-cell),
-    td.line_content.hll:not(.empty-cell) {
-      background-color: $monokai-line-empty-bg;
-      border-color: $monokai-line-empty-border;
+    .diff-td.diff-line-num.hll,
+    .diff-td.line-coverage.hll,
+    .diff-td.line-codequality.hll,
+    .diff-td.line_content.hll,
+    td.diff-line-num.hll,
+    td.line-coverage.hll,
+    td.line_content.hll {
+      --highlight-border-color: #{$orange-500};
+      background-color: $orange-800;
     }
 
     .line-coverage {
@@ -230,14 +235,14 @@ $monokai-gh: #75715e;
     &:not(.match) .diff-grid-right:hover,
     &.code-search-line:hover {
       .diff-line-num:not(.empty-cell) {
-        @include line-number-hover;
+        @include line-number-hover-dark;
       }
     }
 
     .diff-line-num {
       &.is-over,
       &.hll:not(.empty-cell).is-over {
-        @include line-number-hover;
+        @include line-number-hover-dark;
       }
     }
 
diff --git a/app/assets/stylesheets/highlight/themes/none.scss b/app/assets/stylesheets/highlight/themes/none.scss
index fa1f7211b3e..8339d7eff80 100644
--- a/app/assets/stylesheets/highlight/themes/none.scss
+++ b/app/assets/stylesheets/highlight/themes/none.scss
@@ -55,7 +55,7 @@
 
   &,
   pre.code,
-  .line_holder .line_content {
+  .line_holder .line_content:not(.hll) {
     background-color: $white;
     color: $gl-text-color;
   }
@@ -84,8 +84,8 @@
       @include line-coverage-border-color($green-500, $orange-500);
     }
 
-    .line-coverage,
-    .line-codequality {
+    .line-coverage:not(.hll),
+    .line-codequality:not(.hll) {
       &.old,
       &.new,
       &.new-nomappinginraw,
@@ -119,11 +119,6 @@
       &.hll:not(.empty-cell).is-over {
         @include line-number-hover;
       }
-
-      &.hll:not(.empty-cell) {
-        background-color: $white;
-        border-color: $white-normal;
-      }
     }
 
     &:not(.diff-expanded) + .diff-expanded,
@@ -158,7 +153,7 @@
         }
       }
 
-      &.new, &.new-nomappinginraw {
+      &.new:not(.hll), &.new-nomappinginraw:not(.hll) {
         background-color: $white-normal;
 
         &::before {
@@ -174,18 +169,9 @@
       &.match {
         @include match-line;
       }
-
-      &.hll:not(.empty-cell) {
-        background-color: $white-normal;
-      }
     }
   }
 
-  // highlight line via anchor
-  pre .hll {
-    background-color: $white-normal;
-  }
-
   // Search result highlight
   span.highlight_word {
     background-color: $white-normal;
@@ -197,7 +183,10 @@
     text-decoration: underline;
   }
 
-  .hll { background-color: $white; }
+  .hll {
+    --highlight-border-color: #{$orange-200};
+    background-color: $orange-50;
+  }
 
   .gd {
     color: $gl-text-color;
diff --git a/app/assets/stylesheets/highlight/themes/solarized-dark.scss b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
index c0b2fb90aa0..075510e6e5f 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
@@ -1,7 +1,7 @@
 /* https://gist.github.com/qguv/7936275 */
 
 @import '../common';
-@import 'highlight.js/styles/base16/solarized-dark.css';
+@import 'highlight.js/styles/base16/solarized-dark';
 
 /*
 * Solarized dark colors
@@ -151,6 +151,11 @@ $solarized-dark-il: #2aa198;
     color: $solarized-dark-line-color;
   }
 
+  .diff-grid-row.line_holder.diff-tr .diff-td.commented:not(.hll) {
+    --highlight-border-color: #{$blue-600};
+    background-color: $blue-900;
+  }
+
   // Code itself
   pre.code,
   .diff-line-num {
@@ -182,15 +187,15 @@ $solarized-dark-il: #2aa198;
       @include dark-diff-expansion-line;
     }
 
-    .diff-td.diff-line-num.hll:not(.empty-cell),
-    .diff-td.line-coverage.hll:not(.empty-cell),
-    .diff-td.line-codequality.hll:not(.empty-cell),
-    .diff-td.line_content.hll:not(.empty-cell),
-    td.diff-line-num.hll:not(.empty-cell),
-    td.line-coverage.hll:not(.empty-cell),
-    td.line_content.hll:not(.empty-cell) {
-      background-color: $solarized-dark-hll-bg;
-      border-color: darken($solarized-dark-hll-bg, 15%);
+    .diff-td.diff-line-num.hll,
+    .diff-td.line-coverage.hll,
+    .diff-td.line-codequality.hll,
+    .diff-td.line_content.hll,
+    td.diff-line-num.hll,
+    td.line-coverage.hll,
+    td.line_content.hll {
+      --highlight-border-color: #{$orange-500};
+      background-color: $orange-800;
     }
 
     .line-coverage {
@@ -201,7 +206,7 @@ $solarized-dark-il: #2aa198;
     &:not(.match) .diff-grid-right:hover,
     &.code-search-line:hover {
       .diff-line-num:not(.empty-cell) {
-        @include line-number-hover;
+        @include line-number-hover-dark;
       }
     }
 
@@ -240,7 +245,7 @@ $solarized-dark-il: #2aa198;
     .diff-line-num {
       &.is-over,
       &.hll:not(.empty-cell).is-over {
-        @include line-number-hover;
+        @include line-number-hover-dark;
       }
     }
 
diff --git a/app/assets/stylesheets/highlight/themes/solarized-light.scss b/app/assets/stylesheets/highlight/themes/solarized-light.scss
index 921b36dd610..4e244ed7420 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-light.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-light.scss
@@ -1,7 +1,7 @@
 /* https://gist.github.com/qguv/7936275 */
 
 @import '../common';
-@import 'highlight.js/styles/base16/solarized-light.css';
+@import 'highlight.js/styles/base16/solarized-light';
 
 /*
 * Solarized light syntax colors
@@ -116,7 +116,7 @@ $solarized-light-il: #2aa198;
   @include hljs-override('variable\\.constant', $solarized-light-no);
   @include hljs-override('variable\\.language', $solarized-light-nb);
   @include hljs-override('params', $solarized-light-nb);
-  
+
   // Line numbers
   .file-line-num {
     @include line-link($black, 'link');
@@ -174,13 +174,13 @@ $solarized-light-il: #2aa198;
       background-color: $solarized-light-matchline-bg;
     }
 
-    .diff-td.diff-line-num.hll:not(.empty-cell),
-    .diff-td.line-coverage.hll:not(.empty-cell),
-    .diff-td.line-codequality.hll:not(.empty-cell),
-    .diff-td.line_content.hll:not(.empty-cell),
-    td.diff-line-num.hll:not(.empty-cell),
-    td.line-coverage.hll:not(.empty-cell),
-    td.line_content.hll:not(.empty-cell) {
+    .diff-td.diff-line-num.hll,
+    .diff-td.line-coverage.hll,
+    .diff-td.line-codequality.hll,
+    .diff-td.line_content.hll,
+    td.diff-line-num.hll,
+    td.line-coverage.hll,
+    td.line_content.hll {
       background-color: $solarized-light-hll-bg;
       border-color: darken($solarized-light-hll-bg, 15%);
     }
diff --git a/app/assets/stylesheets/highlight/themes/white.scss b/app/assets/stylesheets/highlight/themes/white.scss
index f6cce25671f..0a283254a4c 100644
--- a/app/assets/stylesheets/highlight/themes/white.scss
+++ b/app/assets/stylesheets/highlight/themes/white.scss
@@ -19,4 +19,4 @@
 :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 816aa88cfde..ccb5d96e966 100644
--- a/app/assets/stylesheets/highlight/white_base.scss
+++ b/app/assets/stylesheets/highlight/white_base.scss
@@ -125,13 +125,13 @@ $white-gc-bg: #eaf2f5;
 
 .diff-line-num,
 .diff-line-num a {
-  color: $black-transparent;
+  color: $gray-400;
 }
 
 // Code itself
 pre.code,
 .diff-line-num {
-  border-color: $white-normal;
+  border-color: rgba(0, 0, 0, 0.1);
 }
 
 &,
@@ -173,7 +173,7 @@ pre.code,
       background-color: $line-number-old;
 
       a {
-        color: scale-color($line-number-old, $red: -30%, $green: -30%, $blue: -30%);
+        color: scale-color($gray-300, $red: -30%, $green: -30%, $blue: -30%);
       }
     }
 
@@ -182,7 +182,7 @@ pre.code,
       background-color: $line-number-new;
 
       a {
-        color: scale-color($line-number-new, $red: -30%, $green: -30%, $blue: -30%);
+        color: scale-color($gray-200, $red: -30%, $green: -30%, $blue: -30%);
       }
     }
 
@@ -191,9 +191,9 @@ pre.code,
       @include line-number-hover;
     }
 
-    &.hll:not(.empty-cell) {
-      background-color: $line-number-select;
-      border-color: $line-select-yellow-dark;
+    &.hll {
+      --highlight-border-color: #{$orange-200};
+      background-color: $orange-50;
     }
   }
 
@@ -246,8 +246,9 @@ pre.code,
       @include match-line;
     }
 
-    &.hll:not(.empty-cell) {
-      background-color: $line-select-yellow;
+    &.hll {
+      --highlight-border-color: #{$orange-200};
+      background-color: $orange-50;
     }
   }
 
@@ -267,8 +268,9 @@ pre.code,
       background-color: $line-added;
     }
 
-    &.hll:not(.empty-cell) {
-      background-color: $line-select-yellow;
+    &.hll {
+      --highlight-border-color: #{$orange-200};
+      background-color: $orange-50;
     }
   }
 }
diff --git a/app/assets/stylesheets/lazy_bundles/select2.scss b/app/assets/stylesheets/lazy_bundles/select2.scss
deleted file mode 100644
index f2c372020ef..00000000000
--- a/app/assets/stylesheets/lazy_bundles/select2.scss
+++ /dev/null
@@ -1,654 +0,0 @@
-/*
-Version: 3.5.2 Timestamp: Sat Nov  1 14:43:36 EDT 2014
-Updated 2020-10-05 by TimZ
-*/
-.select2-container {
-  margin: 0;
-  position: relative;
-  display: inline-block;
-}
-
-.select2-container,
-.select2-drop,
-.select2-search,
-.select2-search input {
-  box-sizing: border-box;
-}
-
-.select2-container .select2-choice {
-  display: block;
-  height: 26px;
-  padding: 0 0 0 8px;
-  overflow: hidden;
-  position: relative;
-
-  border: 1px solid #aaa;
-  white-space: nowrap;
-  line-height: 26px;
-  color: #444;
-  text-decoration: none;
-
-  border-radius: 4px;
-
-  background-clip: padding-box;
-
-  user-select: none;
-
-  background-color: #fff;
-  background-image: linear-gradient(to top, #eee 0%, #fff 50%);
-}
-
-html[dir='rtl'] .select2-container .select2-choice {
-  padding: 0 8px 0 0;
-}
-
-.select2-container.select2-drop-above .select2-choice {
-  border-bottom-color: #aaa;
-
-  border-radius: 0 0 4px 4px;
-
-  background-image: linear-gradient(to bottom, #eee 0%, #fff 90%);
-}
-
-.select2-container.select2-allowclear .select2-choice .select2-chosen {
-  margin-right: 42px;
-}
-
-.select2-container .select2-choice > .select2-chosen {
-  margin-right: 26px;
-  display: block;
-  overflow: hidden;
-
-  white-space: nowrap;
-
-  text-overflow: ellipsis;
-  float: none;
-  width: auto;
-}
-
-html[dir='rtl'] .select2-container .select2-choice > .select2-chosen {
-  margin-left: 26px;
-  margin-right: 0;
-}
-
-.select2-container .select2-choice abbr {
-  display: none;
-  width: 12px;
-  height: 12px;
-  position: absolute;
-  right: 24px;
-  top: 8px;
-
-  font-size: 1px;
-  text-decoration: none;
-
-  border: 0;
-  /* stylelint-disable-next-line function-url-quotes */
-  background: url(image-path('select2.png')) right top no-repeat;
-  cursor: pointer;
-  outline: 0;
-}
-
-.select2-container.select2-allowclear .select2-choice abbr {
-  display: inline-block;
-}
-
-.select2-container .select2-choice abbr:hover {
-  background-position: right -11px;
-  cursor: pointer;
-}
-
-.select2-drop-mask {
-  border: 0;
-  margin: 0;
-  padding: 0;
-  position: fixed;
-  left: 0;
-  top: 0;
-  min-height: 100%;
-  min-width: 100%;
-  height: auto;
-  width: auto;
-  opacity: 0;
-  z-index: 9998;
-  /* styles required for IE to work */
-  background-color: #fff;
-  filter: alpha(opacity=0);
-}
-
-.select2-drop {
-  width: 100%;
-  margin-top: -1px;
-  position: absolute;
-  z-index: 9999;
-  top: 100%;
-
-  background: #fff;
-  color: #000;
-  border: 1px solid #aaa;
-  border-top: 0;
-
-  border-radius: 0 0 4px 4px;
-
-  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
-}
-
-.select2-drop.select2-drop-above {
-  margin-top: 1px;
-  border-top: 1px solid #aaa;
-  border-bottom: 0;
-
-  border-radius: 4px 4px 0 0;
-
-  box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.15);
-}
-
-.select2-drop-active {
-  border: 1px solid #5897fb;
-  border-top: 0;
-}
-
-.select2-drop.select2-drop-above.select2-drop-active {
-  border-top: 1px solid #5897fb;
-}
-
-.select2-drop-auto-width {
-  border-top: 1px solid #aaa;
-  width: auto;
-}
-
-.select2-drop-auto-width .select2-search {
-  padding-top: 4px;
-}
-
-.select2-container .select2-choice .select2-arrow {
-  display: inline-block;
-  width: 18px;
-  height: 100%;
-  position: absolute;
-  right: 0;
-  top: 0;
-
-  border-left: 1px solid #aaa;
-  border-radius: 0 4px 4px 0;
-
-  background-clip: padding-box;
-
-  background: #ccc;
-  background-image: linear-gradient(to top, #ccc 0%, #eee 60%);
-}
-
-html[dir='rtl'] .select2-container .select2-choice .select2-arrow {
-  left: 0;
-  right: auto;
-
-  border-left: 0;
-  border-right: 1px solid #aaa;
-  border-radius: 4px 0 0 4px;
-}
-
-.select2-container .select2-choice .select2-arrow b {
-  display: block;
-  width: 100%;
-  height: 100%;
-  /* stylelint-disable-next-line function-url-quotes */
-  background: url(image-path("select2.png")) no-repeat 0 1px;
-}
-
-html[dir='rtl'] .select2-container .select2-choice .select2-arrow b {
-  background-position: 2px 1px;
-}
-
-.select2-search {
-  display: inline-block;
-  width: 100%;
-  min-height: 26px;
-  margin: 0;
-  padding-left: 4px;
-  padding-right: 4px;
-
-  position: relative;
-  z-index: 10000;
-
-  white-space: nowrap;
-}
-
-.select2-search input {
-  width: 100%;
-  height: auto !important;
-  min-height: 26px;
-  padding: 4px 20px 4px 5px;
-  margin: 0;
-
-  outline: 0;
-  font-family: sans-serif;
-  font-size: 1em;
-
-  border: 1px solid #aaa;
-  border-radius: 0;
-
-  box-shadow: none;
-  /* stylelint-disable-next-line function-url-quotes */
-  background: url(image-path('select2.png')) no-repeat 100% -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
-}
-
-html[dir='rtl'] .select2-search input {
-  padding: 4px 5px 4px 20px;
-  /* stylelint-disable-next-line function-url-quotes */
-  background: url(image-path('select2.png')) no-repeat -37px -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
-}
-
-.select2-drop.select2-drop-above .select2-search input {
-  margin-top: 4px;
-}
-
-.select2-search input.select2-active {
-  /* stylelint-disable-next-line function-url-quotes */
-  background: url(image-path('select2-spinner.gif')) no-repeat 100%, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
-}
-
-.select2-container-active .select2-choice,
-.select2-container-active .select2-choices {
-  border: 1px solid #5897fb;
-  outline: none;
-
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-}
-
-.select2-dropdown-open .select2-choice {
-  border-bottom-color: transparent;
-  box-shadow: 0 1px 0 #fff inset;
-
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-
-  background-color: #eee;
-  background-image: linear-gradient(to top, #fff 0%, #eee 50%);
-}
-
-.select2-dropdown-open.select2-drop-above .select2-choice,
-.select2-dropdown-open.select2-drop-above .select2-choices {
-  border: 1px solid #5897fb;
-  border-top-color: transparent;
-
-  background-image: linear-gradient(to bottom, #fff 0%, #eee 50%);
-}
-
-.select2-dropdown-open .select2-choice .select2-arrow {
-  background: transparent;
-  border-left: 0;
-  filter: none;
-}
-
-html[dir='rtl'] .select2-dropdown-open .select2-choice .select2-arrow {
-  border-right: 0;
-}
-
-.select2-dropdown-open .select2-choice .select2-arrow b {
-  background-position: -18px 1px;
-}
-
-html[dir='rtl'] .select2-dropdown-open .select2-choice .select2-arrow b {
-  background-position: -16px 1px;
-}
-
-.select2-hidden-accessible {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-/* results */
-.select2-results {
-  max-height: 200px;
-  padding: 0 0 0 4px;
-  margin: 4px 4px 4px 0;
-  position: relative;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-html[dir='rtl'] .select2-results {
-  padding: 0 4px 0 0;
-  margin: 4px 0 4px 4px;
-}
-
-.select2-results ul.select2-result-sub {
-  margin: 0;
-  padding-left: 0;
-}
-
-.select2-results li {
-  list-style: none;
-  display: list-item;
-  background-image: none;
-}
-
-.select2-results li.select2-result-with-children > .select2-result-label {
-  font-weight: bold;
-}
-
-.select2-results .select2-result-label {
-  padding: 3px 7px 4px;
-  margin: 0;
-  cursor: pointer;
-
-  min-height: 1em;
-
-  user-select: none;
-}
-
-.select2-results-dept-1 .select2-result-label { padding-left: 20px; }
-.select2-results-dept-2 .select2-result-label { padding-left: 40px; }
-.select2-results-dept-3 .select2-result-label { padding-left: 60px; }
-.select2-results-dept-4 .select2-result-label { padding-left: 80px; }
-.select2-results-dept-5 .select2-result-label { padding-left: 100px; }
-.select2-results-dept-6 .select2-result-label { padding-left: 110px; }
-.select2-results-dept-7 .select2-result-label { padding-left: 120px; }
-
-.select2-results .select2-highlighted {
-  background: #3875d7;
-  color: #fff;
-}
-
-.select2-results li em {
-  background: #feffde;
-  font-style: normal;
-}
-
-.select2-results .select2-highlighted em {
-  background: transparent;
-}
-
-.select2-results .select2-highlighted ul {
-  background: #fff;
-  color: #000;
-}
-
-.select2-results .select2-no-results,
-.select2-results .select2-searching,
-.select2-results .select2-ajax-error,
-.select2-results .select2-selection-limit {
-  background: #f4f4f4;
-  display: list-item;
-  padding-left: 5px;
-}
-
-/*
-disabled look for disabled choices in the results dropdown
-*/
-.select2-results .select2-disabled.select2-highlighted {
-  color: #666;
-  background: #f4f4f4;
-  display: list-item;
-  cursor: default;
-}
-
-.select2-results .select2-disabled {
-  background: #f4f4f4;
-  display: list-item;
-  cursor: default;
-}
-
-.select2-results .select2-selected {
-  display: none;
-}
-
-.select2-more-results.select2-active {
-  /* stylelint-disable-next-line function-url-quotes */
-  background: #f4f4f4 url(image-path('select2-spinner.gif')) no-repeat 100%;
-}
-
-.select2-results .select2-ajax-error {
-  background: rgba(255, 50, 50, 0.2);
-}
-
-.select2-more-results {
-  background: #f4f4f4;
-  display: list-item;
-}
-
-/* disabled styles */
-
-.select2-container.select2-container-disabled .select2-choice {
-  background-color: #f4f4f4;
-  background-image: none;
-  border: 1px solid #ddd;
-  cursor: default;
-}
-
-.select2-container.select2-container-disabled .select2-choice .select2-arrow {
-  background-color: #f4f4f4;
-  background-image: none;
-  border-left: 0;
-}
-
-.select2-container.select2-container-disabled .select2-choice abbr {
-  display: none;
-}
-
-
-/* multiselect */
-
-.select2-container-multi .select2-choices {
-  height: auto !important;
-  height: 1%;
-  margin: 0;
-  padding: 0 5px 0 0;
-  position: relative;
-
-  border: 1px solid #aaa;
-  cursor: text;
-  overflow: hidden;
-
-  background-color: #fff;
-  background-image: linear-gradient(to bottom, #eee 1%, #fff 15%);
-}
-
-html[dir='rtl'] .select2-container-multi .select2-choices {
-  padding: 0 0 0 5px;
-}
-
-.select2-locked {
-  padding: 3px 5px !important;
-}
-
-.select2-container-multi .select2-choices {
-  min-height: 26px;
-}
-
-.select2-container-multi.select2-container-active .select2-choices {
-  border: 1px solid #5897fb;
-  outline: none;
-
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-}
-
-.select2-container-multi .select2-choices li {
-  float: left;
-  list-style: none;
-}
-
-html[dir='rtl'] .select2-container-multi .select2-choices li {
-  float: right;
-}
-
-.select2-container-multi .select2-choices .select2-search-field {
-  margin: 0;
-  padding: 0;
-  white-space: nowrap;
-}
-
-.select2-container-multi .select2-choices .select2-search-field input {
-  padding: 5px;
-  margin: 1px 0;
-
-  font-family: sans-serif;
-  font-size: 100%;
-  color: #666;
-  outline: 0;
-  border: 0;
-
-  box-shadow: none;
-  background: transparent !important;
-}
-
-.select2-container-multi .select2-choices .select2-search-field input.select2-active {
-  /* stylelint-disable-next-line function-url-quotes */
-  background: #fff url(image-path('select2-spinner.gif')) no-repeat 100% !important;
-}
-
-.select2-default {
-  color: #999 !important;
-}
-
-.select2-container-multi .select2-choices .select2-search-choice {
-  padding: 3px 5px 3px 18px;
-  margin: 3px 0 3px 5px;
-  position: relative;
-
-  line-height: 13px;
-  color: #333;
-  cursor: default;
-  border: 1px solid #aaa;
-
-  border-radius: 3px;
-
-  box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
-
-  background-clip: padding-box;
-
-  user-select: none;
-
-  background-color: #e4e4e4;
-  background-image: linear-gradient(to bottom, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
-}
-
-html[dir='rtl'] .select2-container-multi .select2-choices .select2-search-choice {
-  margin: 3px 5px 3px 0;
-  padding: 3px 18px 3px 5px;
-}
-
-.select2-container-multi .select2-choices .select2-search-choice .select2-chosen {
-  cursor: default;
-}
-
-.select2-container-multi .select2-choices .select2-search-choice-focus {
-  background: #d4d4d4;
-}
-
-.select2-search-choice-close {
-  display: block;
-  width: 12px;
-  height: 13px;
-  position: absolute;
-  right: 3px;
-  top: 4px;
-
-  font-size: 1px;
-  outline: none;
-  /* stylelint-disable-next-line function-url-quotes */
-  background: url(image-path('select2.png')) right top no-repeat;
-}
-
-html[dir='rtl'] .select2-search-choice-close {
-  right: auto;
-  left: 3px;
-}
-
-.select2-container-multi .select2-search-choice-close {
-  left: 3px;
-}
-
-html[dir='rtl'] .select2-container-multi .select2-search-choice-close {
-  left: auto;
-  right: 2px;
-}
-
-.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
-  background-position: right -11px;
-}
-
-.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
-  background-position: right -11px;
-}
-
-/* disabled styles */
-.select2-container-multi.select2-container-disabled .select2-choices {
-  background-color: #f4f4f4;
-  background-image: none;
-  border: 1px solid #ddd;
-  cursor: default;
-}
-
-.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
-  padding: 3px 5px;
-  border: 1px solid #ddd;
-  background-image: none;
-  background-color: #f4f4f4;
-}
-
-.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close {
-  display: none;
-  background: none;
-}
-/* end multiselect */
-
-
-.select2-result-selectable .select2-match,
-.select2-result-unselectable .select2-match {
-  text-decoration: underline;
-}
-
-.select2-offscreen,
-.select2-offscreen:focus {
-  clip: rect(0 0 0 0) !important;
-  width: 1px !important;
-  height: 1px !important;
-  border: 0 !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  overflow: hidden !important;
-  position: absolute !important;
-  outline: 0 !important;
-  left: 0 !important;
-  top: 0 !important;
-}
-
-.select2-display-none {
-  display: none;
-}
-
-.select2-measure-scrollbar {
-  position: absolute;
-  top: -10000px;
-  left: -10000px;
-  width: 100px;
-  height: 100px;
-  overflow: scroll;
-}
-
-@media only screen and (min-resolution: 120dpi) {
-  .select2-search input,
-  .select2-search-choice-close,
-  .select2-container .select2-choice abbr,
-  .select2-container .select2-choice .select2-arrow b {
-    /* stylelint-disable-next-line function-url-quotes */
-    background-image: url(image-path("select2x2.png")) !important;
-    background-repeat: no-repeat !important;
-    background-size: 60px 40px !important;
-  }
-
-  .select2-search input {
-    background-position: 100% -21px !important;
-  }
-}
-
-/* End of select2.css */
-
-@import './select2_overrides';
diff --git a/app/assets/stylesheets/lazy_bundles/select2_overrides.scss b/app/assets/stylesheets/lazy_bundles/select2_overrides.scss
deleted file mode 100644
index e3cec187fab..00000000000
--- a/app/assets/stylesheets/lazy_bundles/select2_overrides.scss
+++ /dev/null
@@ -1,341 +0,0 @@
-@import 'page_bundles/mixins_and_variables_and_functions';
-/** Select2 selectbox style override **/
-.select2-container {
-  width: 100% !important;
-
-  &.input-md,
-  &.input-lg {
-    display: block;
-  }
-}
-
-.select2-container,
-.select2-container.select2-drop-above {
-  .select2-choice {
-    background: var(--white, $white);
-    color: var(--gl-text-color, $gl-text-color);
-    border-color: var(--gray-400, $gray-400);
-    height: 34px;
-    padding: $gl-vert-padding $gl-input-padding;
-    font-size: $gl-font-size;
-    line-height: 1.42857143;
-    border-radius: $gl-border-radius-base;
-
-    .select2-arrow {
-      padding-top: 12px;
-      padding-right: 20px;
-      /* stylelint-disable-next-line function-url-quotes */
-      background: url(asset_path('chevron-down.png')) no-repeat 2px 8px;
-
-      .gl-dark & {
-        filter: invert(0.9);
-      }
-
-      b {
-        display: none;
-      }
-    }
-
-    .select2-chosen {
-      margin-right: 15px;
-    }
-
-    &:hover {
-      border-color: var(--gray-400, $gray-400);
-      color: var(--gl-text-color, $gl-text-color);
-    }
-  }
-
-  // Essentially we’re doing @include form-control-focus here (from
-  // bootstrap/scss/mixins/_forms.scss), except that the bootstrap mixin adds a
-  // `&:focus` selector and we’re never actually focusing the .select2-choice
-  // link nor the .select2-container, the Select2 library focuses an off-screen
-  // .select2-focusser element instead.
-  &.select2-container-active:not(.select2-dropdown-open) {
-    .select2-choice {
-      color: var(--gray-700, $gray-700);
-      background-color: var(--white, $white);
-      border-color: $input-focus-border-color;
-      outline: 0;
-    }
-
-    // Reusable focus “glow” box-shadow
-    @mixin form-control-focus-glow {
-      @if $enable-shadows {
-        box-shadow: $input-box-shadow, $input-focus-box-shadow;
-      } @else {
-        box-shadow: $input-focus-box-shadow;
-      }
-    }
-
-    // Apply the focus “glow” shadow to the .select2-container if it also has
-    // the .block-truncated class as that applies an overflow: hidden, thereby
-    // hiding the glow of the nested .select2-choice element.
-    &.block-truncated {
-      @include form-control-focus-glow;
-    }
-
-    // Apply the glow directly to the .select2-choice link if we’re not
-    // block-truncating the container.
-    &:not(.block-truncated) .select2-choice {
-      @include form-control-focus-glow;
-    }
-  }
-
-  &.is-invalid {
-    ~ .invalid-feedback {
-      display: block;
-    }
-
-    .select2-choices,
-    .select2-choice {
-      border-color: var(--red-500, $red-500);
-    }
-  }
-}
-
-.select2-drop,
-.select2-drop.select2-drop-above {
-  background: var(--white, $white);
-  box-shadow: 0 2px 4px $dropdown-shadow-color;
-  border-radius: $gl-border-radius-base;
-  border: 1px solid var(--gray-400, $gray-400);
-  min-width: 175px;
-  color: var(--gl-text-color, $gl-text-color);
-  z-index: 999;
-
-  .modal-open & {
-    z-index: $zindex-modal + 200;
-  }
-}
-
-.select2-drop-mask {
-  z-index: 998;
-
-  .modal-open & {
-    z-index: $zindex-modal + 100;
-  }
-}
-
-.select2-drop.select2-drop-above.select2-drop-active {
-  border-top: 1px solid var(--gray-400, $gray-400);
-  margin-top: -6px;
-}
-
-.select2-container-active {
-  .select2-choice,
-  .select2-choices {
-    box-shadow: none;
-  }
-}
-
-.select2-dropdown-open,
-.select2-dropdown-open.select2-drop-above {
-  .select2-choice {
-    border-color: var(--gray-400, $gray-400);
-    outline: 0;
-  }
-}
-
-.select2-container-multi {
-  .select2-choices {
-    border-radius: $border-radius-default;
-    border-color: var(--gray-400, $gray-400);
-    background: none;
-
-    .select2-search-field input {
-      padding: 5px $gl-input-padding;
-      height: auto;
-      font-family: inherit;
-      font-size: inherit;
-    }
-
-    .select2-search-choice {
-      margin: 5px 0 0 8px;
-      box-shadow: none;
-      border-color: var(--gray-400, $gray-400);
-      color: var(--gl-text-color, $gl-text-color);
-      line-height: 15px;
-      background-color: var(--gray-50, $gray-50);
-      background-image: none;
-      padding: 3px 18px 3px 5px;
-
-      .select2-search-choice-close {
-        top: 5px;
-        left: initial;
-        right: 3px;
-      }
-
-      &.select2-search-choice-focus {
-        border-color: var(--gray-400, $gray-400);
-      }
-    }
-  }
-}
-
-.select2-drop-active {
-  margin-top: $dropdown-vertical-offset;
-  font-size: 14px;
-
-  .select2-results {
-    max-height: 350px;
-  }
-}
-
-.select2-search {
-  padding: $grid-size;
-
-  .select2-drop-auto-width & {
-    padding: $grid-size;
-  }
-
-  input {
-    padding: $grid-size;
-    background: transparent image-url('select2.png');
-    color: var(--gl-text-color, $gl-text-color);
-    background-clip: content-box;
-    background-origin: content-box;
-    background-repeat: no-repeat;
-    background-position: right 0 bottom 0 !important;
-    border: 1px solid var(--gray-400, $gray-400);
-    border-radius: $border-radius-default;
-    line-height: 16px;
-    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-
-    &:focus {
-      border-color: var(--blue-300, $blue-300);
-    }
-
-    &.select2-active {
-      background-color: var(--white, $white);
-      background-image: image-url('select2-spinner.gif') !important;
-      background-origin: content-box;
-      background-repeat: no-repeat;
-      background-position: right 6px center !important;
-      background-size: 16px 16px !important;
-    }
-  }
-
-  + .select2-results {
-    padding-top: 0;
-  }
-}
-
-.select2-results {
-  margin: 0;
-  padding: #{$gl-padding / 2} 0;
-
-  .select2-no-results,
-  .select2-searching,
-  .select2-ajax-error,
-  .select2-selection-limit {
-    background: transparent;
-    padding: #{$gl-padding / 2} $gl-padding;
-  }
-
-  .select2-result-label,
-  .select2-more-results {
-    padding: #{$gl-padding / 2} $gl-padding;
-  }
-
-  .select2-highlighted {
-    background: transparent;
-    color: var(--gl-text-color, $gl-text-color);
-
-    .select2-result-label {
-      background: var(--gray-50, $gray-50);
-    }
-  }
-
-  .select2-result {
-    padding: 0 1px;
-  }
-
-  li.select2-result-with-children > .select2-result-label {
-    font-weight: $gl-font-weight-bold;
-    color: var(--gl-text-color, $gl-text-color);
-  }
-}
-
-.select2-highlighted {
-  .group-result {
-    .group-path {
-      color: var(--gray-700, $gray-700);
-    }
-  }
-}
-
-.select2-result-selectable,
-.select2-result-unselectable {
-  .select2-match {
-    font-weight: $gl-font-weight-bold;
-    text-decoration: none;
-  }
-}
-
-.input-group {
-  .select2-container {
-    display: table-cell;
-    max-width: 180px;
-  }
-}
-
-.file-editor {
-  .select2 {
-    float: right;
-  }
-}
-
-.import-namespace-select {
-  > .select2-choice {
-    border-radius: $border-radius-default 0 0 $border-radius-default;
-    position: relative;
-    left: 1px;
-  }
-}
-
-.issue-form {
-  .select2-container {
-    width: 250px !important;
-  }
-}
-
-.new_project,
-.edit-project,
-.import-project {
-  .input-group {
-    .select2-container {
-      display: unset;
-      max-width: unset;
-      flex-grow: 1;
-    }
-  }
-
-  .input-group-prepend,
-  .input-group-append {
-    + .select2 a {
-      border-radius: 0 $gl-border-radius-base $gl-border-radius-base 0;
-    }
-  }
-}
-
-.project-path {
-  .select2-choice {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-}
-
-.right-sidebar {
-  .block {
-    .select2-container span {
-      margin-top: 0;
-    }
-  }
-}
-
-.block-truncated {
-  > div:not(.block):not(.select2-display-none) {
-    display: inline;
-  }
-}
diff --git a/app/assets/stylesheets/page_bundles/admin/elasticsearch_form.scss b/app/assets/stylesheets/page_bundles/admin/elasticsearch_form.scss
new file mode 100644
index 00000000000..b4e0047ad6d
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/admin/elasticsearch_form.scss
@@ -0,0 +1,5 @@
+@import '../mixins_and_variables_and_functions';
+
+.index-entities-list {
+  height: calc(#{$gl-spacing-scale-8} * 5.75);
+}
diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss
index bdbcf7ab58c..99e7f7ae0a4 100644
--- a/app/assets/stylesheets/page_bundles/boards.scss
+++ b/app/assets/stylesheets/page_bundles/boards.scss
@@ -103,13 +103,9 @@
   }
 }
 
-.board-card-title {
-  width: 95%;
-
-  a {
-    @include media-breakpoint-down(md) {
-      font-size: $gl-font-size-sm;
-    }
+.board-card-title a {
+  @include media-breakpoint-down(md) {
+    font-size: $gl-font-size-sm;
   }
 }
 
diff --git a/app/assets/stylesheets/page_bundles/ci_status.scss b/app/assets/stylesheets/page_bundles/ci_status.scss
index 7adbf10b83a..17886ab954a 100644
--- a/app/assets/stylesheets/page_bundles/ci_status.scss
+++ b/app/assets/stylesheets/page_bundles/ci_status.scss
@@ -27,7 +27,6 @@
   }
 
   &.ci-canceled,
-  &.ci-skipped,
   &.ci-disabled,
   &.ci-scheduled,
   &.ci-manual {
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index c3688f4a138..2002b4d4dff 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -906,8 +906,7 @@ $ide-commit-header-height: 48px;
     padding-bottom: 0;
   }
 
-  .ide-right-sidebar-terminal,
-  .ide-right-sidebar-clientside {
+  .ide-right-sidebar-terminal {
     padding: 0;
   }
 }
@@ -1083,43 +1082,6 @@ $ide-commit-header-height: 48px;
   }
 }
 
-.ide-preview-header {
-  padding: 0 $grid-size;
-  border-bottom: 1px solid var(--ide-border-color-alt, $white-dark);
-  background-color: var(--ide-highlight-background, $gray-light);
-  min-height: 44px;
-}
-
-.ide-navigator-btn {
-  height: 24px;
-  min-width: 24px;
-  max-width: 24px;
-  padding: 0;
-  margin: 0 ($grid-size / 2);
-  color: var(--ide-text-color-secondary, $gray-600);
-
-  &:first-child {
-    margin-left: 0;
-  }
-}
-
-.ide-navigator-location {
-  padding-top: ($grid-size / 2);
-  padding-bottom: ($grid-size / 2);
-
-  &:focus {
-    outline: 0;
-    box-shadow: none;
-    border-color: var(--ide-border-color, $gray-100);
-  }
-}
-
-.ide-preview-loading-icon {
-  right: $grid-size;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
 .ide-file-templates {
   padding: $grid-size $gl-padding;
   background-color: var(--ide-background, $gray-light);
diff --git a/app/assets/stylesheets/page_bundles/incidents.scss b/app/assets/stylesheets/page_bundles/incidents.scss
index e807c4c0bbb..493add1ea0f 100644
--- a/app/assets/stylesheets/page_bundles/incidents.scss
+++ b/app/assets/stylesheets/page_bundles/incidents.scss
@@ -7,7 +7,13 @@
 }
 
 .timeline-event {
-  grid-template-columns: #{$gl-spacing-scale-9} minmax(0, 1fr) #{$gl-spacing-scale-7};
+  grid-template-columns: auto minmax(0, 1fr) #{$gl-spacing-scale-7};
+}
+
+.create-timeline-event,
+.edit-timeline-event,
+.timeline-event {
+  gap: $gl-spacing-scale-5;
 }
 
 /**
@@ -51,8 +57,10 @@
 }
 
 .timeline-entry:not(:last-child) {
+  @include gl-pb-0;
+
   .timeline-event-border {
-    @include gl-pb-5;
+    @include gl-pb-3;
     @include gl-border-gray-50;
     @include gl-border-1;
     @include gl-border-b-solid;
@@ -68,3 +76,13 @@
     }
   }
 }
+
+.timeline-event-note .md p {
+  @include gl-text-gray-700;
+}
+
+.timeline-event-note-date {
+  @media (max-width: $breakpoint-md) {
+    width: 100%;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/issues_show.scss b/app/assets/stylesheets/page_bundles/issues_show.scss
index 26d694f7421..23b210e3a8e 100644
--- a/app/assets/stylesheets/page_bundles/issues_show.scss
+++ b/app/assets/stylesheets/page_bundles/issues_show.scss
@@ -12,6 +12,21 @@
       padding-inline-end: 1rem;
       width: 2rem;
     }
+
+    .task-list-item-actions-wrapper {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: -2rem;
+    }
+
+    .task-list-item-actions-wrapper.show .task-list-item-actions,
+    .task-list-item-actions:is(:focus, :hover) {
+      opacity: 1;
+    }
+  }
+
+  .md.has-task-list-item-actions > :is(ul, ol) > li {
+    margin-inline-end: 1.5rem;
   }
 
   ul.task-list > li.task-list-item {
@@ -21,6 +36,10 @@
       inset-inline-start: -0.6rem;
     }
   }
+
+  .dropdown-item.text-danger p {
+    color: var(--red-500, $red-500); /* Override typography.scss making text black */
+  }
 }
 
 .is-ghost {
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 5c699dd81df..fe64e4f2fe8 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -812,7 +812,8 @@ $tabs-holder-z-index: 250;
 
 .mr-widget-body-ready-merge {
   @include media-breakpoint-down(sm) {
-    @include gl-p-3;
+    @include gl-py-3;
+    @include gl-pr-3;
   }
 }
 
diff --git a/app/assets/stylesheets/page_bundles/pipeline_editor.scss b/app/assets/stylesheets/page_bundles/pipeline_editor.scss
index e167052a3e1..13d158b08fe 100644
--- a/app/assets/stylesheets/page_bundles/pipeline_editor.scss
+++ b/app/assets/stylesheets/page_bundles/pipeline_editor.scss
@@ -20,3 +20,11 @@
   @include gl-display-block;
   top: 2px;
 }
+
+.job-assistant-drawer {
+  width: 100%;
+
+  @include media-breakpoint-up(sm) {
+    width: 560px;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/profile.scss b/app/assets/stylesheets/page_bundles/profile.scss
index ac1e9fb024b..fc745433f1b 100644
--- a/app/assets/stylesheets/page_bundles/profile.scss
+++ b/app/assets/stylesheets/page_bundles/profile.scss
@@ -240,6 +240,10 @@
   color: $twitter;
 }
 
+.discord-icon {
+  color: $discord;
+}
+
 .key-created-at {
   line-height: 42px;
 }
diff --git a/app/assets/stylesheets/page_bundles/search.scss b/app/assets/stylesheets/page_bundles/search.scss
index 10da541ed8d..cde570cfb0f 100644
--- a/app/assets/stylesheets/page_bundles/search.scss
+++ b/app/assets/stylesheets/page_bundles/search.scss
@@ -5,6 +5,7 @@ $search-avatar-size: 16px;
 $search-sidebar-min-width: 240px;
 $search-sidebar-max-width: 300px;
 $search-keyboard-shortcut: '/';
+$language-filter-max-height: 20rem;
 
 $border-radius-medium: 3px;
 
@@ -25,6 +26,26 @@ $border-radius-medium: 3px;
     min-width: $search-sidebar-min-width;
     max-width: $search-sidebar-max-width;
   }
+
+  .language-filter-checkbox {
+    .custom-control-label {
+      flex-grow: 1;
+    }
+  }
+
+  .language-filter-max-height {
+    max-height: $language-filter-max-height;
+  }
+}
+
+.search-max-w-inherit {
+  max-width: inherit;
+}
+
+.search-wrap-f-md-down {
+  @include gl-media-breakpoint-down(md) {
+    white-space: normal !important;
+  }
 }
 
 .search {
@@ -324,13 +345,20 @@ $border-radius-medium: 3px;
   }
 }
 
-// Disable Webkit's search input styles
+/**
+ * When form input type is search, browsers add a clear input button inside
+ * the input field. This overlaps with the input field we have already added.
+ */
+
+/* stylelint-disable property-no-vendor-prefix */
 input[type='search'] {
-  /* stylelint-disable-next-line property-no-vendor-prefix */
   -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
 
   &::-webkit-search-cancel-button,
   &::-webkit-search-results-button {
     @include gl-display-none;
   }
 }
+/* stylelint-enable property-no-vendor-prefix */
diff --git a/app/assets/stylesheets/page_bundles/settings.scss b/app/assets/stylesheets/page_bundles/settings.scss
index 9037eb7ae62..8978b8d798b 100644
--- a/app/assets/stylesheets/page_bundles/settings.scss
+++ b/app/assets/stylesheets/page_bundles/settings.scss
@@ -71,6 +71,7 @@
   animation: collapseMaxHeight 300ms ease-out;
   // Keep the section from expanding when we scroll over it
   pointer-events: none;
+  margin-bottom: $gl-spacing-scale-5;
 
   .settings.expanded & {
     max-height: none;
@@ -101,7 +102,6 @@
     display: block;
     height: 1px;
     overflow: hidden;
-    margin-top: 20px;
   }
 
   .sub-section {
diff --git a/app/assets/stylesheets/page_bundles/terms.scss b/app/assets/stylesheets/page_bundles/terms.scss
index 9dff3e9c99c..139627072be 100644
--- a/app/assets/stylesheets/page_bundles/terms.scss
+++ b/app/assets/stylesheets/page_bundles/terms.scss
@@ -8,7 +8,11 @@
   }
 
   .terms-fade {
-    background: linear-gradient(0deg, $white 0%, rgba($white, 0.5) 100%);
+    background: linear-gradient(rgba($white, 0), $white);
+
+    .gl-dark & {
+      background: linear-gradient(rgba($gray-900, 0), $gray-900);
+    }
   }
 
   .content {
diff --git a/app/assets/stylesheets/page_bundles/todos.scss b/app/assets/stylesheets/page_bundles/todos.scss
index d4b0b4169d3..beee219f51f 100644
--- a/app/assets/stylesheets/page_bundles/todos.scss
+++ b/app/assets/stylesheets/page_bundles/todos.scss
@@ -27,18 +27,19 @@
   }
 
   &.todo-pending.done-reversible {
-    &:hover {
-      border-top: 1px solid transparent;
+    .todo-item,
+    .todo-timestamp {
+      @include gl-opacity-5;
+    }
 
-      .todo-avatar,
-      .todo-item {
-        opacity: 0.6;
-      }
+    .todo-avatar {
+      filter: grayscale(1);
     }
 
-    .todo-avatar,
-    .todo-item {
-      opacity: 0.2;
+    &:hover {
+      @include gl-border-t-1;
+      @include gl-border-t-transparent;
+      @include gl-border-t-solid;
     }
   }
 }
diff --git a/app/assets/stylesheets/page_bundles/work_items.scss b/app/assets/stylesheets/page_bundles/work_items.scss
index 4766f124e5b..07a0cf3f367 100644
--- a/app/assets/stylesheets/page_bundles/work_items.scss
+++ b/app/assets/stylesheets/page_bundles/work_items.scss
@@ -86,3 +86,10 @@
     min-width: 0;
   }
 }
+
+.work-item-notes {
+  .discussion-notes ul.notes li.toggle-replies-widget {
+    // offset for .timeline-content padding + an extra 1px for border width
+    margin: -5px -9px;
+  }
+}
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index dd24e3fcb5d..7d465dbcc04 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -266,24 +266,9 @@
   }
 }
 
-.gpg-status-box {
-  padding: 2px 10px;
-
-  &:empty {
-    display: none;
-  }
-
-  &.valid {
-    @include green-status-color;
-  }
-
-  &.invalid {
-    @include status-color($gray-dark, color('gray'), $gray-darkest);
-    border-color: $gray-darkest;
-
-    &:not(span):hover {
-      color: color('gray');
-    }
+.signature-badge {
+  &:hover {
+    @include gl-text-decoration-none;
   }
 }
 
@@ -297,7 +282,7 @@
   }
 }
 
-.gpg-popover-status {
+.signature-popover {
   display: flex;
   align-items: center;
   font-weight: $gl-font-weight-normal;
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index c2ac4f32480..75c81b74ba7 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -101,12 +101,6 @@ ul.related-merge-requests > li gl-emoji {
   }
 }
 
-.issue-form {
-  .select2-container {
-    width: 250px !important;
-  }
-}
-
 .issues-nav-controls {
   .btn-group:empty {
     display: none;
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 6b662359a67..5b8b850ba35 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -185,14 +185,8 @@ $comparison-empty-state-height: 62px;
     margin-bottom: 0;
   }
 
-  .dropdown-menu-toggle {
-    width: 100%;
-  }
-
-  .dropdown-menu {
-    left: 5px;
-    right: 5px;
-    width: auto;
+  .gl-dropdown-custom-toggle {
+    @include gl-w-full;
   }
 }
 
@@ -384,6 +378,8 @@ $comparison-empty-state-height: 62px;
 }
 
 .mr-compare-dropdown {
+  @include gl-w-full;
+
   .gl-button-text {
     @include gl-w-full;
   }
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 75d52424fd9..5d03281a30a 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -70,6 +70,9 @@ $system-note-svg-size: 1rem;
         align-items: center;
         gap: 0 0.25rem;
         flex-wrap: wrap;
+        line-height: $gl-line-height-20;
+        padding-top: $gl-padding-6;
+        padding-bottom: $gl-padding-6;
       }
     }
 
@@ -217,6 +220,9 @@ $system-note-svg-size: 1rem;
       align-items: center;
       gap: 0 0.25rem;
       flex-wrap: wrap;
+      padding-top: $gl-padding-6;
+      padding-bottom: $gl-padding-6;
+      line-height: $gl-line-height-20;
     }
   }
 
@@ -631,6 +637,11 @@ $system-note-svg-size: 1rem;
           &.new {
             border-right-width: 0;
           }
+
+          .note-header {
+            flex-wrap: wrap;
+            align-items: center;
+          }
         }
 
         .notes {
@@ -660,6 +671,7 @@ $system-note-svg-size: 1rem;
   }
 
   .discussion-reply-holder {
+    border-top: 0;
     border-radius: 0 0 $border-radius-default $border-radius-default;
     position: relative;
 
@@ -772,8 +784,7 @@ $system-note-svg-size: 1rem;
 .note-header {
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
+  align-items: flex-start;
 
   > .note-header-info,
   > .note-actions {
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
index bb83a91bc57..3b28025053b 100644
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -761,6 +761,9 @@ input {
   color: #ececef;
   background-color: #333238;
 }
+input[type="search"] {
+  appearance: textfield;
+}
 .form-control {
   border-radius: 4px;
   padding: 6px 10px;
@@ -834,9 +837,6 @@ kbd {
 .navbar-gitlab .header-content .navbar-collapse > ul.nav > li:not(.d-none) {
   margin: 0 2px;
 }
-.navbar-gitlab .header-content .header-search-new {
-  max-width: 640px;
-}
 .navbar-gitlab .header-search {
   min-width: 320px;
 }
@@ -985,13 +985,6 @@ kbd {
 .header-new .dropdown-menu {
   margin-top: 4px;
 }
-.btn-sign-in {
-  background-color: #ebebfa;
-  color: #292961;
-  font-weight: 600;
-  line-height: 18px;
-  margin: 4px 0 4px 2px;
-}
 @media (max-width: 575.98px) {
   .navbar-gitlab .container-fluid {
     font-size: 18px;
@@ -1638,8 +1631,6 @@ svg.s16 {
   --gray-200: #535158;
   --gray-700: #bfbfc3;
   --gray-900: #ececef;
-  --green-100: #0d532a;
-  --green-700: #91d4a8;
   --gl-text-color: #ececef;
   --border-color: #434248;
   --white: #333238;
@@ -1822,11 +1813,6 @@ body.gl-dark .navbar-gitlab .search form .search-input {
 .gl-display-none {
   display: none;
 }
-@media (min-width: 576px) {
-  .gl-sm-display-none {
-    display: none;
-  }
-}
 .gl-display-flex {
   display: flex;
 }
@@ -1851,9 +1837,15 @@ body.gl-dark .navbar-gitlab .search form .search-input {
 .gl-align-items-stretch {
   align-items: stretch;
 }
+.gl-flex-grow-0\! {
+  flex-grow: 0 !important;
+}
 .gl-flex-grow-1 {
   flex-grow: 1;
 }
+.gl-flex-basis-half\! {
+  flex-basis: 50% !important;
+}
 .gl-justify-content-end {
   justify-content: flex-end;
 }
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index 9e1c6b065a0..adafe719892 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -761,6 +761,9 @@ input {
   color: #333238;
   background-color: #fff;
 }
+input[type="search"] {
+  appearance: textfield;
+}
 .form-control {
   border-radius: 4px;
   padding: 6px 10px;
@@ -834,9 +837,6 @@ kbd {
 .navbar-gitlab .header-content .navbar-collapse > ul.nav > li:not(.d-none) {
   margin: 0 2px;
 }
-.navbar-gitlab .header-content .header-search-new {
-  max-width: 640px;
-}
 .navbar-gitlab .header-search {
   min-width: 320px;
 }
@@ -985,13 +985,6 @@ kbd {
 .header-new .dropdown-menu {
   margin-top: 4px;
 }
-.btn-sign-in {
-  background-color: #ebebfa;
-  color: #292961;
-  font-weight: 600;
-  line-height: 18px;
-  margin: 4px 0 4px 2px;
-}
 @media (max-width: 575.98px) {
   .navbar-gitlab .container-fluid {
     font-size: 18px;
@@ -1651,11 +1644,6 @@ svg.s16 {
 .gl-display-none {
   display: none;
 }
-@media (min-width: 576px) {
-  .gl-sm-display-none {
-    display: none;
-  }
-}
 .gl-display-flex {
   display: flex;
 }
@@ -1680,9 +1668,15 @@ svg.s16 {
 .gl-align-items-stretch {
   align-items: stretch;
 }
+.gl-flex-grow-0\! {
+  flex-grow: 0 !important;
+}
 .gl-flex-grow-1 {
   flex-grow: 1;
 }
+.gl-flex-basis-half\! {
+  flex-basis: 50% !important;
+}
 .gl-justify-content-end {
   justify-content: flex-end;
 }
diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss
index d8afff1a200..3aace601c45 100644
--- a/app/assets/stylesheets/startup/startup-signin.scss
+++ b/app/assets/stylesheets/startup/startup-signin.scss
@@ -511,7 +511,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: #737278;
 }
 .gl-button {
   display: inline-flex;
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index 7d98a780e55..af98d59251f 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -4,19 +4,6 @@
   to see the available utility classes. If you cannot find the class you need,
   consider adding it to Gitlab UI before adding it here.
 **/
-
-@each $variant, $range in $color-ranges {
-  @each $suffix, $color in $range {
-    #{'.bg-#{$variant}-#{$suffix}'} {
-      background-color: $color;
-    }
-
-    #{'.text-#{$variant}-#{$suffix}'} {
-      color: $color;
-    }
-  }
-}
-
 @each $index, $size in $type-scale {
   #{'.text-#{$index}'} {
     font-size: $size;
@@ -290,11 +277,6 @@ to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1709
   flex-flow: row wrap;
 }
 
-// Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2098
-.gl-max-w-0 {
-  max-width: 0;
-}
-
 .gl-isolate {
   isolation: isolate;
 }