Refactor typography system to use CSS custom properties

- Switch from pixel-based font sizes to rem units only, removing px fallbacks
- Remove deprecated `text-display-*` mixins (see migration notes for v11.0.2)
- Refactor typography mixins to use CSS custom properties instead of Sass variables
  - `text-title-*` and `text-body-*` mixins now use `--theme-*` variables
- Rename CSS variables to use `--token-` prefix for consistency:
  - `--body-text-color` → `--token-body-text-color`
  - `--title-text-color` → `--token-title-text-color`
  - `--body-font-family` → `--token-body-font-family`
  - `--title-font-family` → `--token-title-font-family`
- Remove redundant `@supports (--css: variables)` blocks for font properties
- Clean up font-family declarations now handled by typography mixins
- Update Firefox and Mozilla theme files with new variable naming
- Update CHANGELOG with breaking changes
- remove unused type-scale() mixin and associated lookup tables
- change tokens to use scale for naming instead of tshirt sizes

BREAKING CHANGE: Font sizes no longer include px fallbacks. All typography
now requires CSS custom property support (browsers without support are
effectively unsupported as of this change).

visual regression fixes for forms,footer, sidebar

lang switcher

Author: stephaniehobson

CHANGELOG.md

@@ -1,3 +1,58 @@
+# HEAD
+
+This version introduces some major modernization changes around CSS and drops browser support for XXXX.
+
+The good news is we don't expect any visible changes in modern browsers and you should be able to do some automated visual regression testing to help with the migration.
+
+Introducing theme variables! CSS variables beginning with `--theme-` will adjust based on media queries.
+
+## Modernization
+
+### Typography
+
+* Transition from Sass variables to CSS variables for typography. (#982)
+* Renamed existing CSS variables to use `--token-` prefix.
+* Introduced CSS variables with the `--theme-` prefix for values that adjust based on media queries.
+
+### Color
+
+* To come in follow up PR.
+
+## Migration Tips
+
+* Browser support
+  * If you require support for older browsers we recommend adding some post-processing to your work flow for css variables and font sizes in pixels.
+* `text-title-*` mixins now declare `font-family`.
+  * You can remove any `font-family` declarations from places which use these mixins (unless you don't want the default heading font).
+* Update Sass variables to use CSS variables:
+  * `$body-text-color` → `var(--theme-body-text-color)`
+  * `$body-text-color-inverse` → `var(--theme-body-text-color-inverse)`
+  * `$body-text-color-secondary` → `var(--theme-body-text-color-secondary)`
+  * `$body-text-color-secondary-inverse` → `var(--theme-body-text-color-secondary-inverse)`
+  * `$title-text-color` → `var(--token-title-text-color)`
+  * `$title-text-color-inverse` → `var(--token-title-text-color-inverse)`
+  * `$body-font-family` → `var(--theme-body-font-family)`
+  * `$title-font-family` → `var(--theme-title-font-family)`
+  * `$body-line-height` → `var(--theme-body-line-height)`
+* Rename CSS variables:
+  * `--body-text-color` → `--token-body-text-color`
+  * `--body-text-color-inverse` → `--token-body-text-color-inverse`
+  * `--body-text-color-secondary` → `--token-body-text-color-secondary`
+  * `--body-text-color-secondary-inverse` → `--token-body-text-color-secondary-inverse`
+  * `--title-text-color` → `--token-title-text-color`
+  * `--title-text-color-inverse` → `--token-title-text-color-inverse`
+  * `--body-font-family` → `--theme-body-font-family`
+  * `--title-font-family` → `--theme-title-font-family`
+  * `--body-line-height` → `--theme-body-line-height`
+* Replace any remaining `text-display-*` usage with the equivalent `text-title-*` mixin (see migration notes for version 11.0.2.):
+  * `text-display-xxl` → `text-title-2xl`
+  * `text-display-xl` → `text-title-xl`
+  * `text-display-lg` → `text-title-lg`
+  * `text-display-md` → `text-title-md`
+  * `text-display-sm` → `text-title-sm`
+  * `text-display-xs` → `text-title-xs`
+  * `text-display-xxs` → `text-title-2xs`
+
 # 22.0.0
 
 ## Features
@@ -199,8 +254,8 @@ stating variables explicitly, like this:
 
   @supports (--css: variables) {
     background-color: var(--background-color-inverse);
-    color: var(--body-text-color-inverse);
-    line-height: var(--body-line-height);
+    color: var(--token-body-text-color-inverse);
+    line-height: var(--token-body-line-height);
   }
 }
 ```

assets/sass/protocol/base/elements/_document.scss

@@ -10,19 +10,15 @@ html {
 }
 
 body {
-    @include text-body-md;
     background: $background-color;
     color: $body-text-color;
-    font-family: $body-font-family;
-    line-height: $body-line-height;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
+    @include text-body-md;
 
     @supports (--css: variable) {
         background: var(--background-color);
-        color: var(--body-text-color);
-        font-family: var(--body-font-family);
-        line-height: var(--body-line-height);
+        color: var(--token-body-text-color);
     }
 }
 

assets/sass/protocol/base/elements/_forms.scss

@@ -28,16 +28,12 @@ legend {
     max-width: 100%; // 1
     padding: 0; // 3
     white-space: normal; // 1
-    .mzp-u-inline & {
-        @include forms.field-label;
-    }
-    @include text-body-lg;
-    font-family: $body-font-family;
-    font-weight: bold;
     margin-bottom: forms.$field-v-spacing;
+    font-weight: bold;
+    @include text-body-lg;
 
-    @supports (--css: variables) {
-        font-family: var(--body-font-family);
+    .mzp-u-inline & {
+        @include forms.field-label;
     }
 }
 
@@ -46,9 +42,9 @@ input,
 select,
 optgroup,
 textarea {
-    @include font-base;
     @include text-body-md;
-    line-height: 1.25;
+    @include font-base;
+    line-height: var(--theme-button-line-height);
 }
 
 button,
@@ -249,7 +245,7 @@ input[type='file'] {
     background: $color-white;
     border-radius: forms.$field-border-radius;
     border: forms.$field-border;
-    line-height: 1.25;
+    line-height: var(--theme-button-line-height);
     margin: 0 0 forms.$field-v-spacing;
 
     &:hover {

assets/sass/protocol/base/elements/_links.scss

@@ -48,13 +48,9 @@ a {
 }
 
 .mzp-c-cta-link {
-    font-family: $button-font-family;
+    font-family: var(--theme-button-font-family);
     font-weight: bold;
 
-    @supports (--css: variables) {
-        font-family: var(--button-font-family);
-    }
-
     &.mzp-t-xs {
         @include text-body-sm;
     }
@@ -69,29 +65,14 @@ a {
 
     &.mzp-t-lg {
         @include text-title-xs;
-        font-family: $title-font-family;
-
-        @supports (--css: variables) {
-            font-family: var(--title-font-family);
-        }
     }
 
     &.mzp-t-xl {
         @include text-title-sm;
-        font-family: $title-font-family;
-
-        @supports (--css: variables) {
-            font-family: var(--title-font-family);
-        }
     }
 
     &.mzp-t-2xl {
         @include text-title-lg;
-        font-family: $title-font-family;
-
-        @supports (--css: variables) {
-            font-family: var(--title-font-family);
-        }
     }
 
     // Icon support

assets/sass/protocol/base/elements/_quotes.scss

@@ -10,7 +10,6 @@ blockquote {
     border-color: $color-marketing-gray-20;
     border-style: solid;
     color: $title-text-color;
-    font-family: $title-font-family;
     font-weight: bold;
     margin: $spacing-lg auto;
     padding: $spacing-sm $spacing-lg;
@@ -29,11 +28,10 @@ blockquote {
     }
 
     @supports (--css: variables) {
-        color: var(--title-text-color);
-        font-family: var(--title-font-family);
+        color: var(--token-title-text-color);
 
         cite {
-            color: var(--body-text-color-secondary);
+            color: var(--token-body-text-color-secondary);
         }
     }
 }

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

@@ -12,10 +12,10 @@ h3,
 h4,
 h5,
 h6 {
-    $default-font-weight: bold;
-    font-family: $title-font-family;
     color: $title-text-color;
-    font-weight: $default-font-weight;
+    font-family: var(--theme-title-font-family);
+    font-variant-ligatures: var(--theme-title-font-ligatures);
+    letter-spacing: var(--theme-title-letter-spacing);
     text-wrap: balance;
     margin: 0 0 0.5em;
 
@@ -24,14 +24,10 @@ h6 {
     }
 
     @supports (--css: variables) {
-        font-family: var(--title-font-family);
-        font-variant-ligatures: var(--title-font-ligatures);
-        font-weight: var(--title-font-weight, #{$default-font-weight});
-        letter-spacing: var(--title-letter-spacing);
-        color: var(--title-text-color);
+        color: var(--token-title-text-color);
 
         .mzp-t-dark & {
-            color: var(--title-text-color-inverse);
+            color: var(--token-title-text-color-inverse);
         }
     }
 }

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

@@ -28,7 +28,7 @@
 
     @supports (--css: variables) {
         background-color: var(--background-color-inverse);
-        color: var(--body-text-color-inverse);
+        color: var(--token-body-text-color-inverse);
     }
 }
 

assets/sass/protocol/base/utilities/_rich-text.scss

@@ -3,7 +3,7 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 @use '../../includes/lib' as *;
-@import '../../base/elements/tables';
+@use '../../base/elements/tables' as *;
 
 .mzp-u-rich-text {
     h2 {
@@ -17,10 +17,9 @@
     }
 
     h4 {
-        @include text-body-lg;
-        font-family: var(--body-font-family);
         margin-bottom: $layout-xs;
         margin-top: $layout-xs;
+        @include text-body-lg;
     }
 
     @media #{$mq-md} {

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

@@ -9,74 +9,34 @@
 
 .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/_button.scss

@@ -16,9 +16,9 @@
     border: 2px solid transparent;
     cursor: pointer;
     display: inline-block;
-    font-family: $button-font-family;
+    font-family: var(--theme-button-font-family);
     font-weight: bold;
-    line-height: $body-line-height;
+    line-height: var(--theme-button-line-height);
     padding: $spacing-sm $spacing-md;
     text-align: center;
     text-decoration: none !important;  /* stylelint-disable-line declaration-no-important */
@@ -41,11 +41,6 @@
         opacity: 0.6;
         pointer-events: none;
     }
-
-    @supports (--css: variables) {
-        font-family: var(--button-font-family);
-        line-height: var(--body-line-height);
-    }
 }
 
 // Sizes
@@ -208,9 +203,9 @@
 }
 
 .mzp-c-button-download-privacy-link {
-    @include text-body-xs;
     display: block;
     margin-top: forms.$info-v-spacing;
+    @include text-body-xs;
 
     a {
         color: inherit;