From 94f9da4078fd3b32405862a528332da4025d01d1 Mon Sep 17 00:00:00 2001 From: Kasey Kelly Date: Fri, 25 Jul 2025 10:23:21 -0400 Subject: [PATCH 1/3] removing @supports for css variables and SASS fallbacks --- .../protocol/base/elements/_containers.scss | 18 +- .../protocol/base/elements/_document.scss | 15 +- .../sass/protocol/base/elements/_forms.scss | 6 +- .../sass/protocol/base/elements/_links.scss | 35 +-- .../sass/protocol/base/elements/_quotes.scss | 15 +- .../sass/protocol/base/elements/_titles.scss | 22 +- .../protocol/base/utilities/_backgrounds.scss | 33 +-- .../sass/protocol/base/utilities/_titles.scss | 48 +--- .../sass/protocol/components/_breadcrumb.scss | 18 +- assets/sass/protocol/components/_button.scss | 9 +- assets/sass/protocol/components/_card.scss | 29 +-- .../protocol/components/_emphasis-box.scss | 15 +- .../protocol/components/_feature-card.scss | 12 +- .../sass/protocol/components/_menu-list.scss | 6 +- .../protocol/components/_newsletter-form.scss | 20 +- .../protocol/components/_section-heading.scss | 18 +- assets/sass/protocol/components/_split.scss | 210 +++--------------- .../protocol/components/_sticky-promo.scss | 9 +- .../sass/protocol/components/forms/_form.scss | 28 +-- .../sass/protocol/includes/_themes-sass.scss | 40 ---- .../sass/protocol/includes/forms/_index.scss | 8 +- .../protocol/includes/mixins/_typography.scss | 174 +++------------ .../sass/protocol/includes/mixins/_utils.scss | 30 +-- .../protocol/templates/_multi-column.scss | 35 +-- theme/assets/sass/base/_typography.scss | 6 +- theme/assets/sass/components/_document.scss | 9 +- theme/assets/sass/components/_header.scss | 6 +- theme/assets/sass/components/_pen.scss | 31 +-- theme/assets/sass/components/_prose.scss | 37 +-- .../sass/components/_type-specimen.scss | 48 +--- 30 files changed, 176 insertions(+), 814 deletions(-) diff --git a/assets/sass/protocol/base/elements/_containers.scss b/assets/sass/protocol/base/elements/_containers.scss index 28dcc4e0e..7139258fc 100644 --- a/assets/sass/protocol/base/elements/_containers.scss +++ b/assets/sass/protocol/base/elements/_containers.scss @@ -10,27 +10,15 @@ margin: 0 auto; max-width: $content-max; min-width: $content-xs - ($layout-xs * 2); - padding: $v-grid-xs $h-grid-xs; + padding: var(--v-grid-xs) var(--h-grid-xs); position: relative; @media #{$mq-md} { - padding: $v-grid-md $h-grid-md; + padding: var(--v-grid-md) var(--h-grid-md); } @media #{$mq-xl} { - padding: $v-grid-xl $h-grid-xl; - } - - @supports (--css: variable) { - padding: var(--v-grid-xs) var(--h-grid-xs); - - @media #{$mq-md} { - padding: var(--v-grid-md) var(--h-grid-md); - } - - @media #{$mq-xl} { - padding: var(--v-grid-xl) var(--h-grid-xl); - } + padding: var(--v-grid-xl) var(--h-grid-xl); } &.mzp-t-content-sm { diff --git a/assets/sass/protocol/base/elements/_document.scss b/assets/sass/protocol/base/elements/_document.scss index a17bebdca..15554ca2e 100644 --- a/assets/sass/protocol/base/elements/_document.scss +++ b/assets/sass/protocol/base/elements/_document.scss @@ -11,19 +11,12 @@ html { body { @include text-body-md; - background: $background-color; - color: $body-text-color; - font-family: $body-font-family; - line-height: $body-line-height; + background: var(--background-color); + color: var(--body-text-color); + font-family: var(--body-font-family); + line-height: var(--body-line-height); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - - @supports (--css: variable) { - background: var(--background-color); - color: var(--body-text-color); - font-family: var(--body-font-family); - line-height: var(--body-line-height); - } } // A few places use a class to hide elements. We should try to avoid that. diff --git a/assets/sass/protocol/base/elements/_forms.scss b/assets/sass/protocol/base/elements/_forms.scss index 6e916f666..99b164d0b 100644 --- a/assets/sass/protocol/base/elements/_forms.scss +++ b/assets/sass/protocol/base/elements/_forms.scss @@ -32,13 +32,9 @@ legend { @include forms.field-label; } @include text-body-lg; - font-family: $body-font-family; + font-family: var(--body-font-family); font-weight: bold; margin-bottom: forms.$field-v-spacing; - - @supports (--css: variables) { - font-family: var(--body-font-family); - } } button, diff --git a/assets/sass/protocol/base/elements/_links.scss b/assets/sass/protocol/base/elements/_links.scss index e350761bf..7ae7540c0 100644 --- a/assets/sass/protocol/base/elements/_links.scss +++ b/assets/sass/protocol/base/elements/_links.scss @@ -5,49 +5,30 @@ @use '../../includes/lib' as *; :link { - color: $link-color; + color: var(--link-color); text-decoration: underline; &:hover, &:focus, &:active { - color: $link-color-hover; + color: var(--link-color-hover); text-decoration: none; } &:active { background-color: rgb(0, 0, 0, 0.05); } - - @supports (--css: variables) { - color: var(--link-color); - - &:hover, - &:focus, - &:active { - color: var(--link-color-hover); - } - } } :visited { - color: $link-color-visited; + color: var(--link-color-visited); &:hover, &:focus, &:active { - color: $link-color-visited-hover; - } - - @supports (--css: variables) { - color: var(--link-color-visited); - - &:hover, - &:focus, - &:active { - color: var(--link-color-visited-hover); - } + color: var(--link-color-visited-hover); } + } .mzp-t-dark { @@ -55,10 +36,6 @@ } .mzp-c-cta-link { - font-family: $button-font-family; + font-family: var(--button-font-family); font-weight: bold; - - @supports (--css: variables) { - font-family: var(--button-font-family); - } } diff --git a/assets/sass/protocol/base/elements/_quotes.scss b/assets/sass/protocol/base/elements/_quotes.scss index 2ed5fc861..42e23c8c0 100644 --- a/assets/sass/protocol/base/elements/_quotes.scss +++ b/assets/sass/protocol/base/elements/_quotes.scss @@ -9,15 +9,15 @@ blockquote { @include text-title-sm; border-color: $color-marketing-gray-20; border-style: solid; - color: $title-text-color; - font-family: $title-font-family; + color: var(--title-text-color); + font-family: var(--title-font-family); font-weight: bold; margin: $spacing-lg auto; padding: $spacing-sm $spacing-lg; cite { @include text-title-xs; - color: $body-text-color-secondary; + color: var(--body-text-color-secondary); &::before { content: '— '; @@ -27,13 +27,4 @@ blockquote { & > :last-child { margin-bottom: 0; } - - @supports (--css: variables) { - color: var(--title-text-color); - font-family: var(--title-font-family); - - cite { - color: var(--body-text-color-secondary); - } - } } diff --git a/assets/sass/protocol/base/elements/_titles.scss b/assets/sass/protocol/base/elements/_titles.scss index 3dced1a84..fad6a0044 100644 --- a/assets/sass/protocol/base/elements/_titles.scss +++ b/assets/sass/protocol/base/elements/_titles.scss @@ -13,26 +13,16 @@ h4, h5, h6 { $default-font-weight: bold; - font-family: $title-font-family; - color: $title-text-color; - font-weight: $default-font-weight; + 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); text-wrap: balance; margin: 0 0 0.5em; .mzp-t-dark & { - color: $title-text-color-inverse; - } - - @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); - - .mzp-t-dark & { - color: var(--title-text-color-inverse); - } + color: var(--title-text-color-inverse); } } diff --git a/assets/sass/protocol/base/utilities/_backgrounds.scss b/assets/sass/protocol/base/utilities/_backgrounds.scss index 8440df3cc..774fef1d8 100644 --- a/assets/sass/protocol/base/utilities/_backgrounds.scss +++ b/assets/sass/protocol/base/utilities/_backgrounds.scss @@ -7,45 +7,24 @@ // Theme classes for background colors .mzp-t-background-secondary { - background-color: $background-color-secondary; - - @supports (--css: variables) { - background-color: var(--background-color-secondary); - } + background-color: var(--background-color-secondary); } .mzp-t-background-tertiary { - background-color: $background-color-tertiary; - - @supports (--css: variables) { - background-color: var(--background-color-tertiary); - } + background-color: var(--background-color-tertiary); } .mzp-t-dark { - background-color: $background-color-inverse; - color: $body-text-color-inverse; - - @supports (--css: variables) { - background-color: var(--background-color-inverse); - color: var(--body-text-color-inverse); - } + background-color: var(--background-color-inverse); + color: var(--body-text-color-inverse); } .mzp-t-dark.mzp-t-background-secondary, .mzp-t-dark .mzp-t-background-secondary { - background-color: $background-color-secondary-inverse; - - @supports (--css: variables) { - background-color: var(--background-color-secondary-inverse); - } + background-color: var(--background-color-secondary-inverse); } .mzp-t-dark.mzp-t-background-tertiary, .mzp-t-dark .mzp-t-background-tertiary { - background-color: $background-color-tertiary-inverse; - - @supports (--css: variables) { - background-color: var(--background-color-tertiary-inverse); - } + background-color: var(--background-color-tertiary-inverse); } diff --git a/assets/sass/protocol/base/utilities/_titles.scss b/assets/sass/protocol/base/utilities/_titles.scss index 041f26ac7..8ed10fd66 100644 --- a/assets/sass/protocol/base/utilities/_titles.scss +++ b/assets/sass/protocol/base/utilities/_titles.scss @@ -9,74 +9,42 @@ .mzp-u-title-2xl { @include text-title-2xl; - font-family: $title-font-family; - - @supports (--css: variables) { - font-family: var(--title-font-family); - } + 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); - } + 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); - } + 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); - } + 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); - } + 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); - } + 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); - } + 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); - } + font-family: var(--title-font-family); } // Utility class for centered text. diff --git a/assets/sass/protocol/components/_breadcrumb.scss b/assets/sass/protocol/components/_breadcrumb.scss index ccdee6b84..4cdbe152a 100644 --- a/assets/sass/protocol/components/_breadcrumb.scss +++ b/assets/sass/protocol/components/_breadcrumb.scss @@ -5,20 +5,20 @@ @use '../includes/lib' as *; .mzp-c-breadcrumb { - background-color: $background-color-secondary; + background-color: var(--background-color-secondary); padding: $spacing-md 0; .mzp-c-breadcrumb-list { margin: 0 auto; max-width: $content-max; - padding: 0 $h-grid-xs; + padding: 0 var(--h-gris-xs); @media #{$mq-md} { - padding: 0 $h-grid-md; + padding: 0 var(--h-grid-md); } @media #{$mq-xl} { - padding: 0 $h-grid-xl; + padding: 0 var(--h-grid-xl); } } @@ -53,14 +53,6 @@ } &.mzp-t-dark { - background-color: $background-color-secondary-inverse; - } - - @supports (--css: variables) { - background-color: var(--background-color-secondary); - - &.mzp-t-dark { - background-color: var(--background-color-secondary-inverse); - } + background-color: var(--background-color-secondary-inverse); } } diff --git a/assets/sass/protocol/components/_button.scss b/assets/sass/protocol/components/_button.scss index f151a670d..6ce4aa0e5 100644 --- a/assets/sass/protocol/components/_button.scss +++ b/assets/sass/protocol/components/_button.scss @@ -81,9 +81,9 @@ a.mzp-c-button { border: 2px solid transparent; cursor: pointer; display: inline-block; - font-family: $button-font-family; + font-family: var(--button-font-family); font-weight: bold; - line-height: $body-line-height; + line-height: var(--body-line-height); padding: 6px $spacing-lg; text-align: center; text-decoration: none !important; /* stylelint-disable-line declaration-no-important */ @@ -100,11 +100,6 @@ a.mzp-c-button { opacity: 0.6; pointer-events: none; } - - @supports (--css: variables) { - font-family: var(--button-font-family); - line-height: var(--body-line-height); - } } // Sizes diff --git a/assets/sass/protocol/components/_card.scss b/assets/sass/protocol/components/_card.scss index 3a369a202..fb6b1dc12 100644 --- a/assets/sass/protocol/components/_card.scss +++ b/assets/sass/protocol/components/_card.scss @@ -138,12 +138,12 @@ .mzp-c-card.mzp-t-dark, .mzp-t-dark .mzp-c-card { - background-color: $background-color-inverse; - color: $body-text-color-inverse; + background-color: var(--background-color-inverse); + color: var(--body-text-color-inverse); .mzp-c-card-tag, .mzp-c-card-meta { - color: $body-text-color-inverse; + color: var(--body-text-color-inverse); } .mzp-c-card-block-link { @@ -155,31 +155,10 @@ &:link, &:visited { - color: $body-text-color-inverse; - - .mzp-c-card-cta-text { - color: $body-text-color-inverse; - } - } - } - - @supports (--css: variables) { - background-color: var(--background-color-inverse); - color: var(--body-text-color-inverse); - - .mzp-c-card-tag, - .mzp-c-card-meta { color: var(--body-text-color-inverse); - } - .mzp-c-card-block-link { - &:link, - &:visited { + .mzp-c-card-cta-text { color: var(--body-text-color-inverse); - - .mzp-c-card-cta-text { - color: var(--body-text-color-inverse); - } } } } diff --git a/assets/sass/protocol/components/_emphasis-box.scss b/assets/sass/protocol/components/_emphasis-box.scss index 424ad2f46..c29fb8df7 100644 --- a/assets/sass/protocol/components/_emphasis-box.scss +++ b/assets/sass/protocol/components/_emphasis-box.scss @@ -7,23 +7,14 @@ // * -------------------------------------------------------------------------- */ // Base emphasis Box class .mzp-c-emphasis-box { - background-color: $background-color; + background-color: var(--background-color); border-radius: $border-radius-md; box-shadow: $box-shadow-sm; margin: $spacing-md; padding: $spacing-xl; &.mzp-t-dark { - background-color: $background-color-inverse; - color: $body-text-color-inverse; - } - - @supports (--css: variables) { - background-color: var(--background-color); - - &.mzp-t-dark { - background-color: var(--background-color-inverse); - color: var(--body-text-color-inverse); - } + background-color: var(--background-color-inverse); + color: var(--body-text-color-inverse); } } diff --git a/assets/sass/protocol/components/_feature-card.scss b/assets/sass/protocol/components/_feature-card.scss index 30a7b5ace..df07f7c22 100644 --- a/assets/sass/protocol/components/_feature-card.scss +++ b/assets/sass/protocol/components/_feature-card.scss @@ -63,18 +63,10 @@ // dark theme color styling .mzp-t-dark & { - color: $body-text-color-inverse; + color: var(--body-text-color-inverse); .mzp-c-card-feature-desc { - color: $body-text-color-secondary-inverse; - } - - @supports (--css: variables) { - color: var(--body-text-color-inverse); - - .mzp-c-card-feature-desc { - color: var(--body-text-color-secondary-inverse); - } + color: var(--body-text-color-secondary-inverse); } } diff --git a/assets/sass/protocol/components/_menu-list.scss b/assets/sass/protocol/components/_menu-list.scss index 7ccbb3e3d..400f677de 100644 --- a/assets/sass/protocol/components/_menu-list.scss +++ b/assets/sass/protocol/components/_menu-list.scss @@ -9,13 +9,9 @@ } .mzp-c-menu-list-title { - font-family: $button-font-family; + font-family: var(--button-font-family); font-size: inherit; font-weight: bold; - - @supports (--css: variables) { - font-family: var(--button-font-family); - } } .mzp-c-menu-list-list { diff --git a/assets/sass/protocol/components/_newsletter-form.scss b/assets/sass/protocol/components/_newsletter-form.scss index 4ffca6f8f..26460750d 100644 --- a/assets/sass/protocol/components/_newsletter-form.scss +++ b/assets/sass/protocol/components/_newsletter-form.scss @@ -69,7 +69,7 @@ @media #{$mq-md} { @include clearfix; - padding: $h-grid-md $v-grid-lg; + padding: var(--h-grid-md) var(--v-grid-lg); max-width: none; .mzp-c-newsletter-image { @@ -111,7 +111,7 @@ } @media #{$mq-lg} { - padding: $h-grid-lg $layout-2xl; + padding: var(--h-grid-lg) $layout-2xl; .mzp-c-newsletter-form, .mzp-c-newsletter-thanks { @@ -120,20 +120,6 @@ } @media #{$mq-xl} { - padding: $h-grid-xl $layout-2xl; - } - - @supports (--css: variables) { - @media #{$mq-md} { - padding: var(--h-grid-md) var(--v-grid-lg); - } - - @media #{$mq-lg} { - padding: var(--h-grid-lg) $layout-2xl; - } - - @media #{$mq-xl} { - padding: var(--h-grid-xl) $layout-2xl; - } + padding: var(--h-grid-xl) $layout-2xl; } } diff --git a/assets/sass/protocol/components/_section-heading.scss b/assets/sass/protocol/components/_section-heading.scss index f53d618c2..e3713b7af 100644 --- a/assets/sass/protocol/components/_section-heading.scss +++ b/assets/sass/protocol/components/_section-heading.scss @@ -10,16 +10,16 @@ .mzp-c-section-heading { @include text-title-md; margin: 0 auto; - padding: $h-grid-xs $layout-xs; + padding: var(--h-grid-xs) $layout-xs; max-width: $content-lg; text-align: center; @media #{$mq-md} { - padding: $h-grid-md $v-grid-md; + padding: var(--h-grid-md) var(--v-grid-md); } @media #{$mq-xl} { - padding: $h-grid-xl $v-grid-xl; + padding: var(--h-grid-xl) var(--v-grid-xl); } // rely on l-content for padding if nested @@ -31,16 +31,4 @@ padding-top: 0; } } - - @supports (--css: variables) { - padding: var(--h-grid-xs) $layout-xs; - - @media #{$mq-md} { - padding: var(--h-grid-md) var(--v-grid-md); - } - - @media #{$mq-xl} { - padding: var(--h-grid-xl) var(--v-grid-xl); - } - } } diff --git a/assets/sass/protocol/components/_split.scss b/assets/sass/protocol/components/_split.scss index 609455dd8..162655161 100644 --- a/assets/sass/protocol/components/_split.scss +++ b/assets/sass/protocol/components/_split.scss @@ -12,10 +12,10 @@ position: relative; // vertical spacing should match mzp-l-content's vertical spacing - padding: $v-grid-xs 0; + padding: var(--v-grid-xs) 0; @media #{$mq-md} { - padding: $v-grid-md 0; + padding: var(--v-grid-md) 0; &.mzp-t-split-nospace { padding-top: 0; @@ -26,18 +26,6 @@ @media #{$mq-xl} { padding: var(--v-grid-xl) 0; } - - @supports (--css: variables) { - padding: var(--v-grid-xs) 0; - - @media #{$mq-md} { - padding: var(--v-grid-md) 0; - } - - @media #{$mq-xl} { - padding: var(--v-grid-xl) 0; - } - } } .mzp-c-split-container { @@ -46,26 +34,14 @@ max-width: $content-max; // horizontal spacing should match mzp-l-content's horizontal spacing - padding: 0 $h-grid-xs; + padding: 0 var(--h-grid-xs); @media #{$mq-md} { - padding: 0 $h-grid-md; + padding: 0 var(--h-grid-md); } @media #{$mq-xl} { - padding: 0 $h-grid-xl; - } - - @supports (--css: variables) { - padding: 0 var(--h-grid-xs); - - @media #{$mq-md} { - padding: 0 var(--h-grid-md); - } - - @media #{$mq-xl} { - padding: 0 var(--h-grid-xl); - } + padding: 0 var(--h-grid-xl); } .mzp-t-content-md & { @@ -104,26 +80,14 @@ .mzp-c-split-bg { // vertical spacing should match mzp-l-content's vertical spacing - padding: $v-grid-xs 0; + padding: var(--v-grid-xs) 0; @media #{$mq-md} { - padding: $v-grid-md 0; + padding: var(--v-grid-md) 0; } @media #{$mq-xl} { - padding: $v-grid-xl 0; - } - - @supports (--css: variables) { - padding: var(--v-grid-xs) 0; - - @media #{$mq-md} { - padding: var(--v-grid-md) 0; - } - - @media #{$mq-xl} { - padding: var(--v-grid-xl) 0; - } + padding: var(--v-grid-xl) 0; } } @@ -133,11 +97,7 @@ @media all and (max-width: #{$screen-md - 1}) { .mzp-c-split-body + .mzp-c-split-media, .mzp-c-split-media + .mzp-c-split-body { - margin-top: $v-grid-xs; - - @supports (--css: variables) { - margin-top: var(--v-grid-xs); - } + margin-top: var(--v-grid-xs); } .mzp-l-split-center-on-sm-md { @@ -176,7 +136,7 @@ .mzp-c-split-body { @include border-box; @include bidi(((float, left, right),)); - padding: 0 calc($h-grid-lg * 0.5); + padding: 0 calc(var(--h-grid-lg) * 0.5); width: 50%; .mzp-l-split-reversed & { @@ -187,23 +147,13 @@ .mzp-c-split-media { @include border-box; @include bidi(((float, right, left),)); - padding: 0 ($h-grid-lg * 0.5); + padding: 0 calc(var(--h-grid-lg) * 0.5); width: 50%; .mzp-l-split-reversed & { @include bidi(((float, left, right),)); } } - - @supports (--css: variables) { - .mzp-c-split-body { - padding: 0 calc(var(--h-grid-lg) * 0.5); - } - - .mzp-c-split-media { - padding: 0 calc(var(--h-grid-lg) * 0.5); - } - } } @media #{$mq-lg} { @@ -231,11 +181,7 @@ @media #{$mq-xl} { .mzp-c-split-body, .mzp-c-split-media { - padding: 0 ($h-grid-xl * 0.5); - - @supports (--css: variables) { - padding: 0 calc(var(--h-grid-lg) * 0.5); - } + padding: 0 calc(var(--h-grid-lg) * 0.5); } } @@ -248,17 +194,13 @@ // grid is all start/end based we don't need bidi declarations for RTL support \o/ align-items: center; display: grid; - grid-column-gap: $h-grid-lg; + grid-column-gap: var(--h-grid-lg); grid-template-areas: 'body media'; grid-template-columns: 1fr 1fr; .mzp-l-split-reversed & { grid-template-areas: 'media body'; } - - @supports (--css: variables) { - grid-column-gap: var(--h-grid-lg); - } } .mzp-c-split-body, @@ -311,11 +253,7 @@ @media #{$mq-xl} { .mzp-c-split-container { - grid-column-gap: $h-grid-xl; - - @supports (--css: variables) { - grid-column-gap: var(--h-grid-xl); - } + grid-column-gap: var(--h-grid-xl); } } } @@ -372,28 +310,16 @@ .mzp-l-split-pop-top, .mzp-l-split-pop { &.mzp-c-split { - padding-top: $v-grid-lg * 2; - - @supports (--css: variables) { - padding-top: calc(var(--v-grid-lg) * 2); - } + padding-top: calc(var(--v-grid-lg) * 2); } .mzp-c-split-media { - margin-top: $v-grid-lg * -1; - - @supports (--css: variables) { - margin-top: calc(var(--v-grid-lg) * -1); - } + margin-top: calc(var(--v-grid-lg) * -1); } .mzp-c-split-bg & { .mzp-c-split-media { - margin-top: $v-grid-lg * -2; - - @supports (--css: variables) { - margin-top: calc(var(--v-grid-lg) * -2); - } + margin-top: calc(var(--v-grid-lg) * -2); } } } @@ -401,28 +327,16 @@ .mzp-l-split-pop-bottom, .mzp-l-split-pop { &.mzp-c-split { - padding-bottom: $v-grid-lg * 2; - - @supports (--css: variables) { - padding-bottom: calc(var(--v-grid-lg) * 2); - } + padding-bottom: calc(var(--v-grid-lg) * 2); } .mzp-c-split-media { - margin-bottom: $v-grid-lg * -1; - - @supports (--css: variables) { - margin-bottom: calc(var(--v-grid-lg) * -1); - } + margin-bottom: calc(var(--v-grid-lg) * -1); } .mzp-c-split-bg & { .mzp-c-split-media { - margin-bottom: $v-grid-lg * -2; - - @supports (--css: variables) { - margin-bottom: calc(var(--v-grid-lg) * -2); - } + margin-bottom: calc(var(--v-grid-lg) * -2); } } } @@ -430,36 +344,20 @@ .mzp-l-split-media-constrain-height { .mzp-l-split-pop-top &, .mzp-l-split-pop-bottom & { - height: calc(100% + #{$v-grid-lg}); - - @supports (--css: variables) { - height: calc(100% + var(--v-grid-lg)); - } + height: calc(100% + var(--v-grid-lg)); } .mzp-l-split-pop & { - height: calc(100% + #{$v-grid-lg * 2}); - - @supports (--css: variables) { - height: calc(100% + var(--v-grid-lg) * 2); - } + height: calc(100% + var(--v-grid-lg) * 2); } .mzp-l-split-pop-top .mzp-c-split-bg &, .mzp-l-split-pop-bottom .mzp-c-split-bg & { - height: calc(100% + #{$v-grid-lg * 2}); - - @supports (--css: variables) { - height: calc(100% + var(--v-grid-lg) * 2); - } + height: calc(100% + var(--v-grid-lg) * 2); } .mzp-l-split-pop .mzp-c-split-bg & { - height: calc(100% + #{$v-grid-lg * 4}); - - @supports (--css: variables) { - height: calc(100% + var(--v-grid-lg) * 4); - } + height: calc(100% + var(--v-grid-lg) * 4); } } } @@ -468,28 +366,16 @@ .mzp-l-split-pop-top, .mzp-l-split-pop { &.mzp-c-split { - padding-top: $v-grid-xl * 2; - - @supports (--css: variables) { - padding-top: calc(var(--v-grid-xl) * 2); - } + padding-top: calc(var(--v-grid-xl) * 2); } .mzp-c-split-media { - margin-top: $v-grid-xl * -1; - - @supports (--css: variables) { - margin-top: calc(var(--v-grid-xl) * -1); - } + margin-top: calc(var(--v-grid-xl) * -1); } & .mzp-c-split-bg { .mzp-c-split-media { - margin-top: $v-grid-xl * -2; - - @supports (--css: variables) { - margin-top: calc(var(--v-grid-xl) * -2); - } + margin-top: calc(var(--v-grid-xl) * -2); } } } @@ -497,28 +383,16 @@ .mzp-l-split-pop-bottom, .mzp-l-split-pop { &.mzp-c-split { - padding-bottom: $v-grid-xl * 2; - - @supports (--css: variables) { - padding-bottom: calc(var(--v-grid-xl) * 2); - } + padding-bottom: calc(var(--v-grid-xl) * 2); } .mzp-c-split-media { - margin-bottom: $v-grid-xl * -1; - - @supports (--css: variables) { - margin-bottom: calc(var(--v-grid-xl) * -1); - } + margin-bottom: calc(var(--v-grid-xl) * -1); } & .mzp-c-split-bg { .mzp-c-split-media { - margin-bottom: $v-grid-xl * -2; - - @supports (--css: variables) { - margin-bottom: calc(var(--v-grid-xl) * -2); - } + margin-bottom: calc(var(--v-grid-xl) * -2); } } } @@ -526,36 +400,20 @@ .mzp-l-split-media-constrain-height { .mzp-l-split-pop-top &, .mzp-l-split-pop-bottom & { - height: calc(100% + #{$v-grid-xl}); - - @supports (--css: variables) { - height: calc(100% + var(--v-grid-xl)); - } + height: calc(100% + var(--v-grid-xl)); } .mzp-l-split-pop & { - height: calc(100% + #{$v-grid-xl * 2}); - - @supports (--css: variables) { - height: calc(100% + calc(var(--v-grid-xl) * 2)); - } + height: calc(100% + calc(var(--v-grid-xl) * 2)); } .mzp-l-split-pop-top .mzp-c-split-bg &, .mzp-l-split-pop-bottom .mzp-c-split-bg & { - height: calc(100% + #{$v-grid-xl * 2}); - - @supports (--css: variables) { - height: calc(100% + calc(var(--v-grid-xl) * 2)); - } + height: calc(100% + calc(var(--v-grid-xl) * 2)); } .mzp-l-split-pop .mzp-c-split-bg & { - height: calc(100% + #{$v-grid-xl * 4}); - - @supports (--css: variables) { - height: calc(100% + calc(var(--v-grid-xl) * 4)); - } + height: calc(100% + calc(var(--v-grid-xl) * 4)); } } } diff --git a/assets/sass/protocol/components/_sticky-promo.scss b/assets/sass/protocol/components/_sticky-promo.scss index 7ed7b6740..2d69abcc4 100644 --- a/assets/sass/protocol/components/_sticky-promo.scss +++ b/assets/sass/protocol/components/_sticky-promo.scss @@ -67,13 +67,8 @@ $logos: ( // Dark theme &.mzp-t-dark { - background-color: $background-color-inverse; - color: $body-text-color-inverse; - - @supports (--css: variables) { - background-color: var(--background-color-inverse); - color: var(--body-text-color-inverse); - } + background-color: var(--background-color-inverse); + color: var(--body-text-color-inverse); } // Product logos diff --git a/assets/sass/protocol/components/forms/_form.scss b/assets/sass/protocol/components/forms/_form.scss index a42c1bb10..e7f007ea8 100644 --- a/assets/sass/protocol/components/forms/_form.scss +++ b/assets/sass/protocol/components/forms/_form.scss @@ -14,21 +14,12 @@ // - form-footer .mzp-c-form { - color: forms.$form-text; + color: var(--body-text-color-secondary); margin-bottom: forms.$field-v-spacing; &.mzp-t-dark, .mzp-t-dark & { - color: $body-text-color-secondary-inverse; - } - - @supports (--css: variables) { - color: var(--body-text-color-secondary); - - &.mzp-t-dark, - .mzp-t-dark & { - color: var(--body-text-color-secondary-inverse); - } + color: var(--body-text-color-secondary-inverse); } // if we're using the form component bottom spacing comes from `field` and `choice` components @@ -67,8 +58,8 @@ .mzp-c-form-title, legend.mzp-c-form-title { @include text-title-xs; - color: $title-text-color; - font-family: $title-font-family; + color: var(--title-text-color); + font-family: var(--title-font-family); font-weight: bold; margin: 0 0 $spacing-lg; @@ -77,16 +68,7 @@ legend.mzp-c-form-title { } .mzp-t-dark & { - color: $title-text-color-inverse; - } - - @supports (--css: variables) { - color: var(--title-text-color); - font-family: var(--title-font-family); - - .mzp-t-dark & { - color: var(--title-text-color-inverse); - } + color: var(--title-text-color-inverse); } } diff --git a/assets/sass/protocol/includes/_themes-sass.scss b/assets/sass/protocol/includes/_themes-sass.scss index 806c6b1c0..7d98e24d5 100644 --- a/assets/sass/protocol/includes/_themes-sass.scss +++ b/assets/sass/protocol/includes/_themes-sass.scss @@ -11,46 +11,6 @@ @use 'config'; @use 'functions'; - -// Default "theme" that will be served to legacy browsers - IE 11 etc -$v-grid-xs: tokens.$layout-md; -$h-grid-xs: tokens.$layout-xs; -$v-grid-sm: tokens.$layout-md; -$h-grid-sm: tokens.$layout-xs; -$v-grid-md: tokens.$layout-md; -$h-grid-md: tokens.$layout-lg; -$v-grid-lg: tokens.$layout-md; -$h-grid-lg: tokens.$layout-lg; -$v-grid-xl: tokens.$layout-xl; -$h-grid-xl: 80px; - -// fonts -$body-font-family: tokens.$font-stack-mozilla-text; -$button-font-family: tokens.$font-stack-mozilla-text; -$title-font-family: tokens.$font-stack-mozilla-headline; - -// colors -$background-color-tertiary-inverse: tokens.$color-dark-gray-40; -$background-color-tertiary: tokens.$color-light-gray-30; -$background-color-secondary-inverse: tokens.$color-dark-gray-60; -$background-color-secondary: tokens.$color-light-gray-10; -$background-color-inverse: tokens.$color-black; -$background-color: tokens.$color-white; -$body-text-color-secondary-inverse: tokens.$color-light-gray-30; -$body-text-color-secondary: tokens.$color-dark-gray-90; -$body-text-color-inverse: tokens.$color-white; -$body-text-color: tokens.$color-black; -$link-color-hover-inverse: tokens.$color-blue-05; -$link-color-hover: tokens.$color-link-hover; -$link-color-inverse: tokens.$color-blue-10; -$link-color-visited-hover-inverse: tokens.$color-violet-05; -$link-color-visited-hover: tokens.$color-link-hover; -$link-color-visited-inverse: tokens.$color-violet-10; -$link-color-visited: tokens.$color-link-visited; -$link-color: tokens.$color-link; -$title-text-color-inverse: tokens.$color-white; -$title-text-color: tokens.$color-black; - // type-scale $title-2xl-size: 64px; $title-2xl-line-height: 1.125; diff --git a/assets/sass/protocol/includes/forms/_index.scss b/assets/sass/protocol/includes/forms/_index.scss index 5b955cc6d..5219b888c 100644 --- a/assets/sass/protocol/includes/forms/_index.scss +++ b/assets/sass/protocol/includes/forms/_index.scss @@ -14,7 +14,7 @@ // colors $form-red: #d70022; -$form-text: $body-text-color-secondary; +$form-text: var(--body-text-color-secondary); $form-inactive: $color-marketing-gray-70; // fields @@ -67,13 +67,9 @@ $line-height-shim: 0.15em; // two elements with text appear to have more space b @include text-body-sm; display: block; font-weight: bold; - line-height: $text-body-line-height; + line-height: var(--body-line-height); margin: 0; padding-bottom: $label-v-spacing; - - @supports (--css: variables) { - line-height: var(--body-line-height); - } } @mixin form-info() { diff --git a/assets/sass/protocol/includes/mixins/_typography.scss b/assets/sass/protocol/includes/mixins/_typography.scss index 662fd1598..df4c652c7 100644 --- a/assets/sass/protocol/includes/mixins/_typography.scss +++ b/assets/sass/protocol/includes/mixins/_typography.scss @@ -59,204 +59,104 @@ // .intro { @include text-body-lg; } @mixin text-title-2xl { - @include font-size(themes.$title-xl-size); - line-height: themes.$title-xl-line-height; + font-size: var(--title-xl-size); + line-height: var(--title-xl-line-height); @media #{tokens.$mq-md} { - @include font-size(themes.$title-2xl-size); - line-height: themes.$title-2xl-line-height; + font-size: var(--title-2xl-size); + line-height: var(--title-2xl-line-height); } +} + +@mixin text-title-xl { + font-size: var(--title-lg-size); + line-height: var(--title-lg-line-height); - @supports (--css: variables) { + @media #{tokens.$mq-md} { font-size: var(--title-xl-size); line-height: var(--title-xl-line-height); - - @media #{tokens.$mq-md} { - font-size: var(--title-2xl-size); - line-height: var(--title-2xl-line-height); - } } } -@mixin text-title-xl { - @include font-size(themes.$title-lg-size); - line-height: themes.$title-lg-line-height; +@mixin text-title-lg { + font-size: var(--title-md-size); + line-height: var(--title-md-line-height); @media #{tokens.$mq-md} { - @include font-size(themes.$title-xl-size); - line-height: themes.$title-xl-line-height; - } - - @supports (--css: variables) { font-size: var(--title-lg-size); line-height: var(--title-lg-line-height); - - @media #{tokens.$mq-md} { - font-size: var(--title-xl-size); - line-height: var(--title-xl-line-height); - } } } -@mixin text-title-lg { - @include font-size(themes.$title-md-size); - line-height: themes.$title-md-line-height; +@mixin text-title-md { + font-size: var(--title-sm-size); + line-height: var(--title-sm-line-height); @media #{tokens.$mq-md} { - @include font-size(themes.$title-lg-size); - line-height: themes.$title-lg-line-height; - } - - @supports (--css: variables) { font-size: var(--title-md-size); line-height: var(--title-md-line-height); - - @media #{tokens.$mq-md} { - font-size: var(--title-lg-size); - line-height: var(--title-lg-line-height); - } } } -@mixin text-title-md { - @include font-size(themes.$title-sm-size); - line-height: themes.$title-sm-line-height; +@mixin text-title-sm { + font-size: var(--title-xs-size); + line-height: var(--title-xs-line-height); @media #{tokens.$mq-md} { - @include font-size(themes.$title-md-size); - line-height: themes.$title-md-line-height; - } - - @supports (--css: variables) { font-size: var(--title-sm-size); line-height: var(--title-sm-line-height); - - @media #{tokens.$mq-md} { - font-size: var(--title-md-size); - line-height: var(--title-md-line-height); - } } } -@mixin text-title-sm { - @include font-size(themes.$title-xs-size); - line-height: themes.$title-xs-line-height; +@mixin text-title-xs { + font-size: var(--title-2xs-size); + line-height: var(--title-2xs-line-height); @media #{tokens.$mq-md} { - @include font-size(themes.$title-sm-size); - line-height: themes.$title-sm-line-height; - } - - @supports (--css: variables) { font-size: var(--title-xs-size); line-height: var(--title-xs-line-height); - - @media #{tokens.$mq-md} { - font-size: var(--title-sm-size); - line-height: var(--title-sm-line-height); - } } } -@mixin text-title-xs { - @include font-size(themes.$title-2xs-size); - line-height: themes.$title-2xs-line-height; +@mixin text-title-2xs { + font-size: var(--title-3xs-size); + line-height: var(--title-3xs-line-height); @media #{tokens.$mq-md} { - @include font-size(themes.$title-xs-size); - line-height: themes.$title-xs-line-height; - } - - @supports (--css: variables) { font-size: var(--title-2xs-size); line-height: var(--title-2xs-line-height); - - @media #{tokens.$mq-md} { - font-size: var(--title-xs-size); - line-height: var(--title-xs-line-height); - } - } -} - -@mixin text-title-2xs { - @include font-size(themes.$title-3xs-size); - line-height: themes.$title-3xs-line-height; - - @media #{tokens.$mq-md} { - @include font-size(themes.$title-2xs-size); - line-height: themes.$title-2xs-line-height; - } - - @supports (--css: variables) { - font-size: var(--title-3xs-size); - line-height: var(--title-3xs-line-height); - - @media #{tokens.$mq-md} { - font-size: var(--title-2xs-size); - line-height: var(--title-2xs-line-height); - } } } @mixin text-title-3xs { - @include font-size(themes.$title-3xs-size); - line-height: themes.$title-3xs-line-height; - - @supports (--css: variables) { - font-size: var(--title-3xs-size); - line-height: var(--title-3xs-line-height); - } + font-size: var(--title-3xs-size); + line-height: var(--title-3xs-line-height); } // body copy @mixin text-body-xl { - @include font-size(themes.$body-xl-size); - line-height: themes.$body-line-height; - - @supports (--css: variables) { - font-size: var(--body-xl-size); - line-height: var(--body-line-height); - } + font-size: var(--body-xl-size); + line-height: var(--body-line-height); } @mixin text-body-lg { - @include font-size(themes.$body-lg-size); - line-height: themes.$body-line-height; - - @supports (--css: variables) { - font-size: var(--body-lg-size); - line-height: var(--body-line-height); - } + font-size: var(--body-lg-size); + line-height: var(--body-line-height); } @mixin text-body-md { - @include font-size(themes.$body-md-size); - line-height: themes.$body-line-height; - - @supports (--css: variables) { - font-size: var(--body-md-size); - line-height: var(--body-line-height); - } + font-size: var(--body-md-size); + line-height: var(--body-line-height); } @mixin text-body-sm { - @include font-size(themes.$body-sm-size); - line-height: themes.$body-line-height; - - @supports (--css: variables) { - font-size: var(--body-sm-size); - line-height: var(--body-line-height); - } + font-size: var(--body-sm-size); + line-height: var(--body-line-height); } @mixin text-body-xs { - @include font-size(themes.$body-xs-size); - line-height: themes.$body-line-height; - - @supports (--css: variables) { - font-size: var(--body-xs-size); - line-height: var(--body-line-height); - } + font-size: var(--body-xs-size); + line-height: var(--body-line-height); } // Aliases for backwards compatibility diff --git a/assets/sass/protocol/includes/mixins/_utils.scss b/assets/sass/protocol/includes/mixins/_utils.scss index 71390bfa1..08092ff44 100644 --- a/assets/sass/protocol/includes/mixins/_utils.scss +++ b/assets/sass/protocol/includes/mixins/_utils.scss @@ -225,45 +225,23 @@ // Light color links for dark backgrounds. @mixin light-links { a:link { - color: themes.$link-color-inverse; + color: var(--link-color-inverse); } a:visited { - color: themes.$link-color-visited-inverse; + color: var(--link-color-visited-inverse); } a:hover, a:focus, a:active { - color: themes.$link-color-hover-inverse; + color: var(--link-color-hover-inverse); } a:visited:hover, a:visited:focus, a:visited:active { - color: themes.$link-color-visited-hover-inverse; - } - - @supports (--css: variables) { - a:link { - color: var(--link-color-inverse); - } - - a:visited { - color: var(--link-color-visited-inverse); - } - - a:hover, - a:focus, - a:active { - color: var(--link-color-hover-inverse); - } - - a:visited:hover, - a:visited:focus, - a:visited:active { - color: var(--link-color-visited-hover-inverse); - } + color: var(--link-color-visited-hover-inverse); } } diff --git a/assets/sass/protocol/templates/_multi-column.scss b/assets/sass/protocol/templates/_multi-column.scss index 1a0faa870..d406ba20e 100644 --- a/assets/sass/protocol/templates/_multi-column.scss +++ b/assets/sass/protocol/templates/_multi-column.scss @@ -7,18 +7,13 @@ @media #{$mq-md} { .mzp-l-columns { display: grid; - grid-gap: $v-grid-sm $h-grid-md; - gap: $v-grid-sm $h-grid-md; + grid-gap: var(--v-grid-sm) var(--h-grid-md); + gap: var(--v-grid-sm) var(--h-grid-md); &.mzp-t-columns-two, &.mzp-t-columns-four { grid-template-columns: repeat(2, 1fr); } - - @supports (--css: variables) { - grid-gap: var(--v-grid-sm) var(--h-grid-md); - gap: var(--v-grid-sm) var(--h-grid-md); - } } // Remove standard bottom margin from multi-column lists @@ -30,8 +25,8 @@ @media #{$mq-lg} { .mzp-l-columns { - grid-gap: $v-grid-lg $h-grid-xl; - gap: $v-grid-lg $h-grid-xl; + grid-gap: var(--v-grid-lg) var(--h-grid-xl); + gap: var(--v-grid-lg) var(--h-grid-xl); &.mzp-t-columns-three { grid-template-columns: repeat(3, 1fr); @@ -40,11 +35,6 @@ &.mzp-t-columns-four { grid-template-columns: repeat(4, 1fr); } - - @supports (--css: variables) { - grid-gap: var(--v-grid-lg) var(--h-grid-xl); - gap: var(--v-grid-lg) var(--h-grid-xl); - } } } @@ -63,13 +53,9 @@ // Smaller gutters in medium containers .mzp-t-content-md .mzp-l-columns, .mzp-t-content-md.mzp-l-columns { - grid-column-gap: $h-grid-md; - column-gap: $h-grid-md; + grid-column-gap: var(--h-grid-md); + column-gap: var(--h-grid-md); - @supports (--css: variables) { - grid-column-gap: var(--h-grid-md); - column-gap: var(--h-grid-md); - } } // Change four columns to two in medium containers, plus smaller gutters @@ -83,11 +69,6 @@ .mzp-t-content-lg.mzp-l-columns.mzp-t-columns-three, .mzp-t-content-lg .mzp-l-columns.mzp-t-columns-four, .mzp-t-content-lg.mzp-l-columns.mzp-t-columns-four { - grid-column-gap: $h-grid-md; - column-gap: $h-grid-md; - - @supports (--css: variables) { - grid-column-gap: var(--h-grid-md); - column-gap: var(--h-grid-md); - } + grid-column-gap: var(--h-grid-md); + column-gap: var(--h-grid-md); } diff --git a/theme/assets/sass/base/_typography.scss b/theme/assets/sass/base/_typography.scss index 3ce70a793..05f85881f 100755 --- a/theme/assets/sass/base/_typography.scss +++ b/theme/assets/sass/base/_typography.scss @@ -2,11 +2,7 @@ body { @include font-base; - color: $body-text-color; - - @supports (--css:variables) { - color: var(--body-text-color); - } + color: var(--body-text-color); } mark { diff --git a/theme/assets/sass/components/_document.scss b/theme/assets/sass/components/_document.scss index 9978dc01c..b15e62e7d 100644 --- a/theme/assets/sass/components/_document.scss +++ b/theme/assets/sass/components/_document.scss @@ -4,11 +4,6 @@ .Document-title { @include text-title-lg; - font-family: $title-font-family; - color: $title-text-color; - - @supports (--css: variables) { - font-family: var(--title-font-family); - color: var(--title-text-color); - } + font-family: var(--title-font-family); + color: var(--title-text-color); } diff --git a/theme/assets/sass/components/_header.scss b/theme/assets/sass/components/_header.scss index 7d59f49b2..7042d9083 100755 --- a/theme/assets/sass/components/_header.scss +++ b/theme/assets/sass/components/_header.scss @@ -3,11 +3,7 @@ /* stylelint-disable selector-class-pattern */ .Header { - background-color: $background-color-inverse; - - @supports (--css: variables) { - background-color: var(--background-color-inverse); - } + background-color: var(--background-color-inverse); } .Header-button { diff --git a/theme/assets/sass/components/_pen.scss b/theme/assets/sass/components/_pen.scss index fdc614842..06676d172 100755 --- a/theme/assets/sass/components/_pen.scss +++ b/theme/assets/sass/components/_pen.scss @@ -17,18 +17,13 @@ .Pen-title { @include text-title-xs; - color: $title-text-color; - font-family: $title-font-family; + color: var(--title-text-color); + font-family: var(--title-font-family); margin-bottom: 0.5em; @media #{$mq-md} { margin-bottom: 0; } - - @supports (--css: variables) { - color: var(--title-text-color); - font-family: var(--title-font-family); - } } .Pen-previewLink { @@ -36,11 +31,7 @@ &:visited, &:hover, &:active { - color: $title-text-color; - - @supports (--css: variables) { - color: var(--title-text-color); - } + color: var(--title-text-color); } svg { @@ -52,23 +43,13 @@ .Pen-previewButton { @include bidi(((margin-left, $spacing-lg, margin-right, $spacing-lg),)); @include text-body-sm; - color: $link-color; - font-family: $body-font-family; + color: var(--link-color); + font-family: var(--body-font-family); font-weight: bold; &:hover, &:active { - color: $link-color-hover; - } - - @supports (--css: variables) { - color: var(--link-color); - font-family: var(--body-font-family); - - &:hover, - &:active { - color: var(--link-color-hover); - } + color: var(--link-color-hover); } } diff --git a/theme/assets/sass/components/_prose.scss b/theme/assets/sass/components/_prose.scss index d8bb1633a..9308ee09a 100755 --- a/theme/assets/sass/components/_prose.scss +++ b/theme/assets/sass/components/_prose.scss @@ -10,48 +10,28 @@ } :link { - color: $link-color; + color: var(--link-color); text-decoration: underline; &:hover, &:focus, &:active { - color: $link-color-hover; + color: var(--link-color-hover); text-decoration: none; } &:active { background-color: rgb(0, 0, 0, 0.05); } - - @supports (--css: variables) { - color: var(--link-color); - - &:hover, - &:focus, - &:active { - color: var(--link-color-hover); - } - } } :visited { - color: $link-color-visited; + color: var(--link-color-visited); &:hover, &:focus, &:active { - color: $link-color-visited-hover; - } - - @supports (--css: variables) { - color: var(--link-color-visited); - - &:hover, - &:focus, - &:active { - color: var(--link-color-visited-hover); - } + color: var(--link-color-visited-hover); } } @@ -61,16 +41,11 @@ h4, h5, h6 { - font-family: $title-font-family; - color: $title-text-color; + font-family: var(--title-font-family); + color: var(--title-text-color); font-weight: bold; margin: 1em 0 0.5em; opacity: 1; - - @supports (--css: variables) { - color: var(--title-text-color); - font-family: var(--title-font-family); - } } h1 { diff --git a/theme/assets/sass/components/_type-specimen.scss b/theme/assets/sass/components/_type-specimen.scss index dedecd2da..c0967206c 100644 --- a/theme/assets/sass/components/_type-specimen.scss +++ b/theme/assets/sass/components/_type-specimen.scss @@ -36,82 +36,50 @@ .docs-scale-sample-title-2xl { @include text-title-2xl; - font-family: $title-font-family; + font-family: var(--title-font-family); font-weight: bold; - - @supports (--css: variables) { - font-family: var(--title-font-family); - } } .docs-scale-sample-title-xl { @include text-title-xl; - font-family: $title-font-family; + font-family: var(--title-font-family); font-weight: bold; - - @supports (--css: variables) { - font-family: var(--title-font-family); - } } .docs-scale-sample-title-lg { @include text-title-lg; - font-family: $title-font-family; + font-family: var(--title-font-family); font-weight: bold; - - @supports (--css: variables) { - font-family: var(--title-font-family); - } } .docs-scale-sample-title-md { @include text-title-md; - font-family: $title-font-family; + font-family: var(--title-font-family); font-weight: bold; - - @supports (--css: variables) { - font-family: var(--title-font-family); - } } .docs-scale-sample-title-sm { @include text-title-sm; - font-family: $title-font-family; + font-family: var(--title-font-family); font-weight: bold; - - @supports (--css: variables) { - font-family: var(--title-font-family); - } } .docs-scale-sample-title-xs { @include text-title-xs; - font-family: $title-font-family; + font-family: var(--title-font-family); font-weight: bold; - - @supports (--css: variables) { - font-family: var(--title-font-family); - } } .docs-scale-sample-title-2xs { @include text-title-2xs; - font-family: $title-font-family; + font-family: var(--title-font-family); font-weight: bold; - - @supports (--css: variables) { - font-family: var(--title-font-family); - } } .docs-scale-sample-title-3xs { @include text-title-3xs; - font-family: $title-font-family; + font-family: var(--title-font-family); font-weight: bold; - - @supports (--css: variables) { - font-family: var(--title-font-family); - } } .docs-scale-sample-body-xl { From 989401a0441afa0d4580d4cfb0fbf7e9b4d27761 Mon Sep 17 00:00:00 2001 From: Kasey Kelly Date: Fri, 25 Jul 2025 10:36:22 -0400 Subject: [PATCH 2/3] refactor away pixel font size mixin --- assets/sass/protocol/components/_button.scss | 10 ++++----- .../protocol/includes/mixins/_typography.scss | 21 ------------------- 2 files changed, 5 insertions(+), 26 deletions(-) diff --git a/assets/sass/protocol/components/_button.scss b/assets/sass/protocol/components/_button.scss index 6ce4aa0e5..84ad5f39f 100644 --- a/assets/sass/protocol/components/_button.scss +++ b/assets/sass/protocol/components/_button.scss @@ -75,7 +75,7 @@ .mzp-c-button, /* stylelint-disable-line no-duplicate-selectors */ a.mzp-c-button { @include border-box; - @include font-size(16px); + font-size: 1rem; // 16px @include transition(background-color 100ms, box-shadow 100ms, color 100ms); border-radius: $border-radius-sm; border: 2px solid transparent; @@ -105,24 +105,24 @@ a.mzp-c-button { // Sizes .mzp-c-button.mzp-t-sm { - @include font-size(12px); + font-size: 0.75rem; // 12px border-radius: $border-radius-xs; padding: 1px $spacing-md; } .mzp-c-button.mzp-t-small, // backwards compatability .mzp-c-button.mzp-t-md { - @include font-size(14px); + font-size: 0.875rem; // 14px padding: $spacing-xs $spacing-lg; } .mzp-c-button.mzp-t-lg { - @include font-size(16px); + font-size: 1rem; // 16px padding: 6px $spacing-lg; } .mzp-c-button.mzp-t-xl { - @include font-size(16px); + font-size: 1rem; // 16px padding: 10px $spacing-lg; } diff --git a/assets/sass/protocol/includes/mixins/_typography.scss b/assets/sass/protocol/includes/mixins/_typography.scss index df4c652c7..a11f3d901 100644 --- a/assets/sass/protocol/includes/mixins/_typography.scss +++ b/assets/sass/protocol/includes/mixins/_typography.scss @@ -26,27 +26,6 @@ font-family: tokens.$font-stack-firefox; } -// * -------------------------------------------------------------------------- */ -// A mixin to output font-size in rems with a px fallback for old browsers. -// Declare sizes in pixels for ease and clarity, the mixin does the math. -// Requires: remify(), pixify() - defined in includes/themes.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 - @else { - @error 'This mixin only accepts sizes in pixels. You declared `font-size(#{$size})`.'; - } -} - // * -------------------------------------------------------------------------- */ // Consistent font sizes. Avoid sizing text arbitrarily and use this // set of predefined sizes. Sizes adapt at common breakpoints, and From 0cdb91e69bf9a71ce5277d8eded130e77fffae9c Mon Sep 17 00:00:00 2001 From: Kasey Kelly Date: Fri, 25 Jul 2025 14:39:41 -0400 Subject: [PATCH 3/3] documentation changes for CSS vars refactor --- CHANGELOG.md | 1 + docs/02-usage/02-framework.md | 25 ------------------------- 2 files changed, 1 insertion(+), 25 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index df3210812..cb4bfc43d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ * **component:** Update breadcrumb styles (#1036) * **assets:** (breaking) Update @mozilla-protocol/assets to 7.0.1 +* * **css:** SASS variable fallbacks have been removed for grid sizing tokens, font families, and colors. (#982) ## Bug Fixes diff --git a/docs/02-usage/02-framework.md b/docs/02-usage/02-framework.md index 459877987..f1e8d076d 100644 --- a/docs/02-usage/02-framework.md +++ b/docs/02-usage/02-framework.md @@ -82,31 +82,6 @@ the Mozilla and Firefox brands. Themes work by declaring a set of CSS Custom Pro on the document's root element (`:root`) in `/includes/_themes.scss` and are retrieved using the `var()` function. The custom properties will be updated depending on what theme is declared. -If you need to support legacy browsers, it is recommended to use the `@supports` feature query -while using the Sass variable as a fall back. - -```scss -.mzp-c-my-component { - background-color: $background-color; - color: $body-text-color; - - .mzp-c-my-component-title { - color: $title-text-color; - font-family: $title-font-family; - } - - @supports (--css: variables) { - background-color: var(--background-color); - color: var(--body-text-color); - - .mzp-c-my-component-title { - color: var(--title-text-color); - font-family: var(--title-font-family); - } - } -} -``` - Use CSS Custom Properties for any themeable properties, especially basic colors for foreground (text) and backgrounds. Note that most colors have an “inverse” counterpart to use in dark style variants. Refer to `/includes/_themes.scss`