Add latest changes from gitlab-org/gitlab@14-4-stable-eev14.4.0-rc42

64 files changed, 581 insertions, 1490 deletions

diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss
index fa5ab590232..8f3b5b3b7cc 100644
--- a/app/assets/stylesheets/_page_specific_files.scss
+++ b/app/assets/stylesheets/_page_specific_files.scss
@@ -1,5 +1,4 @@
 @import './pages/branches';
-@import './pages/ci_projects';
 @import './pages/clusters';
 @import './pages/commits';
 @import './pages/deploy_keys';
@@ -10,7 +9,6 @@
 @import './pages/groups';
 @import './pages/help';
 @import './pages/issuable';
-@import './pages/issues/issue_count_badge';
 @import './pages/issues';
 @import './pages/labels';
 @import './pages/login';
diff --git a/app/assets/stylesheets/application_dark.scss b/app/assets/stylesheets/application_dark.scss
index dae0cd72a8f..f1d7df8c5ed 100644
--- a/app/assets/stylesheets/application_dark.scss
+++ b/app/assets/stylesheets/application_dark.scss
@@ -2,74 +2,4 @@
 
 @import './application';
 
-@import './themes/theme_helper';
-
-body.gl-dark {
-  @include gitlab-theme(
-    $gray-900,
-    $gray-400,
-    $gray-500,
-    $gray-800,
-    $gray-900,
-    $white
-  );
-
-  .logo-text svg {
-    fill: var(--gl-text-color);
-  }
-
-  .navbar-gitlab {
-    background-color: var(--gray-50);
-    box-shadow: 0 1px 0 0 var(--gray-100);
-
-    .navbar-sub-nav,
-    .navbar-nav {
-      li {
-        > a:hover,
-        > a:focus,
-        > button:hover,
-        > button:focus {
-          color: var(--gl-text-color);
-          background-color: var(--gray-200);
-        }
-      }
-
-      li.active,
-      li.dropdown.show {
-        > a,
-        > button {
-          color: var(--gl-text-color);
-          background-color: var(--gray-200);
-        }
-      }
-    }
-
-    .header-search {
-      background-color: var(--gray-100) !important;
-      box-shadow: inset 0 0 0 1px var(--border-color) !important;
-
-      &:active,
-      &:hover {
-        background-color: var(--gray-100) !important;
-        box-shadow: inset 0 0 0 1px var(--blue-200) !important;
-      }
-    }
-
-    .search {
-      form {
-        background-color: var(--gray-100);
-        box-shadow: inset 0 0 0 1px var(--border-color);
-
-        &:active,
-        &:hover {
-          background-color: var(--gray-100);
-          box-shadow: inset 0 0 0 1px var(--blue-200);
-        }
-      }
-    }
-  }
-
-  .md :not(pre.code) > code {
-    background-color: $gray-200;
-  }
-}
+@import './themes/dark_mode_overrides';
diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss
index c4f292dd05d..27ddff181c5 100644
--- a/app/assets/stylesheets/bootstrap_migration.scss
+++ b/app/assets/stylesheets/bootstrap_migration.scss
@@ -112,7 +112,7 @@ code {
   border-radius: $border-radius-default;
 
   .code > &,
-  .build-trace & {
+  .build-log & {
     background-color: inherit;
     padding: unset;
   }
diff --git a/app/assets/stylesheets/components/batch_comments/review_bar.scss b/app/assets/stylesheets/components/batch_comments/review_bar.scss
index bcd06974813..6f5c5c5a080 100644
--- a/app/assets/stylesheets/components/batch_comments/review_bar.scss
+++ b/app/assets/stylesheets/components/batch_comments/review_bar.scss
@@ -38,59 +38,6 @@
   margin: 0 auto;
 }
 
-.review-preview-dropdown {
-  .review-preview-item.menu-item {
-    display: flex;
-    flex-wrap: wrap;
-    padding: 8px 16px;
-    cursor: pointer;
-
-    &:not(.is-last) {
-      border-bottom: 1px solid $list-border;
-    }
-  }
-
-  .dropdown-menu {
-    top: auto;
-    bottom: 36px;
-
-    &.show {
-      max-height: 400px;
-
-      @include media-breakpoint-down(xs) {
-        width: calc(100vw - 32px);
-      }
-    }
-  }
-
-  .dropdown-content {
-    max-height: 300px;
-  }
-
-  .dropdown-title {
-    padding: $grid-size 25px $gl-padding;
-    margin-bottom: 0;
-  }
-
-  .dropdown-footer {
-    margin-top: 0;
-  }
-
-  .dropdown-menu-close {
-    top: 6px;
-  }
-}
-
-.review-preview-dropdown-toggle {
-  svg.s16 {
-    width: 15px;
-    height: 15px;
-    margin-top: -1px;
-    top: 3px;
-    margin-left: 4px;
-  }
-}
-
 .review-preview-item-header {
   display: flex;
   align-items: center;
diff --git a/app/assets/stylesheets/components/content_editor.scss b/app/assets/stylesheets/components/content_editor.scss
index a013d971efb..7f498b79d33 100644
--- a/app/assets/stylesheets/components/content_editor.scss
+++ b/app/assets/stylesheets/components/content_editor.scss
@@ -1,9 +1,13 @@
 .ProseMirror {
+  max-height: 55vh;
+  overflow-y: auto;
+
   td,
   th,
   li,
   dd,
-  dt {
+  dt,
+  summary {
     :first-child {
       margin-bottom: 0 !important;
     }
@@ -37,6 +41,7 @@
     }
   }
 
+
   .dl-content {
     width: 100%;
 
@@ -50,6 +55,38 @@
       }
     }
   }
+
+  .details-toggle-icon {
+    cursor: pointer;
+    z-index: 1;
+
+    &::before {
+      content: '▶';
+      display: inline-block;
+      width: $gl-spacing-scale-4;
+    }
+
+    &.is-open::before {
+      content: '▼';
+    }
+  }
+
+  .details-content {
+    width: calc(100% - #{$gl-spacing-scale-4});
+
+    > li {
+      list-style-type: none;
+      margin-left: $gl-spacing-scale-2;
+    }
+
+    > :not(:first-child) {
+      display: none;
+    }
+
+    &.is-open > :not(:first-child) {
+      display: inherit;
+    }
+  }
 }
 
 .table-creator-grid-item {
@@ -70,3 +107,17 @@
 
   @include gl-white-space-nowrap;
 }
+
+
+.content-editor-color-chip::after {
+  content: ' ';
+  display: inline-block;
+  align-items: center;
+  width: 11px;
+  height: 11px;
+  border-radius: 3px;
+  margin-left: 4px;
+  margin-top: -2px;
+  border: 1px solid $black-transparent;
+  background-color: var(--gl-color-chip-color);
+}
diff --git a/app/assets/stylesheets/components/design_management/design.scss b/app/assets/stylesheets/components/design_management/design.scss
index 579a86a94a4..a3cbdb9ae86 100644
--- a/app/assets/stylesheets/components/design_management/design.scss
+++ b/app/assets/stylesheets/components/design_management/design.scss
@@ -70,11 +70,6 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
   }
 }
 
