Uh oh!
There was an error while loading. Please reload this page.
Refactor typography system to use CSS custom properties - #1107
Merged
Conversation
There was a problem hiding this comment.
Pull request overview
This PR refactors the typography system to use CSS custom properties instead of Sass variables, improving maintainability and enabling responsive typography through theme-based CSS variables. The changes include renaming variables with a --token- prefix for consistency, removing deprecated mixins, and eliminating pixel-based font size fallbacks.
- Introduces
--theme-*CSS variables that adjust based on media queries for responsive typography - Refactors typography mixins to use CSS custom properties and removes pixel fallbacks
- Updates all component styles to use the new variable naming convention
Reviewed changes
Copilot reviewed 28 out of 28 changed files in this pull request and generated 15 comments.
Show a summary per file
| File | Description |
|---|---|
| assets/sass/protocol/includes/mixins/_typography.scss | Core typography mixin refactoring to use CSS variables and remove deprecated mixins |
| assets/sass/protocol/includes/themes/_mozilla.scss | Mozilla theme updates with --token- prefix for all typography variables |
| assets/sass/protocol/includes/themes/_firefox.scss | Firefox theme updates with --token- prefix for all typography variables |
| assets/sass/protocol/includes/themes/_index.scss | Introduces --theme-* variables that map to token variables for responsive behavior |
| assets/sass/protocol/includes/_themes-sass.scss | Removes Sass variable definitions for fonts and type scale, now handled by CSS variables |
| Multiple component files | Updates to use new --token-* variable naming throughout the codebase |
| CHANGELOG.md | Documents breaking changes and migration guide |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Open
stephaniehobsonforce-pushed
the
font-vars
branch
from
January 9, 2026 16:57
08bea80 to
5f6d322Comparestephaniehobson
commented
Jan 9, 2026
ContributorAuthor
No visual regressions found running #1106 locally. |
Uh oh!
There was an error while loading. Please reload this page.
| // This file contains all the theme variables for both the Firefox and Mozilla | ||
| // Mixins and functions can draw from these variable maps, swapping to | ||
| // a different map based on the value of the global $brand-theme variable. | ||
| // Default theme variables for legacy browsers (IE 11 etc) |
ContributorAuthor
There was a problem hiding this comment.
Note for reviewer: I'm working on removing these. Colour and grid changes will follow.
Uh oh!
There was an error while loading. Please reload this page.
stephaniehobsonforce-pushed
the
font-vars
branch
3 times, most recently
from
January 9, 2026 17:54
1599e07 to
0ec134fCompare| line-height: $text-body-line-height; | ||
| margin: 0; | ||
| padding-bottom: $label-v-spacing; | ||
| @include text-body-sm; |
ContributorAuthor
There was a problem hiding this comment.
Note for reviewer: Line-height is included in mixin now.
stephaniehobsonforce-pushed
the
font-vars
branch
10 times, most recently
from
January 9, 2026 20:04
ed88390 to
19ab519Comparestephaniehobson
marked this pull request as ready for review
January 9, 2026 20:06
Refactor typography system to use CSS custom properties. This is the first PR in a refactor of how we use CSS variables (#982) and renaming title to heading (#668). Some kind of basic fallback support for older browsers will be added back in a latter PR once we can get a clear picture of how broken things are. I know this looks big but for the most part it's just a straight find/replace on variable names or moving @includes to the end of declarations. Modernization: Default to CSS vars for font family, size, and line-height Removed @supports declarations if they only had font declarations @include text-body-* and @include text-heading-* mixins use CSS vars now Edited @mixin font-size() to stop outputting a pixel fallback Reorganization: Renamed -title- to -heading- in mixins and CSS vars and mzp-u-heading-* utility classes component HTML/CSS classes will follow in a separate PR Added font-family declaration to @include text-body-* mixins Added --theme- prefix to variables expected to morph Added --token- prefix to unchanging variables Re-name font-size tokens to use a scale instead of tshirt sizes for names Added --theme-button-line-height var Bug fixes: Moved @include text-* to end of declarations
stephaniehobsonforce-pushed
the
font-vars
branch
from
January 10, 2026 05:00
19ab519 to
b3d5a33CompareUh oh!
There was an error while loading. Please reload this page.
stephaniehobson added a commit
that referenced
this pull request
Jan 15, 2026
Refactor color system to use CSS custom properties. This is the second PR in a refactor of how we use CSS variables (#982), following the typography refactor (#1107). Some kind of basic fallback support for older browsers will be added back in a later PR once we can get a clear picture of how broken things are. I know this looks big but for the most part it's just a straight find/replace on variable names or moving @includes to the end of declarations. Modernization: Default to CSS vars for colors, backgrounds, and borders Removed @supports declarations if they only had color declarations Color mixins now use CSS vars Reorganization: Added --theme- prefix to variables expected to morph Added --token- prefix to unchanging variables Created root/_color.scss for color token definitions Created root/_theme.scss for theme color mappings Created root/_spacing.scss for spacing tokens Moved theme definitions to includes/themes/ Bug fixes: Moved @include statements to end of declarations
2 tasks
stephaniehobson added a commit
that referenced
this pull request
Jan 15, 2026
Refactor color system to use CSS custom properties. This is the second PR in a refactor of how we use CSS variables (#982), following the typography refactor (#1107). Some kind of basic fallback support for older browsers will be added back in a later PR once we can get a clear picture of how broken things are. I know this looks big but for the most part it's just a straight find/replace on variable names or moving @includes to the end of declarations. Modernization: Default to CSS vars for colors, backgrounds, and borders Removed @supports declarations if they only had color declarations Color mixins now use CSS vars Reorganization: Added --theme- prefix to variables expected to morph Added --token- prefix to unchanging variables Created root/_color.scss for color token definitions Created root/_theme.scss for theme color mappings Created root/_spacing.scss for spacing tokens Moved theme definitions to includes/themes/ Bug fixes: Moved @include statements to end of declarations
stephaniehobson added a commit
that referenced
this pull request
Jan 15, 2026
Refactor color system to use CSS custom properties. This is the second PR in a refactor of how we use CSS variables (#982), following the typography refactor (#1107). Some kind of basic fallback support for older browsers will be added back in a later PR once we can get a clear picture of how broken things are. I know this looks big but for the most part it's just a straight find/replace on variable names or moving @includes to the end of declarations. Modernization: Default to CSS vars for colors, backgrounds, and borders Removed @supports declarations if they only had color declarations Color mixins now use CSS vars Reorganization: Added --theme- prefix to variables expected to morph Added --token- prefix to unchanging variables Created root/_color.scss for color token definitions Created root/_theme.scss for theme color mappings Created root/_spacing.scss for spacing tokens Moved theme definitions to includes/themes/ Bug fixes: Moved @include statements to end of declarations
stephaniehobson added a commit
that referenced
this pull request
Jan 15, 2026
Refactor color system to use CSS custom properties. This is the second PR in a refactor of how we use CSS variables (#982), following the typography refactor (#1107). Some kind of basic fallback support for older browsers will be added back in a later PR once we can get a clear picture of how broken things are. I know this looks big but for the most part it's just a straight find/replace on variable names or moving @includes to the end of declarations. Modernization: Default to CSS vars for colors, backgrounds, and borders Removed @supports declarations if they only had color declarations Color mixins now use CSS vars Reorganization: Added --theme- prefix to variables expected to morph Added --token- prefix to unchanging variables Created root/_color.scss for color token definitions Created root/_theme.scss for theme color mappings Created root/_spacing.scss for spacing tokens Moved theme definitions to includes/themes/ Bug fixes: Moved @include statements to end of declarations
stephaniehobson added a commit
that referenced
this pull request
Jan 15, 2026
Refactor color system to use CSS custom properties. This is the second PR in a refactor of how we use CSS variables (#982), following the typography refactor (#1107). Some kind of basic fallback support for older browsers will be added back in a later PR once we can get a clear picture of how broken things are. I know this looks big but for the most part it's just a straight find/replace on variable names or moving @includes to the end of declarations. Modernization: Default to CSS vars for colors, backgrounds, and borders Removed @supports declarations if they only had color declarations Color mixins now use CSS vars Reorganization: Added --theme- prefix to variables expected to morph Added --token- prefix to unchanging variables Created root/_color.scss for color token definitions Created root/_theme.scss for theme color mappings Created root/_spacing.scss for spacing tokens Moved theme definitions to includes/themes/ Bug fixes: Moved @include statements to end of declarations
stephaniehobson added a commit
that referenced
this pull request
Jan 15, 2026
Refactor color system to use CSS custom properties. This is the second PR in a refactor of how we use CSS variables (#982), following the typography refactor (#1107). Some kind of basic fallback support for older browsers will be added back in a later PR once we can get a clear picture of how broken things are. I know this looks big but for the most part it's just a straight find/replace on variable names or moving @includes to the end of declarations. Modernization: Default to CSS vars for colors, backgrounds, and borders Removed @supports declarations if they only had color declarations Color mixins now use CSS vars Reorganization: Added --theme- prefix to variables expected to morph Added --token- prefix to unchanging variables Created root/_color.scss for color token definitions Created root/_theme.scss for theme color mappings Created root/_spacing.scss for spacing tokens Moved theme definitions to includes/themes/ Bug fixes: Moved @include statements to end of declarations
stephaniehobson added a commit
that referenced
this pull request
Jan 15, 2026
Refactor color system to use CSS custom properties. This is the second PR in a refactor of how we use CSS variables (#982), following the typography refactor (#1107). Some kind of basic fallback support for older browsers will be added back in a later PR once we can get a clear picture of how broken things are. I know this looks big but for the most part it's just a straight find/replace on variable names or moving @includes to the end of declarations. Modernization: Default to CSS vars for colors, backgrounds, and borders Removed @supports declarations if they only had color declarations Color mixins now use CSS vars Reorganization: Added --theme- prefix to variables expected to morph Added --token- prefix to unchanging variables Created root/_color.scss for color token definitions Created root/_theme.scss for theme color mappings Created root/_spacing.scss for spacing tokens Moved theme definitions to includes/themes/ Bug fixes: Moved @include statements to end of declarations
stephaniehobson added a commit
that referenced
this pull request
Jan 15, 2026
Refactor color system to use CSS custom properties. This is the second PR in a refactor of how we use CSS variables (#982), following the typography refactor (#1107). Some kind of basic fallback support for older browsers will be added back in a later PR once we can get a clear picture of how broken things are. I know this looks big but for the most part it's just a straight find/replace on variable names or moving @includes to the end of declarations. Modernization: Default to CSS vars for colors, backgrounds, and borders Removed @supports declarations if they only had color declarations Color mixins now use CSS vars Reorganization: Added --theme- prefix to variables expected to morph Added --token- prefix to unchanging variables Created root/_color.scss for color token definitions Created root/_theme.scss for theme color mappings Created root/_spacing.scss for spacing tokens Moved theme definitions to includes/themes/ Bug fixes: Moved @include statements to end of declarations
stephaniehobson added a commit
that referenced
this pull request
Jan 16, 2026
Refactor color system to use CSS custom properties. This is the second PR in a refactor of how we use CSS variables (#982), following the typography refactor (#1107). Some kind of basic fallback support for older browsers will be added back in a later PR once we can get a clear picture of how broken things are. I know this looks big but for the most part it's just a straight find/replace on variable names or moving @includes to the end of declarations. Modernization: Default to CSS vars for colors, backgrounds, and borders Removed @supports declarations if they only had color declarations Color mixins now use CSS vars Reorganization: Added --theme- prefix to variables expected to morph Added --token- prefix to unchanging variables Created root/_color.scss for color token definitions Created root/_theme.scss for theme color mappings Created root/_spacing.scss for spacing tokens Moved theme definitions to includes/themes/ Bug fixes: Moved @include statements to end of declarations
stephaniehobson added a commit
that referenced
this pull request
Jan 20, 2026
Refactor color system to use CSS custom properties. This is the second PR in a refactor of how we use CSS variables (#982), following the typography refactor (#1107). Some kind of basic fallback support for older browsers will be added back in a later PR once we can get a clear picture of how broken things are. I know this looks big but for the most part it's just a straight find/replace on variable names or moving @includes to the end of declarations. Modernization: Default to CSS vars for colors, backgrounds, and borders Removed @supports declarations if they only had color declarations Color mixins now use CSS vars Reorganization: Added --theme- prefix to variables expected to morph Added --token- prefix to unchanging variables Created root/_color.scss for color token definitions Created root/_theme.scss for theme color mappings Created root/_spacing.scss for spacing tokens Moved theme definitions to includes/themes/ Bug fixes: Moved @include statements to end of declarations
stephaniehobson added a commit
that referenced
this pull request
Jan 20, 2026
Refactor color system to use CSS custom properties. This is the second PR in a refactor of how we use CSS variables (#982), following the typography refactor (#1107). Some kind of basic fallback support for older browsers will be added back in a later PR once we can get a clear picture of how broken things are. I know this looks big but for the most part it's just a straight find/replace on variable names or moving @includes to the end of declarations. Modernization: Default to CSS vars for colors, backgrounds, and borders Removed @supports declarations if they only had color declarations Color mixins now use CSS vars Reorganization: Added --theme- prefix to variables expected to morph Added --token- prefix to unchanging variables Created root/_color.scss for color token definitions Created root/_theme.scss for theme color mappings Created root/_spacing.scss for spacing tokens Moved theme definitions to includes/themes/ Bug fixes: Moved @include statements to end of declarations
stephaniehobson added a commit
that referenced
this pull request
Jan 21, 2026
Refactor spacing system to use CSS custom properties. This is the third PR in a refactor of how we use CSS variables (#982), following the typography (#1107) and color refactors. Introduces --theme-spacing-between-block and --theme-spacing-between-inline for responsive layout spacing while retaining Sass $spacing-* variables for component-internal spacing. Modernization: Default to CSS vars for layout spacing (block and inline) Responsive breakpoints defined in root/_spacing.scss Updated components to use new spacing vars: containers, card, callout, split, breadcrumb, navigation, newsletter-form, section-heading, card-layout, multi-column Reorganization: Removed includes/_themes-sass.scss (no longer needed) Removed bidi-grid-spacing() mixin Removed deprecated grid-gap from stylelint ignored shorthands Simplification: Simplified split component (removed pop and overflow options in separate PR) Simplified card-layout and multi-column templates Reduced newsletter-form complexity Documentation: Added section-heading mzp-t-section-heading-nospace theme class Added spacing migration guide to docs/02-usage/migration.md Updated CHANGELOG with spacing system changes Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
stephaniehobson added a commit
that referenced
this pull request
Jan 21, 2026
Refactor spacing system to use CSS custom properties. This is the third PR in a refactor of how we use CSS variables (#982), following the typography (#1107) and color refactors. Introduces --theme-spacing-between-block and --theme-spacing-between-inline for responsive layout spacing while retaining Sass $spacing-* variables for component-internal spacing. Modernization: Default to CSS vars for layout spacing (block and inline) Responsive breakpoints defined in root/_spacing.scss Updated components to use new spacing vars: containers, card, callout, split, breadcrumb, navigation, newsletter-form, section-heading, card-layout, multi-column Reorganization: Removed includes/_themes-sass.scss (no longer needed) Removed bidi-grid-spacing() mixin Removed deprecated grid-gap from stylelint ignored shorthands Simplification: Simplified split component (removed pop and overflow options in separate PR) Simplified card-layout and multi-column templates Reduced newsletter-form complexity Documentation: Added section-heading mzp-t-section-heading-nospace theme class Added spacing migration guide to docs/02-usage/migration.md Updated CHANGELOG with spacing system changes Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2 tasks
stephaniehobson added a commit
that referenced
this pull request
Jan 21, 2026
Refactor spacing system to use CSS custom properties. This is the third PR in a refactor of how we use CSS variables (#982), following the typography (#1107) and color refactors. Introduces --theme-spacing-between-block and --theme-spacing-between-inline for responsive layout spacing while retaining Sass $spacing-* variables for component-internal spacing. Modernization: Default to CSS vars for layout spacing (block and inline) Responsive breakpoints defined in root/_spacing.scss Updated components to use new spacing vars: containers, card, callout, split, breadcrumb, navigation, newsletter-form, section-heading, card-layout, multi-column Reorganization: Removed includes/_themes-sass.scss (no longer needed) Removed bidi-grid-spacing() mixin Removed deprecated grid-gap from stylelint ignored shorthands Simplification: Simplified split component (removed pop and overflow options in separate PR) Simplified card-layout and multi-column templates Reduced newsletter-form complexity Documentation: Added section-heading mzp-t-section-heading-nospace theme class Added spacing migration guide to docs/02-usage/migration.md Updated CHANGELOG with spacing system changes Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
stephaniehobson added a commit
that referenced
this pull request
Jan 23, 2026
* Refactor spacing to use CSS custom properties (#982) Refactor spacing system to use CSS custom properties. This is the third PR in a refactor of how we use CSS variables (#982), following the typography (#1107) and color refactors. Introduces --theme-spacing-between-block and --theme-spacing-between-inline for responsive layout spacing while retaining Sass $spacing-* variables for component-internal spacing. Modernization: Default to CSS vars for layout spacing (block and inline) Responsive breakpoints defined in root/_spacing.scss Updated components to use new spacing vars: containers, card, callout, split, breadcrumb, navigation, newsletter-form, section-heading, card-layout, multi-column Reorganization: Removed includes/_themes-sass.scss (no longer needed) Removed bidi-grid-spacing() mixin Removed deprecated grid-gap from stylelint ignored shorthands Simplification: Simplified split component (removed pop and overflow options in separate PR) Simplified card-layout and multi-column templates Reduced newsletter-form complexity Documentation: Added section-heading mzp-t-section-heading-nospace theme class Added spacing migration guide to docs/02-usage/migration.md Updated CHANGELOG with spacing system changes Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * review fixes --------- Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Refactor typography system to use CSS custom properties. This is the first PR in a refactor of how we use CSS variables (#982) and renaming
titletoheading(#668). Some kind of basic fallback support for older browsers will be added back in a latter PR once we can get a clear picture of how broken things are.I know this looks big but for the most part it's just a straight find/replace on variable names or moving
@includesto the end of declarations.@supportsdeclarations if they only had font declarations@include text-body-*and@include text-heading-*mixins use CSS vars now@mixin font-size()to stop outputting a pixel fallback-title-to-heading-in mixins and CSS varsmzp-u-heading-*utility classes@include text-body-*mixins--theme-prefix to variables expected to morph--token-prefix to unchanging variables--theme-button-line-heightvar@include text-*to end of declarationsIssue
#982
Testing
CHANGELOG.md.