Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc43

58 files changed, 468 insertions, 647 deletions

diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss
index 4a15e0eb458..fa5ab590232 100644
--- a/app/assets/stylesheets/_page_specific_files.scss
+++ b/app/assets/stylesheets/_page_specific_files.scss
@@ -26,7 +26,6 @@
 @import './pages/projects';
 @import './pages/prometheus';
 @import './pages/registry';
-@import './pages/runners';
 @import './pages/search';
 @import './pages/service_desk';
 @import './pages/settings';
diff --git a/app/assets/stylesheets/application_dark.scss b/app/assets/stylesheets/application_dark.scss
index e55141e15df..90aab7ce342 100644
--- a/app/assets/stylesheets/application_dark.scss
+++ b/app/assets/stylesheets/application_dark.scss
@@ -1,3 +1,60 @@
 @import './themes/dark';
 
 @import './application';
+
+@import './themes/theme_helper';
+
+body.gl-dark {
+  @include gitlab-theme(
+    $gray-900,
+    $gray-400,
+    $gray-500,
+    $gray-800,
+    $gray-900,
+    $white
+  );
+
+  .logo-text svg {
+    fill: var(--gl-text-color);
+  }
+
+  .navbar-gitlab {
+    background-color: var(--gray-50);
+    box-shadow: 0 1px 0 0 var(--gray-100);
+
+    .navbar-sub-nav,
+    .navbar-nav {
+      li {
+        > a:hover,
+        > a:focus,
+        > button:hover,
+        > button:focus {
+          color: var(--gl-text-color);
+          background-color: var(--gray-200);
+        }
+      }
+
+      li.active,
+      li.dropdown.show {
+        > a,
+        > button {
+          color: var(--gl-text-color);
+          background-color: var(--gray-200);
+        }
+      }
+    }
+
+    .search {
+      form {
+        background-color: var(--gray-100);
+        box-shadow: inset 0 0 0 1px var(--border-color);
+
+        &:active,
+        &:hover {
+          background-color: var(--gray-100);
+          box-shadow: inset 0 0 0 1px var(--blue-200);
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/components/feature_highlight.scss b/app/assets/stylesheets/components/feature_highlight.scss
new file mode 100644
index 00000000000..08706951967
--- /dev/null
+++ b/app/assets/stylesheets/components/feature_highlight.scss
@@ -0,0 +1,9 @@
+.gl-badge.feature-highlight-badge {
+  background-color: $purple-light;
+  color: $purple;
+
+  &,
+  &.sm {
+    padding: 0.25rem;
+  }
+}
diff --git a/app/assets/stylesheets/fontawesome_custom.scss b/app/assets/stylesheets/fontawesome_custom.scss
deleted file mode 100644
index b9bb3edaaab..00000000000
--- a/app/assets/stylesheets/fontawesome_custom.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-// Custom Font Awesome styles that render emojis in asciidoc
-.md {
-  .fa {
-    display: inline-block;
-    font-style: normal;
-    font-size: 14px;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  .fa-2x {
-    font-size: 2em;
-  }
-
-  .fa-exclamation-triangle::before {
-    content: '⚠';
-  }
-
-  .fa-exclamation-circle::before {
-    content: '❗';
-  }
-
-  .fa-lightbulb-o::before {
-    content: '💡';
-  }
-
-  .fa-thumb-tack::before {
-    content: '📌';
-  }
-
-  .fa-fire::before {
-    content: '🔥';
-  }
-
-  .fa-square-o::before {
-    content: '\2610';
-  }
-
-  .fa-check-square-o::before {
-    content: '\2611';
-  }
-}
diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index 662f7f52d61..412a1e8d6c9 100644
--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -122,12 +122,8 @@
   }
 }
 
-.award-control {
+.gl-button.btn.award-control {
   margin: 4px 8px 4px 0;
-  outline: 0;
-  position: relative;
-  display: block;
-  float: left;
 
   &.disabled {
     cursor: default;
@@ -145,15 +141,6 @@
   &:hover,
   &:active,
   &.is-active {
-    background-color: $blue-50;
-    border-color: $blue-200;
-    box-shadow: none;
-    outline: 0;
-
-    .award-control-icon svg {
-      fill: $blue-500;
-    }
-
     .award-control-icon-neutral {
       opacity: 0;
     }
@@ -164,6 +151,14 @@
     }
   }
 
+  &.active,
+  &.is-active,
+  &:active {
+    background-color: $blue-50;
+    border-color: $blue-200;
+    box-shadow: inset 0 0 2px $blue-200;
+  }
+
   &.is-active {
     .award-control-icon-positive {
       opacity: 0;
@@ -192,10 +187,6 @@
     &:focus {
       outline: 0;
     }
-
-    .award-control-icon {
-      margin: 0;
-    }
   }
 
   &.is-loading {
@@ -213,9 +204,7 @@
   gl-emoji,
   .award-control-icon {
     vertical-align: middle;
-    margin-right: 0.15em;
-    font-size: 1.5em;
-    line-height: 1;
+    line-height: 0.5em;
   }
 
   .award-control-icon-loading {
@@ -224,11 +213,8 @@
 
   .award-control-icon {
     color: $border-gray-normal;
-    margin-top: 1px;
-    padding: 0 2px;
 
     svg {
-      margin-bottom: 1px;
       height: $default-icon-size;
       width: $default-icon-size;
       border-radius: 50%;
@@ -239,10 +225,8 @@
   .award-control-icon-positive,
   .award-control-icon-super-positive {
     @include transition(opacity, transform);
-    position: absolute;
-    left: 10px;
-    bottom: 6px;
     opacity: 0;
+    position: absolute;
 
     path {
       fill: $award-emoji-positive-add-lines;
@@ -261,7 +245,6 @@
 // migrated to Vue.
 
 .gl-button .award-emoji-block gl-emoji {
-  top: -1px;
   margin-top: -1px;
   margin-bottom: -1px;
 }
@@ -363,3 +346,7 @@
     }
   }
 }
+
+.awards .is-active {
+  box-shadow: inset 0 0 0 1px $blue-200;
+}
diff --git a/app/assets/stylesheets/framework/ci_variable_list.scss b/app/assets/stylesheets/framework/ci_variable_list.scss
index 95025459cc9..ef4355ad157 100644
--- a/app/assets/stylesheets/framework/ci_variable_list.scss
+++ b/app/assets/stylesheets/framework/ci_variable_list.scss
@@ -75,26 +75,3 @@
   padding-top: 5px;
   padding-bottom: 5px;
 }
-
-.ci-variable-row-remove-button {
-  @include transition(color);
-  flex-shrink: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: $ci-variable-remove-button-width;
-  height: $input-height;
-  padding: 0;
-  background: transparent;
-  color: $gl-text-color-secondary;
-
-  &:hover,
-  &:focus {
-    outline: none;
-    color: $gl-text-color;
-  }
-
-  &[disabled] {
-    color: $gl-text-color-disabled;
-  }
-}
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 5d182373fb1..652ffd79ab3 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -121,10 +121,6 @@ hr {
     @include str-truncated(30%);
   }
 
-  &-60 {
-    @include str-truncated(60%);
-  }
-
   &-100 {
     @include str-truncated(100%);
   }
@@ -292,11 +288,6 @@ img.emoji {
   }
 }
 
-.search_box {
-  @extend .card.card-body;
-  text-align: center;
-}
-
 .dropzone .dz-preview .dz-progress {
   border-color: $border-color !important;
 
@@ -426,7 +417,6 @@ img.emoji {
 .mw-460 { max-width: 460px; }
 .mw-6em { max-width: 6em; }
 .mw-70p { max-width: 70%; }
-.mw-90p { max-width: 90%; }
 
 // By default flex items don't shrink below their minimum content size.
 // To change this, these clases set a min-width or min-height
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index bd15022eadf..bc7a31c112f 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -532,10 +532,6 @@ table.code {
       &.parallel {
         display: table-cell;
         width: 46%;
-
-        span {
-          word-break: break-all;
-        }
       }
 
       &.old {
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index bdde6c7b313..ff42cd836da 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -133,13 +133,15 @@
   }
 }
 
-.dropdown-menu-toggle {
+// This is double classed to solve a specificity issue with the gitlab ui buttons
+.dropdown-menu-toggle.dropdown-menu-toggle {
   @extend .dropdown-toggle;
+  justify-content: flex-start;
+  overflow: hidden;
   padding-right: 25px;
   position: relative;
-  width: 160px;
   text-overflow: ellipsis;
-  overflow: hidden;
+  width: 160px;
 
   .fa {
     position: absolute;
@@ -376,11 +378,13 @@
       }
 
       > a,
-      > button {
+      > button,
+      > .gl-button {
         display: flex;
+        justify-content: flex-start;
         margin: 0;
-        text-overflow: inherit;
         text-align: left;
+        text-overflow: inherit;
 
         &.btn .fa:not(:last-child) {
           margin-left: 5px;
diff --git a/app/assets/stylesheets/framework/editor-lite.scss b/app/assets/stylesheets/framework/editor-lite.scss
index eda3e33a6aa..78995c6e4f5 100644
--- a/app/assets/stylesheets/framework/editor-lite.scss
+++ b/app/assets/stylesheets/framework/editor-lite.scss
@@ -24,3 +24,53 @@
 [id^='editor-lite-'] {
   height: 500px;
 }
+
+.monaco-editor.gl-editor-lite {
+  .margin-view-overlays {
+    .line-numbers {
+      @include gl-display-flex;
+      @include gl-justify-content-end;
+      @include gl-relative;
+
+      &::before {
+        @include gl-visibility-hidden;
+        @include gl-align-self-center;
+        @include gl-bg-gray-400;
+        @include gl-mr-2;
+        @include gl-w-4;
+        @include gl-h-4;
+        mask-image: asset_url('icons-stacked.svg#link');
+        mask-repeat: no-repeat;
+        mask-size: cover;
+        mask-position: center;
+        content: '';
+      }
+
+      &:hover {
+        @include gl-text-decoration-underline;
+        cursor: pointer !important;
+      }
+
+      &:hover::before {
+        @include gl-visibility-visible;
+      }
+
+      &:focus::before {
+        @include gl-visibility-visible;
+        outline: auto;
+      }
+
+      .link-anchor {
+        @include gl-display-block;
+        @include gl-absolute;
+        @include gl-w-full;
+        @include gl-h-full;
+      }
+    }
+  }
+}
+
+.active-line-text {
+  @include gl-bg-orange-600;
+  @include gl-opacity-3;
+}
diff --git a/app/assets/stylesheets/framework/emojis.scss b/app/assets/stylesheets/framework/emojis.scss
index c5c660c1014..1ddde3d2ed6 100644
--- a/app/assets/stylesheets/framework/emojis.scss
+++ b/app/assets/stylesheets/framework/emojis.scss
@@ -1,10 +1,10 @@
 gl-emoji {
   font-style: normal;
   display: inline-flex;
-  vertical-align: middle;
+  vertical-align: baseline;
   font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  font-size: 1.4em;
-  line-height: 1em;
+  font-size: 1.2em;
+  line-height: 1;
 }
 
 .user-status-emoji {
@@ -26,6 +26,13 @@ gl-emoji {
   height: 30px;
   // Create a width that fits 9 emojis per row
   width: 100 / 9 * 1%;
+  transition: transform 0.15s cubic-bezier(0.3, 0, 0.2, 2) !important;
+  will-change: transform;
+
+  &:hover,
+  &:focus {
+    transform: scale(1.3);
+  }
 }
 
 .emoji-picker .gl-new-dropdown .dropdown-menu {
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index a4af45a467c..f76101d92b1 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -204,10 +204,6 @@
     margin-bottom: 10px;
   }
 
-  &:hover {
-    @extend .form-control:hover;
-  }
-
   &.focus,
   &.focus:hover {
     border-color: $blue-300;
@@ -294,14 +290,14 @@
   flex-direction: column;
 }
 
-.filtered-search-history-dropdown-toggle-button {
-  flex: 1;
-  width: auto;
+.filtered-search-history-dropdown-toggle-button.gl-button {
   border-radius: $border-radius-default 0 0 $border-radius-default;
-  border: 0;
   border-right: 1px solid $border-color;
+  box-shadow: none;
   color: $gl-text-color-secondary;
+  flex: 1;
   transition: color 0.1s linear;
+  width: auto;
 
   &:hover,
   &:focus {
@@ -342,12 +338,6 @@
   }
 }
 
-.filter-dropdown-container {
-  .dropdown-toggle {
-    line-height: 22px;
-  }
-}
-
 @include media-breakpoint-down(sm) {
   .issues-details-filters,
   .epics-details-filters {
@@ -402,7 +392,6 @@
 
     > svg {
       position: absolute;
-      top: 11px;
       right: 6px;
     }
   }
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index fdb56a128c7..432be7d0b3f 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -442,22 +442,22 @@
     font-weight: $gl-font-weight-normal;
     margin-left: -6px;
     font-size: 11px;
-    color: $white;
+    color: var(--gray-950, $white);
     padding: 0 5px;
     line-height: 12px;
     border-radius: 7px;
     box-shadow: 0 1px 0 rgba($gl-header-color, 0.2);
 
     &.green-badge {
-      background-color: $green-400;
+      background-color: var(--green-400, $green-400);
     }
 
     &.merge-requests-count {
-      background-color: $orange-400;
+      background-color: var(--orange-400, $orange-400);
     }
 
     &.todos-count {
-      background-color: $blue-400;
+      background-color: var(--blue-400, $blue-400);
     }
   }
 
@@ -511,7 +511,7 @@
 .header-user {
   &.show .dropdown-menu {
     margin-top: 4px;
-    color: $gl-text-color;
+    color: var(--gl-text-color, $gl-text-color);
     left: auto;
     max-height: $dropdown-max-height-lg;
 
@@ -580,7 +580,7 @@
   .no-emoji-placeholder,
   .clear-user-status {
     svg {
-      fill: $gl-text-color-secondary;
+      fill: var(--gray-500, $gray-500);
     }
   }
 
diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss
index ec433434573..48a18e0d145 100644
--- a/app/assets/stylesheets/framework/modal.scss
+++ b/app/assets/stylesheets/framework/modal.scss
@@ -94,14 +94,6 @@ body.modal-open {
   padding-right: 0 !important;
 }
 
-.modal-no-backdrop {
-  @extend .modal-dialog;
-
-  .modal-content {
-    box-shadow: none;
-  }
-}
-
 .modal {
   background-color: $black-transparent;
 
diff --git a/app/assets/stylesheets/framework/page_header.scss b/app/assets/stylesheets/framework/page_header.scss
index 660e3dcac8d..c8b4e306a2e 100644
--- a/app/assets/stylesheets/framework/page_header.scss
+++ b/app/assets/stylesheets/framework/page_header.scss
@@ -12,28 +12,11 @@
     }
   }
 
-  .header-action-buttons {
-    i {
-      color: $gl-text-color-secondary;
-      font-size: 13px;
-      margin-right: 3px;
-    }
-
-    @include media-breakpoint-down(xs) {
-      .btn {
-        width: 100%;
-        margin-top: 10px;
-      }
-
-      .dropdown {
-        width: 100%;
-      }
-    }
-  }
-
   .avatar {
-    @extend .avatar-inline;
-    margin-left: 0;
+    float: none;
+    display: inline-block;
+    margin-left: 2px;
+    flex-shrink: 0;
 
     @include media-breakpoint-up(sm) {
       margin-left: 4px;
diff --git a/app/assets/stylesheets/framework/responsive_tables.scss b/app/assets/stylesheets/framework/responsive_tables.scss
index 07c3eb19fd4..f57d906e73c 100644
--- a/app/assets/stylesheets/framework/responsive_tables.scss
+++ b/app/assets/stylesheets/framework/responsive_tables.scss
@@ -3,6 +3,7 @@
   max-width: #{$max + '%'};
 }
 
+.gl-responsive-table-row,
 .gl-responsive-table-row-layout {
   width: 100%;
 
@@ -17,7 +18,6 @@
 }
 
 .gl-responsive-table-row {
-  @extend .gl-responsive-table-row-layout;
   margin-top: 10px;
   border: 1px solid $border-color;
   color: $gray-500;
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index 2ad9a9d2dff..27b7cac2df5 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -108,7 +108,7 @@
     > .dropdown,
     > input,
     > form {
-      margin-right: $gl-padding-top;
+      margin-right: $gl-padding-8;
 
       &:last-child {
         margin-right: 0;
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 241aaad015e..cb8a0c40f7f 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -58,19 +58,6 @@
       height: $gl-padding;
     }
   }
-
-  .copy-email-button { // TODO: replace with utility
-    @include gl-w-full;
-    @include gl-h-full;
-  }
-
-  .copy-email-address {
-    height: 60px;
-
-    &:hover {
-      background: $gray-100;
-    }
-  }
 }
 
 .right-sidebar-expanded {
diff --git a/app/assets/stylesheets/framework/spinner.scss b/app/assets/stylesheets/framework/spinner.scss
index 2aa0ab6c1eb..c8eadce5c51 100644
--- a/app/assets/stylesheets/framework/spinner.scss
+++ b/app/assets/stylesheets/framework/spinner.scss
@@ -20,7 +20,7 @@
   }
 }
 
-@mixin spinner($size: 16px, $border-width: 2px, $color: $orange-400) {
+@mixin spinner($size: 16px, $border-width: 2px, $color: $gray-700) {
   border-radius: 50%;
   position: relative;
   margin: 0 auto;
@@ -46,7 +46,7 @@
   }
 
   &.spinner-dark {
-    @include spinner-color($gray-500);
+    @include spinner-color($gray-700);
   }
 
   &.spinner-light {
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 5624a6ea8a3..648ae29e212 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -1,6 +1,3 @@
-// Custom Fontawesome icons
-@import 'fontawesome_custom';
-
 /**
  * Apply Markup (Markdown/AsciiDoc) typography
  *
@@ -435,7 +432,9 @@
     }
   }
 
-  a.with-attachment-icon {
+  a.with-attachment-icon,
+  a[href*='/uploads/'],
+  a[href*='storage.googleapis.com/google-code-attachments/'] {
     &::before {
       margin-right: 4px;
 
@@ -449,8 +448,6 @@
 
   a[href*='/uploads/'],
   a[href*='storage.googleapis.com/google-code-attachments/'] {
-    @extend .with-attachment-icon;
-
     &.no-attachment-icon {
       &::before {
         display: none;
@@ -507,32 +504,56 @@
     text-decoration: line-through;
   }
 
-  .admonitionblock td.icon {
-    width: 1%;
+  // Custom Font Awesome styles that render emojis in asciidoc
+  .fa {
+    display: inline-block;
+    font-style: normal;
+    font-size: 14px;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
 
-    [class^='fa icon-'] {
-      @extend .fa-2x;
-    }
+  .fa-2x,
+  .admonitionblock td.icon [class^='fa icon-'] {
+    font-size: 2em;
+  }
 
-    .icon-note {
-      @extend .fa-thumb-tack;
-    }
+  .fa-exclamation-triangle::before,
+  .admonitionblock td.icon .icon-warning::before {
+    content: '⚠';
+  }
 
-    .icon-tip {
-      @extend .fa-lightbulb-o;
-    }
+  .fa-exclamation-circle::before,
+  .admonitionblock td.icon .icon-important::before {
+    content: '❗';
+  }
 
-    .icon-warning {
-      @extend .fa-exclamation-triangle;
-    }
+  .fa-lightbulb-o::before,
+  .admonitionblock td.icon .icon-tip::before {
+    content: '💡';
+  }
 
-    .icon-caution {
-      @extend .fa-fire;
-    }
+  .fa-thumb-tack::before,
+  .admonitionblock td.icon .icon-note::before {
+    content: '📌';
+  }
 
-    .icon-important {
-      @extend .fa-exclamation-circle;
-    }
+  .fa-fire::before,
+  .admonitionblock td.icon .icon-caution::before {
+    content: '🔥';
+  }
+
+  .fa-square-o::before {
+    content: '\2610';
+  }
+
+  .fa-check-square-o::before {
+    content: '\2611';
+  }
+
+  .admonitionblock td.icon {
+    width: 1%;
   }
 
   .metrics-embed {
@@ -640,12 +661,13 @@ code {
 .commit-sha,
 .ref-name,
 .pipeline-number {
-  @extend .monospace;
+  font-family: $monospace-font;
   font-size: 95%;
 }
 
-.git-revision-dropdown .dropdown-content ul li a {
-  @extend .ref-name;
+.git-revision-dropdown .dropdown-content li:not(.dropdown-menu-empty-item) a {
+  font-family: $monospace-font;
+  font-size: 95%;
   word-break: break-all;
 }
 
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 1aa4177c902..18aa0d3013d 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -82,7 +82,7 @@ $darken-border-dashed-factor: 25% !default;
 $white: #fff !default;
 $white-normal: #f0f0f0 !default;
 $white-dark: #eaeaea !default;
-$white-transparent: rgba(255, 255, 255, 0.8) !default;
+$white-transparent: rgba($white, 0.8) !default;
 
 $gray-lightest: #fdfdfd !default;
 $gray-light: #fafafa !default;
@@ -352,8 +352,8 @@ $border-gray-normal-dashed: darken($gray-normal, $darken-border-dashed-factor);
  */
 $border-color: $gray-100;
 $shadow-color: $t-gray-a-08;
-$well-expand-item: #e8f2f7;
-$well-inner-border: #eef0f2;
+$well-expand-item: #e8f2f7 !default;
+$well-inner-border: #eef0f2 !default;
 $well-light-border: #f1f1f1;
 $well-light-text-color: #5b6169;
 
@@ -590,7 +590,7 @@ $gl-btn-xs-line-height: 13px;
 /*
 * Badges
 */
-$badge-bg: rgba(0, 0, 0, 0.07);
+$badge-bg: rgba($black, 0.07);
 
 /*
 * Pagination
@@ -842,10 +842,10 @@ $linked-project-column-margin: 60px;
 /*
 Performance Bar
 */
-$perf-bar-production: #222;
-$perf-bar-staging: #291430;
-$perf-bar-development: #4c1210;
-$perf-bar-bucket-bg: #111;
+$perf-bar-production: $gray-950;
+$perf-bar-staging: $indigo-950;
+$perf-bar-development: $red-950;
+$perf-bar-bucket-bg: $black;
 $perf-bar-bucket-box-shadow-from: rgba($white, 0.2);
 $perf-bar-bucket-box-shadow-to: rgba($black, 0.25);
 $perf-bar-canary-text: $orange-400;
@@ -924,11 +924,12 @@ Issue Analytics
 $issues-analytics-popover-boarder-color: rgba(0, 0, 0, 0.15);
 
 /*
-Merge Requests
+Merge requests
 */
 $mr-tabs-height: 48px;
 $mr-version-controls-height: 56px;
 $mr-widget-margin-left: 40px;
+$mr-review-bar-height: calc(2rem + 13px);
 
 /*
 Compare Branches
diff --git a/app/assets/stylesheets/highlight/common.scss b/app/assets/stylesheets/highlight/common.scss
index 6c050f33b07..8270db9966e 100644
--- a/app/assets/stylesheets/highlight/common.scss
+++ b/app/assets/stylesheets/highlight/common.scss
@@ -1,5 +1,6 @@
 @import '../framework/variables';
 @import './conflict_colors';
+@import 'page_bundles/mixins_and_variables_and_functions';
 
 @mixin diff-background($background, $idiff, $border) {
   background: $background;
@@ -93,3 +94,30 @@
     }
   }
 }
+
+@mixin line-number-link($color) {
+  &::before {
+    @include gl-visibility-hidden;
+    @include gl-display-inline-block;
+    @include gl-align-self-center;
+    @include gl-mt-2;
+    @include gl-mr-2;
+    @include gl-w-4;
+    @include gl-h-4;
+    @include gl-float-left;
+    background-color: $color;
+    mask-image: asset_url('icons-stacked.svg#link');
+    mask-repeat: no-repeat;
+    mask-size: cover;
+    mask-position: center;
+    content: '';
+  }
+
+  &:hover::before {
+    @include gl-visibility-visible;
+  }
+
+  &:focus::before {
+    @include gl-visibility-visible;
+  }
+}
diff --git a/app/assets/stylesheets/highlight/themes/dark.scss b/app/assets/stylesheets/highlight/themes/dark.scss
index 0dc01213606..d6523265a43 100644
--- a/app/assets/stylesheets/highlight/themes/dark.scss
+++ b/app/assets/stylesheets/highlight/themes/dark.scss
@@ -90,6 +90,10 @@ $dark-il: #de935f;
 
 .code.dark {
   // Line numbers
+  .file-line-num {
+    @include line-number-link($dark-line-num-color);
+  }
+  
   .line-numbers,
   .diff-line-num {
     background-color: $dark-main-bg;
diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss
index 95c3e8e9103..027f2fa63d3 100644
--- a/app/assets/stylesheets/highlight/themes/monokai.scss
+++ b/app/assets/stylesheets/highlight/themes/monokai.scss
@@ -91,6 +91,10 @@ $monokai-gh: #75715e;
 
 .code.monokai {
   // Line numbers
+  .file-line-num {
+    @include line-number-link($monokai-line-num-color);
+  }
+
   .line-numbers,
   .diff-line-num {
     background-color: $monokai-bg;
diff --git a/app/assets/stylesheets/highlight/themes/none.scss b/app/assets/stylesheets/highlight/themes/none.scss
index 4fc6e5dba39..5002726bbc5 100644
--- a/app/assets/stylesheets/highlight/themes/none.scss
+++ b/app/assets/stylesheets/highlight/themes/none.scss
@@ -11,6 +11,10 @@
 
 .code.none {
   // Line numbers
+  .file-line-num {
+    @include line-number-link($black-transparent);
+  }
+
   .line-numbers,
   .diff-line-num {
     background-color: $gray-light;
diff --git a/app/assets/stylesheets/highlight/themes/solarized-dark.scss b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
index f95f5393323..cd0cb65e4e2 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
@@ -94,6 +94,10 @@ $solarized-dark-il: #2aa198;
 
 .code.solarized-dark {
   // Line numbers
+  .file-line-num {
+    @include line-number-link($solarized-dark-line-color);
+  }
+
   .line-numbers,
   .diff-line-num {
     background-color: $solarized-dark-line-bg;
diff --git a/app/assets/stylesheets/highlight/themes/solarized-light.scss b/app/assets/stylesheets/highlight/themes/solarized-light.scss
index dc4bc2f32c2..77e88053424 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-light.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-light.scss
@@ -101,6 +101,10 @@ $solarized-light-il: #2aa198;
 
 .code.solarized-light {
   // Line numbers
+  .file-line-num {
+    @include line-number-link($solarized-light-line-color);
+  }
+
   .line-numbers,
   .diff-line-num {
     background-color: $solarized-light-line-bg;
diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss
index 128fe0cc046..18b2f0a5d58 100644
--- a/app/assets/stylesheets/highlight/white_base.scss
+++ b/app/assets/stylesheets/highlight/white_base.scss
@@ -78,6 +78,10 @@ $white-gc-bg: #eaf2f5;
 }
 
 // Line numbers
+.file-line-num {
+  @include line-number-link($black-transparent);
+}
+
 .line-numbers,
 .diff-line-num {
   background-color: $gray-light;
diff --git a/app/assets/stylesheets/lazy_bundles/select2_overrides.scss b/app/assets/stylesheets/lazy_bundles/select2_overrides.scss
index 0d40159f6de..272f94176d0 100644
--- a/app/assets/stylesheets/lazy_bundles/select2_overrides.scss
+++ b/app/assets/stylesheets/lazy_bundles/select2_overrides.scss
@@ -12,9 +12,9 @@
 .select2-container,
 .select2-container.select2-drop-above {
   .select2-choice {
-    background: $white;
-    color: $gl-text-color;
-    border-color: $border-color;
+    background: var(--white, $white);
+    color: var(--gl-text-color, $gl-text-color);
+    border-color: var(--border-color, $border-color);
     height: 34px;
     padding: $gl-vert-padding $gl-input-padding;
     font-size: $gl-font-size;
@@ -27,6 +27,10 @@
       /* stylelint-disable-next-line function-url-quotes */
       background: url(asset_path('chevron-down.png')) no-repeat 2px 8px;
 
+      .gl-dark & {
+        filter: invert(0.9);
+      }
+
       b {
         display: none;
       }
@@ -37,8 +41,8 @@
     }
 
     &:hover {
-      border-color: $gray-darkest;
-      color: $gl-text-color;
+      border-color: var(--gray-200, $gray-200);
+      color: var(--gl-text-color, $gl-text-color);
     }
   }
 
@@ -49,8 +53,8 @@
   // .select2-focusser element instead.
   &.select2-container-active:not(.select2-dropdown-open) {
     .select2-choice {
-      color: $input-focus-color;
-      background-color: $input-focus-bg;
+      color: var(--gray-700, $gray-700);
+      background-color: var(--white, $white);
       border-color: $input-focus-border-color;
       outline: 0;
     }
@@ -85,19 +89,19 @@
 
     .select2-choices,
     .select2-choice {
-      border-color: $red-500;
+      border-color: var(--red-500, $red-500);
     }
   }
 }
 
 .select2-drop,
 .select2-drop.select2-drop-above {
-  background: $white;
+  background: var(--white, $white);
   box-shadow: 0 2px 4px $dropdown-shadow-color;
   border-radius: $gl-border-radius-base;
-  border: 1px solid $border-color;
+  border: 1px solid var(--border-color, $border-color);
   min-width: 175px;
-  color: $gl-text-color;
+  color: var(--gl-text-color, $gl-text-color);
   z-index: 999;
 
   .modal-open & {
@@ -114,7 +118,7 @@
 }
 
 .select2-drop.select2-drop-above.select2-drop-active {
-  border-top: 1px solid $border-color;
+  border-top: 1px solid var(--border-color, $border-color);
   margin-top: -6px;
 }
 
@@ -128,7 +132,7 @@
 .select2-dropdown-open,
 .select2-dropdown-open.select2-drop-above {
   .select2-choice {
-    border-color: $gray-darkest;
+    border-color: var(--border-color, $border-color);
     outline: 0;
   }
 }
@@ -136,7 +140,7 @@
 .select2-container-multi {
   .select2-choices {
     border-radius: $border-radius-default;
-    border-color: $border-color;
+    border-color: var(--border-color, $border-color);
     background: none;
 
     .select2-search-field input {
@@ -149,10 +153,10 @@
     .select2-search-choice {
       margin: 5px 0 0 8px;
       box-shadow: none;
-      border-color: $border-color;
-      color: $gl-text-color;
+      border-color: var(--border-color, $border-color);
+      color: var(--gl-text-color, $gl-text-color);
       line-height: 15px;
-      background-color: $gray-light;
+      background-color: var(--gray-50, $gray-50);
       background-image: none;
       padding: 3px 18px 3px 5px;
 
@@ -163,7 +167,7 @@
       }
 
       &.select2-search-choice-focus {
-        border-color: $gl-text-color;
+        border-color: var(--gl-text-color, $gl-text-color);
       }
     }
   }
@@ -188,22 +192,22 @@
   input {
     padding: $grid-size;
     background: transparent image-url('select2.png');
-    color: $gl-text-color;
+    color: var(--gl-text-color, $gl-text-color);
     background-clip: content-box;
     background-origin: content-box;
     background-repeat: no-repeat;
     background-position: right 0 bottom 0 !important;
-    border: 1px solid $border-color;
+    border: 1px solid var(--border-color, $border-color);
     border-radius: $border-radius-default;
     line-height: 16px;
     transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
 
     &:focus {
-      border-color: $blue-300;
+      border-color: var(--blue-300, $blue-300);
     }
 
     &.select2-active {
-      background-color: $white;
+      background-color: var(--white, $white);
       background-image: image-url('select2-spinner.gif') !important;
       background-origin: content-box;
       background-repeat: no-repeat;
@@ -236,10 +240,10 @@
 
   .select2-highlighted {
     background: transparent;
-    color: $gl-text-color;
+    color: var(--gl-text-color, $gl-text-color);
 
     .select2-result-label {
-      background: $gray-darker;
+      background: var(--gray-50, $gray-50);
     }
   }
 
@@ -249,14 +253,14 @@
 
   li.select2-result-with-children > .select2-result-label {
     font-weight: $gl-font-weight-bold;
-    color: $gl-text-color;
+    color: var(--gl-text-color, $gl-text-color);
   }
 }
 
 .select2-highlighted {
   .group-result {
     .group-path {
-      color: $gray-700;
+      color: var(--gray-700, $gray-700);
     }
   }
 }
diff --git a/app/assets/stylesheets/page_bundles/alert_management_settings.scss b/app/assets/stylesheets/page_bundles/alert_management_settings.scss
index fb7c1602cba..ed2707ffbcd 100644
--- a/app/assets/stylesheets/page_bundles/alert_management_settings.scss
+++ b/app/assets/stylesheets/page_bundles/alert_management_settings.scss
@@ -6,7 +6,6 @@ $stroke-size: 1px;
   @include gl-relative;
   @include gl-w-full;
   height: $stroke-size;
-  @include gl-display-inline-block;
   background-color: var(--gray-400, $gray-400);
   min-width: $gl-spacing-scale-5;
 
diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss
index fdf9e157e1e..a00a71b07e7 100644
--- a/app/assets/stylesheets/page_bundles/boards.scss
+++ b/app/assets/stylesheets/page_bundles/boards.scss
@@ -40,8 +40,8 @@
 
 [data-page$='epic_boards:index'],
 [data-page$='epic_boards:show'] {
-  .filter-form {
-    display: none;
+  .filtered-search-wrapper {
+    display: none !important;
   }
 }
 
@@ -365,7 +365,7 @@
   margin: 5px;
 }
 
-.right-sidebar.issue-boards-sidebar {
+.right-sidebar.boards-sidebar {
   .gutter-toggle {
     bottom: 15px;
     width: 22px;
@@ -401,99 +401,6 @@
   }
 }
 
-.add-issues-modal {
-  background-color: rgba($black, 0.3);
-  z-index: 9999;
-}
-
-.add-issues-container {
-  width: 90vw;
-  height: 85vh;
-  max-width: 1100px;
-  min-height: 500px;
-  padding: 25px 15px 0;
-  background-color: var(--white, $white);
-  box-shadow: 0 2px 12px rgba(var(--black, $black), 0.5);
-
-  .empty-state {
-    &.add-issues-empty-state-filter {
-      flex-direction: column;
-      justify-content: center;
-    }
-
-    .svg-content {
-      margin-top: -40px;
-    }
-  }
-}
-
-.add-issues-header {
-  margin: -25px -15px -5px;
-  border-bottom: 1px solid $border-color;
-  border-top-right-radius: $border-radius-default;
-  border-top-left-radius: $border-radius-default;
-
-  > h2 {
-    font-size: 18px;
-  }
-}
-
-.add-issues-list-column {
-  width: 100%;
-
-  @include media-breakpoint-up(sm) {
-    width: 50%;
-  }
-
-  @include media-breakpoint-up(md) {
-    width: (100% / 3);
-  }
-}
-
-.add-issues-list {
-  padding-top: 3px;
-  margin-left: -$gl-vert-padding;
-  margin-right: -$gl-vert-padding;
-  overflow-y: scroll;
-
-  .board-card-parent {
-    padding: 0 5px 5px;
-  }
-
-  .board-card {
-    border: 1px solid var(--gray-900, $gray-900);
-    box-shadow: 0 1px 2px rgba(var(--black, $black), 0.4);
-    cursor: pointer;
-  }
-}
-
-.add-issues-footer {
-  margin: auto -15px 0;
-  padding-left: 15px;
-  padding-right: 15px;
-  border-bottom-right-radius: $border-radius-default;
-  border-bottom-left-radius: $border-radius-default;
-}
-
-.add-issues-footer-to-list {
-  padding-left: $gl-vert-padding;
-  padding-right: $gl-vert-padding;
-  line-height: $input-height;
-}
-
-.issue-card-selected {
-  position: absolute;
-  right: -3px;
-  top: -3px;
-  width: 17px;
-  background-color: var(--blue-500, $blue-500);
-  color: $white;
-  border: 1px solid var(--blue-600, $blue-600);
-  font-size: 9px;
-  line-height: 15px;
-  border-radius: 50%;
-}
-
 .board-card-info {
   color: var(--gray-500, $gray-500);
   white-space: nowrap;
@@ -555,12 +462,28 @@
     overflow-x: scroll;
   }
 
-  .issue-boards-sidebar {
+  .boards-sidebar {
     height: 100%;
     top: 0;
   }
 }
 
+.boards-sidebar {
+  .sidebar-collapsed-icon {
+    display: none;
+  }
+}
+
 .board-header-collapsed-info-icon:hover {
   color: var(--gray-900, $gray-900);
 }
+
+.board-card-skeleton {
+  height: 110px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+
+  .board-card-skeleton-inner {
+    width: 340px;
+    height: 100px;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/build.scss b/app/assets/stylesheets/page_bundles/build.scss
index 34f88f9405a..b91850f1775 100644
--- a/app/assets/stylesheets/page_bundles/build.scss
+++ b/app/assets/stylesheets/page_bundles/build.scss
@@ -8,9 +8,9 @@
   .archived-job {
     top: $header-height;
     border-radius: 2px 2px 0 0;
-    color: $orange-600;
-    background-color: $orange-50;
-    border: 1px solid $border-gray-normal;
+    color: var(--orange-600, $orange-600);
+    background-color: var(--orange-50, $orange-50);
+    border: 1px solid var(--border-color, $border-color);
     padding: 3px 12px;
     margin: auto;
     align-items: center;
@@ -86,33 +86,17 @@
     padding: 10px 0 9px;
   }
 
-  .header-action-buttons {
-    display: flex;
-
-    @include media-breakpoint-down(xs) {
-      .sidebar-toggle-btn {
-        margin-top: 0;
-        margin-left: 10px;
-        max-height: 34px;
-      }
-    }
-  }
-
   .header-content {
     a {
-      color: $gl-text-color;
+      color: var(--gl-text-color, $gl-text-color);
 
       &:hover {
-        color: $blue-600;
+        color: var(--blue-600, $blue-600);
         text-decoration: none;
       }
     }
   }
 
-  code {
-    color: $code-color;
-  }
-
   .avatar {
     float: none;
     margin-right: 2px;
@@ -160,12 +144,12 @@
 
   .trigger-build-variable {
     font-weight: $gl-font-weight-normal;
-    color: $code-color;
+    color: var(--gray-950, $gray-950);
   }
 
   .trigger-build-value {
     padding: 2px 4px;
-    color: $black;
+    color: var(--black, $black);
   }
 
   .trigger-variables-table-cell {
@@ -185,7 +169,7 @@
     cursor: pointer;
 
     &:hover {
-      color: $gl-text-color;
+      color: var(--gl-text-color, $gl-text-color);
     }
   }
 
@@ -223,7 +207,7 @@
       }
 
       &.retried {
-        background-color: $gray-lightest;
+        background-color: var(--gray-10, $gray-10);
       }
 
       &:hover {
@@ -231,10 +215,6 @@
       }
     }
   }
-
-  .link-commit {
-    color: var(--blue-600, $blue-600);
-  }
 }
 
 .build-sidebar {
diff --git a/app/assets/stylesheets/page_bundles/ci_status.scss b/app/assets/stylesheets/page_bundles/ci_status.scss
index 232d363b7f1..6b976106cc9 100644
--- a/app/assets/stylesheets/page_bundles/ci_status.scss
+++ b/app/assets/stylesheets/page_bundles/ci_status.scss
@@ -80,17 +80,3 @@
     }
   }
 }
-
-.d-block.d-sm-none-inline {
-  .ci-status-link {
-    position: relative;
-    top: 2px;
-    left: 5px;
-  }
-}
-
-.ci-status-link {
-  svg {
-    overflow: visible;
-  }
-}
diff --git a/app/assets/stylesheets/page_bundles/jira_connect.scss b/app/assets/stylesheets/page_bundles/jira_connect.scss
index eb2dd6e578e..db4be3f18e8 100644
--- a/app/assets/stylesheets/page_bundles/jira_connect.scss
+++ b/app/assets/stylesheets/page_bundles/jira_connect.scss
@@ -4,37 +4,22 @@
 @import 'bootstrap-vue/src/index';
 
 @import '@gitlab/ui/src/scss/utilities';
-@import '@gitlab/ui/src/components/base/alert/alert';
 
 // We should only import styles that we actually use.
 @import '@gitlab/ui/src/components/base/alert/alert';
 @import '@gitlab/ui/src/components/base/avatar/avatar';
-@import '@gitlab/ui/src/components/base/badge/badge';
 @import '@gitlab/ui/src/components/base/button/button';
 @import '@gitlab/ui/src/components/base/icon/icon';
 @import '@gitlab/ui/src/components/base/link/link';
 @import '@gitlab/ui/src/components/base/loading_icon/loading_icon';
 @import '@gitlab/ui/src/components/base/modal/modal';
 @import '@gitlab/ui/src/components/base/pagination/pagination';
-@import '@gitlab/ui/src/components/base/tabs/tabs/tabs';
+@import '@gitlab/ui/src/components/base/table/table';
 @import '@gitlab/ui/src/components/base/tooltip/tooltip';
+@import '@gitlab/ui/src/components/base/search_box_by_type/search_box_by_type';
 
-$atlaskit-border-color: #dfe1e6;
 $header-height: 40px;
 
-.subscription-form {
-  .field-group-input {
-    display: flex;
-    padding-top: $gl-padding-4;
-
-    .ak-button {
-      align-items: center;
-      height: auto;
-      margin-left: $btn-margin-5;
-    }
-  }
-}
-
 .jira-connect-header {
   min-height: $header-height;
   position: fixed;
@@ -56,45 +41,7 @@ $header-height: 40px;
 }
 
 .jira-connect-app-body {
-  max-width: 600px;
+  max-width: 768px;
   margin-left: auto;
   margin-right: auto;
 }
-
-// for external_link buttons
-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 {
-      border-bottom: 1px solid $atlaskit-border-color;
-    }
-
-    td {
-      padding: $gl-padding-8;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/page_bundles/learn_gitlab.scss b/app/assets/stylesheets/page_bundles/learn_gitlab.scss
index 189aefb330b..10a4a210d41 100644
--- a/app/assets/stylesheets/page_bundles/learn_gitlab.scss
+++ b/app/assets/stylesheets/page_bundles/learn_gitlab.scss
@@ -1,3 +1,11 @@
 .learn-gitlab-info-card-content {
   height: 200px;
 }
+
+.learn-gitlab-section-card {
+  height: 400px;
+}
+
+.learn-gitlab-section-card-header {
+  height: 165px;
+}
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 3263a5067ea..9fdc30359f8 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -9,6 +9,18 @@
   min-width: 0;
 }
 
+.with-system-header {
+  --system-header-height: #{$system-header-height};
+}
+
+.with-performance-bar {
+  --performance-bar-height: #{$performance-bar-height};
+}
+
+.review-bar-visible {
+  --review-bar-height: #{$mr-review-bar-height};
+}
+
 .diff-tree-list {
   // This 11px value should match the additional value found in
   //      /assets/stylesheets/framework/diffs.scss
@@ -23,24 +35,13 @@
 
   position: -webkit-sticky;
   position: sticky;
-  top: $top-pos;
-  max-height: calc(100vh - #{$top-pos});
+  // Unitless zero values are not allowed in calculations https://stackoverflow.com/a/55391061
+  // stylelint-disable-next-line length-zero-no-unit
+  top: calc(#{$top-pos} + var(--system-header-height, 0px) + var(--performance-bar-height, 0px));
+  // stylelint-disable-next-line length-zero-no-unit
+  max-height: calc(100vh - #{$top-pos} - var(--system-header-height, 0px) - var(--performance-bar-height, 0px) - var(--review-bar-height, 0px));
   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);
diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss
index d9ab52774bd..2f3cf889549 100644
--- a/app/assets/stylesheets/page_bundles/pipeline.scss
+++ b/app/assets/stylesheets/page_bundles/pipeline.scss
@@ -139,12 +139,28 @@
   width: 186px;
 }
 
+.gl-pipeline-job-width\! {
+  width: 186px !important;
+}
+
 .gl-linked-pipeline-padding {
   padding-right: 120px;
 }
 
 .gl-build-content {
-  @include build-content();
+  display: inline-block;
+  padding: 8px 10px 9px;
+  width: 100%;
+  border: 1px solid var(--border-color, $border-color);
+  border-radius: 30px;
+  background-color: var(--white, $white);
+
+  &:hover,
+  &:focus {
+    background-color: var(--gray-50, $gray-50);
+    border: 1px solid $dropdown-toggle-active-border-color;
+    color: var(--gl-text-color, $gl-text-color);
+  }
 }
 
 .gl-ci-action-icon-container {
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 7111d3d4107..a114a1dc82d 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -1,4 +1,5 @@
-%commit-description-base {
+.commit-description,
+.commit-row-description {
   padding: $gl-padding-8 0 $gl-padding-8 $gl-padding-8;
   margin-top: $gl-padding-8;
   border: 0;
@@ -10,10 +11,6 @@
   color: $gl-text-color-secondary;
 }
 
-.commit-description {
-  @extend %commit-description-base;
-}
-
 .commit-box {
   border-top: 1px solid $border-color;
   padding: $gl-padding 0;
@@ -249,7 +246,6 @@
   }
 
   .commit-row-description {
-    @extend %commit-description-base;
     display: none;
     flex: 1;
   }
diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss
index ef737e11799..14cff5b038a 100644
--- a/app/assets/stylesheets/pages/editor.scss
+++ b/app/assets/stylesheets/pages/editor.scss
@@ -36,7 +36,7 @@
   }
 
   .file-title {
-    @extend .monospace;
+    @include gl-font-monospace;
     line-height: 35px;
     padding-top: 7px;
     padding-bottom: 7px;
diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index 5738cbb4b31..c8da025131d 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -50,7 +50,7 @@
   .event-user-info {
     margin-bottom: $gl-padding-4;
 
-    .author_name {
+    .author-name {
       a {
         color: $gl-text-color;
         font-weight: $gl-font-weight-bold;
@@ -118,26 +118,11 @@
     }
   }
 
-  .event_icon {
-    position: relative;
-    float: right;
-    border: 1px solid $gray-darker;
-    padding: 5px;
-    border-radius: 5px;
-    background: $gray-light;
-    margin-left: 10px;
-    top: -6px;
-
-    img {
-      width: 20px;
-    }
-  }
-
   &:last-child {
     border: 0;
   }
 
-  .event_commits {
+  .event-commits {
     li {
       &.commit {
         background: transparent;
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index ee1385d36df..2ec2da9241b 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -160,17 +160,6 @@
     vertical-align: top;
   }
 
-
-  .notification-dropdown {
-    .dropdown-menu {
-      @extend .dropdown-menu-right;
-    }
-
-    .icon {
-      fill: $gl-text-color-secondary;
-    }
-  }
-
   .new-project-subgroup {
     .dropdown-primary {
       min-width: 115px;
@@ -378,10 +367,6 @@ table.pipeline-project-metrics tr td {
 
   .folder-caret {
     width: $gl-font-size-large;
-
-    svg {
-      margin-bottom: 2px;
-    }
   }
 
   .item-type-icon {
diff --git a/app/assets/stylesheets/pages/help.scss b/app/assets/stylesheets/pages/help.scss
index 540060d60de..c05216ac6e6 100644
--- a/app/assets/stylesheets/pages/help.scss
+++ b/app/assets/stylesheets/pages/help.scss
@@ -26,13 +26,6 @@
     text-align: right;
     white-space: nowrap;
   }
-
-  .key {
-    @extend .badge.badge-pill;
-    background-color: $label-inverse-bg;
-    font: 11px Consolas, 'Liberation Mono', Menlo, Courier, monospace;
-    padding: 3px 5px;
-  }
 }
 
 .documentation {
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index a6ab5459a84..b9f5a427a24 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -225,8 +225,7 @@
     }
   }
 
-  .cross-project-reference,
-  .sidebar-mr-source-branch {
+  .cross-project-reference {
     color: inherit;
 
     span {
@@ -238,10 +237,6 @@
       text-overflow: ellipsis;
     }
 
-    cite {
-      font-style: normal;
-    }
-
     button {
       float: right;
       padding: 1px 5px;
@@ -292,7 +287,7 @@
       padding-top: 10px;
     }
 
-    &:not(.issue-boards-sidebar):not([data-signed-in]):not([data-always-show-toggle]) {
+    &:not(.boards-sidebar):not([data-signed-in]):not([data-always-show-toggle]) {
       .issuable-sidebar-header {
         display: none;
       }
@@ -638,7 +633,7 @@
   }
 
   .btn-link:hover {
-    @extend a:hover;
+    color: $blue-800;
     text-decoration: none;
   }
 
@@ -797,6 +792,40 @@
   }
 }
 
+.add-issuable-form-input-token-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  list-style: none;
+  margin-bottom: 0;
+  padding-left: 0;
+}
+
+.add-issuable-form-token-list-item {
+  max-width: 100%;
+  margin-bottom: $gl-vert-padding;
+  margin-right: 5px;
+}
+
+.add-issuable-form-input-list-item {
+  flex: 1;
+  min-width: 200px;
+  margin-bottom: $gl-vert-padding;
+}
+
+.add-issuable-form-input {
+  width: 100%;
+  border: 0;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.add-issuable-form-actions {
+  margin-top: $gl-padding;
+}
+
 .time-tracker {
   .sidebar-collapsed-icon {
     > .stopwatch-svg {
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 2a8a86615f6..97c8182bab8 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -173,11 +173,10 @@ ul.related-merge-requests > li {
     margin-top: 4px;
 
     // override dropdown item styles
-    .btn.btn-success {
+    .btn.btn-confirm {
       @include btn-default;
-      @include btn-green;
+      @include btn-blue;
 
-      border-style: solid;
       border-width: 1px;
       line-height: $line-height-base;
       width: auto;
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index b7d05fc411a..c7b4dd660d0 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -120,7 +120,6 @@
 }
 
 .labels-container {
-  background-color: $gray-100;
   border-radius: $border-radius-default;
   padding: $gl-padding $gl-padding-8;
 }
@@ -160,7 +159,7 @@
       color: $blue-600;
     }
 
-    &.remove-row:hover {
+    &.hover-red:hover {
       color: $red-500;
     }
   }
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index 2d04354a99d..9d437531e6d 100644
--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -179,8 +179,9 @@
   }
 
   input[type='submit'] {
-    @extend .btn-block;
     margin-bottom: 0;
+    display: block;
+    width: 100%;
   }
 
   .devise-errors {
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 23e368a2e73..36d39c1a613 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -236,8 +236,8 @@ $tabs-holder-z-index: 250;
   }
 
   .label-branch {
-    @extend .ref-name;
-
+    @include gl-font-monospace;
+    font-size: 95%;
     color: $gl-text-color;
     font-weight: normal;
     overflow: hidden;
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index cb5050fc578..59768f4cda8 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -48,7 +48,6 @@
 }
 
 .note-image-attach {
-  @extend .col-lg-4;
   margin-left: 45px;
   float: none;
 }
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 190bdcb1efd..801dd44be8e 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -771,6 +771,26 @@ $system-note-svg-size: 16px;
   }
 }
 
+.unified-diff-components-diff-note-button {
+  &::before {
+    background-color: $blue-500;
+    mask-image: asset_url('icons-stacked.svg#comment');
+    mask-repeat: no-repeat;
+    mask-size: cover;
+    mask-position: center;
+    content: '';
+    width: 12px;
+    height: 12px;
+  }
+
+  &:hover,
+  &.inverted {
+    &::before {
+      background-color: $white;
+    }
+  }
+}
+
 .disabled-comment {
   background-color: $gray-light;
   border-radius: $border-radius-base;
diff --git a/app/assets/stylesheets/pages/notifications.scss b/app/assets/stylesheets/pages/notifications.scss
index 33ab42b5511..298de33888d 100644
--- a/app/assets/stylesheets/pages/notifications.scss
+++ b/app/assets/stylesheets/pages/notifications.scss
@@ -1,8 +1,4 @@
 .notification-list-item {
-  .dropdown-menu {
-    @extend .dropdown-menu-right;
-  }
-
   @include media-breakpoint-down(sm) {
     .notification-dropdown {
       width: 100%;
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index e51cc0b4479..16f96ebadc9 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -115,11 +115,6 @@
         font-size: $gl-font-size;
         line-height: $gl-font-size-large;
       }
-
-      .home-panel-topic-list,
-      .home-panel-metadata {
-        font-size: $gl-font-size-small;
-      }
     }
   }
 
@@ -141,10 +136,6 @@
     }
   }
 
-  .notification-dropdown .dropdown-menu {
-    @extend .dropdown-menu-right;
-  }
-
   .download-button {
     @include media-breakpoint-down(md) {
       margin-left: 0;
@@ -843,7 +834,7 @@ pre.light-well {
   }
 
   .form-control {
-    @extend .monospace;
+    @include gl-font-monospace;
     background-color: $white;
     border-color: $border-color;
     font-size: 14px;
diff --git a/app/assets/stylesheets/pages/runners.scss b/app/assets/stylesheets/pages/runners.scss
deleted file mode 100644
index 856e49bd144..00000000000
--- a/app/assets/stylesheets/pages/runners.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-.runner-state {
-  padding: 6px 12px;
-  margin-right: 10px;
-  color: $white;
-
-  &.runner-state-shared {
-    background: $green-400;
-  }
-
-  &.runner-state-specific {
-    background: $blue-400;
-  }
-}
-
-.runner-status {
-  &.runner-status-online {
-    background-color: $green-600;
-  }
-
-  &.runner-status-offline {
-    background-color: $gray-darkest;
-  }
-
-  &.runner-status-paused {
-    background-color: $red-500;
-  }
-}
-
-.runner {
-  .btn {
-    padding: 1px 6px;
-  }
-
-  h4 {
-    font-weight: $gl-font-weight-normal;
-  }
-}
-
-.admin-runner-btn-group-cell {
-  min-width: 150px;
-
-  .btn-sm {
-    padding: 4px 9px;
-  }
-
-  .btn-default {
-    color: $gl-text-color-secondary;
-  }
-}
-
-@include media-breakpoint-down(md) {
-  .runners-content {
-    width: 100%;
-    overflow: auto;
-  }
-}
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index f31b6d96f03..aa9ebfe2968 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -278,10 +278,6 @@
     .card-header {
       display: flex;
       align-items: center;
-
-      > .btn-success {
-        margin-left: auto;
-      }
     }
 
     .custom-metric {
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index fa008a05e11..a371aa37e07 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -22,7 +22,7 @@
 
         .control {
           float: left;
-          margin-left: 10px;
+          margin-left: 8px;
         }
       }
 
diff --git a/app/assets/stylesheets/performance_bar.scss b/app/assets/stylesheets/performance_bar.scss
index c6c9f3b7365..bcc3c35e00e 100644
--- a/app/assets/stylesheets/performance_bar.scss
+++ b/app/assets/stylesheets/performance_bar.scss
@@ -14,7 +14,7 @@
   color: $gray-300;
 
   select {
-    color: $gray-300;
+    color: $white;
     width: 200px;
   }
 
diff --git a/app/assets/stylesheets/print.scss b/app/assets/stylesheets/print.scss
index 7b66b61ff36..1d0333d1e2f 100644
--- a/app/assets/stylesheets/print.scss
+++ b/app/assets/stylesheets/print.scss
@@ -60,3 +60,11 @@ pre {
 a[href]::after {
   content: none !important;
 }
+
+.with-performance-bar .layout-page {
+  margin-top: 0;
+}
+
+.content-wrapper {
+  margin-top: 0;
+}
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss
index d8f74a2913e..11b4bde74a6 100644
--- a/app/assets/stylesheets/themes/_dark.scss
+++ b/app/assets/stylesheets/themes/_dark.scss
@@ -214,6 +214,9 @@ $yiq-text-light: $gray-950;
 $line-added-dark: $green-200;
 $line-removed-dark: $red-200;
 
+$well-expand-item: $gray-200;
+$well-inner-border: $gray-200;
+
 // Misc component overrides that should live elsewhere
 .gl-label {
   filter: brightness(0.9) contrast(1.1);
diff --git a/app/assets/stylesheets/themes/theme_light.scss b/app/assets/stylesheets/themes/theme_light.scss
index 228bff94f5d..b41377475c5 100644
--- a/app/assets/stylesheets/themes/theme_light.scss
+++ b/app/assets/stylesheets/themes/theme_light.scss
@@ -81,50 +81,4 @@ body {
       color: $gray-900;
     }
   }
-
-  &.gl-dark {
-    .logo-text svg {
-      fill: var(--gl-text-color);
-    }
-
-    .navbar-gitlab {
-      background-color: var(--gray-50);
-      box-shadow: 0 1px 0 0 var(--gray-100);
-
-      .navbar-sub-nav,
-      .navbar-nav {
-        li {
-          > a:hover,
-          > a:focus,
-          > button:hover,
-          > button:focus {
-            color: var(--gl-text-color);
-            background-color: var(--gray-200);
-          }
-        }
-
-        li.active,
-        li.dropdown.show {
-          > a,
-          > button {
-            color: var(--gl-text-color);
-            background-color: var(--gray-200);
-          }
-        }
-      }
-
-      .search {
-        form {
-          background-color: var(--gray-100);
-          box-shadow: inset 0 0 0 1px var(--border-color);
-
-          &:active,
-          &:hover {
-            background-color: var(--gray-100);
-            box-shadow: inset 0 0 0 1px var(--blue-200);
-          }
-        }
-      }
-    }
-  }
 }