Add latest changes from gitlab-org/gitlab@13-6-stable-eev13.6.0-rc42

19 files changed, 683 insertions, 128 deletions

diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
index d1f7c2e9865..52cc7d3449e 100644
--- a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
+++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
@@ -5,7 +5,7 @@
   $bs-input-focus-border: #80bdff;
   $bs-input-focus-box-shadow: rgba(0, 123, 255, 0.25);
 
-  a:not(.btn),
+  a:not(.btn):not(.gl-tab-nav-item),
   .gl-button.btn-link,
   .gl-button.btn-link:hover,
   .gl-button.btn-link:focus,
@@ -151,7 +151,7 @@
     border-color: var(--ide-border-color-alt, $gray-100);
 
     code {
-      background-color: var(--ide-border-color, inherit);
+      background-color: var(--ide-empty-state-background, inherit);
     }
   }
 
@@ -427,7 +427,7 @@
   }
 
   .md table:not(.code) tbody {
-    background-color: var(--ide-border-color, $white);
+    background-color: var(--ide-empty-state-background, $white);
   }
 
   .animation-container {
diff --git a/app/assets/stylesheets/page_bundles/alert_management_details.scss b/app/assets/stylesheets/page_bundles/alert_management_details.scss
new file mode 100644
index 00000000000..beb80a14c5a
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/alert_management_details.scss
@@ -0,0 +1,46 @@
+@import 'mixins_and_variables_and_functions';
+
+.alert-management-details {
+  @include media-breakpoint-down(xs) {
+    .alert-details-incident-button {
+      @include gl-w-full;
+    }
+  }
+
+  .toggle-sidebar-mobile-button {
+    @include gl-right-0;
+  }
+
+  .dropdown-menu-toggle {
+    &:hover {
+      @include gl-bg-white;
+    }
+  }
+
+  .assignee-dropdown-item {
+    .dropdown-item {
+      @include gl-display-flex;
+      @include gl-align-items-center;
+
+      &::before {
+        top: 50% !important;
+      }
+
+      &.is-active {
+        &:last-child {
+          @include gl-border-b-gray-100;
+          @include gl-border-b-1;
+          @include gl-border-b-solid;
+        }
+      }
+    }
+  }
+
+  .main-notes-list::before {
+    left: $gl-spacing-scale-5 !important;
+  }
+
+  .note-header-info {
+    @include gl-mt-1;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/alert_management_settings.scss b/app/assets/stylesheets/page_bundles/alert_management_settings.scss
new file mode 100644
index 00000000000..fb7c1602cba
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/alert_management_settings.scss
@@ -0,0 +1,24 @@
+@import 'mixins_and_variables_and_functions';
+
+$stroke-size: 1px;
+
+.right-arrow {
+  @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;
+
+  &-head {
+    @include gl-absolute;
+    top: -$gl-spacing-scale-2;
+    left: calc(100% - #{$gl-spacing-scale-3} - #{2 * $stroke-size});
+    border-color: var(--gray-400, $gray-400);
+    @include gl-border-solid;
+    border-width: 0 $stroke-size $stroke-size 0;
+    @include gl-display-inline-block;
+    @include gl-p-2;
+    transform: rotate(-45deg);
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss
index e908e3622ed..ffc15af6329 100644
--- a/app/assets/stylesheets/page_bundles/boards.scss
+++ b/app/assets/stylesheets/page_bundles/boards.scss
@@ -83,9 +83,6 @@
 }
 
 .board {
-  // the next line cannot be replaced with .d-inline-block because it breaks display: none of SortableJS
-  // see https://gitlab.com/gitlab-org/gitlab-foss/issues/64828
-  display: inline-block;
   width: calc(85vw - 15px);
 
   @include media-breakpoint-up(sm) {
@@ -116,39 +113,10 @@
   &.is-collapsed {
     width: 50px;
 
-    .board-title {
-      flex-direction: column;
-    }
-
     .board-title-caret {
       margin-top: 1px;
     }
 
-    .user-avatar-link,
-    .milestone-icon {
-      margin-top: $gl-padding-8;
-      transform: rotate(90deg);
-    }
-
-    .board-title-text {
-      flex-grow: 0;
-      margin: $gl-padding-8 0;
-
-      .board-title-main-text {
-        display: block;
-      }
-
-      .board-title-sub-text {
-        display: none;
-      }
-    }
-
-    .issue-count-badge {
-      border: 0;
-      white-space: nowrap;
-      padding: 0;
-    }
-
     .board-title-text > span,
     .issue-count-badge > span {
       height: 16px;
@@ -197,10 +165,7 @@
 }
 
 .board-title {
-  align-items: center;
-  font-size: 1em;
   border-bottom: 1px solid var(--gray-100, $gray-100);
-  padding: 0 $gl-spacing-scale-3;
   height: 3rem;
 
   .js-max-issue-size::before {
@@ -208,21 +173,6 @@
   }
 }
 
-.board-title-text {
-  flex-grow: 1;
-}
-
-.board-delete.gl-button {
-  background-color: transparent;
-  outline: 0;
-
-  &:hover {
-    color: var(--blue-600, $blue-600);
-    box-shadow: none;
-  }
-}
-
-.board-blank-state,
 .board-promotion-state {
   background-color: var(--white, $white);
   flex: 1;
@@ -230,19 +180,6 @@
   overflow-x: hidden;
 }
 
-.board-blank-state-list {
-  > li:not(:last-child) {
-    margin-bottom: 8px;
-  }
-
-  .label-color {
-    top: 2px;
-    width: 16px;
-    height: 16px;
-    margin-right: 3px;
-  }
-}
-
 .board-list-component {
   min-height: 0; // firefox fix
 }
@@ -311,10 +248,6 @@
   }
 }
 
-.board-card-header {
-  text-align: initial;
-}
-
 .board-card-assignee {
   margin-top: -$gl-padding-4;
   margin-bottom: -$gl-padding-4;
@@ -586,28 +519,6 @@
   }
 }
 
-.board-swimlanes {
-  overflow-x: auto;
-}
-
 .board-header-collapsed-info-icon:hover {
   color: var(--gray-900, $gray-900);
 }
-
-$epic-icons-spacing: 40px;
-
-.board-epic-lane {
-  max-width: calc(100vw - #{$contextual-sidebar-width} - #{$epic-icons-spacing});
-
-  .page-with-icon-sidebar & {
-    max-width: calc(100vw - #{$contextual-sidebar-collapsed-width} - #{$epic-icons-spacing});
-  }
-
-  .page-with-icon-sidebar .is-compact & {
-    max-width: calc(100vw - #{$contextual-sidebar-collapsed-width} - #{$gutter-width} - #{$epic-icons-spacing});
-  }
-
-  .is-compact & {
-    max-width: calc(100vw - #{$contextual-sidebar-width} - #{$gutter-width} - #{$epic-icons-spacing});
-  }
-}
diff --git a/app/assets/stylesheets/page_bundles/build.scss b/app/assets/stylesheets/page_bundles/build.scss
new file mode 100644
index 00000000000..2f0f4a46658
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/build.scss
@@ -0,0 +1,294 @@
+@import 'mixins_and_variables_and_functions';
+
+.build-page {
+  .build-trace {
+    @include build-trace();
+  }
+
+  .archived-job {
+    top: $header-height;
+    border-radius: 2px 2px 0 0;
+    color: $orange-600;
+    background-color: $orange-50;
+    border: 1px solid $border-gray-normal;
+    padding: 3px 12px;
+    margin: auto;
+    align-items: center;
+    z-index: 1;
+
+    .with-performance-bar & {
+      top: $header-height + $performance-bar-height;
+    }
+  }
+
+  .top-bar {
+    @include build-trace-top-bar(50px);
+
+    &.has-archived-block {
+      top: $header-height + 28px;
+
+      .with-performance-bar & {
+        top: $header-height + $performance-bar-height + 28px;
+      }
+    }
+
+    &.affix {
+      top: $header-height;
+
+      // with sidebar
+      &.sidebar-expanded {
+        right: 306px;
+        left: 16px;
+      }
+
+      // without sidebar
+      &.sidebar-collapsed {
+        right: 16px;
+        left: 16px;
+      }
+    }
+
+    &.affix-top {
+      position: absolute;
+      right: 0;
+      left: 0;
+      top: 0;
+    }
+
+    .controllers {
+      @include build-controllers(15px, center, false, 0, inline, 0);
+    }
+  }
+
+  .environment-information {
+    border: 1px solid $border-color;
+    padding: 8px $gl-padding 12px;
+    border-radius: $border-radius-default;
+
+    svg {
+      position: relative;
+      top: 3px;
+      margin-right: 5px;
+      width: 22px;
+      height: 22px;
+    }
+  }
+
+  .build-loader-animation {
+    @include build-loader-animation;
+    float: left;
+    padding-left: $gl-padding-8;
+  }
+}
+
+.build-header {
+  .page-content-header {
+    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;
+
+      &:hover {
+        color: $blue-600;
+        text-decoration: none;
+      }
+    }
+  }
+
+  code {
+    color: $code-color;
+  }
+
+  .avatar {
+    float: none;
+    margin-right: 2px;
+    margin-left: 2px;
+  }
+}
+
+.right-sidebar.build-sidebar {
+  padding: 0;
+
+  &.right-sidebar-collapsed {
+    display: none;
+  }
+
+  .sidebar-container {
+    padding-right: 100px;
+    height: 100%;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .blocks-container {
+    padding: 0 $gl-padding;
+    width: 289px;
+  }
+
+  .block {
+    width: 100%;
+    word-break: break-word;
+
+    &:last-child {
+      border-bottom: 1px solid $border-gray-normal;
+    }
+
+    &.coverage {
+      padding: 0 16px 11px;
+    }
+  }
+
+  .block-last {
+    padding: 16px 0;
+  }
+
+  .trigger-variables-btn-container {
+    justify-content: space-between;
+    align-items: center;
+
+    .trigger-variables-btn {
+      margin-top: -5px;
+      margin-bottom: -5px;
+    }
+  }
+
+  .trigger-build-variables {
+    margin: 0;
+    overflow-x: auto;
+    width: 100%;
+    -ms-overflow-style: scrollbar;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .trigger-build-variable {
+    font-weight: $gl-font-weight-normal;
+    color: $code-color;
+  }
+
+  .trigger-build-value {
+    padding: 2px 4px;
+    color: $black;
+  }
+
+  .trigger-variables-table-cell {
+    font-size: $gl-font-size-small;
+    line-height: $gl-line-height;
+    border: 1px solid $gray-100;
+    padding: $gl-padding-4 6px;
+    width: 50%;
+    vertical-align: top;
+  }
+
+  .badge.badge-pill {
+    margin-left: 2px;
+  }
+
+  .retry-link {
+    display: block;
+
+    .btn-inverted-secondary {
+      color: $blue-500;
+
+      &:hover {
+        color: $white;
+      }
+    }
+  }
+
+  .stage-item {
+    cursor: pointer;
+
+    &:hover {
+      color: $gl-text-color;
+    }
+  }
+
+  .builds-container {
+    background-color: $white;
+    border-top: 1px solid $border-color;
+    border-bottom: 1px solid $border-color;
+    max-height: 300px;
+    width: 289px;
+    overflow: auto;
+
+    svg {
+      margin-right: 3px;
+      height: 14px;
+      width: 14px;
+    }
+
+    a {
+      padding: $gl-padding 10px $gl-padding 40px;
+      width: 270px;
+
+      &:hover {
+        color: $gl-text-color;
+      }
+    }
+
+    .icon-arrow-right {
+      left: 15px;
+      top: 20px;
+    }
+
+    .build-job {
+      &.active {
+        font-weight: $gl-font-weight-bold;
+      }
+
+      &.retried {
+        background-color: $gray-lightest;
+      }
+
+      &:hover {
+        background-color: $gray-darker;
+      }
+    }
+  }
+
+  .link-commit {
+    color: $blue-600;
+  }
+}
+
+.build-sidebar {
+  .container-fluid.container-limited {
+    max-width: 100%;
+  }
+
+  .content-wrapper {
+    padding-bottom: 6px;
+  }
+}
+
+.build-detail-row {
+  margin-bottom: 5px;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+}
+
+@include media-breakpoint-down(md) {
+  .content-list {
+    &.builds-content-list {
+      width: 100%;
+      overflow: auto;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/ci_status.scss b/app/assets/stylesheets/page_bundles/ci_status.scss
new file mode 100644
index 00000000000..8522a0a8fe4
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/ci_status.scss
@@ -0,0 +1,79 @@
+@import 'mixins_and_variables_and_functions';
+
+.ci-status {
+  padding: 2px 7px 4px;
+  border: 1px solid $gray-darker;
+  white-space: nowrap;
+  border-radius: 4px;
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+  }
+
+  svg {
+    height: 13px;
+    width: 13px;
+    overflow: visible;
+  }
+
+  &.ci-failed {
+    @include status-color($red-100, $red-500, $red-600);
+  }
+
+  &.ci-success {
+    @include green-status-color;
+  }
+
+  &.ci-canceled,
+  &.ci-disabled,
+  &.ci-scheduled,
+  &.ci-manual {
+    color: $gl-text-color;
+    border-color: $gl-text-color;
+
+    &:not(span):hover {
+      background-color: rgba($gl-text-color, 0.07);
+    }
+  }
+
+  &.ci-preparing {
+    @include status-color($gray-100, $gray-300, $gray-400);
+  }
+
+  &.ci-pending,
+  &.ci-waiting-for-resource,
+  &.ci-failed-with-warnings,
+  &.ci-success-with-warnings {
+    @include status-color($orange-50, $orange-500, $orange-700);
+  }
+
+  &.ci-info,
+  &.ci-running {
+    @include status-color($blue-100, $blue-500, $blue-600);
+  }
+
+  &.ci-created,
+  &.ci-skipped {
+    color: $gl-text-color-secondary;
+    border-color: $gl-text-color-secondary;
+
+    &:not(span):hover {
+      background-color: rgba($gl-text-color-secondary, 0.07);
+    }
+  }
+}
+
+.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/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index 71e74297ee8..15cc10d1532 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -5,7 +5,9 @@
 @import './ide_theme_overrides';
 
 @import './ide_themes/dark';
+@import './ide_themes/solarized-light';
 @import './ide_themes/solarized-dark';
+@import './ide_themes/monokai';
 
 $search-list-icon-width: 18px;
 $ide-activity-bar-width: 60px;
@@ -176,11 +178,11 @@ $ide-commit-header-height: 48px;
     height: 100%;
     overflow: auto;
     padding: $gl-padding;
-    background-color: var(--ide-border-color, transparent);
+    background-color: var(--ide-empty-state-background, transparent);
   }
 
   .file-container {
-    background-color: var(--ide-border-color, $gray-darker);
+    background-color: var(--ide-empty-state-background, $gray-darker);
     display: flex;
     height: 100%;
     align-items: center;
@@ -491,7 +493,7 @@ $ide-commit-header-height: 48px;
   height: 100vh;
   align-items: center;
   justify-content: center;
-  background-color: var(--ide-border-color, transparent);
+  background-color: var(--ide-empty-state-background, transparent);
 }
 
 .ide {
@@ -915,12 +917,6 @@ $ide-commit-header-height: 48px;
   }
 }
 
-.ide-pipeline-list {
-  flex: 1;
-  overflow: auto;
-  padding: 0 $gl-padding;
-}
-
 .ide-pipeline-header {
   min-height: 55px;
   padding-left: $gl-padding;
diff --git a/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss b/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss
index 41f9a8e6db7..c7aae77c412 100644
--- a/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss
+++ b/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss
@@ -12,6 +12,7 @@
   --ide-highlight-background: #252526;
   --ide-link-color: #428fdc;
   --ide-footer-background: #060606;
+  --ide-empty-state-background: var(--ide-border-color);
 
   --ide-input-border: #868686;
   --ide-input-background: transparent;
@@ -35,6 +36,13 @@
   --ide-btn-success-hover-border-width: 2px;
   --ide-btn-success-focus-box-shadow: 0 0 0 1px #2da160;
 
+  // Danger styles should be the same as default styles in dark theme
+  --ide-btn-danger-secondary-background: var(--ide-btn-default-background);
+  --ide-btn-danger-secondary-border: var(--ide-btn-default-border);
+  --ide-btn-danger-secondary-hover-border: var(--ide-btn-default-hover-border);
+  --ide-btn-danger-secondary-hover-border-width: var(--ide-btn-default-hover-border-width);
+  --ide-btn-danger-secondary-focus-box-shadow: var(--ide-btn-default-focus-box-shadow);
+
   --ide-btn-disabled-background: transparent;
   --ide-btn-disabled-border: rgba(223, 223, 223, 0.24);
   --ide-btn-disabled-hover-border: rgba(223, 223, 223, 0.24);
diff --git a/app/assets/stylesheets/page_bundles/ide_themes/_monokai.scss b/app/assets/stylesheets/page_bundles/ide_themes/_monokai.scss
new file mode 100644
index 00000000000..f53ace0b6c2
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/ide_themes/_monokai.scss
@@ -0,0 +1,66 @@
+// -------
+// Please see `app/assets/stylesheets/page_bundles/ide_themes/README.md` for a guide on contributing new themes
+// -------
+.ide.theme-monokai {
+  --ide-border-color: #1a1a18;
+  --ide-border-color-alt: #3f4237;
+  --ide-highlight-accent: #fff;
+  --ide-text-color: #ccc;
+  --ide-text-color-secondary: #b7b7b7;
+  --ide-background: #282822;
+  --ide-background-hover: #2d2d2d;
+  --ide-highlight-background: #1f1f1d;
+  --ide-link-color: #428fdc;
+  --ide-footer-background: #404338;
+  --ide-empty-state-background: #1a1a18;
+
+  --ide-input-border: #7d8175;
+  --ide-input-background: transparent;
+  --ide-input-color: #fff;
+
+  --ide-btn-default-background: transparent;
+  --ide-btn-default-border: #7d8175;
+  --ide-btn-default-hover-border: #b5bda5;
+  --ide-btn-default-hover-border-width: 2px;
+  --ide-btn-default-focus-box-shadow: 0 0 0 1px #bfbfbf;
+
+  --ide-btn-primary-background: #1068bf;
+  --ide-btn-primary-border: #428fdc;
+  --ide-btn-primary-hover-border: #63a6e9;
+  --ide-btn-primary-hover-border-width: 2px;
+  --ide-btn-primary-focus-box-shadow: 0 0 0 1px #63a6e9;
+
+  --ide-btn-success-background: #217645;
+  --ide-btn-success-border: #108548;
+  --ide-btn-success-hover-border: #2da160;
+  --ide-btn-success-hover-border-width: 2px;
+  --ide-btn-success-focus-box-shadow: 0 0 0 1px #2da160;
+
+  // Danger styles should be the same as default styles in dark theme
+  --ide-btn-danger-secondary-background: var(--ide-btn-default-background);
+  --ide-btn-danger-secondary-border: var(--ide-btn-default-border);
+  --ide-btn-danger-secondary-hover-border: var(--ide-btn-default-hover-border);
+  --ide-btn-danger-secondary-hover-border-width: var(--ide-btn-default-hover-border-width);
+  --ide-btn-danger-secondary-focus-box-shadow: var(--ide-btn-default-focus-box-shadow);
+
+  --ide-btn-disabled-background: transparent;
+  --ide-btn-disabled-border: rgba(223, 223, 223, 0.24);
+  --ide-btn-disabled-hover-border: rgba(223, 223, 223, 0.24);
+  --ide-btn-disabled-hover-border-width: 1px;
+  --ide-btn-disabled-focus-box-shadow: 0 0 0 0 transparent;
+  --ide-btn-disabled-color: rgba(145, 145, 145, 0.48);
+
+  --ide-dropdown-background: #36382f;
+  --ide-dropdown-hover-background: #404338;
+
+  --ide-dropdown-btn-hover-border: #b5bda5;
+  --ide-dropdown-btn-hover-background: #3f4237;
+
+  --ide-file-row-btn-hover-background: #404338;
+
+  --ide-diff-insert: rgba(155, 185, 85, 0.2);
+  --ide-diff-remove: rgba(255, 0, 0, 0.2);
+
+  --ide-animation-gradient-1: #404338;
+  --ide-animation-gradient-2: #36382f;
+}
diff --git a/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss b/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss
index ccb6f7a333b..1906b3ca938 100644
--- a/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss
+++ b/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss
@@ -12,6 +12,7 @@
   --ide-highlight-background: #003240;
   --ide-link-color: #73b9ff;
   --ide-footer-background: var(--ide-highlight-background);
+  --ide-empty-state-background: var(--ide-border-color);
 
   --ide-input-border: #d8d8d8;
   --ide-input-background: transparent;
@@ -35,6 +36,13 @@
   --ide-btn-success-hover-border-width: 2px;
   --ide-btn-success-focus-box-shadow: 0 0 0 1px #2da160;
 
+  // Danger styles should be the same as default styles in dark theme
+  --ide-btn-danger-secondary-background: var(--ide-btn-default-background);
+  --ide-btn-danger-secondary-border: var(--ide-btn-default-border);
+  --ide-btn-danger-secondary-hover-border: var(--ide-btn-default-hover-border);
+  --ide-btn-danger-secondary-hover-border-width: var(--ide-btn-default-hover-border-width);
+  --ide-btn-danger-secondary-focus-box-shadow: var(--ide-btn-default-focus-box-shadow);
+
   --ide-btn-disabled-background: transparent;
   --ide-btn-disabled-border: rgba(223, 223, 223, 0.24);
   --ide-btn-disabled-hover-border: rgba(223, 223, 223, 0.24);
diff --git a/app/assets/stylesheets/page_bundles/ide_themes/_solarized-light.scss b/app/assets/stylesheets/page_bundles/ide_themes/_solarized-light.scss
new file mode 100644
index 00000000000..315a0ae6202
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/ide_themes/_solarized-light.scss
@@ -0,0 +1,57 @@
+// -------
+// Please see `app/assets/stylesheets/page_bundles/ide_themes/README.md` for a guide on contributing new themes
+// -------
+.ide.theme-solarized-light {
+  --ide-border-color: #dfd7bf;
+  --ide-border-color-alt: #dfd7bf;
+  --ide-highlight-accent: #5c4e21;
+  --ide-text-color: #616161;
+  --ide-text-color-secondary: #526f76;
+  --ide-background: #efe8d3;
+  --ide-background-hover: #ded6be;
+  --ide-highlight-background: #fef6e1;
+  --ide-link-color: #955800;
+  --ide-footer-background: #efe8d3;
+  --ide-empty-state-background: #fef6e1;
+
+  --ide-input-border: #c0b9a4;
+  --ide-input-background: transparent;
+
+  --ide-btn-default-background: transparent;
+  --ide-btn-default-border: #c0b9a4;
+  --ide-btn-default-hover-border: #c0b9a4;
+
+  --ide-btn-primary-background: #b16802;
+  --ide-btn-primary-border: #a35f00;
+  --ide-btn-primary-hover-border: #955800;
+  --ide-btn-primary-hover-border-width: 2px;
+  --ide-btn-primary-focus-box-shadow: 0 0 0 1px #dd8101;
+
+  --ide-btn-danger-secondary-background: transparent;
+
+  --ide-btn-disabled-background: transparent;
+  --ide-btn-disabled-border: rgba(192, 185, 64, 0.48);
+  --ide-btn-disabled-hover-border: rgba(192, 185, 64, 0.48);
+  --ide-btn-disabled-hover-border-width: 1px;
+  --ide-btn-disabled-focus-box-shadow: transparent;
+  --ide-btn-disabled-color: rgba(82, 82, 82, 0.48);
+
+  --ide-dropdown-background: #fef6e1;
+  --ide-dropdown-hover-background: #efe8d3;
+
+  --ide-dropdown-btn-hover-border: #dfd7bf;
+  --ide-dropdown-btn-hover-background: #efe8d3;
+
+  --ide-file-row-btn-hover-background: #ded6be;
+
+  --ide-animation-gradient-1: #d3cbb3;
+  --ide-animation-gradient-2: #efe8d3;
+
+  .ide-empty-state,
+  .ide-sidebar,
+  .ide-commit-empty-state {
+    img {
+      filter: sepia(1) brightness(0.7);
+    }
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/jira_connect.scss b/app/assets/stylesheets/page_bundles/jira_connect.scss
index b8cdd120e04..c3e49da92a6 100644
--- a/app/assets/stylesheets/page_bundles/jira_connect.scss
+++ b/app/assets/stylesheets/page_bundles/jira_connect.scss
@@ -1,4 +1,6 @@
-@import 'framework/variables';
+@import 'mixins_and_variables_and_functions';
+// We should only import styles that we actually use.
+// @import '@gitlab/ui/src/scss/gitlab_ui';
 
 $atlaskit-border-color: #dfe1e6;
 
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 5553dffac05..be74503c21f 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -11,9 +11,19 @@
 }
 
 .diff-tree-list {
+  // This 11px value should match the additional value found in
+  //      /assets/stylesheets/framework/diffs.scss
+  // for the $mr-file-header-top SCSS variable within the
+  //      .file-title,
+  //      .file-title-flex-parent {
+  // rule.
+  // If they don't match, the file tree and the diff files stick
+  // to the top at different heights, which is a bad-looking defect
+  $diff-file-header-top: 11px;
+  $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + $diff-file-header-top;
+
   position: -webkit-sticky;
   position: sticky;
-  $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + 15px;
   top: $top-pos;
   max-height: calc(100vh - #{$top-pos});
   z-index: 202;
diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss
index 8e7be629481..1de66aa73da 100644
--- a/app/assets/stylesheets/page_bundles/pipeline.scss
+++ b/app/assets/stylesheets/page_bundles/pipeline.scss
@@ -482,3 +482,7 @@
     @include build-trace();
   }
 }
+
+.progress-bar.bg-primary {
+  background-color: $blue-500 !important;
+}
diff --git a/app/assets/stylesheets/page_bundles/pipeline_schedules.scss b/app/assets/stylesheets/page_bundles/pipeline_schedules.scss
new file mode 100644
index 00000000000..412971253ca
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/pipeline_schedules.scss
@@ -0,0 +1,68 @@
+@import 'mixins_and_variables_and_functions';
+
+.pipeline-schedule-form {
+  .gl-field-error {
+    margin: 10px 0 0;
+  }
+}
+
+.interval-pattern-form-group {
+  label {
+    margin-right: 10px;
+    font-weight: $gl-font-weight-normal;
+
+    &[for='custom'] {
+      margin-right: 0;
+    }
+  }
+
+  .cron-interval-input-wrapper {
+    padding-left: 0;
+  }
+
+  .cron-interval-input {
+    margin: 10px 10px 0 0;
+  }
+}
+
+.pipeline-schedule-table-row {
+  .branch-name-cell {
+    max-width: 300px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .next-run-cell {
+    color: var(--gray-500, $gray-500);
+  }
+
+  a {
+    color: var(--gl-text-color, $gl-text-color);
+  }
+
+  svg {
+    vertical-align: middle;
+  }
+}
+
+.pipeline-schedules-user-callout {
+  .bordered-box.content-block {
+    border: 1px solid var(--border-color, $border-color);
+    background-color: transparent;
+    padding: $gl-spacing-scale-5;
+  }
+}
+
+.cron-preset-radio-input {
+  display: inline-block;
+
+  @include media-breakpoint-down(md) {
+    display: block;
+    margin: 0 0 5px 5px;
+  }
+
+  input {
+    margin-right: 3px;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/pipelines.scss b/app/assets/stylesheets/page_bundles/pipelines.scss
index 6ff07017d2e..e0e56893afc 100644
--- a/app/assets/stylesheets/page_bundles/pipelines.scss
+++ b/app/assets/stylesheets/page_bundles/pipelines.scss
@@ -5,6 +5,10 @@
  * Pipelines Bundle: Pipeline lists and Mini Pipelines
  */
 
+.pipelines-container .top-area .nav-controls > .btn:last-child {
+  float: none;
+}
+
 // Pipelines list
 // Should affect pipelines table components rendered by:
 // - app/assets/javascripts/commit/pipelines/pipelines_bundle.js
diff --git a/app/assets/stylesheets/page_bundles/reports.scss b/app/assets/stylesheets/page_bundles/reports.scss
index 5a9dd454970..18ca5f9a3a9 100644
--- a/app/assets/stylesheets/page_bundles/reports.scss
+++ b/app/assets/stylesheets/page_bundles/reports.scss
@@ -8,14 +8,14 @@
 
   .report-block-list-issue-parent {
     padding: $gl-padding-top $gl-padding;
-    border-top: 1px solid $border-color;
+    border-top: 1px solid var(--border-color, $border-color);
   }
 }
 
 .report-block-container {
-  border-top: 1px solid $border-color;
+  border-top: 1px solid var(--border-color, $border-color);
   padding: $gl-padding - 2;
-  background-color: $gray-light;
+  background-color: var(--gray-50, $gray-10);
 
   // Clean MR widget CSS
   line-height: 20px;
diff --git a/app/assets/stylesheets/page_bundles/experimental_separate_sign_up.scss b/app/assets/stylesheets/page_bundles/signup.scss
index 337b5b001fe..9ed48b693b9 100644
--- a/app/assets/stylesheets/page_bundles/experimental_separate_sign_up.scss
+++ b/app/assets/stylesheets/page_bundles/signup.scss
@@ -1,27 +1,6 @@
 @import 'mixins_and_variables_and_functions';
 
 .signup-page {
-  .page-wrap {
-    background-color: var(--gray-10, $gray-10);
-  }
-
-  .signup-box-container {
-    max-width: 960px;
-  }
-
-  .signup-box {
-    background-color: var(--white, $white);
-    box-shadow: 0 0 0 1px var(--border-color, $border-color);
-    border-radius: $border-radius;
-  }
-
-  .form-control {
-    &:active,
-    &:focus {
-      background-color: var(--white, $white);
-    }
-  }
-
   .devise-errors {
     h2 {
       font-size: $gl-font-size;
diff --git a/app/assets/stylesheets/page_bundles/todos.scss b/app/assets/stylesheets/page_bundles/todos.scss
index 3eec5b53a30..3e20ca9c62f 100644
--- a/app/assets/stylesheets/page_bundles/todos.scss
+++ b/app/assets/stylesheets/page_bundles/todos.scss
@@ -219,7 +219,6 @@
 .todos-empty-content {
   align-self: center;
   max-width: 480px;
-  margin-right: 20px;
 }
 
 .todos-empty-hero {