Add latest changes from gitlab-org/gitlab@master

68 files changed, 269 insertions, 245 deletions

diff --git a/app/assets/stylesheets/components/avatar.scss b/app/assets/stylesheets/components/avatar.scss
index 23a7beb527b..8131cc23e95 100644
--- a/app/assets/stylesheets/components/avatar.scss
+++ b/app/assets/stylesheets/components/avatar.scss
@@ -206,7 +206,7 @@ $avatar-sizes: (
 
   &.user-popover-cannot-merge {
     .popover-header {
-      @include gl-bg-orange-50;
+      background-color: $orange-50;
     }
   }
 }
diff --git a/app/assets/stylesheets/components/whats_new.scss b/app/assets/stylesheets/components/whats_new.scss
index f8160c04031..2f6c7c43fc9 100644
--- a/app/assets/stylesheets/components/whats_new.scss
+++ b/app/assets/stylesheets/components/whats_new.scss
@@ -4,11 +4,11 @@
   width: 500px;
 
   .gl-infinite-scroll-legend {
-    @include gl-display-none;
+    display: none;
   }
 
   .gl-tabs {
-    @include gl-overflow-y-auto;
+    overflow-y: auto;
   }
 
   .gl-tabs-nav {
@@ -20,15 +20,15 @@
       @include gl-flex-shrink-0;
 
       a {
-        @include gl-h-full;
+        height: 100%;
         line-height: 1.5;
       }
     }
   }
 
   .gl-spinner-container {
-    @include gl-w-full;
-    @include gl-absolute;
+    width: 100%;
+    position: absolute;
     top: 50%;
     transform: translateY(-50%);
   }
diff --git a/app/assets/stylesheets/framework/badges.scss b/app/assets/stylesheets/framework/badges.scss
index 7c3684f7c2e..7fc0b93c61c 100644
--- a/app/assets/stylesheets/framework/badges.scss
+++ b/app/assets/stylesheets/framework/badges.scss
@@ -31,19 +31,20 @@
   .gl-badge.sm,
   .gl-badge.md,
   .gl-badge.lg {
-    @include gl-font-sm;
+    font-size: $gl-font-size-sm;
     padding-block: $gl-spacing-scale-1;
     padding-inline: calc(#{$gl-spacing-scale-3} - 2px);
 
     > .gl-icon {
-      @include gl-ml-0;
+      margin-left: 0;
     }
   }
 
   // These changes will be moved to
   // GitLab UI's button component
   .gl-button .gl-badge {
-    @include gl-py-0;
+    padding-top: 0;
+    padding-bottom: 0;
   }
 
   // These changes will be moved to
@@ -62,6 +63,6 @@
   // speciality this FF adds
   // the utility class gets overriden
   .gl-badge.ci-icon {
-    @include gl-p-2;
+    padding: $gl-spacing-scale-2;
   }
 }
diff --git a/app/assets/stylesheets/framework/brand_logo.scss b/app/assets/stylesheets/framework/brand_logo.scss
index 95dcb26c0c5..3ee37f1b192 100644
--- a/app/assets/stylesheets/framework/brand_logo.scss
+++ b/app/assets/stylesheets/framework/brand_logo.scss
@@ -1,12 +1,12 @@
 .brand-logo {
   display: inline-block;
-  @include gl-rounded-base;
-  @include gl-p-2;
-  @include gl-bg-transparent;
-  @include gl-border-none;
+  border-radius: $gl-border-radius-base;
+  padding: $gl-spacing-scale-2;
+  background-color: transparent;
+  border-style: none;
 
   .tanuki-logo {
-    @include gl-vertical-align-middle;
+    vertical-align: middle;
   }
 
   &:focus,
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 709c33a2ad8..260ef0ae380 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -126,7 +126,7 @@
 }
 
 @mixin btn-with-margin {
-  @include gl-ml-3;
+  margin-left: $gl-spacing-scale-3;
   float: left;
 
   &.inline {
@@ -352,7 +352,7 @@ fieldset[disabled] .btn,
 }
 
 copy-code {
-  @include gl-absolute;
+  position: absolute;
   @include gl-transition-medium;
   @include gl-opacity-0;
 
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 874cfa2fe53..66cb6a20ba5 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -528,7 +528,7 @@ li.note {
 
 .border-section {
   @include gl-py-6;
-  @include gl-m-0;
+  margin: 0;
 
   border-top: 1px solid $border-color;
 }
diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss
index 4a9f77316e6..9e96b1e4471 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar.scss
@@ -7,10 +7,10 @@
   @include context-header-collapsed;
 
   .context-header {
-    @include gl-h-auto;
+    height: auto;
 
     a {
-      @include gl-p-2;
+      padding: $gl-spacing-scale-2;
     }
   }
 
@@ -35,8 +35,8 @@
     }
 
     .icon-chevron-double-lg-left {
-      @include gl-rotate-180;
-      @include gl-m-0;
+      transform: rotate(180deg);
+      margin: 0;
     }
   }
 }
