Add latest changes from gitlab-org/gitlab@13-5-stable-eev13.5.0-rc42

77 files changed, 2328 insertions, 2170 deletions

diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss
index f706b615e7e..a31cb0b0485 100644
--- a/app/assets/stylesheets/_page_specific_files.scss
+++ b/app/assets/stylesheets/_page_specific_files.scss
@@ -1,41 +1,27 @@
 @import './pages/admin';
 @import './pages/alert_management/details';
 @import './pages/alert_management/severity-icons';
-@import './pages/boards';
 @import './pages/branches';
 @import './pages/builds';
 @import './pages/ci_projects';
 @import './pages/clusters';
 @import './pages/commits';
-@import './pages/cycle_analytics';
 @import './pages/deploy_keys';
 @import './pages/detail_page';
-@import './pages/dev_ops_report';
-@import './pages/diff';
 @import './pages/editor';
 @import './pages/environment_logs';
-@import './pages/environments';
-@import './pages/error_details';
-@import './pages/error_list';
-@import './pages/error_tracking_list';
 @import './pages/events';
-@import './pages/experience_level';
-@import './pages/experimental_separate_sign_up';
-@import './pages/graph';
 @import './pages/groups';
 @import './pages/help';
 @import './pages/import';
 @import './pages/incident_management_list';
 @import './pages/issuable';
 @import './pages/issues/issue_count_badge';
-@import './pages/issues/issues_list';
 @import './pages/issues';
 @import './pages/labels';
 @import './pages/login';
 @import './pages/members';
-@import './pages/merge_conflicts';
 @import './pages/merge_requests';
-@import './pages/milestone';
 @import './pages/monitor';
 @import './pages/note_form';
 @import './pages/notes';
@@ -47,19 +33,14 @@
 @import './pages/profiles/preferences';
 @import './pages/projects';
 @import './pages/prometheus';
-@import './pages/reports';
 @import './pages/runners';
 @import './pages/search';
-@import './pages/serverless';
 @import './pages/service_desk';
 @import './pages/settings';
 @import './pages/settings_ci_cd';
 @import './pages/sherlock';
 @import './pages/status';
 @import './pages/storage_quota';
-@import './pages/tags';
 @import './pages/tree';
 @import './pages/trials';
-@import './pages/ui_dev_kit';
 @import './pages/users';
-@import './pages/wiki';
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 8acd338fff8..4b1139d2354 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -1,11 +1,3 @@
-/*
- * This is a manifest file that'll automatically include all the stylesheets available in this directory
- * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
- * the top of the compiled file, but it's generally better to create a new file per style scope.
- *= require_self
- *= require cropper.css
-*/
-
 // Welcome to GitLab css!
 // If you need to add or modify UI component that is common for many pages
 // like a table or typography then make changes in the framework/ directory.
@@ -36,17 +28,6 @@
 // EE-only stylesheets
 @import 'application_ee';
 
-// CSS util classes
-/**
-  These are deprecated in favor of the Gitlab UI utilities imported below.
-  Please check https://unpkg.com/browse/@gitlab/ui/src/scss/utilities.scss
-  to see the available utility classes.
-**/
-@import 'utilities';
-
-// Gitlab UI util classes
-@import '@gitlab/ui/src/scss/utilities';
-
 /* print styles */
 @media print {
   @import 'print';
diff --git a/app/assets/stylesheets/application_utilities.scss b/app/assets/stylesheets/application_utilities.scss
new file mode 100644
index 00000000000..817e983a0ec
--- /dev/null
+++ b/app/assets/stylesheets/application_utilities.scss
@@ -0,0 +1,12 @@
+@import 'page_bundles/mixins_and_variables_and_functions';
+
+// CSS util classes
+/**
+  These are deprecated in favor of the Gitlab UI utilities imported below.
+  Please check https://unpkg.com/browse/@gitlab/ui/src/scss/utilities.scss
+  to see the available utility classes.
+**/
+@import 'utilities';
+
+// Gitlab UI util classes
+@import '@gitlab/ui/src/scss/utilities';
diff --git a/app/assets/stylesheets/application_utilities_dark.scss b/app/assets/stylesheets/application_utilities_dark.scss
new file mode 100644
index 00000000000..eb32cdfc444
--- /dev/null
+++ b/app/assets/stylesheets/application_utilities_dark.scss
@@ -0,0 +1,3 @@
+@import './themes/dark';
+
+@import 'application_utilities';
diff --git a/app/assets/stylesheets/components/design_management/design.scss b/app/assets/stylesheets/components/design_management/design.scss
index 21133316291..81f2091e915 100644
--- a/app/assets/stylesheets/components/design_management/design.scss
+++ b/app/assets/stylesheets/components/design_management/design.scss
@@ -1,3 +1,6 @@
+$design-pin-diameter: 28px;
+$t-gray-a-16-design-pin: rgba($black, 0.16);
+
 .layout-page.design-detail-layout {
   max-height: 100vh;
 }
@@ -9,34 +12,61 @@
     top: 35px;
   }
 
-  .design-pin {
-    transition: opacity $gl-transition-duration-medium $general-hover-transition-curve;
-
-    &.inactive {
-      @include gl-opacity-5;
-
-      &:hover {
-        @include gl-opacity-10;
-      }
-    }
-  }
-
   .badge.badge-pill {
     display: flex;
-    height: 28px;
-    width: 28px;
-    background-color: $blue-400;
+    height: $design-pin-diameter;
+    width: $design-pin-diameter;
+    box-sizing: content-box;
+    background-color: $purple-500;
     color: $white;
-    border: $white 1px solid;
+    font-weight: $gl-font-weight-bold;
     border-radius: 50%;
+    z-index: 1;
+    padding: 0;
 
     &.resolved {
       background-color: $gray-500;
     }
   }
 
-  .design-detail-overlay-add-comment {
-    cursor: crosshair;
+  .comment-indicator {
+    border-radius: 50%;
+  }
+
+  .comment-indicator,
+  .frame .badge.badge-pill {
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  /**
+   * Design pin that overlays the design
+   */
+  .frame .badge.badge-pill {
+    box-shadow: 0 2px 4px $t-gray-a-08, 0 0 1px $t-gray-a-24;
+    border: $white 2px solid;
+    will-change: transform, box-shadow, opacity;
+    // NOTE: verbose transition property required for Safari
+    transition: transform $general-hover-transition-duration linear, box-shadow $general-hover-transition-duration linear, opacity $general-hover-transition-duration linear;
+    transform-origin: 0 0;
+    transform: translate(-50%, -50%);
+
+    &:hover {
+      transform: scale(1.2) translate(-50%, -50%);
+    }
+
+    &:active {
+      box-shadow: 0 0 4px $t-gray-a-16-design-pin, 0 4px 12px $t-gray-a-16-design-pin;
+    }
+
+    &.inactive {
+      @include gl-opacity-5;
+
+      &:hover {
+        @include gl-opacity-10;
+      }
+    }
   }
 }
 
@@ -105,8 +135,8 @@
       border-left: 1px solid $gray-100;
       position: absolute;
       left: 28px;
-      top: -18px;
-      height: 18px;
+      top: -17px;
+      height: 17px;
     }
 
     .design-note {
@@ -152,6 +182,10 @@
   }
 }
 
+.design-card-header {
+  background: transparent;
+}
+
 .design-dropzone-border {
   border: 2px dashed $gray-100;
 }
diff --git a/app/assets/stylesheets/components/rich_content_editor.scss b/app/assets/stylesheets/components/rich_content_editor.scss
index b1189137d59..d97a9bc227d 100644
--- a/app/assets/stylesheets/components/rich_content_editor.scss
+++ b/app/assets/stylesheets/components/rich_content_editor.scss
@@ -44,3 +44,11 @@
     @include gl-line-height-20;
   }
 }
+
+/**
+* Styling below ensures that YouTube videos are displayed in the editor the same as they would in about.gitlab.com
+* https://gitlab.com/gitlab-com/www-gitlab-com/-/blob/master/source/stylesheets/_base.scss#L977
+*/
+.video_container {
+  padding-bottom: 56.25%;
+}
diff --git a/app/assets/stylesheets/components/whats_new.scss b/app/assets/stylesheets/components/whats_new.scss
index 4fff900f5a5..6c58346b750 100644
--- a/app/assets/stylesheets/components/whats_new.scss
+++ b/app/assets/stylesheets/components/whats_new.scss
@@ -1,9 +1,32 @@
+.whats-new-drawer {
+  margin-top: $header-height;
+  @include gl-shadow-none;
+}
+
+.with-performance-bar .whats-new-drawer {
+  margin-top: calc(#{$performance-bar-height} + #{$header-height});
+}
+
 .gl-badge.whats-new-item-badge {
   background-color: $purple-light;
   color: $purple;
-  font-weight: bold;
+  @include gl-font-weight-bold;
 }
 
 .whats-new-item-image {
   border-color: $gray-50;
 }
+
+.whats-new-modal-backdrop {
+  z-index: 9;
+}
+
+.whats-new-notification-count {
+  @include gl-bg-gray-900;
+  @include gl-font-sm;
+  @include gl-line-height-normal;
+  @include gl-text-white;
+  @include gl-vertical-align-top;
+  border-radius: 20px;
+  padding: 3px 10px;
+}
diff --git a/app/assets/stylesheets/fontawesome_custom.scss b/app/assets/stylesheets/fontawesome_custom.scss
index 46e5e5a28ea..a3338ff13b5 100644
--- a/app/assets/stylesheets/fontawesome_custom.scss
+++ b/app/assets/stylesheets/fontawesome_custom.scss
@@ -88,11 +88,6 @@
   content: '\f078';
 }
 
-.fa-remove::before,
-.fa-times::before {
-  content: '\f00d';
-}
-
 .fa-caret-down::before {
   content: '\f0d7';
 }
@@ -101,10 +96,6 @@
   content: '\f00c';
 }
 
-.fa-search::before {
-  content: '\f002';
-}
-
 .fa-warning::before,
 .fa-exclamation-triangle::before {
   content: '\f071';
@@ -118,18 +109,6 @@
   content: '\f110';
 }
 
-.fa-calendar::before {
-  content: '\f073';
-}
-
-.fa-angle-double-right::before {
-  content: '\f101';
-}
-
-.fa-angle-double-left::before {
-  content: '\f100';
-}
-
 .fa-trash-o::before {
   content: '\f014';
 }
@@ -146,14 +125,6 @@
   content: '\f077';
 }
 
-.fa-file-text-o::before {
-  content: '\f0f6';
-}
-
-.fa-github::before {
-  content: '\f09b';
-}
-
 .fa-paperclip::before {
   content: '\f0c6';
 }
@@ -162,10 +133,6 @@
   content: '\f188';
 }
 
-.fa-google::before {
-  content: '\f1a0';
-}
-
 .fa-exclamation-circle::before {
   content: '\f06a';
 }
@@ -174,10 +141,6 @@
   content: '\f0f3';
 }
 
-.fa-bitbucket-square::before {
-  content: '\f172';
-}
-
 .fa-file-o::before {
   content: '\f016';
 }
@@ -190,22 +153,10 @@
   content: '\f111';
 }
 
-.fa-bitbucket::before {
-  content: '\f171';
-}
-
 .fa-git::before {
   content: '\f1d3';
 }
 
-.fa-folder::before {
-  content: '\f07b';
-}
-
-.fa-archive::before {
-  content: '\f187';
-}
-
 .fa-thumb-tack::before {
   content: '\f08d';
 }
@@ -214,10 +165,6 @@
   content: '\f06d';
 }
 
-.fa-globe::before {
-  content: '\f0ac';
-}
-
 .fa-pause::before {
   content: '\f04c';
 }
@@ -226,14 +173,6 @@
   content: '\f04b';
 }
 
-.fa-search-plus::before {
-  content: '\f00e';
-}
-
-.fa-search-minus::before {
-  content: '\f010';
-}
-
 .fa-share::before {
   content: '\f064';
 }
@@ -258,10 +197,6 @@
   content: '\f081';
 }
 
-.fa-unlink::before {
-  content: '\f127';
-}
-
 .fa-file-pdf-o::before {
   content: '\f1c1';
 }
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index f875420b9c9..e40b95cdce6 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -70,3 +70,4 @@
 @import 'framework/spinner';
 @import 'framework/card';
 @import 'framework/editor-lite';
+@import 'framework/diffs';
diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
index 136ff82e0f8..196fb3a7088 100644
--- a/app/assets/stylesheets/framework/animations.scss
+++ b/app/assets/stylesheets/framework/animations.scss
@@ -112,8 +112,7 @@ a {
 }
 
 .dropdown-menu a,
-.dropdown-menu button,
-.dropdown-menu-nav a {
+.dropdown-menu button {
   transition: none;
 }
 
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index a9c1652d00d..a8cc685d880 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -417,12 +417,6 @@
   }
 }
 
-@include media-breakpoint-down(xs) {
-  .btn-wide-on-xs {
-    width: 100%;
-  }
-}
-
 .btn-blank {
   padding: 0;
   background: transparent;
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 714ef8b2175..8dbed9c03f2 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -324,15 +324,8 @@ img.emoji {
 }
 
 .project-item-select-holder {
-  display: inline-block;
-  position: relative;
-
   .project-item-select {
-    position: absolute;
-    top: 0;
-    right: 0;
     min-width: 250px;
-    visibility: hidden;
   }
 }
 
@@ -428,7 +421,6 @@ img.emoji {
 /** COMMON SIZING CLASSES **/
 .w-0 { width: 0; }
 .w-8em { width: 8em; }
-.w-3rem { width: 3rem; }
 .w-15p { width: 15%; }
 .w-30p { width: 30%; }
 .w-60p { width: 60%; }
diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss
index 7004bcc121d..48252762546 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar.scss
@@ -363,20 +363,30 @@
 // Collapsed nav
 
 .toggle-sidebar-button,
-.close-nav-button {
-  width: $contextual-sidebar-width - 1px;
+.close-nav-button,
+.toggle-right-sidebar-button {
   transition: width $sidebar-transition-duration;
-  position: fixed;
   height: $toggle-sidebar-height;
-  bottom: 0;
   padding: 0 $gl-padding;
   background-color: $gray-light;
   border: 0;
-  border-top: 1px solid $border-color;
   color: $gl-text-color-secondary;
   display: flex;
   align-items: center;
 
+  &:hover {
+    background-color: $border-color;
+    color: $gl-text-color;
+  }
+}
+
+.toggle-sidebar-button,
+.close-nav-button {
+  position: fixed;
+  bottom: 0;
+  width: $contextual-sidebar-width - 1px;
+  border-top: 1px solid $border-color;
+
   svg {
     margin-right: 8px;
   }
@@ -384,11 +394,10 @@
   .icon-chevron-double-lg-right {
     display: none;
   }
+}
 
-  &:hover {
-    background-color: $border-color;
-    color: $gl-text-color;
-  }
+.toggle-right-sidebar-button {
+  border-bottom: 1px solid $border-color;
 }
 
 .collapse-text {
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/framework/diffs.scss
index 62af7103b39..c0a2350d080 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -13,6 +13,21 @@
     box-shadow: 0 -2px 0 0 var(--white);
     cursor: pointer;
 
+    .dropdown-menu {
+      cursor: auto;
+    }
+
+    @media (max-width: map-get($grid-breakpoints, sm)-1) {
+      .file-header-content {
+        width: 0;
+        flex: 1;
+      }
+
+      .file-actions {
+        margin-left: $gl-spacing-scale-2;
+      }
+    }
+
     @media (min-width: map-get($grid-breakpoints, md)) {
       // The `+11` is to ensure the file header border shows when scrolled -
       // the bottom of the compare-versions header and the top of the file header
@@ -23,6 +38,14 @@
       top: $mr-file-header-top;
       z-index: 120;
 
+      .with-system-header & {
+        top: $mr-file-header-top + $system-header-height;
+      }
+
+      .with-system-header.with-performance-bar & {
+        top: $mr-file-header-top + $system-header-height + $performance-bar-height;
+      }
+
       &::before {
         content: '';
         position: absolute;
@@ -55,10 +78,6 @@
       }
     }
 
-    a:hover {
-      text-decoration: none;
-    }
-
     &:hover {
       background-color: $gray-normal;
     }
@@ -248,6 +267,7 @@
         }
       }
     }
+
     //.view.swipe
     .view.onion-skin {
       .onion-skin-frame {
@@ -316,6 +336,7 @@
         }
       }
     }
+
     //.view.onion-skin
   }
 
