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`) diff --git a/docs/01-fundamentals/design-tokens.config.yml b/docs/01-fundamentals/design-tokens.config.yml index 09da2ce64..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)' @@ -48,5 +49,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"