Merge branch '36857-phase-1' into 'master'

Deprecate Gitlab UI class-name clashes

See merge request gitlab-org/gitlab!27610

app/assets/javascripts/monitoring/components/alert_widget.vue

@@ -240,7 +240,7 @@ export default {
         class="d-flex-center text-truncate"
       >
         <gl-icon name="warning" :size="16" class="flex-shrink-0" />
-        <span class="text-truncate gl-pl-1">
+        <span class="text-truncate gl-pl-1-deprecated-no-really-do-not-use-me">
           <gl-sprintf
             :message="
               hasMultipleAlerts ? multipleAlertsSummary.message : singleAlertSummary.message

app/assets/javascripts/monitoring/components/dashboard_panel.vue

@@ -268,7 +268,7 @@ export default {
       <slot name="topLeft"></slot>
       <h5
         ref="graphTitle"
-        class="prometheus-graph-title gl-font-size-large font-weight-bold text-truncate append-right-8"
+        class="prometheus-graph-title gl-font-lg font-weight-bold text-truncate append-right-8"
       >
         {{ title }}
       </h5>

app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue

@@ -69,7 +69,9 @@ export default {
     >
       <ci-icon :status="group.status" />
 
-      <span class="ci-status-text text-truncate mw-70p gl-pl-1 d-inline-block align-bottom">
+      <span
+        class="ci-status-text text-truncate mw-70p gl-pl-1-deprecated-no-really-do-not-use-me d-inline-block align-bottom"
+      >
         {{ group.name }}
       </span>
 

app/assets/javascripts/pipelines/components/graph/job_name_component.vue

@@ -27,7 +27,9 @@ export default {
 <template>
   <span class="ci-job-name-component mw-100">
     <ci-icon :status="status" />
-    <span class="ci-status-text text-truncate mw-70p gl-pl-1 d-inline-block align-bottom">
+    <span
+      class="ci-status-text text-truncate mw-70p gl-pl-1-deprecated-no-really-do-not-use-me d-inline-block align-bottom"
+    >
       {{ name }}
     </span>
   </span>

app/assets/javascripts/releases/components/evidence_block.vue

@@ -80,7 +80,9 @@ export default {
             <span class="js-short monospace">{{ shortSha(index) }}</span>
           </template>
           <template slot="expanded">
-            <span class="js-expanded monospace gl-pl-1">{{ sha(index) }}</span>
+            <span class="js-expanded monospace gl-pl-1-deprecated-no-really-do-not-use-me">{{
+              sha(index)
+            }}</span>
           </template>
         </expand-button>
         <clipboard-button

app/assets/javascripts/releases/components/release_block_header.vue

@@ -41,7 +41,7 @@ export default {
 
 <template>
   <div class="card-header d-flex align-items-center bg-white pr-0">
-    <h2 class="card-title my-2 mr-auto gl-font-size-20">
+    <h2 class="card-title my-2 mr-auto gl-font-size-20-deprecated-no-really-do-not-use-me">
       <gl-link v-if="selfLink" :href="selfLink" class="font-size-inherit">
         {{ release.name }}
       </gl-link>

app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_info.vue

@@ -75,7 +75,7 @@ export default {
           :href="deployment.url"
           target="_blank"
           rel="noopener noreferrer nofollow"
-          class="js-deploy-meta gl-font-size-12"
+          class="js-deploy-meta gl-font-sm"
         >
           {{ deployment.name }}
         </gl-link>

app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue

@@ -51,7 +51,7 @@ export default {
     <div class="mr-widget-extension d-flex align-items-center pl-3">
       <div v-if="hasError" class="ci-widget media">
         <div class="media-body">
-          <span class="gl-font-size-small mr-widget-margin-left gl-line-height-24 js-error-state">{{
+          <span class="gl-font-sm mr-widget-margin-left gl-line-height-24 js-error-state">{{
             title
           }}</span>
         </div>

app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue

@@ -169,15 +169,15 @@ export default {
       menu-class="date-time-picker-menu"
       toggle-class="date-time-picker-toggle text-truncate"
     >
-      <div class="d-flex justify-content-between gl-p-2">
+      <div class="d-flex justify-content-between gl-p-2-deprecated-no-really-do-not-use-me">
         <gl-form-group
           v-if="customEnabled"
           :label="__('Custom range')"
           label-for="custom-from-time"
-          label-class="gl-pb-1"
-          class="custom-time-range-form-group col-md-7 gl-pl-1 gl-pr-0 m-0"
+          label-class="gl-pb-1-deprecated-no-really-do-not-use-me"
+          class="custom-time-range-form-group col-md-7 gl-pl-1-deprecated-no-really-do-not-use-me gl-pr-0 m-0"
         >
-          <div class="gl-pt-2">
+          <div class="gl-pt-2-deprecated-no-really-do-not-use-me">
             <date-time-picker-input
               id="custom-time-from"
               v-model="startInput"
@@ -198,9 +198,12 @@ export default {
             </gl-deprecated-button>
           </gl-form-group>
         </gl-form-group>
-        <gl-form-group label-for="group-id-dropdown" class="col-md-5 gl-pl-1 gl-pr-1 m-0">
+        <gl-form-group
+          label-for="group-id-dropdown"
+          class="col-md-5 gl-pl-1-deprecated-no-really-do-not-use-me gl-pr-1-deprecated-no-really-do-not-use-me m-0"
+        >
           <template #label>
-            <span class="gl-pl-5">{{ __('Quick range') }}</span>
+            <span class="gl-pl-5-deprecated-no-really-do-not-use-me">{{ __('Quick range') }}</span>
           </template>
 
           <gl-dropdown-item

app/assets/stylesheets/framework/common.scss

@@ -516,11 +516,36 @@ img.emoji {
   These will be replaced when the Gitlab UI utilities are included.
 **/
 @each $index, $padding in $spacing-scale {
-  #{'.gl-p-#{$index}'} { padding: $padding; }
-  #{'.gl-pl-#{$index}'} { padding-left: $padding; }
-  #{'.gl-pr-#{$index}'} { padding-right: $padding; }
-  #{'.gl-pt-#{$index}'} { padding-top: $padding; }
-  #{'.gl-pb-#{$index}'} { padding-bottom: $padding; }
+  #{'.gl-p-#{$index}-deprecated-no-really-do-not-use-me'} { padding: $padding; }
+  #{'.gl-pl-#{$index}-deprecated-no-really-do-not-use-me'} { padding-left: $padding; }
+  #{'.gl-pr-#{$index}-deprecated-no-really-do-not-use-me'} { padding-right: $padding; }
+  #{'.gl-pt-#{$index}-deprecated-no-really-do-not-use-me'} { padding-top: $padding; }
+  #{'.gl-pb-#{$index}-deprecated-no-really-do-not-use-me'} { padding-bottom: $padding; }
+}
+
+/**
+  The zero-indexed classes will not change and do not need to be updated.
+  These can be removed when the Gitlab UI class include is merged.
+**/
+
+.gl-p-0 {
+  padding: 0;
+}
+
+.gl-pl-0 {
+  padding-left: 0;
+}
+
+.gl-pr-0 {
+  padding-right: 0;
+}
+
+.gl-pt-0 {
+  padding-top: 0;
+}
+
+.gl-pb-0 {
+  padding-bottom: 0;
 }
 
 /**
@@ -611,15 +636,13 @@ img.emoji {
   }
 }
 
-.gl-font-size-small { font-size: $gl-font-size-small; }
-.gl-font-size-large { font-size: $gl-font-size-large; }
+.gl-font-sm { font-size: $gl-font-size-small; }
+.gl-font-lg { font-size: $gl-font-size-large; }
+.gl-font-base { font-size: $gl-font-size-14; }
 
 .gl-line-height-24 { line-height: $gl-line-height-24; }
 
 .gl-font-size-0 { font-size: 0; }
-.gl-font-size-12 { font-size: $gl-font-size-12; }
-.gl-font-size-14 { font-size: $gl-font-size-14; }
-.gl-font-size-16 { font-size: $gl-font-size-16; }
 .gl-font-size-28 { font-size: $gl-font-size-28; }
 .gl-font-size-42 { font-size: $gl-font-size-42; }
 

app/views/ci/status/_dropdown_graph_badge.html.haml

@@ -8,12 +8,12 @@
 - if status.has_details?
   = link_to status.details_path, class: 'mini-pipeline-graph-dropdown-item d-flex', data: { toggle: 'tooltip', title: tooltip, container: 'body' } do
     %span{ class: klass }= sprite_icon(status.icon)
-    %span.ci-build-text.text-truncate.mw-70p.gl-pl-1= subject.name
+    %span.ci-build-text.text-truncate.mw-70p.gl-pl-1-deprecated-no-really-do-not-use-me= subject.name
 
 - else
   .menu-item.mini-pipeline-graph-dropdown-item.d-flex{ data: { toggle: 'tooltip', title: tooltip, container: 'body' } }
     %span{ class: klass }= sprite_icon(status.icon)
-    %span.ci-build-text.text-truncate.mw-70p.gl-pl-1= subject.name
+    %span.ci-build-text.text-truncate.mw-70p.gl-pl-1-deprecated-no-really-do-not-use-me= subject.name
 
 - if status.has_action?
   = link_to status.action_path, class: "ci-action-icon-container ci-action-icon-wrapper js-ci-action-icon", method: status.action_method, data: { toggle: 'tooltip', title: status.action_title, container: 'body' } do

app/views/devise/registrations/new.html.haml

@@ -8,7 +8,7 @@
         = _("GitLab is a single application for the entire software development lifecycle. From project planning and source code management to CI/CD, monitoring, and security.")
     .col-lg-5.order-12
       .text-center.mb-3
-        %h2.font-weight-bold.gl-font-size-20= _('Register for GitLab')
+        %h2.font-weight-bold.gl-font-size-20-deprecated-no-really-do-not-use-me= _('Register for GitLab')
       = render 'devise/shared/experimental_separate_sign_up_flow_box'
       = render 'devise/shared/sign_in_link'
 - else

app/views/projects/blob/_template_selectors.html.haml

-.template-selectors-menu.gl-pl-2
+.template-selectors-menu.gl-pl-2-deprecated-no-really-do-not-use-me
   .template-selector-dropdowns-wrap
     .template-type-selector.js-template-type-selector-wrap.hidden
       - toggle_text = should_suggest_gitlab_ci_yml? ? '.gitlab-ci.yml' : 'Select a template type'

app/views/projects/graphs/show.html.haml

 - page_title _('Contributors')
 
-.sub-header-block.bg-gray-light.gl-p-3
+.sub-header-block.bg-gray-light.gl-p-3-deprecated-no-really-do-not-use-me
   .tree-ref-holder.inline.vertical-align-middle
     = render 'shared/ref_switcher', destination: 'graphs'
   = link_to s_('Commits|History'), project_commits_path(@project, current_ref), class: 'btn'

app/views/shared/issuable/form/_branch_chooser.html.haml

@@ -6,7 +6,7 @@
 
 - source_title, target_title = format_mr_branch_names(@merge_request)
 
-.form-group.row.d-flex.gl-pl-3.gl-pr-3.branch-selector
+.form-group.row.d-flex.gl-pl-3-deprecated-no-really-do-not-use-me.gl-pr-3-deprecated-no-really-do-not-use-me.branch-selector
   .align-self-center
     %span
       = _('From <code>%{source_title}</code> into').html_safe % { source_title: source_title }

ee/app/assets/javascripts/analytics/shared/components/metric_card.vue

@@ -45,7 +45,7 @@ export default {
             >
             <template v-else>{{ metric.value }}</template>
           </h3>
-          <p class="text-secondary gl-font-size-small mb-2">{{ metric.label }}</p>
+          <p class="text-secondary gl-font-sm mb-2">{{ metric.label }}</p>
         </div>
       </div>
     </template>

ee/app/assets/javascripts/boards/components/board_settings_sidebar.vue

@@ -213,7 +213,7 @@ export default {
         <div class="d-flex justify-content-between align-items-center mb-2">
           <label class="m-0">{{ $options.wipLimitText }}</label>
           <gl-deprecated-button
-            class="js-edit-button h-100 border-0 gl-line-height-14 text-dark"
+            class="js-edit-button h-100 border-0 gl-line-height-14-deprecated-no-really-do-not-use-me text-dark"
             variant="link"
             @click="showInput"
             >{{ $options.editLinkText }}</gl-deprecated-button
@@ -238,7 +238,7 @@ export default {
           <template v-if="wipLimitIsSet">
             <span class="m-1">-</span>
             <gl-deprecated-button
-              class="js-remove-limit h-100 border-0 gl-line-height-14 text-secondary"
+              class="js-remove-limit h-100 border-0 gl-line-height-14-deprecated-no-really-do-not-use-me text-secondary"
               variant="link"
               @click="clearWipLimit"
               >{{ $options.removeLimitText }}</gl-deprecated-button

ee/app/assets/javascripts/design_management/components/toolbar/index.vue

@@ -107,7 +107,7 @@ export default {
       <icon :size="18" name="close" />
     </router-link>
     <div class="overflow-hidden d-flex align-items-center">
-      <h2 class="m-0 str-truncated-100 gl-font-size-14">{{ filename }}</h2>
+      <h2 class="m-0 str-truncated-100 gl-font-base">{{ filename }}</h2>
       <small v-if="updatedAt" class="text-secondary">{{ updatedText }}</small>
     </div>
     <pagination :id="id" class="ml-auto flex-shrink-0" />

ee/app/assets/javascripts/design_management/pages/design/index.vue

@@ -308,7 +308,9 @@ export default {
         </div>
       </div>
       <div class="image-notes">
-        <h2 class="gl-font-size-20 font-weight-bold mt-0">{{ issue.title }}</h2>
+        <h2 class="gl-font-size-20-deprecated-no-really-do-not-use-me font-weight-bold mt-0">
+          {{ issue.title }}
+        </h2>
         <a class="text-tertiary text-decoration-none mb-3 d-block" :href="issue.webUrl">{{
           issue.webPath
         }}</a>
@@ -348,7 +350,7 @@ export default {
             />
           </apollo-mutation>
         </template>
-        <h2 v-else class="new-discussion-disclaimer gl-font-size-14 m-0">
+        <h2 v-else class="new-discussion-disclaimer gl-font-base m-0">
           {{ __("Click the image where you'd like to start a new discussion") }}
         </h2>
       </div>

ee/app/assets/javascripts/environments/components/deploy_board_component.vue

@@ -122,7 +122,7 @@ export default {
         <div class="deploy-board-information">
           <section class="deploy-board-status">
             <span v-gl-tooltip :title="instanceIsCompletedText">
-              <span ref="percentage" class="text-center text-plain gl-font-size-large"
+              <span ref="percentage" class="text-center text-plain gl-font-lg"
                 >{{ deployBoardData.completion }}%</span
               >
               <span class="text text-center text-secondary">{{ __('Complete') }}</span>
@@ -130,7 +130,7 @@ export default {
           </section>
 
           <section class="deploy-board-instances">
-            <span class="deploy-board-instances-text gl-font-size-14 text-secondary">
+            <span class="deploy-board-instances-text gl-font-base text-secondary">
               {{ instanceTitle }} ({{ instanceCount }})
             </span>
 

ee/app/assets/javascripts/geo_nodes/components/geo_node_detail_item.vue

@@ -113,7 +113,7 @@ export default {
         class="d-inline-flex align-items-center cursor-pointer"
       >
         <gl-icon name="canceled-circle" :size="14" class="mr-1 text-secondary-300" />
-        <span ref="disabledText" class="text-secondary-600 gl-font-size-small">{{
+        <span ref="disabledText" class="text-secondary-600 gl-font-sm">{{
           __('Synchronization disabled')
         }}</span>
       </div>
@@ -126,12 +126,9 @@ export default {
         <section>
           <p>{{ __('Synchronization of container repositories is disabled.') }}</p>
           <div class="mt-3">
-            <gl-link
-              class="gl-font-size-small"
-              :href="$options.replicationHelpUrl"
-              target="_blank"
-              >{{ __('Learn how to enable synchronization') }}</gl-link
-            >
+            <gl-link class="gl-font-sm" :href="$options.replicationHelpUrl" target="_blank">{{
+              __('Learn how to enable synchronization')
+            }}</gl-link>
           </div>
         </section>
       </gl-popover>

ee/app/assets/javascripts/geo_nodes/components/geo_node_header.vue

@@ -58,15 +58,12 @@ export default {
           />
         </span>
         <span class="inline">
-          <span
-            v-if="node.current"
-            class="rounded-pill gl-font-size-12 p-1 text-white bg-success-400"
-          >
+          <span v-if="node.current" class="rounded-pill gl-font-sm p-1 text-white bg-success-400">
             {{ s__('Current node') }}
           </span>
           <span
             v-if="node.primary"
-            class="ml-1 rounded-pill gl-font-size-12 p-1 text-white bg-primary-600"
+            class="ml-1 rounded-pill gl-font-sm p-1 text-white bg-primary-600"
           >
             {{ s__('Primary') }}
           </span>

ee/app/assets/javascripts/geo_nodes/components/geo_node_last_updated.vue

@@ -67,7 +67,7 @@ export default {
     />
     <gl-popover :target="() => $refs.lastUpdated.$el" placement="top" triggers="hover focus">
       <p>{{ syncTimeAgo.popoverText }}</p>
-      <gl-link class="mt-3 gl-font-size-small" :href="syncHelp.link" target="_blank">{{
+      <gl-link class="mt-3 gl-font-sm" :href="syncHelp.link" target="_blank">{{
         syncHelp.text
       }}</gl-link>
     </gl-popover>

ee/app/assets/javascripts/geo_nodes/components/geo_node_sync_progress.vue

@@ -85,7 +85,7 @@ export default {
           <span class="font-weight-bold">{{ itemValue.failureCount.toLocaleString() }}</span>
         </div>
         <div v-if="detailsPath" class="mt-3">
-          <gl-link class="gl-font-size-small" :href="detailsPath" target="_blank">{{
+          <gl-link class="gl-font-sm" :href="detailsPath" target="_blank">{{
             __('More information')
           }}</gl-link>
         </div>

ee/app/assets/javascripts/packages/details/components/activity.vue

@@ -48,7 +48,7 @@ export default {
 
 <template>
   <div class="mb-3">
-    <h3 class="gl-font-size-16">{{ __('Activity') }}</h3>
+    <h3 class="gl-font-lg">{{ __('Activity') }}</h3>
 
     <div ref="commit-info" class="info-well">
       <div v-if="packagePipeline" class="well-segment">

ee/app/assets/javascripts/packages/details/components/package_title.vue

@@ -31,7 +31,9 @@ export default {
 
 <template>
   <div class="flex-column">
-    <h1 class="gl-font-size-20 prepend-top-8 append-bottom-4">{{ packageEntity.name }}</h1>
+    <h1 class="gl-font-size-20-deprecated-no-really-do-not-use-me prepend-top-8 append-bottom-4">
+      {{ packageEntity.name }}
+    </h1>
 
     <div class="d-flex align-items-center text-secondary">
       <gl-icon name="eye" class="append-right-8" />

ee/app/assets/javascripts/related_issues/components/related_issues_block.vue

@@ -160,7 +160,9 @@ export default {
       </div>
       <div
         class="linked-issues-card-body bg-gray-light"
-        :class="{ 'gl-p-3': isFormVisible || shouldShowTokenBody }"
+        :class="{
+          'gl-p-3-deprecated-no-really-do-not-use-me': isFormVisible || shouldShowTokenBody,
+        }"
       >
         <div
           v-if="isFormVisible"

ee/app/assets/javascripts/related_issues/components/related_issues_list.vue

@@ -102,7 +102,7 @@ export default {
 
 <template>
   <div>
-    <h4 v-if="heading" class="gl-font-size-14 mt-0">{{ heading }}</h4>
+    <h4 v-if="heading" class="gl-font-base mt-0">{{ heading }}</h4>
     <div
       class="related-issues-token-body bordered-box bg-white"
       :class="{ 'sortable-container': canReorder }"

ee/app/assets/javascripts/roadmap/components/epic_item_timeline.vue

@@ -184,7 +184,7 @@ export default {
               :value="epicWeightPercentage"
               aria-hidden="true"
             />
-            <div class="gl-font-size-small d-flex align-items-center text-nowrap">
+            <div class="gl-font-sm d-flex align-items-center text-nowrap">
               <icon class="append-right-2" :size="12" name="weight" />
               <p class="m-0" :aria-label="epicWeightPercentageText">{{ epicWeightPercentage }}%</p>
             </div>

ee/app/assets/javascripts/security_dashboard/components/csv_export_button.vue

@@ -85,7 +85,7 @@ export default {
       placement="left"
       triggers="manual"
     >
-      <p class="gl-font-size-14">
+      <p class="gl-font-base">
         {{ __('You can now export your security dashboard to a CSV report.') }}
       </p>
       <gl-link

ee/app/assets/javascripts/security_dashboard/components/vulnerability_count.vue

@@ -28,7 +28,10 @@ export default {
     <div class="p-2 bg-gray-light d-flex justify-content-center">
       <severity-badge :severity="severity" />
     </div>
-    <div ref="body" class="pt-3 pb-3 gl-font-size-20 text-center">
+    <div
+      ref="body"
+      class="pt-3 pb-3 gl-font-size-20-deprecated-no-really-do-not-use-me text-center"
+    >
       <span v-if="isLoading">&mdash;</span> <span v-else>{{ count }}</span>
     </div>
   </div>

ee/app/assets/javascripts/security_dashboard/components/vulnerability_severity.vue

@@ -103,7 +103,7 @@ export default {
               <span
                 v-gl-tooltip
                 :title="severityGroup.description"
-                class="font-weight-bold mr-3 gl-font-size-16"
+                class="font-weight-bold mr-3 gl-font-lg"
                 :class="cssForSeverityGroup(severityGroup)"
               >
                 {{ severityGroup.type }}

ee/app/assets/javascripts/subscriptions/new/components/order_summary.vue

@@ -37,7 +37,7 @@ export default {
     <div class="d-lg-none">
       <div @click="toggleCollapse">
         <h4
-          class="d-flex justify-content-between gl-font-size-16"
+          class="d-flex justify-content-between gl-font-lg"
           :class="{ 'prepend-bottom-32': !collapsed }"
         >
           <div class="d-flex">
@@ -52,7 +52,7 @@ export default {
     </div>
     <div class="d-none d-lg-block">
       <div class="append-bottom-20">
-        <h4 class="gl-font-size-20">
+        <h4 class="gl-font-size-20-deprecated-no-really-do-not-use-me">
           {{ titleWithName }}
         </h4>
       </div>

ee/app/assets/javascripts/subscriptions/new/components/order_summary/summary_details.vue

@@ -66,7 +66,7 @@ export default {
       </div>
     </div>
     <div class="border-bottom prepend-top-default append-bottom-default"></div>
-    <div class="d-flex justify-content-between bold gl-font-size-large">
+    <div class="d-flex justify-content-between bold gl-font-lg">
       <div>{{ $options.i18n.total }}</div>
       <div class="js-total-amount">{{ formatAmount(totalAmount, usersPresent) }}</div>
     </div>

ee/app/assets/javascripts/vue_merge_request_widget/components/visual_review_app_link.vue

@@ -193,7 +193,7 @@ export default {
           :title="copyToClipboard.mrId"
           :text="appMetadata.mergeRequestId.toString()"
           :modal-id="modalId"
-          css-classes="border-0 gl-pt-0 gl-pr-0 gl-pl-1 gl-pb-0"
+          css-classes="border-0 gl-pt-0 gl-pr-0 gl-pl-1-deprecated-no-really-do-not-use-me gl-pb-0"
         />
       </p>
       <p v-html="instructionText.step4"></p>

ee/app/assets/javascripts/vue_shared/license_compliance/components/license_packages.vue

@@ -38,7 +38,7 @@ export default {
 };
 </script>
 <template>
-  <div class="license-packages d-inline gl-font-size-12">
+  <div class="license-packages d-inline gl-font-sm">
     <div class="js-license-dependencies d-inline">{{ packageString }}</div>
     <button
       v-if="!showAllPackages && remainingPackages"

ee/app/assets/javascripts/vulnerabilities/components/vulnerability_list.vue

@@ -182,7 +182,7 @@ export default {
         <div
           v-if="item.location"
           :data-testid="`location-${item.id}`"
-          class="gl-text-color-secondary gl-font-size-small"
+          class="gl-text-color-secondary gl-font-sm"
         >
           <div v-if="shouldShowProjectNamespace">
             {{ item.project.nameWithNamespace }}

ee/app/views/registrations/welcome.html.haml

 - page_title _('Your profile')
 
 .row.flex-grow-1.bg-gray-light
-  .d-flex.flex-column.align-items-center.w-100.gl-p-3
+  .d-flex.flex-column.align-items-center.w-100.gl-p-3-deprecated-no-really-do-not-use-me
     .edit-profile.login-page.d-flex.flex-column.align-items-center.pt-lg-3
       - if in_subscription_flow?
         #progress-bar
@@ -9,7 +9,7 @@
       %p
         .center= _('In order to personalize your experience with GitLab<br>we would like to know a bit more about you.').html_safe
 
-      = form_for(current_user, url: users_sign_up_update_registration_path, html: { class: 'card w-100 gl-p-3', 'aria-live' => 'assertive' }) do |f|
+      = form_for(current_user, url: users_sign_up_update_registration_path, html: { class: 'card w-100 gl-p-3-deprecated-no-really-do-not-use-me', 'aria-live' => 'assertive' }) do |f|
         .devise-errors
           = render 'devise/shared/error_messages', resource: current_user
         .row

ee/app/views/subscriptions/groups/edit.html.haml

 - page_title _('Your GitLab group')
 
 .row.flex-grow-1.bg-gray-light
-  .d-flex.flex-column.align-items-center.w-100.gl-p-3
-    %section.gl-banner.gl-banner-introduction.gl-p-2.px-lg-6
+  .d-flex.flex-column.align-items-center.w-100.gl-p-3-deprecated-no-really-do-not-use-me
+    %section.gl-banner.gl-banner-introduction.gl-p-2-deprecated-no-really-do-not-use-me.px-lg-6
       .gl-banner-illustration.d-flex
         = image_tag('illustrations/subscription-success.svg', class: 'mw-xs')
       .gl-banner-content.d-flex.flex-column.justify-content-center
         %h3= _('Thanks for your purchase!')
         - number_of_users = n_('1 user', '%{num} users', params[:quantity].to_i) % { num: params[:quantity] }
         %p= _('You have successfully purchased a %{plan} plan subscription for %{seats}. You’ll receive a receipt via email.') % { plan: plan_title, seats: number_of_users }
-    .edit-group.d-flex.flex-column.align-items-center.gl-pt-5
+    .edit-group.d-flex.flex-column.align-items-center.gl-pt-5-deprecated-no-really-do-not-use-me
       - if params[:new_user]
         #progress-bar
       %h2.center= _('Create a group for your organization')
@@ -17,7 +17,7 @@
         %div= _('A group represents your organization in GitLab.')
         %div= _('Your %{plan} plan will be applied to your group.' % { plan: plan_title })
 
-      = form_for [:subscriptions, @group], html: { class: 'gl-show-field-errors card w-100 gl-p-3' } do |f|
+      = form_for [:subscriptions, @group], html: { class: 'gl-show-field-errors card w-100 gl-p-3-deprecated-no-really-do-not-use-me' } do |f|
         = hidden_field_tag :new_user, params[:new_user]
         = form_errors(@group)
         .row

ee/spec/frontend/analytics/cycle_analytics/components/__snapshots__/recent_activity_card_spec.js.snap

@@ -31,7 +31,7 @@ exports[`RecentActivityCard matches the snapshot 1`] = `
         </h3>
          
         <p
-          class="text-secondary gl-font-size-small mb-2"
+          class="text-secondary gl-font-sm mb-2"
         >
           New Issues
         </p>
@@ -46,7 +46,7 @@ exports[`RecentActivityCard matches the snapshot 1`] = `
         </h3>
          
         <p
-          class="text-secondary gl-font-size-small mb-2"
+          class="text-secondary gl-font-sm mb-2"
         >
           Deploys
         </p>
@@ -61,7 +61,7 @@ exports[`RecentActivityCard matches the snapshot 1`] = `
         </h3>
          
         <p
-          class="text-secondary gl-font-size-small mb-2"
+          class="text-secondary gl-font-sm mb-2"
         >
           Deployment Frequency
         </p>

ee/spec/frontend/analytics/group_analytics/components/__snapshots__/group_activity_card_spec.js.snap

@@ -31,7 +31,7 @@ exports[`GroupActivity component matches the snapshot 1`] = `
         </h3>
          
         <p
-          class="text-secondary gl-font-size-small mb-2"
+          class="text-secondary gl-font-sm mb-2"
         >
           Merge Requests created
         </p>
@@ -46,7 +46,7 @@ exports[`GroupActivity component matches the snapshot 1`] = `
         </h3>
          
         <p
-          class="text-secondary gl-font-size-small mb-2"
+          class="text-secondary gl-font-sm mb-2"
         >
           Issues created
         </p>
@@ -61,7 +61,7 @@ exports[`GroupActivity component matches the snapshot 1`] = `
         </h3>
          
         <p
-          class="text-secondary gl-font-size-small mb-2"
+          class="text-secondary gl-font-sm mb-2"
         >
           New Members created
         </p>

ee/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap

@@ -18,7 +18,7 @@ exports[`Design management toolbar component renders design and updated data 1`]
     class="overflow-hidden d-flex align-items-center"
   >
     <h2
-      class="m-0 str-truncated-100 gl-font-size-14"
+      class="m-0 str-truncated-100 gl-font-base"
     >
       test.jpg
     </h2>

ee/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap

@@ -33,9 +33,11 @@ exports[`Design management design index page renders design index 1`] = `
     class="image-notes"
   >
     <h2
-      class="gl-font-size-20 font-weight-bold mt-0"
+      class="gl-font-size-20-deprecated-no-really-do-not-use-me font-weight-bold mt-0"
     >
-      My precious issue
+      
+        My precious issue
+      
     </h2>
      
     <a
@@ -127,9 +129,11 @@ exports[`Design management design index page with error GlAlert is rendered in c
     class="image-notes"
   >
     <h2
-      class="gl-font-size-20 font-weight-bold mt-0"
+      class="gl-font-size-20-deprecated-no-really-do-not-use-me font-weight-bold mt-0"
     >
-      My precious issue
+      
+        My precious issue
+      
     </h2>
      
     <a
@@ -146,7 +150,7 @@ exports[`Design management design index page with error GlAlert is rendered in c
     />
      
     <h2
-      class="new-discussion-disclaimer gl-font-size-14 m-0"
+      class="new-discussion-disclaimer gl-font-base m-0"
     >
       
         Click the image where you'd like to start a new discussion

ee/spec/frontend/packages/details/components/__snapshots__/activity_spec.js.snap

@@ -5,7 +5,7 @@ exports[`PackageActivity render to match the default snapshot when no pipeline 1
   class="mb-3"
 >
   <h3
-    class="gl-font-size-16"
+    class="gl-font-lg"
   >
     Activity
   </h3>
@@ -39,7 +39,7 @@ exports[`PackageActivity render to match the default snapshot when there is a pi
   class="mb-3"
 >
   <h3
-    class="gl-font-size-16"
+    class="gl-font-lg"
   >
     Activity
   </h3>

ee/spec/frontend/packages/details/components/__snapshots__/package_title_spec.js.snap

@@ -5,9 +5,11 @@ exports[`PackageTitle renders with tags 1`] = `
   class="flex-column"
 >
   <h1
-    class="gl-font-size-20 prepend-top-8 append-bottom-4"
+    class="gl-font-size-20-deprecated-no-really-do-not-use-me prepend-top-8 append-bottom-4"
   >
+    
     Test package
+  
   </h1>
    
   <div
@@ -78,9 +80,11 @@ exports[`PackageTitle renders without tags 1`] = `
   class="flex-column"
 >
   <h1
-    class="gl-font-size-20 prepend-top-8 append-bottom-4"
+    class="gl-font-size-20-deprecated-no-really-do-not-use-me prepend-top-8 append-bottom-4"
   >
+    
     Test package
+  
   </h1>
    
   <div

ee/spec/frontend/security_dashboard/components/__snapshots__/vulnerability_severity_spec.js.snap

@@ -61,7 +61,7 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
                   class="d-flex align-items-center font-weight-normal p-0 m-0"
                 >
                   <span
-                    class="font-weight-bold mr-3 gl-font-size-16 gl-text-red-900"
+                    class="font-weight-bold mr-3 gl-font-lg gl-text-red-900"
                   >
                     
               F
@@ -137,7 +137,7 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
                   class="d-flex align-items-center font-weight-normal p-0 m-0"
                 >
                   <span
-                    class="font-weight-bold mr-3 gl-font-size-16 gl-text-red-700"
+                    class="font-weight-bold mr-3 gl-font-lg gl-text-red-700"
                   >
                     
               D
@@ -213,7 +213,7 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
                   class="d-flex align-items-center font-weight-normal p-0 m-0"
                 >
                   <span
-                    class="font-weight-bold mr-3 gl-font-size-16 gl-text-orange-600"
+                    class="font-weight-bold mr-3 gl-font-lg gl-text-orange-600"
                   >
                     
               C
@@ -289,7 +289,7 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
                   class="d-flex align-items-center font-weight-normal p-0 m-0"
                 >
                   <span
-                    class="font-weight-bold mr-3 gl-font-size-16 gl-text-orange-400"
+                    class="font-weight-bold mr-3 gl-font-lg gl-text-orange-400"
                   >
                     
               B
@@ -365,7 +365,7 @@ exports[`Vulnerability Severity component when the data has loaded matches snaps
                   class="d-flex align-items-center font-weight-normal p-0 m-0"
                 >
                   <span
-                    class="font-weight-bold mr-3 gl-font-size-16 gl-text-green-500"
+                    class="font-weight-bold mr-3 gl-font-lg gl-text-green-500"
                   >
                     
               A

spec/frontend/monitoring/__snapshots__/alert_widget_spec.js.snap

@@ -13,7 +13,7 @@ exports[`AlertWidget Alert firing displays a warning icon and matches snapshot 1
   />
    
   <span
-    class="text-truncate gl-pl-1"
+    class="text-truncate gl-pl-1-deprecated-no-really-do-not-use-me"
   >
     Firing: 
             alert-label &gt; 42
@@ -35,7 +35,7 @@ exports[`AlertWidget Alert not firing displays a warning icon and matches snapsh
   />
    
   <span
-    class="text-truncate gl-pl-1"
+    class="text-truncate gl-pl-1-deprecated-no-really-do-not-use-me"
   >
     alert-label &gt; 42
   </span>