Add latest changes from gitlab-org/gitlab@13-0-stable-ee

41 files changed, 1130 insertions, 273 deletions

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 657e52674db..cc4d13db150 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -37,4 +37,12 @@
 @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";
diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss
index ed5c133950d..1c15400542a 100644
--- a/app/assets/stylesheets/bootstrap_migration.scss
+++ b/app/assets/stylesheets/bootstrap_migration.scss
@@ -211,7 +211,7 @@ h3.popover-header {
 }
 
 .info-well {
-  background: $gray-50;
+  background: $gray-10;
   color: $gl-text-color;
   border: 1px solid $border-color;
   border-radius: 4px;
diff --git a/app/assets/stylesheets/components/dashboard_skeleton.scss b/app/assets/stylesheets/components/dashboard_skeleton.scss
index 2e2c1fefc79..ce33aa94df3 100644
--- a/app/assets/stylesheets/components/dashboard_skeleton.scss
+++ b/app/assets/stylesheets/components/dashboard_skeleton.scss
@@ -68,7 +68,7 @@
       background-size: cover;
       background-image: linear-gradient(to right,
       $gray-100 0%,
-      $gray-50 20%,
+      $gray-10 20%,
       $gray-100 40%,
       $gray-100 100%);
       border-radius: $gl-padding;
diff --git a/app/assets/stylesheets/components/design_management/design.scss b/app/assets/stylesheets/components/design_management/design.scss
new file mode 100644
index 00000000000..1061aae2bbb
--- /dev/null
+++ b/app/assets/stylesheets/components/design_management/design.scss
@@ -0,0 +1,140 @@
+.design-detail {
+  background-color: rgba($black, 0.9);
+
+  .with-performance-bar & {
+    top: 35px;
+  }
+
+  .inactive {
+    opacity: 0.5;
+  }
+}
+
+.design-presentation-wrapper {
+  top: 0;
+  left: 0;
+}
+
+.design-scaler {
+  z-index: 1;
+}
+
+.design-scaler-wrapper {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.design-checkbox {
+  position: absolute;
+  top: $gl-padding;
+  left: 30px;
+}
+
+.image-notes {
+  overflow-y: scroll;
+  padding: $gl-padding;
+  padding-top: 50px;
+  background-color: $white;
+  flex-shrink: 0;
+  min-width: 400px;
+  flex-basis: 28%;
+
+  .badge.badge-pill {
+    margin-left: $gl-padding;
+    background-color: $blue-400;
+    color: $white;
+    border: $white 1px solid;
+    min-height: 28px;
+    padding: 7px 10px;
+    border-radius: $gl-padding;
+  }
+
+  .design-discussion {
+    margin: $gl-padding 0;
+
+    &::before {
+      content: '';
+      border-left: 1px solid $gray-200;
+      position: absolute;
+      left: 28px;
+      top: -18px;
+      height: 18px;
+    }
+
+    .design-note {
+      padding: $gl-padding;
+      list-style: none;
+
+      a {
+        color: inherit;
+      }
+
+      .note-text a {
+        color: $blue-600;
+      }
+    }
+
+    .reply-wrapper {
+      padding: $gl-padding;
+    }
+  }
+
+  .reply-wrapper {
+    border-top: 1px solid $border-color;
+  }
+
+  .new-discussion-disclaimer {
+    line-height: 20px;
+  }
+}
+
+@media (max-width: map-get($grid-breakpoints, lg)) {
+  .design-detail {
+    overflow-y: scroll;
+  }
+
+  .image-notes {
+    overflow-y: auto;
+    min-width: 100%;
+    flex-grow: 1;
+    flex-basis: auto;
+  }
+}
+
+.design-dropzone-border {
+  border: 2px dashed $gray-200;
+}
+
+.design-dropzone-card {
+  transition: border $general-hover-transition-duration $general-hover-transition-curve;
+
+  &:focus,
+  &:active {
+    outline: none;
+    border: 2px dashed $purple;
+    color: $gl-text-color;
+  }
+
+  &:hover {
+    border-color: $gray-500;
+  }
+}
+
+.design-dropzone-overlay {
+  border: 2px dashed $purple;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  opacity: 1;
+}
+
+.design-dropzone-fade-enter-active,
+.design-dropzone-fade-leave-active {
+  transition: opacity $general-hover-transition-duration $general-hover-transition-curve;
+}
+
+.design-dropzone-fade-enter,
+.design-dropzone-fade-leave-to {
+  opacity: 0;
+}
diff --git a/app/assets/stylesheets/components/design_management/design_list_item.scss b/app/assets/stylesheets/components/design_management/design_list_item.scss
new file mode 100644
index 00000000000..aacb1f91e59
--- /dev/null
+++ b/app/assets/stylesheets/components/design_management/design_list_item.scss
@@ -0,0 +1,19 @@
+.design-list-item {
+  height: 280px;
+  text-decoration: none;
+
+  .icon-version-status {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+  }
+
+  .design-event {
+    top: $gl-padding;
+    right: $gl-padding;
+  }
+
+  .card-body {
+    height: 230px;
+  }
+}
diff --git a/app/assets/stylesheets/components/design_management/design_version_dropdown.scss b/app/assets/stylesheets/components/design_management/design_version_dropdown.scss
new file mode 100644
index 00000000000..f79d672e238
--- /dev/null
+++ b/app/assets/stylesheets/components/design_management/design_version_dropdown.scss
@@ -0,0 +1,3 @@
+.design-version-dropdown > button {
+  background: inherit;
+}
diff --git a/app/assets/stylesheets/components/milestone_combobox.scss b/app/assets/stylesheets/components/milestone_combobox.scss
new file mode 100644
index 00000000000..e0637088bbb
--- /dev/null
+++ b/app/assets/stylesheets/components/milestone_combobox.scss
@@ -0,0 +1,13 @@
+.selected-item::before {
+  content: '\f00c';
+  color: $green-500;
+  position: absolute;
+  left: 16px;
+  top: 16px;
+  transform: translateY(-50%);
+  font: 14px FontAwesome;
+}
+
+.dropdown-item-space {
+  padding: 8px 12px;
+}
diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss
index ce1039832d3..61f971a3185 100644
--- a/app/assets/stylesheets/components/related_items_list.scss
+++ b/app/assets/stylesheets/components/related_items_list.scss
@@ -1,9 +1,11 @@
 $item-path-max-width: 160px;
 $item-milestone-max-width: 120px;
 $item-weight-max-width: 48px;
+$item-remove-button-space: 42px;
 
 .related-items-list {
   padding: $gl-padding-4;
+  padding-right: $gl-padding-6;
 
   &,
   .list-item:last-child {
@@ -11,16 +13,16 @@ $item-weight-max-width: 48px;
   }
 }
 
-.sortable-link {
-  max-width: 85%;
-}
-
 .related-items-tree {
   .card-header {
     .gl-label {
       line-height: $gl-line-height;
     }
   }
+
+  .sortable-link {
+    white-space: normal;
+  }
 }
 
 .item-body {
@@ -48,17 +50,12 @@ $item-weight-max-width: 48px;
     cursor: help;
   }
 
-  .issue-token-state-icon-open,
-  .issue-token-state-icon-closed {
-    margin-right: $gl-padding-4;
-  }
-
   .confidential-icon {
     color: $orange-600;
   }
 
   .item-title-wrapper {
-    max-width: 100%;
+    max-width: calc(100% - #{$item-remove-button-space});
   }
 
   .item-title {
@@ -69,11 +66,6 @@ $item-weight-max-width: 48px;
       font-weight: $gl-font-weight-bold;
     }
 
-    .issue-token-state-icon-open,
-    .issue-token-state-icon-closed {
-      display: none;
-    }
-
     .sortable-link {
       color: $gray-900;
       font-weight: normal;
@@ -90,17 +82,14 @@ $item-weight-max-width: 48px;
     white-space: nowrap;
   }
 
-  @include media-breakpoint-down(lg) {
-    .issue-count-badge {
-      padding-left: 0;
-    }
+  .health-label-short {
+    display: none;
   }
 }
 
 .item-body,
 .card-header {
   .health-label-short {
-    display: initial;
     max-width: 0;
   }
 
@@ -135,6 +124,12 @@ $item-weight-max-width: 48px;
   }
 }
 
+.card-header {
+  .health-label-short {
+    display: initial;
+  }
+}
+
 .item-meta {
   flex-basis: 100%;
   font-size: $gl-font-size;
@@ -227,25 +222,28 @@ $item-weight-max-width: 48px;
     font-weight: $gl-font-weight-bold;
     max-width: $item-path-max-width;
   }
-
-  .issue-token-state-icon-open,
-  .issue-token-state-icon-closed {
-    display: block;
-  }
 }
 
 .btn-item-remove {
   position: absolute;
-  right: 0;
   top: $gl-padding-4 / 2;
+  right: 0;
   padding: $gl-padding-4;
   margin-right: $gl-padding-4 / 2;
   line-height: 0;
   border-color: transparent;
   color: $gl-text-color-secondary;
 
+  .related-items-tree & {
+    position: relative;
+    top: initial;
+    padding: $btn-sm-side-margin;
+    margin-right: initial;
+  }
+
   &:hover {
     color: $gl-text-color;
+    border-color: $border-color;
   }
 }
 
@@ -269,7 +267,6 @@ $item-weight-max-width: 48px;
     max-width: 90%;
   }
 