-.design-presentation-wrapper {
-  top: 0;
-  left: 0;
-}
-
 .design-scaler-wrapper {
   bottom: 0;
   left: 50%;
diff --git a/app/assets/stylesheets/components/design_management/design_version_dropdown.scss b/app/assets/stylesheets/components/design_management/design_version_dropdown.scss
deleted file mode 100644
index f79d672e238..00000000000
--- a/app/assets/stylesheets/components/design_management/design_version_dropdown.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.design-version-dropdown > button {
-  background: inherit;
-}
diff --git a/app/assets/stylesheets/components/project_list_item.scss b/app/assets/stylesheets/components/project_list_item.scss
deleted file mode 100644
index 8e7c2c4398c..00000000000
--- a/app/assets/stylesheets/components/project_list_item.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.project-list-item {
-  &:not(:disabled):not(.disabled) {
-    &:focus,
-    &:active,
-    &:focus:active {
-      outline: none;
-      box-shadow: none;
-    }
-  }
-}
-
-// When housed inside a modal, the edge of each item
-// should extend to the edge of the modal.
-.modal-body {
-  .project-list-item {
-    border-radius: 0;
-    margin-left: -$gl-padding;
-    margin-right: -$gl-padding;
-
-    .project-namespace-name-container {
-      overflow: hidden;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 804cc205279..06a8694eb3d 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -9,7 +9,6 @@
 
 @import 'framework/animations';
 @import 'framework/vue_transitions';
-@import 'framework/banner';
 @import 'framework/blocks';
 @import 'framework/buttons';
 @import 'framework/badges';
diff --git a/app/assets/stylesheets/framework/banner.scss b/app/assets/stylesheets/framework/banner.scss
deleted file mode 100644
index 71bbab2065d..00000000000
--- a/app/assets/stylesheets/framework/banner.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-.banner-callout {
-  display: flex;
-  position: relative;
-  align-items: start;
-
-  .banner-close {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    opacity: 1;
-
-    .dismiss-icon {
-      color: $gl-text-color;
-      font-size: $gl-font-size;
-    }
-  }
-
-  .banner-graphic {
-    margin: 0 $gl-padding $gl-padding 0;
-  }
-
-  &.banner-non-empty-state {
-    border-bottom: 1px solid $border-color;
-  }
-
-  @include media-breakpoint-down(xs) {
-    justify-content: center;
-    flex-direction: column;
-    align-items: center;
-
-    .banner-title,
-    .banner-buttons {
-      text-align: center;
-    }
-
-    .banner-graphic {
-      margin-left: $gl-padding;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index a0682eabf01..549289450a4 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -1,9 +1,3 @@
-.centered-light-block {
-  text-align: center;
-  color: $gl-text-color;
-  margin: 20px;
-}
-
 .nothing-here-block {
   text-align: center;
   padding: 16px;
@@ -83,22 +77,6 @@
   > p:last-child {
     margin-bottom: 0;
   }
-
-  .block-controls {
-    display: flex;
-    justify-content: flex-end;
-    flex: 1;
-
-    .control {
-      float: left;
-      margin-left: 10px;
-    }
-  }
-
-  &.build-content {
-    background-color: $white;
-    border-top: 0;
-  }
 }
 
 .sub-header-block {
@@ -169,31 +147,6 @@
     }
   }
 
-  &.groups-cover-block {
-    background: $white;
-    border-bottom: 1px solid $border-color;
-    text-align: left;
-    padding: 24px 0;
-
-    .group-info {
-      .cover-title {
-        margin-top: 9px;
-      }
-
-      p {
-        margin-bottom: 0;
-      }
-    }
-
-    @include media-breakpoint-down(xs) {
-      text-align: center;
-
-      .avatar {
-        float: none;
-      }
-    }
-  }
-
   &.user-cover-block {
     padding: 24px 0 0;
 
@@ -214,19 +167,6 @@
       margin-right: auto;
     }
   }
-
-  .group-info {
-    h1 {
-      display: inline;
-      font-weight: $gl-font-weight-normal;
-      font-size: 24px;
-      color: $gl-text-color;
-    }
-  }
-}
-
-.block-connector {
-  margin-top: -1px;
 }
 
 .content-block {
@@ -322,7 +262,7 @@
     display: inline-block;
   }
 
-  .btn {
+  .btn:not(.split-content-button):not(.dropdown-toggle-split) {
     margin: $gl-padding-8 $gl-padding-4;
 
     @include media-breakpoint-down(xs) {
@@ -332,10 +272,6 @@
   }
 }
 
-.flex-right {
-  margin-left: auto;
-}
-
 .code-block {
   white-space: pre;
   overflow-x: auto;
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index ceccec8c5cb..e458dfd5316 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -247,13 +247,6 @@
   }
 }
 
-.btn-terminal {
-  svg {
-    height: 14px;
-    width: $default-icon-size;
-  }
-}
-
 .btn-lg {
   padding: 12px 20px;
 }
@@ -281,12 +274,6 @@
   }
 }
 
-.btn-align-content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
 .btn-group {
   &.btn-grouped {
     @include btn-with-margin;
@@ -347,16 +334,6 @@
   }
 }
 
-.btn-static {
-  background-color: $gray-light !important;
-  border: 1px solid $border-gray-normal;
-  cursor: default;
-
-  &:active {
-    box-shadow: inset 0 0 0 $white;
-  }
-}
-
 .btn-inverted {
   &-secondary {
     @include btn-outline($white, $blue-500, $blue-500, $blue-100, $blue-700, $blue-500, $blue-200, $blue-600, $blue-800);
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index a7ce19ffc69..354d2737894 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -175,10 +175,6 @@ p.time {
   text-shadow: none;
 }
 
-.thin-area {
-  height: 150px;
-}
-
 // Fix issue with notes & lists creating a bunch of bottom borders.
 li.note {
   img { max-width: 100%; }
@@ -298,10 +294,6 @@ img.emoji {
   margin: 0;
 }
 
-.space-right {
-  margin-right: 10px;
-}
-
 .alert {
   margin-bottom: $gl-padding;
 }
@@ -363,14 +355,6 @@ img.emoji {
   }
 }
 
-.outline-0 {
-  outline: 0;
-
-  &:focus {
-    outline: 0;
-  }
-}
-
 /** COMMON CLASSES **/
 /**
   🚨 Do not use these classes — they are deprecated and being removed. 🚨
diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss
index f5002a342b6..fa1892903a3 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar.scss
@@ -140,7 +140,7 @@
       @include gl-border-none;
 
       .avatar.s32 {
-        @extend .rect-avatar.s32;
+        border-radius: $border-radius-default;
         box-shadow: $avatar-box-shadow;
       }
     }
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index 568182ad796..23dc16b7e7f 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -1007,6 +1007,27 @@ table.code {
   }
 }
 
+// Notes tweaks for the Changes tab ONLY
+.diff-tr {
+  .timeline-discussion-body {
+    clear: left;
+
+    .note-body {
+      margin-top: 0 !important;
+    }
+  }
+
+  .timeline-entry img.avatar {
+    margin-top: -2px;
+    margin-right: $gl-padding-8;
+  }
+
+  // tiny adjustment to vertical align with the note header text
+  .discussion-collapsible .timeline-icon {
+    padding-top: 2px;
+  }
+}
+
 .files:not([data-can-create-note]) .frame {
   cursor: auto;
 }
@@ -1125,7 +1146,7 @@ table.code {
 }
 
 .discussion-collapsible {
-  margin: 0 $gl-padding $gl-padding 71px;
+  margin: 0 $gl-padding $gl-padding;
 
   .notes {
     border-radius: $border-radius-default;
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index b05fbfaae6c..7f960e3da51 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -76,6 +76,7 @@
 }
 
 .dropdown-toggle,
+.dropdown-menu-toggle,
 .confidential-merge-request-fork-group .dropdown-toggle {
   padding: 6px 8px 6px 10px;
   background-color: $white;
@@ -131,7 +132,6 @@
 
 // This is double classed to solve a specificity issue with the gitlab ui buttons
 .dropdown-menu-toggle.dropdown-menu-toggle {
-  @extend .dropdown-toggle;
   justify-content: flex-start;
   overflow: hidden;
   padding-right: 25px;
@@ -425,21 +425,10 @@
   }
 }
 
-.dropdown-menu-drop-up {
-  top: auto;
-  bottom: 100%;
-}
-
 .dropdown-menu-large {
   width: 340px;
 }
 
-.dropdown-menu-no-wrap {
-  a {
-    white-space: normal;
-  }
-}
-
 .dropdown-menu-full-width {
   width: 100%;
 }
@@ -662,13 +651,6 @@
   padding-right: 10px;
 }
 
-.dropdown-due-date-footer {
-  padding-top: 0;
-  margin-left: 10px;
-  margin-right: 10px;
-  border-top: 0;
-}
-
 .dropdown-footer-list {
   font-size: 14px;
 
@@ -742,24 +724,6 @@
   }
 }
 
-.dropdown-menu-due-date {
-  .dropdown-content {
-    max-height: 230px;
-  }
-
-  .pika-single {
-    position: relative !important;
-    top: 0 !important;
-    border: 0;
-    box-shadow: none;
-  }
-
-  .pika-lendar {
-    margin-top: -5px;
-    margin-bottom: 0;
-  }
-}
-
 .dropdown-menu-inner-title {
   display: block;
   color: $gl-text-color;
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index c366bf80093..2a46e50f0da 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -196,14 +196,6 @@ label {
   }
 }
 
-@include media-breakpoint-down(xs) {
-  .remember-me {
-    .remember-me-checkbox {
-      margin-top: 0;
-    }
-  }
-}
-
 .input-icon-wrapper,
 .select-wrapper {
   position: relative;
diff --git a/app/assets/stylesheets/framework/job_log.scss b/app/assets/stylesheets/framework/job_log.scss
index d48a5116677..f77f64f1d76 100644
--- a/app/assets/stylesheets/framework/job_log.scss
+++ b/app/assets/stylesheets/framework/job_log.scss
@@ -5,10 +5,10 @@
   font-size: 13px;
   word-break: break-all;
   word-wrap: break-word;
-  color: color-yiq($builds-trace-bg);
+  color: color-yiq($builds-log-bg);
   border-radius: $border-radius-small;
   min-height: 42px;
-  background-color: $builds-trace-bg;
+  background-color: $builds-log-bg;
 }
 
 .log-line {
@@ -42,10 +42,6 @@
   }
 }
 
-.log-duration-badge {
-  background: $gray-300;
-}
-
 .loader-animation {
   @include build-loader-animation;
 }
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 7315bce1ed9..ef294635641 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -153,6 +153,10 @@
     vertical-align: middle;
     margin-bottom: 3px;
   }
+
+  .dropdown-chevron {
+    margin-bottom: 0;
+  }
 }
 
 @include media-breakpoint-down(xs) {
diff --git a/app/assets/stylesheets/framework/media_object.scss b/app/assets/stylesheets/framework/media_object.scss
index 89c561479cc..b573052c14a 100644
--- a/app/assets/stylesheets/framework/media_object.scss
+++ b/app/assets/stylesheets/framework/media_object.scss
@@ -6,7 +6,3 @@
 .media-body {
   flex: 1;
 }
-
-.media-body-wrap {
-  flex-grow: 1;
-}
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index fcf86680bb3..33f7aa4dba1 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -239,7 +239,7 @@
 /*
 * Mixin that handles the container for the job logs (CI/CD and kubernetes pod logs)
 */
-@mixin build-trace($background: $black) {
+@mixin build-log($background: $black) {
   background: $background;
   color: $gray-darkest;
   white-space: pre;
@@ -253,13 +253,13 @@
     display: block;
   }
 
-  &.build-trace-rounded {
+  &.build-log-rounded {
     border-radius: $gl-border-radius-base;
   }
 }
 
 // Used in EE for Web Terminal
-@mixin build-trace-bar($height) {
+@mixin build-log-bar($height) {
   height: $height;
   min-height: $height;
   background: var(--gray-50, $gray-50);
@@ -268,8 +268,8 @@
   padding: $grid-size;
 }
 
-@mixin build-trace-top-bar($height) {
-  @include build-trace-bar($height);
+@mixin build-log-top-bar($height) {
+  @include build-log-bar($height);
 
   position: -webkit-sticky;
   position: sticky;
diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss
index 48a18e0d145..c9b17f5d5c4 100644
--- a/app/assets/stylesheets/framework/modal.scss
+++ b/app/assets/stylesheets/framework/modal.scss
@@ -1,13 +1,3 @@
-.modal-xl {
-  max-width: 98%;
-}
-
-.modal-1040 {
-  @include media-breakpoint-up(xl) {
-    max-width: 1040px;
-  }
-}
-
 .modal-header {
   background-color: $modal-body-bg;
 
@@ -111,30 +101,3 @@ body.modal-open {
     }
   }
 }
-
-.recaptcha-modal .recaptcha-form {
-  display: inline-block;
-
-  .recaptcha {
-    margin: 0;
-  }
-}
-
-.issues-import-modal,
-.issuable-export-modal {
-  .modal-body {
-    padding: 0;
-
-    .modal-subheader {
-      justify-content: flex-start;
-      align-items: center;
-      border-bottom: 1px solid $modal-border-color;
-      padding: 14px;
-    }
-
-    .modal-text {
-      padding: $gl-padding-24 $gl-padding;
-      min-height: $modal-body-height;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/framework/panels.scss b/app/assets/stylesheets/framework/panels.scss
index d9c93fed1c4..e5b2b853363 100644
--- a/app/assets/stylesheets/framework/panels.scss
+++ b/app/assets/stylesheets/framework/panels.scss
@@ -39,10 +39,6 @@
   }
 }
 
-.card-empty-heading {
-  border-bottom: 0;
-}
-
 .card-body {
   padding: $gl-padding;
 
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index 06eebb95438..685f1f413e6 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -1,6 +1,6 @@
 // For tabbed navigation links, scrolling tabs, etc. For all top/main navigation,
 // please check nav.scss
-.nav-links:not(.quick-links) {
+.nav-links {
   display: flex;
   padding: 0;
   margin: 0;
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index d8ce6826fc1..900cf9fa4db 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -50,18 +50,6 @@
   }
 }
 
-.namespace-result {
-  .namespace-kind {
-    color: $gray-300;
-    font-weight: $gl-font-weight-normal;
-  }
-
-  .namespace-path {
-    margin-left: 10px;
-    font-weight: $gl-font-weight-bold;
-  }
-}
-
 .ajax-users-dropdown {
   min-width: 250px !important;
 }
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 6b3201ba2b0..6c7fc25f2d9 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -16,21 +16,6 @@
   transition: padding $sidebar-transition-duration;
 }
 
-.nav-header-btn {
-  padding: 10px $gl-sidebar-padding;
-  color: inherit;
-  transition-duration: 0.3s;
-  position: absolute;
-  top: 0;
-  cursor: pointer;
-
-  &:hover,
-  &:focus {
-    color: $white;
-    text-decoration: none;
-  }
-}
-
 .right-sidebar-collapsed {
   padding-right: 0;
 
diff --git a/app/assets/stylesheets/framework/snippets.scss b/app/assets/stylesheets/framework/snippets.scss
index 47184804353..c59e70c80df 100644
--- a/app/assets/stylesheets/framework/snippets.scss
+++ b/app/assets/stylesheets/framework/snippets.scss
@@ -4,11 +4,6 @@
     font-weight: $gl-font-weight-bold;
   }
 
-  .snippet-filename {
-    color: $gl-text-color-secondary;
-    font-weight: normal;
-  }
-
   .snippet-info {
     color: $gl-text-color-secondary;
   }
diff --git a/app/assets/stylesheets/framework/sortable.scss b/app/assets/stylesheets/framework/sortable.scss
index 25868061d04..953c42219a9 100644
--- a/app/assets/stylesheets/framework/sortable.scss
+++ b/app/assets/stylesheets/framework/sortable.scss
@@ -36,61 +36,6 @@
   }
 }
 
-.related-issues-list-item {
-  .card-body,
-  .issuable-info-container {
-    padding: $gl-padding-4 $gl-padding-4 $gl-padding-4 $gl-padding;
-
-    .block-truncated {
-      padding: $gl-padding-8 0;
-      line-height: $gl-btn-line-height;
-    }
-
-    @include media-breakpoint-down(md) {
-      padding-left: $gl-padding;
-
-      .block-truncated {
-        flex-direction: column-reverse;
-        padding: $gl-padding-4 0;
-
-        .text-secondary {
-          margin-top: $gl-padding-4;
-        }
-
-        .issue-token-title-text {
-          display: block;
-        }
-      }
-
-      .issue-item-remove-button {
-        align-self: baseline;
-      }
-    }
-
-    @include media-breakpoint-only(md) {
-      .block-truncated .issue-token-title-text {
-        white-space: nowrap;
-      }
-
-      .issue-item-remove-button {
-        align-self: center;
-      }
-    }
-
-    @include media-breakpoint-down(sm) {
-      padding-left: $gl-padding-8;
-
-      .block-truncated .issue-token-title-text {
-        white-space: normal;
-      }
-    }
-  }
-
-  &.is-dragging {
-    padding: 0;
-  }
-}
-
 .is-dragging {
   // Important because plugin sets inline CSS
   opacity: 1 !important;
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index 92405c00c5e..c6bc8fa0eac 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -23,6 +23,7 @@ table {
     @include gl-text-gray-500;
   }
 
+  .md &:not(.code),
   &.table {
     margin-bottom: $gl-padding;
 
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index aeb3bb2286f..cb36c4e5767 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -75,6 +75,15 @@
 
   details {
     margin-bottom: $gl-padding;
+
+    > *:not(summary) {
+      margin-left: $gl-spacing-scale-5;
+    }
+  }
+
+  summary > * {
+    display: inline-block;
+    margin-bottom: 0;
   }
 
   // Single code lines should wrap
@@ -160,8 +169,6 @@
   }
 
   table:not(.code) {
-    @extend .table;
-    @extend .table-bordered;
     margin: 16px 0;
     color: $gl-text-color;
     border: 0;
@@ -172,9 +179,11 @@
     tbody {
       background-color: $white;
 
-      td {
-        border-color: $gray-100;
-      }
+    }
+
+    td,
+    th {
+      border: 1px solid $border-color;
     }
 
     tr {
@@ -478,6 +487,7 @@
     font-size: larger;
   }
 
+  figcaption,
   .small {
     font-size: smaller;
   }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 099dfa28b9f..026aeeb1e8e 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -697,7 +697,7 @@ $blame-blue: #254e77;
 /*
 * Builds
 */
-$builds-trace-bg: #111;
+$builds-log-bg: #111;
 $job-log-highlight-height: 18px;
 $job-log-line-padding: 55px;
 $job-line-number-width: 50px;
@@ -759,7 +759,6 @@ $help-shortcut-header-color: #333;
 */
 $issues-today-bg: #f3fff2 !default;
 $issues-today-border: #e1e8d5 !default;
-$compare-display-color: #888;
 
 /*
 * Label
diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss
index 62abf4a7683..10df532e334 100644
--- a/app/assets/stylesheets/framework/zen.scss
+++ b/app/assets/stylesheets/framework/zen.scss
@@ -40,15 +40,6 @@
   border: 0;
 }
 
-.zen-control-full {
-  color: $gl-text-color-secondary;
-
-  &:hover {
-    color: $blue-600;
-    text-decoration: none;
-  }
-}
-
 .zen-control-leave {
   display: none;
   color: $gl-text-color;
diff --git a/app/assets/stylesheets/page_bundles/_ide_mixins.scss b/app/assets/stylesheets/page_bundles/_ide_mixins.scss
index 48b8a7230b1..bbc47c5cd5d 100644
--- a/app/assets/stylesheets/page_bundles/_ide_mixins.scss
+++ b/app/assets/stylesheets/page_bundles/_ide_mixins.scss
@@ -4,7 +4,7 @@
   height: 100%;
 
   .top-bar {
-    @include build-trace-bar(35px);
+    @include build-log-bar(35px);
 
     top: 0;
     font-size: 12px;
diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
index 7336d555f79..25a565ce2ba 100644
--- a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
+++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
@@ -44,7 +44,7 @@
     background-color: var(--ide-background, $badge-bg);
   }
 
-  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a,
+  .nav-links li:not(.md-header-toolbar) a,
   .gl-tabs-nav li a,
   .dropdown-menu-inner-content,
   .file-row .file-row-icon svg,
@@ -52,7 +52,7 @@
     color: var(--ide-text-color-secondary, $gl-text-color-secondary);
   }
 
-  .nav-links:not(.quick-links) li:not(.md-header-toolbar),
+  .nav-links li:not(.md-header-toolbar),
   .gl-tabs-nav li {
     &:hover a,
     &.active a,
@@ -148,7 +148,7 @@
   .md blockquote,
   .md table:not(.code) tbody td,
   .md table:not(.code) tr th,
-  .nav-links:not(.quick-links),
+  .nav-links,
   .gl-tabs-nav,
   .common-note-form .md-area.is-focused .nav-links {
     border-color: var(--ide-border-color-alt, $white-dark);
@@ -259,6 +259,7 @@
 
   .dropdown-menu-toggle {
     border-color: var(--ide-btn-default-border, $gray-darkest);
+    background-color: var(--ide-input-background, transparent);
 
     &:hover,
     &:focus {
@@ -310,7 +311,7 @@
     border-color: var(--ide-background, $border-color);
     background-color: var(--ide-dropdown-background, $white);
 
-    .nav-links:not(.quick-links) {
+    .nav-links {
       background-color: var(--ide-dropdown-hover-background, $white);
       border-color: var(--ide-dropdown-hover-background, $border-color);
     }
diff --git a/app/assets/stylesheets/page_bundles/build.scss b/app/assets/stylesheets/page_bundles/build.scss
index ec41909beec..ed62e055427 100644
--- a/app/assets/stylesheets/page_bundles/build.scss
+++ b/app/assets/stylesheets/page_bundles/build.scss
@@ -1,8 +1,8 @@
 @import 'mixins_and_variables_and_functions';
 
 .build-page {
-  .build-trace {
-    @include build-trace();
+  .build-log {
+    @include build-log();
   }
 
   .archived-job {
@@ -18,7 +18,7 @@
   }
 
   .top-bar {
-    @include build-trace-top-bar(50px);
+    @include build-log-top-bar(50px);
 
     &.has-archived-block {
       top: $header-height + 28px;
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 28354b83856..7d1230b0225 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -109,3 +109,12 @@
     }
   }
 }
+
+// TODO: Move to GitLab UI
+.mr-extenson-scrim {
+  background: linear-gradient(to bottom, rgba($gray-light, 0), rgba($gray-light, 1));
+
+  .gl-dark & {
+    background: linear-gradient(to bottom, rgba(#333, 0), rgba(#333, 1));
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss
index 206c2eb09d0..c8b1b6cf9aa 100644
--- a/app/assets/stylesheets/page_bundles/pipeline.scss
+++ b/app/assets/stylesheets/page_bundles/pipeline.scss
@@ -44,14 +44,14 @@
     line-height: initial;
   }
 
-  .build-trace-row td {
+  .build-log-row td {
     border-top: 0;
     border-bottom-width: 1px;
     border-bottom-style: solid;
     padding-top: 0;
   }
 
-  .build-trace {
+  .build-log {
     width: 100%;
     text-align: left;
     margin-top: $gl-padding;
@@ -93,7 +93,7 @@
   }
 
   .build-state,
-  .build-trace-row {
+  .build-log-row {
     > td:last-child {
       padding-right: 0;
     }
@@ -108,12 +108,12 @@
       margin-top: 2 * $gl-padding;
     }
 
-    .build-trace-container {
+    .build-log-container {
       padding-top: $gl-padding;
       padding-bottom: $gl-padding;
     }
 
-    .build-trace {
+    .build-log {
       margin-bottom: 0;
       margin-top: 0;
     }
@@ -221,8 +221,8 @@
 }
 
 .test-reports-table {
-  .build-trace {
-    @include build-trace();
+  .build-log {
+    @include build-log();
   }
 }
 
diff --git a/app/assets/stylesheets/page_bundles/signup.scss b/app/assets/stylesheets/page_bundles/signup.scss
index 57e5d2411d1..4fc671dace8 100644
--- a/app/assets/stylesheets/page_bundles/signup.scss
+++ b/app/assets/stylesheets/page_bundles/signup.scss
@@ -26,14 +26,6 @@
     }
   }
 
-  .omniauth-btn {
-    width: 48%;
-
-    @include media-breakpoint-down(md) {
-      width: 100%;
-    }
-  }
-
   .decline-page {
     width: 350px;
   }
diff --git a/app/assets/stylesheets/page_bundles/wiki.scss b/app/assets/stylesheets/page_bundles/wiki.scss
index 1e6567189be..c64e159c648 100644
--- a/app/assets/stylesheets/page_bundles/wiki.scss
+++ b/app/assets/stylesheets/page_bundles/wiki.scss
@@ -152,5 +152,5 @@ ul.wiki-pages-list.content-list {
 }
 
 .wiki-form .markdown-area {
-  max-height: none;
+  max-height: 55vh;
 }
diff --git a/app/assets/stylesheets/pages/ci_projects.scss b/app/assets/stylesheets/pages/ci_projects.scss
deleted file mode 100644
index fbe1f3081a0..00000000000
--- a/app/assets/stylesheets/pages/ci_projects.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-.ci-body {
-  .project-title {
-    margin: 0;
-    color: $common-gray-dark;
-    font-size: 20px;
-    line-height: 1.5;
-  }
-
-  .builds,
-  .projects-table {
-    .light {
-      border-color: $border-color;
-    }
-
-    th,
-    td {
-      padding: 10px $gl-padding;
-    }
-
-    td {
-      color: $gl-text-color;
-      vertical-align: middle !important;
-
-      a {
-        font-weight: $gl-font-weight-normal;
-        text-decoration: none;
-      }
-    }
-  }
-
-  .commit-info {
-    .attr-name {
-      margin-right: 5px;
-    }
-
-    pre.commit-message {
-      background: none;
-      padding: 0;
-      border: 0;
-      margin: 20px 0;
-      border-radius: 0;
-    }
-  }
-
-  .loading {
-    font-size: 20px;
-  }
-
-  .ci-charts {
-    fieldset {
-      margin-bottom: 16px;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index d233adbf3d2..de27ca2e5e8 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -1,88 +1,4 @@
-.edit-cluster-form {
-  .clipboard-addon {
-    background-color: $white;
-  }
-}
-
-.cluster-application-row {
-  background: $gray-lighter;
-
-  &.cluster-application-installed {
-    background: none;
-  }
-
-  .settings-message {
-    padding: $gl-vert-padding $gl-padding-8;
-  }
-}
-
-@media (min-width: map-get($grid-breakpoints, md)) {
-  .cluster-application-list {
-    border: 1px solid $border-color;
-    border-radius: $border-radius-default;
-  }
-
-  .cluster-application-row {
-    border-bottom: 1px solid $border-color;
-    padding: $gl-padding;
-
-    &:last-child {
-      border-bottom: 0;
-      border-bottom-left-radius: calc(#{$border-radius-default} - 1px);
-      border-bottom-right-radius: calc(#{$border-radius-default} - 1px);
-    }
-  }
-}
-
-.cluster-application-logo {
-  border: 3px solid $white;
-  box-shadow: 0 0 0 1px $gray-normal;
-
-  &.avatar:hover {
-    border-color: $white;
-  }
-}
-
-.cluster-application-warning {
-  font-weight: bold;
-  text-align: center;
-  padding: $gl-padding;
-  border-bottom: 1px solid $white-normal;
-
-  .svg-container {
-    display: inline-block;
-    vertical-align: middle;
-    margin-right: $gl-padding-8;
-    width: 40px;
-    height: 40px;
-  }
-}
-
-.cluster-application-description {
-  flex: 1;
-}
-
-.cluster-application-disabled {
-  opacity: 0.5;
-}
-
-.clusters-dropdown-menu {
-  max-width: 100%;
-}
-
-.clusters-error-alert {
-  width: 100%;
-}
-
 .clusters-container {
-  .nav-bar-right {
-    padding: $gl-padding-top $gl-padding;
-  }
-
-  .card {
-    margin-bottom: $gl-vert-padding;
-  }
-
   .empty-state .svg-content img {
     width: 145px;
   }
@@ -100,71 +16,4 @@
       @include gl-flex-wrap;
     }
   }
-
-  .top-area .nav-controls > .btn.btn-add-cluster {
-    margin-right: 0;
-  }
-
-  .clusters-table {
-    background-color: $gray-light;
-    padding: $gl-padding-8;
-  }
-
-  .badge-light {
-    background-color: $white-normal;
-  }
-
-  .gl-responsive-table-row {
-    padding: $gl-padding;
-    border: 0;
-
-    &.table-row-header {
-      // stylelint-disable-next-line
-      background-color: none;
-      border: 0;
-      font-weight: bold;
-      color: $gray-500;
-    }
-  }
-}
-
-.cluster-warning {
-  @include alert-variant(theme-color-level('warning', $alert-bg-level), theme-color-level('warning', $alert-border-level), theme-color-level('warning', $alert-color-level));
-}
-
-.gcp-signup-offer {
-  border-left-color: $blue-500;
-
-  svg {
-    fill: $blue-500;
-    vertical-align: middle;
-  }
-
-  .gcp-signup-offer--content {
-    display: flex;
-
-    h4 {
-      font-size: 16px;
-      line-height: 24px;
-    }
-
-    .gcp-signup-offer--icon {
-      align-self: flex-start;
-    }
-  }
-}
-
-.cluster-deployments-warning {
-  color: $orange-500;
-}
-
-.badge.pods-badge {
-  color: $black;
-  font-weight: $gl-font-weight-bold;
-}
-
-.cluster-status-indicator {
-  &.disabled {
-    background-color: $gray-400;
-  }
 }
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index bc4dbf695cf..7f35b8fab43 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -82,11 +82,6 @@
   }
 }
 
-.commits-compare-switch {
-  float: left;
-  margin-right: 9px;
-}
-
 .commit-header {
   padding: 5px 10px;
   background-color: $gray-light;
diff --git a/app/assets/stylesheets/pages/environment_logs.scss b/app/assets/stylesheets/pages/environment_logs.scss
index 03993e5321d..f8f40076142 100644
--- a/app/assets/stylesheets/pages/environment_logs.scss
+++ b/app/assets/stylesheets/pages/environment_logs.scss
@@ -40,8 +40,8 @@
     height: 100%;
   }
 
-  .build-trace {
-    @include build-trace($black);
+  .build-log {
+    @include build-log($black);
   }
 
   .gl-infinite-scroll-legend {
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 94912b1c641..c597d2dd8da 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -220,21 +220,12 @@
   }
 
   .cross-project-reference {
-    color: inherit;
-
     span {
-      white-space: nowrap;
       width: 85%;
-      overflow: hidden;
-      position: relative;
-      display: inline-block;
-      text-overflow: ellipsis;
     }
 
     button {
-      float: right;
       padding: 1px 5px;
-      background-color: $gray-light;
     }
   }
 
@@ -563,35 +554,17 @@
   }
 }
 
-.participants-list {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.user-list {
-  display: flex;
-  flex-wrap: wrap;
-}
-
 .participants-author {
-  display: inline-block;
-  padding: 0 $gl-padding-8 $gl-padding-8 0;
-
   &:nth-of-type(7n) {
     padding-right: 0;
   }
 
-  .author-link {
-    display: block;
-  }
-
   .avatar.avatar-inline {
     margin: 0;
   }
 }
 
 .user-item {
-  display: inline-block;
   padding: 5px;
   flex-basis: 20%;
 
@@ -673,40 +646,40 @@
     .issuable-info-container {
       flex: 1;
       display: flex;
+    }
 
-      .issuable-main-info {
-        flex: 1 auto;
-        margin-right: 10px;
-        min-width: 0;
+    .issuable-main-info {
+      flex: 1 auto;
+      margin-right: 10px;
+      min-width: 0;
 
-        .issue-weight-icon,
-        .issue-estimate-icon {
-          vertical-align: sub;
-        }
+      .issue-weight-icon,
+      .issue-estimate-icon {
+        vertical-align: sub;
       }
+    }
 
-      .issuable-meta {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-end;
-        flex: 1 0 auto;
-
-        .controls {
-          margin-bottom: 2px;
-          line-height: 20px;
-          padding: 0;
-        }
+    .issuable-meta {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      flex: 1 0 auto;
 
-        .issue-updated-at {
-          line-height: 20px;
-        }
+      .controls {
+        margin-bottom: 2px;
+        line-height: 20px;
+        padding: 0;
       }
 
-      @include media-breakpoint-down(xs) {
-        .issuable-meta {
-          .controls li {
-            margin-right: 0;
-          }
+      .issue-updated-at {
+        line-height: 20px;
+      }
+    }
+
+    @include media-breakpoint-down(xs) {
+      .issuable-meta {
+        .controls li {
+          margin-right: 0;
         }
       }
     }
@@ -773,38 +746,15 @@
   }
 }
 
-.add-issuable-form-input-token-list {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  list-style: none;
-  margin-bottom: 0;
-  padding-left: 0;
-}
-
-.add-issuable-form-token-list-item {
-  max-width: 100%;
-  margin-bottom: $gl-vert-padding;
-  margin-right: 5px;
-}
-
-.add-issuable-form-input-list-item {
-  flex: 1;
-  min-width: 200px;
-  margin-bottom: $gl-vert-padding;
-}
-
-.add-issuable-form-input {
-  width: 100%;
-  border: 0;
-
-  &:focus {
-    outline: none;
+.add-issuable-form-input-wrapper {
+  &.focus {
+    border-color: $blue-300;
+    box-shadow: 0 0 4px $dropdown-input-focus-shadow;
   }
-}
 
-.add-issuable-form-actions {
-  margin-top: $gl-padding;
+  .gl-show-field-errors &.form-control:not(textarea) {
+    height: auto;
+  }
 }
 
 .time-tracker {
@@ -839,18 +789,7 @@
   }
 
   .compare-display-container {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 5px;
-
-    .compare-display {
-      font-size: 13px;
-      color: $compare-display-color;
-
-      .compare-value {
-        color: $gl-text-color;
-      }
-    }
+    font-size: 13px;
   }
 
   .time-tracking-help-state {
@@ -938,22 +877,6 @@
   vertical-align: sub;
 }
 
-.suggestion-confidential {
-  color: $orange-500;
-}
-
-.suggestion-state-open {
-  color: $green-500;
-}
-
-.suggestion-state-closed {
-  color: $blue-500;
-}
-
-.suggestion-help-hover {
-  cursor: help;
-}
-
 .suggestion-footer {
   font-size: 12px;
   line-height: 15px;
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 461d6a29b3a..880231f5644 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -1,42 +1,62 @@
-.issue-realtime-pre-pulse {
-  opacity: 0;
-}
+.issue-token-link {
+  &[href] {
+    color: $blue-600;
+  }
 
-.issue-realtime-trigger-pulse {
-  transition: opacity $fade-in-duration linear;
-  opacity: 1;
+  &:hover,
+  &:focus {
+    outline: none;
+    text-decoration: none;
+  }
 }
 
-.check-all-holder {
-  line-height: 36px;
-  float: left;
-  margin-right: 15px;
-}
+.issue-token-reference {
+  margin-right: 1px;
+  background-color: $gray-lighter;
+  transition: background $general-hover-transition-duration $general-hover-transition-curve, color $general-hover-transition-duration $general-hover-transition-curve;
 
-form.edit-issue {
-  margin: 0;
+  .issue-token:hover &,
+  .issue-token-link:focus > & {
+    background-color: $gray-normal;
+    color: $blue-800;
+    text-decoration: none;
+  }
 }
 
-ul.related-merge-requests > li {
-  display: flex;
-  align-items: center;
+.issue-token-title {
+  background-color: $gray-normal;
+  transition: background $general-hover-transition-duration $general-hover-transition-curve;
 
-  .merge-request-id {
-    flex-shrink: 0;
+  .issue-token:hover &,
+  .issue-token-link:focus > & {
+    background-color: $border-gray-normal;
   }
+}
 
-  .merge-request-info {
-    margin-left: 5px;
-  }
+.issue-token-remove-button {
+  background-color: $gray-normal;
+  transition: background $general-hover-transition-duration $general-hover-transition-curve;
 
-  gl-emoji {
-    font-size: 1em;
+  &:hover,
+  &:focus,
+  .issue-token:hover &,
+  .issue-token-link:focus + & {
+    background-color: $border-gray-normal;
+    outline: none;
   }
 }
 
-.related-branches-title {
-  font-size: 16px;
-  font-weight: $gl-font-weight-bold;
+.issue-realtime-pre-pulse {
+  opacity: 0;
+}
+
+.issue-realtime-trigger-pulse {
+  transition: opacity $fade-in-duration linear;
+  opacity: 1;
+}
+
+ul.related-merge-requests > li gl-emoji {
+  font-size: 1em;
 }
 
 .merge-request-status {
@@ -92,35 +112,12 @@ ul.related-merge-requests > li {
   }
 }
 
-.issues-footer {
-  padding-top: $gl-padding;
-  padding-bottom: 37px;
-}
-
-.issues-nav-controls,
-.new-branch-col {
-  font-size: 0;
-}
-
 .issues-nav-controls {
   .btn-group:empty {
     display: none;
   }
 }
 
-.email-modal-input-group {
-  margin-bottom: 10px;
-
-  .form-control {
-    background-color: $white;
-  }
-
-  .btn {
-    background-color: $gray-light;
-    border: 1px solid $border-gray-normal;
-  }
-}
-
 .recaptcha {
   margin-bottom: 30px;
 }
diff --git a/app/assets/stylesheets/pages/issues/issue_count_badge.scss b/app/assets/stylesheets/pages/issues/issue_count_badge.scss
deleted file mode 100644
index f2283e02ad2..00000000000
--- a/app/assets/stylesheets/pages/issues/issue_count_badge.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.issue-count-badge,
-.mr-count-badge {
-  padding: 5px $gl-padding-8;
-}
-
-.issue-count-badge-count,
-.mr-count-badge-count {
-  display: inline-flex;
-  align-items: center;
-}
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index 773935f4c76..71ddbf175e9 100644
--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -99,11 +99,6 @@
       padding: 0;
       border: 0;
       background: none;
-      margin-bottom: $gl-padding;
-    }
-
-    .omniauth-btn {
-      width: 100%;
     }
   }
 
@@ -206,6 +201,12 @@
   padding: 0;
   height: 100%;
 
+  &.with-system-header {
+    .login-page-broadcast {
+      margin-top: $system-header-height + $header-height;
+    }
+  }
+
   // Fixes footer container to bottom of viewport
   body {
     // offset height of fixed header + 1 to avoid scroll
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 071a5be073f..cec8d8a29cc 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -474,31 +474,6 @@ $tabs-holder-z-index: 250;
       }
     }
   }
-
-  .merge-request-labels {
-    display: inline-block;
-  }
-}
-
-.merge-request-angle {
-  text-align: center;
-  margin: 0 auto;
-  font-size: 2em;
-  line-height: 1.1;
-}
-
-// hide mr close link for inline diff comment form
-.diff-file .close-mr-link,
-.diff-file .reopen-mr-link {
-  display: none;
-}
-
-.mr-links {
-  padding-left: $gl-padding-8 + $status-icon-size + $gl-btn-padding;
-
-  &:last-child {
-    padding-bottom: $gl-padding;
-  }
 }
 
 .mr-info-list {
@@ -649,10 +624,6 @@ $tabs-holder-z-index: 250;
   }
 }
 
-.target-branch-select-dropdown-container {
-  position: relative;
-}
-
 .assign-to-me-link {
   padding-left: 12px;
   white-space: nowrap;
@@ -667,12 +638,6 @@ $tabs-holder-z-index: 250;
   }
 }
 
-.merged-buttons {
-  .btn {
-    float: left;
-  }
-}
-
 .mr-version-controls {
   position: relative;
   z-index: $tabs-holder-z-index + 10;
@@ -1040,3 +1005,17 @@ $tabs-holder-z-index: 250;
     margin-bottom: 1px;
   }
 }
+
+.mr-widget-extension-icon::before {
+  @include gl-content-empty;
+  @include gl-absolute;
+  @include gl-left-0;
+  @include gl-top-0;
+  @include gl-opacity-3;
+  @include gl-border-solid;
+  @include gl-border-4;
+  @include gl-rounded-full;
+
+  width: 24px;
+  height: 24px;
+}
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 3c0f10eb5cb..1c408f6d985 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -24,12 +24,6 @@
     margin: $gl-padding 0 0;
   }
 
-  .note-preview-holder {
-    > p {
-      overflow-x: auto;
-    }
-  }
-
   img {
     max-width: 100%;
   }
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 17bc40b4dec..04da75b586f 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -125,18 +125,17 @@ $system-note-svg-size: 16px;
     }
   }
 
+  .timeline-discussion-body {
+    margin-top: -$gl-padding-8;
+  }
+
   .discussion {
     display: block;
     position: relative;
 
     .timeline-discussion-body {
-      margin-top: -$gl-padding-8;
       overflow-x: auto;
       overflow-y: hidden;
-
-      .note-body {
-        margin-top: $gl-padding-8;
-      }
     }
 
     .diff-content {
@@ -586,17 +585,47 @@ $system-note-svg-size: 16px;
 .note-header {
   display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
+
+  > .note-header-info,
+  > .note-actions {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+}
+
+.note {
+  @include notes-media('max', map-get($grid-breakpoints, sm) - 1) {
+    .note-header {
+      .note-actions {
+        flex-wrap: wrap;
+        margin-bottom: $gl-padding-12;
+
+        > :first-child {
+          margin-left: 0;
+        }
+      }
+    }
+
+    .note-header-author-name {
+      display: block;
+    }
+  }
 }
 
 .note-header-info {
   min-width: 0;
-  padding-bottom: $gl-padding-8;
 
   &.discussion {
     padding-bottom: 0;
   }
 }
 
+.note-header-info,
+.note-actions {
+  padding-bottom: $gl-padding-8;
+}
+
 .system-note .note-header-info {
   padding-bottom: 0;
 }
@@ -667,7 +696,8 @@ $system-note-svg-size: 16px;
 
 .note-actions {
   align-self: flex-start;
-  flex-shrink: 0;
+  justify-content: flex-end;
+  flex-shrink: 1;
   display: inline-flex;
   align-items: center;
   margin-left: 10px;
diff --git a/app/assets/stylesheets/pages/notifications.scss b/app/assets/stylesheets/pages/notifications.scss
index 298de33888d..2fd2757cf08 100644
--- a/app/assets/stylesheets/pages/notifications.scss
+++ b/app/assets/stylesheets/pages/notifications.scss
@@ -4,11 +4,6 @@
       width: 100%;
     }
 
-    .notification-form {
-      display: block;
-    }
-
-    .notifications-btn,
     .btn-group {
       width: 100%;
     }
diff --git a/app/assets/stylesheets/pages/pages.scss b/app/assets/stylesheets/pages/pages.scss
index 93caa345f8a..ebaf875ad8f 100644
--- a/app/assets/stylesheets/pages/pages.scss
+++ b/app/assets/stylesheets/pages/pages.scss
@@ -55,16 +55,4 @@
     border-bottom-right-radius: $border-radius-default;
     border-top-right-radius: $border-radius-default;
   }
-
-  &.floating-status-badge {
-    position: absolute;
-    right: $gl-padding-24;
-    bottom: $gl-padding-4;
-    margin-bottom: 0;
-  }
-}
-
-.form-control.has-floating-status-badge {
-  position: relative;
-  padding-right: 120px;
 }
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index de9e0c6f705..af9f10c9a26 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -1,9 +1,3 @@
-.profile-avatar-form-option {
-  hr {
-    margin: 10px 0;
-  }
-}
-
 .avatar-image {
   margin-bottom: $grid-size;
 
@@ -23,41 +17,6 @@
   display: inline-block;
 }
 
-.private-tokens-reset div.reset-action:not(:first-child) {
-  padding-top: 15px;
-}
-
-.oauth-buttons {
-  .btn-group {
-    margin-right: 10px;
-  }
-
-  .btn {
-    line-height: 40px;
-    height: 42px;
-    padding: 0 12px;
-
-    img {
-      width: 32px;
-      height: 32px;
-    }
-  }
-}
-
-// Profile > Account > Two Factor Authentication
-.two-factor-new {
-  .manual-instructions {
-    h3 {
-      margin-top: 0;
-    }
-
-    // Slightly increase the size of the details so they're easier to read
-    dl {
-      font-size: 1.1em;
-    }
-  }
-}
-
 .account-well {
   padding: 10px;
   background-color: $gray-light;
@@ -191,10 +150,6 @@
   }
 }
 
-.personal-access-tokens-never-expires-label {
-  color: $note-disabled-comment-color;
-}
-
 .created-personal-access-token-container {
   .btn-clipboard {
     border: 1px solid $border-color;
@@ -266,8 +221,7 @@
   }
 }
 
-table.u2f-registrations,
-.webauthn-registrations {
+table.u2f-registrations {
   th:not(:last-child),
   td:not(:last-child) {
     border-right: solid 1px transparent;
diff --git a/app/assets/stylesheets/pages/profiles/preferences.scss b/app/assets/stylesheets/pages/profiles/preferences.scss
index 12386fa66ec..b583d40de79 100644
--- a/app/assets/stylesheets/pages/profiles/preferences.scss
+++ b/app/assets/stylesheets/pages/profiles/preferences.scss
@@ -1,19 +1,3 @@
-.multi-file-editor-options {
-  label {
-    margin-right: 20px;
-    text-align: center;
-  }
-
-  .preview {
-    font-size: 0;
-
-    img {
-      border: 1px solid $border-color-settings;
-      border-radius: 4px;
-    }
-  }
-}
-
 .application-theme {
   $ui-dark-bg: #2e2e2e;
   $ui-light-bg: #dfdfdf;
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index c330e0709a6..6b4d7c2520c 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -622,12 +622,6 @@ pre.light-well {
     }
   }
 
-  .star-button {
-    .icon {
-      top: 0;
-    }
-  }
-
   .icon-container {
     @include media-breakpoint-down(xs) {
       margin-right: $gl-padding-8;
@@ -938,16 +932,6 @@ pre.light-well {
   }
 }
 
-.project-ci-linter {
-  .ci-editor {
-    height: 400px;
-  }
-
-  .ci-template pre {
-    white-space: pre-wrap;
-  }
-}
-
 .project-badge {
   opacity: 0.9;
 
diff --git a/app/assets/stylesheets/pages/prometheus.scss b/app/assets/stylesheets/pages/prometheus.scss
index a3b6cbdff25..71cbd7d9613 100644
--- a/app/assets/stylesheets/pages/prometheus.scss
+++ b/app/assets/stylesheets/pages/prometheus.scss
@@ -96,11 +96,6 @@
   padding: $gl-padding-8;
 }
 
-.prometheus-graph-embed {
-  border: 1px solid $border-color;
-  border-radius: $border-radius-default;
-}
-
 .alert-current-setting {
   max-width: 240px;
 
@@ -110,233 +105,6 @@
   }
 }
 
-.prometheus-graph-cursor {
-  position: absolute;
-  background: $gray-400;
-  width: 1px;
-}
-
-.prometheus-graph-flag {
-  display: block;
-  min-width: 160px;
-  border: 0;
-  box-shadow: 0 1px 4px 0 $black-transparent;
-
-  h5 {
-    padding: 0;
-    margin: 0;
-    font-size: 14px;
-    line-height: 1.2;
-  }
-
-  .deploy-meta-content {
-    border-bottom: 1px solid $white-dark;
-
-    svg {
-      height: 15px;
-      vertical-align: bottom;
-    }
-  }
-
-  &.popover {
-    padding: 0;
-
-    &.left {
-      left: auto;
-      right: 0;
-      margin-right: 10px;
-
-      > .arrow {
-        right: -14px;
-        border-left-color: $border-color;
-      }
-
-      > .arrow::after {
-        border-top: 6px solid transparent;
-        border-bottom: 6px solid transparent;
-        border-left: 4px solid $gray-10;
-      }
-
-      .arrow-shadow {
-        right: -3px;
-        box-shadow: 1px 0 9px 0 $black-transparent;
-      }
-    }
-
-    &.right {
-      left: 0;
-      right: auto;
-      margin-left: 10px;
-
-      > .arrow {
-        left: -7px;
-        border-right-color: $border-color;
-      }
-
-      > .arrow::after {
-        border-top: 6px solid transparent;
-        border-bottom: 6px solid transparent;
-        border-right: 4px solid $gray-10;
-      }
-
-      .arrow-shadow {
-        left: -3px;
-        box-shadow: 1px 0 8px 0 $black-transparent;
-      }
-    }
-
-    > .arrow {
-      top: 10px;
-      margin: 0;
-    }
-
-    .arrow-shadow {
-      content: '';
-      position: absolute;
-      width: 7px;
-      height: 7px;
-      background-color: transparent;
-      transform: rotate(45deg);
-      top: 13px;
-    }
-
-    > .popover-title,
-    > .popover-content,
-    > .popover-header,
-    > .popover-body {
-      padding: 8px;
-      white-space: nowrap;
-      position: relative;
-    }
-
-    > .popover-title {
-      background-color: $gray-10;
-      border-radius: $border-radius-default $border-radius-default 0 0;
-    }
-  }
-
-  strong {
-    font-weight: 600;
-  }
-}
-
-.prometheus-table {
-  border-collapse: collapse;
-  padding: 0;
-  margin: 0;
-
-  td {
-    vertical-align: middle;
-
-    + td {
-      padding-left: 8px;
-      vertical-align: top;
-    }
-  }
-
-  .legend-metric-title {
-    font-size: 12px;
-    vertical-align: middle;
-  }
-}
-
-.prometheus-svg-container {
-  position: relative;
-  height: 0;
-  width: 100%;
-  padding: 0;
-  padding-bottom: 100%;
-
-  .text-metric-usage {
-    fill: $black;
-    font-weight: $gl-font-weight-normal;
-    font-size: 12px;
-  }
-
-  > svg {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    left: 0;
-    top: 0;
-
-    text {
-      fill: $gl-text-color;
-      stroke-width: 0;
-    }
-
-    .text-metric-bold {
-      font-weight: $gl-font-weight-bold;
-    }
-
-    .label-axis-text {
-      fill: $black;
-      font-weight: $gl-font-weight-normal;
-      font-size: 10px;
-    }
-
-    .legend-axis-text {
-      fill: $black;
-    }
-
-    .tick {
-      > line {
-        stroke: $gray-darker;
-      }
-
-      > text {
-        fill: $gray-400;
-        font-size: 10px;
-      }
-    }
-
-    .y-label-text,
-    .x-label-text {
-      fill: $gray-darkest;
-    }
-
-    .axis-tick {
-      stroke: $gray-darker;
-    }
-
-    .deploy-info-text {
-      dominant-baseline: text-before-edge;
-      font-size: 12px;
-    }
-
-    .deploy-info-text-link {
-      font-family: $monospace-font;
-      fill: $blue-600;
-
-      &:hover {
-        fill: $blue-800;
-      }
-    }
-
-    @include media-breakpoint-down(sm) {
-      .label-axis-text,
-      .text-metric-usage,
-      .legend-axis-text {
-        font-size: 8px;
-      }
-
-      .tick > text {
-        font-size: 8px;
-      }
-    }
-  }
-}
-
-.prometheus-table-row-highlight {
-  background-color: $gray-100;
-}
-
-.prometheus-graph-overlay {
-  fill: none;
-  opacity: 0;
-  pointer-events: all;
-}
-
 .prometheus-panel-builder {
   .preview-date-time-picker {
     // same as in .dropdown-menu-toggle
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index aa9ebfe2968..37e272cfff7 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -154,17 +154,6 @@
   }
 }
 
-.token-token-container {
-  #impersonation-token-token {
-    width: 80%;
-    display: inline;
-  }
-
-  .btn-clipboard {
-    margin-left: 5px;
-  }
-}
-
 .visibility-level-setting {
   .form-check {
     margin-bottom: 10px;
@@ -203,22 +192,6 @@
   }
 }
 
-.initialize-with-readme-setting {
-  .form-check {
-    margin-bottom: 10px;
-
-    .option-title {
-      font-weight: $gl-font-weight-normal;
-      display: inline-block;
-      color: $gl-text-color;
-    }
-
-    .option-description {
-      color: $project-option-descr-color;
-    }
-  }
-}
-
 .nested-settings {
   padding-left: 20px;
 }
@@ -326,10 +299,6 @@
   }
 }
 
-.personal-access-tokens-never-expires-label {
-  color: $note-disabled-comment-color;
-}
-
 .created-deploy-token-container {
   .deploy-token-field {
     width: 90%;
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index 5765156f26c..33c66648718 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -223,11 +223,6 @@
   min-height: 200px;
 }
 
-.upload-link {
-  font-weight: $gl-font-weight-normal;
-  color: $blue-600;
-}
-
 .repo-charts {
   .sub-header {
     margin: 20px 0;
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
index b7958cdf4a3..d436c328921 100644
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -5,20 +5,17 @@
 body.gl-dark {
   --gray-50: #303030;
   --gray-100: #404040;
+  --gray-900: #fafafa;
   --gray-950: #fff;
   --green-100: #0d532a;
   --green-400: #108548;
   --green-700: #91d4a8;
   --blue-400: #1f75cb;
   --orange-400: #ab6100;
-  --purple-100: #2f2a6b;
   --gl-text-color: #fafafa;
   --border-color: #4f4f4f;
   --black: #fff;
 }
-.nav-sidebar li.active {
-  box-shadow: none;
-}
 :root {
   --white: #333;
 }
@@ -198,22 +195,6 @@ h1 {
 .dropdown {
   position: relative;
 }
-.dropdown-menu-toggle {
-  white-space: nowrap;
-}
-.dropdown-menu-toggle::after {
-  display: inline-block;
-  margin-left: 0.255em;
-  vertical-align: 0.255em;
-  content: "";
-  border-top: 0.3em solid;
-  border-right: 0.3em solid transparent;
-  border-bottom: 0;
-  border-left: 0.3em solid transparent;
-}
-.dropdown-menu-toggle:empty::after {
-  margin-left: 0;
-}
 .dropdown-menu {
   position: absolute;
   top: 100%;
@@ -331,6 +312,9 @@ h1 {
   padding-left: 0.6em;
   border-radius: 10rem;
 }
+.bg-transparent {
+  background-color: transparent !important;
+}
 .rounded-circle {
   border-radius: 50% !important;
 }
@@ -375,6 +359,20 @@ h1 {
 .m-auto {
   margin: auto !important;
 }
+.gl-badge {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.gl-button .gl-badge {
+  top: 0;
+}
 .gl-form-input,
 .gl-form-input.form-control {
   background-color: #333;
@@ -466,9 +464,6 @@ a {
 .hide {
   display: none;
 }
-.dropdown-menu-toggle::after {
-  display: none;
-}
 .badge:not(.gl-badge) {
   padding: 4px 5px;
   font-size: 12px;
@@ -548,7 +543,7 @@ body {
   border-radius: 0.25rem;
   white-space: nowrap;
 }
-.no-outline.dropdown-menu-toggle {
+.dropdown-menu-toggle.no-outline {
   outline: 0;
 }
 .dropdown-menu-toggle.dropdown-menu-toggle {
@@ -875,6 +870,12 @@ input {
 .navbar-nav .badge.badge-pill:not(.merge-request-badge).todos-count {
   background-color: var(--blue-400, #1f75cb);
 }
+.title-container .canary-badge .badge,
+.navbar-nav .canary-badge .badge {
+  font-size: 12px;
+  line-height: 16px;
+  padding: 0 0.5rem;
+}
 @media (max-width: 575.98px) {
   .navbar-gitlab .container-fluid {
     font-size: 18px;
@@ -1280,6 +1281,7 @@ input {
   a
   .avatar-container.rect-avatar
   .avatar.s32 {
+  border-radius: 4px;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
 .sidebar-top-level-items {
@@ -1304,6 +1306,7 @@ input {
   a
   .avatar-container.rect-avatar
   .avatar.s32 {
+  border-radius: 4px;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
 .sidebar-top-level-items > li .badge.badge-pill {
@@ -1601,19 +1604,98 @@ svg.s16 {
 .rect-avatar.s16 {
   border-radius: 2px;
 }
-.rect-avatar.s32,
-.nav-sidebar-inner-scroll
-  > div.context-header
-  a
-  .avatar-container.rect-avatar
-  .avatar.s32,
-.sidebar-top-level-items
-  .context-header
-  a
-  .avatar-container.rect-avatar
-  .avatar.s32 {
+.rect-avatar.s32 {
   border-radius: 4px;
 }
+body.gl-dark {
+  --gray-10: #1f1f1f;
+  --gray-50: #303030;
+  --gray-100: #404040;
+  --gray-200: #525252;
+  --gray-300: #5e5e5e;
+  --gray-400: #868686;
+  --gray-500: #999;
+  --gray-600: #bfbfbf;
+  --gray-700: #dbdbdb;
+  --gray-800: #f0f0f0;
+  --gray-900: #fafafa;
+  --gray-950: #fff;
+  --green-50: #0a4020;
+  --green-100: #0d532a;
+  --green-200: #24663b;
+  --green-300: #217645;
+  --green-400: #108548;
+  --green-500: #2da160;
+  --green-600: #52b87a;
+  --green-700: #91d4a8;
+  --green-800: #c3e6cd;
+  --green-900: #ecf4ee;
+  --green-950: #f1fdf6;
+  --blue-50: #033464;
+  --blue-100: #064787;
+  --blue-200: #0b5cad;
+  --blue-300: #1068bf;
+  --blue-400: #1f75cb;
+  --blue-500: #428fdc;
+  --blue-600: #63a6e9;
+  --blue-700: #9dc7f1;
+  --blue-800: #cbe2f9;
+  --blue-900: #e9f3fc;
+  --blue-950: #f2f9ff;
+  --orange-50: #5c2900;
+  --orange-100: #703800;
+  --orange-200: #8f4700;
+  --orange-300: #9e5400;
+  --orange-400: #ab6100;
+  --orange-500: #c17d10;
+  --orange-600: #d99530;
+  --orange-700: #e9be74;
+  --orange-800: #f5d9a8;
+  --orange-900: #fdf1dd;
+  --orange-950: #fff4e1;
+  --red-50: #660e00;
+  --red-100: #8d1300;
+  --red-200: #ae1800;
+  --red-300: #c91c00;
+  --red-400: #dd2b0e;
+  --red-500: #ec5941;
+  --red-600: #f57f6c;
+  --red-700: #fcb5aa;
+  --red-800: #fdd4cd;
+  --red-900: #fcf1ef;
+  --red-950: #fff4f3;
+  --indigo-50: #1a1a40;
+  --indigo-100: #292961;
+  --indigo-200: #393982;
+  --indigo-300: #4b4ba3;
+  --indigo-400: #5b5bbd;
+  --indigo-500: #6666c4;
+  --indigo-600: #7c7ccc;
+  --indigo-700: #a6a6de;
+  --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;
+  --purple-300: #5943b6;
+  --purple-400: #694cc0;
+  --purple-500: #7b58cf;
+  --purple-600: #9475db;
+  --purple-700: #ac93e6;
+  --purple-800: #cbbbf2;
+  --purple-900: #e1d8f9;
+  --purple-950: #f4f0ff;
+  --gl-text-color: #fafafa;
+  --border-color: #4f4f4f;
+  --white: #333;
+  --black: #fff;
+  --svg-status-bg: #333;
+}
+.nav-sidebar li.active {
+  box-shadow: none;
+}
 body.gl-dark .navbar-gitlab {
   background-color: #fafafa;
 }
@@ -1703,8 +1785,8 @@ body.gl-dark .nav-sidebar li.active > a {
 body.gl-dark .nav-sidebar .fly-out-top-item a,
 body.gl-dark .nav-sidebar .fly-out-top-item.active a,
 body.gl-dark .nav-sidebar .fly-out-top-item .fly-out-top-item-container {
-  background-color: var(--purple-100, #e1d8f9);
-  color: var(--black, #333);
+  background-color: var(--gray-100, #303030);
+  color: var(--gray-900, #fafafa);
 }
 body.gl-dark .logo-text svg {
   fill: var(--gl-text-color);
@@ -1823,9 +1905,6 @@ body.gl-dark {
   --black: #fff;
   --svg-status-bg: #333;
 }
-.nav-sidebar li.active {
-  box-shadow: none;
-}
 .tab-width-8 {
   -moz-tab-size: 8;
   tab-size: 8;
@@ -1841,9 +1920,18 @@ body.gl-dark {
   white-space: nowrap;
   width: 1px;
 }
+.gl-bg-green-500 {
+  background-color: #2da160;
+}
 .gl-border-none\! {
   border-style: none !important;
 }
+.gl-rounded-pill {
+  border-radius: 0.75rem;
+}
+.gl-text-white {
+  color: #333;
+}
 .gl-display-none {
   display: none;
 }
@@ -1862,6 +1950,10 @@ body.gl-dark {
 .gl-pr-2 {
   padding-right: 0.25rem;
 }
+.gl-py-1 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
 .gl-ml-3 {
   margin-left: 0.5rem;
 }
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index 2c79b819899..40026c95a15 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -178,22 +178,6 @@ h1 {
 .dropdown {
   position: relative;
 }
-.dropdown-menu-toggle {
-  white-space: nowrap;
-}
-.dropdown-menu-toggle::after {
-  display: inline-block;
-  margin-left: 0.255em;
-  vertical-align: 0.255em;
-  content: "";
-  border-top: 0.3em solid;
-  border-right: 0.3em solid transparent;
-  border-bottom: 0;
-  border-left: 0.3em solid transparent;
-}
-.dropdown-menu-toggle:empty::after {
-  margin-left: 0;
-}
 .dropdown-menu {
   position: absolute;
   top: 100%;
@@ -311,6 +295,9 @@ h1 {
   padding-left: 0.6em;
   border-radius: 10rem;
 }
+.bg-transparent {
+  background-color: transparent !important;
+}
 .rounded-circle {
   border-radius: 50% !important;
 }
@@ -355,6 +342,20 @@ h1 {
 .m-auto {
   margin: auto !important;
 }
+.gl-badge {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.gl-button .gl-badge {
+  top: 0;
+}
 .gl-form-input,
 .gl-form-input.form-control {
   background-color: #fff;
@@ -446,9 +447,6 @@ a {
 .hide {
   display: none;
 }
-.dropdown-menu-toggle::after {
-  display: none;
-}
 .badge:not(.gl-badge) {
   padding: 4px 5px;
   font-size: 12px;
@@ -528,7 +526,7 @@ body {
   border-radius: 0.25rem;
   white-space: nowrap;
 }
-.no-outline.dropdown-menu-toggle {
+.dropdown-menu-toggle.no-outline {
   outline: 0;
 }
 .dropdown-menu-toggle.dropdown-menu-toggle {
@@ -855,6 +853,12 @@ input {
 .navbar-nav .badge.badge-pill:not(.merge-request-badge).todos-count {
   background-color: var(--blue-400, #428fdc);
 }
+.title-container .canary-badge .badge,
+.navbar-nav .canary-badge .badge {
+  font-size: 12px;
+  line-height: 16px;
+  padding: 0 0.5rem;
+}
 @media (max-width: 575.98px) {
   .navbar-gitlab .container-fluid {
     font-size: 18px;
@@ -1260,6 +1264,7 @@ input {
   a
   .avatar-container.rect-avatar
   .avatar.s32 {
+  border-radius: 4px;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
 .sidebar-top-level-items {
@@ -1284,6 +1289,7 @@ input {
   a
   .avatar-container.rect-avatar
   .avatar.s32 {
+  border-radius: 4px;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
 .sidebar-top-level-items > li .badge.badge-pill {
@@ -1581,17 +1587,7 @@ svg.s16 {
 .rect-avatar.s16 {
   border-radius: 2px;
 }
-.rect-avatar.s32,
-.nav-sidebar-inner-scroll
-  > div.context-header
-  a
-  .avatar-container.rect-avatar
-  .avatar.s32,
-.sidebar-top-level-items
-  .context-header
-  a
-  .avatar-container.rect-avatar
-  .avatar.s32 {
+.rect-avatar.s32 {
   border-radius: 4px;
 }
 
@@ -1610,9 +1606,18 @@ svg.s16 {
   white-space: nowrap;
   width: 1px;
 }
+.gl-bg-green-500 {
+  background-color: #108548;
+}
 .gl-border-none\! {
   border-style: none !important;
 }
+.gl-rounded-pill {
+  border-radius: 0.75rem;
+}
+.gl-text-white {
+  color: #fff;
+}
 .gl-display-none {
   display: none;
 }
@@ -1631,6 +1636,10 @@ svg.s16 {
 .gl-pr-2 {
   padding-right: 0.25rem;
 }
+.gl-py-1 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
 .gl-ml-3 {
   margin-left: 0.5rem;
 }
diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss
index 013ad3fac87..8d7531d6c9c 100644
--- a/app/assets/stylesheets/startup/startup-signin.scss
+++ b/app/assets/stylesheets/startup/startup-signin.scss
@@ -258,21 +258,6 @@ fieldset:disabled a.btn {
   align-items: center;
   justify-content: space-between;
 }
-.d-block {
-  display: block !important;
-}
-.d-flex {
-  display: flex !important;
-}
-.flex-wrap {
-  flex-wrap: wrap !important;
-}
-.justify-content-between {
-  justify-content: space-between !important;
-}
-.align-items-center {
-  align-items: center !important;
-}
 .fixed-top {
   position: fixed;
   top: 0;
@@ -280,9 +265,6 @@ fieldset:disabled a.btn {
   left: 0;
   z-index: 1030;
 }
-.ml-2 {
-  margin-left: 0.5rem !important;
-}
 .mt-3 {
   margin-top: 1rem !important;
 }
@@ -349,6 +331,15 @@ fieldset:disabled a.btn {
   font-size: 0.875rem;
   border-radius: 0.25rem;
 }
+.gl-button.gl-button .gl-button-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  margin-top: -1px;
+  margin-bottom: -1px;
+}
 .gl-button.gl-button .gl-button-icon {
   height: 1rem;
   width: 1rem;
@@ -637,10 +628,6 @@ svg {
   padding: 0;
   border: 0;
   background: none;
-  margin-bottom: 16px;
-}
-.login-page .omniauth-container .omniauth-btn {
-  width: 100%;
 }
 .login-page .new-session-tabs {
   display: flex;
@@ -771,21 +758,18 @@ svg {
 .gl-align-items-center {
   align-items: center;
 }
+.gl-flex-wrap {
+  flex-wrap: wrap;
+}
 .gl-w-full {
   width: 100%;
 }
-.gl-p-2 {
-  padding: 0.25rem;
-}
 .gl-p-4 {
   padding: 0.75rem;
 }
 .gl-mt-2 {
   margin-top: 0.25rem;
 }
-.gl-mb-2 {
-  margin-bottom: 0.25rem;
-}
 .gl-mb-3 {
   margin-bottom: 0.5rem;
 }
@@ -797,8 +781,8 @@ svg {
     margin-top: 0;
   }
 }
-.gl-text-left {
-  text-align: left;
+.gl-font-weight-bold {
+  font-weight: 600;
 }
 
 @import "startup/cloaking";
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss
index f12b2ee2591..c79816e3579 100644
--- a/app/assets/stylesheets/themes/_dark.scss
+++ b/app/assets/stylesheets/themes/_dark.scss
@@ -202,7 +202,8 @@ body.gl-dark {
     &.btn-info,
     &.btn-success,
     &.btn-danger,
-    &.btn-warning {
+    &.btn-warning,
+    &.btn-confirm {
       &-tertiary {
         mix-blend-mode: screen;
       }
@@ -256,53 +257,3 @@ $line-removed-dark: $red-200;
 
 $well-expand-item: $gray-200;
 $well-inner-border: $gray-200;
-
-// Misc component overrides that should live elsewhere
-.gl-label {
-  filter: brightness(0.9) contrast(1.1);
-
-  // This applies to the gl-label markups
-  // rendered and cached in the backend (labels_helper.rb)
-  &.gl-label-scoped {
-    .gl-label-text-scoped,
-    .gl-label-close {
-      color: $gray-900;
-    }
-  }
-}
-
-// white-ish text for light labels
-.gl-label-text-light.gl-label-text-light {
-  color: $gray-900;
-}
-
-.gl-label-text-dark.gl-label-text-dark {
-  color: $gray-10;
-}
-
-// This applies to "gl-labels" from "gitlab-ui"
-.gl-label.gl-label-scoped.gl-label-text-dark,
-.gl-label.gl-label-scoped.gl-label-text-light {
-  .gl-label-text-scoped,
-  .gl-label-close {
-    color: $gray-900;
-  }
-}
-
-// duplicated class as the original .atwho-view style is added later
-.atwho-view.atwho-view {
-  background-color: $white;
-  color: $gray-900;
-  border-color: $gray-800;
-}
-
-.nav-sidebar {
-  li.active {
-    box-shadow: none;
-  }
-
-  .sidebar-sub-level-items.fly-out-list {
-    box-shadow: none;
-    border: 1px solid $border-color;
-  }
-}
diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss
new file mode 100644
index 00000000000..b77048174c9
--- /dev/null
+++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss
@@ -0,0 +1,116 @@
+@import './themes/dark';
+@import 'page_bundles/mixins_and_variables_and_functions';
+@import './themes/theme_helper';
+
+// Some hacks and overrides for things that don't properly support dark mode
+.gl-label {
+  filter: brightness(0.9) contrast(1.1);
+
+  // This applies to the gl-label markups
+  // rendered and cached in the backend (labels_helper.rb)
+  &.gl-label-scoped {
+    .gl-label-text-scoped,
+    .gl-label-close {
+      color: $gray-900;
+    }
+  }
+}
+
+// white-ish text for light labels
+.gl-label-text-light.gl-label-text-light {
+  color: $gray-900;
+}
+
+.gl-label-text-dark.gl-label-text-dark {
+  color: $gray-10;
+}
+
+// This applies to "gl-labels" from "gitlab-ui"
+.gl-label.gl-label-scoped.gl-label-text-dark,
+.gl-label.gl-label-scoped.gl-label-text-light {
+  .gl-label-text-scoped,
+  .gl-label-close {
+    color: $gray-900;
+  }
+}
+
+// duplicated class as the original .atwho-view style is added later
+.atwho-view.atwho-view {
+  background-color: $white;
+  color: $gray-900;
+  border-color: $gray-800;
+}
+
+.nav-sidebar {
+  li.active {
+    box-shadow: none;
+  }
+
+  .sidebar-sub-level-items.fly-out-list {
+    box-shadow: none;
+    border: 1px solid $border-color;
+  }
+}
+
+body.gl-dark {
+  @include gitlab-theme($gray-900, $gray-400, $gray-500, $gray-800, $gray-900, $white);
+
+  .logo-text svg {
+    fill: var(--gl-text-color);
+  }
+
+  .navbar-gitlab {
+    background-color: var(--gray-50);
+    box-shadow: 0 1px 0 0 var(--gray-100);
+
+    .navbar-sub-nav,
+    .navbar-nav {
+      li {
+        > a:hover,
+        > a:focus,
+        > button:hover,
+        > button:focus {
+          color: var(--gl-text-color);
+          background-color: var(--gray-200);
+        }
+      }
+
+      li.active,
+      li.dropdown.show {
+        > a,
+        > button {
+          color: var(--gl-text-color);
+          background-color: var(--gray-200);
+        }
+      }
+    }
+
+    .header-search {
+      background-color: var(--gray-100) !important;
+      box-shadow: inset 0 0 0 1px var(--border-color) !important;
+
+      &:active,
+      &:hover {
+        background-color: var(--gray-100) !important;
+        box-shadow: inset 0 0 0 1px var(--blue-200) !important;
+      }
+    }
+
+    .search {
+      form {
+        background-color: var(--gray-100);
+        box-shadow: inset 0 0 0 1px var(--border-color);
+
+        &:active,
+        &:hover {
+          background-color: var(--gray-100);
+          box-shadow: inset 0 0 0 1px var(--blue-200);
+        }
+      }
+    }
+  }
+
+  .md :not(pre.code) > code {
+    background-color: $gray-200;
+  }
+}
diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss
index a9e8b238d78..1332686a906 100644
--- a/app/assets/stylesheets/themes/theme_helper.scss
+++ b/app/assets/stylesheets/themes/theme_helper.scss
@@ -212,8 +212,8 @@
       a:hover,
       &.active a,
       .fly-out-top-item-container {
-        background-color: var(--purple-100, $purple-900);
-        color: var(--black, $white);
+        background-color: var(--gray-100, $gray-50);
+        color: var(--gray-900, $gray-900);
       }
     }
   }