From fe4075781c318cbf8e1a93b58c1a6de69f58ce8e Mon Sep 17 00:00:00 2001 From: Jan Brasna <1784648+janbrasna@users.noreply.github.com> Date: Thu, 3 Apr 2025 13:32:24 +0200 Subject: [PATCH 1/3] Update type tokens --- docs/01-fundamentals/design-tokens.config.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/01-fundamentals/design-tokens.config.yml b/docs/01-fundamentals/design-tokens.config.yml index 09da2ce64..7f9f7b5e4 100644 --- a/docs/01-fundamentals/design-tokens.config.yml +++ b/docs/01-fundamentals/design-tokens.config.yml @@ -48,5 +48,5 @@ context: $font-stack-base: "Inter, X-LocaleSpecific, sans-serif" $font-stack-firefox: "Metropolis, Inter, X-LocaleSpecific, sans-serif" $font-stack-mono: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace" - $font-stack-mozilla-text: "'Mozilla Text', Inter, 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif" - $font-stack-mozilla-headline: "'Mozilla Headline', Inter, 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif" + $font-stack-mozilla-text: "'Mozilla Text', 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif" + $font-stack-mozilla-headline: "'Mozilla Headline', 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif" From 53d05e7998733b5677ff707a4779accf68e4e2bd Mon Sep 17 00:00:00 2001 From: Jan Brasna <1784648+janbrasna@users.noreply.github.com> Date: Thu, 3 Apr 2025 13:34:47 +0200 Subject: [PATCH 2/3] Add $mq-max token --- docs/01-fundamentals/design-tokens.config.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/01-fundamentals/design-tokens.config.yml b/docs/01-fundamentals/design-tokens.config.yml index 7f9f7b5e4..fbd496538 100644 --- a/docs/01-fundamentals/design-tokens.config.yml +++ b/docs/01-fundamentals/design-tokens.config.yml @@ -41,6 +41,7 @@ context: $mq-md: '(min-width: $screen-md)' $mq-lg: '(min-width: $screen-lg)' $mq-xl: '(min-width: $screen-xl)' + $mq-max: '(min-width: $content-max)' $mq-short: '(max-height: 599px)' $mq-tall: '(min-height: 600px)' $mq-high-res: 'only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi)' From d4f8bd1363ac54ea7b3c6079b32d371d2013616d Mon Sep 17 00:00:00 2001 From: Jan Brasna <1784648+janbrasna@users.noreply.github.com> Date: Tue, 20 Jan 2026 04:30:26 +0100 Subject: [PATCH 3/3] Document $mq-max addition in changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 59de88925..e7ac51129 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,11 +3,13 @@ ## Features * **fonts:** (breaking) Adds rebrand fonts, Mozilla Headline and Mozilla Text. Removes outdated Mozilla Brand font, Zilla Slab. New fonts will only support `woff2` format to simplify maintenance. * **fonts:** Upgrade Inter font to version 4.1, drop WOFF 1.0 format (#1026) +* **css:** Add support for `$mq-max` to match viewports wider than maximum content width (#1039) * **css:** Add `text-wrap: balance` to all headings (#910) * **css:** Apply hover cursor from Details component to Details element (#948) ## Bug Fixes * **assets:** Update @mozilla-protocol/assets to 5.4.0 +* **tokens:** Update @mozilla-protocol/tokens to 6.0.0 ## Migration Tips * **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`)