review fixes

Author: Stephanie Hobson

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
     }
 }