@@ -70,38 +70,40 @@
 @mixin sub-level-items-flyout {
   .sidebar-sub-level-items {
     @include media-breakpoint-up(sm) {
-      @include gl-fixed;
-      @include gl-top-0;
-      @include gl-left-0;
-      @include gl-ml-3;
-      @include gl-mt-0;
-      @include gl-px-0;
-      @include gl-pb-2;
-      @include gl-pt-0;
-      @include gl-bg-gray-10;
+      position: fixed;
+      top: 0;
+      left: 0;
+      margin-left: $gl-spacing-scale-3;
+      margin-top: 0;
+      padding-left: 0;
+      padding-right: 0;
+      padding-bottom: $gl-spacing-scale-2;
+      padding-top: 0;
+      background-color: $gray-10;
       box-shadow: 0 $gl-spacing-scale-2 $gl-spacing-scale-5 $t-gray-a-24, 0 0 $gl-spacing-scale-1 $t-gray-a-24;
       border-style: none;
       border-radius: $border-radius-default;
 
       .divider {
-        @include gl-display-none;
+        display: none;
       }
 
       .divider + li > a {
-        @include gl-mt-2;
+        margin-top: $gl-spacing-scale-2;
       }
 
       li:last-of-type a {
-        @include gl-mb-0;
+        margin-bottom: 0;
       }
 
       &.is-above {
-        @include gl-mt-0;
+        margin-top: 0;
       }
     }
 
     a {
-      @include gl-px-4;
+      padding-left: $gl-spacing-scale-4;
+      padding-right: $gl-spacing-scale-4;
     }
 
     .fly-out-top-item {
@@ -123,23 +125,24 @@
 @mixin context-header {
   $avatar-box-shadow: inset 0 0 0 1px $t-gray-a-08;
 
-  @include gl-p-2;
-  @include gl-mb-2;
-  @include gl-mt-1;
+  padding: $gl-spacing-scale-2;
+  margin-bottom: $gl-spacing-scale-2;
+  margin-top: $gl-spacing-scale-1;
 
   .avatar-container {
-    @include gl-font-weight-normal;
+    font-weight: $gl-font-weight-normal;
     flex: none;
   }
 }
 
 @mixin top-level-item {
-  @include gl-h-7;
-  @include gl-px-4;
-  @include gl-display-flex;
-  @include gl-align-items-center;
-  @include gl-rounded-base;
-  @include gl-w-auto;
+  height: $gl-spacing-scale-7;
+  padding-left: $gl-spacing-scale-4;
+  padding-right: $gl-spacing-scale-4;
+  display: flex;
+  align-items: center;
+  border-radius: $gl-border-radius-base;
+  width: auto;
   transition: none;
   margin: $sidebar-top-item-tb-margin $sidebar-top-item-lr-margin;
 
@@ -149,35 +152,37 @@
 }
 
 @mixin fly-out-top-item($has-sub-items: false) {
-  @include gl-display-none;
+  display: none;
 
   a,
   a:hover,
   &.active a,
   .fly-out-top-item-container {
-    @include gl-mx-0;
-    @include gl-px-5;
-    @include gl-cursor-default;
-    @include gl-pointer-events-none;
-    @include gl-font-sm;
+    margin-left: 0;
+    margin-right: 0;
+    padding-left: $gl-spacing-scale-5;
+    padding-right: $gl-spacing-scale-5;
+    cursor: default;
+    pointer-events: none;
+    font-size: $gl-font-size-sm;
 
     @if $has-sub-items {
-      @include gl-mt-0;
+      margin-top: 0;
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     } @else {
-      @include gl-my-n2;
-      @include gl-mt-0;
-      @include gl-relative;
-      @include gl-text-white;
+      margin-bottom: -#{$gl-spacing-scale-2};
+      margin-top: 0;
+      position: relative;
+      color: $white;
       background: var(--black, $black);
 
       strong {
-        @include gl-font-weight-normal;
+        font-weight: $gl-font-weight-normal;
       }
 
       &::before {
-        @include gl-absolute;
+        position: absolute;
         content: '';
         display: block;
         top: 50%;
@@ -219,7 +224,7 @@
   }
 
   a {
-    @include gl-text-decoration-none;
+    text-decoration: none;
     color: $gray-900;
   }
 
@@ -281,10 +286,10 @@
   }
 
   a.has-sub-items + .sidebar-sub-level-items.fly-out-list {
-    @include gl-mt-n2;
+    margin-top: -$gl-spacing-scale-2;
 
     &.is-above {
-      @include gl-mt-2;
+      margin-top: $gl-spacing-scale-2;
     }
   }
 
@@ -297,18 +302,18 @@
 }
 
 .nav-sidebar-inner-scroll {
-  @include gl-h-full;
-  @include gl-w-full;
-  @include gl-overflow-x-hidden;
-  @include gl-overflow-y-auto;
+  height: 100%;
+  width: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
 
   > div.context-header {
-    @include gl-mt-2;
+    margin-top: $gl-spacing-scale-2;
 
     a {
       @include top-level-item;
       @include context-header;
-      @include gl-h-auto;
+      height: auto;
     }
   }
 }
@@ -318,7 +323,7 @@
 
   .context-header a {
     @include context-header;
-    @include gl-h-auto;
+    height: auto;
   }
 
   > li {
@@ -332,19 +337,20 @@
   li > a.gl-link {
     // undo gl-link text items for things in the sidebar - including sub menus
     // defined in https://gitlab.com/gitlab-org/gitlab-ui/-/blob/5431e0ca5149d4e02e3d5d617d194ac9609bb82d/src/components/base/link/link.scss
-    @include gl-text-body;
+    color: $body-color;
 
     &:active,
     &:focus,
     &:focus:active {
-      @include gl-text-decoration-none;
+      text-decoration: none;
     }
   }
 }
 
 .sidebar-sub-level-items {
-  @include gl-py-0;
-  @include gl-display-none;
+  padding-top: 0;
+  padding-bottom: 0;
+  display: none;
 
   &:not(.fly-out-list) {
     li > a {
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 2558ddec9b9..415d1532b15 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -662,12 +662,13 @@
   display: block;
   width: 100%;
   min-height: 30px;
-  @include gl-py-0;
+  padding-top: 0;
+  padding-bottom: 0;
   @include gl-px-3;
   color: $gray-700;
   line-height: 30px;
   border: 1px solid $gray-400;
-  @include gl-rounded-base;
+  border-radius: $gl-border-radius-base;
   outline: 0;
 
   &:focus {
@@ -944,7 +945,7 @@
 
   .gl-button-text {
     display: flex;
-    @include gl-w-full;
+    width: 100%;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 7dcde5f0b3c..2c01f650ae3 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -415,7 +415,7 @@ span.idiff {
 .version-link {
   @include gl-display-inline-block;
   @include gl-align-self-center;
-  @include gl-mt-2;
+  margin-top: $gl-spacing-scale-2;
   @include gl-w-5;
   @include gl-h-5;
   @include gl-float-left;
@@ -472,7 +472,7 @@ span.idiff {
 // not render those elements, the browser doesn't need to spend resources
 // calculating and repainting what's hidden.
 .file-holder [data-loading] .file-content *:nth-of-type(1n+30) {
-  @include gl-display-none;
+  display: none;
 }
 
 .mr-tree-list:not(.tree-list-blobs) {
@@ -480,9 +480,9 @@ span.idiff {
 
   .tree-list-parent::before {
     @include gl-content-empty;
-    @include gl-absolute;
+    position: absolute;
     @include gl-z-index-1;
-    @include gl-pointer-events-none;
+    pointer-events: none;
 
     top: -4px;
     left: 0;
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index 5949a1b2809..7c24cd0385c 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -358,11 +358,11 @@
 
   .filter-dropdown-container {
     > div {
-      @include gl-m-0;
+      margin: 0;
 
       > .btn {
         margin: 0 0 $gl-input-padding;
-        @include gl-w-full;
+        width: 100%;
       }
     }
 
diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss
index 56667c10752..259f806c315 100644
--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -91,7 +91,7 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25);
     .flash-notice,
     .flash-success,
     .flash-warning {
-      @include gl-mt-0;
+      margin-top: 0;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 3e1dff18f2a..7187d2c399f 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -49,7 +49,7 @@ input[type='search'] {
 
   &::-webkit-search-cancel-button,
   &::-webkit-search-results-button {
-    @include gl-display-none;
+    display: none;
   }
 }
 /* stylelint-enable property-no-vendor-prefix */
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 84e69e40bc2..ddb13b73973 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -124,13 +124,13 @@
     height: 32px;
     border-radius: $border-radius-default;
     @include gl-text-gray-100;
-    @include gl-font-weight-normal;
+    font-weight: $gl-font-weight-normal;
     @include gl-font-base;
 
     &:hover,
     &:focus,
     &:active {
-      @include gl-text-white;
+      color: $white;
     }
 
     &:hover,
diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss
index a93c2191016..c499c9e9ffc 100644
--- a/app/assets/stylesheets/framework/highlight.scss
+++ b/app/assets/stylesheets/framework/highlight.scss
@@ -49,7 +49,7 @@
     a {
       font-family: $monospace-font;
       white-space: nowrap;
-      @include gl-display-flex;
+      display: flex;
       @include gl-justify-content-end;
 
       i,
@@ -97,7 +97,7 @@ td.line-numbers {
     min-width: 6rem;
     // for server-side-rendering
     .line-links {
-      @include gl-display-flex;
+      display: flex;
     }
 
     // for client
@@ -125,12 +125,12 @@ td.line-numbers {
   }
 
   .file-line-blame {
-    @include gl-ml-3;
+    margin-left: $gl-spacing-scale-3;
   }
 
   .file-line-num,
   .file-line-blame {
-    @include gl-align-items-center;
-    @include gl-display-flex;
+    align-items: center;
+    display: flex;
   }
 }
diff --git a/app/assets/stylesheets/framework/kbd.scss b/app/assets/stylesheets/framework/kbd.scss
index 16e0214c703..20ecc61faae 100644
--- a/app/assets/stylesheets/framework/kbd.scss
+++ b/app/assets/stylesheets/framework/kbd.scss
@@ -1,7 +1,7 @@
 kbd {
   display: inline-block;
   padding: 3px 5px;
-  @include gl-font-sm;
+  font-size: $gl-font-size-sm;
   line-height: 10px;
   color: var(--gray-700, $gray-700);
   vertical-align: unset;
diff --git a/app/assets/stylesheets/framework/labels.scss b/app/assets/stylesheets/framework/labels.scss
index 1933af5151c..116d9c489eb 100644
--- a/app/assets/stylesheets/framework/labels.scss
+++ b/app/assets/stylesheets/framework/labels.scss
@@ -24,7 +24,7 @@
 
     .gl-label-text,
     .gl-label-text-scoped {
-      @include gl-font-sm;
+      font-size: $gl-font-size-sm;
       padding-block: $gl-spacing-scale-1;
       padding-inline: calc(#{$gl-spacing-scale-3} - 2px);
     }
diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index 4ef53c673f6..a1ccc9d0cdb 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -137,7 +137,7 @@ body {
 }
 
 .gl--flex-full {
-  @include gl-display-flex;
+  display: flex;
   @include gl-align-items-stretch;
   @include gl-overflow-hidden;
 }
diff --git a/app/assets/stylesheets/framework/new_card.scss b/app/assets/stylesheets/framework/new_card.scss
index 1432e7a174c..a244439d88e 100644
--- a/app/assets/stylesheets/framework/new_card.scss
+++ b/app/assets/stylesheets/framework/new_card.scss
@@ -1,15 +1,16 @@
 .gl-new-card {
   @include gl-mt-5;
-  @include gl-bg-gray-10;
+  background-color: $gray-10;
   @include gl-border-1;
   @include gl-border-solid;
   @include gl-border-gray-100;
-  @include gl-rounded-base;
+  border-radius: $gl-border-radius-base;
 
   &-header {
-    @include gl-px-5;
+    padding-left: $gl-spacing-scale-5;
+    padding-right: $gl-spacing-scale-5;
     @include gl-py-4;
-    @include gl-display-flex;
+    display: flex;
     @include gl-justify-content-space-between;
     @include gl-bg-white;
     @include gl-border-b-1;
@@ -20,20 +21,20 @@
 
   &[aria-expanded=false] &-header {
     @include gl-border-bottom-0;
-    @include gl-rounded-base;
+    border-radius: $gl-border-radius-base;
   }
 
   &-title-wrapper {
-    @include gl-display-flex;
+    display: flex;
     @include gl-flex-grow-1;
   }
 
   &-title {
-    @include gl-display-flex;
+    display: flex;
     @include gl-font-base;
     @include gl-font-weight-bold;
-    @include gl-relative;
-    @include gl-m-0;
+    position: relative;
+    margin: 0;
     @include gl-line-height-24;
   }
 
@@ -43,18 +44,18 @@
     @include gl-font-weight-bold;
     @include gl-text-gray-500;
     @include gl-display-inline-flex;
-    @include gl-align-items-center;
+    align-items: center;
   }
 
   &-description {
-    @include gl-font-sm;
+    font-size: $gl-font-size-sm;
     @include gl-text-gray-500;
-    @include gl-m-0;
+    margin: 0;
   }
 
   &-toggle {
     @include gl-pl-3;
-    @include gl-ml-3;
+    margin-left: $gl-spacing-scale-3;
     @include gl-mr-n2;
     @include gl-border-l-1;
     @include gl-border-l-solid;
@@ -64,17 +65,19 @@
   &-body {
     @include gl-rounded-bottom-base;
     @include gl-px-3;
-    @include gl-py-0;
+    padding-top: 0;
+    padding-bottom: 0;
   }
 
   &-content {
     @include gl-px-2;
-    @include gl-py-3;
+    padding-top: $gl-spacing-scale-3;
+    padding-bottom: $gl-spacing-scale-3;
   }
 
   &-empty {
-    @include gl-p-2;
-    @include gl-mb-0;
+    padding: $gl-spacing-scale-2;
+    margin-bottom: 0;
     @include gl-text-gray-500;
   }
 
@@ -89,7 +92,7 @@
     @include gl-border-1;
     @include gl-border-solid;
     @include gl-border-gray-100;
-    @include gl-rounded-base;
+    border-radius: $gl-border-radius-base;
   }
 }
 
@@ -123,14 +126,14 @@
       }
 
       &:last-child::after {
-        @include gl-display-none;
+        display: none;
       }
     }
   }
 
   table.b-table-stacked-sm,
   table.b-table-stacked-md {
-    @include gl-mb-0;
+    margin-bottom: 0;
 
     tr:first-of-type th {
       @include gl-border-t-0;
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index 9bf6ed45483..3f3286cef1d 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -42,15 +42,15 @@
   width: calc(70% - #{$gl-spacing-scale-5});
 
   .gl-new-dropdown-toggle {
-    @include gl-w-full;
+    width: 100%;
   }
 
   .dropdown-menu {
-    @include gl-w-full;
+    width: 100%;
     @include gl-max-w-none;
   }
 
   .gl-dropdown-item-check-icon {
-    @include gl-display-none;
+    display: none;
   }
 }
diff --git a/app/assets/stylesheets/framework/source_editor.scss b/app/assets/stylesheets/framework/source_editor.scss
index 2b597634519..5a3863745ee 100644
--- a/app/assets/stylesheets/framework/source_editor.scss
+++ b/app/assets/stylesheets/framework/source_editor.scss
@@ -1,8 +1,8 @@
 [data-editor-loading] {
-  @include gl-relative;
-  @include gl-display-flex;
+  position: relative;
+  display: flex;
   @include gl-justify-content-center;
-  @include gl-align-items-center;
+  align-items: center;
   @include gl-z-index-0;
 
   > * {
@@ -12,7 +12,7 @@
   &::before {
     content: '';
     @include spinner-deprecated(32px, 3px);
-    @include gl-absolute;
+    position: absolute;
     @include gl-z-index-1;
   }
 
@@ -26,13 +26,13 @@
 }
 
 .source-editor-preview {
-  @include gl-display-flex;
+  display: flex;
 
   .md {
     @include gl-overflow-scroll;
     @include gl-px-6;
     @include gl-py-4;
-    @include gl-w-full;
+    width: 100%;
   }
 
   .gl-source-editor {
@@ -67,9 +67,9 @@
 
   .margin-view-overlays {
     .line-numbers {
-      @include gl-display-flex;
+      display: flex;
       @include gl-justify-content-end;
-      @include gl-relative;
+      position: relative;
 
       &::before {
         @include gl-visibility-hidden;
@@ -101,9 +101,9 @@
 
       .link-anchor {
         @include gl-display-block;
-        @include gl-absolute;
-        @include gl-w-full;
-        @include gl-h-full;
+        position: absolute;
+        width: 100%;
+        height: 100%;
       }
     }
   }
diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss
index af837f57931..0cb35bc117b 100644
--- a/app/assets/stylesheets/framework/super_sidebar.scss
+++ b/app/assets/stylesheets/framework/super_sidebar.scss
@@ -232,7 +232,7 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
     background-color: var(--super-sidebar-user-bar-bg);
 
     .user-bar-dropdown-toggle {
-      @include gl-p-2;
+      padding: $gl-spacing-scale-2;
       @include gl-border-none;
 
       &[aria-expanded='true'] {
@@ -482,7 +482,7 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
   }
 
   .gl-search-box-by-type-input-borderless {
-    @include gl-rounded-base;
+    border-radius: $gl-border-radius-base;
   }
 
   .global-search-results {
@@ -494,7 +494,8 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
 
     // Target groups
     [id*='gl-disclosure-dropdown-group'] {
-      @include gl-px-5;
+      padding-left: $gl-spacing-scale-5;
+      padding-right: $gl-spacing-scale-5;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index b28a93749d1..fa8eee8b116 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -41,7 +41,7 @@ table {
       }
 
       th {
-        @include gl-bg-gray-10;
+        background-color: $gray-10;
         border-bottom: 0;
 
         &.wide {
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 15e794fc347..25eeadfad45 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -129,11 +129,14 @@
   blockquote,
   .blockquote {
     font-size: inherit;
-    @include gl-text-gray-700;
-    @include gl-py-3;
-    @include gl-pl-6;
-    @include gl-my-3;
-    @include gl-mx-0;
+    color: $gray-700;
+    padding-top: $gl-spacing-scale-3;
+    padding-bottom: $gl-spacing-scale-3;
+    padding-left: $gl-spacing-scale-6;
+    margin-top: $gl-spacing-scale-3;
+    margin-bottom: $gl-spacing-scale-3;
+    margin-left: 0;
+    margin-right: 0;
     @include gl-inset-border-l-4-gray-100;
 
     &:dir(rtl) {
@@ -657,7 +660,7 @@ body {
 
 /** CODE **/
 pre {
-  @include gl-relative;
+  position: relative;
   font-family: $monospace-font;
   display: block;
   padding: $gl-padding-8 $input-horizontal-padding;
diff --git a/app/assets/stylesheets/notify_enhanced.scss b/app/assets/stylesheets/notify_enhanced.scss
index a3e02dabe0e..36f8c68d99f 100644
--- a/app/assets/stylesheets/notify_enhanced.scss
+++ b/app/assets/stylesheets/notify_enhanced.scss
@@ -37,11 +37,11 @@ pre {
 }
 
 .gl-mb-5 {
-  @include gl-mb-5;
+  margin-bottom: $gl-spacing-scale-5;
 }
 
 .gl-mt-5 {
-  @include gl-mt-5;
+  margin-top: $gl-spacing-scale-5;
 }
 
 .content {
diff --git a/app/assets/stylesheets/page_bundles/alert_management_details.scss b/app/assets/stylesheets/page_bundles/alert_management_details.scss
index d67dadafa9e..0890fefe910 100644
--- a/app/assets/stylesheets/page_bundles/alert_management_details.scss
+++ b/app/assets/stylesheets/page_bundles/alert_management_details.scss
@@ -3,7 +3,7 @@
 .alert-management-details {
   @include media-breakpoint-down(xs) {
     .alert-details-incident-button {
-      @include gl-w-full;
+      width: 100%;
     }
   }
 
@@ -20,7 +20,7 @@
   .dropdown-item {
     &:first-child {
       &::before {
-        @include gl-pt-0;
+        padding-top: 0;
       }
     }
 
@@ -29,7 +29,8 @@
     }
 
     .gl-dropdown-item-text-wrapper {
-      @include gl-py-0;
+      padding-top: 0;
+      padding-bottom: 0;
     }
   }
 
@@ -38,6 +39,6 @@
   }
 
   .note-header-info {
-    @include gl-mt-1;
+    margin-top: $gl-spacing-scale-1;
   }
 }
diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss
index 66482ef42b5..1b9498000ae 100644
--- a/app/assets/stylesheets/page_bundles/boards.scss
+++ b/app/assets/stylesheets/page_bundles/boards.scss
@@ -101,7 +101,7 @@
   box-shadow: 0 1px 2px rgba(var(--black, $black), 0.1);
 
   &:last-child {
-    @include gl-mb-0;
+    margin-bottom: 0;
   }
 
   .move-to-position {
@@ -225,11 +225,11 @@
   padding-bottom: 0.5rem;
 
   .sidebar-collapsed-icon {
-    @include gl-display-none;
+    display: none;
   }
 
   .show.dropdown .dropdown-menu {
-    @include gl-w-full;
+    width: 100%;
   }
 }
 
diff --git a/app/assets/stylesheets/page_bundles/build.scss b/app/assets/stylesheets/page_bundles/build.scss
index 379f1470b20..4f6321cf2cd 100644
--- a/app/assets/stylesheets/page_bundles/build.scss
+++ b/app/assets/stylesheets/page_bundles/build.scss
@@ -154,7 +154,7 @@
 
 .build-sidebar-item {
   &:last-of-type {
-    @include gl-mb-0;
+    margin-bottom: 0;
   }
 }
 
diff --git a/app/assets/stylesheets/page_bundles/cluster_agents.scss b/app/assets/stylesheets/page_bundles/cluster_agents.scss
index d1fab55738f..f458b5a626a 100644
--- a/app/assets/stylesheets/page_bundles/cluster_agents.scss
+++ b/app/assets/stylesheets/page_bundles/cluster_agents.scss
@@ -3,7 +3,7 @@
 .agent-activity-list {
   .system-note .timeline-entry-inner {
     .timeline-icon {
-      @include gl-mt-1;
+      margin-top: $gl-spacing-scale-1;
     }
   }
 
diff --git a/app/assets/stylesheets/page_bundles/clusters.scss b/app/assets/stylesheets/page_bundles/clusters.scss
index 4d75159e87a..7c46b836ddc 100644
--- a/app/assets/stylesheets/page_bundles/clusters.scss
+++ b/app/assets/stylesheets/page_bundles/clusters.scss
@@ -3,12 +3,12 @@
 .clusters-container {
   @include media-breakpoint-down(xs) {
     .nav-controls {
-      @include gl-w-full;
+      width: 100%;
       order: -1;
 
       .gl-dropdown,
       .split-content-button {
-        @include gl-w-full;
+        width: 100%;
       }
     }
   }
diff --git a/app/assets/stylesheets/page_bundles/editor.scss b/app/assets/stylesheets/page_bundles/editor.scss
index c950f277264..3e208446147 100644
--- a/app/assets/stylesheets/page_bundles/editor.scss
+++ b/app/assets/stylesheets/page_bundles/editor.scss
@@ -4,14 +4,14 @@
   #editor,
   .editor {
     @include gl-border-0;
-    @include gl-m-0;
-    @include gl-p-0;
-    @include gl-relative;
-    @include gl-w-full;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    width: 100%;
     height: 500px;
 
     .editor-loading-content {
-      @include gl-h-full;
+      height: 100%;
       @include gl-border-0;
     }
   }
diff --git a/app/assets/stylesheets/page_bundles/escalation_policies.scss b/app/assets/stylesheets/page_bundles/escalation_policies.scss
index 49423fccea4..604533e199c 100644
--- a/app/assets/stylesheets/page_bundles/escalation_policies.scss
+++ b/app/assets/stylesheets/page_bundles/escalation_policies.scss
@@ -39,7 +39,7 @@ $stroke-size: 1px;
   }
 
   @media (max-width: $breakpoint-lg) {
-    @include gl-w-full;
+    width: 100%;
   }
 }
 
diff --git a/app/assets/stylesheets/page_bundles/incident_management_list.scss b/app/assets/stylesheets/page_bundles/incident_management_list.scss
index 312d5c2b10c..ecfc481bb44 100644
--- a/app/assets/stylesheets/page_bundles/incident_management_list.scss
+++ b/app/assets/stylesheets/page_bundles/incident_management_list.scss
@@ -13,7 +13,7 @@
 
       > .gl-tab-counter-badge {
         @include gl-reset-color;
-        @include gl-font-sm;
+        font-size: $gl-font-size-sm;
         background-color: var(--gray-50, $gray-50);
       }
     }
@@ -25,7 +25,7 @@
     }
 
     .create-incident-button {
-      @include gl-w-full;
+      width: 100%;
     }
   }
 }
diff --git a/app/assets/stylesheets/page_bundles/incidents.scss b/app/assets/stylesheets/page_bundles/incidents.scss
index c7873473b86..4be4cac2075 100644
--- a/app/assets/stylesheets/page_bundles/incidents.scss
+++ b/app/assets/stylesheets/page_bundles/incidents.scss
@@ -75,7 +75,7 @@
 }
 
 .timeline-event-note .md p {
-  @include gl-text-gray-700;
+  color: $gray-700;
 }
 
 .timeline-event-note-date {
diff --git a/app/assets/stylesheets/page_bundles/issuable.scss b/app/assets/stylesheets/page_bundles/issuable.scss
index 05563f8e314..89c27ad63fc 100644
--- a/app/assets/stylesheets/page_bundles/issuable.scss
+++ b/app/assets/stylesheets/page_bundles/issuable.scss
@@ -98,10 +98,10 @@
 
 .merge-request-notification-toggle {
   .gl-toggle {
-    @include gl-ml-auto;
+    margin-left: auto;
   }
 
   .gl-toggle-label {
-    @include gl-font-weight-normal;
+    font-weight: $gl-font-weight-normal;
   }
 }
diff --git a/app/assets/stylesheets/page_bundles/login.scss b/app/assets/stylesheets/page_bundles/login.scss
index f4313518427..f46d80e2525 100644
--- a/app/assets/stylesheets/page_bundles/login.scss
+++ b/app/assets/stylesheets/page_bundles/login.scss
@@ -111,7 +111,7 @@
 
 @include media-breakpoint-down(sm) {
   .sm-bg-gray {
-    @include gl-bg-gray-10;
+    background-color: $gray-10;
 
     .gl-dark & {
       background-color: var(--gray-100);
diff --git a/app/assets/stylesheets/page_bundles/merge_request.scss b/app/assets/stylesheets/page_bundles/merge_request.scss
index 70aeedb10bf..393e21f7950 100644
--- a/app/assets/stylesheets/page_bundles/merge_request.scss
+++ b/app/assets/stylesheets/page_bundles/merge_request.scss
@@ -151,7 +151,7 @@ $comparison-empty-state-height: 62px;
   }
 
   .gl-dropdown-custom-toggle {
-    @include gl-w-full;
+    width: 100%;
   }
 }
 
@@ -347,9 +347,9 @@ $comparison-empty-state-height: 62px;
 }
 
 .mr-compare-dropdown {
-  @include gl-w-full;
+  width: 100%;
 
   .gl-button-text {
-    @include gl-w-full;
+    width: 100%;
   }
 }
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index b8b31dfcea5..8c14075bec2 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -812,7 +812,8 @@ $tabs-holder-z-index: 250;
 
 .mr-widget-body-ready-merge {
   @include media-breakpoint-down(sm) {
-    @include gl-py-3;
+    padding-top: $gl-spacing-scale-3;
+    padding-bottom: $gl-spacing-scale-3;
     @include gl-pr-3;
   }
 }
@@ -840,7 +841,7 @@ $tabs-holder-z-index: 250;
   container-type: inline-size;
   // Adds a fix for the view app dropdown not showing up
   // correctly.
-  @include gl-relative;
+  position: relative;
   @include gl-z-index-1;
 
   &.clickable:hover {
@@ -851,7 +852,7 @@ $tabs-holder-z-index: 250;
 
 .mr-widget-extension-icon::before {
   @include gl-content-empty;
-  @include gl-absolute;
+  position: absolute;
   @include gl-left-50p;
   @include gl-top-half;
   @include gl-opacity-3;
@@ -866,7 +867,7 @@ $tabs-holder-z-index: 250;
 
 .mr-widget-extension-icon::after {
   @include gl-content-empty;
-  @include gl-absolute;
+  position: absolute;
   @include gl-rounded-full;
   @include gl-left-50p;
   @include gl-top-half;
@@ -994,7 +995,8 @@ $tabs-holder-z-index: 250;
   .flash-container {
     @include gl-mx-auto;
     @include gl-max-w-container-xl;
-    @include gl-px-5;
+    padding-left: $gl-spacing-scale-5;
+    padding-right: $gl-spacing-scale-5;
   }
 }
 
@@ -1029,7 +1031,7 @@ $tabs-holder-z-index: 250;
 .mr-widget-merge-details {
   *,
   & {
-    @include gl-font-sm;
+    font-size: $gl-font-size-sm;
   }
 
   p {
@@ -1037,7 +1039,7 @@ $tabs-holder-z-index: 250;
   }
 
   li:not(:last-child) {
-    @include gl-mb-2;
+    margin-bottom: $gl-spacing-scale-2;
   }
 }
 
@@ -1048,7 +1050,7 @@ $tabs-holder-z-index: 250;
 
   &:hover,
   &:focus {
-    @include gl-text-decoration-none;
+    text-decoration: none;
   }
 }
 
@@ -1059,19 +1061,19 @@ $tabs-holder-z-index: 250;
 
 .merge-request-notification-toggle {
   .gl-toggle {
-    @include gl-ml-auto;
+    margin-left: auto;
   }
 
   .gl-toggle-label {
-    @include gl-font-weight-normal;
+    font-weight: $gl-font-weight-normal;
   }
 }
 
 .mr-widget-status-icon-level-1::before {
   @include gl-content-empty;
-  @include gl-absolute;
-  @include gl-left-0;
-  @include gl-top-0;
+  position: absolute;
+  left: 0;
+  top: 0;
   @include gl-bottom-0;
   @include gl-right-0;
   @include gl-opacity-3;
@@ -1082,7 +1084,7 @@ $tabs-holder-z-index: 250;
 
 .mr-widget-status-icon-level-1::after {
   @include gl-content-empty;
-  @include gl-absolute;
+  position: absolute;
   @include gl-rounded-full;
   @include gl-border-solid;
   @include gl-border-4;
@@ -1192,10 +1194,10 @@ $tabs-holder-z-index: 250;
 }
 
 .diff-file-discussions-wrapper {
-  @include gl-w-full;
+  width: 100%;
 
   .diff-discussions:not(:first-child) >.notes {
-    @include gl-pt-0;
+    padding-top: 0;
   }
 
   .note-discussion {
@@ -1203,7 +1205,7 @@ $tabs-holder-z-index: 250;
   }
 
   .discussion-collapsible {
-    @include gl-m-0;
+    margin: 0;
     @include gl-border-l-0;
     @include gl-border-r-0;
     @include gl-border-b-0;
diff --git a/app/assets/stylesheets/page_bundles/oncall_schedules.scss b/app/assets/stylesheets/page_bundles/oncall_schedules.scss
index 10cc6cbd78e..8c00438a0b9 100644
--- a/app/assets/stylesheets/page_bundles/oncall_schedules.scss
+++ b/app/assets/stylesheets/page_bundles/oncall_schedules.scss
@@ -5,7 +5,7 @@
 }
 
 .modal-footer {
-  @include gl-bg-gray-10;
+  background-color: $gray-10;
 }
 
 .invalid-dropdown {
@@ -65,13 +65,13 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi
 
 .list-section .details-cell {
   &::after {
-    @include gl-h-full;
+    height: 100%;
     @include gl-content-empty;
-    @include gl-absolute;
-    @include gl-top-0;
+    position: absolute;
+    top: 0;
     right: -$grid-size;
     width: $grid-size;
-    @include gl-pointer-events-none;
+    pointer-events: none;
     background: $column-right-gradient;
   }
 }
diff --git a/app/assets/stylesheets/page_bundles/organizations.scss b/app/assets/stylesheets/page_bundles/organizations.scss
index 1f1d127a82a..de1b6d6c2e7 100644
--- a/app/assets/stylesheets/page_bundles/organizations.scss
+++ b/app/assets/stylesheets/page_bundles/organizations.scss
@@ -2,7 +2,7 @@
 
 // Modeled after projects.scss and groups.scss
 .organization-row .organization-description p {
-  @include gl-mb-0;
+  margin-bottom: 0;
 }
 
 .organization-root-path {
diff --git a/app/assets/stylesheets/page_bundles/pipeline_editor.scss b/app/assets/stylesheets/page_bundles/pipeline_editor.scss
index 13d158b08fe..ae832f61086 100644
--- a/app/assets/stylesheets/page_bundles/pipeline_editor.scss
+++ b/app/assets/stylesheets/page_bundles/pipeline_editor.scss
@@ -1,7 +1,7 @@
 @import 'mixins_and_variables_and_functions';
 
 .file-tree-container {
-  @include gl-w-full;
+  width: 100%;
 
   @media (min-width: $breakpoint-md) {
     width: 300px;
diff --git a/app/assets/stylesheets/page_bundles/projects.scss b/app/assets/stylesheets/page_bundles/projects.scss
index bfa350097fa..c560740a742 100644
--- a/app/assets/stylesheets/page_bundles/projects.scss
+++ b/app/assets/stylesheets/page_bundles/projects.scss
@@ -297,7 +297,7 @@
       @include basic-list-stats;
 
       .description > p {
-        @include gl-mb-0;
+        margin-bottom: 0;
       }
     }
 
@@ -309,7 +309,7 @@
   .project-details {
     p,
     .commit-row-message {
-      @include gl-mb-0;
+      margin-bottom: 0;
       @include str-truncated(100%);
     }
 
@@ -328,7 +328,7 @@
         &:not(.with-pipeline-status) {
           .icon-wrapper:first-of-type {
             @include media-breakpoint-up(lg) {
-              @include gl-ml-7;
+              margin-left: $gl-spacing-scale-7;
             }
           }
         }
@@ -355,12 +355,12 @@
     .icon-wrapper {
       @include media-breakpoint-down(md) {
         @include gl-mr-0;
-        @include gl-ml-3;
+        margin-left: $gl-spacing-scale-3;
       }
 
       @include media-breakpoint-down(xs) {
         &:first-child {
-          @include gl-ml-0;
+          margin-left: 0;
         }
       }
     }
@@ -374,7 +374,7 @@
 
   &.compact {
     .description {
-      @include gl-w-full;
+      width: 100%;
       @include gl-display-table;
       @include gl-table-layout-fixed;
     }
@@ -391,12 +391,12 @@
 
     .updated-note {
       @include media-breakpoint-up(sm) {
-        @include gl-mt-2;
+        margin-top: $gl-spacing-scale-2;
       }
     }
 
     .icon-wrapper {
-      @include gl-ml-3;
+      margin-left: $gl-spacing-scale-3;
       @include gl-mr-0;
     }
 
@@ -415,7 +415,7 @@
   .forks,
   .pipeline-status,
   .updated-note {
-    @include gl-display-flex;
+    display: flex;
   }
 
   @include media-breakpoint-down(md) {
@@ -429,7 +429,7 @@
 
   @include media-breakpoint-down(xs) {
     .updated-note {
-      @include gl-mt-0;
+      margin-top: 0;
       @include gl-text-left;
     }
   }
diff --git a/app/assets/stylesheets/page_bundles/search.scss b/app/assets/stylesheets/page_bundles/search.scss
index 87d0d5b91d3..65a82d9aedb 100644
--- a/app/assets/stylesheets/page_bundles/search.scss
+++ b/app/assets/stylesheets/page_bundles/search.scss
@@ -379,7 +379,7 @@ input[type='search'] {
 
   &::-webkit-search-cancel-button,
   &::-webkit-search-results-button {
-    @include gl-display-none;
+    display: none;
   }
 }
 /* stylelint-enable property-no-vendor-prefix */
diff --git a/app/assets/stylesheets/page_bundles/todos.scss b/app/assets/stylesheets/page_bundles/todos.scss
index beee219f51f..6fa92a2ea20 100644
--- a/app/assets/stylesheets/page_bundles/todos.scss
+++ b/app/assets/stylesheets/page_bundles/todos.scss
@@ -14,7 +14,7 @@
   button,
   a:not(.todo-target-link),
   time {
-    @include gl-relative;
+    position: relative;
   }
 
   // overwrite border style of .content-list
@@ -50,10 +50,10 @@
   .todo-label a::before {
     // Make area of the todo item clickable by expanding the area around the todo link
     @include gl-content-empty;
-    @include gl-absolute;
-    @include gl-left-0;
+    position: absolute;
+    left: 0;
     @include gl-right-0;
-    @include gl-top-0;
+    top: 0;
     @include gl-bottom-0;
     z-index: 9;
   }
@@ -77,11 +77,12 @@
   }
 
   pre.code.highlight {
-    @include gl-py-0;
+    padding-top: 0;
+  padding-bottom: 0;
     @include gl-px-1;
-    @include gl-m-0;
+    margin: 0;
     @include gl-border-0;
-    @include gl-rounded-base;
+    border-radius: $gl-border-radius-base;
     @include gl-display-inline-flex;
     background: var(--gray-50, $gray-50);
     color: var(--gl-text-color, $gl-text-color);
@@ -92,7 +93,7 @@
   }
 
   .avatar {
-    @include gl-mb-0;
+    margin-bottom: 0;
   }
 }
 
@@ -103,10 +104,10 @@
 }
 
 .todo-actions {
-  @include gl-absolute;
+  position: absolute;
   @include gl-right-0;
 
   @include media-breakpoint-up(sm) {
-    @include gl-relative;
+    position: relative;
   }
 }
diff --git a/app/assets/stylesheets/page_bundles/wiki.scss b/app/assets/stylesheets/page_bundles/wiki.scss
index 6d85a4da035..d242647e9b0 100644
--- a/app/assets/stylesheets/page_bundles/wiki.scss
+++ b/app/assets/stylesheets/page_bundles/wiki.scss
@@ -107,7 +107,7 @@
   .wiki-list {
     padding: $gl-spacing-scale-2 $gl-spacing-scale-3;
     margin-bottom: $gl-spacing-scale-1;
-    @include gl-rounded-base;
+    border-radius: $gl-border-radius-base;
 
     &:hover {
       background: var(--gray-50, $gray-50);
diff --git a/app/assets/stylesheets/page_bundles/work_items.scss b/app/assets/stylesheets/page_bundles/work_items.scss
index 5b354f3575c..102d2045af2 100644
--- a/app/assets/stylesheets/page_bundles/work_items.scss
+++ b/app/assets/stylesheets/page_bundles/work_items.scss
@@ -135,11 +135,11 @@ $work-item-overview-gap-width: 2rem;
 
 .work-item-notifications-form {
   .gl-toggle {
-    @include gl-ml-auto;
+    margin-left: auto;
   }
 
   .gl-toggle-label {
-    @include gl-font-weight-normal;
+    font-weight: $gl-font-weight-normal;
   }
 }
 
@@ -237,7 +237,7 @@ $disclosure-hierarchy-chevron-dimension: 1.2rem;
 
 @mixin hierarchy-path-chevron {
   content: '';
-  @include gl-absolute;
+  position: absolute;
   @include gl-reset-bg;
   top: 0.39rem;
   right: px-to-rem(-9px);
@@ -248,10 +248,11 @@ $disclosure-hierarchy-chevron-dimension: 1.2rem;
 
 .disclosure-hierarchy-button {
   @include gl-pl-4;
-  @include gl-py-3;
-  @include gl-display-flex;
-  @include gl-relative;
-  @include gl-font-sm;
+  padding-top: $gl-spacing-scale-3;
+  padding-bottom: $gl-spacing-scale-3;
+  display: flex;
+  position: relative;
+  font-size: $gl-font-size-sm;
   border: 1px solid var(--gray-100, $gray-100);
   @include gl-border-r-none;
   @include gl-border-l-none;
@@ -293,7 +294,7 @@ $disclosure-hierarchy-chevron-dimension: 1.2rem;
     @include gl-rounded-bottom-left-base;
 
     &::before {
-      @include gl-display-none;
+      display: none;
     }
 
     &:active,
diff --git a/app/assets/stylesheets/pages/colors.scss b/app/assets/stylesheets/pages/colors.scss
index aeaf2d7c1b3..ffc4e4992ab 100644
--- a/app/assets/stylesheets/pages/colors.scss
+++ b/app/assets/stylesheets/pages/colors.scss
@@ -1,11 +1,11 @@
 .color-item {
-  @include gl-display-flex;
+  display: flex;
 }
 
 .color-item-color {
   @include gl-flex-shrink-0;
   @include gl-mr-3;
-  @include gl-top-0;
+  top: 0;
 }
 
 .right-sidebar-collapsed {
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index f1055590539..58fe4e8504c 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -255,7 +255,7 @@
 
 .signature-badge {
   &:hover {
-    @include gl-text-decoration-none;
+    text-decoration: none;
   }
 
   .header-main-content & {
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 5d644d63666..5343b009f6d 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -239,7 +239,7 @@ table {
 
   .md-area {
     background-color: $white;
-    @include gl-rounded-base;
+    border-radius: $gl-border-radius-base;
   }
 }
 
@@ -295,7 +295,7 @@ table {
 
 .diff-td > .content > .discussion-reply-holder {
   padding-top: $gl-padding-12;
-  @include gl-bg-gray-10;
+  background-color: $gray-10;
 }
 
 .discussion-with-resolve-btn {
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index da03726fa64..1494e95c922 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -1126,7 +1126,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
 }
 
 .user-activity-content {
-  @include gl-relative;
+  position: relative;
 
   .system-note-image {
     @include gl--flex-center;
@@ -1141,7 +1141,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
 }
 
 .user-profile-activity {
-  @include gl-relative;
+  position: relative;
 
   &:not(:last-child)::before {
     @include vertical-line(16px, 10px);
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 0ec342b9332..1548a63ef6e 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -66,7 +66,7 @@
 
 .settings-section,
 .settings-section-no-bottom ~ .settings-section {
-  @include gl-pt-0;
+  padding-top: 0;
 }
 
 // Fix for sticky header when there is no search bar.
diff --git a/app/assets/stylesheets/print.scss b/app/assets/stylesheets/print.scss
index d6fcfb3461d..b395979e78e 100644
--- a/app/assets/stylesheets/print.scss
+++ b/app/assets/stylesheets/print.scss
@@ -45,11 +45,13 @@
 
       position: relative;
       font-size: inherit;
-      @include gl-text-gray-700;
-      @include gl-py-3;
-      @include gl-pl-6;
-      @include gl-my-3;
-      @include gl-mx-0;
+      color: $gray-700;
+      padding-top: $gl-spacing-scale-3;
+      padding-bottom: $gl-spacing-scale-3;
+      padding-left: $gl-spacing-scale-6;
+      margin-top: $gl-spacing-scale-3;
+      margin-bottom: $gl-spacing-scale-3;
+      margin-right: 0;
       @include gl-inset-border-l-4-gray-100;
       margin-left: 4px;
       border: 0 !important;
diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss
index 59c2391d2e9..81006c2ad81 100644
--- a/app/assets/stylesheets/themes/dark_mode_overrides.scss
+++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss
@@ -64,7 +64,7 @@
     &:focus,
     &:focus:active {
       .gl-new-dropdown-item-content {
-        @include gl-bg-gray-10;
+        background-color: $gray-10;
       }
     }
   }
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index 781ab5629d7..5fec8eb661d 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -47,14 +47,14 @@
 
 .gl-children-ml-sm-3 > * {
   @include media-breakpoint-up(sm) {
-    @include gl-ml-3;
+    margin-left: $gl-spacing-scale-3;
   }
 }
 
 .gl-first-child-ml-sm-0 > a:first-child,
 .gl-first-child-ml-sm-0 > button:first-child {
   @include media-breakpoint-up(sm) {
-    @include gl-ml-0;
+    margin-left: 0;
   }
 }
 
diff --git a/app/assets/stylesheets/vendors/atwho.scss b/app/assets/stylesheets/vendors/atwho.scss
index 6a2f37beed0..41f275ab8be 100644
--- a/app/assets/stylesheets/vendors/atwho.scss
+++ b/app/assets/stylesheets/vendors/atwho.scss
@@ -12,13 +12,13 @@
 
 
   small {
-    @include gl-font-sm;
+    font-size: $gl-font-size-sm;
   }
 
   small.description {
     display: block;
     width: auto;
-    @include gl-mt-2;
+    margin-top: $gl-spacing-scale-2;
   }
 
   .avatar-inline {
diff --git a/doc/administration/dedicated/index.md b/doc/administration/dedicated/index.md
index 005017c6178..64a0d80fdcc 100644
--- a/doc/administration/dedicated/index.md
+++ b/doc/administration/dedicated/index.md
@@ -35,9 +35,11 @@ If you've been granted access to Switchboard, you receive an email invitation wi
 Your invitation to Switchboard is valid for seven days. If you are having issues accessing
 Switchboard, or if your invitation has expired, please [submit a support ticket](https://support.gitlab.com/hc/en-us/requests/new?ticket_form_id=4414917877650).
 
-NOTE:
 The credentials for Switchboard are separate from any other GitLab credentials you may already have to sign in to a GitLab self-managed or GitLab.com instance.
 
+NOTE:
+If you log in to Switchboard through a VPN, you may experience a `403 Forbidden` error. The workaround is to log in directly rather than through a VPN.
+
 After you first sign in to Switchboard, you must update your password and set up MFA before you can complete your onboarding to create a new instance.
 
 The following stages guide you through a series of four steps to provide the information required to create your GitLab Dedicated instance.
diff --git a/doc/ci/img/dsm_secret_import_1.png b/doc/ci/img/dsm_secret_import_1.png
deleted file mode 100644
index fd0b6f612f5..00000000000
--- a/doc/ci/img/dsm_secret_import_1.png
+++ /dev/null
diff --git a/doc/ci/img/dsm_secret_import_2.png b/doc/ci/img/dsm_secret_import_2.png
deleted file mode 100644
index b1657affcd8..00000000000
--- a/doc/ci/img/dsm_secret_import_2.png
+++ /dev/null
diff --git a/doc/ci/img/dsm_secrets.png b/doc/ci/img/dsm_secrets.png
deleted file mode 100644
index 0c4e687e519..00000000000
--- a/doc/ci/img/dsm_secrets.png
+++ /dev/null
diff --git a/doc/ci/img/gitlab_build_result_1.png b/doc/ci/img/gitlab_build_result_1.png
deleted file mode 100644
index 43169c5ed91..00000000000
--- a/doc/ci/img/gitlab_build_result_1.png
+++ /dev/null
diff --git a/doc/ci/img/gitlab_build_result_2.png b/doc/ci/img/gitlab_build_result_2.png
deleted file mode 100644
index 5bc34740be8..00000000000
--- a/doc/ci/img/gitlab_build_result_2.png
+++ /dev/null
diff --git a/doc/ci/img/gitlab_build_result_3.png b/doc/ci/img/gitlab_build_result_3.png
deleted file mode 100644
index 3c3727ef9ce..00000000000
--- a/doc/ci/img/gitlab_build_result_3.png
+++ /dev/null
diff --git a/doc/ci/secrets/fortanix_dsm_integration.md b/doc/ci/secrets/fortanix_dsm_integration.md
index 06758510196..2b6a37086a5 100644
--- a/doc/ci/secrets/fortanix_dsm_integration.md
+++ b/doc/ci/secrets/fortanix_dsm_integration.md
@@ -130,9 +130,9 @@ To generate a new secret in Fortanix DSM and use it with GitLab:
    If not, select **Build > Pipelines > Run pipeline**.
 1. Go to **Build > Jobs** and check the `build` job's log:
 
-   - ![gitlab_build_result_1](../img/gitlab_build_result_1.png)
+   - ![gitlab_build_result_1](img/gitlab_build_result_1.png)
 
-![dsm_secrets](../img/dsm_secrets.png)
+![dsm_secrets](img/dsm_secrets.png)
 
 ## Use an existing secret from Fortanix DSM
 
@@ -140,7 +140,7 @@ To use a secret that already exists in Fortanix DSM with GitLab:
 
 1. The secret must be marked as exportable in Fortanix:
 
-   ![dsm_secret_import_1](../img/dsm_secret_import_1.png)
+   ![dsm_secret_import_1](img/dsm_secret_import_1.png)
 
 1. In GitLab, go to your project.
 1. Go to **Settings > CI/CD > Variables**, and add these variables:
@@ -170,7 +170,7 @@ To use a secret that already exists in Fortanix DSM with GitLab:
    If not, select **Build > Pipelines > Run pipeline**.
 1. Go to **Build > Jobs** and check the `build` job's log:
 
-   - ![gitlab_build_result_2](../img/gitlab_build_result_2.png)
+   - ![gitlab_build_result_2](img/gitlab_build_result_2.png)
 
 ## Code Signing
 
@@ -179,7 +179,7 @@ To set up code signing securely in your GitLab environment:
 1. Log in to your Fortanix DSM account.
 1. Import `keystore_password` and `key_password` as secrets in Fortanix DSM. Ensure that they are marked as exportable.
 
-   ![dsm_secret_import_2](../img/dsm_secret_import_2.png)
+   ![dsm_secret_import_2](img/dsm_secret_import_2.png)
 
 1. In GitLab, go to your project.
 1. Go to **Settings > CI/CD > Variables**, and add these variables:
@@ -219,4 +219,4 @@ To set up code signing securely in your GitLab environment:
    If not, select **Build > Pipelines > Run pipeline**.
 1. Go to **Build > Jobs** and check the `build` job's log:
 
-   - ![gitlab_build_result_3](../img/gitlab_build_result_3.png)
+   - ![gitlab_build_result_3](img/gitlab_build_result_3.png)
diff --git a/doc/ci/secrets/img/dsm_secret_import_1.png b/doc/ci/secrets/img/dsm_secret_import_1.png
new file mode 100644
index 00000000000..edf8c3a0590
--- /dev/null
+++ b/doc/ci/secrets/img/dsm_secret_import_1.png
diff --git a/doc/ci/secrets/img/dsm_secret_import_2.png b/doc/ci/secrets/img/dsm_secret_import_2.png
new file mode 100644
index 00000000000..abb45092cd0
--- /dev/null
+++ b/doc/ci/secrets/img/dsm_secret_import_2.png
diff --git a/doc/ci/secrets/img/dsm_secrets.png b/doc/ci/secrets/img/dsm_secrets.png
new file mode 100644
index 00000000000..ea4083426ed
--- /dev/null
+++ b/doc/ci/secrets/img/dsm_secrets.png
diff --git a/doc/ci/secrets/img/gitlab_build_result_1.png b/doc/ci/secrets/img/gitlab_build_result_1.png
new file mode 100644
index 00000000000..7867291e519
--- /dev/null
+++ b/doc/ci/secrets/img/gitlab_build_result_1.png
diff --git a/doc/ci/secrets/img/gitlab_build_result_2.png b/doc/ci/secrets/img/gitlab_build_result_2.png
new file mode 100644
index 00000000000..a4966eec145
--- /dev/null
+++ b/doc/ci/secrets/img/gitlab_build_result_2.png
diff --git a/doc/ci/secrets/img/gitlab_build_result_3.png b/doc/ci/secrets/img/gitlab_build_result_3.png
new file mode 100644
index 00000000000..f0a7a891038
--- /dev/null
+++ b/doc/ci/secrets/img/gitlab_build_result_3.png