Add latest changes from gitlab-org/gitlab@master

51 files changed, 227 insertions, 194 deletions

diff --git a/app/assets/javascripts/gfm_auto_complete.js b/app/assets/javascripts/gfm_auto_complete.js
index f1e46262b2f..57c82d34548 100644
--- a/app/assets/javascripts/gfm_auto_complete.js
+++ b/app/assets/javascripts/gfm_auto_complete.js
@@ -22,6 +22,9 @@ const LABELS_ALIAS = 'labels';
 const SNIPPETS_ALIAS = 'snippets';
 const CONTACTS_ALIAS = 'contacts';
 
+const CADENCE_REFERENCE_PREFIX = '[cadence:';
+const ITERATION_REFERENCE_PREFIX = '*iteration:';
+
 export const AT_WHO_ACTIVE_CLASS = 'at-who-active';
 export const CONTACT_STATE_ACTIVE = 'active';
 export const CONTACTS_ADD_COMMAND = '/add_contacts';
@@ -220,6 +223,11 @@ class GfmAutoComplete {
           const match = regexp.exec(value.params);
           if (match) {
             [referencePrefix] = match;
+
+            // EE-ONLY; iteration quick action should autocomplete iteration reference only
+            if (referencePrefix === CADENCE_REFERENCE_PREFIX)
+              referencePrefix = ITERATION_REFERENCE_PREFIX;
+
             tpl += '<%- referencePrefix %>';
           } else {
             [[referencePrefix]] = value.params;
@@ -227,7 +235,7 @@ class GfmAutoComplete {
               tpl += '<%- referencePrefix %>';
             } else if (/^[*]/.test(referencePrefix)) {
               // EE-ONLY
-              referencePrefix = '*iteration:';
+              referencePrefix = ITERATION_REFERENCE_PREFIX;
               tpl += '<%- referencePrefix %>';
             }
           }
diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index 17eded3bec0..dda153cb399 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -118,10 +118,7 @@ export default {
       return this.getNoteableData.current_user.can_create_note;
     },
     canSetInternalNote() {
-      return (
-        this.getNoteableData.current_user.can_create_confidential_note &&
-        (this.isIssue || this.isEpic)
-      );
+      return this.getNoteableData.current_user.can_create_confidential_note;
     },
     issueActionButtonTitle() {
       const openOrClose = this.isOpen ? 'close' : 'reopen';
diff --git a/app/assets/stylesheets/components/content_editor.scss b/app/assets/stylesheets/components/content_editor.scss
index c654eb16af5..18043c503f7 100644
--- a/app/assets/stylesheets/components/content_editor.scss
+++ b/app/assets/stylesheets/components/content_editor.scss
@@ -202,7 +202,7 @@
       padding-right: 10px;
       padding-left: 10px;
 
-      @include gl-text-secondary;
+      color: $gl-text-color-secondary;
     }
 
     > code::after {
@@ -212,7 +212,7 @@
       width: 20px;
       text-align: center;
 
-      @include gl-text-secondary;
+      color: $gl-text-color-secondary;
     }
   }
 
@@ -369,7 +369,7 @@
 
   li.focused div.gl-new-dropdown-item-content {
     @include gl-focus($inset: true);
-    @include gl-bg-gray-50;
+    background-color: $gray-50;
   }
 }
 
diff --git a/app/assets/stylesheets/components/detail_page.scss b/app/assets/stylesheets/components/detail_page.scss
index 98ed7f590ea..95987dbb08b 100644
--- a/app/assets/stylesheets/components/detail_page.scss
+++ b/app/assets/stylesheets/components/detail_page.scss
@@ -45,7 +45,7 @@
 }
 
 .detail-page-header-meta {
-  @include gl-flex-basis-full;
+  flex-basis: 100%;
 }
 
 .detail-page-description {
diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss
index 4d53ae9ed4b..1cbd0faa900 100644
--- a/app/assets/stylesheets/components/related_items_list.scss
+++ b/app/assets/stylesheets/components/related_items_list.scss
@@ -160,7 +160,7 @@ $item-remove-button-space: 42px;
   line-height: 0;
 
   a:focus {
-    @include gl-rounded-full;
+    border-radius: $gl-border-radius-full;
     @include gl-focus;
   }
 }
diff --git a/app/assets/stylesheets/components/severity/icons.scss b/app/assets/stylesheets/components/severity/icons.scss
index 8ddf873196a..f58ad87a673 100644
--- a/app/assets/stylesheets/components/severity/icons.scss
+++ b/app/assets/stylesheets/components/severity/icons.scss
@@ -2,26 +2,26 @@
 .incident-management-list,
 .alert-management-details {
   .icon-critical {
-    @include gl-text-red-800;
+    color: $red-800;
   }
 
   .icon-high {
-    @include gl-text-red-600;
+    color: $red-600;
   }
 
   .icon-medium {
-    @include gl-text-orange-400;
+    color: $orange-400;
   }
 
   .icon-low {
-    @include gl-text-orange-300;
+    color: $orange-300;
   }
 
   .icon-info {
-    @include gl-text-blue-400;
+    color: $blue-400;
   }
 
   .icon-unknown {
-    @include gl-text-gray-200;
+    color: $gray-200;
   }
 }
