typography v1

Author: stephaniehobson

CHANGELOG.md

@@ -1,3 +1,9 @@
+# HEAD
+
+* 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.
+
+
 # 22.0.0
 
 ## Features
@@ -52,6 +58,7 @@
 
 * Un-customized implementations of the footer will not break. If you have made customizations review it at all breakpoints.
 
+
 # 21.0.0
 
 ## Features

assets/sass/protocol/base/utilities/_titles.scss

@@ -10,73 +10,41 @@
 .mzp-u-title-2xl {
     @include text-title-2xl;
     font-family: $title-font-family;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
 }
 
 .mzp-u-title-xl {
     @include text-title-xl;
     font-family: $title-font-family;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
 }
 
 .mzp-u-title-lg {
     @include text-title-lg;
     font-family: $title-font-family;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
 }
 
 .mzp-u-title-md {
     @include text-title-md;
     font-family: $title-font-family;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
 }
 
 .mzp-u-title-sm {
     @include text-title-sm;
     font-family: $title-font-family;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
 }
 
 .mzp-u-title-xs {
     @include text-title-xs;
     font-family: $title-font-family;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
 }
 
 .mzp-u-title-2xs {
     @include text-title-2xs;
     font-family: $title-font-family;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
 }
 
 .mzp-u-title-3xs {
     @include text-title-3xs;
     font-family: $title-font-family;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
 }
 
 // Utility class for centered text.

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;