remove display aliases

Author: stephaniehobson

CHANGELOG.md

@@ -13,6 +13,7 @@
 * **fonts:** Any use of `font-mozilla` mixin should be replaced with `font-mozilla-headline`. NOTE: we recommend `font-mozilla-headline` only for text over 24px (below should be `font-mozilla-text`)
 * Headings are now [balanced](https://developer.mozilla.org/docs/Web/CSS/text-wrap-style#balanced_text), which can impact other wrapping rules. Make sure any changes to `h1`–`h6` rendering end up styled as expected, especially if you apply any `white-space`, `word-break` or `hyphens` customizations.
 * Dropped support for font-sizes in pixels, all font-sizes are in rem now.
+* Removed `text-display-*` mixins. See migration notes for version 11.0.2.
 * See notes for [Protocol Assets 5.4.0](https://github.com/mozilla/protocol-assets/blob/main/CHANGELOG.md#540)
 
 # 19.3.0

assets/sass/protocol/components/_sticky-promo.scss

@@ -92,7 +92,7 @@ $logos: (
 }
 
 .mzp-c-sticky-promo-title {
-    @include text-display-xs;
+    @include text-title-xs;
     margin-bottom: $spacing-xl;
 }
 

assets/sass/protocol/includes/forms/_index.scss

@@ -67,7 +67,6 @@ $line-height-shim: 0.15em; // two elements with text appear to have more space b
     @include text-body-sm;
     display: block;
     font-weight: bold;
-    line-height: $text-body-line-height;
     margin: 0;
     padding-bottom: $label-v-spacing;
 

assets/sass/protocol/includes/mixins/_typography.scss

@@ -47,6 +47,12 @@
     }
 }
 
+// * -------------------------------------------------------------------------- */
+// Consistent font sizes. Avoid sizing text arbitrarily and use this
+// set of predefined sizes. Sizes adapt at common breakpoints, and
+// there's some redundancy at smaller sizes because we don't want things
+// getting too tiny.
+
 // Example usage:
 //  .title { @include text-title-xl; }
 //  .subtitle { @include text-title-lg; }
@@ -95,48 +101,26 @@
 // body copy
 @mixin text-body-xl {
     font-size: var(--scale-body-xl);
-    line-height: var(--title-body-line-height);
+    line-height: var(--body-line-height);
 }
 
 @mixin text-body-lg {
     font-size: var(--scale-body-lg);
-    line-height: var(--title-body-line-height);
+    line-height: var(--body-line-height);
 }
 
 @mixin text-body-md {
     font-size: var(--scale-body-md);
-    line-height: var(--title-body-line-height);
+    line-height: var(--body-line-height);
 }
 
 @mixin text-body-sm {
     font-size: var(--scale-body-sm);
-    line-height: var(--title-body-line-height);
+    line-height: var(--body-line-height);
 }
 
 @mixin text-body-xs {
     font-size: var(--scale-body-xs);
-    line-height: var(--title-body-line-height);
+    line-height: var(--body-line-height);
 }
 
-
-
-// Aliases for backwards compatibility
-$text-body-line-height: themes.$body-line-height;
-$text-title-line-height: themes.$title-md-line-height;
-$text-display-line-height: $text-title-line-height;
-
-@mixin text-display-xxl { @include text-title-2xl; }
-
-@mixin text-display-xl { @include text-title-xl; }
-
-@mixin text-display-lg { @include text-title-lg; }
-
-@mixin text-display-md { @include text-title-md; }
-
-@mixin text-display-sm { @include text-title-sm; }
-
-@mixin text-display-xs { @include text-title-xs; }
-
-@mixin text-display-xxs { @include text-title-2xs; }
-
-@mixin text-body-cta { @include text-body-md; }

assets/sass/protocol/includes/themes/_mozilla.scss

@@ -47,21 +47,21 @@
     --title-lg-size: 3rem;
     --title-lg-line-height: 1.1;
     --title-md-size: 2.375rem;
-    --title-md-line-height: 1.05;
+    --title-md-line-height: 1.1;
     --title-sm-size: 1.75rem;
-    --title-sm-line-height: 1.07;
+    --title-sm-line-height: 1.1;
     --title-xs-size: 1.5rem;
-    --title-xs-line-height: 1.08;
+    --title-xs-line-height: 1.1;
     --title-2xs-size: 1.125rem;
-    --title-2xs-line-height: 1.11;
+    --title-2xs-line-height: 1.1;
     --title-3xs-size: 1.125rem;
-    --title-3xs-line-height: 1.11;
+    --title-3xs-line-height: 1.1;
     --body-xl-size: 1.125rem;
     --body-lg-size: 1rem;
     --body-md-size: 0.875rem;
     --body-sm-size: 0.75rem;
     --body-xs-size: 0.75rem;
-    --body-line-height: 1.5;
+    --body-line-height: 1.2;
 
     @media #{tokens.$mq-md} {
         --title-2xl-size: 4.75rem;
@@ -85,7 +85,7 @@
         --body-md-size: 1rem;
         --body-sm-size: 0.875rem;
         --body-xs-size: 0.75rem;
-        --body-line-height: 1.2;
+        // --body-line-height: 1.2; doesn't change, no need to update
     }
 }
 
@@ -136,6 +136,6 @@
         --body-md-size: 0.875rem;
         --body-sm-size: 0.75rem;
         --body-xs-size: 0.688rem;
-        --body-line-height: 1.5;
+        // --body-line-height: 1.5; doesn't change, no need to update
     }
 }