diff --git a/app/assets/stylesheets/components/whats_new.scss b/app/assets/stylesheets/components/whats_new.scss
index 2f6c7c43fc9..e8ed4971ea5 100644
--- a/app/assets/stylesheets/components/whats_new.scss
+++ b/app/assets/stylesheets/components/whats_new.scss
@@ -17,7 +17,7 @@
     align-items: stretch;
 
     .nav-item {
-      @include gl-flex-shrink-0;
+      flex-shrink: 0;
 
       a {
         height: 100%;
@@ -38,7 +38,7 @@
   &:hover,
   &:focus,
   &:active {
-    @include gl-text-gray-900;
+    color: $gray-900;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 260ef0ae380..56e4b23e80d 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -354,14 +354,14 @@ fieldset[disabled] .btn,
 copy-code {
   position: absolute;
   @include gl-transition-medium;
-  @include gl-opacity-0;
+  opacity: 0;
 
   top: 7px;
   right: $input-horizontal-padding;
 
   .markdown-code-block:hover &,
   &:focus-within {
-    @include gl-opacity-10;
+    opacity: 1;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss
index 65e378a79f3..6fe114fe337 100644
--- a/app/assets/stylesheets/framework/calendar.scss
+++ b/app/assets/stylesheets/framework/calendar.scss
@@ -5,7 +5,7 @@
   }
 
   &:focus {
-    @include gl-outline-none;
+    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);
   }
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 66cb6a20ba5..9f0dc422795 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -527,7 +527,8 @@ li.note {
 }
 
 .border-section {
-  @include gl-py-6;
+  padding-top: $gl-spacing-scale-6;
+  padding-bottom: $gl-spacing-scale-6;
   margin: 0;
 
   border-top: 1px solid $border-color;
@@ -562,8 +563,8 @@ See https://gitlab.com/gitlab-org/gitlab/issues/36857 for more details.
 // --- moved from labels.scss when moving to page_bundles ---
 // Fix scoped label padding in cases where old markdown uses the old label structure */
 .gl-label-text + .gl-label-text {
-  @include gl-pl-2;
-  @include gl-pr-3;
+  padding-left: $gl-spacing-scale-2;
+  padding-right: $gl-spacing-scale-3;
 }
 
 // used in the Markdown rendering of labels
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 415d1532b15..f799683ba54 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -6,7 +6,7 @@
   // need this style.
   // Issue for the refactoring: https://gitlab.com/gitlab-org/gitlab/-/issues/213327
   &.gl-dropdown button.dropdown-toggle {
-    @include gl-display-inline-flex;
+    display: inline-flex;
   }
 
   .btn-link {
@@ -664,7 +664,8 @@
   min-height: 30px;
   padding-top: 0;
   padding-bottom: 0;
-  @include gl-px-3;
+  padding-left: $gl-spacing-scale-3;
+  padding-right: $gl-spacing-scale-3;
   color: $gray-700;
   line-height: 30px;
   border: 1px solid $gray-400;
diff --git a/app/assets/stylesheets/framework/emojis.scss b/app/assets/stylesheets/framework/emojis.scss
index 9227028e3da..77956797817 100644
--- a/app/assets/stylesheets/framework/emojis.scss
+++ b/app/assets/stylesheets/framework/emojis.scss
@@ -26,7 +26,7 @@ gl-emoji {
 }
 
 .emoji-picker-category-header {
-  @include gl-sticky;
+  position: sticky;
   background: linear-gradient(to bottom, $white 50%, transparent 100%);
 }
 
@@ -40,7 +40,7 @@ gl-emoji {
 
   &:hover,
   &:focus {
-    @include gl-z-index-2;
+    z-index: 2;
     transform: scale(1.3) !important;
   }
 
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 2c01f650ae3..c99eaa6a8fa 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -413,12 +413,10 @@ span.idiff {
 }
 
 .version-link {
-  @include gl-display-inline-block;
-  @include gl-align-self-center;
+  align-self: center;
   margin-top: $gl-spacing-scale-2;
-  @include gl-w-5;
-  @include gl-h-5;
-  @include gl-float-left;
+  width: $gl-spacing-scale-5;
+  height: $gl-spacing-scale-5;
   background-color: $gray-400;
   mask-image: url('icons-stacked.svg#doc-versions');
   mask-repeat: no-repeat;
@@ -455,15 +453,15 @@ span.idiff {
 .blob-viewer[data-loading] .file-content.code .line:nth-of-type(69):not(:last-of-type),
 .blob-viewer[data-loading] .file-content.code .file-line-num:nth-of-type(69):not(:last-of-type) {
   &::after {
-    @include gl-display-block;
-    @include gl-font-weight-bold;
+    display: block;
+    font-weight: $gl-font-weight-bold;
     content: '\2026';
   }
 }
 
 .blob-viewer[data-loading] .file-content.code .line:nth-of-type(69):not(:last-of-type) {
   &::after {
-    @include gl-text-center;
+    text-align: center;
   }
 }
 
@@ -481,7 +479,7 @@ span.idiff {
   .tree-list-parent::before {
     @include gl-content-empty;
     position: absolute;
-    @include gl-z-index-1;
+    z-index: 1;
     pointer-events: none;
 
     top: -4px;
@@ -570,7 +568,7 @@ span.idiff {
   border-radius: 0;
 
   .file-line-num {
-    @include gl-min-w-9;
+    min-width: $gl-spacing-scale-9;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index 7c24cd0385c..0634196e007 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -347,12 +347,12 @@
   }
 
   .filtered-search-block .boards-switcher {
-    @include gl-mr-0;
+    margin-right: 0;
     margin-bottom: $gl-input-padding;
 
     .boards-selector-wrapper,
     .dropdown {
-      @include gl-display-block;
+      display: block;
     }
   }
 
diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss
index 259f806c315..a3e3b58e9c9 100644
--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -16,7 +16,7 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25);
     .flash-notice,
     .flash-success,
     .flash-warning {
-      @include gl-mb-4;
+      margin-bottom: $gl-spacing-scale-4;
     }
   }
 
@@ -79,12 +79,14 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25);
   }
 
   .gl-alert {
-    @include gl-my-4;
+    margin-top: $gl-spacing-scale-4;
+    margin-bottom: $gl-spacing-scale-4;
   }
 
   &.flash-container-no-margin {
     .gl-alert {
-      @include gl-my-0;
+      margin-top:0;
+      margin-bottom: 0;
     }
 
     .flash-alert,
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index ddb13b73973..1f58964cfc0 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -123,9 +123,9 @@
     padding: 6px 8px;
     height: 32px;
     border-radius: $border-radius-default;
-    @include gl-text-gray-100;
+    color: $gray-100;
     font-weight: $gl-font-weight-normal;
-    @include gl-font-base;
+    font-size: $gl-font-size;
 
     &:hover,
     &:focus,
diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss
index c499c9e9ffc..c15819e5b62 100644
--- a/app/assets/stylesheets/framework/highlight.scss
+++ b/app/assets/stylesheets/framework/highlight.scss
@@ -120,8 +120,8 @@ td.line-numbers {
 
   .file-line-num {
     @include gl-justify-content-end;
-    @include gl-flex-grow-1;
-    @include gl-pr-3;
+    flex-grow: 1;
+    padding-right: $gl-spacing-scale-3;
   }
 
   .file-line-blame {
diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss
index 3399847c201..d5d29cb8217 100644
--- a/app/assets/stylesheets/framework/icons.scss
+++ b/app/assets/stylesheets/framework/icons.scss
@@ -47,7 +47,7 @@
   // - app/assets/javascripts/vue_shared/components/ci_icon/ci_icon.vue
   // - app/helpers/ci/status_helper.rb
   .ci-icon-gl-icon-wrapper {
-    @include gl-rounded-full;
+    border-radius: $gl-border-radius-full;
     @include gl-line-height-0;
   }
 
diff --git a/app/assets/stylesheets/framework/labels.scss b/app/assets/stylesheets/framework/labels.scss
index 116d9c489eb..045c825ad07 100644
--- a/app/assets/stylesheets/framework/labels.scss
+++ b/app/assets/stylesheets/framework/labels.scss
@@ -19,7 +19,7 @@
     &:focus:active {
       @include gl-reset-color;
       @include gl-shadow-none;
-      @include gl-outline-none;
+      outline: none;
     }
 
     .gl-label-text,
diff --git a/app/assets/stylesheets/framework/new_card.scss b/app/assets/stylesheets/framework/new_card.scss
index a244439d88e..821bda29e50 100644
--- a/app/assets/stylesheets/framework/new_card.scss
+++ b/app/assets/stylesheets/framework/new_card.scss
@@ -1,76 +1,82 @@
 .gl-new-card {
-  @include gl-mt-5;
+  margin-top: $gl-spacing-scale-5;
   background-color: $gray-10;
-  @include gl-border-1;
-  @include gl-border-solid;
-  @include gl-border-gray-100;
+  border-width: $gl-border-size-1;
+  border-style: solid;
+  border-color: $gray-100;
   border-radius: $gl-border-radius-base;
 
   &-header {
     padding-left: $gl-spacing-scale-5;
     padding-right: $gl-spacing-scale-5;
-    @include gl-py-4;
+    padding-top: $gl-spacing-scale-4;
+    padding-bottom: $gl-spacing-scale-4;
     display: flex;
-    @include gl-justify-content-space-between;
-    @include gl-bg-white;
-    @include gl-border-b-1;
-    @include gl-border-b-solid;
-    @include gl-border-b-gray-100;
-    @include gl-rounded-top-base;
+    justify-content: space-between;
+    background-color: $white;
+    border-bottom-width: $gl-border-size-1;
+    border-bottom-style: solid;
+    border-bottom-color: $gray-100;
+    border-top-left-radius: $gl-border-radius-base;
+    border-top-right-radius: $gl-border-radius-base;
   }
 
   &[aria-expanded=false] &-header {
-    @include gl-border-bottom-0;
+    border-bottom: 0;
     border-radius: $gl-border-radius-base;
   }
 
   &-title-wrapper {
     display: flex;
-    @include gl-flex-grow-1;
+    flex-grow: 1;
   }
 
   &-title {
     display: flex;
-    @include gl-font-base;
-    @include gl-font-weight-bold;
+    font-size: $gl-font-size;
+    font-weight: $gl-font-weight-bold;
     position: relative;
     margin: 0;
-    @include gl-line-height-24;
+    line-height: $gl-line-height-24;
   }
 
   &-count {
-    @include gl-mx-3;
-    @include gl-font-base;
-    @include gl-font-weight-bold;
-    @include gl-text-gray-500;
-    @include gl-display-inline-flex;
+    margin-left: $gl-spacing-scale-3;
+    margin-right: $gl-spacing-scale-3;
+    font-size: $gl-font-size;
+    font-weight: $gl-font-weight-bold;
+    color: $gray-500;
+    display: inline-flex;
     align-items: center;
   }
 
   &-description {
     font-size: $gl-font-size-sm;
-    @include gl-text-gray-500;
+    color: $gray-500;
     margin: 0;
   }
 
   &-toggle {
-    @include gl-pl-3;
+    padding-left: $gl-spacing-scale-3;
     margin-left: $gl-spacing-scale-3;
-    @include gl-mr-n2;
-    @include gl-border-l-1;
-    @include gl-border-l-solid;
-    @include gl-border-l-gray-100;
+    margin-right: -$gl-spacing-scale-2;
+    border-left-width: $gl-border-size-1;
+    border-left-style: solid;
+    border-left-color: $gray-100;
   }
 
   &-body {
-    @include gl-rounded-bottom-base;
-    @include gl-px-3;
+    border-bottom-left-radius: $gl-border-radius-base;
+    border-bottom-right-radius: $gl-border-radius-base;
+    padding-left: $gl-spacing-scale-3;
+    padding-right: $gl-spacing-scale-3;
     padding-top: 0;
     padding-bottom: 0;
   }
 
   &-content {
-    @include gl-px-2;
+    padding-left: $gl-spacing-scale-2;
+    padding-right: $gl-spacing-scale-2;
     padding-top: $gl-spacing-scale-3;
     padding-bottom: $gl-spacing-scale-3;
   }
@@ -78,20 +84,21 @@
   &-empty {
     padding: $gl-spacing-scale-2;
     margin-bottom: 0;
-    @include gl-text-gray-500;
+    color: $gray-500;
   }
 
   &-footer {
-    @include gl-bg-white;
+    background-color: $white;
   }
 
   &-add-form {
-    @include gl-p-4;
-    @include gl-my-2;
-    @include gl-bg-white;
-    @include gl-border-1;
-    @include gl-border-solid;
-    @include gl-border-gray-100;
+    padding: $gl-spacing-scale-4;
+    margin-top: $gl-spacing-scale-2;
+    margin-bottom: $gl-spacing-scale-2;
+    background-color: $white;
+    border-width: $gl-border-size-1;
+    border-style: solid;
+    border-color: $gray-100;
     border-radius: $gl-border-radius-base;
   }
 }
@@ -102,27 +109,27 @@
     tbody > tr {
       &:first-of-type > td[data-label],
       &:first-of-type > td:first-of-type:last-of-type {
-        @include gl-border-t-0;
+        border-top-width: 0;
       }
 
       &:last-of-type td:not(:last-of-type) {
-        @include gl-border-b-1;
+        border-bottom-width: $gl-border-size-1;
       }
 
       > td[data-label] {
-        @include gl-border-left-0;
-        @include gl-border-l-none;
-        @include gl-border-right-0;
-        @include gl-border-r-none;
+        border-left: 0;
+        border-left-style: none;
+        border-right: 0;
+        border-right-style: none;
       }
 
       > th {
-        @include gl-border-t-1;
-        @include gl-border-b-0;
+        border-top-width: $gl-border-size-1;
+        border-bottom-width: 0;
       }
 
       &::after {
-        @include gl-bg-white;
+        background-color: $white;
       }
 
       &:last-child::after {
@@ -136,11 +143,11 @@
     margin-bottom: 0;
 
     tr:first-of-type th {
-      @include gl-border-t-0;
+      border-top-width: 0;
     }
 
     tr:last-of-type td {
-      @include gl-border-b-0;
+      border-bottom-width: 0;
     }
   }
 
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 04799a6b8f8..53eb5b2fbd0 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -69,7 +69,7 @@
   }
 
   .inline-block {
-    @include gl-display-inline-block;
+    display: inline-block;
   }
 
   &.right-sidebar-merge-requests {
@@ -491,7 +491,8 @@
     }
 
     .issuable-sidebar-header {
-      @include gl-py-5;
+      padding-top: $gl-spacing-scale-5;
+      padding-bottom: $gl-spacing-scale-5;
     }
 
     .value {
diff --git a/app/assets/stylesheets/framework/snippets.scss b/app/assets/stylesheets/framework/snippets.scss
index edd07dbaafa..1f752e70a13 100644
--- a/app/assets/stylesheets/framework/snippets.scss
+++ b/app/assets/stylesheets/framework/snippets.scss
@@ -21,7 +21,7 @@
   }
 
   + .snippet-file-content {
-    @include gl-mt-5;
+    margin-top: $gl-spacing-scale-5;
   }
 
   &:last-of-type {
diff --git a/app/assets/stylesheets/framework/source_editor.scss b/app/assets/stylesheets/framework/source_editor.scss
index 5a3863745ee..0d235e17191 100644
--- a/app/assets/stylesheets/framework/source_editor.scss
+++ b/app/assets/stylesheets/framework/source_editor.scss
@@ -3,7 +3,7 @@
   display: flex;
   @include gl-justify-content-center;
   align-items: center;
-  @include gl-z-index-0;
+  z-index: 0;
 
   > * {
     filter: blur(5px);
@@ -13,7 +13,7 @@
     content: '';
     @include spinner-deprecated(32px, 3px);
     position: absolute;
-    @include gl-z-index-1;
+    z-index: 1;
   }
 
   pre {
@@ -30,8 +30,10 @@
 
   .md {
     @include gl-overflow-scroll;
-    @include gl-px-6;
-    @include gl-py-4;
+    padding-left: $gl-spacing-scale-6;
+    padding-right: $gl-spacing-scale-6;
+    padding-top: $gl-spacing-scale-4;
+    padding-bottom: $gl-spacing-scale-4;
     width: 100%;
   }
 
@@ -73,11 +75,11 @@
 
       &::before {
         @include gl-visibility-hidden;
-        @include gl-align-self-center;
-        @include gl-bg-gray-400;
-        @include gl-mr-2;
-        @include gl-w-4;
-        @include gl-h-4;
+        align-self: center;
+        background-color: $gray-400;
+        margin-right: $gl-spacing-scale-2;
+        width: $gl-spacing-scale-4;
+        height: $gl-spacing-scale-4;
         mask-image: url('icons-stacked.svg#link');
         mask-repeat: no-repeat;
         mask-size: cover;
@@ -100,7 +102,7 @@
       }
 
       .link-anchor {
-        @include gl-display-block;
+        display: block;
         position: absolute;
         width: 100%;
         height: 100%;
@@ -115,6 +117,6 @@
 }
 
 .active-line-text {
-  @include gl-bg-orange-600;
+  background-color: $orange-600;
   @include gl-opacity-3;
 }
diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss
index 4d0b22928cc..ba4e7b612ee 100644
--- a/app/assets/stylesheets/framework/super_sidebar.scss
+++ b/app/assets/stylesheets/framework/super_sidebar.scss
@@ -501,7 +501,8 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
     max-height: 30rem;
 
     .gl-new-dropdown-item {
-      @include gl-px-3;
+      padding-left: $gl-spacing-scale-3;
+      padding-right: $gl-spacing-scale-3;
     }
 
     // Target groups
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 25eeadfad45..e20c97bdf40 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -81,7 +81,7 @@
     word-wrap: break-word;
     overflow-wrap: break-word;
     word-break: keep-all;
-    @include gl-font-base;
+    font-size: $gl-font-size;
   }
 
   h1 {
@@ -665,7 +665,7 @@ pre {
   display: block;
   padding: $gl-padding-8 $input-horizontal-padding;
   margin: 0 0 $gl-padding-8;
-  @include gl-font-base;
+  font-size: $gl-font-size;
   word-break: break-all;
   word-wrap: break-word;
   color: $gl-text-color;
@@ -712,7 +712,7 @@ code {
  */
 textarea.js-gfm-input {
   font-family: $monospace-font;
-  @include gl-font-base;
+  font-size: $gl-font-size;
 }
 
 h1,
diff --git a/app/assets/stylesheets/highlight/common.scss b/app/assets/stylesheets/highlight/common.scss
index 3fd72904655..36b66f8d00d 100644
--- a/app/assets/stylesheets/highlight/common.scss
+++ b/app/assets/stylesheets/highlight/common.scss
@@ -113,10 +113,10 @@
 @mixin line-link($color, $icon) {
   &::before {
     @include gl-visibility-hidden;
-    @include gl-align-self-center;
-    @include gl-mr-1;
-    @include gl-w-5;
-    @include gl-h-5;
+    align-self: center;
+    margin-right: $gl-spacing-scale-1;
+    width: $gl-spacing-scale-5;
+    height: $gl-spacing-scale-5;
     background-color: rgba($color, 0.3);
     mask-image: url('icons-stacked.svg##{$icon}');
     mask-repeat: no-repeat;
diff --git a/app/assets/stylesheets/page_bundles/alert_management_details.scss b/app/assets/stylesheets/page_bundles/alert_management_details.scss
index 0890fefe910..bd81773d923 100644
--- a/app/assets/stylesheets/page_bundles/alert_management_details.scss
+++ b/app/assets/stylesheets/page_bundles/alert_management_details.scss
@@ -13,7 +13,7 @@
 
   .dropdown-menu-toggle {
     &:hover {
-      @include gl-bg-white;
+      background-color: $white;
     }
   }
 
@@ -25,7 +25,7 @@
     }
 
     &::before {
-      @include gl-pt-8;
+      padding-top: $gl-spacing-scale-8;
     }
 
     .gl-dropdown-item-text-wrapper {
diff --git a/app/assets/stylesheets/page_bundles/cluster_agents.scss b/app/assets/stylesheets/page_bundles/cluster_agents.scss
index f458b5a626a..956a9f6adcc 100644
--- a/app/assets/stylesheets/page_bundles/cluster_agents.scss
+++ b/app/assets/stylesheets/page_bundles/cluster_agents.scss
@@ -8,6 +8,6 @@
   }
 
   .timeline-entry::before {
-    @include gl-mt-4;
+    margin-top: $gl-spacing-scale-4;
   }
 }
diff --git a/app/assets/stylesheets/page_bundles/clusters.scss b/app/assets/stylesheets/page_bundles/clusters.scss
index 7c46b836ddc..09611098bed 100644
--- a/app/assets/stylesheets/page_bundles/clusters.scss
+++ b/app/assets/stylesheets/page_bundles/clusters.scss
@@ -16,7 +16,7 @@
 
 .cluster-card-item {
   @include media-breakpoint-up(sm) {
-    @include gl-pt-2;
+    padding-top: $gl-spacing-scale-2;
     min-height: 372px;
   }
 }
@@ -27,6 +27,6 @@
 
 .select-agent-dropdown {
   .gl-button-text {
-    @include gl-flex-grow-1;
+    flex-grow: 1;
   }
 }
diff --git a/app/assets/stylesheets/page_bundles/design_management.scss b/app/assets/stylesheets/page_bundles/design_management.scss
index e206b5e5b8b..e17640167b7 100644
--- a/app/assets/stylesheets/page_bundles/design_management.scss
+++ b/app/assets/stylesheets/page_bundles/design_management.scss
@@ -81,7 +81,7 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
       @include gl-opacity-5;
 
       &:hover {
-        @include gl-opacity-10;
+        opacity: 1;
       }
     }
   }
diff --git a/app/assets/stylesheets/page_bundles/escalation_policies.scss b/app/assets/stylesheets/page_bundles/escalation_policies.scss
index 604533e199c..6e70a44a4e4 100644
--- a/app/assets/stylesheets/page_bundles/escalation_policies.scss
+++ b/app/assets/stylesheets/page_bundles/escalation_policies.scss
@@ -35,7 +35,7 @@ $stroke-size: 1px;
 .rule-condition {
   @media (min-width: $breakpoint-lg) {
     flex-basis: 25%;
-    @include gl-flex-shrink-0;
+    flex-shrink: 0;
   }
 
   @media (max-width: $breakpoint-lg) {
diff --git a/app/assets/stylesheets/page_bundles/incident_management_list.scss b/app/assets/stylesheets/page_bundles/incident_management_list.scss
index ecfc481bb44..4e3fcf5044a 100644
--- a/app/assets/stylesheets/page_bundles/incident_management_list.scss
+++ b/app/assets/stylesheets/page_bundles/incident_management_list.scss
@@ -6,7 +6,7 @@
   }
 
   .gl-tabs-nav {
-    @include gl-border-b-0;
+    border-bottom-width: 0;
 
     .gl-tab-nav-item {
       color: var(--gray-500, $gray-500);
diff --git a/app/assets/stylesheets/page_bundles/incidents.scss b/app/assets/stylesheets/page_bundles/incidents.scss
index 4be4cac2075..974d89a1fa0 100644
--- a/app/assets/stylesheets/page_bundles/incidents.scss
+++ b/app/assets/stylesheets/page_bundles/incidents.scss
@@ -46,7 +46,7 @@
   &:last-child {
     &::before {
       top: - #{$gl-spacing-scale-5} !important; // Override default positioning
-      @include gl-h-8;
+      height: $gl-spacing-scale-8;
     }
 
     &::after {
@@ -57,10 +57,10 @@
 
 .timeline-entry:not(:last-child) {
   .timeline-event-border {
-    @include gl-pb-3;
+    padding-bottom: $gl-spacing-scale-3;
     @include gl-border-gray-50;
-    @include gl-border-1;
-    @include gl-border-b-solid;
+    border-width: $gl-border-size-1;
+    border-bottom-style: solid;
   }
 }
 
@@ -69,7 +69,7 @@
   .create-timeline-event {
     .timeline-event-bottom-border {
       @include gl-border-b;
-      @include gl-pt-5;
+      padding-top: $gl-spacing-scale-5;
     }
   }
 }
diff --git a/app/assets/stylesheets/page_bundles/issuable_list.scss b/app/assets/stylesheets/page_bundles/issuable_list.scss
index acf6e54efc8..8e885914d5e 100644
--- a/app/assets/stylesheets/page_bundles/issuable_list.scss
+++ b/app/assets/stylesheets/page_bundles/issuable_list.scss
@@ -90,9 +90,9 @@
 .issuable-list li,
 .issuable-info-container .controls {
   .avatar-counter {
-    @include gl-pl-1;
-    @include gl-pr-2;
-    @include gl-h-5;
+    padding-left: $gl-spacing-scale-1;
+    padding-right: $gl-spacing-scale-2;
+    height: $gl-spacing-scale-5;
     @include gl-min-w-5;
     line-height: 14px;
   }
@@ -101,7 +101,7 @@
 .merge-request {
   .issuable-info-container .controls {
     .avatar-counter {
-      @include gl-line-height-normal;
+      line-height: $gl-line-height-16;
       border: 0;
     }
   }
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 8c14075bec2..b26b26b7734 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -331,7 +331,7 @@ $tabs-holder-z-index: 250;
       width: 100% !important;
       // avoid sticky elements overlap header and other elements
       z-index: 1;
-      @include gl-mb-3;
+      margin-bottom: $gl-spacing-scale-3;
     }
 
     .tree-list-holder {
@@ -814,7 +814,7 @@ $tabs-holder-z-index: 250;
   @include media-breakpoint-down(sm) {
     padding-top: $gl-spacing-scale-3;
     padding-bottom: $gl-spacing-scale-3;
-    @include gl-pr-3;
+    padding-right: $gl-spacing-scale-3;
   }
 }
 
@@ -842,7 +842,7 @@ $tabs-holder-z-index: 250;
   // Adds a fix for the view app dropdown not showing up
   // correctly.
   position: relative;
-  @include gl-z-index-1;
+  z-index: 1;
 
   &.clickable:hover {
     background-color: var(--gray-50, $gray-50);
@@ -856,9 +856,9 @@ $tabs-holder-z-index: 250;
   @include gl-left-50p;
   @include gl-top-half;
   @include gl-opacity-3;
-  @include gl-border-solid;
+  border-style: solid;
   @include gl-border-4;
-  @include gl-rounded-full;
+  border-radius: $gl-border-radius-full;
 
   width: 24px;
   height: 24px;
@@ -868,7 +868,7 @@ $tabs-holder-z-index: 250;
 .mr-widget-extension-icon::after {
   @include gl-content-empty;
   position: absolute;
-  @include gl-rounded-full;
+  border-radius: $gl-border-radius-full;
   @include gl-left-50p;
   @include gl-top-half;
 
@@ -1035,7 +1035,7 @@ $tabs-holder-z-index: 250;
   }
 
   p {
-    @include gl-font-base;
+    font-size: $gl-font-size;
   }
 
   li:not(:last-child) {
@@ -1077,16 +1077,16 @@ $tabs-holder-z-index: 250;
   @include gl-bottom-0;
   @include gl-right-0;
   @include gl-opacity-3;
-  @include gl-rounded-full;
-  @include gl-border-solid;
+  border-radius: $gl-border-radius-full;
+  border-style: solid;
   @include gl-border-4;
 }
 
 .mr-widget-status-icon-level-1::after {
   @include gl-content-empty;
   position: absolute;
-  @include gl-rounded-full;
-  @include gl-border-solid;
+  border-radius: $gl-border-radius-full;
+  border-style: solid;
   @include gl-border-4;
   @include gl-left-2;
   @include gl-right-2;
@@ -1208,7 +1208,7 @@ $tabs-holder-z-index: 250;
     margin: 0;
     @include gl-border-l-0;
     @include gl-border-r-0;
-    @include gl-border-b-0;
+    border-bottom-width: 0;
     @include gl-rounded-top-left-none;
     @include gl-rounded-top-right-none;
   }
diff --git a/app/assets/stylesheets/page_bundles/ml_experiment_tracking.scss b/app/assets/stylesheets/page_bundles/ml_experiment_tracking.scss
index 685719071b5..82fb631036c 100644
--- a/app/assets/stylesheets/page_bundles/ml_experiment_tracking.scss
+++ b/app/assets/stylesheets/page_bundles/ml_experiment_tracking.scss
@@ -7,7 +7,7 @@ table.ml-candidate-table {
     min-width: 100px;
 
     > * {
-      @include gl-display-block;
+      display: block;
       @include gl-text-truncate;
     }
   }
diff --git a/app/assets/stylesheets/page_bundles/pipeline_editor.scss b/app/assets/stylesheets/page_bundles/pipeline_editor.scss
index ae832f61086..9e09980200f 100644
--- a/app/assets/stylesheets/page_bundles/pipeline_editor.scss
+++ b/app/assets/stylesheets/page_bundles/pipeline_editor.scss
@@ -17,7 +17,7 @@
 }
 
 .file-tree-includes-link:hover > svg {
-  @include gl-display-block;
+  display: block;
   top: 2px;
 }
 
diff --git a/app/assets/stylesheets/page_bundles/projects.scss b/app/assets/stylesheets/page_bundles/projects.scss
index c560740a742..f7c8961c2c6 100644
--- a/app/assets/stylesheets/page_bundles/projects.scss
+++ b/app/assets/stylesheets/page_bundles/projects.scss
@@ -280,7 +280,8 @@
   .project-cell {
     @include gl-display-table-cell;
     @include gl-vertical-align-top;
-    @include gl-py-4;
+    padding-top: $gl-spacing-scale-4;
+    padding-bottom: $gl-spacing-scale-4;
     border-bottom: 1px solid var(--gray-50, $gray-50);
   }
 
@@ -323,7 +324,7 @@
     .controls {
       @include media-breakpoint-up(lg) {
         @include gl-justify-content-start;
-        @include gl-pr-9;
+        padding-right: $gl-spacing-scale-9;
 
         &:not(.with-pipeline-status) {
           .icon-wrapper:first-of-type {
@@ -354,7 +355,7 @@
 
     .icon-wrapper {
       @include media-breakpoint-down(md) {
-        @include gl-mr-0;
+        margin-right: 0;
         margin-left: $gl-spacing-scale-3;
       }
 
@@ -397,7 +398,7 @@
 
     .icon-wrapper {
       margin-left: $gl-spacing-scale-3;
-      @include gl-mr-0;
+      margin-right: 0;
     }
 
     .user-access-role {
@@ -407,7 +408,7 @@
 
   @include media-breakpoint-down(md) {
     .updated-note {
-      @include gl-mt-3;
+      margin-top: $gl-spacing-scale-3;
       @include gl-text-right;
     }
   }
diff --git a/app/assets/stylesheets/page_bundles/todos.scss b/app/assets/stylesheets/page_bundles/todos.scss
index 6fa92a2ea20..359d38bfa2d 100644
--- a/app/assets/stylesheets/page_bundles/todos.scss
+++ b/app/assets/stylesheets/page_bundles/todos.scss
@@ -37,7 +37,7 @@
     }
 
     &:hover {
-      @include gl-border-t-1;
+      border-top-width: $gl-border-size-1;
       @include gl-border-t-transparent;
       @include gl-border-t-solid;
     }
@@ -63,7 +63,7 @@
   margin-right: 2.5rem;
 
   @include media-breakpoint-up(sm) {
-    @include gl-mr-0;
+    margin-right: 0;
     @include gl-text-overflow-ellipsis;
     @include gl-white-space-nowrap;
     @include gl-overflow-hidden;
@@ -72,18 +72,19 @@
 
 .todo-body {
   p {
-    @include gl-display-inline;
+    display: inline;
     color: var(--gl-text-color, $gl-text-color);
   }
 
   pre.code.highlight {
     padding-top: 0;
-  padding-bottom: 0;
-    @include gl-px-1;
+    padding-bottom: 0;
+    padding-left: $gl-spacing-scale-1;
+    padding-right: $gl-spacing-scale-1;
     margin: 0;
     @include gl-border-0;
     border-radius: $gl-border-radius-base;
-    @include gl-display-inline-flex;
+    display: inline-flex;
     background: var(--gray-50, $gray-50);
     color: var(--gl-text-color, $gl-text-color);
   }
diff --git a/app/assets/stylesheets/page_bundles/work_items.scss b/app/assets/stylesheets/page_bundles/work_items.scss
index 102d2045af2..e0821b11bef 100644
--- a/app/assets/stylesheets/page_bundles/work_items.scss
+++ b/app/assets/stylesheets/page_bundles/work_items.scss
@@ -247,16 +247,16 @@ $disclosure-hierarchy-chevron-dimension: 1.2rem;
 }
 
 .disclosure-hierarchy-button {
-  @include gl-pl-4;
+  padding-left: $gl-spacing-scale-4;
   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;
-  @include gl-line-height-normal;
+  border-right-style: none;
+  border-left-style: none;
+  line-height: $gl-line-height-16;
   padding-right: $grid-size;
   max-width: $gl-spacing-scale-20;
   background: var(--gray-10, $white);
@@ -288,7 +288,7 @@ $disclosure-hierarchy-chevron-dimension: 1.2rem;
   }
 
   .disclosure-hierarchy-item:first-child & {
-    @include gl-pl-3;
+    padding-left: $gl-spacing-scale-3;
     border-left: 1px solid var(--gray-100, $gray-100);
     @include gl-rounded-top-left-base;
     @include gl-rounded-bottom-left-base;
@@ -306,7 +306,7 @@ $disclosure-hierarchy-chevron-dimension: 1.2rem;
   }
 
   .disclosure-hierarchy-item:last-child & {
-    @include gl-pr-4;
+    padding-right: $gl-spacing-scale-4;
     border-right: 1px solid var(--gray-100, $gray-100);
     @include gl-rounded-top-right-base;
     @include gl-rounded-bottom-right-base;
@@ -343,7 +343,7 @@ $disclosure-hierarchy-chevron-dimension: 1.2rem;
     border-bottom: 1px solid var(--gray-400, $gray-400);
     @include hierarchy-active-item-color;
     z-index: 2;
-    @include gl-rounded-small;
+    border-radius: $gl-border-radius-small;
 
     &::before, &::after {
       box-shadow: 2px -2px 0 1px $blue-400;
diff --git a/app/assets/stylesheets/pages/colors.scss b/app/assets/stylesheets/pages/colors.scss
index ffc4e4992ab..5d3053a33b1 100644
--- a/app/assets/stylesheets/pages/colors.scss
+++ b/app/assets/stylesheets/pages/colors.scss
@@ -3,14 +3,14 @@
 }
 
 .color-item-color {
-  @include gl-flex-shrink-0;
-  @include gl-mr-3;
+  flex-shrink: 0;
+  margin-right: $gl-spacing-scale-3;
   top: 0;
 }
 
 .right-sidebar-collapsed {
   .color-item {
-    @include gl-pt-3;
+    padding-top: $gl-spacing-scale-3;
   }
 
   .color-item-color {
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 58fe4e8504c..b0519119bd8 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -259,7 +259,7 @@
   }
 
   .header-main-content & {
-    @include gl-mr-2;
+    margin-right: $gl-spacing-scale-2;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index d01286bd209..91f123d7b26 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -91,7 +91,8 @@ table.pipeline-project-metrics tr td {
 }
 
 .user-access-role {
-  @include gl-px-3;
+  padding-left: $gl-spacing-scale-3;
+  padding-right: $gl-spacing-scale-3;
   display: inline-block;
   color: $gl-text-color-secondary;
   font-size: 12px;
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index f57a8519992..69fed5d59fe 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -198,7 +198,7 @@ ul.related-merge-requests > li gl-emoji {
     display: flex;
 
     .new-branch-col {
-      @include gl-pb-0;
+      padding-bottom: 0;
       align-self: flex-end;
     }
   }
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 1494e95c922..a706c003c51 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -1032,7 +1032,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
 
   &.is-active {
     svg {
-      @include gl-text-green-500;
+      color: $green-500;
     }
 
     &:hover,
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 1548a63ef6e..0d8fbc744c9 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -61,7 +61,7 @@
 .settings-section::after {
   content: '';
   display: block;
-  @include gl-mb-7;
+  margin-bottom: $gl-spacing-scale-7;
 }
 
 .settings-section,
@@ -71,11 +71,11 @@
 
 // Fix for sticky header when there is no search bar.
 .flash-container + .settings-section {
-  @include gl-pt-3;
+  padding-top: $gl-spacing-scale-3;
 }
 
 .settings-section ~ .settings-section {
-  @include gl-pt-6;
+  padding-top: $gl-spacing-scale-6;
 }
 
 .settings-section:not(.settings-section-no-bottom) ~ .settings-section {
@@ -83,10 +83,10 @@
 }
 
 .settings-section-no-bottom::after {
-  @include gl-pb-0;
+  padding-bottom: 0;
 
   @include media-breakpoint-up(sm) {
-    @include gl-pb-5;
+    padding-bottom: $gl-spacing-scale-5;
   }
 }
 
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index 5fec8eb661d..27338c34741 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -134,7 +134,7 @@
 }
 
 .gl-last-of-type-border-b-0:last-of-type {
-  @include gl-border-b-0;
+  border-bottom-width: 0;
 }
 
 .gl-md-h-9 {
diff --git a/app/assets/stylesheets/vendors/atwho.scss b/app/assets/stylesheets/vendors/atwho.scss
index 41f275ab8be..338ec571114 100644
--- a/app/assets/stylesheets/vendors/atwho.scss
+++ b/app/assets/stylesheets/vendors/atwho.scss
@@ -4,10 +4,10 @@
   min-width: $gl-new-dropdown-min-width;
   max-width: $gl-new-dropdown-max-width;
 
-  @include gl-border-b-1;
-  @include gl-border-b-solid;
-  @include gl-border-b-gray-100;
-  @include gl-rounded-lg;
+  border-bottom-width: $gl-border-size-1;
+  border-bottom-style: solid;
+  border-bottom-color: $gray-100;
+  border-radius: $gl-border-radius-large;
   @include gl-shadow-md;
 
 
@@ -41,17 +41,20 @@
 
   // TODO: fallback to global style
   .atwho-view-ul {
-    @include gl-py-2;
+    padding-top: $gl-spacing-scale-2;
+    padding-bottom: $gl-spacing-scale-2;
     max-height: $gl-max-dropdown-max-height;
 
     li {
       border: 0;
       padding: $gl-padding-6;
 
-      @include gl-my-2;
-      @include gl-mx-3;
-      @include gl-rounded-small;
-      @include gl-line-height-normal;
+      margin-top: $gl-spacing-scale-2;
+      margin-bottom: $gl-spacing-scale-2;
+      margin-left: $gl-spacing-scale-3;
+      margin-right: $gl-spacing-scale-3;
+      border-radius: $gl-border-radius-small;
+      line-height: $gl-line-height-16;
 
       &.cur {
         @include gl-focus;
@@ -78,7 +81,7 @@
       }
 
       gl-emoji {
-        @include gl-mr-2;
+        margin-right: $gl-spacing-scale-2;
         vertical-align: text-top;
 
         img {
@@ -90,7 +93,7 @@
       .dropdown-label-box {
         position: relative;
         top: -1px;
-        @include gl-mr-2;
+        margin-right: $gl-spacing-scale-2;
       }
     }
   }
diff --git a/app/models/note.rb b/app/models/note.rb
index 953632ba910..10ab85b24b7 100644
--- a/app/models/note.rb
+++ b/app/models/note.rb
@@ -935,7 +935,7 @@ class Note < ApplicationRecord
   end
 
   def noteable_can_have_confidential_note?
-    for_issue?
+    for_issuable?
   end
 
   def set_internal_flag
diff --git a/app/policies/merge_request_policy.rb b/app/policies/merge_request_policy.rb
index 49f9225a1d3..27bcd816a08 100644
--- a/app/policies/merge_request_policy.rb
+++ b/app/policies/merge_request_policy.rb
@@ -14,6 +14,7 @@ class MergeRequestPolicy < IssuablePolicy
   rule { ~can?(:read_merge_request) }.policy do
     prevent :create_note
     prevent :accept_merge_request
+    prevent :mark_note_as_internal
   end
 
   rule { can_approve }.policy do
@@ -43,6 +44,10 @@ class MergeRequestPolicy < IssuablePolicy
     enable :set_merge_request_metadata
   end
 
+  rule { can?(:reporter_access) }.policy do
+    enable :mark_note_as_internal
+  end
+
   private
 
   def can_approve?
diff --git a/app/serializers/merge_request_noteable_entity.rb b/app/serializers/merge_request_noteable_entity.rb
index 04b801e29ad..4122cb5f9a4 100644
--- a/app/serializers/merge_request_noteable_entity.rb
+++ b/app/serializers/merge_request_noteable_entity.rb
@@ -49,6 +49,10 @@ class MergeRequestNoteableEntity < IssuableEntity
     expose :can_update do |merge_request|
       can?(current_user, :update_merge_request, merge_request)
     end
+
+    expose :can_create_confidential_note do |merge_request|
+      can?(request.current_user, :mark_note_as_internal, merge_request)
+    end
   end
 
   expose :locked_discussion_docs_path, if: -> (merge_request) { merge_request.discussion_locked? } do |merge_request|