-  .item-body,
   .card-header {
     .health-label-short {
       max-width: 30px;
@@ -279,6 +276,15 @@ $item-weight-max-width: 48px;
 
 /* Small devices (landscape phones, 768px and up) */
 @include media-breakpoint-up(md) {
+  .item-body .item-contents {
+    max-width: 95%;
+  }
+
+  .related-items-tree .item-contents,
+  .item-body .item-title {
+    max-width: 100%;
+  }
+
   .sortable-link {
     text-overflow: ellipsis;
     overflow: hidden;
@@ -290,27 +296,8 @@ $item-weight-max-width: 48px;
     .item-contents {
       min-width: 0;
     }
-
-    .item-title {
-      flex-basis: unset;
-      // 95% because we compensate
-      // for remove button which is
-      // positioned absolutely
-      width: 95%;
-    }
-
-    .btn-item-remove {
-      order: 1;
-    }
-  }
-
-  .item-meta {
-    .item-meta-child {
-      flex-basis: unset;
-    }
   }
 
-  .item-body,
   .card-header {
     .health-label-short {
       max-width: 60px;
@@ -330,7 +317,6 @@ $item-weight-max-width: 48px;
     }
   }
 
-  .item-body,
   .card-header {
     .health-label-short {
       max-width: 100px;
@@ -346,32 +332,13 @@ $item-weight-max-width: 48px;
 @include media-breakpoint-up(xl) {
   .item-body {
     .item-title {
-      min-width: 0;
       width: auto;
       flex-basis: auto;
       flex-shrink: 1;
       font-weight: $gl-font-weight-normal;
-
-      .issue-token-state-icon-open,
-      .issue-token-state-icon-closed {
-        display: block;
-        margin-right: $gl-padding-8;
-      }
-    }
-
-    .item-title-wrapper {
-      max-width: calc(100% - 500px);
-    }
-
-    .item-info-area {
-      flex-basis: auto;
     }
   }
 
-  .health-label-short {
-    display: initial;
-  }
-
   .health-label-long {
     display: none;
   }
@@ -380,16 +347,7 @@ $item-weight-max-width: 48px;
     overflow: hidden;
   }
 
-  .item-meta {
-    flex: 1;
-  }
-
   .item-assignees {
-    .avatar {
-      height: $gl-padding-24;
-      width: $gl-padding-24;
-    }
-
     .avatar-counter {
       height: $gl-padding-24;
       min-width: $gl-padding-24;
@@ -401,12 +359,8 @@ $item-weight-max-width: 48px;
   .btn-item-remove {
     position: relative;
     top: initial;
-    right: 0;
     padding: $btn-sm-side-margin;
-
-    &:hover {
-      border-color: $border-color;
-    }
+    margin-right: $gl-padding-4 / 2;
   }
 
   .sortable-link {
@@ -415,8 +369,7 @@ $item-weight-max-width: 48px;
 }
 
 @media only screen and (min-width: 1500px) {
-  .card-header,
-  .item-body {
+  .card-header {
     .health-label-short {
       display: none;
     }
@@ -425,10 +378,4 @@ $item-weight-max-width: 48px;
       display: initial;
     }
   }
-
-  .item-body {
-    .item-title-wrapper {
-      max-width: calc(100% - 640px);
-    }
-  }
 }
diff --git a/app/assets/stylesheets/components/rich_content_editor.scss b/app/assets/stylesheets/components/rich_content_editor.scss
new file mode 100644
index 00000000000..eca0f1114af
--- /dev/null
+++ b/app/assets/stylesheets/components/rich_content_editor.scss
@@ -0,0 +1,11 @@
+// Overrides styles from ToastUI editor
+.tui-editor-defaultUI-toolbar .toolbar-button {
+  color: $gl-gray-600;
+  border: 0;
+
+  &:hover,
+  &:active {
+    color: $blue-500;
+    border: 0;
+  }
+}
diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
index d222fc4aefe..13174687e5d 100644
--- a/app/assets/stylesheets/framework/animations.scss
+++ b/app/assets/stylesheets/framework/animations.scss
@@ -193,7 +193,7 @@ a {
       background-size: cover;
       background-image: linear-gradient(to right,
       $gray-100 0%,
-      $gray-50 20%,
+      $gray-10 20%,
       $gray-100 40%,
       $gray-100 100%);
       height: 10px;
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index ecf2097dc87..f47d0cab31f 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -507,6 +507,10 @@
   opacity: 1 !important;
   cursor: default !important;
 
+  &.cursor-not-allowed {
+    cursor: not-allowed !important;
+  }
+
   i {
     color: $gl-text-color-disabled !important;
   }
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 320bd4adaaa..93361c21642 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -392,6 +392,10 @@ img.emoji {
 }
 
 /** COMMON CLASSES **/
+/**
+  🚨 Do not use these classes — they are deprecated and being removed. 🚨
+  See https://gitlab.com/gitlab-org/gitlab/-/issues/217418 for more details.
+**/
 .prepend-top-0 { margin-top: 0; }
 .prepend-top-2 { margin-top: 2px; }
 .prepend-top-4 { margin-top: $gl-padding-4; }
@@ -434,6 +438,7 @@ img.emoji {
 .append-bottom-20 { margin-bottom: 20px; }
 .append-bottom-default { margin-bottom: $gl-padding; }
 .prepend-bottom-32 { margin-bottom: 32px; }
+.ml-10 { margin-left: 4.5rem; }
 .inline { display: inline-block; }
 .center { text-align: center; }
 .block { display: block; }
@@ -490,7 +495,8 @@ img.emoji {
   🚨 Do not use these classes — they are deprecated and being removed. 🚨
   See https://gitlab.com/gitlab-org/gitlab/issues/36857 for more details.
 
-  Instead, if you need a spacing class, add it below using the following values.
+  Instead, if you need a spacing class, please use one from Gitlab UI —
+  https://unpkg.com/browse/@gitlab/ui/src/scss/utilities.scss — which uses the following scale.
     $gl-spacing-scale-0: 0;
     $gl-spacing-scale-1: 2px;
     $gl-spacing-scale-2: 4px;
@@ -505,21 +511,38 @@ img.emoji {
     $gl-spacing-scale-11: 64px;
     $gl-spacing-scale-12: 80px;
     $gl-spacing-scale-13: 96px;
-
-  E.g., a padding top of 96px can be added using:
-  .gl-shim-pt-13 {
-    padding-top: 96px;
-  }
-
-  Please use -shim- so it can be differentiated from the old scale classes.
-  These will be replaced when the Gitlab UI utilities are included.
 **/
 @each $index, $padding in $spacing-scale {
-  #{'.gl-p-#{$index}'} { padding: $padding; }
-  #{'.gl-pl-#{$index}'} { padding-left: $padding; }
-  #{'.gl-pr-#{$index}'} { padding-right: $padding; }
-  #{'.gl-pt-#{$index}'} { padding-top: $padding; }
-  #{'.gl-pb-#{$index}'} { padding-bottom: $padding; }
+  #{'.gl-p-#{$index}-deprecated-no-really-do-not-use-me'} { padding: $padding; }
+  #{'.gl-pl-#{$index}-deprecated-no-really-do-not-use-me'} { padding-left: $padding; }
+  #{'.gl-pr-#{$index}-deprecated-no-really-do-not-use-me'} { padding-right: $padding; }
+  #{'.gl-pt-#{$index}-deprecated-no-really-do-not-use-me'} { padding-top: $padding; }
+  #{'.gl-pb-#{$index}-deprecated-no-really-do-not-use-me'} { padding-bottom: $padding; }
+}
+
+/**
+  The zero-indexed classes will not change and do not need to be updated.
+  These can be removed when the Gitlab UI class include is merged.
+**/
+
+.gl-p-0 {
+  padding: 0;
+}
+
+.gl-pl-0 {
+  padding-left: 0;
+}
+
+.gl-pr-0 {
+  padding-right: 0;
+}
+
+.gl-pt-0 {
+  padding-top: 0;
+}
+
+.gl-pb-0 {
+  padding-bottom: 0;
 }
 
 /**
@@ -610,15 +633,13 @@ img.emoji {
   }
 }
 
-.gl-font-size-small { font-size: $gl-font-size-small; }
-.gl-font-size-large { font-size: $gl-font-size-large; }
+.gl-font-sm { font-size: $gl-font-size-small; }
+.gl-font-lg { font-size: $gl-font-size-large; }
+.gl-font-base { font-size: $gl-font-size-14; }
 
 .gl-line-height-24 { line-height: $gl-line-height-24; }
 
 .gl-font-size-0 { font-size: 0; }
-.gl-font-size-12 { font-size: $gl-font-size-12; }
-.gl-font-size-14 { font-size: $gl-font-size-14; }
-.gl-font-size-16 { font-size: $gl-font-size-16; }
 .gl-font-size-28 { font-size: $gl-font-size-28; }
 .gl-font-size-42 { font-size: $gl-font-size-42; }
 
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index f746d7e6f69..1df9818a877 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -317,13 +317,6 @@
     }
   }
 
-  // Temporary fix to ensure tick is aligned
-  // Follow up Issue to remove after the GlNewDropdownItem component is fixed
-  // > https://gitlab.com/gitlab-org/gitlab/-/issues/213948
-  li:not(.gl-new-dropdown-item) .dropdown-item {
-    @include dropdown-link;
-  }
-
   .divider {
     height: 1px;
     margin: #{$grid-size / 2} 0;
@@ -384,6 +377,10 @@
   }
 }
 
+.dropdown-item {
+  @include dropdown-link;
+}
+
 .droplab-dropdown {
   .dropdown-toggle > i {
     pointer-events: none;
@@ -1032,6 +1029,16 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
 }
 
 .labels-select-wrapper {
+  &.is-standalone {
+    .labels-select-dropdown-contents {
+      max-height: 350px;
+
+      .dropdown-content {
+        height: 250px;
+      }
+    }
+  }
+
   .labels-select-dropdown-contents {
     min-height: $dropdown-min-height;
     max-height: 330px;
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index a0a020ec548..2c7e9428ef1 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -553,6 +553,7 @@
       vertical-align: text-top;
     }
 
+    a.upgrade-plan-link gl-emoji,
     a.ci-minutes-emoji gl-emoji,
     a.trial-link gl-emoji {
       font-size: $gl-font-size;
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index 79f203091f2..bd262b65dc3 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -146,11 +146,13 @@
       display: inline-block;
       position: relative;
 
-      /* Medium devices (desktops, 992px and up) */
-      @include media-breakpoint-up(md) { width: 200px; }
+      &:not[type='checkbox'] {
+        /* Medium devices (desktops, 992px and up) */
+        @include media-breakpoint-up(md) { width: 200px; }
 
-      /* Large devices (large desktops, 1200px and up) */
-      @include media-breakpoint-up(lg) { width: 250px; }
+        /* Large devices (large desktops, 1200px and up) */
+        @include media-breakpoint-up(lg) { width: 250px; }
+      }
     }
 
     @include media-breakpoint-down(sm) {
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index 514bd090e28..5739f048e86 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -4,6 +4,21 @@
 }
 
 table {
+  /*
+  * TODO
+  * 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.
+  *
+  * Remove this code as soon as this happens
+  */
+  &.gl-table {
+    @include gl-text-gray-700;
+  }
+
   &.table {
     margin-bottom: $gl-padding;
 
@@ -32,8 +47,7 @@ table {
       }
 
       th {
-        background-color: $gray-light;
-        font-weight: $gl-font-weight-normal;
+        @include gl-bg-gray-100;
         border-bottom: 0;
 
         &.wide {
@@ -44,6 +58,11 @@ table {
           background: none;
           color: $gl-text-color-secondary;
         }
+
+        &.original-gl-th {
+          @include gl-text-gray-700;
+          border-bottom: 1px solid $cycle-analytics-light-gray;
+        }
       }
 
       td {
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 816dbc6931c..1afcbc6d514 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -86,7 +86,7 @@
     line-height: 10px;
     color: $gl-gray-700;
     vertical-align: middle;
-    background-color: $gray-50;
+    background-color: $gray-10;
     border-width: 1px;
     border-style: solid;
     border-color: $gray-200 $gray-200 $gray-400;
@@ -533,6 +533,17 @@
       margin: 0;
       font-size: $gl-font-size-small;
     }
+
+    ul.dropdown-menu {
+      margin-top: 4px;
+      margin-bottom: 24px;
+      padding: 8px 0;
+
+      li {
+        margin: 0;
+        padding: 0 1px;
+      }
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index c23623005b0..ac4d431ea57 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -163,7 +163,8 @@ $red-800: #8b2615;
 $red-900: #711e11;
 $red-950: #4b140b;
 
-$gray-50: #fafafa;
+$gray-10: #fafafa;
+$gray-50: #f0f0f0;
 $gray-100: #f2f2f2;
 $gray-200: #dfdfdf;
 $gray-300: #ccc;
@@ -232,6 +233,7 @@ $reds: (
 );
 
 $grays: (
+  '10': $gray-10,
   '50': $gray-50,
   '100': $gray-100,
   '200': $gray-200,
@@ -398,6 +400,7 @@ $tooltip-font-size: 12px;
  * Padding
  */
 $gl-padding-4: 4px;
+$gl-padding-6: 6px;
 $gl-padding-8: 8px;
 $gl-padding-12: 12px;
 $gl-padding: 16px;
@@ -447,6 +450,7 @@ $breadcrumb-min-height: 48px;
 $home-panel-title-row-height: 64px;
 $home-panel-avatar-mobile-size: 24px;
 $gl-line-height: 16px;
+$gl-line-height-18: 18px;
 $gl-line-height-20: 20px;
 $gl-line-height-24: 24px;
 $gl-line-height-14: 14px;
@@ -697,7 +701,7 @@ $logs-p-color: #333;
 */
 $input-height: 34px;
 $input-danger-bg: #f2dede;
-$input-group-addon-bg: $gray-50;
+$input-group-addon-bg: $gray-10;
 $gl-field-focus-shadow: rgba(0, 0, 0, 0.075);
 $gl-field-focus-shadow-error: rgba($red-500, 0.6);
 $input-short-width: 200px;
diff --git a/app/assets/stylesheets/page_bundles/_ide_mixins.scss b/app/assets/stylesheets/page_bundles/_ide_mixins.scss
index 9465dd5bed6..48b8a7230b1 100644
--- a/app/assets/stylesheets/page_bundles/_ide_mixins.scss
+++ b/app/assets/stylesheets/page_bundles/_ide_mixins.scss
@@ -9,7 +9,6 @@
     top: 0;
     font-size: 12px;
     border-top-right-radius: $border-radius-default;
-    margin-left: -$gl-padding;
 
     .controllers {
       @include build-controllers(15px, center, false, 0, inline, 0);
diff --git a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss
index 1aa112e0957..5675835a622 100644
--- a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss
+++ b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss
@@ -69,8 +69,17 @@
       display: none !important;
     }
   }
+}
+
+.multi-file-editor-holder {
+  height: 100%;
+  min-height: 0; // firefox fix
+}
 
-  .monaco-diff-editor.vs {
+// Apply theme related overrides only to the white theme and none theme
+.theme-white .blob-editor-container,
+.theme-none .blob-editor-container {
+  .monaco-diff-editor {
     .editor.modified {
       box-shadow: none;
     }
@@ -131,16 +140,14 @@
   }
 }
 
-.multi-file-editor-holder {
-  height: 100%;
-  min-height: 0; // firefox fix
-
-  &.is-readonly .vs,
-  .vs .editor.original {
+.theme-white .multi-file-editor-holder,
+.theme-none .multi-file-editor-holder {
+  &.is-readonly,
+  .editor.original {
     .monaco-editor,
     .monaco-editor-background,
     .monaco-editor .inputarea.ime-input {
-      background-color: $gray-50;
+      background-color: $gray-10;
     }
   }
 }
diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
new file mode 100644
index 00000000000..e4c01c2bd6c
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
@@ -0,0 +1,308 @@
+// -------
+// Please see `app/assets/stylesheets/page_bundles/ide_themes/README.md` for a guide on contributing new themes
+// -------
+.ide.theme-dark {
+  a:not(.btn) {
+    color: var(--ide-link-color);
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  code,
+  .md table:not(.code),
+  .md,
+  .md p,
+  .context-header > a,
+  input,
+  textarea,
+  .md-area.is-focused,
+  .dropdown-menu li button,
+  .dropdown-menu-selectable li a.is-active,
+  .dropdown-menu-inner-title,
+  .dropdown-menu-inner-content,
+  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a,
+  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover,
+  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a.active .badge.badge-pill,
+  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover .badge.badge-pill,
+  .badge.badge-pill,
+  .bs-callout,
+  .ide-pipeline .top-bar,
+  .ide-pipeline .top-bar .controllers .controllers-buttons {
+    color: var(--ide-text-color);
+  }
+
+  .drag-handle:hover,
+  .card-header .badge.badge-pill {
+    background-color: var(--ide-dropdown-hover-background);
+  }
+
+  .file-row .file-row-icon svg,
+  .file-row:hover .file-row-icon svg,
+  .controllers-buttons svg {
+    color: var(--ide-text-color-secondary);
+  }
+
+  .text-secondary {
+    color: var(--ide-text-color-secondary) !important;
+  }
+
+  input[type='search']::placeholder,
+  input[type='text']::placeholder,
+  textarea::placeholder,
+  .dropdown-input .fa {
+    color: var(--ide-input-border);
+  }
+
+  .ide-nav-form .input-icon {
+    color: var(--ide-input-border);
+  }
+
+  code,
+  .badge.badge-pill,
+  .card-header,
+  .bs-callout,
+  .ide-pipeline .top-bar,
+  .ide-terminal .top-bar {
+    background-color: var(--ide-background);
+  }
+
+  .bs-callout {
+    border-color: var(--ide-dropdown-background);
+
+    code {
+      background-color: var(--ide-dropdown-background);
+    }
+  }
+
+  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover {
+    border-color: var(--ide-dropdown-hover-background);
+  }
+
+  .common-note-form .md-area {
+    border-color: var(--ide-input-border);
+  }
+
+  &,
+  .md table:not(.code) tr th,
+  .common-note-form .md-area,
+  .card {
+    background-color: var(--ide-highlight-background);
+  }
+
+  .card,
+  .card-header,
+  .ide-terminal .top-bar,
+  .ide-pipeline .top-bar {
+    border-color: var(--ide-border-color);
+  }
+
+  hr,
+  .md h1,
+  .md h2,
+  .md blockquote,
+  pre,
+  .md table:not(.code) tbody td,
+  .md table:not(.code) tr th,
+  .nav-links:not(.quick-links) {
+    border-color: var(--ide-border-color-alt);
+  }
+
+  .ide-sidebar-link.active {
+    color: var(--ide-highlight-accent);
+    box-shadow: inset 3px 0 var(--ide-highlight-accent);
+
+    &.is-right {
+      box-shadow: inset -3px 0 var(--ide-highlight-accent);
+    }
+  }
+
+  .nav-links li.active a,
+  .nav-links li a.active {
+    border-color: var(--ide-highlight-accent);
+    color: var(--ide-text-color);
+  }
+
+  .avatar-container {
+    &,
+    .avatar {
+      color: var(--ide-text-color);
+      background-color: var(--ide-highlight-background);
+      border-color: var(--ide-highlight-background);
+    }
+  }
+
+  input[type='text'],
+  input[type='search'],
+  .filtered-search-box {
+    border-color: var(--ide-input-border);
+    background: var(--ide-input-background) !important;
+  }
+
+  input[type='text'],
+  input[type='search'],
+  .filtered-search-box,
+  textarea {
+    color: var(--ide-input-color) !important;
+  }
+
+  .filtered-search-box input[type='search'] {
+    border-color: transparent;
+  }
+
+  .filtered-search-token .value-container,
+  .filtered-search-term .value-container {
+    background-color: var(--ide-dropdown-hover-background);
+    color: var(--ide-text-color);
+
+    &:hover {
+      background-color: var(--ide-input-border);
+    }
+  }
+
+  @function calc-btn-hover-padding($original-padding, $original-border: 1px) {
+    @return calc(#{$original-padding + $original-border} - var(--ide-btn-hover-border-width));
+  }
+
+  .btn:not(.btn-link):not([disabled]):hover {
+    border-width: var(--ide-btn-hover-border-width);
+    padding: calc-btn-hover-padding(6px) calc-btn-hover-padding(10px);
+  }
+
+  .btn:not([disabled]).btn-sm:hover {
+    padding: calc-btn-hover-padding(4px) calc-btn-hover-padding(10px);
+  }
+
+  .btn:not([disabled]).btn-block:hover {
+    padding: calc-btn-hover-padding(6px) 0;
+  }
+
+  .btn-inverted,
+  .btn-default,
+  .dropdown,
+  .dropdown-menu-toggle {
+    background-color: var(--ide-input-background) !important;
+    color: var(--ide-input-color) !important;
+    border-color: var(--ide-btn-default-border);
+  }
+
+  .btn-inverted,
+  .btn-default {
+    &:hover,
+    &:focus {
+      border-color: var(--ide-btn-default-hover-border) !important;
+    }
+  }
+
+  .dropdown,
+  .dropdown-menu-toggle {
+    &:hover,
+    &:focus {
+      background-color: var(--ide-dropdown-btn-hover-background) !important;
+      border-color: var(--ide-dropdown-btn-hover-border) !important;
+    }
+  }
+
+  .dropdown-menu {
+    color: var(--ide-text-color);
+    border-color: var(--ide-background);
+    background-color: var(--ide-dropdown-background);
+
+    .divider,
+    .nav-links:not(.quick-links) {
+      background-color: var(--ide-dropdown-hover-background);
+      border-color: var(--ide-dropdown-hover-background);
+    }
+
+    .nav-links li a.active {
+      border-color: var(--ide-highlight-accent);
+    }
+
+    .nav-links:not(.quick-links) li:not(.md-header-toolbar) a {
+      color: var(--ide-text-color);
+
+      &.active {
+        color: var(--ide-text-color);
+      }
+    }
+
+    li > a:not(.disable-hover):hover,
+    li > a:not(.disable-hover):focus,
+    li button:not(.disable-hover):hover,
+    li button:not(.disable-hover):focus,
+    li button.is-focused {
+      background-color: var(--ide-dropdown-hover-background);
+      color: var(--ide-text-color);
+    }
+  }
+
+  .dropdown-title,
+  .dropdown-input {
+    border-color: var(--ide-dropdown-hover-background) !important;
+  }
+
+  .btn-primary,
+  .btn-info {
+    background-color: var(--ide-btn-primary-background);
+    border-color: var(--ide-btn-primary-border) !important;
+
+    &:hover,
+    &:focus {
+      border-color: var(--ide-btn-primary-hover-border) !important;
+    }
+  }
+
+  .btn-success {
+    background-color: var(--ide-btn-success-background);
+    border-color: var(--ide-btn-success-border) !important;
+
+    &:hover,
+    &:focus {
+      border-color: var(--ide-btn-success-hover-border) !important;
+    }
+  }
+
+  .btn[disabled] {
+    background: var(--ide-btn-default-background) !important;
+    border: 1px solid var(--ide-btn-disabled-border) !important;
+    color: var(--ide-btn-disabled-color) !important;
+  }
+
+  pre code,
+  .md table:not(.code) tbody {
+    background-color: var(--ide-border-color);
+  }
+
+  .animation-container {
+    [class^='skeleton-line-'] {
+      background-color: var(--ide-animation-gradient-1);
+
+      &::after {
+        background-image: linear-gradient(to right,
+        var(--ide-animation-gradient-1) 0%,
+        var(--ide-animation-gradient-2) 20%,
+        var(--ide-animation-gradient-1) 40%,
+        var(--ide-animation-gradient-1) 100%);
+      }
+    }
+  }
+
+  .idiff.addition {
+    background-color: var(--ide-diff-insert);
+  }
+
+  .idiff.deletion {
+    background-color: var(--ide-diff-remove);
+  }
+}
+
+.navbar.theme-dark {
+  border-bottom-color: transparent;
+}
+
+.theme-dark ~ .popover {
+  box-shadow: none;
+}
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index 024c1781bf8..61914740ac0 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -2,6 +2,9 @@
 @import 'framework/mixins';
 @import './ide_mixins';
 @import './ide_monaco_overrides';
+@import './ide_theme_overrides';
+
+@import './ide_themes/dark';
 
 $search-list-icon-width: 18px;
 $ide-activity-bar-width: 60px;
@@ -25,7 +28,7 @@ $ide-commit-header-height: 48px;
   position: relative;
   margin-top: 0;
   padding-bottom: $ide-statusbar-height;
-  color: $gl-text-color;
+  color: var(--ide-text-color, $gl-text-color);
   min-height: 0; // firefox fix
 
   &.is-collapsed {
@@ -61,14 +64,14 @@ $ide-commit-header-height: 48px;
   display: flex;
   flex-direction: column;
   flex: 1;
-  border-left: 1px solid $white-dark;
+  border-left: 1px solid var(--ide-border-color, $white-dark);
   overflow: hidden;
 }
 
 .multi-file-tabs {
   display: flex;
-  background-color: $gray-light;
-  box-shadow: inset 0 -1px $white-dark;
+  background-color: var(--ide-background, $gray-light);
+  box-shadow: inset 0 -1px var(--ide-border-color, $white-dark);
 
   > ul {
     display: flex;
@@ -79,13 +82,13 @@ $ide-commit-header-height: 48px;
     display: flex;
     align-items: center;
     padding: $grid-size $gl-padding;
-    background-color: $gray-normal;
-    border-right: 1px solid $white-dark;
-    border-bottom: 1px solid $white-dark;
+    background-color: var(--ide-background-hover, $gray-normal);
+    border-right: 1px solid var(--ide-border-color, $white-dark);
+    border-bottom: 1px solid var(--ide-border-color, $white-dark);
 
     &.active {
-      background-color: $white;
-      border-bottom-color: $white;
+      background-color: var(--ide-highlight-background, $white);
+      border-bottom-color: var(--ide-border-color, $white);
     }
 
     &:not(.disabled) {
@@ -118,7 +121,7 @@ $ide-commit-header-height: 48px;
   background: none;
   border: 0;
   border-radius: $border-radius-default;
-  color: $gray-900;
+  color: var(--ide-text-color, $gray-900);
 
   svg {
     position: relative;
@@ -133,11 +136,11 @@ $ide-commit-header-height: 48px;
   }
 
   &:not([disabled]):hover {
-    background-color: $gray-200;
+    background-color: var(--ide-input-border, $gray-200);
   }
 
   &:not([disabled]):focus {
-    background-color: $blue-500;
+    background-color: var(--ide-link-color, $blue-500);
     color: $white;
     outline: 0;
 
@@ -164,10 +167,11 @@ $ide-commit-header-height: 48px;
     height: 100%;
     overflow: auto;
     padding: $gl-padding;
+    background-color: var(--ide-border-color, transparent);
   }
 
   .file-container {
-    background-color: $gray-darker;
+    background-color: var(--ide-border-color, $gray-darker);
     display: flex;
     height: 100%;
     align-items: center;
@@ -183,13 +187,13 @@ $ide-commit-header-height: 48px;
 
     .file-info {
       font-size: $label-font-size;
-      color: $diff-image-info-color;
+      color: var(--ide-text-color, $diff-image-info-color);
     }
   }
 }
 
 .ide-mode-tabs {
-  border-bottom: 1px solid $white-dark;
+  border-bottom: 1px solid var(--ide-border-color, $white-dark);
 
   li a {
     padding: $gl-padding-8 $gl-padding;
@@ -203,9 +207,10 @@ $ide-commit-header-height: 48px;
 }
 
 .ide-status-bar {
-  border-top: 1px solid $white-dark;
+  color: var(--ide-text-color, $gl-text-color);
+  border-top: 1px solid var(--ide-border-color, $white-dark);
   padding: 2px $gl-padding-8 0;
-  background: $white;
+  background-color: var(--ide-footer-background, $white);
   display: flex;
   justify-content: space-between;
   height: $ide-statusbar-height;
@@ -278,8 +283,7 @@ $ide-commit-header-height: 48px;
   position: relative;
   width: 340px;
   padding: 0;
-  background-color: $gray-light;
-  padding-right: 1px;
+  background-color: var(--ide-background, $gray-light);
 
   .context-header {
     width: auto;
@@ -306,9 +310,9 @@ $ide-commit-header-height: 48px;
     display: flex;
     flex: 1;
     flex-direction: column;
-    background-color: $white;
-    border-left: 1px solid $white-dark;
-    border-top: 1px solid $white-dark;
+    background-color: var(--ide-highlight-background, $white);
+    border-left: 1px solid var(--ide-border-color, $white-dark);
+    border-top: 1px solid var(--ide-border-color, $white-dark);
     border-top-left-radius: $border-radius-small;
     min-height: 0; // firefox fix
   }
@@ -333,15 +337,10 @@ $ide-commit-header-height: 48px;
 
 .multi-file-commit-panel-header {
   height: $ide-commit-header-height;
-  border-bottom: 1px solid $white-dark;
+  border-bottom: 1px solid var(--ide-border-color-alt, $white-dark);
   padding: 12px 0;
 }
 
-.multi-file-commit-panel-collapse-btn {
-  border-left: 1px solid $white-dark;
-  margin-left: auto;
-}
-
 .multi-file-commit-list {
   flex: 1;
   overflow: auto;
@@ -363,7 +362,7 @@ $ide-commit-header-height: 48px;
     display: block;
     margin-left: auto;
     margin-right: auto;
-    color: $gray-700;
+    color: var(--ide-text-color-secondary, $gray-700);
   }
 
   .file-status-icon {
@@ -387,17 +386,17 @@ $ide-commit-header-height: 48px;
 
   &:hover,
   &:focus {
-    background: $gray-100;
+    background: var(--ide-background, $gray-100);
 
     outline: 0;
   }
 
   &:active {
-    background: $gray-200;
+    background: var(--ide-background, $gray-200);
   }
 
   &.is-active {
-    background-color: $white-normal;
+    background-color: var(--ide-background, $white-normal);
   }
 
   svg {
@@ -418,8 +417,8 @@ $ide-commit-header-height: 48px;
 
 .multi-file-commit-form {
   position: relative;
-  background-color: $white;
-  border-left: 1px solid $white-dark;
+  background-color: var(--ide-highlight-background, $white);
+  border-left: 1px solid var(--ide-border-color, $white-dark);
   transition: all 0.3s ease;
 
   > form,
@@ -427,7 +426,7 @@ $ide-commit-header-height: 48px;
     padding: $gl-padding 0;
     margin-left: $gl-padding;
     margin-right: $gl-padding;
-    border-top: 1px solid $white-dark;
+    border-top: 1px solid var(--ide-border-color-alt, $white-dark);
   }
 
   .btn {
@@ -488,6 +487,7 @@ $ide-commit-header-height: 48px;
   height: 100vh;
   align-items: center;
   justify-content: center;
+  background-color: var(--ide-border-color, transparent);
 }
 
 .ide {
@@ -504,7 +504,7 @@ $ide-commit-header-height: 48px;
   margin-right: $gl-padding;
 
   &.is-first {
-    border-bottom: 1px solid $white-dark;
+    border-bottom: 1px solid var(--ide-border-color-alt, $white-dark);
   }
 }
 
@@ -512,12 +512,7 @@ $ide-commit-header-height: 48px;
   width: $ide-commit-row-height;
   height: $ide-commit-row-height;
   color: inherit;
-}
-
-.ide-commit-file-count {
-  min-width: 22px;
-  background-color: $gray-light;
-  border: 1px solid $white-dark;
+  background-color: var(--ide-background, $white-normal);
 }
 
 .ide-commit-options {
@@ -549,7 +544,7 @@ $ide-commit-header-height: 48px;
   height: 60px;
   width: 100%;
   padding: 0 $gl-padding;
-  color: $gl-text-color-secondary;
+  color: var(--ide-text-color-secondary, $gl-text-color-secondary);
   background-color: transparent;
   border: 0;
   border-top: 1px solid transparent;
@@ -562,22 +557,22 @@ $ide-commit-header-height: 48px;
   }
 
   &:hover {
-    color: $gl-text-color;
-    background-color: $gray-100;
+    color: var(--ide-text-color, $gl-text-color);
+    background-color: var(--ide-background-hover, $gray-100);
   }
 
   &:focus {
-    color: $gl-text-color;
-    background-color: $gray-200;
+    color: var(--ide-text-color, $gl-text-color);
+    background-color: var(--ide-background-hover, $gray-200);
   }
 
   &.active {
     // extend width over border of sidebar section
     width: calc(100% + 1px);
     padding-right: $gl-padding + 1px;
-    background-color: $white;
-    border-top-color: $white-dark;
-    border-bottom-color: $white-dark;
+    background-color: var(--ide-highlight-background, $white);
+    border-top-color: var(--ide-border-color, $white-dark);
+    border-bottom-color: var(--ide-border-color, $white-dark);
 
     &::after {
       content: '';
@@ -586,7 +581,7 @@ $ide-commit-header-height: 48px;
       top: 0;
       bottom: 0;
       width: 1px;
-      background: $white;
+      background: var(--ide-highlight-background, $white);
     }
 
     &.is-right {
@@ -609,7 +604,7 @@ $ide-commit-header-height: 48px;
 
 .ide-commit-message-field {
   height: 200px;
-  background-color: $white;
+  background-color: var(--ide-highlight-background, $white);
 
   .md-area {
     display: flex;
@@ -623,7 +618,7 @@ $ide-commit-header-height: 48px;
 
   .form-text.text-muted {
     margin-top: 2px;
-    color: $blue-500;
+    color: var(--ide-link-color, $blue-500);
     cursor: pointer;
   }
 }
@@ -686,14 +681,14 @@ $ide-commit-header-height: 48px;
   padding: 12px 0;
   margin-left: $ide-tree-padding;
   margin-right: $ide-tree-padding;
-  border-bottom: 1px solid $white-dark;
+  border-bottom: 1px solid var(--ide-border-color-alt, $white-dark);
 
   svg {
-    color: $gray-700;
+    color: var(--ide-text-color-secondary, $gray-700);
 
     &:focus,
     &:hover {
-      color: $blue-600;
+      color: var(--ide-link-color, $blue-600);
     }
   }
 
@@ -702,7 +697,7 @@ $ide-commit-header-height: 48px;
   }
 
   button {
-    color: $gl-text-color;
+    color: var(--ide-text-color, $gl-text-color);
   }
 }
 
@@ -718,21 +713,21 @@ $ide-commit-header-height: 48px;
   .dropdown-menu-toggle {
     svg {
       vertical-align: middle;
-      color: $gray-700;
 
+      &,
       &:hover {
-        color: $gray-700;
+        color: var(--ide-text-color-secondary, $gray-700);
       }
     }
 
     &:hover {
-      background-color: $white-normal;
+      background-color: var(--ide-dropdown-btn-hover-background, $white-normal);
     }
   }
 
   &.show {
     .dropdown-menu-toggle {
-      background-color: $white-dark;
+      background-color: var(--ide-input-background, $white-dark);
     }
   }
 }
@@ -798,12 +793,12 @@ $ide-commit-header-height: 48px;
   }
 
   a {
-    color: $blue-600;
+    color: var(--ide-link-color, $blue-600);
   }
 }
 
 .ide-review-sub-header {
-  color: $gl-text-color-secondary;
+  color: var(--ide-text-color-secondary, $gl-text-color-secondary);
 }
 
 .ide-tree-changes {
@@ -819,7 +814,7 @@ $ide-commit-header-height: 48px;
   bottom: 0;
   right: 0;
   z-index: 10;
-  background: $white;
+  background-color: var(--ide-highlight-background, $white);
   overflow: auto;
   display: flex;
   flex-direction: column;
@@ -883,14 +878,18 @@ $ide-commit-header-height: 48px;
 
 .ide-right-sidebar {
   .ide-activity-bar {
-    border-left: 1px solid $white-dark;
+    border-left: 1px solid var(--ide-border-color, $white-dark);
   }
 
   .multi-file-commit-panel-inner {
     width: 350px;
-    padding: $grid-size $gl-padding;
-    background-color: $white;
-    border-left: 1px solid $white-dark;
+    padding: $grid-size 0;
+    background-color: var(--ide-highlight-background, $white);
+    border-left: 1px solid var(--ide-border-color, $white-dark);
+  }
+
+  .ide-right-sidebar-jobs-detail {
+    padding-bottom: 0;
   }
 
   .ide-right-sidebar-clientside {
@@ -901,6 +900,10 @@ $ide-commit-header-height: 48px;
 .ide-pipeline {
   @include ide-trace-view();
 
+  svg {
+    --svg-status-bg: var(--ide-background, $white);
+  }
+
   .empty-state {
     p {
       margin: $grid-size 0;
@@ -913,15 +916,12 @@ $ide-commit-header-height: 48px;
       margin: 0;
     }
   }
-
-  .build-trace {
-    margin-left: -$gl-padding;
-  }
 }
 
 .ide-pipeline-list {
   flex: 1;
   overflow: auto;
+  padding: 0 $gl-padding;
 }
 
 .ide-pipeline-header {
@@ -935,7 +935,7 @@ $ide-commit-header-height: 48px;
   padding: 16px;
 
   &:not(:last-child) {
-    border-bottom: 1px solid $border-color;
+    border-bottom: 1px solid var(--ide-border-color, $border-color);
   }
 
   .ci-status-icon {
@@ -964,6 +964,7 @@ $ide-commit-header-height: 48px;
 
 .ide-job-header {
   min-height: 60px;
+  padding: 0 $gl-padding;
 }
 
 .ide-nav-form {
@@ -976,7 +977,7 @@ $ide-commit-header-height: 48px;
       text-align: center;
 
       &:not(.active) {
-        background-color: $gray-light;
+        background-color: var(--ide-dropdown-background, $gray-light);
       }
     }
   }
@@ -1025,7 +1026,7 @@ $ide-commit-header-height: 48px;
 .ide-merge-request-project-path {
   font-size: 12px;
   line-height: 16px;
-  color: $gl-text-color-secondary;
+  color: var(--ide-text-color-secondary, $gl-text-color-secondary);
 }
 
 .ide-merge-request-info {
@@ -1041,17 +1042,17 @@ $ide-commit-header-height: 48px;
 
 .ide-entry-dropdown-toggle {
   padding: $gl-padding-4;
-  color: $gl-text-color;
-  background-color: $gray-100;
+  color: var(--ide-text-color, $gl-text-color);
+  background-color: var(--ide-background, $gray-100);
 
   &:hover {
-    background-color: $gray-200;
+    background-color: var(--ide-file-row-btn-hover-background, $gray-200);
   }
 
   &:active,
   &:focus {
     color: $white-normal;
-    background-color: $blue-500;
+    background-color: var(--ide-link-color, $blue-500);
     outline: 0;
   }
 }
@@ -1065,14 +1066,14 @@ $ide-commit-header-height: 48px;
 
   .dropdown.show .ide-entry-dropdown-toggle {
     color: $white-normal;
-    background-color: $blue-500;
+    background-color: var(--ide-link-color, $blue-500);
   }
 }
 
 .ide-preview-header {
   padding: 0 $grid-size;
-  border-bottom: 1px solid $white-dark;
-  background-color: $gray-light;
+  border-bottom: 1px solid var(--ide-border-color-alt, $white-dark);
+  background-color: var(--ide-highlight-background, $gray-light);
   min-height: 44px;
 }
 
@@ -1082,7 +1083,7 @@ $ide-commit-header-height: 48px;
   max-width: 24px;
   padding: 0;
   margin: 0 ($grid-size / 2);
-  color: $gl-gray-light;
+  color: var(--ide-text-color-secondary, $gl-gray-light);
 
   &:first-child {
     margin-left: 0;
@@ -1096,7 +1097,7 @@ $ide-commit-header-height: 48px;
   &:focus {
     outline: 0;
     box-shadow: none;
-    border-color: $gray-200;
+    border-color: var(--ide-border-color, $gray-200);
   }
 }
 
@@ -1108,8 +1109,8 @@ $ide-commit-header-height: 48px;
 
 .ide-file-templates {
   padding: $grid-size $gl-padding;
-  background-color: $gray-light;
-  border-bottom: 1px solid $white-dark;
+  background-color: var(--ide-background, $gray-light);
+  border-bottom: 1px solid var(--ide-border-color, $white-dark);
 
   .dropdown {
     min-width: 180px;
@@ -1123,8 +1124,8 @@ $ide-commit-header-height: 48px;
 .ide-commit-editor-header {
   height: 65px;
   padding: 8px 16px;
-  background-color: $gray-50;
-  box-shadow: inset 0 -1px $white-dark;
+  background-color: var(--ide-background, $gray-10);
+  box-shadow: inset 0 -1px var(--ide-border-color, $white-dark);
 }
 
 .ide-commit-list-changed-icon {
@@ -1135,16 +1136,26 @@ $ide-commit-header-height: 48px;
 .ide-file-icon-holder {
   display: flex;
   align-items: center;
-  color: $gray-700;
+  color: var(--ide-text-color-secondary, $gray-700);
+}
+
+.file-row:active {
+  background: var(--ide-background, $gray-200);
+}
+
+.file-row.is-active {
+  background: var(--ide-background, $gray-100);
 }
 
 .file-row:hover,
 .file-row:focus {
+  background: var(--ide-background, $gray-100);
+
   .ide-new-btn {
     display: block;
   }
 
   .folder-icon {
-    fill: $gl-text-color-secondary;
+    fill: var(--ide-text-color-secondary, $gl-text-color-secondary);
   }
 }
diff --git a/app/assets/stylesheets/page_bundles/ide_themes/README.md b/app/assets/stylesheets/page_bundles/ide_themes/README.md
new file mode 100644
index 00000000000..535179cc4c2
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/ide_themes/README.md
@@ -0,0 +1,53 @@
+# Web IDE Themes
+
+Web IDE currently supports 5 syntax highlighting themes based on themes from the user's profile preferences:
+
+* White
+* Dark
+* Monokai
+* Solarized Dark
+* Solarized Light
+
+Currently, the Web IDE supports the white theme by default, and the dark theme by the introduction of CSS
+variables.
+
+The Web IDE automatically adds an appropriate theme class to the `ide.vue` component based on the current syntax
+highlighting theme. Below are those theme classes, which come from the `gon.user_color_scheme` global setting:
+
+| # | Color Scheme    | `gon.user_color_scheme` | Theme class             |
+|---|-----------------|-------------------------|-------------------------|
+| 1 | White           | `"white"`               | `.theme-white`           |
+| 2 | Dark            | `"dark"`                | `.theme-dark`            |
+| 3 | Monokai         | `"monokai"`             | `.theme-monokai`         |
+| 4 | Solarized Dark  | `"solarized-dark"`      | `.theme-solarized-dark`  |
+| 5 | Solarized Light | `"solarized-light"`     | `.theme-solarized-light` |
+| 6 | None            | `"none"`                | `.theme-none`            |
+
+## Adding New Themes (SCSS)
+
+To add a new theme, follow the following steps:
+
+1. Pick a theme from the table above, lets say **Solarized Dark**.
+2. Create a new file in this folder called `_solarized_dark.scss`.
+3. Copy over all the CSS variables from `_dark.scss` to `_solarized_dark.scss` and assign them your own values.
+   Put them under the selector `.ide.theme-solarized-dark`.
+4. Import this newly created SCSS file in `ide.scss` file in the parent directory.
+5. To make sure the variables apply to to your theme, add the selector `.ide.theme-solarized-dark` to the top
+   of `_ide_theme_overrides.scss` file. The file should now look like this:
+
+   ```scss
+   .ide.theme-dark,
+   .ide.theme-solarized-dark {
+     /* file contents */
+   }
+   ```
+
+   This step is temporary until all CSS variables in that file have their
+   default values assigned.
+6. That's it! Raise a merge request with your newly added theme.
+
+## Modifying Monaco Themes
+
+Monaco themes are defined in Javascript and are stored in the `app/assets/javascripts/ide/lib/themes/` directory.
+To modify any syntax highlighting colors or to synchronize the theme colors with syntax highlighting colors, you
+can modify the files in that directory directly.
diff --git a/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss b/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss
new file mode 100644
index 00000000000..37e6be9849b
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss
@@ -0,0 +1,50 @@
+// -------
+// Please see `app/assets/stylesheets/page_bundles/ide_themes/README.md` for a guide on contributing new themes
+// -------
+.ide.theme-dark {
+  --ide-border-color: #1d1f21;
+  --ide-border-color-alt: #333;
+  --ide-highlight-accent: #fff;
+  --ide-text-color: #ccc;
+  --ide-text-color-secondary: #ccc;
+  --ide-background: #333;
+  --ide-background-hover: #2d2d2d;
+  --ide-highlight-background: #252526;
+  --ide-link-color: #428fdc;
+  --ide-footer-background: #060606;
+
+  --ide-input-border: #868686;
+  --ide-input-background: transparent;
+  --ide-input-color: #fff;
+
+  --ide-btn-default-background: transparent;
+  --ide-btn-default-border: #bfbfbf;
+  --ide-btn-default-hover-border: #d8d8d8;
+
+  --ide-btn-primary-background: #1068bf;
+  --ide-btn-primary-border: #428fdc;
+  --ide-btn-primary-hover-border: #63a6e9;
+
+  --ide-btn-success-background: #217645;
+  --ide-btn-success-border: #108548;
+  --ide-btn-success-hover-border: #2da160;
+
+  --ide-btn-disabled-border: rgba(223, 223, 223, 0.24);
+  --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;
+
+  --ide-dropdown-btn-hover-border: #{$gray-200};
+  --ide-dropdown-btn-hover-background: #{$gray-900};
+
+  --ide-file-row-btn-hover-background: #{$gray-800};
+
+  --ide-diff-insert: rgba(155, 185, 85, 0.2);
+  --ide-diff-remove: rgba(255, 0, 0, 0.2);
+
+  --ide-animation-gradient-1: #{$gray-800};
+  --ide-animation-gradient-2: #{$gray-700};
+}
diff --git a/app/assets/stylesheets/pages/alert_management/details.scss b/app/assets/stylesheets/pages/alert_management/details.scss
new file mode 100644
index 00000000000..89219e41644
--- /dev/null
+++ b/app/assets/stylesheets/pages/alert_management/details.scss
@@ -0,0 +1,42 @@
+.alert-management-details {
+  // these styles need to be deleted once GlTable component looks in GitLab same as in @gitlab/ui
+  table {
+    tr {
+      td {
+        @include gl-border-0;
+        @include gl-p-5;
+        border-color: transparent;
+        border-bottom: 1px solid $table-border-color;
+
+        &:first-child {
+          div {
+            font-weight: bold;
+          }
+        }
+
+        &:not(:first-child) {
+          &::before {
+            color: $gray-700;
+            font-weight: normal !important;
+          }
+
+          div {
+            color: $gray-700;
+          }
+        }
+
+        @include media-breakpoint-up(sm) {
+          div {
+            text-align: left !important;
+          }
+        }
+      }
+    }
+  }
+
+  @include media-breakpoint-down(xs) {
+    .alert-details-create-issue-button {
+      width: 100%;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/alert_management/list.scss b/app/assets/stylesheets/pages/alert_management/list.scss
new file mode 100644
index 00000000000..dc181342def
--- /dev/null
+++ b/app/assets/stylesheets/pages/alert_management/list.scss
@@ -0,0 +1,83 @@
+.alert-management-list {
+  // consider adding these stateful variants to @gitlab-ui
+  // https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1178
+  .hover-bg-blue-50:hover {
+    background-color: $blue-50;
+  }
+
+  .hover-gl-cursor-pointer:hover {
+    cursor: pointer;
+  }
+
+  .hover-gl-border-b-solid:hover {
+    @include gl-border-b-solid;
+  }
+
+  .hover-gl-border-blue-200:hover {
+    border-color: $blue-200;
+  }
+
+  // these styles need to be deleted once GlTable component looks in GitLab same as in @gitlab/ui
+  table {
+    color: $gray-700;
+
+    tr {
+      &:focus {
+        outline: none;
+      }
+
+      td,
+      th {
+        @include gl-p-5;
+        border: 0; // Remove cell border styling so that we can set border styling per row
+
+        &.event-count {
+          @include gl-pr-9;
+        }
+      }
+
+      th {
+        background-color: transparent;
+        font-weight: $gl-font-weight-bold;
+        color: $gl-gray-600;
+      }
+
+      &:last-child {
+        td {
+          @include gl-border-0;
+        }
+      }
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    .alert-management-table {
+      .table-col {
+        min-height: 68px;
+
+        &:last-child {
+          background-color: $gray-10;
+
+          &::before {
+            content: none !important;
+          }
+
+          div {
+            width: 100% !important;
+            padding: 0 !important;
+          }
+        }
+      }
+    }
+  }
+
+  .gl-tab-nav-item {
+    color: $gl-gray-600;
+
+    > .gl-tab-counter-badge {
+      color: inherit;
+      @include gl-font-sm;
+      background-color: $white-normal;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/alert_management/severity-icons.scss b/app/assets/stylesheets/pages/alert_management/severity-icons.scss
new file mode 100644
index 00000000000..b400e80d5c5
--- /dev/null
+++ b/app/assets/stylesheets/pages/alert_management/severity-icons.scss
@@ -0,0 +1,26 @@
+.alert-management-list,
+.alert-management-details {
+  .icon-critical {
+    color: $red-800;
+  }
+
+  .icon-high {
+    color: $red-600;
+  }
+
+  .icon-medium {
+    color: $orange-400;
+  }
+
+  .icon-low {
+    color: $orange-300;
+  }
+
+  .icon-info {
+    color: $blue-400;
+  }
+
+  .icon-unknown {
+    color: $gray-400;
+  }
+}
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 11291dad28b..d755170fe1f 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -548,3 +548,27 @@
    */
   height: $input-height;
 }
+
+.issue-boards-content.is-focused {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: $white;
+  z-index: 9000;
+
+  @include media-breakpoint-down(sm) {
+    padding-top: 10px;
+  }
+
+  .boards-list {
+    height: calc(100vh - #{$issue-boards-filter-height});
+    overflow-x: scroll;
+  }
+
+  .issue-boards-sidebar {
+    height: 100%;
+    top: 0;
+  }
+}
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 230f390aa90..9a69afc6044 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -208,6 +208,18 @@
   }
 }
 
+.commit-nav-buttons {
+  a.btn,
+  button {
+    // See: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/730
+    &:last-child > svg {
+      margin-left: 0.25rem;
+      margin-right: 0;
+    }
+  }
+}
+
+
 .clipboard-group,
 .commit-sha-group {
   display: inline-flex;
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index 0292919ea50..b97709e140f 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -187,7 +187,6 @@
 
   .stage-events {
     width: 60%;
-    overflow: scroll;
     min-height: 467px;
   }
 
diff --git a/app/assets/stylesheets/pages/error_list.scss b/app/assets/stylesheets/pages/error_list.scss
index a61a85649b8..3ec3e4f6b43 100644
--- a/app/assets/stylesheets/pages/error_list.scss
+++ b/app/assets/stylesheets/pages/error_list.scss
@@ -17,7 +17,7 @@
         min-height: 68px;
 
         &:last-child {
-          background-color: $gray-normal;
+          background-color: $gray-10;
 
           &::before {
             content: none !important;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 85fdcb753b4..b241d0a2bdc 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -167,10 +167,6 @@
     }
   }
 
-  a.gl-label-icon {
-    color: $gray-500;
-  }
-
   .gl-label .gl-label-link:hover {
     text-decoration: none;
     color: inherit;
@@ -180,11 +176,6 @@
     }
   }
 
-  .gl-label .gl-label-icon:hover {
-    text-decoration: none;
-    color: $gray-500;
-  }
-
   .btn-link {
     color: inherit;
   }
@@ -826,10 +817,6 @@
           }
         }
       }
-
-      .gl-label-icon {
-        color: $gray-500;
-      }
     }
 
     @media(max-width: map-get($grid-breakpoints, lg)-1) {
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index e74b420f9e9..0dd25ec5360 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -303,3 +303,13 @@ ul.related-merge-requests > li {
     }
   }
 }
+
+.issuable-list-root {
+  .gl-label-link {
+    text-decoration: none;
+
+    &:hover {
+      color: inherit;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index 7f6542261b8..22c1cb127cd 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -307,7 +307,7 @@
   }
 
   .label-name {
-    width: 150px;
+    width: 200px;
     flex-shrink: 0;
 
     .scoped-label-wrapper,
@@ -460,8 +460,7 @@
 // Label inside title of Delete Label Modal
 .modal-header .page-title {
   .scoped-label-wrapper {
-    .scoped-label,
-    .gl-label-icon {
+    .scoped-label {
       line-height: 20px;
     }
 
diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss
index fa10ab022dc..c473cc44637 100644
--- a/app/assets/stylesheets/pages/milestone.scss
+++ b/app/assets/stylesheets/pages/milestone.scss
@@ -68,10 +68,6 @@ $status-box-line-height: 26px;
       .gl-label-link {
         color: inherit;
       }
-
-      .gl-label-icon {
-        color: $gray-500;
-      }
     }
   }
 
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 8b51ba7ae62..bed147aa3a7 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -588,7 +588,8 @@ $note-form-margin-left: 72px;
   a {
     color: inherit;
 
-    &:hover {
+    &:hover,
+    &.hover {
       color: $blue-600;
     }
 
@@ -605,6 +606,21 @@ $note-form-margin-left: 72px;
   .author-link {
     color: $gl-text-color;
   }
+
+  // Prevent flickering of link when hovering between `author-name-link` and `.author-username-link`
+  .author-name-link + .author-username .author-username-link {
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      right: 100%;
+      width: 0.25rem;
+      height: 100%;
+      top: 0;
+      bottom: 0;
+    }
+  }
 }
 
 .discussion-header {
@@ -672,8 +688,7 @@ $note-form-margin-left: 72px;
     text-decoration: underline;
   }
 
-  .gl-label-link:hover,
-  .gl-label-icon:hover {
+  .gl-label-link:hover {
     text-decoration: none;
     color: inherit;
 
@@ -892,11 +907,10 @@ $note-form-margin-left: 72px;
   border-right: 0;
 
   .line-resolve-btn {
-    margin-right: 5px;
     color: $gray-700;
 
     svg {
-      vertical-align: middle;
+      vertical-align: text-top;
     }
   }
 
diff --git a/app/assets/stylesheets/pages/pipeline_schedules.scss b/app/assets/stylesheets/pages/pipeline_schedules.scss
index 85c4902eee2..81716991a36 100644
--- a/app/assets/stylesheets/pages/pipeline_schedules.scss
+++ b/app/assets/stylesheets/pages/pipeline_schedules.scss
@@ -21,11 +21,6 @@
   .cron-interval-input {
     margin: 10px 10px 0 0;
   }
-
-  .cron-syntax-link-wrap {
-    margin-right: 10px;
-    font-size: 12px;
-  }
 }
 
 .pipeline-schedule-table-row {
diff --git a/app/assets/stylesheets/pages/prometheus.scss b/app/assets/stylesheets/pages/prometheus.scss
index f61245bed24..0f56b98a78d 100644
--- a/app/assets/stylesheets/pages/prometheus.scss
+++ b/app/assets/stylesheets/pages/prometheus.scss
@@ -13,6 +13,14 @@
   .form-group {
     margin-bottom: map-get($spacing-scale, 3);
   }
+
+  .variables-section {
+    input {
+      @include media-breakpoint-up(sm) {
+        width: 160px;
+      }
+    }
+  }
 }
 
 .draggable {
@@ -143,7 +151,7 @@
       > .arrow::after {
         border-top: 6px solid transparent;
         border-bottom: 6px solid transparent;
-        border-left: 4px solid $gray-50;
+        border-left: 4px solid $gray-10;
       }
 
       .arrow-shadow {
@@ -165,7 +173,7 @@
       > .arrow::after {
         border-top: 6px solid transparent;
         border-bottom: 6px solid transparent;
-        border-right: 4px solid $gray-50;
+        border-right: 4px solid $gray-10;
       }
 
       .arrow-shadow {
@@ -199,7 +207,7 @@
     }
 
     > .popover-title {
-      background-color: $gray-50;
+      background-color: $gray-10;
       border-radius: $border-radius-default $border-radius-default 0 0;
     }
   }
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 2c0ca792ec3..d26c07ce51b 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -335,15 +335,6 @@
   }
 }
 
-.deprecated-service {
-  cursor: default;
-
-  a {
-    font-weight: $gl-font-weight-bold;
-    color: $white;
-  }
-}
-
 .personal-access-tokens-never-expires-label {
   color: $note-disabled-comment-color;
 }
@@ -401,4 +392,3 @@
     }
   }
 }
-
diff --git a/app/assets/stylesheets/snippets.scss b/app/assets/stylesheets/snippets.scss
index 93a12cf28a2..d410a16a1d9 100644
--- a/app/assets/stylesheets/snippets.scss
+++ b/app/assets/stylesheets/snippets.scss
@@ -40,10 +40,9 @@
     margin: 0;
     padding: 0;
     table-layout: fixed;
+    overflow-x: auto;
 
     .blob-content {
-      overflow-x: auto;
-
       pre {
         height: 100%;
         padding: 10px;
@@ -61,6 +60,7 @@
         font-family: $monospace-font;
         font-size: $code-font-size;
         line-height: $code-line-height;
+        display: inline-block;
       }
     }
 
@@ -73,7 +73,7 @@
         font-family: $monospace-font;
         display: block;
         font-size: $code-font-size;
-        min-height: $code-line-height;
+        line-height: $code-line-height;
         white-space: nowrap;
         color: $black-transparent;
         min-width: 30px;
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index b829a7b518e..8cf5c533f1f 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -1,3 +1,10 @@
+/**
+  Please note: These are deprecated in favor of the Gitlab UI utility classes.
+  Check https://unpkg.com/browse/@gitlab/ui/src/scss/utilities.scss
+  to see the available utility classes. If you cannot find the class you need,
+  consider adding it to Gitlab UI before adding it here.
+**/
+
 @each $variant, $range in $color-ranges {
   @each $suffix, $color in $range {
     #{'.bg-#{$variant}-#{$suffix}'} {
@@ -7,6 +14,12 @@
     #{'.text-#{$variant}-#{$suffix}'} {
       color: $color;
     }
+
+    #{'.hover-text-#{$variant}-#{$suffix}'} {
+      &:hover {
+        color: $color;
+      }
+    }
   }
 }
 
@@ -44,6 +57,7 @@
 .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; }
 
 .gl-children-ml-sm-3 > * {
@@ -75,6 +89,19 @@
   width: px-to-rem(16px);
 }
 
+.gl-shim-pb-3 {
+  padding-bottom: 8px;
+}
+
+.gl-shim-pt-5 {
+  padding-top: 16px;
+}
+
+.gl-shim-mx-2 {
+  margin-left: 4px;
+  margin-right: 4px;
+}
+
 .gl-text-purple { color: $purple; }
 .gl-text-gray-800 { color: $gray-800; }
 .gl-bg-purple-light { background-color: $purple-light; }
@@ -85,6 +112,7 @@
 .gl-bg-blue-50 { @include gl-bg-blue-50; }
 .gl-bg-red-100 { @include gl-bg-red-100; }
 .gl-bg-orange-100 { @include gl-bg-orange-100; }
+.gl-bg-gray-50 { @include gl-bg-gray-50; }
 .gl-bg-gray-100 { @include gl-bg-gray-100; }
 .gl-bg-green-100 { @include gl-bg-green-100;}
 .gl-bg-blue-500 { @include gl-bg-blue-500; }
@@ -107,8 +135,14 @@
 .gl-text-green-700 { @include gl-text-green-700; }
 
 .gl-align-items-center { @include gl-align-items-center; }
+
 .d-sm-table-column {
   @include media-breakpoint-up(sm) {
     display: table-column !important;
   }
 }
+
+.gl-white-space-normal { @include gl-white-space-normal; }
+.gl-word-break-all { @include gl-word-break-all; }
+.gl-reset-line-height { @include gl-reset-line-height; }
+.gl-reset-text-align { @include gl-reset-text-align; }