remove display aliases

Author: stephaniehobson

CHANGELOG.md

@@ -11,6 +11,7 @@
 ## Migration Tips
 
 * 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

@@ -43,6 +43,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; }
@@ -91,48 +97,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

@@ -37,27 +37,27 @@
 %mozilla-type-scale {
     // type scale
     --title-2xl-size: 4.125rem;
-    --title-2xl-line-height: 1;
+    --title-2xl-line-height: 1.1;
     --title-xl-size: 3.5rem;
-    --title-xl-line-height: 1;
+    --title-xl-line-height: 1.1;
     --title-lg-size: 3rem;
-    --title-lg-line-height: 1;
+    --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;
@@ -69,19 +69,19 @@
         --title-md-size: 3rem;
         --title-md-line-height: 1;
         --title-sm-size: 2.375rem;
-        --title-sm-line-height: 1.05;
+        --title-sm-line-height: 1;
         --title-xs-size: 1.75rem;
-        --title-xs-line-height: 1.07;
+        --title-xs-line-height: 1;
         --title-2xs-size: 1.5rem;
-        --title-2xs-line-height: 1.08;
+        --title-2xs-line-height: 1;
         --title-3xs-size: 1.125rem;
-        --title-3xs-line-height: 1.11;
+        --title-3xs-line-height: 1;
         --body-xl-size: 1.313rem;
         --body-lg-size: 1.125rem;
         --body-md-size: 1rem;
         --body-sm-size: 0.875rem;
         --body-xs-size: 0.75rem;
-        --body-line-height: 1.5;
+        // --body-line-height: 1.2; doesn't change, no need to update
     }
 }
 
@@ -132,6 +132,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
     }
 }