1 files changed, 40 insertions, 19 deletions

diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 320bd4adaaa..93361c21642 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -392,6 +392,10 @@ img.emoji {
 }
 
 /** COMMON CLASSES **/
+/**
+  🚨 Do not use these classes — they are deprecated and being removed. 🚨
+  See https://gitlab.com/gitlab-org/gitlab/-/issues/217418 for more details.
+**/
 .prepend-top-0 { margin-top: 0; }
 .prepend-top-2 { margin-top: 2px; }
 .prepend-top-4 { margin-top: $gl-padding-4; }
@@ -434,6 +438,7 @@ img.emoji {
 .append-bottom-20 { margin-bottom: 20px; }
 .append-bottom-default { margin-bottom: $gl-padding; }
 .prepend-bottom-32 { margin-bottom: 32px; }
+.ml-10 { margin-left: 4.5rem; }
 .inline { display: inline-block; }
 .center { text-align: center; }
 .block { display: block; }
@@ -490,7 +495,8 @@ img.emoji {
   🚨 Do not use these classes — they are deprecated and being removed. 🚨
   See https://gitlab.com/gitlab-org/gitlab/issues/36857 for more details.
 
-  Instead, if you need a spacing class, add it below using the following values.
+  Instead, if you need a spacing class, please use one from Gitlab UI —
+  https://unpkg.com/browse/@gitlab/ui/src/scss/utilities.scss — which uses the following scale.
     $gl-spacing-scale-0: 0;
     $gl-spacing-scale-1: 2px;
     $gl-spacing-scale-2: 4px;
@@ -505,21 +511,38 @@ img.emoji {
     $gl-spacing-scale-11: 64px;
     $gl-spacing-scale-12: 80px;
     $gl-spacing-scale-13: 96px;
-
-  E.g., a padding top of 96px can be added using:
-  .gl-shim-pt-13 {
-    padding-top: 96px;
-  }
-
-  Please use -shim- so it can be differentiated from the old scale classes.
-  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;
 }
 
 /**
@@ -610,15 +633,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; }