review fixes

Author: stephaniehobson

CHANGELOG.md

@@ -1,3 +1,7 @@
+* 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.
+
+
 # HEAD
 
 * **assets:** Update @mozilla-protocol/assets to 6.1.1
@@ -10,6 +14,7 @@
 
 * Un-customized implementations of the footer will not break. If you have made customizations review it at all breakpoints.
 
+
 # 21.0.0
 
 ## Features
@@ -42,8 +47,6 @@
 
 * **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/includes/mixins/_typography.scss

@@ -4,10 +4,9 @@
 
 @use 'sass:math';
 @use 'sass:meta';
-@use '../tokens';
-@use '../themes-sass' as themes;
-@use '../functions';
-
+@use '../themes-sass' as *;
+@use '../functions' as functions;
+@use '../tokens' as tokens;
 
 // * -------------------------------------------------------------------------- */
 // Font families
@@ -30,15 +29,15 @@
 // * -------------------------------------------------------------------------- */
 // A mixin to output font-size in rems.
 // Declare sizes in pixels for ease and clarity, the mixin does the math.
-// Requires: remify() - defined in includes/themes.scss.
+// Requires: remify() - defined in includes/functions.scss.
 // Usage:
 //  .foo { @include font-size(24px); }
 
 @mixin font-size($size) {
     // When unit is pixels, pass it through and convert to rem
 
     @if math.unit($size) == 'px' {
-        font-size: $size;
+        font-size: functions.remify($size);
     }
 
     // When unit is not pixels, show an error

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

@@ -34,7 +34,7 @@
 }
 
 %firefox-type-scale {
-    // typescale
+    // title
     --title-2xl-size: 3.5rem;
     --title-2xl-line-height: 1.143;
     --title-xl-size: 3rem;
@@ -51,6 +51,8 @@
     --title-2xs-line-height: 1.25;
     --title-3xs-size: 1rem;
     --title-3xs-line-height: 1.25;
+
+    // body
     --body-xl-size: 1.125rem;
     --body-lg-size: 1rem;
     --body-md-size: 0.875rem;
@@ -59,6 +61,7 @@
     --body-line-height: 1.5;
 
     @media #{tokens.$mq-md} {
+        // title
         --title-2xl-size: 4rem;
         --title-2xl-line-height: 1.125;
         --title-xl-size: 3.5rem;
@@ -75,16 +78,18 @@
         --title-2xs-line-height: 1.2;
         --title-3xs-size: 1rem;
         --title-3xs-line-height: 1.25;
+
+        // body
         --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;
     }
 }
 
 %firefox-type-scale-condensed {
+    // title
     --title-2xl-size: 1.5rem;
     --title-2xl-line-height: 1.166;
     --title-xl-size: 1.313rem;
@@ -101,6 +106,8 @@
     --title-2xs-line-height: 1.25;
     --title-3xs-size: 0.875rem;
     --title-3xs-line-height: 1.25;
+
+    // body
     --body-xl-size: 1rem;
     --body-lg-size: 0.875rem;
     --body-md-size: 0.8rem;
@@ -109,6 +116,7 @@
     --body-line-height: 1.5;
 
     @media #{tokens.$mq-md} {
+        // title
         --title-2xl-size: 2rem;
         --title-2xl-line-height: 1.125;
         --title-xl-size: 1.5rem;
@@ -125,11 +133,12 @@
         --title-2xs-line-height: 1.25;
         --title-3xs-size: 0.875rem;
         --title-3xs-line-height: 1.25;
+
+        // body
         --body-xl-size: 1.125rem;
         --body-lg-size: 1rem;
         --body-md-size: 0.875rem;
         --body-sm-size: 0.8rem;
         --body-xs-size: 0.688rem;
-        --body-line-height: 1.5;
     }
 }

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

@@ -39,7 +39,7 @@
 }
 
 %mozilla-type-scale {
-    // type scale
+    // title
     --title-2xl-size: 4.125rem;
     --title-2xl-line-height: 1.1;
     --title-xl-size: 3.5rem;
@@ -56,6 +56,8 @@
     --title-2xs-line-height: 1.1;
     --title-3xs-size: 1.125rem;
     --title-3xs-line-height: 1.1;
+
+    // body
     --body-xl-size: 1.125rem;
     --body-lg-size: 1rem;
     --body-md-size: 0.875rem;
@@ -64,32 +66,27 @@
     --body-line-height: 1.2;
 
     @media #{tokens.$mq-md} {
+        // title
         --title-2xl-size: 4.75rem;
-        --title-2xl-line-height: 1.1;
         --title-xl-size: 4.125rem;
-        --title-xl-line-height: 1.1;
         --title-lg-size: 3.5rem;
-        --title-lg-line-height: 1.1;
         --title-md-size: 3rem;
-        --title-md-line-height: 1.1;
         --title-sm-size: 2.375rem;
-        --title-sm-line-height: 1.1;
         --title-xs-size: 1.75rem;
-        --title-xs-line-height: 1.1;
         --title-2xs-size: 1.5rem;
-        --title-2xs-line-height: 1.1;
         --title-3xs-size: 1.125rem;
-        --title-3xs-line-height: 1.1;
+
+        // body
         --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.2; doesn't change, no need to update
     }
 }
 
 %mozilla-type-scale-condensed {
+    // title
     --title-2xl-size: 1.625rem;
     --title-2xl-line-height: 1;
     --title-xl-size: 1.375rem;
@@ -107,6 +104,7 @@
     --title-3xs-size: 0.875rem;
     --title-3xs-line-height: 1;
 
+    // body
     --body-xl-size: 1rem;
     --body-lg-size: 0.875rem;
     --body-md-size: 0.75rem;
@@ -115,27 +113,21 @@
     --body-line-height: 1.2;
 
     @media #{tokens.$mq-md} {
+        // title
         --title-2xl-size: 2.125rem;
-        --title-2xl-line-height: 1;
         --title-xl-size: 1.625rem;
-        --title-xl-line-height: 1;
         --title-lg-size: 1.375rem;
-        --title-lg-line-height: 1;
         --title-md-size: 1.25rem;
-        --title-md-line-height: 1;
         --title-sm-size: 1.125rem;
-        --title-sm-line-height: 1;
         --title-xs-size: 1rem;
-        --title-xs-line-height: 1;
         --title-2xs-size: 0.875rem;
-        --title-2xs-line-height: 1;
         --title-3xs-size: 0.875rem;
-        --title-3xs-line-height: 1;
+
+        // body
         --body-xl-size: 1.125rem;
         --body-lg-size: 1rem;
         --body-md-size: 0.875rem;
         --body-sm-size: 0.75rem;
         --body-xs-size: 0.688rem;
-        // --body-line-height: 1.5; doesn't change, no need to update
     }
 }