@@ -942,15 +963,13 @@ table.code {
 .frame.click-to-comment,
 .btn-transparent.image-diff-overlay-add-comment {
   position: relative;
-  cursor: image-url('illustrations/image_comment_light_cursor.svg')
-    $image-comment-cursor-left-offset $image-comment-cursor-top-offset,
+  cursor: image-url('illustrations/image_comment_light_cursor.svg') $image-comment-cursor-left-offset $image-comment-cursor-top-offset,
     auto;
 
   // Retina cursor
   // scss-lint:disable DuplicateProperty
   cursor: image-set(image-url('illustrations/image_comment_light_cursor.svg') 1x,
-  image-url('illustrations/image_comment_light_cursor@2x.svg') 2x)
-    $image-comment-cursor-left-offset $image-comment-cursor-top-offset,
+  image-url('illustrations/image_comment_light_cursor@2x.svg') 2x) $image-comment-cursor-left-offset $image-comment-cursor-top-offset,
     auto;
 
   .comment-indicator {
@@ -1059,77 +1078,6 @@ table.code {
   position: relative;
 }
 
-.diff-tree-list {
-  position: -webkit-sticky;
-  position: sticky;
-  $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + 15px;
-  top: $top-pos;
-  max-height: calc(100vh - #{$top-pos});
-  z-index: 202;
-
-  .with-performance-bar & {
-    $performance-bar-top-pos: $performance-bar-height + $top-pos;
-    top: $performance-bar-top-pos;
-    max-height: calc(100vh - #{$performance-bar-top-pos});
-  }
-
-  .drag-handle {
-    bottom: 16px;
-    transform: translateX(10px);
-  }
-}
-
-.diff-files-holder {
-  flex: 1;
-  min-width: 0;
-  z-index: 201;
-}
-
-.compare-versions-container {
-  min-width: 0;
-}
-
-.tree-list-holder {
-  height: 100%;
-
-  .file-row {
-    margin-left: 0;
-    margin-right: 0;
-  }
-}
-
-.tree-list-scroll {
-  max-height: 100%;
-  padding-bottom: $grid-size;
-  overflow-y: scroll;
-  overflow-x: auto;
-}
-
-.tree-list-search {
-  flex: 0 0 34px;
-
-  .form-control {
-    padding-left: 30px;
-  }
-}
-
-.tree-list-icon {
-  top: 50%;
-  left: 10px;
-  transform: translateY(-50%);
-
-  &,
-  svg {
-    fill: $gl-text-color-tertiary;
-  }
-}
-
-.tree-list-clear-icon {
-  right: 10px;
-  left: auto;
-  line-height: 0;
-}
-
 .discussion-collapsible {
   margin: 0 $gl-padding $gl-padding 71px;
 
@@ -1145,30 +1093,6 @@ table.code {
   }
 }
 
-@media (max-width: map-get($grid-breakpoints, md)-1) {
-  .diffs .files {
-    @include fixed-width-container;
-    flex-direction: column;
-
-    .diff-tree-list {
-      position: relative;
-      top: 0;
-      // !important is required to override inline styles of resizable sidebar
-      width: 100% !important;
-    }
-
-    .tree-list-holder {
-      max-height: calc(50px + 50vh);
-      padding-right: 0;
-    }
-  }
-
-  .discussion-collapsible {
-    margin: $gl-padding;
-    margin-top: 0;
-  }
-}
-
 .image-diff-overlay,
 .image-diff-overlay-add-comment {
   top: 0;
@@ -1191,3 +1115,15 @@ table.code {
     display: none;
   }
 }
+
+@media (max-width: map-get($grid-breakpoints, md)-1) {
+  .diffs .files {
+    @include fixed-width-container;
+    flex-direction: column;
+  }
+
+  .discussion-collapsible {
+    margin: $gl-padding;
+    margin-top: 0;
+  }
+}
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index ad5864ef6d9..e8d37fcf40b 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -33,8 +33,7 @@
 }
 
 .show.dropdown {
-  .dropdown-menu,
-  .dropdown-menu-nav {
+  .dropdown-menu {
     @include set-visible;
     min-height: $dropdown-min-height;
     max-height: $dropdown-max-height;
@@ -190,15 +189,6 @@
   background-color: $gray-darker;
   color: $gl-text-color;
   outline: 0;
-
-  // make sure the text color is not overridden
-  &.text-danger {
-    color: $brand-danger;
-  }
-
-  .avatar {
-    border-color: $white;
-  }
 }
 
 @mixin dropdown-link {
@@ -217,11 +207,6 @@
   text-align: left;
   width: 100%;
 
-  // make sure the text color is not overridden
-  &.text-danger {
-    color: $brand-danger;
-  }
-
   &.disable-hover {
     text-decoration: none;
   }
@@ -233,10 +218,6 @@
     @include dropdown-item-hover;
 
     text-decoration: none;
-
-    .badge.badge-pill {
-      background-color: darken($blue-50, 5%);
-    }
   }
 
   &.dropdown-menu-user-link {
@@ -258,8 +239,7 @@
   }
 }
 
-.dropdown-menu,
-.dropdown-menu-nav {
+.dropdown-menu {
   display: none;
   position: absolute;
   width: auto;
@@ -393,49 +373,56 @@
     pointer-events: none;
   }
 
-  .dropdown-menu li {
-    cursor: pointer;
+  .dropdown-menu {
+    display: none;
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
 
-    &.droplab-item-active button {
-      @include dropdown-item-hover;
-    }
+    li {
+      cursor: pointer;
 
-    > a,
-    > button {
-      display: flex;
-      margin: 0;
-      text-overflow: inherit;
-      text-align: left;
+      &.droplab-item-active button {
+        @include dropdown-item-hover;
+      }
 
-      &.btn .fa:not(:last-child) {
-        margin-left: 5px;
+      > a,
+      > button {
+        display: flex;
+        margin: 0;
+        text-overflow: inherit;
+        text-align: left;
+
+        &.btn .fa:not(:last-child) {
+          margin-left: 5px;
+        }
       }
-    }
 
-    > button.dropdown-epic-button {
-      flex-direction: column;
+      > button.dropdown-epic-button {
+        flex-direction: column;
 
-      .reference {
-        color: $gray-300;
-        margin-top: $gl-padding-4;
+        .reference {
+          color: $gray-300;
+          margin-top: $gl-padding-4;
+        }
       }
-    }
 
-    &.droplab-item-selected i {
-      visibility: visible;
-    }
+      &.droplab-item-selected i {
+        visibility: visible;
+      }
 
-    .icon {
-      visibility: hidden;
-    }
+      .icon {
+        visibility: hidden;
+      }
 
-    .description {
-      display: inline-block;
-      white-space: normal;
-      margin-left: 5px;
+      .description {
+        display: inline-block;
+        white-space: normal;
+        margin-left: 5px;
 
-      p {
-        margin-bottom: 0;
+        p {
+          margin-bottom: 0;
+        }
       }
     }
   }
@@ -447,21 +434,12 @@
   }
 }
 
-.droplab-dropdown .dropdown-menu,
-.droplab-dropdown .dropdown-menu-nav {
-  display: none;
-  opacity: 1;
-  visibility: visible;
-  transform: translateY(0);
-}
-
 .comment-type-dropdown.show .dropdown-menu {
   display: block;
 }
 
 .filtered-search-box-input-container {
-  .dropdown-menu,
-  .dropdown-menu-nav {
+  .dropdown-menu {
     max-width: 280px;
   }
 }
@@ -850,8 +828,7 @@
   }
 
   header.navbar-gitlab .dropdown {
-    .dropdown-menu,
-    .dropdown-menu-nav {
+    .dropdown-menu {
       width: 100%;
       min-width: 100%;
     }
diff --git a/app/assets/stylesheets/framework/editor-lite.scss b/app/assets/stylesheets/framework/editor-lite.scss
index 75d511d7f66..20fea7a82ca 100644
--- a/app/assets/stylesheets/framework/editor-lite.scss
+++ b/app/assets/stylesheets/framework/editor-lite.scss
@@ -1,5 +1,3 @@
-.monaco-editor.gl-editor-lite {
-  .line-numbers {
-    @include gl-pt-0;
-  }
+[id^='editor-lite-'] {
+  height: 500px;
 }
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 76c6e03377c..f8710cc1346 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -50,7 +50,7 @@
       right: 15px;
       margin-left: auto;
 
-      .btn {
+      .btn:not(.btn-icon) {
         padding: 0 10px;
         font-size: 13px;
         line-height: 28px;
@@ -372,7 +372,7 @@ span.idiff {
     color: $gl-text-color;
   }
 
-  .file-actions .btn {
+  .file-actions .btn:not(.btn-icon) {
     padding: 0 10px;
     font-size: 13px;
     line-height: 28px;
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index 1a394ad124b..5f56fa3be86 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -355,28 +355,45 @@
     background-color: $white;
   }
 
-  .boards-switcher {
-    margin: 0 0 10px;
+  .filtered-search-block .boards-switcher {
+    @include gl-mr-0;
+    margin-bottom: $gl-input-padding;
 
     .boards-selector-wrapper,
     .dropdown {
-      display: block;
+      @include gl-display-block;
     }
   }
 
   .filter-dropdown-container {
     > div {
-      margin: 0;
+      @include gl-m-0;
 
       > .btn {
-        margin: 0 0 10px;
-        width: 100%;
+        margin: 0 0 $gl-input-padding;
+        @include gl-w-full;
       }
     }
 
     .board-labels-toggle-wrapper {
       margin-bottom: $gl-input-padding;
     }
+
+    .board-swimlanes-toggle-wrapper {
+      @include gl-h-auto;
+      margin-bottom: $gl-input-padding;
+
+      > span,
+      > .dropdown,
+      .gl-dropdown-toggle {
+        @include gl-w-full;
+        @include gl-m-0;
+      }
+
+      > .dropdown {
+        @include gl-mt-2;
+      }
+    }
   }
 
   .boards-add-list > .btn {
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index cf21c23cb17..52319d9658b 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -203,18 +203,6 @@
             margin-right: 0;
           }
         }
-
-        &:hover,
-        &:focus {
-          text-decoration: none;
-          outline: 0;
-          opacity: 1;
-          color: $white;
-
-          &.header-user-dropdown-toggle .header-user-avatar {
-            border-color: $white;
-          }
-        }
       }
 
       .header-new-dropdown-toggle {
diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss
index ec0755b1614..5623d38d66e 100644
--- a/app/assets/stylesheets/framework/icons.scss
+++ b/app/assets/stylesheets/framework/icons.scss
@@ -9,6 +9,7 @@
   }
 }
 
+.ci-status-icon-error,
 .ci-status-icon-failed {
   svg {
     fill: $red-500;
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 61e8c0d4718..63be2bdef8e 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -215,7 +215,7 @@
   }
 
   &.build-trace-rounded {
-    border-radius: $border-radius-base;
+    border-radius: $gl-border-radius-base;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index 292d57f132c..7ebc972ac37 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -28,10 +28,6 @@
         text-decoration: none;
         color: $black;
         border-bottom: 2px solid $gray-darkest;
-
-        .badge.badge-pill {
-          color: $black;
-        }
       }
     }
 
@@ -380,33 +376,11 @@
 }
 
 .project-item-select-holder.btn-group {
-  display: flex;
-  overflow: hidden;
-  float: right;
-
-  .new-project-item-link {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
   .new-project-item-select-button {
-    width: 32px;
+    max-width: 44px;
   }
 }
 
 .empty-state .project-item-select-holder.btn-group {
-  float: none;
-  justify-content: center;
-
-  .btn {
-    // overrides styles applied to plain `.empty-state .btn`
-    margin: 10px 0;
-    max-width: 300px;
-    width: auto;
-
-    @include media-breakpoint-down(xs) {
-      max-width: 250px;
-    }
-  }
+  max-width: 320px;
 }
diff --git a/app/assets/stylesheets/framework/snippets.scss b/app/assets/stylesheets/framework/snippets.scss
index 4c1c9d15121..47184804353 100644
--- a/app/assets/stylesheets/framework/snippets.scss
+++ b/app/assets/stylesheets/framework/snippets.scss
@@ -18,18 +18,6 @@
   }
 }
 
-.snippet-form-holder .file-holder .file-title {
-  padding: 2px;
-}
-
-.markdown-snippet-copy {
-  position: fixed;
-  top: -10px;
-  left: -10px;
-  max-height: 0;
-  max-width: 0;
-}
-
 .snippet-file-content {
   border-radius: 3px;
 
@@ -49,21 +37,6 @@
   min-height: $header-height;
 }
 
-.snippet-actions {
-  @include media-breakpoint-up(sm) {
-    float: right;
-  }
-}
-
 .snippet-scope-menu .btn-success {
   margin-top: 15px;
 }
-
-.embed-snippet {
-  padding-right: 0;
-  padding-top: $gl-padding;
-
-  .embed-toggle-list li button {
-    padding: 8px 40px;
-  }
-}
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index 59e83608d9d..39d9e9a77f9 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -9,11 +9,15 @@ table {
   * This is a temporary workaround until we fix the neutral
   * color palette in https://gitlab.com/gitlab-org/gitlab/-/issues/213570
   *
-  * The overwrites here affected the security dashboard tables, when removing
-  * this code, table-th-transparent and original-text-color classes should
-  * be removed there.
+  * The overwrites here affected the following areas:
+  * - The security dashboard tables. When removing
+  *   this code, table-th-transparent and original-text-color classes should
+  *   be removed there.
+  * - The subscription seats table. When removing this code, the .seats-table
+  *   <th> and margin overrides should be removed there.
   *
   * Remove this code as soon as this happens
+  *
   */
   &.gl-table {
     @include gl-text-gray-500;
@@ -186,6 +190,7 @@ table {
     .checkbox {
       padding-left: $gl-spacing-scale-4;
       padding-right: 0;
+      width: 1px;
 
       + td,
       + th {
@@ -205,12 +210,20 @@ table {
       width: 10%;
     }
 
+    .description {
+      max-width: 0;
+    }
+
     .identifier {
       width: 16%;
     }
 
     .scanner {
-      width: 15%;
+      width: 10%;
+    }
+
+    .activity {
+      width: 5%;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 8b5fa6c1b6c..c15d46d43b2 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -439,10 +439,6 @@
       content: '\f0c6';
     }
 
-    &:hover::before {
-      text-decoration: none;
-    }
-
     &.no-attachment-icon {
       &::before {
         display: none;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 8cebfc430e0..f0b1e859139 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -780,7 +780,6 @@ $login-brand-holder-color: #888;
 * Projects
 */
 $project-option-descr-color: #54565b;
-$project-network-controls-color: #888;
 
 /*
  * Monitor Charts
@@ -819,7 +818,6 @@ $pipeline-dropdown-line-height: 20px;
 $pipeline-dropdown-status-icon-size: 18px;
 $ci-action-dropdown-button-size: 24px;
 $ci-action-dropdown-svg-size: 12px;
-$pipelines-table-header-height: 40px;
 
 /*
 CI variable lists
@@ -868,9 +866,6 @@ $add-to-slack-popup-max-width: 400px;
 $add-to-slack-gif-max-width: 850px;
 $add-to-slack-well-max-width: 750px;
 $add-to-slack-logo-size: 100px;
-$double-headed-arrow-width: 100px;
-$double-headed-arrow-height: 25px;
-$right-arrow-size: 16px;
 
 /*
 Popup
diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss
index 55996a074c6..d550a1faa18 100644
--- a/app/assets/stylesheets/framework/wells.scss
+++ b/app/assets/stylesheets/framework/wells.scss
@@ -3,7 +3,6 @@
   color: $gl-text-color;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
-  margin-bottom: $gl-padding-8;
 
   .card.card-body-segment {
     padding: $gl-padding;
@@ -29,11 +28,6 @@
 
       .ref-name {
         font-size: 12px;
-
-        &:hover {
-          text-decoration: underline;
-          color: $gl-text-color;
-        }
       }
     }
 
diff --git a/app/assets/stylesheets/lazy_bundles/cropper.css b/app/assets/stylesheets/lazy_bundles/cropper.css
new file mode 100644
index 00000000000..9c7fdded117
--- /dev/null
+++ b/app/assets/stylesheets/lazy_bundles/cropper.css
@@ -0,0 +1,378 @@
+/*!
+ * Cropper v2.3.0
+ * https://github.com/fengyuanchen/cropper
+ *
+ * Copyright (c) 2014-2016 Fengyuan Chen and contributors
+ * Released under the MIT license
+ *
+ * Date: 2016-02-22T02:13:13.332Z
+ */
+.cropper-container {
+  font-size: 0;
+  line-height: 0;
+
+  position: relative;
+
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  direction: ltr !important;
+  touch-action: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+}
+
+.cropper-container img {
+  display: block;
+
+  width: 100%;
+  min-width: 0 !important;
+  max-width: none !important;
+  height: 100%;
+  min-height: 0 !important;
+  max-height: none !important;
+
+  image-orientation: 0deg !important;
+}
+
+.cropper-wrap-box,
+.cropper-canvas,
+.cropper-drag-box,
+.cropper-crop-box,
+.cropper-modal {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.cropper-wrap-box {
+  overflow: hidden;
+}
+
+.cropper-drag-box {
+  opacity: 0;
+  background-color: #fff;
+
+  filter: alpha(opacity=0);
+}
+
+.cropper-modal {
+  opacity: 0.5;
+  background-color: #000;
+
+  filter: alpha(opacity=50);
+}
+
+.cropper-view-box {
+  display: block;
+  overflow: hidden;
+
+  width: 100%;
+  height: 100%;
+
+  outline: 1px solid #39f;
+  outline-color: rgba(51, 153, 255, 0.75);
+}
+
+.cropper-dashed {
+  position: absolute;
+
+  display: block;
+
+  opacity: 0.5;
+  border: 0 dashed #eee;
+
+  filter: alpha(opacity=50);
+}
+
+.cropper-dashed.dashed-h {
+  top: 33.33333%;
+  left: 0;
+
+  width: 100%;
+  height: 33.33333%;
+
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+}
+
+.cropper-dashed.dashed-v {
+  top: 0;
+  left: 33.33333%;
+
+  width: 33.33333%;
+  height: 100%;
+
+  border-right-width: 1px;
+  border-left-width: 1px;
+}
+
+.cropper-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+
+  display: block;
+
+  width: 0;
+  height: 0;
+
+  opacity: 0.75;
+
+  filter: alpha(opacity=75);
+}
+
+.cropper-center::before,
+.cropper-center::after {
+  position: absolute;
+
+  display: block;
+
+  content: ' ';
+
+  background-color: #eee;
+}
+
+.cropper-center::before {
+  top: 0;
+  left: -3px;
+
+  width: 7px;
+  height: 1px;
+}
+
+.cropper-center::after {
+  top: -3px;
+  left: 0;
+
+  width: 1px;
+  height: 7px;
+}
+
+.cropper-face,
+.cropper-line,
+.cropper-point {
+  position: absolute;
+
+  display: block;
+
+  width: 100%;
+  height: 100%;
+
+  opacity: 0.1;
+
+  filter: alpha(opacity=10);
+}
+
+.cropper-face {
+  top: 0;
+  left: 0;
+
+  background-color: #fff;
+}
+
+.cropper-line {
+  background-color: #39f;
+}
+
+.cropper-line.line-e {
+  top: 0;
+  right: -3px;
+
+  width: 5px;
+
+  cursor: e-resize;
+}
+
+.cropper-line.line-n {
+  top: -3px;
+  left: 0;
+
+  height: 5px;
+
+  cursor: n-resize;
+}
+
+.cropper-line.line-w {
+  top: 0;
+  left: -3px;
+
+  width: 5px;
+
+  cursor: w-resize;
+}
+
+.cropper-line.line-s {
+  bottom: -3px;
+  left: 0;
+
+  height: 5px;
+
+  cursor: s-resize;
+}
+
+.cropper-point {
+  width: 5px;
+  height: 5px;
+
+  opacity: 0.75;
+  background-color: #39f;
+
+  filter: alpha(opacity=75);
+}
+
+.cropper-point.point-e {
+  top: 50%;
+  right: -3px;
+
+  margin-top: -3px;
+
+  cursor: e-resize;
+}
+
+.cropper-point.point-n {
+  top: -3px;
+  left: 50%;
+
+  margin-left: -3px;
+
+  cursor: n-resize;
+}
+
+.cropper-point.point-w {
+  top: 50%;
+  left: -3px;
+
+  margin-top: -3px;
+
+  cursor: w-resize;
+}
+
+.cropper-point.point-s {
+  bottom: -3px;
+  left: 50%;
+
+  margin-left: -3px;
+
+  cursor: s-resize;
+}
+
+.cropper-point.point-ne {
+  top: -3px;
+  right: -3px;
+
+  cursor: ne-resize;
+}
+
+.cropper-point.point-nw {
+  top: -3px;
+  left: -3px;
+
+  cursor: nw-resize;
+}
+
+.cropper-point.point-sw {
+  bottom: -3px;
+  left: -3px;
+
+  cursor: sw-resize;
+}
+
+.cropper-point.point-se {
+  right: -3px;
+  bottom: -3px;
+
+  width: 20px;
+  height: 20px;
+
+  cursor: se-resize;
+
+  opacity: 1;
+
+  filter: alpha(opacity=100);
+}
+
+.cropper-point.point-se::before {
+  position: absolute;
+  right: -50%;
+  bottom: -50%;
+
+  display: block;
+
+  width: 200%;
+  height: 200%;
+
+  content: ' ';
+
+  opacity: 0;
+  background-color: #39f;
+
+  filter: alpha(opacity=0);
+}
+
+@media (min-width: 768px) {
+  .cropper-point.point-se {
+    width: 15px;
+    height: 15px;
+  }
+}
+
+@media (min-width: 992px) {
+  .cropper-point.point-se {
+    width: 10px;
+    height: 10px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .cropper-point.point-se {
+    width: 5px;
+    height: 5px;
+
+    opacity: 0.75;
+
+    filter: alpha(opacity=75);
+  }
+}
+
+.cropper-invisible {
+  opacity: 0;
+
+  filter: alpha(opacity=0);
+}
+
+.cropper-bg {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
+}
+
+.cropper-hide {
+  position: absolute;
+
+  display: block;
+
+  width: 0;
+  height: 0;
+}
+
+.cropper-hidden {
+  display: none !important;
+}
+
+.cropper-move {
+  cursor: move;
+}
+
+.cropper-crop {
+  cursor: crosshair;
+}
+
+.cropper-disabled .cropper-drag-box,
+.cropper-disabled .cropper-face,
+.cropper-disabled .cropper-line,
+.cropper-disabled .cropper-point {
+  cursor: not-allowed;
+}
diff --git a/app/assets/stylesheets/mailer.scss b/app/assets/stylesheets/mailer.scss
index a5fc92237df..b2050c0e73f 100644
--- a/app/assets/stylesheets/mailer.scss
+++ b/app/assets/stylesheets/mailer.scss
@@ -52,6 +52,10 @@ a {
   margin-top: 0;
 }
 
+.invite-body {
+  width: 360px;
+}
+
 .invite-actions {
   margin-top: 24px;
 }
@@ -64,6 +68,15 @@ a {
   color: $white;
 }
 
+.invite-btn-decline {
+  border-radius: $border-radius-default;
+  border: 1px solid $purple;
+  padding: $gl-btn-vert-padding $gl-btn-horz-padding;
+  cursor: pointer;
+  color: $purple;
+  margin-left: 4px;
+}
+
 tr td {
   font-family: $mailer-font;
 }
diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
index 1e239877428..d1f7c2e9865 100644
--- a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
+++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
@@ -6,9 +6,10 @@
   $bs-input-focus-box-shadow: rgba(0, 123, 255, 0.25);
 
   a:not(.btn),
-  .btn-link:hover,
-  .btn-link:focus,
-  .btn-link:active {
+  .gl-button.btn-link,
+  .gl-button.btn-link:hover,
+  .gl-button.btn-link:focus,
+  .gl-button.btn-link:active {
     color: var(--ide-link-color, $blue-600);
   }
 
@@ -225,20 +226,20 @@
     @return calc(#{$original-padding + $original-border} - var(--ide-btn-hover-border-width, #{$original-border}));
   }
 
-  .btn:not(.btn-link):not([disabled]):hover {
+  .btn:not(.gl-button):not(.btn-link):not([disabled]):hover {
     border-width: var(--ide-btn-hover-border-width, 1px);
     padding: calc-btn-hover-padding(6px) calc-btn-hover-padding(10px);
   }
 
-  .btn:not([disabled]).btn-sm:hover {
+  .btn:not(.gl-button):not([disabled]).btn-sm:hover {
     padding: calc-btn-hover-padding(4px) calc-btn-hover-padding(10px);
   }
 
-  .btn:not([disabled]).btn-block:hover {
+  .btn:not(.gl-button):not([disabled]).btn-block:hover {
     padding: calc-btn-hover-padding(6px) 0;
   }
 
-  .btn-default,
+  .btn-default:not(.gl-button),
   .dropdown,
   .dropdown-menu-toggle {
     background-color: var(--ide-input-background, $white) !important;
@@ -257,7 +258,7 @@
   }
 
   // In IDE, the only inverted buttons are `.btn-remove`
-  .btn-inverted.btn-remove {
+  .btn-inverted.btn-remove:not(.gl-button) {
     color: var(--ide-input-color, $red-500) !important;
     background-color: var(--ide-input-background, $white) !important;
     border-color: var(--ide-btn-default-border, $red-500);
@@ -276,17 +277,21 @@
     }
   }
 
-  .btn-default {
+  // todo: remove this block after all default buttons have been migrated to gl-button
+  .btn-default:not(.gl-button) {
+    background-color: var(--ide-btn-default-background, $white) !important;
+    border-color: var(--ide-btn-default-border, $border-color);
+
     &:hover,
     &:focus {
       border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important;
-      background-color: var(--ide-input-background, $white-normal) !important;
+      background-color: var(--ide-btn-default-background, $white-normal) !important;
     }
 
     &:active,
     .active {
       border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important;
-      background-color: var(--ide-input-background, $white-dark) !important;
+      background-color: var(--ide-btn-default-background, $white-dark) !important;
     }
   }
 
@@ -320,8 +325,9 @@
     border-color: var(--ide-dropdown-hover-background, $gray-100) !important;
   }
 
-  .btn-primary,
-  .btn-info {
+  // todo: remove this block after all primary/info buttons have been migrated to gl-button
+  .btn-primary:not(.gl-button),
+  .btn-info:not(.gl-button) {
     background-color: var(--ide-btn-primary-background, $blue-500);
     border-color: var(--ide-btn-primary-border, $blue-600) !important;
 
@@ -338,7 +344,8 @@
     }
   }
 
-  .btn-success {
+  // todo: remove this block after all success buttons have been migrated to gl-button
+  .btn-success:not(.gl-button) {
     background-color: var(--ide-btn-success-background, $green-500);
     border-color: var(--ide-btn-success-border, $green-600) !important;
 
@@ -355,12 +362,70 @@
     }
   }
 
-  .btn[disabled] {
+  // todo: remove this block after all disabled buttons have been migrated to gl-button
+  .btn[disabled]:not(.gl-button) {
     background-color: var(--ide-btn-default-background, $gray-light) !important;
     border: 1px solid var(--ide-btn-disabled-border, $gray-100) !important;
     color: var(--ide-btn-disabled-color, $gl-text-color-disabled) !important;
   }
 
+  @function ide-btn-var($btn-type, $var-type, $value) {
+    @return var(--ide-btn-#{$btn-type}-#{$var-type}, $value);
+  }
+
+  @mixin ide-gl-button($btn-type, $bg-normal, $bg-hover, $bg-active, $border-normal, $border-hover, $border-focus, $border-active, $border-width-hover: 2px, $box-shadow-hover: $t-gray-a-08, $box-shadow-focus: 0 0 0 4px rgba($blue-500, 0.25)) {
+    background-color: ide-btn-var($btn-type, background, $bg-normal);
+    box-shadow: inset 0 0 0 1px ide-btn-var($btn-type, border, $border-normal);
+
+    &:hover,
+    &:focus {
+      background-color: ide-btn-var($btn-type, background, $bg-hover);
+    }
+
+    &:hover {
+      box-shadow: inset 0 0 0 ide-btn-var($btn-type, hover-border-width, $border-width-hover) ide-btn-var($btn-type, hover-border, $border-hover),
+        0 2px 2px 0 $box-shadow-hover;
+    }
+
+    &:focus {
+      box-shadow: inset 0 0 0 ide-btn-var($btn-type, hover-border-width, $border-width-hover) ide-btn-var($btn-type, hover-border, $border-focus),
+        ide-btn-var($btn-type, focus-box-shadow, $box-shadow-focus);
+    }
+
+    &:active:focus {
+      background-color: ide-btn-var($btn-type, background, $bg-active);
+      box-shadow: inset 0 0 0 ide-btn-var($btn-type, hover-border-width, $border-width-hover) ide-btn-var($btn-type, hover-border, $border-active),
+        ide-btn-var($btn-type, focus-box-shadow, $box-shadow-focus);
+    }
+  }
+
+  .btn-default.gl-button.gl-button {
+    color: var(--ide-input-color, $gl-text-color);
+
+    @include ide-gl-button(default, $white, $gray-50, $gray-100, $gray-200, $gray-300, $gray-300, $gray-400);
+  }
+
+  .btn-success.gl-button.gl-button {
+    @include ide-gl-button(success, $green-500, $green-600, $green-800, $green-600, $green-800, $green-800, $green-900);
+  }
+
+  .btn-info.gl-button.gl-button,
+  .btn-primary.gl-button.gl-button {
+    @include ide-gl-button(primary, $blue-500, $blue-600, $blue-800, $blue-600, $blue-800, $blue-800, $blue-900);
+  }
+
+  .btn-danger.btn-danger-secondary.gl-button.gl-button {
+    color: var(--ide-input-color, $red-500);
+
+    @include ide-gl-button(danger-secondary, $white, $red-50, $red-100, $red-500, $red-600, $red-600, $red-700);
+  }
+
+  .btn[disabled].gl-button.gl-button {
+    color: var(--ide-btn-disabled-color, $gl-text-color-disabled);
+
+    @include ide-gl-button(disabled, $gray-10, $gray-10, $gray-10, $gray-100, $gray-100, $gray-100, $gray-100, 1px, transparent, transparent);
+  }
+
   .md table:not(.code) tbody {
     background-color: var(--ide-border-color, $white);
   }
diff --git a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
new file mode 100644
index 00000000000..499394ad960
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
@@ -0,0 +1,233 @@
+@mixin flat-connector-before($length: 44px) {
+  &::before {
+    content: '';
+    position: absolute;
+    top: 48%;
+    left: -$length;
+    border-top: 2px solid $border-color;
+    width: $length;
+    height: 1px;
+  }
+}
+
+@mixin build-content($border-radius: 30px) {
+  display: inline-block;
+  padding: 8px 10px 9px;
+  width: 100%;
+  border: 1px solid $border-color;
+  border-radius: $border-radius;
+  background-color: $white;
+
+  &:hover {
+    background-color: $gray-darker;
+    border: 1px solid $dropdown-toggle-active-border-color;
+    color: $gl-text-color;
+  }
+}
+
+@mixin mini-pipeline-graph-color(
+  $color-background-default,
+  $color-background-hover-focus,
+  $color-background-active,
+  $color-foreground-default,
+  $color-foreground-hover-focus,
+  $color-foreground-active
+) {
+  background-color: $color-background-default;
+  border-color: $color-foreground-default;
+
+  svg {
+    fill: $color-foreground-default;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: $color-background-hover-focus;
+    border-color: $color-foreground-hover-focus;
+
+    svg {
+      fill: $color-foreground-hover-focus;
+    }
+  }
+
+  &:active {
+    background-color: $color-background-active;
+    border-color: $color-foreground-active;
+
+    svg {
+      fill: $color-foreground-active;
+    }
+  }
+
+  &:focus {
+    box-shadow: 0 0 4px 1px $blue-300;
+  }
+}
+
+@mixin mini-pipeline-item() {
+  border-radius: 100px;
+  background-color: $white;
+  border-width: 1px;
+  border-style: solid;
+  width: $ci-action-icon-size;
+  height: $ci-action-icon-size;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  vertical-align: middle;
+
+  &:hover,
+  &:active,
+  &:focus {
+    outline: none;
+    border-width: 2px;
+  }
+
+  // Dropdown button animation in mini pipeline graph
+  &.ci-status-icon-success {
+    @include mini-pipeline-graph-color($white, $green-100, $green-200, $green-500, $green-600, $green-700);
+  }
+
+  &.ci-status-icon-failed {
+    @include mini-pipeline-graph-color($white, $red-100, $red-200, $red-500, $red-600, $red-700);
+  }
+
+  &.ci-status-icon-pending,
+  &.ci-status-icon-waiting-for-resource,
+  &.ci-status-icon-success-with-warnings {
+    @include mini-pipeline-graph-color($white, $orange-50, $orange-100, $orange-500, $orange-600, $orange-700);
+  }
+
+  &.ci-status-icon-preparing,
+  &.ci-status-icon-running {
+    @include mini-pipeline-graph-color($white, $blue-100, $blue-200, $blue-500, $blue-600, $blue-700);
+  }
+
+  &.ci-status-icon-canceled,
+  &.ci-status-icon-scheduled,
+  &.ci-status-icon-disabled,
+  &.ci-status-icon-not-found,
+  &.ci-status-icon-manual {
+    @include mini-pipeline-graph-color($white, $gray-500, $gray-700, $gray-900, $gray-950, $black);
+  }
+
+  &.ci-status-icon-created,
+  &.ci-status-icon-skipped {
+    @include mini-pipeline-graph-color($white, $gray-100, $gray-200, $gray-300, $gray-400, $gray-500);
+  }
+}
+
+/**
+ Action icons inside dropdowns:
+ - mini graph in pipelines table
+ - dropdown in big graph
+ - mini graph in MR widget pipeline
+ - mini graph in Commit widget pipeline
+*/
+@mixin pipeline-graph-dropdown-menu() {
+  width: 240px;
+  max-width: 240px;
+
+  // override dropdown.scss
+  &.dropdown-menu li button,
+  &.dropdown-menu li a.ci-action-icon-container {
+    padding: 0;
+    text-align: center;
+  }
+
+  .ci-action-icon-container {
+    position: absolute;
+    right: 8px;
+    top: 8px;
+
+    &.ci-action-icon-wrapper {
+      height: $ci-action-dropdown-button-size;
+      width: $ci-action-dropdown-button-size;
+      border-radius: 50%;
+      display: block;
+
+      &:hover {
+        box-shadow: inset 0 0 0 0.0625rem $dropdown-toggle-active-border-color;
+        background-color: $gray-darker;
+
+        svg {
+          fill: $gl-text-color;
+        }
+      }
+
+      .spinner,
+      svg {
+        width: $ci-action-dropdown-svg-size;
+        height: $ci-action-dropdown-svg-size;
+        fill: $gl-text-color-secondary;
+        position: relative;
+        top: 1px;
+        vertical-align: initial;
+      }
+    }
+  }
+
+  // SVGs in the commit widget and mr widget
+  a.ci-action-icon-container.ci-action-icon-wrapper svg {
+    top: 5px;
+  }
+
+  .scrollable-menu {
+    padding: 0;
+    max-height: 245px;
+    overflow: auto;
+  }
+
+  li {
+    position: relative;
+
+    // ensure .mini-pipeline-graph-dropdown-item has hover style when action-icon is hovered
+    &:hover > .mini-pipeline-graph-dropdown-item,
+    &:hover > .ci-job-component > .mini-pipeline-graph-dropdown-item {
+      @extend .mini-pipeline-graph-dropdown-item:hover;
+    }
+
+    // link to the build
+    .mini-pipeline-graph-dropdown-item {
+      align-items: center;
+      clear: both;
+      display: flex;
+      font-weight: normal;
+      line-height: $line-height-base;
+      white-space: nowrap;
+
+      // Match dropdown.scss for all `a` tags
+      &.non-details-job-component {
+        padding: $gl-padding-8 $gl-btn-horz-padding;
+      }
+
+      .ci-job-name-component {
+        align-items: center;
+        display: flex;
+        flex: 1;
+      }
+
+      .ci-status-icon {
+        @include gl-mr-3;
+
+        position: relative;
+
+        > svg {
+          width: $pipeline-dropdown-status-icon-size;
+          height: $pipeline-dropdown-status-icon-size;
+          margin: 3px 0;
+          position: relative;
+          overflow: visible;
+          display: block;
+        }
+      }
+
+      &:hover,
+      &:focus {
+        outline: none;
+        text-decoration: none;
+        background-color: $gray-darker;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss
index c4852974a4d..e908e3622ed 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/page_bundles/boards.scss
@@ -1,3 +1,5 @@
+@import 'mixins_and_variables_and_functions';
+
 .user-can-drag {
   cursor: grab;
 }
@@ -25,7 +27,7 @@
   margin: 0;
   padding: $gl-padding-4 $gl-padding $gl-padding;
   border-bottom: 0;
-  color: $gl-text-color-secondary;
+  color: var(--gray-500, $gray-500);
 }
 
 .issue-boards-page {
@@ -100,7 +102,7 @@
     }
 
     &:hover {
-      background-color: $gray-50;
+      background-color: var(--gray-50, $gray-50);
       transition: background-color 0.1s linear;
     }
   }
@@ -165,8 +167,8 @@
 
 .board-inner {
   font-size: $issue-boards-font-size;
-  background: $gray-light;
-  border: 1px solid $gray-100;
+  background: var(--gray-10, $gray-10);
+  border: 1px solid var(--gray-100, $gray-100);
 }
 
 .board-header {
@@ -197,7 +199,7 @@
 .board-title {
   align-items: center;
   font-size: 1em;
-  border-bottom: 1px solid $gray-100;
+  border-bottom: 1px solid var(--gray-100, $gray-100);
   padding: 0 $gl-spacing-scale-3;
   height: 3rem;
 
@@ -215,14 +217,14 @@
   outline: 0;
 
   &:hover {
-    color: $blue-600;
+    color: var(--blue-600, $blue-600);
     box-shadow: none;
   }
 }
 
 .board-blank-state,
 .board-promotion-state {
-  background-color: $white;
+  background-color: var(--white, $white);
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
@@ -256,9 +258,9 @@
 }
 
 .board-card {
-  background: $white;
-  border: 1px solid $gray-100;
-  box-shadow: 0 1px 2px $issue-boards-card-shadow;
+  background: var(--white, $white);
+  border: 1px solid var(--gray-100, $gray-100);
+  box-shadow: 0 1px 2px rgba(var(--black, $black), 0.1);
   line-height: $gl-padding;
   list-style: none;
   position: relative;
@@ -269,12 +271,12 @@
 
   &.is-active,
   &.is-active .board-card-assignee:hover a {
-    background-color: $blue-50;
+    background-color: var(--blue-50, $blue-50);
   }
 
   &.multi-select {
-    border-color: $blue-200;
-    background-color: $blue-50;
+    border-color: var(--blue-200, $blue-200);
+    background-color: var(--blue-50, $blue-50);
   }
 
   .gl-label {
@@ -283,12 +285,12 @@
   }
 
   .confidential-icon {
-    color: $orange-500;
+    color: var(--orange-500, $orange-500);
     cursor: help;
   }
 
   .issue-blocked-icon {
-    color: $red-500;
+    color: var(--red-500, $red-500);
   }
 
   @include media-breakpoint-down(md) {
@@ -301,7 +303,7 @@
   font-size: 1em;
 
   a {
-    color: $gl-text-color;
+    color: var(--gray-900, $gray-900);
   }
 
   @include media-breakpoint-down(md) {
@@ -323,7 +325,7 @@
     min-width: $gl-padding-24;
     height: $gl-padding-24;
     border-radius: $gl-padding-24;
-    background-color: $gl-text-color-tertiary;
+    background-color: var(--gray-400, $gray-400);
     font-size: $gl-font-size-xs;
     cursor: help;
     font-weight: $gl-font-weight-bold;
@@ -356,8 +358,6 @@
   }
 
   .avatar {
-    margin: 0;
-
     @include media-breakpoint-down(md) {
       width: $gl-padding;
       height: $gl-padding;
@@ -372,7 +372,7 @@
 
 .board-card-number {
   font-size: $gl-font-size-xs;
-  color: $gl-text-color-secondary;
+  color: var(--gray-500, $gray-500);
 
   @include media-breakpoint-up(md) {
     font-size: $label-font-size;
@@ -381,7 +381,7 @@
 
 .board-list-count {
   padding: 10px 0;
-  color: $gl-text-color-secondary;
+  color: var(--gray-500, $gray-500);
   font-size: 13px;
 }
 
@@ -437,8 +437,8 @@
   max-width: 1100px;
   min-height: 500px;
   padding: 25px 15px 0;
-  background-color: $white;
-  box-shadow: 0 2px 12px rgba($black, 0.5);
+  background-color: var(--white, $white);
+  box-shadow: 0 2px 12px rgba(var(--black, $black), 0.5);
 
   .empty-state {
     &.add-issues-empty-state-filter {
@@ -486,8 +486,8 @@
   }
 
   .board-card {
-    border: 1px solid $border-white-normal;
-    box-shadow: 0 1px 2px rgba($issue-boards-card-shadow, 0.3);
+    border: 1px solid var(--gray-900, $gray-900);
+    box-shadow: 0 1px 2px rgba(var(--black, $black), 0.4);
     cursor: pointer;
   }
 }
@@ -511,16 +511,16 @@
   right: -3px;
   top: -3px;
   width: 17px;
-  background-color: $blue-500;
+  background-color: var(--blue-500, $blue-500);
   color: $white;
-  border: 1px solid $blue-600;
+  border: 1px solid var(--blue-600, $blue-600);
   font-size: 9px;
   line-height: 15px;
   border-radius: 50%;
 }
 
 .board-card-info {
-  color: $gl-text-color-secondary;
+  color: var(--gray-500, $gray-500);
   white-space: nowrap;
   margin-right: $gl-padding-8;
 
@@ -529,7 +529,7 @@
   }
 
   &.board-card-weight {
-    color: $gl-text-color-secondary;
+    color: var(--gray-500, $gray-500);
     cursor: pointer;
 
     &:hover {
@@ -539,7 +539,7 @@
   }
 
   .board-card-info-icon {
-    color: $gray-500;
+    color: var(--gray-500, $gray-500);
     margin-right: $gl-padding-4;
     vertical-align: text-top;
   }
@@ -568,7 +568,7 @@
   height: 100%;
   top: 0;
   left: 0;
-  background: $white;
+  background: var(--white, $white);
   z-index: 9000;
 
   @include media-breakpoint-down(sm) {
@@ -591,7 +591,7 @@
 }
 
 .board-header-collapsed-info-icon:hover {
-  color: $gray-900;
+  color: var(--gray-900, $gray-900);
 }
 
 $epic-icons-spacing: 40px;
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/page_bundles/cycle_analytics.scss
index c509bf121bc..3a5e2e4159d 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/page_bundles/cycle_analytics.scss
@@ -1,3 +1,5 @@
+@import 'mixins_and_variables_and_functions';
+
 #cycle-analytics,
 .cycle-analytics {
   margin: 24px auto 0;
@@ -84,7 +86,7 @@
       }
 
       .text {
-        color: $layout-link-gray;
+        color: var(--gray-500, $gray-500);
         margin: 0;
       }
 
@@ -127,14 +129,14 @@
       line-height: 65px;
 
       &.active {
-        background: $blue-50;
-        border-color: $blue-300;
-        box-shadow: inset 4px 0 0 0 $blue-500;
+        background: var(--blue-50, $blue-50);
+        border-color: var(--blue-300, $blue-300);
+        box-shadow: inset 4px 0 0 0 var(--blue-500, $blue-500);
       }
 
       &:hover:not(.active) {
-        background-color: $gray-lightest;
-        box-shadow: inset 2px 0 0 0 $border-color;
+        background-color: var(--gray-10, $gray-10);
+        box-shadow: inset 2px 0 0 0 var(--border-color, $border-color);
         cursor: pointer;
       }
 
@@ -148,7 +150,7 @@
 
       .stage-empty,
       .not-available {
-        color: $gl-text-color-secondary;
+        color: var(--gray-500, $gray-500);
       }
     }
   }
@@ -172,7 +174,7 @@
     }
 
     .events-info {
-      color: $gl-text-color-secondary;
+      color: var(--gray-500, $gray-500);
     }
   }
 
@@ -191,7 +193,7 @@
     list-style-type: none;
     padding: 0 0 $gl-padding;
     margin: 0 $gl-padding $gl-padding;
-    border-bottom: 1px solid $gray-darker;
+    border-bottom: 1px solid var(--gray-50, $gray-50);
 
     &:last-child {
       border-bottom: 0;
@@ -220,7 +222,7 @@
         display: block;
 
         a {
-          color: $gl-text-color;
+          color: var(--gl-text-color, $gl-text-color);
         }
       }
     }
@@ -232,24 +234,24 @@
 
     .total-time {
       font-size: $cycle-analytics-big-font;
-      color: $gl-text-color;
+      color: var(--gl-text-color, $gl-text-color);
 
       span {
-        color: $gl-text-color;
+        color: var(--gl-text-color, $gl-text-color);
         font-size: $gl-font-size;
       }
     }
 
     .issue-date,
     .build-date {
-      color: $gl-text-color;
+      color: var(--gl-text-color, $gl-text-color);
     }
 
     .mr-link,
     .issue-link,
     .commit-author-link,
     .issue-author-link {
-      color: $gl-text-color;
+      color: var(--gl-text-color, $gl-text-color);
     }
 
     // Custom CSS for components
@@ -287,16 +289,16 @@
       }
 
       .item-build-name {
-        color: $gl-text-color;
+        color: var(--gl-text-color, $gl-text-color);
       }
 
       .pipeline-id {
-        color: $gl-text-color;
+        color: var(--gl-text-color, $gl-text-color);
         padding: 0 3px 0 0;
       }
 
       .ref-name {
-        color: $black;
+        color: var(--gray-900, $gray-900);
         display: inline-block;
         max-width: 180px;
         text-overflow: ellipsis;
@@ -307,14 +309,14 @@
       }
 
       .commit-sha {
-        color: $blue-600;
+        color: var(--blue-600, $blue-600);
         line-height: 1.3;
         vertical-align: top;
         font-weight: $gl-font-weight-normal;
       }
 
       .fa {
-        color: $gl-text-color-secondary;
+        color: var(--gray-500, $gray-500);
         font-size: $code-font-size;
       }
     }
@@ -326,10 +328,10 @@
     width: 75%;
     margin: 0 auto;
     padding-top: 130px;
-    color: $gl-text-color-secondary;
+    color: var(--gray-500, $gray-500);
 
     h4 {
-      color: $gl-text-color;
+      color: var(--gl-text-color, $gl-text-color);
     }
   }
 
diff --git a/app/assets/stylesheets/pages/dev_ops_report.scss b/app/assets/stylesheets/page_bundles/dev_ops_report.scss
index 871cd9c4f02..5c6019efce6 100644
--- a/app/assets/stylesheets/pages/dev_ops_report.scss
+++ b/app/assets/stylesheets/page_bundles/dev_ops_report.scss
@@ -1,3 +1,5 @@
+@import 'mixins_and_variables_and_functions';
+
 $space-between-cards: 8px;
 
 .devops-empty svg {
@@ -21,7 +23,7 @@ $space-between-cards: 8px;
   .devops-header-subtitle {
     font-size: 22px;
     line-height: 1;
-    color: $gl-text-color-secondary;
+    color: var(--gl-text-color-secondary, $gl-text-color-secondary);
     margin-left: 8px;
     font-weight: $gl-font-weight-normal;
 
@@ -31,10 +33,10 @@ $space-between-cards: 8px;
 
     a {
       font-size: 18px;
-      color: $gl-text-color-secondary;
+      color: var(--gl-text-color-secondary, $gl-text-color-secondary);
 
       &:hover {
-        color: $blue-500;
+        color: var(--blue-500, $blue-500);
       }
     }
   }
@@ -52,7 +54,7 @@ $space-between-cards: 8px;
   align-items: stretch;
   text-align: center;
   width: 50%;
-  border-color: $border-color;
+  border-color: var(--border-color, $border-color);
   margin: 0 0 32px;
   padding: $space-between-cards / 2;
   position: relative;
@@ -75,7 +77,7 @@ $space-between-cards: 8px;
 }
 
 .devops-card {
-  border: solid 1px $border-color;
+  border: solid 1px var(--border-color, $border-color);
   border-radius: 3px;
   border-top-width: 3px;
   display: flex;
@@ -84,26 +86,26 @@ $space-between-cards: 8px;
 }
 
 .devops-card-low {
-  border-top-color: $red-400;
+  border-top-color: var(--red-400, $red-400);
 
   .board-card-score-big {
-    background-color: $red-50;
+    background-color: var(--red-50, $red-50);
   }
 }
 
 .devops-card-average {
-  border-top-color: $orange-200;
+  border-top-color: var(--orange-200, $orange-200);
 
   .board-card-score-big {
-    background-color: $orange-50;
+    background-color: var(--orange-50, $orange-50);
   }
 }
 
 .devops-card-high {
-  border-top-color: $green-400;
+  border-top-color: var(--green-400, $green-400);
 
   .board-card-score-big {
-    background-color: $green-50;
+    background-color: var(--green-50, $green-50);
   }
 }
 
@@ -119,7 +121,7 @@ $space-between-cards: 8px;
   .light-text {
     font-size: 13px;
     line-height: 1.25;
-    color: $gl-text-color-secondary;
+    color: var(--gl-text-color-secondary, $gl-text-color-secondary);
   }
 }
 
@@ -132,7 +134,7 @@ $space-between-cards: 8px;
 }
 
 .board-card-score {
-  color: $gl-text-color-secondary;
+  color: var(--gl-text-color-secondary, $gl-text-color-secondary);
 
   .board-card-score-name {
     font-size: 13px;
@@ -142,13 +144,13 @@ $space-between-cards: 8px;
 
 .board-card-score-value {
   font-size: 16px;
-  color: $gl-text-color;
+  color: var(--gl-text-color, $gl-text-color);
   font-weight: $gl-font-weight-normal;
 }
 
 .board-card-score-big {
-  border-top: 2px solid $border-color;
-  border-bottom: 1px solid $border-color;
+  border-top: 2px solid var(--border-color, $border-color);
+  border-bottom: 1px solid var(--border-color, $border-color);
   font-size: 22px;
   padding: 10px 0;
   font-weight: $gl-font-weight-normal;
@@ -159,17 +161,17 @@ $space-between-cards: 8px;
 
   > * {
     font-size: 16px;
-    color: $gl-text-color-secondary;
+    color: var(--gl-text-color-secondary, $gl-text-color-secondary);
     padding: 10px;
     flex-grow: 1;
 
     &:hover {
-      background-color: $border-color;
-      color: $gl-text-color;
+      background-color: var(--border-color, $border-color);
+      color: var(--border-color, $border-color);
     }
 
     + * {
-      border-left: solid 1px $border-color;
+      border-left: solid 1px var(--border-color, $border-color);
     }
   }
 }
@@ -180,7 +182,7 @@ $space-between-cards: 8px;
   min-width: 100%;
   justify-content: space-around;
   position: relative;
-  background: $border-color;
+  background: var(--border-color, $border-color);
 }
 
 .devops-step {
@@ -202,12 +204,12 @@ $space-between-cards: 8px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  border: solid 1px $border-color;
-  background: $white;
+  border: solid 1px var(--border-color, $border-color);
+  background: var(--white, $white);
   transform: translate(-50%, -50%);
-  color: $gl-text-color-secondary;
-  fill: $gl-text-color-secondary;
-  box-shadow: 0 2px 4px $dropdown-shadow-color;
+  color: var(--gl-text-color-secondary, $gl-text-color-secondary);
+  fill: var(--gl-text-color-secondary, $gl-text-color-secondary);
+  box-shadow: 0 2px 4px var(--dropdown-shadow-color, $dropdown-shadow-color);
 
   &:hover {
     padding: 8px 10px;
@@ -247,13 +249,13 @@ $space-between-cards: 8px;
 }
 
 .devops-high-score {
-  color: $green-400;
+  color: var(--green-400, $green-400);
 }
 
 .devops-average-score {
-  color: $orange-500;
+  color: var(--orange-500, $orange-500);
 }
 
 .devops-low-score {
-  color: $red-400;
+  color: var(--red-400, $red-400);
 }
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/page_bundles/environments.scss
index 5ce500dad1d..871f118ea9d 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/page_bundles/environments.scss
@@ -1,13 +1,4 @@
-@include media-breakpoint-down(md) {
-  .deployments-container {
-    width: 100%;
-    overflow: auto;
-  }
-}
-
-.environments-folder-name {
-  font-weight: $gl-font-weight-normal;
-}
+@import 'page_bundles/mixins_and_variables_and_functions';
 
 .environments-container {
   .ci-table {
@@ -17,24 +8,24 @@
 
     .external-url,
     .dropdown-new {
-      color: $gl-text-color-secondary;
+      color: var(--gray-500, $gray-500);
     }
 
     .build-link,
     .ref-name {
-      color: $gl-text-color;
+      color: var(--gray-900, $gray-900);
     }
 
     .folder-icon {
       margin-right: 3px;
-      color: $gl-text-color-secondary;
+      color: var(--gray-500, $gray-500);
       display: inline-block;
       vertical-align: text-top;
     }
 
     .folder-name {
       cursor: pointer;
-      color: $gl-text-color-secondary;
+      color: var(--gray-500, $gray-500);
       display: inline-block;
     }
 
@@ -83,17 +74,17 @@
 
 .x-axis path,
 .y-axis path {
-  stroke: $gray-300;
+  stroke: var(--gray-300, $gray-300);
 }
 
 .label-x-axis-line,
 .label-y-axis-line {
-  stroke: $border-color;
+  stroke: var(--gray-100, $gray-100);
 }
 
 .y-axis {
   line {
-    stroke: $gray-300;
+    stroke: var(--gray-300, $gray-300);
     stroke-width: 1;
   }
 }
@@ -103,13 +94,13 @@
 }
 
 .rect-text-metric {
-  fill: $white;
+  fill: var(--white, $white);
   stroke-width: 1;
-  stroke: $gray-darkest;
+  stroke: var(--gray-600, $gray-600);
 }
 
 .rect-axis-text {
-  fill: $white;
+  fill: var(--white, $white);
 }
 
 .text-metric {
@@ -117,18 +108,18 @@
 }
 
 .selected-metric-line {
-  stroke: $gray-900;
+  stroke: var(--gray-900, $gray-900);
   stroke-width: 1;
 }
 
 .deployment-line {
-  stroke: $black;
+  stroke: var(--white, $white);
   stroke-width: 1;
 }
 
 .divider-line {
   stroke-width: 1;
-  stroke: $gray-darkest;
+  stroke: var(--gray-600, $gray-600);
 }
 
 .environments-actions {
diff --git a/app/assets/stylesheets/pages/error_details.scss b/app/assets/stylesheets/page_bundles/error_tracking_details.scss
index 78cac12d6be..a47c5cc9b3e 100644
--- a/app/assets/stylesheets/pages/error_details.scss
+++ b/app/assets/stylesheets/page_bundles/error_tracking_details.scss
@@ -1,15 +1,17 @@
+@import 'page_bundles/mixins_and_variables_and_functions';
+
 .error-details {
   li {
     @include gl-line-height-32;
   }
 
   .btn-outline-info {
-    color: $blue-500;
-    border-color: $blue-500;
+    color: var(--blue-500, $blue-500);
+    border-color: var(--blue-500, $blue-500);
   }
 
   .error-details-header {
-    border-bottom: 1px solid $border-color;
+    border-bottom: 1px solid var(--border-color, $border-color);
 
     @include media-breakpoint-down(xs) {
       flex-flow: column;
diff --git a/app/assets/stylesheets/pages/error_list.scss b/app/assets/stylesheets/page_bundles/error_tracking_index.scss
index 3ec3e4f6b43..65bddfb7890 100644
--- a/app/assets/stylesheets/pages/error_list.scss
+++ b/app/assets/stylesheets/page_bundles/error_tracking_index.scss
@@ -1,4 +1,10 @@
+@import 'page_bundles/mixins_and_variables_and_functions';
+
 .error-list {
+  .dropdown {
+    min-width: auto;
+  }
+
   .sort-control {
     .btn {
       padding-right: 2rem;
@@ -17,7 +23,7 @@
         min-height: 68px;
 
         &:last-child {
-          background-color: $gray-10;
+          background-color: var(--gray-10, $gray-10);
 
           &::before {
             content: none !important;
diff --git a/app/assets/stylesheets/page_bundles/experimental_separate_sign_up.scss b/app/assets/stylesheets/page_bundles/experimental_separate_sign_up.scss
new file mode 100644
index 00000000000..337b5b001fe
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/experimental_separate_sign_up.scss
@@ -0,0 +1,96 @@
+@import 'mixins_and_variables_and_functions';
+
+.signup-page {
+  .page-wrap {
+    background-color: var(--gray-10, $gray-10);
+  }
+
+  .signup-box-container {
+    max-width: 960px;
+  }
+
+  .signup-box {
+    background-color: var(--white, $white);
+    box-shadow: 0 0 0 1px var(--border-color, $border-color);
+    border-radius: $border-radius;
+  }
+
+  .form-control {
+    &:active,
+    &:focus {
+      background-color: var(--white, $white);
+    }
+  }
+
+  .devise-errors {
+    h2 {
+      font-size: $gl-font-size;
+      color: var(--red-700, $red-700);
+    }
+  }
+
+  .omniauth-divider {
+    &::before,
+    &::after {
+      content: '';
+      flex: 1;
+      border-bottom: 1px solid var(--gray-100, $gray-100);
+      margin: $gl-padding-24 0;
+    }
+
+    &::before {
+      margin-right: $gl-padding;
+    }
+
+    &::after {
+      margin-left: $gl-padding;
+    }
+  }
+
+  .omniauth-btn {
+    width: 48%;
+
+    @include media-breakpoint-down(md) {
+      width: 100%;
+    }
+
+    img {
+      width: $default-icon-size;
+      height: $default-icon-size;
+    }
+  }
+
+  .decline-page {
+    width: 350px;
+  }
+}
+
+.signup-page[data-page^='registrations:experience_levels'] {
+  $card-shadow-color: rgba(var(--black, $black), 0.2);
+
+  .page-wrap {
+    background-color: var(--white, $white);
+  }
+
+  .card-deck {
+    max-width: 828px;
+  }
+
+  .card {
+    transition: box-shadow 0.3s ease-in-out;
+  }
+
+  .card:hover {
+    box-shadow: 0 $gl-spacing-scale-3 $gl-spacing-scale-5 $card-shadow-color;
+  }
+
+  @media (min-width: $breakpoint-sm) {
+    .card-deck .card {
+      margin: 0 $gl-spacing-scale-3;
+    }
+  }
+
+  .stretched-link:hover {
+    text-decoration: none;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss b/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss
index 37e6be9849b..41f9a8e6db7 100644
--- a/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss
+++ b/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss
@@ -20,20 +20,28 @@
   --ide-btn-default-background: transparent;
   --ide-btn-default-border: #bfbfbf;
   --ide-btn-default-hover-border: #d8d8d8;
+  --ide-btn-default-hover-border-width: 2px;
+  --ide-btn-default-focus-box-shadow: 0 0 0 1px #bfbfbf;
 
   --ide-btn-primary-background: #1068bf;
   --ide-btn-primary-border: #428fdc;
   --ide-btn-primary-hover-border: #63a6e9;
+  --ide-btn-primary-hover-border-width: 2px;
+  --ide-btn-primary-focus-box-shadow: 0 0 0 1px #63a6e9;
 
   --ide-btn-success-background: #217645;
   --ide-btn-success-border: #108548;
   --ide-btn-success-hover-border: #2da160;
+  --ide-btn-success-hover-border-width: 2px;
+  --ide-btn-success-focus-box-shadow: 0 0 0 1px #2da160;
 
+  --ide-btn-disabled-background: transparent;
   --ide-btn-disabled-border: rgba(223, 223, 223, 0.24);
+  --ide-btn-disabled-hover-border: rgba(223, 223, 223, 0.24);
+  --ide-btn-disabled-hover-border-width: 1px;
+  --ide-btn-disabled-focus-box-shadow: 0 0 0 0 transparent;
   --ide-btn-disabled-color: rgba(145, 145, 145, 0.48);
 
-  --ide-btn-hover-border-width: 2px;
-
   --ide-dropdown-background: #404040;
   --ide-dropdown-hover-background: #525252;
 
diff --git a/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss b/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss
index 0ef0834d8db..ccb6f7a333b 100644
--- a/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss
+++ b/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss
@@ -18,22 +18,30 @@
   --ide-input-color: #fff;
 
   --ide-btn-default-background: transparent;
-  --ide-btn-default-border: var(--ide-input-border);
+  --ide-btn-default-border: #d8d8d8;
   --ide-btn-default-hover-border: #d8d8d8;
+  --ide-btn-default-hover-border-width: 2px;
+  --ide-btn-default-focus-box-shadow: 0 0 0 1px #d8d8d8;
 
   --ide-btn-primary-background: #1068bf;
   --ide-btn-primary-border: #428fdc;
   --ide-btn-primary-hover-border: #63a6e9;
+  --ide-btn-primary-hover-border-width: 2px;
+  --ide-btn-primary-focus-box-shadow: 0 0 0 1px #63a6e9;
 
   --ide-btn-success-background: #217645;
   --ide-btn-success-border: #108548;
   --ide-btn-success-hover-border: #2da160;
+  --ide-btn-success-hover-border-width: 2px;
+  --ide-btn-success-focus-box-shadow: 0 0 0 1px #2da160;
 
+  --ide-btn-disabled-background: transparent;
   --ide-btn-disabled-border: rgba(223, 223, 223, 0.24);
+  --ide-btn-disabled-hover-border: rgba(223, 223, 223, 0.24);
+  --ide-btn-disabled-hover-border-width: 1px;
+  --ide-btn-disabled-focus-box-shadow: transparent;
   --ide-btn-disabled-color: rgba(145, 145, 145, 0.48);
 
-  --ide-btn-hover-border-width: 2px;
-
   --ide-dropdown-background: #004c61;
   --ide-dropdown-hover-background: #00617a;
 
diff --git a/app/assets/stylesheets/page_bundles/issues_list.scss b/app/assets/stylesheets/page_bundles/issues_list.scss
new file mode 100644
index 00000000000..8a958bdf0c5
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/issues_list.scss
@@ -0,0 +1,45 @@
+@import 'mixins_and_variables_and_functions';
+
+.issues-list {
+  &.manual-ordering {
+    background-color: var(--gray-10, $gray-10);
+    border-radius: $border-radius-default;
+    padding: $gl-padding-8;
+
+    .issue {
+      background-color: var(--white, $white);
+      margin-bottom: $gl-padding-8;
+      border-radius: $border-radius-default;
+      border: 1px solid var(--border-color, $border-color);
+      box-shadow: 0 1px 2px $issue-boards-card-shadow;
+    }
+  }
+
+  .issue {
+    padding: 10px $gl-padding;
+    position: relative;
+
+    .title {
+      margin-bottom: 2px;
+    }
+
+    .issue-labels,
+    .author-link {
+      display: inline-block;
+    }
+
+    .icon-merge-request-unmerged {
+      height: 13px;
+      margin-bottom: 3px;
+    }
+  }
+}
+
+.user-can-drag {
+  cursor: grab;
+}
+
+.is-ghost {
+  opacity: 0.3;
+  pointer-events: none;
+}
diff --git a/app/assets/stylesheets/page_bundles/jira_connect.scss b/app/assets/stylesheets/page_bundles/jira_connect.scss
index 83d16f29d49..b8cdd120e04 100644
--- a/app/assets/stylesheets/page_bundles/jira_connect.scss
+++ b/app/assets/stylesheets/page_bundles/jira_connect.scss
@@ -13,6 +13,7 @@ $atlaskit-border-color: #dfe1e6;
       padding-top: $gl-padding-4;
 
       .ak-button {
+        align-items: center;
         height: auto;
         margin-left: $btn-margin-5;
       }
@@ -20,6 +21,74 @@ $atlaskit-border-color: #dfe1e6;
   }
 }
 
+$header-height: 40px;
+
+.jira-connect-header {
+  border-bottom: 1px solid $gray-100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: $header-height;
+  padding-left: 16px;
+  padding-right: 16px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.jira-connect-user {
+  float: right;
+  position: relative;
+  top: -30px;
+}
+
+.jira-connect-app {
+  margin-top: $header-height;
+  max-width: 600px;
+  padding-top: 48px;
+  padding-left: 16px;
+  padding-right: 16px;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+
+.gl-mt-5 {
+  margin-top: 16px;
+}
+
+.heading-with-border {
+  border-bottom: 1px solid $gray-100;
+  display: inline-block;
+  padding-bottom: 16px;
+}
+
+svg {
+  fill: currentColor;
+
+  &.s16 {
+    height: 16px;
+    width: 16px;
+  }
+}
+
+.ak-field-group label {
+  text-align: left;
+}
+
+.ak-button__appearance-primary {
+  &:hover {
+    color: $white;
+    text-decoration: none;
+  }
+
+  svg {
+    align-self: center;
+    margin-left: 4px;
+  }
+}
+
 .subscriptions {
   tbody {
     tr {
@@ -31,3 +100,11 @@ $atlaskit-border-color: #dfe1e6;
     }
   }
 }
+
+.empty-subscriptions {
+  color: $gray-900;
+}
+
+.browser-limitations-notice {
+  margin-top: 32px;
+}
diff --git a/app/assets/stylesheets/page_bundles/jira_connect_users.scss b/app/assets/stylesheets/page_bundles/jira_connect_users.scss
new file mode 100644
index 00000000000..6725bf8f1a1
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/jira_connect_users.scss
@@ -0,0 +1,13 @@
+@import 'mixins_and_variables_and_functions';
+
+.jira-connect-users-container {
+  margin-left: auto;
+  margin-right: auto;
+  width: px-to-rem(350px);
+}
+
+.devise-layout-html body .navless-container {
+  @include media-breakpoint-down(xs) {
+    padding-top: 65px;
+  }
+}
diff --git a/app/assets/stylesheets/pages/merge_conflicts.scss b/app/assets/stylesheets/page_bundles/merge_conflicts.scss
index 9d583dcaa52..b0655408edf 100644
--- a/app/assets/stylesheets/pages/merge_conflicts.scss
+++ b/app/assets/stylesheets/page_bundles/merge_conflicts.scss
@@ -1,3 +1,4 @@
+@import 'mixins_and_variables_and_functions';
 // Disabled to use the color map for creating color schemes
 // scss-lint:disable ColorVariable
 $colors: (
@@ -225,6 +226,14 @@ $colors: (
   .solarized-dark {
     @include color-scheme('solarized-dark'); }
 
+  .none {
+    .line_content.header {
+      button {
+        color: $gray-900;
+      }
+    }
+  }
+
   .diff-wrap-lines .line_content {
     white-space: normal;
     min-height: 19px;
@@ -240,14 +249,14 @@ $colors: (
       right: 10px;
       padding: 0;
       outline: none;
-      color: $white;
+      color: var(--white, $white);
       width: 75px; // static width to make 2 buttons have same width
       height: 19px;
     }
   }
 
   .btn-success .fa-spinner {
-    color: $white;
+    color: var(--white, $white);
   }
 
   .editor-wrap {
@@ -263,7 +272,7 @@ $colors: (
 
     &.saved {
       .editor {
-        border-top: solid 2px $green-300;
+        border-top: solid 2px var(--green-300, $green-300);
       }
     }
 
@@ -282,10 +291,10 @@ $colors: (
   }
 
   .discard-changes-alert {
-    background-color: $gray-light;
+    background-color: var(--gray-10, $gray-10);
     text-align: right;
     padding: $gl-padding-top $gl-padding;
-    color: $gl-text-color;
+    color: var(--gl-text-color, $gl-text-color);
 
     .discard-actions {
       display: inline-block;
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
new file mode 100644
index 00000000000..5553dffac05
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -0,0 +1,96 @@
+@import 'mixins_and_variables_and_functions';
+
+.compare-versions-container {
+  min-width: 0;
+}
+
+.diff-files-holder {
+  flex: 1;
+  min-width: 0;
+  z-index: 201;
+}
+
+.diff-tree-list {
+  position: -webkit-sticky;
+  position: sticky;
+  $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + 15px;
+  top: $top-pos;
+  max-height: calc(100vh - #{$top-pos});
+  z-index: 202;
+
+  .with-system-header & {
+    top: $top-pos + $system-header-height;
+  }
+
+  .with-system-header.with-performance-bar & {
+    top: $top-pos + $system-header-height + $performance-bar-height;
+  }
+
+  .with-performance-bar & {
+    $performance-bar-top-pos: $performance-bar-height + $top-pos;
+    top: $performance-bar-top-pos;
+    max-height: calc(100vh - #{$performance-bar-top-pos});
+  }
+
+  .drag-handle {
+    bottom: 16px;
+    transform: translateX(10px);
+  }
+}
+
+.tree-list-holder {
+  height: 100%;
+
+  .file-row {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+.tree-list-scroll {
+  max-height: 100%;
+  padding-bottom: $grid-size;
+  overflow-y: scroll;
+  overflow-x: auto;
+}
+
+.tree-list-search {
+  flex: 0 0 34px;
+
+  .form-control {
+    padding-left: 30px;
+  }
+}
+
+.tree-list-icon {
+  top: 50%;
+  left: 10px;
+  transform: translateY(-50%);
+
+  &,
+  svg {
+    fill: var(--gray-400, $gray-400);
+  }
+}
+
+.tree-list-clear-icon {
+  right: 10px;
+  left: auto;
+  line-height: 0;
+}
+
+@media (max-width: map-get($grid-breakpoints, md)-1) {
+  .diffs .files {
+    .diff-tree-list {
+      position: relative;
+      top: 0;
+      // !important is required to override inline styles of resizable sidebar
+      width: 100% !important;
+    }
+
+    .tree-list-holder {
+      max-height: calc(50px + 50vh);
+      padding-right: 0;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/page_bundles/milestone.scss
index e9eb79b071c..858e13fc558 100644
--- a/app/assets/stylesheets/pages/milestone.scss
+++ b/app/assets/stylesheets/page_bundles/milestone.scss
@@ -1,3 +1,5 @@
+@import 'mixins_and_variables_and_functions';
+
 $status-box-line-height: 26px;
 
 .issues-sortable-list .str-truncated {
@@ -8,13 +10,13 @@ $status-box-line-height: 26px;
   padding: $gl-padding-8;
   margin-top: $gl-padding-8;
   border-radius: $border-radius-default;
-  background-color: $gray-100;
+  background-color: var(--gray-100, $gray-100);
 
   .milestone {
     border: 0;
     padding: $gl-padding-top $gl-padding;
     border-radius: $border-radius-default;
-    background-color: $white;
+    background-color: var(--white, $white);
 
     &:not(:last-child) {
       margin-bottom: $gl-padding-4;
@@ -33,7 +35,7 @@ $status-box-line-height: 26px;
     .milestone-progress,
     .milestone-release-links {
       a {
-        color: $blue-600;
+        color: var(--blue-600, $blue-600);
       }
     }
 
@@ -61,7 +63,7 @@ $status-box-line-height: 26px;
   .issuable-row {
     span {
       a {
-        color: $gl-text-color;
+        color: var(--gray-900, $gray-900);
         word-wrap: break-word;
       }
 
@@ -162,7 +164,7 @@ $status-box-line-height: 26px;
     }
 
     .issuable-number {
-      color: $gl-text-color-secondary;
+      color: var(--gray-500, $gray-500);
       margin-right: 5px;
     }
 
@@ -177,7 +179,7 @@ $status-box-line-height: 26px;
 }
 
 .milestone-detail {
-  border-bottom: 1px solid $border-color;
+  border-bottom: 1px solid var(--border-color, $border-color);
 }
 
 @include media-breakpoint-down(xs) {
@@ -233,7 +235,7 @@ $status-box-line-height: 26px;
 }
 
 .issuable-row {
-  background-color: $white;
+  background-color: var(--white, $white);
 }
 
 .milestone-popover-instructions-list {
diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss
new file mode 100644
index 00000000000..8e7be629481
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/pipeline.scss
@@ -0,0 +1,484 @@
+@import 'mixins_and_variables_and_functions';
+@import './pipeline_mixins';
+
+/**
+ * Pipeline Page Bundle
+ *
+ * Styles used to render a single pipeline page.
+ *
+ * Includes its tabs:
+ *
+ * - [data-page='projects:pipelines:show']
+ * - [data-page='projects:pipelines:dag']
+ * - [data-page='projects:pipelines:builds']
+ * - [data-page='projects:pipelines:failures']
+ * - [data-page='projects:pipelines:tests']
+ * - ...
+ */
+
+.tab-pane {
+  .ci-table {
+    thead th {
+      border-top: 0;
+    }
+  }
+}
+
+.build-failures {
+  .build-state {
+    padding: 20px 2px;
+
+    .build-name {
+      font-weight: $gl-font-weight-normal;
+    }
+
+    .stage {
+      color: $gl-text-color-secondary;
+      font-weight: $gl-font-weight-normal;
+      vertical-align: middle;
+    }
+  }
+
+  .build-log {
+    border: 0;
+    line-height: initial;
+  }
+
+  .build-trace-row td {
+    border-top: 0;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    padding-top: 0;
+  }
+
+  .build-trace {
+    width: 100%;
+    text-align: left;
+    margin-top: $gl-padding;
+  }
+
+  .build-name {
+    width: 196px;
+
+    a {
+      font-weight: $gl-font-weight-bold;
+      color: $gl-text-color;
+      text-decoration: none;
+
+      &:focus,
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .build-actions {
+    width: 70px;
+    text-align: right;
+  }
+
+  .build-stage {
+    width: 140px;
+  }
+
+  .ci-status-icon-failed {
+    padding: 10px 0 10px 12px;
+    width: 12px + 24px; // padding-left + svg width
+  }
+
+  .build-icon svg {
+    width: 24px;
+    height: 24px;
+    vertical-align: middle;
+  }
+
+  .build-state,
+  .build-trace-row {
+    > td:last-child {
+      padding-right: 0;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    td:empty {
+      display: none;
+    }
+
+    .ci-table {
+      margin-top: 2 * $gl-padding;
+    }
+
+    .build-trace-container {
+      padding-top: $gl-padding;
+      padding-bottom: $gl-padding;
+    }
+
+    .build-trace {
+      margin-bottom: 0;
+      margin-top: 0;
+    }
+  }
+}
+
+.pipeline-tab-content {
+  display: flex;
+  width: 100%;
+  min-height: $dropdown-max-height-lg;
+  background-color: $gray-light;
+  padding: $gl-padding 0;
+  overflow: auto;
+}
+
+// Pipeline graph, used at
+// app/assets/javascripts/pipelines/components/graph/graph_component.vue
+.pipeline-graph {
+  white-space: nowrap;
+  transition: max-height 0.3s, padding 0.3s;
+
+  .stage-column-list,
+  .builds-container > ul {
+    padding: 0;
+  }
+
+  a {
+    text-decoration: none;
+    color: $gl-text-color;
+  }
+
+  svg {
+    vertical-align: middle;
+  }
+
+  .stage-column {
+    display: inline-block;
+    vertical-align: top;
+
+    &.left-margin {
+      &:not(:first-child) {
+        margin-left: 44px;
+
+        .left-connector {
+          @include flat-connector-before;
+        }
+      }
+    }
+
+    &.no-margin {
+      margin: 0;
+    }
+
+    li {
+      list-style: none;
+    }
+
+    // when downstream pipelines are present, the last stage isn't the last column
+    &:last-child:not(.has-downstream) {
+      .build {
+        // Remove right connecting horizontal line from first build in last stage
+        &:first-child::after {
+          border: 0;
+        }
+        // Remove right curved connectors from all builds in last stage
+        &:not(:first-child)::after {
+          border: 0;
+        }
+        // Remove opposite curve
+        .curve::before {
+          display: none;
+        }
+      }
+    }
+
+    // when upstream pipelines are present, the first stage isn't the first column
+    &:first-child:not(.has-upstream) {
+      .build {
+        // Remove left curved connectors from all builds in first stage
+        &:not(:first-child)::before {
+          border: 0;
+        }
+        // Remove opposite curve
+        .curve::after {
+          display: none;
+        }
+      }
+    }
+
+    // Curve first child connecting lines in opposite direction
+    .curve {
+      display: none;
+
+      &::before,
+      &::after {
+        content: '';
+        width: 21px;
+        height: 25px;
+        position: absolute;
+        top: -31px;
+        border-top: 2px solid $border-color;
+      }
+
+      &::after {
+        left: -44px;
+        border-right: 2px solid $border-color;
+        border-radius: 0 20px;
+      }
+
+      &::before {
+        right: -44px;
+        border-left: 2px solid $border-color;
+        border-radius: 20px 0 0;
+      }
+    }
+  }
+
+  .stage-name {
+    margin: 0 0 15px 10px;
+    font-weight: $gl-font-weight-bold;
+    width: 176px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 2.2em;
+  }
+
+  .build {
+    position: relative;
+    width: 186px;
+    margin-bottom: 10px;
+    white-space: normal;
+
+    .ci-job-dropdown-container {
+      // override dropdown.scss
+      .dropdown-menu li button {
+        padding: 0;
+        text-align: center;
+      }
+    }
+
+    // ensure .build-content has hover style when action-icon is hovered
+    .ci-job-dropdown-container:hover .build-content {
+      @extend .build-content:hover;
+    }
+
+    .ci-status-icon svg {
+      height: 24px;
+      width: 24px;
+    }
+
+    .dropdown-menu-toggle {
+      background-color: transparent;
+      border: 0;
+      padding: 0;
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    .build-content {
+      @include build-content();
+    }
+
+    a.build-content:hover,
+    button.build-content:hover {
+      background-color: $gray-darker;
+      border: 1px solid $dropdown-toggle-active-border-color;
+    }
+
+    // Connect first build in each stage with right horizontal line
+    &:first-child {
+      &::after {
+        content: '';
+        position: absolute;
+        top: 48%;
+        right: -48px;
+        border-top: 2px solid $border-color;
+        width: 48px;
+        height: 1px;
+      }
+    }
+
+    // Connect each build (except for first) with curved lines
+    &:not(:first-child) {
+      &::after,
+      &::before {
+        content: '';
+        top: -49px;
+        position: absolute;
+        border-bottom: 2px solid $border-color;
+        width: 25px;
+        height: 69px;
+      }
+
+      // Right connecting curves
+      &::after {
+        right: -25px;
+        border-right: 2px solid $border-color;
+        border-radius: 0 0 20px;
+      }
+
+      // Left connecting curves
+      &::before {
+        left: -25px;
+        border-left: 2px solid $border-color;
+        border-radius: 0 0 0 20px;
+      }
+    }
+
+    // Connect second build to first build with smaller curved line
+    &:nth-child(2) {
+      &::after,
+      &::before {
+        height: 29px;
+        top: -9px;
+      }
+
+      .curve {
+        display: block;
+      }
+    }
+  }
+
+  .ci-action-icon-container {
+    position: absolute;
+    right: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+
+    // Action Icons in big pipeline-graph nodes
+    &.ci-action-icon-wrapper {
+      height: 30px;
+      width: 30px;
+      border-radius: 100%;
+      display: block;
+      padding: 0;
+      line-height: 0;
+
+      svg {
+        fill: $gl-text-color-secondary;
+      }
+
+      .spinner {
+        top: 2px;
+      }
+
+      &.play {
+        svg {
+          left: 1px;
+          top: 1px;
+        }
+      }
+    }
+  }
+
+  .stage-action svg {
+    left: 1px;
+    top: -2px;
+  }
+}
+
+// Triggers the dropdown in the big pipeline graph
+.dropdown-counter-badge {
+  font-weight: 100;
+  font-size: 15px;
+  position: absolute;
+  right: 13px;
+  top: 8px;
+}
+
+.split-report-section {
+  border-bottom: 1px solid var(--gray-50, $gray-50);
+
+  .report-block-container {
+    max-height: 500px;
+    overflow: auto;
+  }
+
+  .space-children,
+  .space-children > span {
+    display: flex;
+    align-self: center;
+  }
+
+  .media {
+    align-items: center;
+    padding: 10px;
+    line-height: 20px;
+
+    /*
+    This fixes the wrapping div of the icon in the report header.
+    Apparently the borderless status icons are half the size of the status icons with border.
+    This means we have to double the size of the wrapping div for borderless icons.
+    */
+    .space-children:first-child {
+      width: 32px;
+      height: 32px;
+      align-items: center;
+      justify-content: center;
+      margin-right: 5px;
+      margin-left: 1px;
+    }
+  }
+
+  .code-text {
+    width: 100%;
+    flex: 1;
+  }
+}
+
+.big-pipeline-graph-dropdown-menu {
+  @include pipeline-graph-dropdown-menu();
+  width: 195px;
+  min-width: 195px;
+  left: 100%;
+  top: -10px;
+  box-shadow: 0 1px 5px $black-transparent;
+
+  /**
+   * Top arrow in the dropdown in the big pipeline graph
+   */
+  &::before,
+  &::after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+    top: 18px;
+  }
+
+  &::before {
+    left: -6px;
+    margin-top: 3px;
+    border-width: 7px 5px 7px 0;
+    border-right-color: $border-color;
+  }
+
+  &::after {
+    left: -5px;
+    border-width: 10px 7px 10px 0;
+    border-right-color: $white;
+  }
+}
+
+.codequality-report {
+  .media {
+    padding: $gl-padding;
+  }
+
+  .media-body {
+    flex-direction: row;
+  }
+
+  .report-block-container {
+    height: auto !important;
+  }
+}
+
+.test-reports-table {
+  .build-trace {
+    @include build-trace();
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/pipelines.scss b/app/assets/stylesheets/page_bundles/pipelines.scss
new file mode 100644
index 00000000000..6ff07017d2e
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/pipelines.scss
@@ -0,0 +1,195 @@
+@import 'mixins_and_variables_and_functions';
+@import './pipeline_mixins';
+
+/**
+ * Pipelines Bundle: Pipeline lists and Mini Pipelines
+ */
+
+// Pipelines list
+// Should affect pipelines table components rendered by:
+// - app/assets/javascripts/commit/pipelines/pipelines_bundle.js
+
+.pipelines {
+  .badge {
+    margin-bottom: 3px;
+  }
+
+  .pipeline-actions {
+    min-width: 170px; //Guarantees buttons don't break in several lines.
+
+    .btn-default {
+      color: $gl-text-color-secondary;
+    }
+
+    .btn.btn-retry:hover,
+    .btn.btn-retry:focus {
+      border-color: $dropdown-toggle-active-border-color;
+      background-color: $white-normal;
+    }
+
+    svg path {
+      fill: $gl-text-color-secondary;
+    }
+
+    .dropdown-menu {
+      max-height: $dropdown-max-height;
+      overflow-y: auto;
+    }
+
+    .dropdown-toggle,
+    .dropdown-menu {
+      color: $gl-text-color-secondary;
+
+      .fa {
+        color: $gl-text-color-secondary;
+        font-size: 14px;
+      }
+    }
+
+    .btn-group.open .btn-default {
+      background-color: $white-normal;
+      border-color: $border-white-normal;
+    }
+
+    .btn .text-center {
+      display: inline;
+    }
+
+    .tooltip {
+      white-space: nowrap;
+    }
+  }
+
+  .pipeline-tags .label-container {
+    white-space: normal;
+  }
+}
+
+// Mini Pipelines
+
+.stage-cell {
+  .mini-pipeline-graph-dropdown-toggle {
+    svg {
+      height: $ci-action-icon-size;
+      width: $ci-action-icon-size;
+      position: absolute;
+      top: -1px;
+      left: -1px;
+      z-index: 2;
+      overflow: visible;
+    }
+
+    &:hover,
+    &:active,
+    &:focus {
+      svg {
+        top: -2px;
+        left: -2px;
+      }
+    }
+  }
+
+  .stage-container {
+    display: inline-block;
+    position: relative;
+    vertical-align: middle;
+    height: $ci-action-icon-size;
+    margin: 3px 0;
+
+    + .stage-container {
+      margin-left: 6px;
+    }
+
+    // Hack to show a button tooltip inline
+    button.has-tooltip + .tooltip {
+      min-width: 105px;
+    }
+
+    // Bootstrap way of showing the content inline for anchors.
+    a.has-tooltip {
+      white-space: nowrap;
+    }
+
+    &:not(:last-child) {
+      &::after {
+        content: '';
+        width: 7px;
+        position: absolute;
+        right: -7px;
+        top: 11px;
+        border-bottom: 2px solid $border-color;
+      }
+    }
+
+    //delete when all pipelines are updated to new size
+    &.mr-widget-pipeline-stages {
+      + .stage-container {
+        margin-left: 4px;
+      }
+
+      &:not(:last-child) {
+        &::after {
+          width: 4px;
+          right: -4px;
+          top: 11px;
+        }
+      }
+    }
+  }
+}
+
+// Dropdown button in mini pipeline graph
+button.mini-pipeline-graph-dropdown-toggle {
+  @include mini-pipeline-item();
+}
+
+// Action icons inside dropdowns:
+// mini graph in pipelines table
+// mini graph in MR widget pipeline
+// mini graph in Commit widget pipeline
+.mini-pipeline-graph-dropdown-menu {
+  @include pipeline-graph-dropdown-menu();
+
+  &::before,
+  &::after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+    top: -6px;
+    left: 50%;
+    transform: translate(-50%, 0);
+    border-width: 0 5px 6px;
+
+    @include media-breakpoint-down(sm) {
+      left: 100%;
+      margin-left: -12px;
+    }
+  }
+
+  &::before {
+    border-width: 0 5px 5px;
+    border-bottom-color: $border-color;
+  }
+
+  &::after {
+    margin-top: 1px;
+    border-bottom-color: $white;
+  }
+
+  /**
+   * Center dropdown menu in mini graph
+   */
+  .dropdown &.dropdown-menu {
+    transform: translate(-80%, 0);
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      transform: translate(-50%, 0);
+      right: auto;
+      left: 50%;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/reports.scss b/app/assets/stylesheets/page_bundles/reports.scss
index 0c0605b0b3d..5a9dd454970 100644
--- a/app/assets/stylesheets/pages/reports.scss
+++ b/app/assets/stylesheets/page_bundles/reports.scss
@@ -1,42 +1,4 @@
-.split-report-section {
-  border-bottom: 1px solid $gray-darker;
-
-  .report-block-container {
-    max-height: 500px;
-    overflow: auto;
-  }
-
-  .space-children,
-  .space-children > span {
-    display: flex;
-    align-self: center;
-  }
-
-  .media {
-    align-items: center;
-    padding: 10px;
-    line-height: 20px;
-
-    /*
-    This fixes the wrapping div of the icon in the report header.
-    Apparently the borderless status icons are half the size of the status icons with border.
-    This means we have to double the size of the wrapping div for borderless icons.
-    */
-    .space-children:first-child {
-      width: 32px;
-      height: 32px;
-      align-items: center;
-      justify-content: center;
-      margin-right: 5px;
-      margin-left: 1px;
-    }
-  }
-
-  .code-text {
-    width: 100%;
-    flex: 1;
-  }
-}
+@import 'mixins_and_variables_and_functions';
 
 .mr-widget-grouped-section {
   .report-block-container {
@@ -69,15 +31,15 @@
   display: flex;
 
   &.failed svg {
-    color: $red-500;
+    color: var(--red-500, $red-500);
   }
 
   &.success svg {
-    color: $green-500;
+    color: var(--green-500, $green-500);
   }
 
   &.neutral svg {
-    color: $gray-500;
+    color: var(--gray-500, $gray-500);
   }
 
   .ci-status-icon {
diff --git a/app/assets/stylesheets/page_bundles/terminal.scss b/app/assets/stylesheets/page_bundles/terminal.scss
new file mode 100644
index 00000000000..627baf96d6f
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/terminal.scss
@@ -0,0 +1,3 @@
+#terminal > div {
+  min-height: 450px;
+}
diff --git a/app/assets/stylesheets/pages/wiki.scss b/app/assets/stylesheets/page_bundles/wiki.scss
index ccf11058b5b..eb34e7f3876 100644
--- a/app/assets/stylesheets/pages/wiki.scss
+++ b/app/assets/stylesheets/page_bundles/wiki.scss
@@ -1,3 +1,5 @@
+@import 'mixins_and_variables_and_functions';
+
 .title .edit-wiki-header {
   width: 780px;
   margin-left: auto;
@@ -9,7 +11,7 @@
   position: relative;
 
   .wiki-breadcrumb {
-    border-bottom: 1px solid $white-normal;
+    border-bottom: 1px solid var(--gray-50, $gray-50);
     padding: 11px 0;
   }
 
@@ -20,16 +22,16 @@
 
   .wiki-last-edit-by {
     display: block;
-    color: $gl-text-color-secondary;
+    color: var(--gray-500, $gray-500);
 
     strong {
-      color: $gl-text-color;
+      color: var(--gl-text-color, $gl-text-color);
     }
   }
 
   .light {
     font-weight: $gl-font-weight-normal;
-    color: $gl-text-color-secondary;
+    color: var(--gray-500, $gray-500);
   }
 
   .git-clone-holder {
@@ -92,7 +94,7 @@
   }
 
   a {
-    color: $layout-link-gray;
+    color: var(--gray-400, $gray-400);
 
     &:hover,
     &.active {
@@ -105,7 +107,7 @@
   }
 
   .active > a {
-    color: $black;
+    color: var(--black, $black);
   }
 
   ul.wiki-pages,
@@ -134,7 +136,7 @@
 
 ul.wiki-pages-list.content-list {
   a {
-    color: $blue-600;
+    color: var(--blue-600, $blue-600);
   }
 
   ul {
diff --git a/app/assets/stylesheets/pages/alert_management/details.scss b/app/assets/stylesheets/pages/alert_management/details.scss
index a104c06c853..514f228e223 100644
--- a/app/assets/stylesheets/pages/alert_management/details.scss
+++ b/app/assets/stylesheets/pages/alert_management/details.scss
@@ -33,7 +33,7 @@
   }
 
   .main-notes-list::before {
-    left: 15px !important;
+    left: $gl-spacing-scale-5 !important;
   }
 
   .note-header-info {
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 04167cbee1b..d7b4db3840e 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -123,20 +123,13 @@
 }
 
 .build-header {
-  .ci-header-container,
-  .header-action-buttons {
-    display: flex;
-  }
-
-  .ci-header-container {
-    min-height: 54px;
-  }
-
   .page-content-header {
     padding: 10px 0 9px;
   }
 
   .header-action-buttons {
+    display: flex;
+
     @include media-breakpoint-down(xs) {
       .sidebar-toggle-btn {
         margin-top: 0;
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index e6378fd9168..c55bfeb7b15 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -306,7 +306,6 @@
 .commit,
 .generic-commit-status,
 .branch-commit {
-  .autodevops-link,
   .commit-sha {
     color: $blue-600;
   }
diff --git a/app/assets/stylesheets/pages/error_tracking_list.scss b/app/assets/stylesheets/pages/error_tracking_list.scss
deleted file mode 100644
index cc391ca6c97..00000000000
--- a/app/assets/stylesheets/pages/error_tracking_list.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.error-list {
-  .dropdown {
-    min-width: auto;
-  }
-}
diff --git a/app/assets/stylesheets/pages/experience_level.scss b/app/assets/stylesheets/pages/experience_level.scss
deleted file mode 100644
index e57ad6321a5..00000000000
--- a/app/assets/stylesheets/pages/experience_level.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.signup-page[data-page^='registrations:experience_levels'] {
-  $card-shadow-color: rgba($black, 0.2);
-
-  .page-wrap {
-    background-color: $white;
-  }
-
-  .card-deck {
-    max-width: 828px;
-  }
-
-  .card {
-    transition: box-shadow 0.3s ease-in-out;
-  }
-
-  .card:hover {
-    box-shadow: 0 $gl-spacing-scale-3 $gl-spacing-scale-5 $card-shadow-color;
-  }
-
-  @media (min-width: $breakpoint-sm) {
-    .card-deck .card {
-      margin: 0 $gl-spacing-scale-3;
-    }
-  }
-
-  .stretched-link:hover {
-    text-decoration: none;
-  }
-}
diff --git a/app/assets/stylesheets/pages/experimental_separate_sign_up.scss b/app/assets/stylesheets/pages/experimental_separate_sign_up.scss
deleted file mode 100644
index dfc56654229..00000000000
--- a/app/assets/stylesheets/pages/experimental_separate_sign_up.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-.signup-page {
-  .page-wrap {
-    background-color: $gray-light;
-  }
-
-  .signup-box-container {
-    max-width: 960px;
-  }
-
-  .signup-box {
-    background-color: $white;
-    box-shadow: 0 0 0 1px $border-color;
-    border-radius: $border-radius;
-  }
-
-  .form-control {
-    &:active,
-    &:focus {
-      background-color: $white;
-    }
-  }
-
-  .devise-errors {
-    h2 {
-      font-size: $gl-font-size;
-      color: $red-700;
-    }
-  }
-
-  .omniauth-divider {
-    &::before,
-    &::after {
-      content: '';
-      flex: 1;
-      border-bottom: 1px solid $gray-dark;
-      margin: $gl-padding-24 0;
-    }
-
-    &::before {
-      margin-right: $gl-padding;
-    }
-
-    &::after {
-      margin-left: $gl-padding;
-    }
-  }
-
-  .omniauth-btn {
-    width: 48%;
-
-    @include media-breakpoint-down(md) {
-      width: 100%;
-    }
-
-    img {
-      width: $default-icon-size;
-      height: $default-icon-size;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/pages/graph.scss b/app/assets/stylesheets/pages/graph.scss
deleted file mode 100644
index bca4d50973a..00000000000
--- a/app/assets/stylesheets/pages/graph.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-.project-network {
-  border: 1px solid $border-color;
-
-  .controls {
-    color: $project-network-controls-color;
-    font-size: 14px;
-    padding: 5px;
-    border-bottom: 1px solid $border-color;
-    background: $gray-darker;
-  }
-
-  .network-graph {
-    background: $white;
-    height: 500px;
-    overflow-y: scroll;
-    overflow-x: hidden;
-  }
-}
-
-.svg-graph-container {
-  width: 100%;
-
-  .axis-tick {
-    opacity: 0.4;
-  }
-
-  .tick-text {
-    fill: $gl-text-color-secondary;
-  }
-
-  .x-axis-text {
-    fill: $gray-900;
-  }
-
-  .bar-rect {
-    fill: rgba($blue-500, 0.1);
-    stroke: $blue-500;
-  }
-
-  .bar-rect:hover {
-    fill: rgba($blue-700, 0.3);
-  }
-
-  .y-axis-label {
-    line {
-      stroke: $gray-300;
-    }
-
-    text {
-      font-weight: bold;
-      font-size: 12px;
-      fill: $gray-700;
-    }
-  }
-}
-
-.svg-graph-container-with-grab {
-  cursor: grab;
-}
-
-.svg-graph-container-grabbed {
-  cursor: grabbing;
-}
-
-@keyframes flickerAnimation {
-  0% { opacity: 1; }
-  50% { opacity: 0; }
-  100% { opacity: 1; }
-}
-
-.animate-flicker {
-  animation: flickerAnimation 1.5s infinite;
-  fill: $gray-300;
-}
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index 69fd094f83b..ee4f74882a1 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -95,6 +95,78 @@
   }
 }
 
+.group-home-panel {
+  margin-top: $gl-padding;
+  margin-bottom: $gl-padding;
+
+  .home-panel-avatar {
+    width: $home-panel-title-row-height;
+    height: $home-panel-title-row-height;
+    flex-shrink: 0;
+    flex-basis: $home-panel-title-row-height;
+  }
+
+  .home-panel-title {
+    font-size: 20px;
+    line-height: $gl-line-height-24;
+    font-weight: bold;
+
+    .icon {
+      vertical-align: -1px;
+    }
+
+    .home-panel-topic-list {
+      font-size: $gl-font-size;
+      font-weight: $gl-font-weight-normal;
+
+      .icon {
+        position: relative;
+        top: 3px;
+        margin-right: $gl-padding-4;
+      }
+    }
+  }
+
+  .home-panel-title-row {
+    @include media-breakpoint-down(sm) {
+      .home-panel-avatar {
+        width: $home-panel-avatar-mobile-size;
+        height: $home-panel-avatar-mobile-size;
+        flex-basis: $home-panel-avatar-mobile-size;
+
+        .avatar {
+          font-size: 20px;
+          line-height: 46px;
+        }
+      }
+
+      .home-panel-title {
+        margin-top: 4px;
+        margin-bottom: 2px;
+        font-size: $gl-font-size;
+        line-height: $gl-font-size-large;
+      }
+
+      .home-panel-topic-list,
+      .home-panel-metadata {
+        font-size: $gl-font-size-small;
+      }
+    }
+  }
+
+  .home-panel-metadata {
+    font-weight: normal;
+    font-size: 14px;
+    line-height: $gl-btn-line-height;
+  }
+
+  .home-panel-description {
+    @include media-breakpoint-up(md) {
+      font-size: $gl-font-size-large;
+    }
+  }
+}
+
 .home-panel-buttons {
   .home-panel-action-button {
     vertical-align: top;
diff --git a/app/assets/stylesheets/pages/incident_management_list.scss b/app/assets/stylesheets/pages/incident_management_list.scss
index 316066694a8..c0a1fa72b1f 100644
--- a/app/assets/stylesheets/pages/incident_management_list.scss
+++ b/app/assets/stylesheets/pages/incident_management_list.scss
@@ -7,6 +7,19 @@
   table {
     @include gl-text-gray-500;
 
+    tbody {
+      tr:not(.b-table-busy-slot) {
+        // TODO replace with gitlab/ui utilities: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1791
+        &:hover {
+          border-top-style: double;
+
+          td {
+            border-bottom-style: initial;
+          }
+        }
+      }
+    }
+
     tr {
       &:focus {
         outline: none;
@@ -119,7 +132,7 @@
   }
 
   @include media-breakpoint-down(xs) {
-    .incident-management-list-header {
+    .list-header {
       flex-direction: column-reverse;
     }
 
@@ -127,9 +140,4 @@
       @include gl-w-full;
     }
   }
-
-  // TODO: Abstract to `@gitlab/ui` utility set: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/921
-  .gl-fill-green-500 {
-    fill: $green-500;
-  }
 }
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 53525a4d877..7097c2b10c4 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -117,7 +117,8 @@
   }
 }
 
-.assignee {
+.assignee,
+.reviewer {
   .merge-icon {
     color: $orange-400;
     position: absolute;
@@ -240,16 +241,6 @@
     .avatar {
       margin-left: 0;
     }
-
-    a.edit-link:not([href]):hover {
-      color: rgba($gray-normal, 0.2);
-    }
-
-    .confidential-edit,
-    .lock-edit,
-    .edit-link {
-      @extend .btn-link;
-    }
   }
 
   .cross-project-reference,
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 03603f637c8..d2eb00c4a4d 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -1,38 +1,3 @@
-.issues-list {
-  &.manual-ordering {
-    background-color: $gray-light;
-    border-radius: $border-radius-default;
-    padding: $gl-padding-8;
-
-    .issue {
-      background-color: $white;
-      margin-bottom: $gl-padding-8;
-      border-radius: $border-radius-default;
-      border: 1px solid $gray-100;
-      box-shadow: 0 1px 2px $issue-boards-card-shadow;
-    }
-  }
-
-  .issue {
-    padding: 10px $gl-padding;
-    position: relative;
-
-    .title {
-      margin-bottom: 2px;
-    }
-
-    .issue-labels,
-    .author-link {
-      display: inline-block;
-    }
-
-    .icon-merge-request-unmerged {
-      height: 13px;
-      margin-bottom: 3px;
-    }
-  }
-}
-
 .issue-realtime-pre-pulse {
   opacity: 0;
 }
@@ -369,13 +334,3 @@ ul.related-merge-requests > li {
 .issuable-header-slide-leave-to {
   transform: translateY(-100%);
 }
-
-.issuable-list-root {
-  .gl-label-link {
-    text-decoration: none;
-
-    &:hover {
-      color: inherit;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/pages/issues/issues_list.scss b/app/assets/stylesheets/pages/issues/issues_list.scss
deleted file mode 100644
index c0af7a6af6d..00000000000
--- a/app/assets/stylesheets/pages/issues/issues_list.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.svg-container.jira-logo-container {
-  svg {
-    vertical-align: text-bottom;
-  }
-}
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index e37b26187e7..31606cb3ba5 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -134,11 +134,6 @@
   }
 }
 
-.label-description-wrapper {
-  margin-right: 8px;
-  margin-left: 8px;
-}
-
 .prioritized-labels {
   margin-bottom: 30px;
 
@@ -201,10 +196,6 @@
   }
 }
 
-.label-options-toggle {
-  width: 100%;
-}
-
 .label-subscription {
   vertical-align: middle;
 
@@ -239,20 +230,6 @@
   }
 }
 
-.label-link {
-  display: inline-flex;
-  vertical-align: text-bottom;
-
-  &:hover .color-label {
-    text-decoration: underline;
-  }
-
-  .label {
-    vertical-align: inherit;
-    font-size: $label-font-size;
-  }
-}
-
 .labels-container {
   background-color: $gray-light;
   border-radius: $border-radius-default;
@@ -270,41 +247,13 @@
 
 .label-badge {
   color: $gray-900;
+  display: inline-block;
   font-weight: $gl-font-weight-normal;
   padding: $gl-padding-4 $gl-padding-8;
   border-radius: $border-radius-default;
   font-size: $label-font-size;
 }
 
-.label-badge-blue {
-  background-color: $theme-blue-100;
-}
-
-.label-badge-gray {
-  background-color: $gray-50;
-}
-
-.label-links {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  white-space: nowrap;
-}
-
-.label-link-item {
-  padding: 0;
-}
-
-.label-description {
-  .description-text {
-    margin-bottom: 10px;
-
-    .admin-labels & {
-      margin-bottom: 0;
-    }
-  }
-}
-
 .label-list-item {
   .content-list &::before,
   .content-list &::after {
@@ -313,21 +262,12 @@
 
   .label-name {
     width: 200px;
-    flex-shrink: 0;
 
     .gl-label {
       line-height: $gl-line-height;
     }
   }
 
-  .label-description {
-    flex-grow: 1;
-
-    a {
-      color: $blue-600;
-    }
-  }
-
   .label {
     padding: 4px $grid-size;
     font-size: $label-font-size;
@@ -382,31 +322,8 @@
       text-align: left;
     }
 
-    .label-links {
-      white-space: normal;
-    }
-
     .label-description {
       order: 3;
-      width: 100%;
-
-      > .label-description-wrapper {
-        margin-left: 0;
-        margin-right: 0;
-      }
-    }
-  }
-}
-
-@media (max-width: 910px) {
-  .priority-badge {
-    display: block;
-    width: 100%;
-    margin-left: 0;
-    margin-top: $gl-padding;
-
-    .label-badge {
-      display: inline-block;
     }
   }
 }
@@ -426,3 +343,9 @@
     box-shadow: 0 0 0 1px inset;
   }
 }
+
+/* Fix scoped label padding in cases where old markdown uses the old label structure */
+.gl-label-text + .gl-label-text {
+  @include gl-pl-2;
+  @include gl-pr-3;
+}
diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index 2d9a9f3029f..922f95ff5df 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -209,6 +209,27 @@
   }
 }
 
+
+.members-table {
+  @include media-breakpoint-up(lg) {
+    .col-meta {
+      width: px-to-rem(150px);
+    }
+
+    .col-max-role {
+      width: px-to-rem(175px);
+    }
+
+    .col-expiration {
+      width: px-to-rem(200px);
+    }
+
+    .col-actions {
+      width: px-to-rem(50px);
+    }
+  }
+}
+
 .card-mobile {
   .content-list.members-list li {
     display: block;
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 8aaeb92eb7a..6f71177e870 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -471,12 +471,6 @@ $mr-widget-min-height: 69px;
       flex: 1;
     }
 
-    .issuable-meta {
-      .author-link {
-        display: inline-block;
-      }
-    }
-
     .merge-request-title {
       margin-bottom: 2px;
 
@@ -770,8 +764,14 @@ $mr-widget-min-height: 69px;
     position: -webkit-sticky;
     position: sticky;
     top: $header-height + $mr-tabs-height;
-    margin-left: -16px;
-    width: calc(100% + 32px);
+
+    .with-system-header & {
+      top: $header-height + $mr-tabs-height + $system-header-height;
+    }
+
+    .with-system-header.with-performance-bar & {
+      top: $header-height + $mr-tabs-height + $system-header-height + $performance-bar-height;
+    }
 
     .mr-version-menus-container {
       flex-wrap: nowrap;
@@ -790,6 +790,14 @@ $mr-widget-min-height: 69px;
   background-color: $white;
   border-bottom: 1px solid $border-color;
 
+  .with-system-header & {
+    top: $header-height + $system-header-height;
+  }
+
+  .with-system-header.with-performance-bar & {
+    top: $header-height + $system-header-height + $performance-bar-height;
+  }
+
   @include media-breakpoint-up(sm) {
     position: -webkit-sticky;
     position: sticky;
@@ -868,6 +876,13 @@ $mr-widget-min-height: 69px;
   }
 }
 
+.container-fluid {
+  // Negative margins for mobile/tablet screen
+  .diffs.tab-pane {
+    margin: 0 (-$gl-padding);
+  }
+}
+
 // Wrap MR tabs/buttons so you don't have to scroll on desktop
 @include media-breakpoint-down(md) {
   .merge-request-tabs-container,
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index c144fb13322..b510822a20a 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -858,68 +858,28 @@ $note-form-margin-left: 72px;
 }
 
 .line-resolve-all-container {
-  margin: $gl-padding-4;
-
   > div {
     white-space: nowrap;
   }
 
-  .discussion-next-btn {
-    border-radius: 0;
-  }
-
-  .toggle-all-discussions-btn {
+  .btn-group .btn:first-child {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
-
-  .btn {
-    line-height: $gl-line-height;
-
-    svg {
-      fill: $gray-500;
-    }
-
-    &.discussion-create-issue-btn {
-      border-radius: 0;
-      border-right: 0;
-
-      a {
-        padding: 0;
-        line-height: 0;
-
-        &:hover {
-          text-decoration: none;
-          border: 0;
-        }
-      }
-    }
-
-    &.discussion-next-btn {
-      border-right: 0;
-    }
-  }
 }
 
 .line-resolve-all {
   vertical-align: middle;
   display: inline-block;
-  padding: $gl-padding-4 10px;
+  padding: $gl-padding-8 $gl-padding-12;
   background-color: $gray-light;
   border: 1px solid $border-color;
+  border-right: 0;
   border-radius: $border-radius-default;
-  font-size: $gl-btn-small-font-size;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
-  border-right: 0;
-
-  .line-resolve-btn {
-    color: $gray-500;
-
-    svg {
-      vertical-align: text-top;
-    }
-  }
+  font-size: $gl-font-size;
+  line-height: 1rem;
 
   @include media-breakpoint-down(xs) {
     flex: 1;
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 8b104ce9017..2df43b861b2 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -1,119 +1,3 @@
-@mixin flat-connector-before($length: 44px) {
-  &::before {
-    content: '';
-    position: absolute;
-    top: 48%;
-    left: -$length;
-    border-top: 2px solid $border-color;
-    width: $length;
-    height: 1px;
-  }
-}
-
-@mixin build-content($border-radius: 30px) {
-  display: inline-block;
-  padding: 8px 10px 9px;
-  width: 100%;
-  border: 1px solid $border-color;
-  border-radius: $border-radius;
-  background-color: $white;
-
-  &:hover {
-    background-color: $gray-darker;
-    border: 1px solid $dropdown-toggle-active-border-color;
-    color: $gl-text-color;
-  }
-}
-
-.pipelines {
-  .negative-margin-top {
-    margin-top: -$pipelines-table-header-height;
-  }
-
-  .stage {
-    max-width: 90px;
-    width: 90px;
-    text-align: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .table-holder {
-    overflow: unset;
-    width: 100%;
-  }
-
-  .commit-title {
-    margin: 0;
-    white-space: normal;
-
-    @include media-breakpoint-down(sm) {
-      justify-content: flex-end;
-    }
-  }
-
-  .ci-table {
-    .badge {
-      margin-bottom: 3px;
-    }
-
-    .pipeline-id {
-      color: $black;
-    }
-
-    .pipelines-time-ago {
-      text-align: right;
-    }
-
-    .pipeline-actions {
-      min-width: 170px; //Guarantees buttons don't break in several lines.
-
-      .btn-default {
-        color: $gl-text-color-secondary;
-      }
-
-      .btn.btn-retry:hover,
-      .btn.btn-retry:focus {
-        border-color: $dropdown-toggle-active-border-color;
-        background-color: $white-normal;
-      }
-
-      svg path {
-        fill: $gl-text-color-secondary;
-      }
-
-      .dropdown-menu {
-        max-height: $dropdown-max-height;
-        overflow-y: auto;
-      }
-
-      .dropdown-toggle,
-      .dropdown-menu {
-        color: $gl-text-color-secondary;
-
-        .fa {
-          color: $gl-text-color-secondary;
-          font-size: 14px;
-        }
-      }
-
-      .btn-group.open .btn-default {
-        background-color: $white-normal;
-        border-color: $border-white-normal;
-      }
-
-      .btn .text-center {
-        display: inline;
-      }
-
-      .tooltip {
-        white-space: nowrap;
-      }
-    }
-  }
-}
-
 @include media-breakpoint-down(md) {
   .content-list {
     &.builds-content-list {
@@ -124,22 +8,6 @@
 }
 
 .ci-table {
-  .build.retried {
-    background-color: $gray-lightest;
-  }
-
-  .commit-link {
-    a {
-      &:focus {
-        text-decoration: none;
-      }
-    }
-
-    a:hover {
-      text-decoration: none;
-    }
-  }
-
   .avatar {
     margin-left: 0;
     float: none;
@@ -160,7 +28,10 @@
       height: 14px;
       width: 14px;
       vertical-align: middle;
-      fill: $gl-text-color-secondary;
+
+      &:not(.text-warning) {
+        fill: $gl-text-color-secondary;
+      }
     }
 
     .sprite {
@@ -191,45 +62,12 @@
     }
   }
 
-  .icon-container {
-    display: inline-block;
-
-    &.commit-icon {
-      width: 15px;
-      text-align: center;
-    }
-  }
-
-  /**
-   * Play button with icon in dropdowns
-   */
-  .no-btn {
-    border: 0;
-    background: none;
-    outline: none;
-    width: 100%;
-    text-align: left;
-
-    .icon-play {
-      position: relative;
-      top: 2px;
-      margin-right: 5px;
-      height: 13px;
-      width: 12px;
-    }
-  }
-
   .duration,
   .finished-at {
     color: $gl-text-color-secondary;
     margin: 0;
     white-space: nowrap;
 
-    .fa {
-      font-size: 12px;
-      margin-right: 4px;
-    }
-
     svg {
       width: 12px;
       height: 12px;
@@ -241,843 +79,20 @@
   .build-link a {
     color: $gl-text-color;
   }
-
-  .btn-group.open .dropdown-toggle {
-    box-shadow: none;
-  }
-
-  .pipeline-tags .label-container {
-    white-space: normal;
-  }
 }
 
-.stage-cell {
-  .mini-pipeline-graph-dropdown-toggle {
-    svg {
-      height: $ci-action-icon-size;
-      width: $ci-action-icon-size;
-      position: absolute;
-      top: -1px;
-      left: -1px;
-      z-index: 2;
-      overflow: visible;
-    }
-
-    &:hover,
-    &:active,
-    &:focus {
-      svg {
-        top: -2px;
-        left: -2px;
-      }
+[data-page='admin:jobs:index'] {
+  .admin-builds-table {
+    td:last-child {
+      min-width: 120px;
     }
   }
-
-  .stage-container {
-    display: inline-block;
-    position: relative;
-    vertical-align: middle;
-    height: $ci-action-icon-size;
-    margin: 3px 0;
-
-    + .stage-container {
-      margin-left: 6px;
-    }
-
-    // Hack to show a button tooltip inline
-    button.has-tooltip + .tooltip {
-      min-width: 105px;
-    }
-
-    // Bootstrap way of showing the content inline for anchors.
-    a.has-tooltip {
-      white-space: nowrap;
-    }
-
-    &:not(:last-child) {
-      &::after {
-        content: '';
-        width: 7px;
-        position: absolute;
-        right: -7px;
-        top: 11px;
-        border-bottom: 2px solid $border-color;
-      }
-    }
-
-    //delete when all pipelines are updated to new size
-    &.mr-widget-pipeline-stages {
-      + .stage-container {
-        margin-left: 4px;
-      }
-
-      &:not(:last-child) {
-        &::after {
-          width: 4px;
-          right: -4px;
-          top: 11px;
-        }
-      }
-    }
-  }
-}
-
-.admin-builds-table {
-  .ci-table td:last-child {
-    min-width: 120px;
-  }
-}
-
-// Pipeline visualization
-.pipeline-actions {
-  border-bottom: 0;
-}
-
-.tab-pane {
-  &.builds .ci-table tr {
-    height: 71px;
-  }
-
-  .ci-table {
-    thead th {
-      border-top: 0;
-    }
-  }
-}
-
-.build-failures {
-  .build-state {
-    padding: 20px 2px;
-
-    .build-name {
-      font-weight: $gl-font-weight-normal;
-    }
-
-    .stage {
-      color: $gl-text-color-secondary;
-      font-weight: $gl-font-weight-normal;
-      vertical-align: middle;
-    }
-  }
-
-  .build-log {
-    border: 0;
-    line-height: initial;
-  }
-
-  .build-trace-row td {
-    border-top: 0;
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    padding-top: 0;
-  }
-
-  .build-trace {
-    width: 100%;
-    text-align: left;
-    margin-top: $gl-padding;
-  }
-
-  .build-name {
-    width: 196px;
-
-    a {
-      font-weight: $gl-font-weight-bold;
-      color: $gl-text-color;
-      text-decoration: none;
-
-      &:focus,
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-
-  .build-actions {
-    width: 70px;
-    text-align: right;
-  }
-
-  .build-stage {
-    width: 140px;
-  }
-
-  .ci-status-icon-failed {
-    padding: 10px 0 10px 12px;
-    width: 12px + 24px; // padding-left + svg width
-  }
-
-  .build-icon svg {
-    width: 24px;
-    height: 24px;
-    vertical-align: middle;
-  }
-
-  .build-state,
-  .build-trace-row {
-    > td:last-child {
-      padding-right: 0;
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-    td:empty {
-      display: none;
-    }
-
-    .ci-table {
-      margin-top: 2 * $gl-padding;
-    }
-
-    .build-trace-container {
-      padding-top: $gl-padding;
-      padding-bottom: $gl-padding;
-    }
-
-    .build-trace {
-      margin-bottom: 0;
-      margin-top: 0;
-    }
-  }
-}
-
-.pipeline-tab-content {
-  display: flex;
-  width: 100%;
-  min-height: $dropdown-max-height-lg;
-  background-color: $gray-light;
-  padding: $gl-padding 0;
-  overflow: auto;
-}
-
-// Pipeline graph
-.pipeline-graph {
-  white-space: nowrap;
-  transition: max-height 0.3s, padding 0.3s;
-
-  .stage-column-list,
-  .builds-container > ul {
-    padding: 0;
-  }
-
-  a {
-    text-decoration: none;
-    color: $gl-text-color;
-  }
-
-  svg {
-    vertical-align: middle;
-  }
-
-  .stage-column {
-    display: inline-block;
-    vertical-align: top;
-
-    &.left-margin {
-      &:not(:first-child) {
-        margin-left: 44px;
-
-        .left-connector {
-          @include flat-connector-before;
-        }
-      }
-    }
-
-    &.no-margin {
-      margin: 0;
-    }
-
-    li {
-      list-style: none;
-    }
-
-    // when downstream pipelines are present, the last stage isn't the last column
-    &:last-child:not(.has-downstream) {
-      .build {
-        // Remove right connecting horizontal line from first build in last stage
-        &:first-child::after {
-          border: 0;
-        }
-        // Remove right curved connectors from all builds in last stage
-        &:not(:first-child)::after {
-          border: 0;
-        }
-        // Remove opposite curve
-        .curve::before {
-          display: none;
-        }
-      }
-    }
-
-    // when upstream pipelines are present, the first stage isn't the first column
-    &:first-child:not(.has-upstream) {
-      .build {
-        // Remove left curved connectors from all builds in first stage
-        &:not(:first-child)::before {
-          border: 0;
-        }
-        // Remove opposite curve
-        .curve::after {
-          display: none;
-        }
-      }
-    }
-
-    // Curve first child connecting lines in opposite direction
-    .curve {
-      display: none;
-
-      &::before,
-      &::after {
-        content: '';
-        width: 21px;
-        height: 25px;
-        position: absolute;
-        top: -31px;
-        border-top: 2px solid $border-color;
-      }
-
-      &::after {
-        left: -44px;
-        border-right: 2px solid $border-color;
-        border-radius: 0 20px;
-      }
-
-      &::before {
-        right: -44px;
-        border-left: 2px solid $border-color;
-        border-radius: 20px 0 0;
-      }
-    }
-  }
-
-  .stage-name {
-    margin: 0 0 15px 10px;
-    font-weight: $gl-font-weight-bold;
-    width: 176px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    line-height: 2.2em;
-  }
-
-  .build {
-    position: relative;
-    width: 186px;
-    margin-bottom: 10px;
-    white-space: normal;
-
-    .ci-job-dropdown-container {
-      // override dropdown.scss
-      .dropdown-menu li button {
-        padding: 0;
-        text-align: center;
-      }
-    }
-
-    // ensure .build-content has hover style when action-icon is hovered
-    .ci-job-dropdown-container:hover .build-content {
-      @extend .build-content:hover;
-    }
-
-    .ci-status-icon svg {
-      height: 24px;
-      width: 24px;
-    }
-
-    .dropdown-menu-toggle {
-      background-color: transparent;
-      border: 0;
-      padding: 0;
-
-      &:focus {
-        outline: none;
-      }
-    }
-
-    .build-content {
-      @include build-content();
-    }
-
-    a.build-content:hover,
-    button.build-content:hover {
-      background-color: $gray-darker;
-      border: 1px solid $dropdown-toggle-active-border-color;
-    }
-
-    // Connect first build in each stage with right horizontal line
-    &:first-child {
-      &::after {
-        content: '';
-        position: absolute;
-        top: 48%;
-        right: -48px;
-        border-top: 2px solid $border-color;
-        width: 48px;
-        height: 1px;
-      }
-    }
-
-    // Connect each build (except for first) with curved lines
-    &:not(:first-child) {
-      &::after,
-      &::before {
-        content: '';
-        top: -49px;
-        position: absolute;
-        border-bottom: 2px solid $border-color;
-        width: 25px;
-        height: 69px;
-      }
-
-      // Right connecting curves
-      &::after {
-        right: -25px;
-        border-right: 2px solid $border-color;
-        border-radius: 0 0 20px;
-      }
-
-      // Left connecting curves
-      &::before {
-        left: -25px;
-        border-left: 2px solid $border-color;
-        border-radius: 0 0 0 20px;
-      }
-    }
-
-    // Connect second build to first build with smaller curved line
-    &:nth-child(2) {
-      &::after,
-      &::before {
-        height: 29px;
-        top: -9px;
-      }
-
-      .curve {
-        display: block;
-      }
-    }
-  }
-
-  .ci-action-icon-container {
-    position: absolute;
-    right: 5px;
-    top: 50%;
-    transform: translateY(-50%);
-
-    // Action Icons in big pipeline-graph nodes
-    &.ci-action-icon-wrapper {
-      height: 30px;
-      width: 30px;
-      border-radius: 100%;
-      display: block;
-      padding: 0;
-      line-height: 0;
-
-      svg {
-        fill: $gl-text-color-secondary;
-      }
-
-      .spinner {
-        top: 2px;
-      }
-
-      &.play {
-        svg {
-          left: 1px;
-          top: 1px;
-        }
-      }
-    }
-  }
-
-  .stage-action svg {
-    left: 1px;
-    top: -2px;
-  }
-}
-
-// Triggers the dropdown in the big pipeline graph
-.dropdown-counter-badge {
-  font-weight: 100;
-  font-size: 15px;
-  position: absolute;
-  right: 13px;
-  top: 8px;
-}
-
-.ci-build-text,
-.ci-status-text {
-  font-weight: 200;
-}
-
-@mixin mini-pipeline-graph-color(
-  $color-background-default,
-  $color-background-hover-focus,
-  $color-background-active,
-  $color-foreground-default,
-  $color-foreground-hover-focus,
-  $color-foreground-active
-) {
-  background-color: $color-background-default;
-  border-color: $color-foreground-default;
-
-  svg {
-    fill: $color-foreground-default;
-  }
-
-  &:hover,
-  &:focus {
-    background-color: $color-background-hover-focus;
-    border-color: $color-foreground-hover-focus;
-
-    svg {
-      fill: $color-foreground-hover-focus;
-    }
-  }
-
-  &:active {
-    background-color: $color-background-active;
-    border-color: $color-foreground-active;
-
-    svg {
-      fill: $color-foreground-active;
-    }
-  }
-
-  &:focus {
-    box-shadow: 0 0 4px 1px $blue-300;
-  }
-}
-
-@mixin mini-pipeline-item() {
-  border-radius: 100px;
-  background-color: $white;
-  border-width: 1px;
-  border-style: solid;
-  width: $ci-action-icon-size;
-  height: $ci-action-icon-size;
-  margin: 0;
-  padding: 0;
-  position: relative;
-  vertical-align: middle;
-
-  &:hover,
-  &:active,
-  &:focus {
-    outline: none;
-    border-width: 2px;
-  }
-
-  // Dropdown button animation in mini pipeline graph
-  &.ci-status-icon-success {
-    @include mini-pipeline-graph-color($white, $green-100, $green-200, $green-500, $green-600, $green-700);
-  }
-
-  &.ci-status-icon-failed {
-    @include mini-pipeline-graph-color($white, $red-100, $red-200, $red-500, $red-600, $red-700);
-  }
-
-  &.ci-status-icon-pending,
-  &.ci-status-icon-waiting-for-resource,
-  &.ci-status-icon-success-with-warnings {
-    @include mini-pipeline-graph-color($white, $orange-50, $orange-100, $orange-500, $orange-600, $orange-700);
-  }
-
-  &.ci-status-icon-preparing,
-  &.ci-status-icon-running {
-    @include mini-pipeline-graph-color($white, $blue-100, $blue-200, $blue-500, $blue-600, $blue-700);
-  }
-
-  &.ci-status-icon-canceled,
-  &.ci-status-icon-scheduled,
-  &.ci-status-icon-disabled,
-  &.ci-status-icon-not-found,
-  &.ci-status-icon-manual {
-    @include mini-pipeline-graph-color($white, $gray-500, $gray-700, $gray-900, $gray-950, $black);
-  }
-
-  &.ci-status-icon-created,
-  &.ci-status-icon-skipped {
-    @include mini-pipeline-graph-color($white, $gray-100, $gray-200, $gray-300, $gray-400, $gray-500);
-  }
-}
-
-// Dropdown button in mini pipeline graph
-button.mini-pipeline-graph-dropdown-toggle {
-  @include mini-pipeline-item();
-}
-
-/**
- Action icons inside dropdowns:
- - mini graph in pipelines table
- - dropdown in big graph
- - mini graph in MR widget pipeline
- - mini graph in Commit widget pipeline
-*/
-.big-pipeline-graph-dropdown-menu,
-.mini-pipeline-graph-dropdown-menu {
-  width: 240px;
-  max-width: 240px;
-
-  // override dropdown.scss
-  &.dropdown-menu li button,
-  &.dropdown-menu li a.ci-action-icon-container {
-    padding: 0;
-    text-align: center;
-  }
-
-  .ci-action-icon-container {
-    position: absolute;
-    right: 8px;
-    top: 8px;
-
-    &.ci-action-icon-wrapper {
-      height: $ci-action-dropdown-button-size;
-      width: $ci-action-dropdown-button-size;
-      border-radius: 50%;
-      display: block;
-
-      &:hover {
-        box-shadow: inset 0 0 0 0.0625rem $dropdown-toggle-active-border-color;
-        background-color: $gray-darker;
-
-        svg {
-          fill: $gl-text-color;
-        }
-      }
-
-      .spinner,
-      svg {
-        width: $ci-action-dropdown-svg-size;
-        height: $ci-action-dropdown-svg-size;
-        fill: $gl-text-color-secondary;
-        position: relative;
-        top: 1px;
-        vertical-align: initial;
-      }
-    }
-  }
-
-  // SVGs in the commit widget and mr widget
-  a.ci-action-icon-container.ci-action-icon-wrapper svg {
-    top: 5px;
-  }
-
-  .scrollable-menu {
-    padding: 0;
-    max-height: 245px;
-    overflow: auto;
-  }
-
-  li {
-    position: relative;
-
-    // ensure .mini-pipeline-graph-dropdown-item has hover style when action-icon is hovered
-    &:hover > .mini-pipeline-graph-dropdown-item,
-    &:hover > .ci-job-component > .mini-pipeline-graph-dropdown-item {
-      @extend .mini-pipeline-graph-dropdown-item:hover;
-    }
-
-    // link to the build
-    .mini-pipeline-graph-dropdown-item {
-      align-items: center;
-      clear: both;
-      display: flex;
-      font-weight: normal;
-      line-height: $line-height-base;
-      white-space: nowrap;
-
-      // Match dropdown.scss for all `a` tags
-      &.non-details-job-component {
-        padding: $gl-padding-8 $gl-btn-horz-padding;
-      }
-
-      .ci-job-name-component {
-        align-items: center;
-        display: flex;
-        flex: 1;
-      }
-
-
-      .ci-status-icon {
-        @include gl-mr-3;
-
-        position: relative;
-
-        > svg {
-          width: $pipeline-dropdown-status-icon-size;
-          height: $pipeline-dropdown-status-icon-size;
-          margin: 3px 0;
-          position: relative;
-          overflow: visible;
-          display: block;
-        }
-      }
-
-      &:hover,
-      &:focus {
-        outline: none;
-        text-decoration: none;
-        background-color: $gray-darker;
-      }
-    }
-  }
-}
-
-// Dropdown in the big pipeline graph
-.big-pipeline-graph-dropdown-menu {
-  width: 195px;
-  min-width: 195px;
-  left: 100%;
-  top: -10px;
-  box-shadow: 0 1px 5px $black-transparent;
-
-  /**
-   * Top arrow in the dropdown in the big pipeline graph
-   */
-  &::before,
-  &::after {
-    content: '';
-    display: inline-block;
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-    top: 18px;
-  }
-
-  &::before {
-    left: -6px;
-    margin-top: 3px;
-    border-width: 7px 5px 7px 0;
-    border-right-color: $border-color;
-  }
-
-  &::after {
-    left: -5px;
-    border-width: 10px 7px 10px 0;
-    border-right-color: $white;
-  }
-}
-
-/**
- * Top arrow in the dropdown in the mini pipeline graph
- */
-.mini-pipeline-graph-dropdown-menu {
-  &::before,
-  &::after {
-    content: '';
-    display: inline-block;
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-    top: -6px;
-    left: 50%;
-    transform: translate(-50%, 0);
-    border-width: 0 5px 6px;
-
-    @include media-breakpoint-down(sm) {
-      left: 100%;
-      margin-left: -12px;
-    }
-  }
-
-  &::before {
-    border-width: 0 5px 5px;
-    border-bottom-color: $border-color;
-  }
-
-  &::after {
-    margin-top: 1px;
-    border-bottom-color: $white;
-  }
-
-  /**
-   * Center dropdown menu in mini graph
-   */
-  .dropdown &.dropdown-menu {
-    transform: translate(-80%, 0);
-
-    @media (min-width: map-get($grid-breakpoints, md)) {
-      transform: translate(-50%, 0);
-      right: auto;
-      left: 50%;
-    }
-  }
-}
-
-/**
- * Terminal
- */
-.terminal-icon {
-  margin-left: 3px;
-}
-
-.terminal-container {
-  .content-block {
-    border-bottom: 0;
-  }
-
-  #terminal {
-    margin-top: 10px;
-    min-height: 450px;
-    box-sizing: border-box;
-
-    > div {
-      min-height: 450px;
-    }
-  }
-}
-
-.ci-header-container {
-  min-height: 55px;
-
-  .text-center {
-    padding-top: 12px;
-  }
 }
 
 .pipelines-container .top-area .nav-controls > .btn:last-child {
   float: none;
 }
 
-.autodevops-title {
-  font-weight: $gl-font-weight-normal;
-  line-height: 1.5;
-}
-
-.legend-all {
-  color: $gl-text-color-secondary;
-}
-
-.legend-success {
-  color: $green-500;
-}
-
-.test-reports-table {
-  .build-trace {
-    @include build-trace();
-  }
-}
-
-.codequality-report {
-  .media {
-    padding: $gl-padding;
-  }
-
-  .media-body {
-    flex-direction: row;
-  }
-
-  .report-block-container {
-    height: auto !important;
-  }
-}
-
 .progress-bar.bg-primary {
   background-color: $blue-500 !important;
 }
@@ -1090,6 +105,10 @@ button.mini-pipeline-graph-dropdown-toggle {
   width: 8rem;
 }
 
+.stage-rounded {
+  border-radius: 2rem;
+}
+
 .stage-left-rounded {
   border-radius: 2rem 0 0 2rem;
 }
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 4dc1f2034f3..3605283245f 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -227,6 +227,10 @@
       padding-left: 40px;
     }
 
+    .gl-label-scoped {
+      --label-inset-border: inset 0 0 0 1px currentColor;
+    }
+
     @include media-breakpoint-up(lg) {
       margin-right: 5px;
     }
@@ -443,20 +447,3 @@ table.u2f-registrations,
   width: 100%;
   max-width: $add-to-slack-popup-max-width;
 }
-
-.gitlab-slack-right-arrow svg {
-  fill: $white-dark;
-  width: $right-arrow-size;
-  height: $right-arrow-size;
-  vertical-align: text-bottom;
-}
-
-.gitlab-slack-double-headed-arrow {
-  vertical-align: text-top;
-
-  svg {
-    fill: $gray-darker;
-    width: $double-headed-arrow-width;
-    height: $double-headed-arrow-height;
-  }
-}
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index a2f8447c0b6..938d8d34717 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -1,11 +1,3 @@
-.alert_holder {
-  margin: -16px;
-
-  .alert-link {
-    font-weight: $gl-font-weight-normal;
-  }
-}
-
 .new_project,
 .edit-project,
 .import-project {
@@ -67,38 +59,7 @@
   }
 }
 
-.classification-label {
-  background-color: $red-500;
-}
-
-.toggle-wrapper {
-  margin-top: 5px;
-}
-
-.project-feature-row > .toggle-wrapper {
-  margin: 10px 0;
-}
-
-.project-visibility-setting,
-.project-feature-settings {
-  border: 1px solid $border-color;
-  padding: 10px 32px;
-
-  @include media-breakpoint-down(xs) {
-    padding: 10px 20px;
-  }
-}
-
-.project-visibility-setting .request-access {
-  line-height: 2;
-}
-
-.project-feature-settings {
-  background: $gray-lighter;
-  border-top: 0;
-  margin-bottom: 16px;
-}
-
+// INFO Scoped to project_feature_setting and settings_panel components in app/assets/javascripts/pages/projects/shared/permissions/components
 .project-repo-select {
   transition: background 2s ease-out;
 
@@ -113,63 +74,31 @@
   }
 }
 
+// INFO Scoped to project_feature_setting and settings_panel components in app/assets/javascripts/pages/projects/shared/permissions/components
 .project-feature-controls {
-  display: flex;
-  align-items: center;
-  margin: $gl-padding-8 0;
   max-width: 432px;
-
-  .toggle-wrapper {
-    flex: 0;
-    margin-right: 10px;
-  }
-
-  .select-wrapper {
-    flex: 1;
-  }
 }
 
+// INFO Scoped to settings_panel component in app/assets/javascripts/pages/projects/shared/permissions/components
 .project-feature-setting-group {
-  padding-left: 32px;
-
   .project-feature-controls {
     max-width: 400px;
   }
-
-  @include media-breakpoint-down(xs) {
-    padding-left: 20px;
-  }
 }
 
-.group-home-panel,
 .project-home-panel {
-  margin-top: $gl-padding;
-  margin-bottom: $gl-padding;
-
   .home-panel-avatar {
-    width: $home-panel-title-row-height;
-    height: $home-panel-title-row-height;
-    flex-shrink: 0;
     flex-basis: $home-panel-title-row-height;
   }
 
   .home-panel-title {
-    font-size: 20px;
-    line-height: $gl-line-height-24;
-    font-weight: bold;
-
     .icon {
       vertical-align: -1px;
     }
 
     .home-panel-topic-list {
-      font-size: $gl-font-size;
-      font-weight: $gl-font-weight-normal;
-
       .icon {
-        position: relative;
         top: 3px;
-        margin-right: $gl-padding-4;
       }
     }
   }
@@ -201,24 +130,6 @@
     }
   }
 
-  .home-panel-metadata {
-    font-weight: normal;
-    font-size: 14px;
-    line-height: $gl-btn-line-height;
-
-    .home-panel-license {
-      .btn {
-        line-height: 0;
-        border-width: 0;
-      }
-    }
-
-    .access-request-link {
-      padding-left: $gl-padding-8;
-      border-left: 1px solid $gl-text-color-secondary;
-    }
-  }
-
   .home-panel-description {
     @include media-breakpoint-up(md) {
       font-size: $gl-font-size-large;
@@ -778,7 +689,7 @@
     }
 
     .btn {
-      margin-top: $gl-padding-8;
+      margin-bottom: $gl-padding-8;
       padding: $gl-btn-vert-padding $gl-btn-padding;
       line-height: $gl-btn-line-height;
 
@@ -794,11 +705,6 @@
 }
 
 .project-buttons {
-  .stat-text {
-    @extend .btn;
-    @extend .btn-default;
-  }
-
   .nav > li:not(:last-child) {
     margin-right: $gl-padding-8;
   }
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 4b8e1da4867..a62e28a9b8a 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -198,11 +198,20 @@ input[type='checkbox']:hover {
     }
   }
 
+  .search-clear {
+    position: absolute;
+    right: 10px;
+    top: 9px;
+    padding: 0;
+    line-height: 0;
+    background: none;
+    border: 0;
+  }
 
   .search-icon {
     position: absolute;
     left: 10px;
-    top: 10px;
+    top: 9px;
     color: $gray-darkest;
     pointer-events: none;
   }
@@ -247,14 +256,7 @@ input[type='checkbox']:hover {
 }
 
 .search-clear {
-  position: absolute;
-  right: 10px;
-  top: 9px;
-  padding: 0;
   color: $gray-darkest;
-  line-height: 0;
-  background: none;
-  border: 0;
 
   &:hover,
   &:focus {
@@ -281,6 +283,10 @@ input[type='checkbox']:hover {
   }
 }
 
+.ref-truncated {
+  @include str-truncated(10em);
+}
+
 // Disable webkit input icons, link to solution: https://stackoverflow.com/questions/9421551/how-do-i-remove-all-default-webkit-search-field-styling
 /* stylelint-disable property-no-vendor-prefix */
 input[type='search']::-webkit-search-decoration,
diff --git a/app/assets/stylesheets/pages/serverless.scss b/app/assets/stylesheets/pages/serverless.scss
deleted file mode 100644
index a5b73492380..00000000000
--- a/app/assets/stylesheets/pages/serverless.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.url-text-field {
-  cursor: text;
-}
diff --git a/app/assets/stylesheets/pages/settings_ci_cd.scss b/app/assets/stylesheets/pages/settings_ci_cd.scss
index 239123fc3ab..ebf21f58208 100644
--- a/app/assets/stylesheets/pages/settings_ci_cd.scss
+++ b/app/assets/stylesheets/pages/settings_ci_cd.scss
@@ -5,6 +5,10 @@
   }
 }
 
+.trigger-description {
+  max-width: 100px;
+}
+
 .trigger-actions {
   white-space: nowrap;
 
diff --git a/app/assets/stylesheets/pages/tags.scss b/app/assets/stylesheets/pages/tags.scss
deleted file mode 100644
index a6d30522ff7..00000000000
--- a/app/assets/stylesheets/pages/tags.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.tag-release-link {
-  color: $blue-600 !important;
-}
diff --git a/app/assets/stylesheets/pages/ui_dev_kit.scss b/app/assets/stylesheets/pages/ui_dev_kit.scss
deleted file mode 100644
index 288da4da5c3..00000000000
--- a/app/assets/stylesheets/pages/ui_dev_kit.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.gitlab-ui-dev-kit {
-  > h2 {
-    margin: 35px 0 20px;
-    font-weight: $gl-font-weight-bold;
-  }
-
-  .example {
-    padding: 15px;
-    border: 1px dashed $gray-100;
-    margin-bottom: 15px;
-
-    &::before {
-      content: 'Example';
-      color: $ui-dev-kit-example-color;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss
index bfbcb8c13c6..66cc4452858 100644
--- a/app/assets/stylesheets/themes/_dark.scss
+++ b/app/assets/stylesheets/themes/_dark.scss
@@ -163,6 +163,9 @@ body.gl-dark {
 
   --gl-text-color: #{$gray-900};
   --border-color: #{$border-color};
+
+  --white: #{$white};
+  --black: #{$black};
 }
 
 $border-white-light: $gray-900;
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index 9c666331c4f..e236c264f5c 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -44,13 +44,10 @@
 }
 
 .border-width-1px { border-width: 1px; }
-.border-bottom-width-1px { border-bottom-width: 1px; }
 .border-style-dashed { border-style: dashed; }
 .border-style-solid { border-style: solid; }
-.border-bottom-style-solid { border-bottom-style: solid; }
 .border-color-blue-300 { border-color: $blue-300; }
 .border-color-default { border-color: $border-color; }
-.border-bottom-color-default { border-bottom-color: $border-color; }
 .border-radius-default { border-radius: $border-radius-default; }
 .border-radius-small { border-radius: $border-radius-small; }
 .box-shadow-default { box-shadow: 0 2px 4px 0 $black-transparent; }
@@ -95,11 +92,6 @@
   padding-bottom: $gl-spacing-scale-8;
 }
 
-// move this to GitLab UI once onboarding experiment is considered a success
-.gl-pl-7 {
-  padding-left: $gl-spacing-scale-7;
-}
-
 .gl-transition-property-stroke-opacity {
   transition-property: stroke-opacity;
 }
@@ -116,43 +108,17 @@
   box-shadow: inset 0 0 3px $gl-border-size-1 $blue-500;
 }
 
-
-.gl-sm-align-items-flex-end {
-  @media (min-width: $breakpoint-sm) {
-    align-items: flex-end;
-  }
-}
-
-.gl-sm-text-body {
-  @media (min-width: $breakpoint-sm) {
-    color: $body-color;
-  }
+// This utility is used to force the z-index to match that of dropdown menu's
+.gl-z-dropdown-menu\! {
+  z-index: 300 !important;
 }
 
-.gl-sm-font-weight-bold {
-  @media (min-width: $breakpoint-sm) {
-    font-weight: $gl-font-weight-bold;
-  }
-}
-
-.gl-min-h-6 {
-  min-height: $gl-spacing-scale-6;
-}
-
-.gl-md-justify-content-end {
-  @media (min-width: $breakpoint-md) {
-    width: auto !important;
-  }
-}
-
-.gl-display-md-flex {
-  @media (min-width: $breakpoint-md) {
-    display: flex;
-  }
+.gl-flex-basis-quarter {
+  flex-basis: 25%;
 }
 
-.gl-display-md-none {
+.gl-md-ml-3 {
   @media (min-width: $breakpoint-md) {
-    display: none;
+    margin-left: $gl-spacing-scale-3;
   }
 }