Add latest changes from gitlab-org/gitlab@15-5-stable-eev15.5.0-rc42

71 files changed, 1342 insertions, 1735 deletions

diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss
index 9e81e1d4771..21d9db26382 100644
--- a/app/assets/stylesheets/_page_specific_files.scss
+++ b/app/assets/stylesheets/_page_specific_files.scss
@@ -1,13 +1,9 @@
 @import './pages/branches';
-@import './pages/clusters';
 @import './pages/colors';
 @import './pages/commits';
-@import './pages/deploy_keys';
 @import './pages/detail_page';
-@import './pages/environment_logs';
 @import './pages/events';
 @import './pages/groups';
-@import './pages/help';
 @import './pages/hierarchy';
 @import './pages/issuable';
 @import './pages/issues';
@@ -21,11 +17,8 @@
 @import './pages/pipelines';
 @import './pages/profile';
 @import './pages/projects';
-@import './pages/prometheus';
 @import './pages/registry';
 @import './pages/search';
-@import './pages/service_desk';
 @import './pages/settings';
 @import './pages/storage_quota';
-@import './pages/tree';
 @import './pages/users';
diff --git a/app/assets/stylesheets/bootstrap_migration_reset.scss b/app/assets/stylesheets/bootstrap_migration_reset.scss
index ad315c4ada1..fb112a2ee84 100644
--- a/app/assets/stylesheets/bootstrap_migration_reset.scss
+++ b/app/assets/stylesheets/bootstrap_migration_reset.scss
@@ -54,10 +54,6 @@ strong {
   font-weight: bold;
 }
 
-a {
-  color: $blue-600;
-}
-
 hr {
   overflow: hidden;
 }
diff --git a/app/assets/stylesheets/components/batch_comments/review_bar.scss b/app/assets/stylesheets/components/batch_comments/review_bar.scss
deleted file mode 100644
index 5e1128dc4ce..00000000000
--- a/app/assets/stylesheets/components/batch_comments/review_bar.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-.review-bar-component {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  z-index: $zindex-dropdown-menu;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: $toggle-sidebar-height;
-  padding-left: $contextual-sidebar-width;
-  padding-right: $gutter_collapsed_width;
-  background: $white;
-  border-top: 1px solid $border-color;
-  transition: padding $gl-transition-duration-medium;
-
-  .page-with-icon-sidebar & {
-    padding-left: $contextual-sidebar-collapsed-width;
-  }
-
-  .right-sidebar-expanded & {
-    padding-right: $gutter_width;
-  }
-
-  @media (max-width: map-get($grid-breakpoints, sm)-1) {
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  .dropdown {
-    margin-left: $grid-size;
-  }
-}
-
-.review-bar-content {
-  max-width: $limited-layout-width;
-  padding: 0 $gl-padding;
-  width: 100%;
-  margin: 0 auto;
-}
-
-.review-preview-item-header {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  margin-bottom: 4px;
-
-  > .bold {
-    display: flex;
-    min-width: 0;
-    line-height: 16px;
-  }
-}
-
-.review-preview-item-footer {
-  display: flex;
-  align-items: center;
-  margin-top: 4px;
-}
-
-.review-preview-item-content {
-  width: 100%;
-
-  p {
-    display: block;
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    margin-bottom: 0;
-  }
-}
diff --git a/app/assets/stylesheets/components/date_time_picker.scss b/app/assets/stylesheets/components/date_time_picker.scss
deleted file mode 100644
index 21f085cdaf1..00000000000
--- a/app/assets/stylesheets/components/date_time_picker.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.date-time-picker {
-  .date-time-picker-menu {
-    width: 400px;
-  }
-}
diff --git a/app/assets/stylesheets/components/design_management/design.scss b/app/assets/stylesheets/components/design_management/design.scss
deleted file mode 100644
index b8bd1000bfd..00000000000
--- a/app/assets/stylesheets/components/design_management/design.scss
+++ /dev/null
@@ -1,193 +0,0 @@
-$design-pin-diameter: 28px;
-$design-pin-diameter-sm: 24px;
-$t-gray-a-16-design-pin: rgba($black, 0.16);
-
-.layout-page.design-detail-layout {
-  max-height: 100vh;
-}
-
-.design-detail {
-  background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity);
-
-  .with-performance-bar & {
-    top: 35px;
-  }
-
-  .comment-indicator {
-    border-radius: 50%;
-  }
-
-  .comment-indicator,
-  .frame .design-note-pin {
-    &:active {
-      cursor: grabbing;
-    }
-  }
-}
-
-.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%;
-
-  .link-inherit-color {
-    &:hover,
-    &:active,
-    &:focus {
-      color: inherit;
-      text-decoration: none;
-    }
-  }
-
-  .toggle-comments {
-    line-height: 20px;
-    border-top: 1px solid $border-color;
-
-    &.expanded {
-      border-bottom: 1px solid $border-color;
-    }
-
-    .toggle-comments-button:focus {
-      text-decoration: none;
-      color: $blue-600;
-    }
-  }
-
-  .design-note-pin {
-    margin-left: $gl-padding;
-  }
-
-  .design-discussion {
-    margin: $gl-padding 0;
-
-    &::before {
-      content: '';
-      border-left: 1px solid $gray-100;
-      position: absolute;
-      left: 28px;
-      top: -17px;
-      height: 17px;
-    }
-
-    .design-note {
-      padding: $gl-padding;
-      list-style: none;
-      transition: background $gl-transition-duration-medium $general-hover-transition-curve;
-      border-top-left-radius: $border-radius-default; // same border radius used by .bordered-box
-      border-top-right-radius: $border-radius-default;
-
-      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-card-header {
-  background: transparent;
-}
-
-.design-note-pin {
-  display: flex;
-  height: $design-pin-diameter;
-  width: $design-pin-diameter;
-  box-sizing: content-box;
-  background-color: $purple-500;
-  color: $white;
-  font-weight: $gl-font-weight-bold;
-  border-radius: 50%;
-  z-index: 1;
-  padding: 0;
-  border: 0;
-
-  &.draft {
-    background-color: $orange-500;
-  }
-
-  &.resolved {
-    background-color: $gray-500;
-  }
-
-  &.on-image {
-    box-shadow: 0 2px 4px $t-gray-a-08, 0 0 1px $t-gray-a-24;
-    border: $white 2px solid;
-    will-change: transform, box-shadow, opacity;
-    // NOTE: verbose transition property required for Safari
-    transition: transform $general-hover-transition-duration linear, box-shadow $general-hover-transition-duration linear, opacity $general-hover-transition-duration linear;
-    transform-origin: 0 0;
-    transform: translate(-50%, -50%);
-
-    &:hover {
-      transform: scale(1.2) translate(-50%, -50%);
-    }
-
-    &:active {
-      box-shadow: 0 0 4px $t-gray-a-16-design-pin, 0 4px 12px $t-gray-a-16-design-pin;
-    }
-
-    &.inactive {
-      @include gl-opacity-5;
-
-      &:hover {
-        @include gl-opacity-10;
-      }
-    }
-  }
-
-  &.small {
-    position: absolute;
-    border: 1px solid $white;
-    height: $design-pin-diameter-sm;
-    width: $design-pin-diameter-sm;
-  }
-
-  &.user-avatar {
-    top: 25px;
-    right: 8px;
-  }
-}
diff --git a/app/assets/stylesheets/components/design_management/design_list_item.scss b/app/assets/stylesheets/components/design_management/design_list_item.scss
deleted file mode 100644
index 09af4da37e9..00000000000
--- a/app/assets/stylesheets/components/design_management/design_list_item.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.design-list-item {
-  height: 280px;
-  text-decoration: none;
-
-  .icon-version-status {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-  }
-
-  .card-body {
-    height: 230px;
-  }
-}
-
-// This is temporary class to be removed after feature flag removal: https://gitlab.com/gitlab-org/gitlab/-/issues/223197
-.design-list-item-new {
-  height: 210px;
-}
diff --git a/app/assets/stylesheets/components/feature_highlight.scss b/app/assets/stylesheets/components/feature_highlight.scss
deleted file mode 100644
index 4d301cc5617..00000000000
--- a/app/assets/stylesheets/components/feature_highlight.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.gl-sm-mr-3 {
-  @media (min-width: $breakpoint-sm) {
-    @include gl-mr-3;
-  }
-}
diff --git a/app/assets/stylesheets/components/milestone_combobox.scss b/app/assets/stylesheets/components/milestone_combobox.scss
deleted file mode 100644
index 94d295c324b..00000000000
--- a/app/assets/stylesheets/components/milestone_combobox.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.milestone-combobox {
-  .dropdown-menu.show {
-    overflow: hidden;
-  }
-}
diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss
index 3bb889b6ba0..293caf6fc87 100644
--- a/app/assets/stylesheets/components/related_items_list.scss
+++ b/app/assets/stylesheets/components/related_items_list.scss
@@ -75,19 +75,6 @@ $item-remove-button-space: 42px;
   }
 }
 
-.item-body,
-.card-header {
-  .health-label-short {
-    max-width: 0;
-  }
-}
-
-.card-header {
-  .health-label-short {
-    display: initial;
-  }
-}
-
 .item-meta {
   flex-basis: 100%;
   font-size: $gl-font-size;
@@ -212,11 +199,6 @@ $item-remove-button-space: 42px;
     max-width: 90%;
   }
 
-  .card-header {
-    .health-label-short {
-      max-width: 30px;
-    }
-  }
 }
 
 /* Small devices (landscape phones, 768px and up) */
@@ -239,11 +221,6 @@ $item-remove-button-space: 42px;
     }
   }
 
-  .card-header {
-    .health-label-short {
-      max-width: 60px;
-    }
-  }
 }
 
 /* Medium devices (desktops, 992px and up) */
@@ -257,12 +234,6 @@ $item-remove-button-space: 42px;
       font-size: inherit; // Base size given to `item-meta` is `$gl-font-size-small`
     }
   }
-
-  .card-header {
-    .health-label-short {
-      max-width: 100px;
-    }
-  }
 }
 
 /* Large devices (large desktops, 1200px and up) */
@@ -309,15 +280,3 @@ $item-remove-button-space: 42px;
     flex-basis: auto;
   }
 }
-
-@media only screen and (min-width: 1500px) {
-  .card-header {
-    .health-label-short {
-      display: none;
-    }
-
-    .health-label-long {
-      display: block;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/components/release_block.scss b/app/assets/stylesheets/components/release_block.scss
deleted file mode 100644
index 7e82d0960d7..00000000000
--- a/app/assets/stylesheets/components/release_block.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.release-block {
-  transition: background-color 1s linear;
-}
diff --git a/app/assets/stylesheets/pages/help.scss b/app/assets/stylesheets/components/shortcuts_help.scss
index 9182292ffd3..ea2281538b4 100644
--- a/app/assets/stylesheets/pages/help.scss
+++ b/app/assets/stylesheets/components/shortcuts_help.scss
@@ -27,14 +27,3 @@
     }
   }
 }
-
-.documentation {
-  padding: 7px;
-  font-size: $gl-font-size-large;
-}
-
-.card.links-card {
-  a {
-    color: $blue-600;
-  }
-}
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index e977fb92928..07db6b3c147 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -42,7 +42,6 @@
 @import 'framework/notes';
 @import 'framework/tabs';
 @import 'framework/timeline';
-@import 'framework/toggle';
 @import 'framework/typography';
 @import 'framework/zen';
 @import 'framework/wells';
@@ -54,14 +53,11 @@
 @import 'framework/emojis';
 @import 'framework/icons';
 @import 'framework/snippets';
-@import 'framework/memory_graph';
 @import 'framework/responsive_tables';
 @import 'framework/stacked_progress_bar';
 @import 'framework/sortable';
-@import 'framework/ci_variable_list';
 @import 'framework/feature_highlight';
 @import 'framework/read_more';
-@import 'framework/flex_grid';
 @import 'framework/system_messages';
 @import 'framework/spinner';
 @import 'framework/card';
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index f947042ba51..799777977ed 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -66,7 +66,6 @@
   }
 
   &.content-component-block {
-    padding: 8px 0;
     background-color: $body-bg;
   }
 
diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss
index b1e5ca50a8b..e69d7b4462d 100644
--- a/app/assets/stylesheets/framework/calendar.scss
+++ b/app/assets/stylesheets/framework/calendar.scss
@@ -1,9 +1,17 @@
 .user-contrib-cell {
+  stroke: $t-gray-a-08;
+
   &:hover {
     cursor: pointer;
     stroke: $black;
   }
 
+  &:focus {
+    @include gl-outline-none;
+    stroke: $white;
+    filter: drop-shadow(1px 0 0.5px $blue-400) drop-shadow(0 1px 0.5px $blue-400) drop-shadow(-1px 0 0.5px $blue-400) drop-shadow(0 -1px 0.5px $blue-400);
+  }
+
   // `app/assets/javascripts/pages/users/activity_calendar.js` sets this attribute
   @for $i from 1 through length($calendar-activity-colors) {
     $color: nth($calendar-activity-colors, $i);
diff --git a/app/assets/stylesheets/framework/ci_variable_list.scss b/app/assets/stylesheets/framework/ci_variable_list.scss
deleted file mode 100644
index ef4355ad157..00000000000
--- a/app/assets/stylesheets/framework/ci_variable_list.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-.ci-variable-list {
-  margin-left: 0;
-  margin-bottom: 0;
-  padding-left: 0;
-  list-style: none;
-  clear: both;
-}
-
-.ci-variable-row {
-  display: flex;
-  align-items: flex-start;
-
-  @include media-breakpoint-down(xs) {
-    align-items: flex-end;
-  }
-
-  &:not(:last-child) {
-    margin-bottom: $gl-btn-padding;
-
-    @include media-breakpoint-down(xs) {
-      margin-bottom: 3 * $gl-btn-padding;
-    }
-  }
-
-  &:last-child {
-    .ci-variable-body-item:last-child {
-      margin-right: $ci-variable-remove-button-width;
-
-      @include media-breakpoint-down(xs) {
-        margin-right: 0;
-      }
-    }
-
-    .ci-variable-row-remove-button {
-      display: none;
-    }
-
-    @include media-breakpoint-down(xs) {
-      .ci-variable-row-body {
-        margin-right: $ci-variable-remove-button-width;
-      }
-    }
-  }
-}
-
-.ci-variable-row-body {
-  display: flex;
-  align-items: flex-start;
-  width: 100%;
-  padding-bottom: $gl-padding;
-
-  @include media-breakpoint-down(xs) {
-    display: block;
-  }
-}
-
-.ci-variable-body-item {
-  flex: 1;
-
-  &:not(:last-child) {
-    margin-right: $gl-btn-padding;
-
-    @include media-breakpoint-down(xs) {
-      margin-right: 0;
-      margin-bottom: $gl-btn-padding;
-    }
-  }
-}
-
-.ci-variable-masked-item,
-.ci-variable-protected-item {
-  flex: 0 1 auto;
-  display: flex;
-  align-items: center;
-  padding-top: 5px;
-  padding-bottom: 5px;
-}
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index 8d1fb5eb55f..f7cd5d7e183 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -43,7 +43,7 @@
       z-index: 120;
 
       &.is-sidebar-moved {
-        --initial-top: calc(#{$header-height} + #{$mr-tabs-height + 28px});
+        --initial-top: calc(#{$header-height} + #{$mr-tabs-height + 24px});
       }
 
       .with-system-header & {
@@ -578,78 +578,6 @@ table.code {
   }
 }
 
-// Merge request diff grid layout
-.diff-grid {
-  .diff-td {
-    // By default min-width is auto with 1fr which causes some overflow problems
-    // https://gitlab.com/gitlab-org/gitlab/-/issues/296222
-    min-width: 0;
-  }
-
-  .diff-grid-row {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-
-    &.diff-grid-row-full {
-      grid-template-columns: 1fr;
-    }
-  }
-
-  .diff-grid-left,
-  .diff-grid-right {
-    display: grid;
-    // Zero width column is a placeholder for the EE inline code quality diff
-    // see ee/.../diffs.scss for more details
-    grid-template-columns: 50px 8px 0 1fr;
-  }
-
-  .diff-grid-2-col {
-    grid-template-columns: 100px 1fr !important;
-
-    &.parallel {
-      grid-template-columns: 50px 1fr !important;
-    }
-  }
-
-  .diff-grid-comments {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .diff-grid-drafts {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-  }
-
-  &.inline-diff-view {
-    .diff-grid-comments {
-      display: grid;
-      grid-template-columns: 1fr;
-    }
-
-    .diff-grid-drafts {
-      display: grid;
-      grid-template-columns: 1fr;
-    }
-
-    .diff-grid-row {
-      grid-template-columns: 1fr;
-    }
-
-    .diff-grid-left,
-    .diff-grid-right {
-      // Zero width column is a placeholder for the EE inline code quality diff
-      // see ee/../diffs.scss for more details
-      grid-template-columns: 50px 50px 8px 0 1fr;
-    }
-  }
-}
-
-// Merge request diff grid layout overrides
-.diff-table.code .diff-tr.line_holder .diff-td.line_content.parallel {
-  width: unset;
-}
-
 .diff-stats {
   align-items: center;
   padding: 0 1rem;
@@ -730,68 +658,6 @@ table.code {
   }
 }
 
-.diff-comment-avatar-holders {
-  position: absolute;
-  margin-left: -$gl-padding;
-  z-index: 100;
-  @include code-icon-size();
-
-  &:hover {
-    .diff-comment-avatar,
-    .diff-comments-more-count {
-      @for $i from 1 through 4 {
-        $x-pos: 14px;
-
-        &:nth-child(#{$i}) {
-          @if $i == 4 {
-            $x-pos: 14.5px;
-          }
-
-          transform: translateX((($i * $x-pos) - $x-pos));
-
-          &:hover {
-            transform: translateX((($i * $x-pos) - $x-pos));
-          }
-        }
-      }
-    }
-
-    .diff-comments-more-count {
-      padding-left: 2px;
-      padding-right: 2px;
-      width: auto;
-    }
-  }
-}
-
-.diff-comment-avatar,
-.diff-comments-more-count {
-  position: absolute;
-  left: 0;
-  margin-right: 0;
-  border-color: $white;
-  cursor: pointer;
-  transition: all 0.1s ease-out;
-  @include code-icon-size();
-
-  @for $i from 1 through 4 {
-    &:nth-child(#{$i}) {
-      z-index: (4 - $i);
-    }
-  }
-
-  .avatar {
-    @include code-icon-size();
-  }
-}
-
-.diff-comments-more-count {
-  padding-left: 0;
-  padding-right: 0;
-  overflow: hidden;
-  @include code-icon-size();
-}
-
 .diff-comments-more-count,
 .diff-notes-collapse,
 .diff-codequality-collapse {
@@ -867,70 +733,6 @@ table.code {
   }
 }
 
-
-.diff-file-changes {
-  max-width: 560px;
-  width: 100%;
-  z-index: 150;
-  min-height: $dropdown-min-height;
-  max-height: $dropdown-max-height;
-  overflow-y: auto;
-  margin-bottom: 0;
-
-  @include media-breakpoint-up(sm) {
-    left: $gl-padding;
-  }
-
-  .dropdown-input .dropdown-input-search {
-    pointer-events: all;
-  }
-
-  .diff-changed-file {
-    display: flex;
-    padding-top: 8px;
-    padding-bottom: 8px;
-    min-width: 0;
-  }
-
-  .diff-file-changed-icon {
-    margin-top: 2px;
-  }
-
-  .diff-changed-file-content {
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-  }
-
-  .diff-changed-file-name,
-  .diff-changed-blank-file-name {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .diff-changed-blank-file-name {
-    color: $gl-text-color-tertiary;
-    font-style: italic;
-  }
-
-  .diff-changed-file-path {
-    color: $gl-text-color-tertiary;
-  }
-
-  .diff-changed-stats {
-    margin-left: auto;
-    white-space: nowrap;
-  }
-}
-
-.diff-file-changes-path {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .note-container {
   background-color: $gray-light;
   border-top: 1px solid $white-normal;
@@ -1007,27 +809,6 @@ table.code {
   }
 }
 
-// Notes tweaks for the Changes tab ONLY
-.diff-tr {
-  .timeline-discussion-body {
-    clear: left;
-
-    .note-body {
-      margin-top: 0 !important;
-    }
-  }
-
-  .timeline-entry img.avatar {
-    margin-top: -2px;
-    margin-right: $gl-padding-8;
-  }
-
-  // tiny adjustment to vertical align with the note header text
-  .discussion-collapsible .timeline-icon {
-    padding-top: 2px;
-  }
-}
-
 .files:not([data-can-create-note]) .frame {
   cursor: auto;
 }
@@ -1097,6 +878,7 @@ table.code {
 
 .discussion-notes {
   min-height: 35px;
+  background-color: transparent;
 
   &:first-child {
     // First child does not have the jagged borders
@@ -1121,6 +903,17 @@ table.code {
       display: none;
     }
   }
+
+  ul.notes {
+    li.toggle-replies-widget,
+    .discussion-reply-holder {
+      margin-left: 2.5rem;
+
+      .reply-author-avatar {
+        height: 1.5rem;
+      }
+    }
+  }
 }
 
 .discussion-body .image .frame {
@@ -1183,9 +976,15 @@ table.code {
   bottom: 100vh;
 }
 
-.diff-line-expand-button {
-  &:hover,
-  &:focus {
-    @include gl-bg-gray-200;
+.diff-grid-row.expansion.match {
+  border-top: 1px solid var(--diff-expansion-background-color);
+  border-bottom: 1px solid var(--diff-expansion-background-color);
+
+  &:first-child {
+    border-top: 0;
+  }
+
+  &:last-child {
+    border-bottom: 0;
   }
 }
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index d91524d99e6..d561a7d9450 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -469,6 +469,7 @@
   .sidebar-participant {
     .merge-icon {
       top: calc(50% + 5px);
+      left: 3rem;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss
index b51daf0e4dc..b63365e8159 100644
--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -46,12 +46,14 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25);
   .flash-notice,
   .flash-success,
   .flash-warning {
-    padding: $gl-padding $gl-padding-32 $gl-padding ($gl-padding + $gl-padding-4);
-    margin-top: 10px;
-
-    .container-fluid,
-    .container-fluid.container-limited {
-      background: transparent;
+    &:not(.gl-alert) {
+      padding: $gl-padding $gl-padding-32 $gl-padding ($gl-padding + $gl-padding-4);
+      margin-top: 10px;
+
+      .container-fluid,
+      .container-fluid.container-limited {
+        background: transparent;
+      }
     }
   }
 
@@ -79,6 +81,19 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25);
   .gl-alert {
     @include gl-my-4;
   }
+
+  &.flash-container-no-margin {
+    .gl-alert {
+      @include gl-my-0;
+    }
+
+    .flash-alert,
+    .flash-notice,
+    .flash-success,
+    .flash-warning {
+      @include gl-mt-0;
+    }
+  }
 }
 
 @include media-breakpoint-down(sm) {
diff --git a/app/assets/stylesheets/framework/flex_grid.scss b/app/assets/stylesheets/framework/flex_grid.scss
deleted file mode 100644
index 10537fd5549..00000000000
--- a/app/assets/stylesheets/framework/flex_grid.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-.flex-grid {
-  .grid-row {
-    border-bottom: 1px solid $border-color;
-    padding: 0;
-
-    &:last-child {
-      border-bottom: 0;
-    }
-
-    @include media-breakpoint-down(md) {
-      border-bottom: 0;
-      border-right: 1px solid $border-color;
-
-      &:last-child {
-        border-right: 0;
-      }
-    }
-
-    @include media-breakpoint-down(xs) {
-      border-right: 0;
-      border-bottom: 1px solid $border-color;
-
-      &:last-child {
-        border-bottom: 0;
-      }
-    }
-  }
-
-  .grid-cell {
-    padding: 10px $gl-padding;
-    border-right: 1px solid $border-color;
-
-    &:last-child {
-      border-right: 0;
-    }
-
-    @include media-breakpoint-up(md) {
-      flex: 1;
-    }
-
-    @include media-breakpoint-down(md) {
-      border-right: 0;
-      flex: none;
-    }
-  }
-}
-
-.card {
-  .card-body.flex-grid {
-    padding: 0;
-  }
-}
diff --git a/app/assets/stylesheets/framework/gfm.scss b/app/assets/stylesheets/framework/gfm.scss
index 40e11b50eba..66d163f608a 100644
--- a/app/assets/stylesheets/framework/gfm.scss
+++ b/app/assets/stylesheets/framework/gfm.scss
@@ -8,13 +8,15 @@
   font-size: 95%;
 }
 
-.gfm-project_member {
+.gfm-project_member,
+.md a.gfm-project_member {
   padding: 0 2px;
   background-color: $blue-100;
   border-radius: $border-radius-default;
+  color: $blue-700;
 
   &.current-user {
-    background-color: $orange-50;
+    background-color: $orange-100;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index d2bb1e3d555..e9a507ebb6b 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -109,12 +109,6 @@ ul.content-list {
     color: $gl-text-color;
     word-break: break-word;
 
-    &.no-description {
-      .title {
-        line-height: $list-text-height;
-      }
-    }
-
     .title {
       font-weight: $gl-font-weight-bold;
     }
@@ -221,6 +215,7 @@ ul.content-list {
   }
 }
 
+ul.content-list.content-list-items-padding > li,
 ul.content-list.issuable-list > li,
 ul.content-list.todos-list > li,
 .card > .content-list > li {
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index b623f18c4ae..c40cadafb9c 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -44,12 +44,6 @@
   }
 }
 
-.div-dropzone-alert {
-  margin-top: 5px;
-  margin-bottom: 0;
-  transition: opacity 200ms ease-in-out;
-}
-
 .md-header {
   .nav-links {
     a {
@@ -155,8 +149,16 @@
 .md-suggestion-diff {
   display: table !important;
   border: 1px solid $border-color !important;
-  width: 100% !important;
-  font-family: $monospace-font !important;
+
+  td {
+    border: 0 !important;
+  }
+
+  tr.old {
+    td {
+      border-radius: 0 !important;
+    }
+  }
 }
 
 .suggestions.md > .markdown-code-block {
@@ -164,23 +166,12 @@
 }
 
 .md-suggestion-header {
-  height: $suggestion-header-height;
   display: flex;
   align-items: center;
   justify-content: space-between;
   background-color: $gray-light;
   border: 1px solid $border-color;
-  padding: $gl-padding;
   border-radius: $border-radius-default $border-radius-default 0 0;
-
-  svg {
-    vertical-align: middle;
-    margin-bottom: 3px;
-  }
-
-  .dropdown-chevron {
-    margin-bottom: 0;
-  }
 }
 
 @include media-breakpoint-down(xs) {
diff --git a/app/assets/stylesheets/framework/memory_graph.scss b/app/assets/stylesheets/framework/memory_graph.scss
deleted file mode 100644
index 510969e149a..00000000000
--- a/app/assets/stylesheets/framework/memory_graph.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.memory-graph-container {
-  background: $white;
-  border: 1px solid $gray-100;
-}
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index f39d53c5b1c..8b2a494527b 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -4,22 +4,6 @@
 }
 
 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 following areas:
-  * - The subscription seats table. When removing this code, the .seats-table
-  *   <th> and margin overrides should be removed there.
-  *
-  * Remove this code as soon as this happens
-  *
-  */
-  &.gl-table {
-    @include gl-text-gray-500;
-  }
-
   &.table {
     .thead-white {
       th {
diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index 43effbdd7d7..32e9bba8712 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -28,15 +28,9 @@
 .timeline-entry {
   color: $gl-text-color;
 
-  // [dark-theme]: only give background color to actual notes
-  // in the timeline, the note form textarea has a background
-  // of it's own
-  &:not(.note-form) {
-    background-color: $white;
-  }
-
-  &:not(.note-form).internal-note {
-    background-color: $orange-50;
+  &:not(.note-form).internal-note .timeline-content,
+  &:not(.note-form).draft-note .timeline-content {
+    background-color: $orange-50 !important;
   }
 
   .timeline-entry-inner {
@@ -45,23 +39,15 @@
 
   &:target,
   &.target {
-    background: $line-target-blue;
+    .timeline-content {
+      background: $line-target-blue !important;
+    }
 
     &.system-note .note-body .note-text.system-note-commit-list::after {
       background: linear-gradient(rgba($line-target-blue, 0.1) -100px, $line-target-blue 100%);
     }
   }
 
-  img.avatar {
-    margin-right: $gl-padding-12;
-
-    @include media-breakpoint-down(sm) {
-      width: $gl-spacing-scale-6;
-      height: $gl-spacing-scale-6;
-      margin-right: $gl-padding-8;
-    }
-  }
-
   .controls {
     padding-top: 10px;
     float: right;
diff --git a/app/assets/stylesheets/framework/toggle.scss b/app/assets/stylesheets/framework/toggle.scss
deleted file mode 100644
index fd888fdec65..00000000000
--- a/app/assets/stylesheets/framework/toggle.scss
+++ /dev/null
@@ -1,131 +0,0 @@
-/**
-* Toggle button
-*
-* @usage
-*  ### Active and Inactive text should be provided as data attributes:
-*  <button type="button" class="project-feature-toggle" data-enabled-text="Enabled" data-disabled-text="Disabled">
-*  <span class="gl-spinner loading-icon hidden" aria-label="Loading"></span>
-*  </button>
-
-*  ### Checked should have `is-checked` class
-*  <button type="button" class="project-feature-toggle is-checked" data-enabled-text="Enabled" data-disabled-text="Disabled">
-*  <span class="gl-spinner loading-icon hidden" aria-label="Loading"></span>
-*  </button>
-
-*  ### Disabled should have `is-disabled` class
-*  <button type="button" class="project-feature-toggle is-disabled" data-enabled-text="Enabled" data-disabled-text="Disabled" disabled="true">
-*  <span class="gl-spinner loading-icon hidden" aria-label="Loading"></span>
-*  </button>
-
-*  ### Loading should have `is-loading` and an icon with `loading-icon` class
-*  <button type="button" class="project-feature-toggle is-loading" data-enabled-text="Enabled" data-disabled-text="Disabled">
-*  <span class="gl-spinner loading-icon" aria-label="Loading"></span>
-*  </button>
-*/
-.project-feature-toggle {
-  position: relative;
-  border: 0;
-  outline: 0;
-  display: block;
-  width: 50px;
-  height: 24px;
-  cursor: pointer;
-  user-select: none;
-  background: $gray-400;
-  border-radius: 12px;
-  padding: 3px;
-  transition: all 0.4s ease;
-
-  &::selection,
-  &::before::selection,
-  &::after::selection {
-    background: none;
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  .toggle-icon {
-    position: relative;
-    display: block;
-    left: 0;
-    border-radius: 9px;
-    background: $white;
-    transition: all 0.2s ease;
-    width: $default-icon-size;
-    height: $default-icon-size;
-  }
-
-  .loading-icon {
-    display: none;
-    font-size: 12px;
-    color: $white;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  &.is-loading {
-    .loading-icon {
-      display: block;
-
-      &::before {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-      }
-    }
-  }
-
-  &.is-checked {
-    background: $blue-400;
-
-    .toggle-icon {
-      left: calc(100% - 18px);
-    }
-  }
-
-  &.is-checked .toggle-icon .toggle-status-checked,
-  .toggle-icon .toggle-status-unchecked {
-    display: inline;
-  }
-
-  &.is-checked .toggle-icon .toggle-status-unchecked,
-  &.is-loading .toggle-icon,
-  .toggle-icon .toggle-status-checked {
-    display: none;
-  }
-
-  &.is-disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  @include media-breakpoint-down(xs) {
-    width: 50px;
-
-    &::before,
-    &.is-checked::before {
-      display: none;
-    }
-  }
-
-  @keyframes animate-enabled {
-    0%,
-
-    35% { opacity: 0; }
-
-    100% { opacity: 1; }
-  }
-
-  @keyframes animate-disabled {
-    0%,
-
-    35% { opacity: 0; }
-
-    100% { opacity: 1; }
-  }
-}
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index e79fb843967..2c2d8a2b592 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -33,14 +33,6 @@
     }
   }
 
-  a {
-    color: $blue-600;
-
-    > code {
-      color: $blue-600;
-    }
-  }
-
   .media-container {
     display: inline-flex;
     flex-direction: column;
@@ -717,10 +709,6 @@ textarea.js-gfm-input {
   font-size: $gl-font-size-monospace;
 }
 
-.strikethrough {
-  text-decoration: line-through;
-}
-
 h1,
 h2,
 h3,
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index bd32a817d5d..9cfc5a0201e 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -382,6 +382,8 @@ $gl-text-color-quaternary: #d6d6d6;
 $gl-text-color-inverted: $white;
 $gl-text-color-secondary-inverted: rgba($white, 0.85);
 $gl-text-color-disabled: $gray-400;
+$link-color: $blue-500 !default;
+$link-hover-color: $blue-500 !default;
 $gl-grayish-blue: #7f8fa4;
 $gl-header-color: #4c4e54;
 $gl-font-size-12: 12px;
@@ -440,7 +442,6 @@ $browser-scrollbar-size: 10px;
 $header-height: var(--header-height, 48px);
 $header-zindex: 1000;
 $zindex-dropdown-menu: 300;
-$suggestion-header-height: 46px;
 $ide-statusbar-height: 25px;
 $fixed-layout-width: 1280px;
 $limited-layout-width: 990px;
@@ -650,14 +651,6 @@ $calendar-border-color: rgba(#000, 0.1);
 $calendar-user-contrib-text: #959494;
 
 /*
- *  Value Stream Analytics
- */
-$cycle-analytics-box-padding: 30px;
-$cycle-analytics-box-text-color: #8c8c8c;
-$cycle-analytics-big-font: 19px;
-$cycle-analytics-dismiss-icon-color: #b2b2b2;
-
-/*
 * CI
 */
 $ci-skipped-color: #888;
@@ -717,11 +710,11 @@ $job-arrow-margin: 55px;
  */
 // See https://gitlab.com/gitlab-org/gitlab/-/issues/332150 to align with Pajamas Design System
 $calendar-activity-colors: (
-  #ededed,
-  #acd5f2,
-  #7fa8c9,
-  #527ba0,
-  #254e77,
+  #f5f5f5,
+  #d4dcfa,
+  #748eff,
+  #3547de,
+  #11118a,
 ) !default;
 
 /*
diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss
index cfd215b81b8..cb9c623c8fc 100644
--- a/app/assets/stylesheets/framework/wells.scss
+++ b/app/assets/stylesheets/framework/wells.scss
@@ -70,15 +70,6 @@
   }
 }
 
-.light-well {
-  background-color: $gray-light;
-  padding: 15px;
-}
-
-.dark-well {
-  background-color: $gray-normal;
-}
-
 .card.card-body-centered {
   h1 {
     font-weight: $gl-font-weight-normal;
diff --git a/app/assets/stylesheets/highlight/themes/dark.scss b/app/assets/stylesheets/highlight/themes/dark.scss
index 5e6e10e44be..7fb2bf9a875 100644
--- a/app/assets/stylesheets/highlight/themes/dark.scss
+++ b/app/assets/stylesheets/highlight/themes/dark.scss
@@ -175,6 +175,8 @@ $dark-il: #de935f;
     }
 
     &.diff-grid-row {
+      --diff-expansion-background-color: #{$gray-600};
+
       @include dark-diff-expansion-line;
     }
 
diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss
index 19c3d6926e7..66cada9181c 100644
--- a/app/assets/stylesheets/highlight/themes/monokai.scss
+++ b/app/assets/stylesheets/highlight/themes/monokai.scss
@@ -168,6 +168,8 @@ $monokai-gh: #75715e;
     }
 
     &.diff-grid-row {
+      --diff-expansion-background-color: #{$gray-600};
+
       @include dark-diff-expansion-line;
     }
 
diff --git a/app/assets/stylesheets/highlight/themes/none.scss b/app/assets/stylesheets/highlight/themes/none.scss
index 4c716d20ddf..fa1f7211b3e 100644
--- a/app/assets/stylesheets/highlight/themes/none.scss
+++ b/app/assets/stylesheets/highlight/themes/none.scss
@@ -76,6 +76,10 @@
       @include match-line;
     }
 
+    &.diff-grid-row {
+      --diff-expansion-background-color: #{$gray-100};
+    }
+
     .line-coverage {
       @include line-coverage-border-color($green-500, $orange-500);
     }
diff --git a/app/assets/stylesheets/highlight/themes/solarized-dark.scss b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
index 70086be1606..a1bba8720a2 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
@@ -171,6 +171,8 @@ $solarized-dark-il: #2aa198;
     }
 
     &.diff-grid-row {
+      --diff-expansion-background-color: #{lighten($solarized-dark-pre-bg, 10%)};
+
       @include dark-diff-expansion-line;
     }
 
diff --git a/app/assets/stylesheets/highlight/themes/solarized-light.scss b/app/assets/stylesheets/highlight/themes/solarized-light.scss
index 8d223d1fdb1..33945f7cda9 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-light.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-light.scss
@@ -156,6 +156,10 @@ $solarized-light-il: #2aa198;
       @include match-line;
     }
 
+    &.diff-grid-row {
+      --diff-expansion-background-color: #{$gray-100};
+    }
+
     &.diff-grid-row.expansion .diff-td {
       background-color: $solarized-light-matchline-bg;
     }
diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss
index 9761e3961dd..816aa88cfde 100644
--- a/app/assets/stylesheets/highlight/white_base.scss
+++ b/app/assets/stylesheets/highlight/white_base.scss
@@ -154,6 +154,8 @@ pre.code,
   }
 
   &.diff-grid-row {
+    --diff-expansion-background-color: #{$gray-100};
+
     @include diff-match-line;
   }
 
diff --git a/app/assets/stylesheets/lazy_bundles/gridstack.scss b/app/assets/stylesheets/lazy_bundles/gridstack.scss
new file mode 100644
index 00000000000..235b225d747
--- /dev/null
+++ b/app/assets/stylesheets/lazy_bundles/gridstack.scss
@@ -0,0 +1 @@
+@import 'gridstack/dist/gridstack';
diff --git a/app/assets/stylesheets/page_bundles/admin/geo_nodes.scss b/app/assets/stylesheets/page_bundles/admin/geo_nodes.scss
new file mode 100644
index 00000000000..b0aaa48569a
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/admin/geo_nodes.scss
@@ -0,0 +1,45 @@
+@import '../mixins_and_variables_and_functions';
+
+.geo-node-header-grid-columns {
+  grid-template-columns: 1fr auto;
+  grid-gap: $gl-spacing-scale-5;
+
+  @include media-breakpoint-up(md) {
+    grid-template-columns: 3fr 1fr;
+  }
+}
+
+.geo-node-details-grid-columns {
+  grid-gap: $gl-spacing-scale-5;
+
+  @include media-breakpoint-up(lg) {
+    grid-template-columns: 1fr 3fr;
+  }
+}
+
+.geo-node-core-details-grid-columns {
+  grid-template-columns: 1fr 1fr;
+  grid-gap: $gl-spacing-scale-5;
+}
+
+.geo-node-replication-details-grid-columns {
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 1rem;
+
+  @include media-breakpoint-up(md) {
+    grid-template-columns: 1fr 1fr 2fr 2fr;
+  }
+}
+
+.geo-node-filter-grid-columns {
+  grid-template-columns: 1fr;
+
+  @include media-breakpoint-up(md) {
+    grid-template-columns: 3fr 1fr;
+  }
+}
+
+.geo-node-replication-counts-grid {
+  grid-template-columns: 2fr 1fr 1fr;
+  grid-gap: 1rem;
+}
diff --git a/app/assets/stylesheets/page_bundles/admin/geo_replicable.scss b/app/assets/stylesheets/page_bundles/admin/geo_replicable.scss
new file mode 100644
index 00000000000..691d4abd195
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/admin/geo_replicable.scss
@@ -0,0 +1,18 @@
+@import '../mixins_and_variables_and_functions';
+
+.geo-replicable-item-grid {
+  grid-template-columns: 8ch 1fr auto;
+  grid-gap: 1rem;
+}
+
+.geo-replicable-filter-grid {
+  grid-template-columns: 1fr;
+
+  @include media-breakpoint-up(md) {
+    grid-template-columns: 2fr 1fr;
+  }
+
+  @include media-breakpoint-up(xl) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/cluster_agents.scss b/app/assets/stylesheets/page_bundles/cluster_agents.scss
new file mode 100644
index 00000000000..d1fab55738f
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/cluster_agents.scss
@@ -0,0 +1,13 @@
+@import 'mixins_and_variables_and_functions';
+
+.agent-activity-list {
+  .system-note .timeline-entry-inner {
+    .timeline-icon {
+      @include gl-mt-1;
+    }
+  }
+
+  .timeline-entry::before {
+    @include gl-mt-4;
+  }
+}
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/page_bundles/clusters.scss
index 27d81d8e53b..a877ae72e31 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/page_bundles/clusters.scss
@@ -1,3 +1,5 @@
+@import 'mixins_and_variables_and_functions';
+
 .clusters-container {
   @include media-breakpoint-down(xs) {
     .nav-controls {
@@ -18,15 +20,3 @@
     min-height: 372px;
   }
 }
-
-.agent-activity-list {
-  .system-note .timeline-entry-inner {
-    .timeline-icon {
-      @include gl-mt-1;
-    }
-  }
-
-  &.issuable-discussion .main-notes-list::before {
-    @include gl-top-3;
-  }
-}
diff --git a/app/assets/stylesheets/page_bundles/graph_charts.scss b/app/assets/stylesheets/page_bundles/graph_charts.scss
new file mode 100644
index 00000000000..37a75f92a7e
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/graph_charts.scss
@@ -0,0 +1,27 @@
+@import 'page_bundles/mixins_and_variables_and_functions';
+
+.repo-charts {
+  .sub-header {
+    margin: 20px 0;
+  }
+
+  .sub-header-block.border-top {
+    margin-top: 20px;
+    padding: 0;
+    border-top: 1px solid var(--border-color, $border-color);
+    border-bottom: 0;
+  }
+
+  .commit-stats li {
+    font-size: 16px;
+  }
+
+  .tree-ref-header {
+    margin-bottom: 20px;
+
+    h4 {
+      margin: 0;
+      line-height: 36px;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index a4a82fdcef3..3951f72112f 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -970,9 +970,6 @@ $ide-commit-header-height: 48px;
 
 .ide-stage {
   .card-header {
-    display: flex;
-    cursor: pointer;
-
     .ci-status-icon {
       display: flex;
       align-items: center;
@@ -980,10 +977,6 @@ $ide-commit-header-height: 48px;
   }
 }
 
-.ide-stage-collapse-icon {
-  margin: auto 0 auto auto;
-}
-
 .ide-job-header {
   min-height: 60px;
   padding: 0 $gl-padding;
diff --git a/app/assets/stylesheets/page_bundles/incidents.scss b/app/assets/stylesheets/page_bundles/incidents.scss
new file mode 100644
index 00000000000..de246fa14b9
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/incidents.scss
@@ -0,0 +1,73 @@
+@import 'mixins_and_variables_and_functions';
+
+.issuable-discussion.incident-timeline-events {
+  .main-notes-list::before {
+    content: none;
+  }
+
+  .timeline-event-note {
+    p {
+      margin-bottom: 0;
+      font-size: 0.875rem;
+    }
+  }
+}
+
+/**
+ * We have a very specific design proposal where we cannot
+ * use `vertical-line` mixin as it is and have to use
+ * custom styles, see https://gitlab.com/gitlab-org/gitlab/-/merge_requests/81284#note_904867444
+ */
+.timeline-entry-vertical-line {
+  &::before,
+  &::after {
+    content: '';
+    border-left: 2px solid $gray-50;
+    position: absolute;
+    left: 20px;
+    height: calc(100% + #{$gl-spacing-scale-5});
+    top: -#{$gl-spacing-scale-5};
+  }
+
+  &:first-child::before {
+    content: none;
+  }
+
+  &:first-child {
+    &::after {
+      top: $gl-spacing-scale-5;
+      height: calc(100% + #{$gl-spacing-scale-5});
+    }
+  }
+
+  &:last-child,
+  &.create-timeline-event {
+    &::before {
+      top: - #{$gl-spacing-scale-5} !important; // Override default positioning
+      @include gl-h-8;
+    }
+
+    &::after {
+      content: none;
+    }
+  }
+}
+
+.timeline-entry:not(:last-child) {
+  .timeline-event-border {
+    @include gl-pb-5;
+    @include gl-border-gray-50;
+    @include gl-border-1;
+    @include gl-border-b-solid;
+  }
+}
+
+.timeline-group:last-child {
+  .timeline-entry:last-child,
+  .create-timeline-event {
+    .timeline-event-bottom-border {
+      @include gl-border-b;
+      @include gl-pt-5;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/issues_show.scss b/app/assets/stylesheets/page_bundles/issues_show.scss
index 26d694f7421..bbdcf1ea0c6 100644
--- a/app/assets/stylesheets/page_bundles/issues_show.scss
+++ b/app/assets/stylesheets/page_bundles/issues_show.scss
@@ -1,5 +1,9 @@
 @import 'mixins_and_variables_and_functions';
 
+$design-pin-diameter: 28px;
+$design-pin-diameter-sm: 24px;
+$t-gray-a-16-design-pin: rgba($black, 0.16);
+
 .description {
   li {
     position: relative;
@@ -23,6 +27,216 @@
   }
 }
 
+.design-card-header {
+  background: transparent;
+}
+
+.design-checkbox {
+  position: absolute;
+  top: $gl-padding;
+  left: 30px;
+}
+
+.layout-page.design-detail-layout {
+  max-height: 100vh;
+}
+
+.design-detail {
+  background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity);
+
+  .with-performance-bar & {
+    top: 35px;
+  }
+
+  .comment-indicator {
+    border-radius: 50%;
+  }
+
+  .comment-indicator,
+  .frame .design-note-pin {
+    &:active {
+      cursor: grabbing;
+    }
+  }
+}
+
+.design-list-item {
+  height: 280px;
+  text-decoration: none;
+
+  .icon-version-status {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+  }
+
+  .card-body {
+    height: 230px;
+  }
+}
+
+// This is temporary class to be removed after feature flag removal: https://gitlab.com/gitlab-org/gitlab/-/issues/223197
+.design-list-item-new {
+  height: 210px;
+}
+
+.design-note-pin {
+  display: flex;
+  height: $design-pin-diameter;
+  width: $design-pin-diameter;
+  box-sizing: content-box;
+  background-color: var(--purple-500, $purple-500);
+  color: var(--white, $white);
+  font-weight: $gl-font-weight-bold;
+  border-radius: 50%;
+  z-index: 1;
+  padding: 0;
+  border: 0;
+
+  &.draft {
+    background-color: var(--orange-500, $orange-500);
+  }
+
+  &.resolved {
+    background-color: var(--gray-500, $gray-500);
+  }
+
+  &.on-image {
+    box-shadow: 0 2px 4px $t-gray-a-08, 0 0 1px $t-gray-a-24;
+    border: var(--white, $white) 2px solid;
+    will-change: transform, box-shadow, opacity;
+    // NOTE: verbose transition property required for Safari
+    transition: transform $general-hover-transition-duration linear, box-shadow $general-hover-transition-duration linear, opacity $general-hover-transition-duration linear;
+    transform-origin: 0 0;
+    transform: translate(-50%, -50%);
+
+    &:hover {
+      transform: scale(1.2) translate(-50%, -50%);
+    }
+
+    &:active {
+      box-shadow: 0 0 4px $t-gray-a-16-design-pin, 0 4px 12px $t-gray-a-16-design-pin;
+    }
+
+    &.inactive {
+      @include gl-opacity-5;
+
+      &:hover {
+        @include gl-opacity-10;
+      }
+    }
+  }
+
+  &.small {
+    position: absolute;
+    border: 1px solid var(--white, $white);
+    height: $design-pin-diameter-sm;
+    width: $design-pin-diameter-sm;
+  }
+
+  &.user-avatar {
+    top: 25px;
+    right: 8px;
+  }
+}
+
+.design-scaler-wrapper {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.image-notes {
+  overflow-y: scroll;
+  padding: $gl-padding;
+  padding-top: 50px;
+  background-color: var(--white, $white);
+  flex-shrink: 0;
+  min-width: 400px;
+  flex-basis: 28%;
+
+  .link-inherit-color {
+    &:hover,
+    &:active,
+    &:focus {
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+
+  .toggle-comments {
+    line-height: 20px;
+    border-top: 1px solid var(--border-color, $border-color);
+
+    &.expanded {
+      border-bottom: 1px solid var(--border-color, $border-color);
+    }
+
+    .toggle-comments-button:focus {
+      text-decoration: none;
+      color: var(--blue-600, $blue-600);
+    }
+  }
+
+  .design-note-pin {
+    margin-left: $gl-padding;
+  }
+
+  .design-discussion {
+    margin: $gl-padding 0;
+
+    &::before {
+      content: '';
+      border-left: 1px solid var(--gray-100, $gray-100);
+      position: absolute;
+      left: 28px;
+      top: -17px;
+      height: 17px;
+    }
+
+    .design-note {
+      padding: $gl-padding;
+      list-style: none;
+      transition: background $gl-transition-duration-medium $general-hover-transition-curve;
+      border-top-left-radius: $border-radius-default; // same border radius used by .bordered-box
+      border-top-right-radius: $border-radius-default;
+
+      a {
+        color: inherit;
+      }
+
+      .note-text a {
+        color: var(--blue-600, $blue-600);
+      }
+    }
+
+    .reply-wrapper {
+      padding: $gl-padding;
+    }
+  }
+
+  .reply-wrapper {
+    border-top: 1px solid var(--border-color, $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;
+  }
+}
+
 .is-ghost {
   opacity: 0.3;
   pointer-events: none;
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 463c8f74342..b2fbce7cb4b 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -9,6 +9,124 @@ $tabs-holder-z-index: 250;
   min-width: 0;
 }
 
+.diff-comment-avatar-holders {
+  position: absolute;
+  margin-left: -$gl-padding;
+  z-index: 100;
+  @include code-icon-size();
+
+  &:hover {
+    .diff-comment-avatar,
+    .diff-comments-more-count {
+      @for $i from 1 through 4 {
+        $x-pos: 14px;
+
+        &:nth-child(#{$i}) {
+          @if $i == 4 {
+            $x-pos: 14.5px;
+          }
+
+          transform: translateX((($i * $x-pos) - $x-pos));
+
+          &:hover {
+            transform: translateX((($i * $x-pos) - $x-pos));
+          }
+        }
+      }
+    }
+
+    .diff-comments-more-count {
+      padding-left: 2px;
+      padding-right: 2px;
+      width: auto;
+    }
+  }
+}
+
+.diff-comment-avatar,
+.diff-comments-more-count {
+  position: absolute;
+  left: 0;
+  margin-right: 0;
+  border-color: var(--white, $white);
+  cursor: pointer;
+  transition: all 0.1s ease-out;
+  @include code-icon-size();
+
+  @for $i from 1 through 4 {
+    &:nth-child(#{$i}) {
+      z-index: (4 - $i);
+    }
+  }
+
+  .avatar {
+    @include code-icon-size();
+  }
+}
+
+.diff-comments-more-count {
+  padding-left: 0;
+  padding-right: 0;
+  overflow: hidden;
+  @include code-icon-size();
+}
+
+.diff-file-changes {
+  max-width: 560px;
+  width: 100%;
+  z-index: 150;
+  min-height: $dropdown-min-height;
+  max-height: $dropdown-max-height;
+  overflow-y: auto;
+  margin-bottom: 0;
+
+  @include media-breakpoint-up(sm) {
+    left: $gl-padding;
+  }
+
+  .dropdown-input .dropdown-input-search {
+    pointer-events: all;
+  }
+
+  .diff-changed-file {
+    display: flex;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    min-width: 0;
+  }
+
+  .diff-file-changed-icon {
+    margin-top: 2px;
+  }
+
+  .diff-changed-file-content {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .diff-changed-file-name,
+  .diff-changed-blank-file-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .diff-changed-blank-file-name {
+    color: var(--gray-400, $gray-400);
+    font-style: italic;
+  }
+
+  .diff-changed-file-path {
+    color: var(--gray-400, $gray-400);
+  }
+
+  .diff-changed-stats {
+    margin-left: auto;
+    white-space: nowrap;
+  }
+}
+
 .diff-files-holder {
   flex: 1;
   min-width: 0;
@@ -19,6 +137,111 @@ $tabs-holder-z-index: 250;
   }
 }
 
+.diff-grid {
+  .diff-td {
+    // By default min-width is auto with 1fr which causes some overflow problems
+    // https://gitlab.com/gitlab-org/gitlab/-/issues/296222
+    min-width: 0;
+  }
+
+  .diff-grid-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+
+    &.diff-grid-row-full {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .diff-grid-left,
+  .diff-grid-right {
+    display: grid;
+    // Zero width column is a placeholder for the EE inline code quality diff
+    // see ee/.../diffs.scss for more details
+    grid-template-columns: 50px 8px 0 1fr;
+  }
+
+  .diff-grid-2-col {
+    grid-template-columns: 100px 1fr !important;
+
+    &.parallel {
+      grid-template-columns: 50px 1fr !important;
+    }
+  }
+
+  .diff-grid-comments {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .diff-grid-drafts {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+
+    .content + .content {
+      @include gl-border-t;
+    }
+  }
+
+  &.inline-diff-view {
+    .diff-grid-comments {
+      display: grid;
+      grid-template-columns: 1fr;
+    }
+
+    .diff-grid-drafts {
+      display: grid;
+      grid-template-columns: 1fr;
+    }
+
+    .diff-grid-row {
+      grid-template-columns: 1fr;
+    }
+
+    .diff-grid-left,
+    .diff-grid-right {
+      // Zero width column is a placeholder for the EE inline code quality diff
+      // see ee/../diffs.scss for more details
+      grid-template-columns: 50px 50px 8px 0 1fr;
+    }
+  }
+}
+
+.diff-line-expand-button {
+  &:hover,
+  &:focus {
+    background-color: var(--gray-200, $gray-200);
+  }
+}
+
+.diff-table.code .diff-tr.line_holder .diff-td.line_content.parallel {
+  width: unset;
+}
+
+.diff-tr {
+  .timeline-discussion-body {
+    clear: left;
+
+    .note-body {
+      padding: 0 0 $gl-padding-8;
+    }
+  }
+
+  .timeline-entry img.avatar {
+    margin-top: -2px;
+    margin-right: $gl-padding-8;
+  }
+
+  // tiny adjustment to vertical align with the note header text
+  .discussion-collapsible {
+    margin-left: 1rem;
+
+    .timeline-icon {
+      padding-top: 2px;
+    }
+  }
+}
+
 .with-system-header {
   --system-header-height: #{$system-header-height};
 }
@@ -497,10 +720,6 @@ $tabs-holder-z-index: 250;
     }
 
     @include media-breakpoint-down(xs) {
-      p {
-        font-size: 13px;
-      }
-
       .btn-grouped {
         float: none;
         margin-right: 0;
@@ -661,10 +880,10 @@ $tabs-holder-z-index: 250;
 
   &:not(:last-child)::before {
     content: '';
-    border-left: 1px solid var(--gray-100, $gray-100);
+    border-left: 2px solid var(--gray-10, $gray-10);
     position: absolute;
-    left: 28px;
     bottom: -17px;
+    left: calc(1rem - 1px);
     height: 16px;
   }
 }
@@ -677,7 +896,6 @@ $tabs-holder-z-index: 250;
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    padding: 16px;
     z-index: 199;
     white-space: nowrap;
 
@@ -833,6 +1051,12 @@ $tabs-holder-z-index: 250;
 .detail-page-header-actions {
   .gl-toggle {
     @include gl-ml-auto;
+    @include gl-rounded-pill;
+    @include gl-w-9;
+
+    &.is-checked:hover {
+      background-color: $blue-500;
+    }
   }
 }
 
@@ -845,3 +1069,88 @@ $tabs-holder-z-index: 250;
     @include gl-font-weight-normal;
   }
 }
+
+.dropdown-menu li button.gl-toggle:not(.is-checked) {
+  background: $gray-400;
+}
+
+.mr-widget-content-row:first-child {
+  border-top: 0;
+}
+
+.memory-graph-container {
+  background: var(--white, $white);
+  border: 1px solid var(--gray-100, $gray-100);
+}
+
+.review-bar-component {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: $zindex-dropdown-menu;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: $toggle-sidebar-height;
+  padding-left: $contextual-sidebar-width;
+  padding-right: $gutter_collapsed_width;
+  background: var(--white, $white);
+  border-top: 1px solid var(--border-color, $border-color);
+  transition: padding $gl-transition-duration-medium;
+
+  .page-with-icon-sidebar & {
+    padding-left: $contextual-sidebar-collapsed-width;
+  }
+
+  .right-sidebar-expanded & {
+    padding-right: $gutter_width;
+  }
+
+  @media (max-width: map-get($grid-breakpoints, sm)-1) {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .dropdown {
+    margin-left: $grid-size;
+  }
+}
+
+.review-bar-content {
+  max-width: $limited-layout-width;
+  padding: 0 $gl-padding;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.review-preview-item-header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 4px;
+
+  > .bold {
+    display: flex;
+    min-width: 0;
+    line-height: 16px;
+  }
+}
+
+.review-preview-item-footer {
+  display: flex;
+  align-items: center;
+  margin-top: 4px;
+}
+
+.review-preview-item-content {
+  width: 100%;
+
+  p {
+    display: block;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-bottom: 0;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/milestone.scss b/app/assets/stylesheets/page_bundles/milestone.scss
index c401f1a4902..63bcb83e747 100644
--- a/app/assets/stylesheets/page_bundles/milestone.scss
+++ b/app/assets/stylesheets/page_bundles/milestone.scss
@@ -1,4 +1,4 @@
-@import 'mixins_and_variables_and_functions';
+@import 'page_bundles/mixins_and_variables_and_functions';
 
 $status-box-line-height: 26px;
 
@@ -40,39 +40,6 @@ $status-box-line-height: 26px;
       }
     }
   }
-
-  .card-header {
-    line-height: $line-height-base;
-    padding: 14px 16px;
-    display: flex;
-    justify-content: space-between;
-
-    .title {
-      flex: 1;
-      flex-grow: 2;
-    }
-
-    .issuable-count-weight {
-      white-space: nowrap;
-
-      .counter,
-      .weight {
-        color: var(--gray-500, $gray-500);
-        font-weight: $gl-font-weight-bold;
-      }
-    }
-
-    &.text-white {
-      .issuable-count-weight svg {
-        fill: $white;
-      }
-
-      .issuable-count-weight .counter,
-      .weight {
-        color: var(--white, $white);
-      }
-    }
-  }
 }
 
 .milestone-sidebar {
diff --git a/app/assets/stylesheets/components/dashboard_skeleton.scss b/app/assets/stylesheets/page_bundles/operations.scss
index 1dcaa47470b..497cb63033c 100644
--- a/app/assets/stylesheets/components/dashboard_skeleton.scss
+++ b/app/assets/stylesheets/page_bundles/operations.scss
@@ -1,3 +1,5 @@
+@import 'mixins_and_variables_and_functions';
+
 .dashboard-cards {
   margin-right: -$gl-padding-8;
   margin-left: -$gl-padding-8;
@@ -8,7 +10,7 @@
 
   &-header {
     &-warning {
-      background-color: $orange-100;
+      background-color: var(--orange-100, $orange-100);
     }
   }
 
@@ -16,16 +18,16 @@
     min-height: 120px;
 
     &-warning {
-      background-color: $orange-50;
+      background-color: var(--orange-50, $orange-50);
     }
 
     &-failed {
-      background-color: $red-50;
+      background-color: var(--red-50, $red-50);
     }
   }
 
   &-icon {
-    color: $gray-300;
+    color: var(--gray-300, $gray-300);
   }
 
   &-footer {
@@ -33,7 +35,7 @@
     height: $gl-padding-32;
 
     &-arrow {
-      color: $gray-200;
+      color: var(--gray-200, $gray-200);
     }
 
     &-downstream {
@@ -41,7 +43,7 @@
     }
 
     &-extra {
-      background-color: $gray-200;
+      background-color: var(--gray-200, $gray-200);
       font-size: 10px;
       line-height: $gl-line-height;
       width: $gl-padding;
@@ -50,7 +52,7 @@
 
   &-header {
     &-failed {
-      background-color: $red-100;
+      background-color: var(--red-100, $red-100);
     }
   }
 
@@ -66,10 +68,10 @@
       background-repeat: no-repeat;
       background-size: cover;
       background-image: linear-gradient(to right,
-      $gray-50 0%,
-      $gray-10 20%,
-      $gray-50 40%,
-      $gray-50 100%);
+      var(--gray-50, $gray-50) 0%,
+      var(--gray-10, $gray-10) 20%,
+      var(--gray-50, $gray-50) 40%,
+      var(--gray-50, $gray-50) 100%);
       border-radius: $gl-padding;
       height: $gl-padding;
       margin-top: -$gl-padding-8;
diff --git a/app/assets/stylesheets/page_bundles/pipeline_schedules.scss b/app/assets/stylesheets/page_bundles/pipeline_schedules.scss
index 0c73bece035..af2dac7739e 100644
--- a/app/assets/stylesheets/page_bundles/pipeline_schedules.scss
+++ b/app/assets/stylesheets/page_bundles/pipeline_schedules.scss
@@ -1,60 +1,82 @@
 @import 'mixins_and_variables_and_functions';
 
-.pipeline-schedule-form {
-  .gl-field-error {
-    margin: 10px 0 0;
-  }
+.ci-variable-list {
+  margin-left: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style: none;
+  clear: both;
 }
 
-.interval-pattern-form-group {
-  label {
-    margin-right: 10px;
-    font-weight: $gl-font-weight-normal;
+.ci-variable-row {
+  display: flex;
+  align-items: flex-start;
 
-    &[for='custom'] {
-      margin-right: 0;
-    }
+  @include media-breakpoint-down(xs) {
+    align-items: flex-end;
   }
 
-  .cron-interval-input-wrapper {
-    padding-left: 0;
-  }
+  &:not(:last-child) {
+    margin-bottom: $gl-btn-padding;
 
-  .cron-interval-input {
-    margin: 10px 10px 0 0;
+    @include media-breakpoint-down(xs) {
+      margin-bottom: 3 * $gl-btn-padding;
+    }
   }
-}
 
-.pipeline-schedule-table-row {
-  .branch-name-cell {
-    max-width: 300px;
-  }
+  &:last-child {
+    .ci-variable-body-item:last-child {
+      margin-right: $ci-variable-remove-button-width;
 
-  a {
-    color: var(--gl-text-color, $gl-text-color);
-  }
+      @include media-breakpoint-down(xs) {
+        margin-right: 0;
+      }
+    }
+
+    .ci-variable-row-remove-button {
+      display: none;
+    }
 
-  svg {
-    vertical-align: middle;
+    @include media-breakpoint-down(xs) {
+      .ci-variable-row-body {
+        margin-right: $ci-variable-remove-button-width;
+      }
+    }
   }
 }
 
-.pipeline-schedules-user-callout {
-  .bordered-box.content-block {
-    border: 1px solid var(--border-color, $border-color);
-    background-color: transparent;
+.ci-variable-row-body {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  padding-bottom: $gl-padding;
+
+  @include media-breakpoint-down(xs) {
+    display: block;
   }
 }
 
-.cron-preset-radio-input {
-  display: inline-block;
+.ci-variable-body-item {
+  flex: 1;
 
-  @include media-breakpoint-down(md) {
-    display: block;
-    margin: 0 0 5px 5px;
+  &:not(:last-child) {
+    margin-right: $gl-btn-padding;
+
+    @include media-breakpoint-down(xs) {
+      margin-right: 0;
+      margin-bottom: $gl-btn-padding;
+    }
   }
+}
 
-  input {
-    margin-right: 3px;
+.pipeline-schedule-form {
+  .gl-field-error {
+    margin: 10px 0 0;
+  }
+}
+
+.pipeline-schedule-table-row {
+  a {
+    color: var(--gl-text-color, $gl-text-color);
   }
 }
diff --git a/app/assets/stylesheets/page_bundles/profile.scss b/app/assets/stylesheets/page_bundles/profile.scss
index 59b8823c113..ac1e9fb024b 100644
--- a/app/assets/stylesheets/page_bundles/profile.scss
+++ b/app/assets/stylesheets/page_bundles/profile.scss
@@ -1,4 +1,33 @@
 @import 'mixins_and_variables_and_functions';
+@import 'framework/buttons';
+
+.edit-user {
+  .emoji-menu-toggle-button {
+    @include emoji-menu-toggle-button;
+  }
+
+  @include media-breakpoint-down(sm) {
+    .input-md,
+    .input-lg {
+      max-width: 100%;
+    }
+  }
+}
+
+.modal-profile-crop {
+  .modal-dialog {
+    width: 380px;
+
+    @include media-breakpoint-down(xs) {
+      width: auto;
+    }
+  }
+
+  .profile-crop-image-container {
+    height: 300px;
+    margin: 0 auto;
+  }
+}
 
 .calendar-block {
   padding-left: 0;
@@ -210,3 +239,32 @@
 .twitter-icon {
   color: $twitter;
 }
+
+.key-created-at {
+  line-height: 42px;
+}
+
+.key-list-item {
+  .key-list-item-info {
+    @include media-breakpoint-up(sm) {
+      float: left;
+    }
+  }
+}
+
+.ssh-keys-list {
+  .last-used-at,
+  .expires,
+  .key-created-at {
+    line-height: 32px;
+  }
+}
+
+.subkeys-list {
+  @include basic-list;
+
+  li {
+    padding: 3px 0;
+    border: 0;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/project.scss b/app/assets/stylesheets/page_bundles/project.scss
index eec5ebdb383..68bf2fa0f82 100644
--- a/app/assets/stylesheets/page_bundles/project.scss
+++ b/app/assets/stylesheets/page_bundles/project.scss
@@ -191,12 +191,4 @@
   h5 {
     color: var(--gl-text-color, $gl-text-color);
   }
-
-  .light-well {
-    border-radius: 2px;
-
-    color: var(--gray-600, $well-light-text-color);
-    font-size: 13px;
-    line-height: 1.6em;
-  }
 }
diff --git a/app/assets/stylesheets/pages/prometheus.scss b/app/assets/stylesheets/page_bundles/prometheus.scss
index 71cbd7d9613..702c0e4dd72 100644
--- a/app/assets/stylesheets/pages/prometheus.scss
+++ b/app/assets/stylesheets/page_bundles/prometheus.scss
@@ -1,3 +1,11 @@
+@import 'mixins_and_variables_and_functions';
+
+.date-time-picker {
+  .date-time-picker-menu {
+    width: 400px;
+  }
+}
+
 .prometheus-graphs {
   .dropdown-buttons {
     > div {
@@ -96,15 +104,6 @@
   padding: $gl-padding-8;
 }
 
-.alert-current-setting {
-  max-width: 240px;
-
-  .badge.badge-danger {
-    color: $red-500;
-    background-color: $red-100;
-  }
-}
-
 .prometheus-panel-builder {
   .preview-date-time-picker {
     // same as in .dropdown-menu-toggle
diff --git a/app/assets/stylesheets/components/release_block_milestone_info.scss b/app/assets/stylesheets/page_bundles/releases.scss
index b6a85ae965a..24ffbf9b90c 100644
--- a/app/assets/stylesheets/components/release_block_milestone_info.scss
+++ b/app/assets/stylesheets/page_bundles/releases.scss
@@ -1,3 +1,9 @@
+@import 'mixins_and_variables_and_functions';
+
+.release-block {
+  transition: background-color 1s linear;
+}
+
 .release-block-milestone-info {
   .milestone-progress-bar-container {
     width: 300px;
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/page_bundles/tree.scss
index a9fbff8958d..58e55e11f7e 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/page_bundles/tree.scss
@@ -1,3 +1,5 @@
+@import 'mixins_and_variables_and_functions';
+
 .project-last-commit {
   min-height: 4.75rem;
 }
@@ -100,11 +102,11 @@
     margin-bottom: 0;
 
     tr {
-      border-bottom: 1px solid $white-normal;
-      border-top: 1px solid $white-normal;
+      border-bottom: 1px solid var(--gray-50, $gray-50);
+      border-top: 1px solid var(--gray-50, $gray-50);
 
       &:last-of-type {
-        border-bottom-color: $white;
+        border-bottom-color: transparent;
       }
 
       td,
@@ -117,24 +119,24 @@
       }
 
       td {
-        border-color: $border-color;
+        border-color: var(--border-color, $border-color);
       }
 
       &:hover:not(.tree-truncated-warning) {
         td {
-          background-color: $blue-50;
+          background-color: var(--blue-50, $blue-50);
           background-clip: padding-box;
-          border-top: 1px solid $blue-200;
-          border-bottom: 1px solid $blue-200;
+          border-top: 1px solid var(--blue-200, $blue-200);
+          border-bottom: 1px solid var(--blue-200, $blue-200);
           cursor: pointer;
         }
       }
 
       &.selected {
         td {
-          background: $white-normal;
-          border-top: 1px solid $border-white-normal;
-          border-bottom: 1px solid $border-white-normal;
+          background: var(--gray-50, $gray-50);
+          border-top: 1px solid var(--border-color, $border-color);
+          border-bottom: 1px solid var(--border-color, $border-color);
         }
       }
     }
@@ -156,7 +158,7 @@
 
       i,
       a {
-        color: $gl-text-color;
+        color: var(--gl-text-color, $gl-text-color);
       }
 
       img {
@@ -175,22 +177,18 @@
   }
 
   .tree-truncated-warning {
-    color: $orange-600;
-    background-color: $orange-50;
+    color: var(--orange-600, $orange-600);
+    background-color: var(--orange-50, $orange-50);
   }
 
   .tree-time-ago {
     min-width: 135px;
-    color: $gl-text-color-secondary;
   }
 
   .tree-commit {
     max-width: 320px;
-    color: $gl-text-color-secondary;
 
     .tree-commit-link {
-      color: $gl-text-color-secondary;
-
       &:hover {
         text-decoration: underline;
       }
@@ -207,40 +205,3 @@
 .blob-content-holder {
   margin-top: $gl-padding;
 }
-
-.blob-upload-dropzone-previews {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  border: 2px;
-  border-style: dashed;
-  border-color: $border-color;
-  min-height: 200px;
-}
-
-.repo-charts {
-  .sub-header {
-    margin: 20px 0;
-  }
-
-  .sub-header-block.border-top {
-    margin-top: 20px;
-    padding: 0;
-    border-top: 1px solid $white-dark;
-    border-bottom: 0;
-  }
-
-  .commit-stats li {
-    font-size: 16px;
-  }
-
-  .tree-ref-header {
-    margin-bottom: 20px;
-
-    h4 {
-      margin: 0;
-      line-height: 36px;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/page_bundles/work_items.scss b/app/assets/stylesheets/page_bundles/work_items.scss
index d0fc011dde7..820a1a0b53e 100644
--- a/app/assets/stylesheets/page_bundles/work_items.scss
+++ b/app/assets/stylesheets/page_bundles/work_items.scss
@@ -63,3 +63,22 @@
     display: none;
   }
 }
+
+.work-item-dropdown {
+  .gl-dropdown-toggle {
+    background: none !important;
+
+    &:hover,
+    &:focus {
+      box-shadow: inset 0 0 0 $gl-border-size-1 var(--gray-darkest, $gray-darkest) !important;
+    }
+
+    &.is-not-focused:not(:hover, :focus) {
+      box-shadow: none;
+
+      .gl-button-icon {
+        display: none;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/deploy_keys.scss b/app/assets/stylesheets/pages/deploy_keys.scss
deleted file mode 100644
index 997e42a8fd5..00000000000
--- a/app/assets/stylesheets/pages/deploy_keys.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.deploy-keys-title {
-  padding-bottom: 2px;
-  line-height: 2;
-}
diff --git a/app/assets/stylesheets/pages/environment_logs.scss b/app/assets/stylesheets/pages/environment_logs.scss
deleted file mode 100644
index f8f40076142..00000000000
--- a/app/assets/stylesheets/pages/environment_logs.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-.environment-logs-page {
-  .content-wrapper {
-    padding-bottom: 0;
-  }
-}
-
-.environment-logs-viewer {
-  height: calc(100vh - #{$environment-logs-difference-xs-up});
-  min-height: 700px;
-
-  @include media-breakpoint-up(md) {
-    height: calc(100vh - #{$environment-logs-difference-md-up});
-  }
-
-  .with-performance-bar & {
-    height: calc(100vh - #{$environment-logs-difference-xs-up} - #{$performance-bar-height});
-
-    @include media-breakpoint-up(md) {
-      height: calc(100vh - #{$environment-logs-difference-md-up} - #{$performance-bar-height});
-    }
-  }
-
-  .top-bar {
-    .date-time-picker-wrapper,
-    .dropdown-toggle {
-      @include media-breakpoint-up(md) {
-        width: 140px;
-      }
-
-      @include media-breakpoint-up(lg) {
-        width: 160px;
-      }
-    }
-  }
-
-  .log-lines,
-  .gl-infinite-scroll-container {
-    // makes scrollbar visible by creating contrast
-    background: $black;
-    height: 100%;
-  }
-
-  .build-log {
-    @include build-log($black);
-  }
-
-  .gl-infinite-scroll-legend {
-    margin: 0;
-  }
-
-  .build-loader-animation {
-    @include build-loader-animation;
-  }
-}
diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index 33d00027404..ce8dd6684f2 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -84,6 +84,10 @@
         iframe.twitter-share-button {
           vertical-align: bottom;
         }
+
+        .gl-label-scoped.gl-label-sm {
+          --label-inset-border: inset 0 0 0 1px currentColor;
+        }
       }
 
       code {
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 85205f4d5ac..6070311dcb6 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -199,12 +199,15 @@
     .sidebar-contained-width,
     .issuable-sidebar-header {
       width: 100%;
-      border-bottom: 0;
     }
 
     .block {
       @include media-breakpoint-up(lg) {
-        padding: $gl-spacing-scale-5 0;
+        padding: $gl-spacing-scale-4 0 $gl-spacing-scale-5;
+      }
+
+      &.participants {
+        border-bottom: 0;
       }
     }
   }
@@ -213,7 +216,8 @@
   .sidebar-contained-width,
   .issuable-sidebar-header {
     @include clearfix;
-    padding: $gl-padding 0;
+    padding: $gl-spacing-scale-4 0 $gl-spacing-scale-5;
+    border-bottom: 1px solid $border-gray-normal;
     // This prevents the mess when resizing the sidebar
     // of elements repositioning themselves..
     width: $gutter-inner-width;
@@ -235,6 +239,13 @@
         }
       }
     }
+
+    &.time-tracking,
+    &.participants,
+    &.subscriptions,
+    &.with-sub-blocks {
+      padding-top: $gl-spacing-scale-5;
+    }
   }
 
   .block-first {
@@ -724,13 +735,7 @@
     }
 
     .issue-check {
-      padding-right: $gl-padding;
-      margin-bottom: 10px;
       min-width: 15px;
-
-      .selected-issuable {
-        vertical-align: text-top;
-      }
     }
 
     .issuable-milestone,
@@ -851,24 +856,6 @@
   }
 }
 
-.issuable-todo-btn {
-  .gl-spinner {
-    display: none;
-  }
-
-  &.is-loading {
-    .gl-spinner {
-      display: inline-block;
-    }
-
-    &.sidebar-collapsed-icon {
-      .issuable-todo-inner {
-        display: none;
-      }
-    }
-  }
-}
-
 /*
  * Following overrides are done to prevent
  * legacy dropdown styles from influencing
@@ -927,88 +914,3 @@
     }
   }
 }
-
-.icon-overlap-and-shadow {
-  filter:
-    drop-shadow(0 1px 0.5px #fff)
-    drop-shadow(1px 0 0.5px #fff)
-    drop-shadow(0 -1px 0.5px #fff)
-    drop-shadow(-1px 0 0.5px #fff);
-  margin-right: -7px;
-  z-index: 1;
-}
-
-.issuable-discussion.incident-timeline-events {
-  .main-notes-list::before {
-    content: none;
-  }
-
-  .timeline-event-note {
-    p {
-      margin-bottom: 0;
-    }
-  }
-}
-
-/**
- * We have a very specific design proposal where we cannot
- * use `vertical-line` mixin as it is and have to use
- * custom styles, see https://gitlab.com/gitlab-org/gitlab/-/merge_requests/81284#note_904867444
- */
-.timeline-entry-vertical-line {
-  &::before,
-  &::after {
-    content: '';
-    border-left: 2px solid $gray-50;
-    position: absolute;
-    left: 39px;
-    height: calc(100% + #{$gl-spacing-scale-5});
-    top: -#{$gl-spacing-scale-5};
-  }
-
-  &:first-child::before {
-    content: none;
-  }
-
-  &:first-child {
-    &::after {
-      top: $gl-spacing-scale-5;
-      height: calc(100% + #{$gl-spacing-scale-5});
-    }
-  }
-
-  &:last-child,
-  &.create-timeline-event {
-    &::before {
-      top: - #{$gl-spacing-scale-5} !important; // Override default positioning
-      @include gl-h-8;
-    }
-
-    &::after {
-      content: none;
-    }
-  }
-}
-
-.timeline-event-note-form {
-  padding-left: 20px;
-}
-
-.timeline-entry:not(:last-child) {
-  .timeline-event-border {
-    @include gl-pb-5;
-    @include gl-border-gray-50;
-    @include gl-border-1;
-    @include gl-border-b-solid;
-  }
-}
-
-.timeline-group:last-child {
-  .timeline-entry:last-child,
-  .create-timeline-event {
-    .timeline-event-bottom-border {
-      @include gl-border-b;
-      @include gl-pt-5;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 843daec8cda..c88834c088f 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -123,6 +123,9 @@ ul.related-merge-requests > li gl-emoji {
 }
 
 .new-branch-col {
+  @include gl-pb-3;
+  @include gl-my-2;
+
   .discussion-filter-container {
     &:not(:last-child) {
       margin-right: $gl-spacing-scale-3;
@@ -221,7 +224,7 @@ ul.related-merge-requests > li gl-emoji {
     display: flex;
 
     .new-branch-col {
-      padding-top: 0;
+      @include gl-pb-0;
       align-self: center;
     }
   }
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index fc1b78bf730..438b7b1afa6 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -1,15 +1,15 @@
-$system-note-icon-size: 32px;
-$system-note-svg-size: 16px;
+$system-note-icon-size: 2rem;
+$system-note-svg-size: 1rem;
 
 @mixin vertical-line($left) {
   &::before {
     content: '';
-    border-left: 2px solid $gray-10;
+    border-left: 2px solid var(--gray-10, $gray-10);
     position: absolute;
     top: 0;
     bottom: 0;
-    left: $left;
-    height: calc(100% - 20px);
+    left: calc(#{$left} - 1px);
+    height: calc(100% + 1.5rem);
   }
 }
 
@@ -19,17 +19,10 @@ $system-note-svg-size: 16px;
   border-radius: $border-radius-default;
 }
 
-.note-wrapper {
-  padding: $gl-padding $gl-padding-8 $gl-padding $gl-padding;
-
-  &.outlined {
-    @include outline-comment();
-  }
-}
-
-.issuable-discussion {
-  .main-notes-list {
-    @include vertical-line(35px);
+.issuable-discussion:not(.incident-timeline-events),
+.limited-width-notes {
+  .main-notes-list > li.timeline-entry:not(:last-of-type) {
+    @include vertical-line(1rem);
   }
 }
 
@@ -41,8 +34,6 @@ $system-note-svg-size: 16px;
   position: relative;
 
   &.timeline > .timeline-entry {
-    border: 1px solid $border-color;
-    border-radius: $border-radius-default;
     margin: $gl-padding 0;
 
     &.system-note,
@@ -50,6 +41,117 @@ $system-note-svg-size: 16px;
       border: 0;
     }
 
+    .timeline-avatar {
+      height: 2rem;
+    }
+
+    &.note-comment,
+    &.note-skeleton,
+    .draft-note {
+      .timeline-avatar {
+        margin-top: 5px;
+      }
+
+      .timeline-content:not(.flash-container) {
+        margin-left: 2.5rem;
+        border: 1px solid $border-color;
+        border-radius: $gl-border-radius-base;
+        background-color: $white;
+        padding: $gl-padding-4 $gl-padding-8;
+      }
+
+      .note-header-info {
+        min-height: 2rem;
+        display: flex;
+        align-items: center;
+        gap: 0 0.25rem;
+        flex-wrap: wrap;
+      }
+    }
+
+    &.note-discussion {
+      .timeline-content .discussion-wrapper {
+        background-color: transparent;
+      }
+
+      .timeline-content {
+        ul li {
+          &:first-of-type {
+            .timeline-avatar {
+              margin-top: 5px;
+            }
+
+            .timeline-content {
+              margin-left: 2.5rem;
+              border-left: 1px solid $border-color;
+              border-right: 1px solid $border-color;
+              border-top: 1px solid $border-color;
+              border-top-left-radius: $gl-border-radius-base;
+              border-top-right-radius: $gl-border-radius-base;
+              background-color: $white;
+              padding: $gl-padding-4 $gl-padding-8;
+            }
+          }
+
+          &:not(:first-of-type) .timeline-entry-inner {
+            margin-left: 2.5rem;
+            border-left: 1px solid $border-color;
+            border-right: 1px solid $border-color;
+            background-color: $white;
+
+            .timeline-content {
+              padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding;
+            }
+
+            .timeline-avatar {
+              margin: $gl-padding-8 0 0 $gl-padding;
+            }
+
+            .timeline-discussion-body {
+              margin-left: 2rem;
+            }
+          }
+        }
+
+        .diff-content {
+          ul li:first-of-type {
+            .timeline-avatar {
+              margin-top: 0;
+            }
+
+            .timeline-content {
+              margin-left: 0;
+              border: 0;
+              padding: 0;
+            }
+
+            .timeline-entry-inner {
+              margin-left: 2.5rem;
+              border-left: 1px solid $border-color;
+              border-right: 1px solid $border-color;
+              background-color: $white;
+
+              .timeline-content {
+                padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding;
+              }
+
+              .timeline-avatar {
+                margin: $gl-padding-8 0 0 $gl-padding;
+              }
+
+              .timeline-discussion-body {
+                margin-left: 2rem;
+              }
+            }
+          }
+        }
+      }
+
+      .discussion-reply-holder {
+        border: 1px solid $border-color;
+      }
+    }
+
     &.note-form {
       margin-left: 0;
 
@@ -88,10 +190,14 @@ $system-note-svg-size: 16px;
     .card {
       margin-bottom: 0;
     }
-  }
 
-  .timeline-discussion-body {
-    margin-top: -$gl-padding-8;
+    .note-header-info {
+      min-height: 2rem;
+      display: flex;
+      align-items: center;
+      gap: 0 0.25rem;
+      flex-wrap: wrap;
+    }
   }
 
   .discussion {
@@ -116,16 +222,11 @@ $system-note-svg-size: 16px;
     &.being-posted {
       pointer-events: none;
       opacity: 0.5;
-      padding: $gl-padding;
 
       .dummy-avatar {
         background-color: $gray-100;
         border: 1px solid darken($gray-100, 25%);
       }
-
-      .note-headline-light {
-        margin-left: 3px;
-      }
     }
 
     .editing-spinner {
@@ -156,6 +257,7 @@ $system-note-svg-size: 16px;
       .note-edit-form {
         display: block;
         margin-left: 0;
+        margin-top: 0.5rem;
 
         &.current-note-edit-form + .note-awards {
           display: none;
@@ -164,13 +266,17 @@ $system-note-svg-size: 16px;
     }
 
     .note-body {
-      padding: $gl-padding-4 $gl-padding-4 $gl-padding-4 $gl-padding-8;
+      padding: 0 $gl-padding-8 $gl-padding-8;
       overflow-x: auto;
       overflow-y: hidden;
 
       .note-text {
         word-wrap: break-word;
       }
+
+      .suggestions {
+        margin-top: 4px;
+      }
     }
 
     .note-awards {
@@ -186,9 +292,10 @@ $system-note-svg-size: 16px;
   }
 
   .system-note {
-    padding: $gl-padding-4 20px;
+    padding: $gl-padding-8 0;
     margin: $gl-padding 0;
     background-color: transparent;
+    font-size: $gl-font-size;
 
     .note-header-info {
       padding-bottom: 0;
@@ -229,6 +336,15 @@ $system-note-svg-size: 16px;
 
     .note-body {
       overflow: hidden;
+      padding: 0;
+
+      ul {
+        margin: 0.5rem 0;
+      }
+
+      p {
+        margin-left: 1rem;
+      }
 
       .description-version {
         position: relative;
@@ -305,7 +421,7 @@ $system-note-svg-size: 16px;
       height: $system-note-icon-size;
       border: 1px solid $gray-10;
       border-radius: $system-note-icon-size;
-      margin: -6px 0 0;
+      margin: -8px 0 0;
 
       svg {
         width: $system-note-svg-size;
@@ -319,25 +435,38 @@ $system-note-svg-size: 16px;
 
   .discussion-filter-note {
     .timeline-icon {
-      width: $system-note-icon-size + 6;
-      height: $system-note-icon-size + 6;
+      width: $system-note-icon-size;
+      height: $system-note-icon-size;
       margin-top: -8px;
     }
   }
 }
 
+.card .notes {
+  .system-note {
+    margin: 0;
+    padding: 0;
+  }
+
+  .timeline-icon {
+    margin: 8px 0 0 14px;
+  }
+}
+
+
 // Diff code in discussion view
 .discussion-body .diff-file {
   .file-title {
     cursor: default;
-    border-top: 1px solid $border-color;
+    border-top: 0;
     border-radius: 0;
+    margin-left: 2.5rem;
 
     @media (min-width: map-get($grid-breakpoints, md)) {
       --initial-top: calc(#{$header-height} + #{$mr-tabs-height});
 
       &.is-sidebar-moved {
-        --initial-top: calc(#{$header-height} + #{$mr-tabs-height + 28px});
+        --initial-top: calc(#{$header-height} + #{$mr-tabs-height + 24px});
       }
 
       .with-performance-bar & {
@@ -357,6 +486,40 @@ $system-note-svg-size: 16px;
   .line_content {
     white-space: pre-wrap;
   }
+
+  .diff-content {
+    margin-left: 2.5rem;
+
+    &.outdated-lines-wrapper {
+      margin-left: 0;
+    }
+
+    .line_holder td:first-of-type {
+      @include gl-border-l;
+    }
+
+    .line_holder td:last-of-type {
+      @include gl-border-r;
+    }
+
+    .discussion-notes {
+      margin-left: -2.5rem;
+
+      .notes {
+        background-color: transparent;
+      }
+
+      .notes-content {
+        border: 0;
+      }
+
+      .timeline-content {
+        border-top: 0 !important;
+        border-top-left-radius: 0 !important;
+        border-top-right-radius: 0 !important;
+      }
+    }
+  }
 }
 
 .tab-pane.notes {
@@ -394,8 +557,17 @@ $system-note-svg-size: 16px;
     }
 
     .system-note {
-      background-color: $white;
-      padding: $gl-padding;
+      background-color: transparent;
+      padding: 0;
+
+      .timeline-icon {
+        margin-top: -2px;
+      }
+
+      .timeline-entry-inner .timeline-icon {
+        margin-top: $grid-size;
+        margin-left: 14px;
+      }
     }
   }
 
@@ -487,6 +659,19 @@ $system-note-svg-size: 16px;
 .code-commit .notes-content,
 .diff-viewer > .image ~ .note-container {
   background-color: $white;
+
+  li.note-comment {
+    padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding;
+
+    .avatar {
+      margin-right: 0;
+    }
+
+    .note-body {
+      padding: $gl-padding-4 0 $gl-padding-8;
+      margin-left: 2.5rem;
+    }
+  }
 }
 
 .diff-viewer > .image ~ .note-container form.new-note {
@@ -540,9 +725,21 @@ $system-note-svg-size: 16px;
     padding-bottom: 0;
   }
 
+  .timeline-avatar {
+    margin-top: 5px;
+  }
+
   .timeline-content {
     overflow-x: auto;
     overflow-y: hidden;
+    border-radius: $gl-border-radius-base;
+    padding: $gl-padding-8 !important;
+    @include gl-border;
+
+    &.expanded {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
   }
 
   &.note-wrapper {
@@ -568,19 +765,10 @@ $system-note-svg-size: 16px;
 .note {
   @include notes-media('max', map-get($grid-breakpoints, sm) - 1) {
     .note-header {
-      .note-actions {
-        flex-wrap: wrap;
-        margin-bottom: $gl-padding-12;
-
-        > :first-child {
-          margin-left: 0;
-        }
+      .note-actions > :first-child {
+        margin-left: 0;
       }
     }
-
-    .note-header-author-name {
-      display: block;
-    }
   }
 }
 
@@ -593,11 +781,6 @@ $system-note-svg-size: 16px;
   }
 }
 
-.note-header-info,
-.note-actions {
-  padding-bottom: $gl-padding-4;
-}
-
 .system-note .note-header-info {
   padding-bottom: 0;
 }
@@ -618,10 +801,6 @@ $system-note-svg-size: 16px;
 }
 
 .note-headline-meta {
-  .system-note-separator {
-    color: $gray-500;
-  }
-
   .note-timestamp {
     white-space: nowrap;
   }
@@ -667,18 +846,20 @@ $system-note-svg-size: 16px;
 }
 
 .note-actions {
-  align-self: flex-start;
   justify-content: flex-end;
   flex-shrink: 1;
   display: inline-flex;
   align-items: center;
-  margin-left: 10px;
+  margin-left: $gl-padding-8;
   color: $gray-400;
-  margin-top: -4px;
 
   @include notes-media('max', map-get($grid-breakpoints, sm) - 1) {
+    justify-content: flex-start;
     float: none;
-    margin-left: 0;
+
+    .note-actions__mobile-spacer {
+      flex-grow: 1;
+    }
   }
 }
 
@@ -719,7 +900,7 @@ $system-note-svg-size: 16px;
 }
 
 .discussion-toggle-button {
-  padding: 0;
+  padding: 0 $gl-padding-8 0 0;
   background-color: transparent;
   border: 0;
   line-height: 20px;
@@ -868,6 +1049,28 @@ $system-note-svg-size: 16px;
     .note-discussion.timeline-entry {
       padding-left: 0;
 
+      ul.notes li.note-wrapper {
+        .timeline-content {
+          padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding;
+        }
+
+        .timeline-avatar {
+          margin: $gl-padding-8 0 0 $gl-padding;
+        }
+      }
+
+      ul.notes {
+        li.toggle-replies-widget {
+          margin-left: 0;
+          border-left: 0;
+          border-right: 0;
+        }
+
+        div.discussion-reply-holder {
+          margin-left: 0;
+        }
+      }
+
       &:last-child {
         border-bottom: 0;
       }
@@ -894,6 +1097,16 @@ $system-note-svg-size: 16px;
     }
   }
 
+  .draft-note-component .draft-note.timeline-entry {
+    .timeline-content:not(.flash-container) {
+      padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding;
+    }
+
+    .timeline-avatar {
+      margin: $gl-padding-8 0 0 $gl-padding;
+    }
+  }
+
   .diff-comment-form {
     display: block;
   }
@@ -909,8 +1122,7 @@ $system-note-svg-size: 16px;
 // See https://gitlab.com/gitlab-org/gitlab-foss/issues/53918#note_117038785
 .unstyled-comments {
   .discussion-header {
-    padding: $gl-padding;
-    border-bottom: 1px solid $border-color;
+    padding: $gl-padding 0;
   }
 
   .discussion-form-container {
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 951e31ef768..8e4dd39e498 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -1,22 +1,3 @@
-.avatar-image {
-  margin-bottom: $grid-size;
-
-  .avatar {
-    float: none;
-  }
-
-  @include media-breakpoint-up(sm) {
-    float: left;
-    margin-bottom: 0;
-  }
-}
-
-.avatar-file-name {
-  position: relative;
-  top: 2px;
-  display: inline-block;
-}
-
 .account-well {
   padding: 10px;
   background-color: $gray-light;
@@ -29,42 +10,6 @@
   }
 }
 
-.user-avatar-button {
-  .file-name {
-    display: inline-block;
-    padding-left: 10px;
-  }
-}
-
-.subkeys-list {
-  @include basic-list;
-
-  li {
-    padding: 3px 0;
-    border: 0;
-  }
-}
-
-.key-list-item {
-  .key-list-item-info {
-    @include media-breakpoint-up(sm) {
-      float: left;
-    }
-  }
-}
-
-.ssh-keys-list {
-  .last-used-at,
-  .expires,
-  .key-created-at {
-    line-height: 32px;
-  }
-}
-
-.key-created-at {
-  line-height: 42px;
-}
-
 .provider-btn-group {
   display: inline-block;
   margin-right: 10px;
@@ -113,26 +58,6 @@
   }
 }
 
-.modal-profile-crop {
-  .modal-dialog {
-    width: 380px;
-
-    @include media-breakpoint-down(xs) {
-      width: auto;
-    }
-  }
-
-  .profile-crop-image-container {
-    height: 300px;
-    margin: 0 auto;
-  }
-
-  .crop-controls {
-    padding: 10px 0 0;
-    text-align: center;
-  }
-}
-
 .created-personal-access-token-container {
   .btn-clipboard {
     border: 1px solid $border-color;
@@ -247,36 +172,6 @@ table.u2f-registrations {
   }
 }
 
-.edit-user {
-  svg {
-    fill: $gl-text-color-secondary;
-  }
-
-  .form-group > label {
-    font-weight: $gl-font-weight-bold;
-  }
-
-  .form-group > .form-text {
-    font-size: $gl-font-size;
-  }
-
-  .emoji-menu-toggle-button {
-    @include emoji-menu-toggle-button;
-    padding: 6px 10px;
-
-    .no-emoji-placeholder {
-      position: relative;
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-    .input-md,
-    .input-lg {
-      max-width: 100%;
-    }
-  }
-}
-
 .help-block {
   color: $gl-text-color-secondary;
 }
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 0d45beab983..be8707dcd50 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -269,49 +269,27 @@
   color: $gray-200;
 }
 
-pre.light-well {
-  border-color: $well-light-border;
-}
-
 /*
  * Projects list rendered on dashboard and user page
  */
+
+.project-row {
+  .description p {
+    margin-bottom: 0;
+    color: $gl-text-color-secondary;
+  }
+}
+
 .projects-list {
   @include basic-list;
   display: flex;
   flex-direction: column;
 
-  // Disable Flexbox for admin page
-  &.admin-projects,
-  &.group-settings-projects {
-    display: block;
-
-    .project-row {
-      display: block;
-
-      .description > p {
-        margin-bottom: 0;
-      }
-    }
-  }
-
   .project-row {
     @include basic-list-stats;
     display: flex;
     align-items: center;
     padding: $gl-padding-12 0;
-
-    &.no-description {
-      @include media-breakpoint-up(sm) {
-        .avatar-container {
-          align-self: center;
-        }
-
-        .metadata-info {
-          margin-bottom: 0;
-        }
-      }
-    }
   }
 
   h2 {
@@ -634,24 +612,6 @@ pre.light-well {
   }
 }
 
-.clearable-input {
-  position: relative;
-
-  .clear-icon {
-    display: none;
-    position: absolute;
-    right: 9px;
-    top: 9px;
-  }
-
-  &.has-value {
-    .clear-icon {
-      cursor: pointer;
-      display: block;
-    }
-  }
-}
-
 .project-path {
   .form-control {
     min-width: 100px;
@@ -810,10 +770,3 @@ pre.light-well {
     }
   }
 }
-
-@include media-breakpoint-down(xs) {
-  .fork-filtered-search {
-    width: 100%;
-    margin: $gl-spacing-scale-2 0;
-  }
-}
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index e8f71c8a21c..a8027d2a5f5 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -268,16 +268,6 @@ input[type='checkbox']:hover {
     }
   }
 
-  .search-clear {
-    position: absolute;
-    right: 10px;
-    top: 9px;
-    padding: 0;
-    line-height: 0;
-    background: none;
-    border: 0;
-  }
-
   .search-icon {
     position: absolute;
     left: 10px;
@@ -327,15 +317,6 @@ input[type='checkbox']:hover {
   }
 }
 
-.search-clear {
-  color: $gray-darkest;
-
-  &:hover,
-  &:focus {
-    color: $blue-600;
-  }
-}
-
 .search-page-form {
   .dropdown-menu-toggle,
   .btn-search {
diff --git a/app/assets/stylesheets/pages/service_desk.scss b/app/assets/stylesheets/pages/service_desk.scss
deleted file mode 100644
index 34ab5eb1b74..00000000000
--- a/app/assets/stylesheets/pages/service_desk.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.service-desk-issues {
-  .non-empty-state {
-    text-align: left;
-    padding-bottom: $gl-padding-top;
-    border-bottom: 1px solid $border-color;
-  }
-}
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 56acf6de828..c364b233803 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -188,31 +188,6 @@
   }
 }
 
-.nested-settings {
-  padding-left: 20px;
-}
-
-.input-btn-group {
-  display: flex;
-
-  .input-large {
-    flex: 1;
-  }
-
-  .btn {
-    margin-left: 10px;
-  }
-}
-
-.content-list > .settings-flex-row {
-  display: flex;
-  align-items: center;
-
-  .float-right {
-    margin-left: auto;
-  }
-}
-
 .prometheus-metrics-monitoring {
   .card {
     .card-toggle {
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
index 0450b3d9a44..32c3ce1ba8c 100644
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -57,7 +57,7 @@ strong {
   font-weight: bolder;
 }
 a {
-  color: #007bff;
+  color: #428fdc;
   text-decoration: none;
   background-color: transparent;
 }
@@ -368,6 +368,23 @@ kbd kbd {
   white-space: nowrap;
   border: 0;
 }
+.gl-avatar {
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.gl-avatar-s24 {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  border-radius: 0.25rem;
+}
+.gl-avatar-circle {
+  border-radius: 50%;
+}
 .gl-badge {
   display: inline-flex;
   align-items: center;
@@ -552,9 +569,6 @@ html [type="button"],
 strong {
   font-weight: bold;
 }
-a {
-  color: #63a6e9;
-}
 svg {
   vertical-align: baseline;
 }
@@ -1783,10 +1797,15 @@ body.gl-dark {
   background-color: #262626;
   border-right: 1px solid #303030;
 }
+.gl-avatar:not(.gl-avatar-identicon),
 .avatar-container,
 .avatar {
   background: rgba(255, 255, 255, 0.04);
 }
+.gl-avatar {
+  border-style: none;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+}
 body.gl-dark {
   --gl-theme-accent: #868686;
 }
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index 356fb58b4c8..61a2ce8dd62 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -38,7 +38,7 @@ strong {
   font-weight: bolder;
 }
 a {
-  color: #007bff;
+  color: #1f75cb;
   text-decoration: none;
   background-color: transparent;
 }
@@ -349,6 +349,23 @@ kbd kbd {
   white-space: nowrap;
   border: 0;
 }
+.gl-avatar {
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.gl-avatar-s24 {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  border-radius: 0.25rem;
+}
+.gl-avatar-circle {
+  border-radius: 50%;
+}
 .gl-badge {
   display: inline-flex;
   align-items: center;
@@ -533,9 +550,6 @@ html [type="button"],
 strong {
   font-weight: bold;
 }
-a {
-  color: #1068bf;
-}
 svg {
   vertical-align: baseline;
 }
diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss
index edc579f48f6..33e10b9bd62 100644
--- a/app/assets/stylesheets/startup/startup-signin.scss
+++ b/app/assets/stylesheets/startup/startup-signin.scss
@@ -41,7 +41,7 @@ p {
   margin-bottom: 1rem;
 }
 a {
-  color: #007bff;
+  color: #1f75cb;
   text-decoration: none;
   background-color: transparent;
 }
@@ -498,7 +498,7 @@ input.btn-block[type="button"] {
   .custom-control-input:checked:disabled
   ~ .custom-control-label::before,
 .gl-form-checkbox.custom-control
-  .custom-control-input:indeterminate:disabled
+  .custom-control-input[type="checkbox"]:indeterminate:disabled
   ~ .custom-control-label::before {
   background-color: #dbdbdb;
   border-color: #dbdbdb;
@@ -507,7 +507,7 @@ input.btn-block[type="button"] {
   .custom-control-input:checked:disabled
   ~ .custom-control-label::after,
 .gl-form-checkbox.custom-control
-  .custom-control-input:indeterminate:disabled
+  .custom-control-input[type="checkbox"]:indeterminate:disabled
   ~ .custom-control-label::after {
   background-color: #5e5e5e;
 }
@@ -595,9 +595,6 @@ h3 {
   margin-top: 20px;
   margin-bottom: 10px;
 }
-a {
-  color: #1068bf;
-}
 hr {
   overflow: hidden;
 }
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss
index 4b74e449e06..8e8cabbe511 100644
--- a/app/assets/stylesheets/themes/_dark.scss
+++ b/app/assets/stylesheets/themes/_dark.scss
@@ -269,9 +269,9 @@ $well-expand-item: $gray-200;
 $well-inner-border: $gray-200;
 
 $calendar-activity-colors: (
-  #303030,
-  #333861,
-  #4a5593,
-  #6172c5,
-  #788ff7
+  #404040,
+  #1e23a8,
+  #445cf2,
+  #97acff,
+  #e9ebff
 );
diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss
index e1ba2a69420..a0d19c3de2a 100644
--- a/app/assets/stylesheets/themes/dark_mode_overrides.scss
+++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss
@@ -141,7 +141,8 @@ body.gl-dark {
   }
 }
 
-.timeline-entry.internal-note:not(.note-form) {
+.timeline-entry.internal-note:not(.note-form) .timeline-content,
+.timeline-entry.draft-note:not(.note-form) .timeline-content {
   // soften on darkmode
-  background-color: mix($gray-50, $orange-50, 75%);
+  background-color: mix($gray-50, $orange-50, 75%) !important;
 }
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index bdb8f758137..4be4fc82d04 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -75,10 +75,8 @@
 // .gl-font-size-inherit will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1466
 .gl-font-size-inherit,
 .font-size-inherit { font-size: inherit; }
-.gl-w-8 { width: px-to-rem($grid-size); }
 .gl-w-16 { width: px-to-rem($grid-size * 2); }
 .gl-w-64 { width: px-to-rem($grid-size * 8); }
-.gl-h-8 { height: px-to-rem($grid-size); }
 .gl-h-32 { height: px-to-rem($grid-size * 4); }
 .gl-h-64 { height: px-to-rem($grid-size * 8); }
 
@@ -119,13 +117,6 @@
   flex-basis: 25%;
 }
 
-// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1168
-.gl-md-ml-3 {
-  @media (min-width: $breakpoint-md) {
-    margin-left: $gl-spacing-scale-3;
-  }
-}
-
 // Will be moved to @gitlab/ui (without the !important) in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1462
 // We only need the bang (!) version until the non-bang version is added to
 // @gitlab/ui utitlities.scss. Once there, it will get loaded in the correct
@@ -152,48 +143,6 @@
   display: flex;
 }
 
-// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1085
-.gl-md-flex-direction-column {
-  @media (min-width: $breakpoint-md) {
-    flex-direction: column;
-  }
-}
-
-// Same as above
-.gl-md-flex-direction-column\! {
-  @media (min-width: $breakpoint-md) {
-    flex-direction: column !important;
-  }
-}
-
-// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1165
-.gl-xs-mb-4 {
-  @media (max-width: $breakpoint-sm) {
-    margin-bottom: $gl-spacing-scale-4;
-  }
-}
-
-// Same as above
-.gl-xs-mb-4\! {
-  @media (max-width: $breakpoint-sm) {
-    margin-bottom: $gl-spacing-scale-4 !important;
-  }
-}
-
-// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1168
-.gl-sm-pr-3 {
-  @media (min-width: $breakpoint-sm) {
-    padding-right: $gl-spacing-scale-3;
-  }
-}
-
-// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1168
-.gl-sm-w-half {
-  @media (min-width: $breakpoint-sm) {
-    width: 50%;
-  }
-}
-
 .gl-sm-mr-3 {
   @include media-breakpoint-up(sm) {
     margin-right: $gl-spacing-scale-3;
@@ -206,21 +155,10 @@
   }
 }
 
-.gl-mb-n3 {
-  margin-bottom: -$gl-spacing-scale-3;
-}
-
 .gl-mr-n2 {
   margin-right: -$gl-spacing-scale-2;
 }
 
-// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1408
-$gl-line-height-42: px-to-rem(42px);
-
-.gl-line-height-42 {
-  line-height: $gl-line-height-42;
-}
-
 .gl-w-grid-size-30 {
   width: $grid-size * 30;
 }
@@ -229,26 +167,6 @@ $gl-line-height-42: px-to-rem(42px);
   width: $grid-size * 40;
 }
 
-// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2209
-.gl-max-w-none\! {
-  max-width: none !important;
-}
-
-// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2209
-.gl-max-h-none\! {
-  max-height: none !important;
-}
-
-// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1655
-.gl-max-w-62 {
-  max-width: $grid-size * 62;
-}
-
-// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1655
-.gl-max-w-26 {
-  max-width: $grid-size * 26;
-}
-
 .gl-max-w-50p {
   max-width: 50%;
 }
@@ -271,36 +189,15 @@ $gl-line-height-42: px-to-rem(42px);
   }
 }
 
-// Will both be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1465
-.gl-text-transparent {
-  color: transparent;
-}
-
+// Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1465
 .gl-focus-ring-border-1-gray-900\! {
   @include gl-focus($gl-border-size-1, $gray-900, true);
 }
 
-// Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2600
-.gl-pr-10 {
-  padding-right: $gl-spacing-scale-10;
-}
-
 /*
 All of the following (up until the "End gitlab-ui#1709" comment) will be moved
 to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1709
 */
-.gl-sm-grid-template-columns-2 {
-  @include media-breakpoint-up(sm) {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-.gl-md-grid-template-columns-2 {
-  @include media-breakpoint-up(md) {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
 .gl-md-grid-template-columns-3 {
   @include media-breakpoint-up(md) {
     grid-template-columns: repeat(3, 1fr);
@@ -313,10 +210,6 @@ to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1709
   }
 }
 
-.gl-gap-6 {
-  gap: $gl-spacing-scale-6;
-}
-
 .gl-max-w-48 {
   max-width: $gl-spacing-scale-48;
 }
@@ -346,18 +239,6 @@ to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1709
 /* End gitlab-ui#1709 */
 
 /*
- * The below two styles will be moved to @gitlab/ui by
- * https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1750
- */
-.gl-max-w-34 {
-  max-width: 34 * $grid-size;
-}
-
-.gl-max-w-80 {
-  max-width: 80 * $grid-size;
-}
-
-/*
  * The below style will be moved to @gitlab/ui by
  * https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1751
  */
@@ -370,13 +251,3 @@ to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1709
 .gl-flex-flow-row-wrap {
   flex-flow: row wrap;
 }
-
-/*
- * The below style will be moved to @gitlab/ui by
- * https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1963
- */
-.gl-gap-y-3 {
-  > * + * {
-    margin-top: $gl-spacing-scale-3;
-  }
-}