From a1a5a0ae0ad012849fcf0318d511af6825473ace Mon Sep 17 00:00:00 2001 From: Nathan Barrett <30009669+nathan-barrett@users.noreply.github.com> Date: Tue, 15 Aug 2023 17:18:49 -0700 Subject: [PATCH] Update to use Protocol v18.0.0 (#13529) --- .../relay/includes/waitlist-base.html | 2 +- media/css/careers/styles.scss | 14 ++++---- media/css/firefox/all/all-unified.scss | 2 +- media/css/firefox/browsers/best-browser.scss | 12 +++++-- .../css/firefox/browsers/windows-64-bit.scss | 12 +++++-- .../firefox/challenge-the-default/index.scss | 2 +- .../family/components/_dad-jokes-banner.scss | 1 + media/css/firefox/family/styles.scss | 2 ++ media/css/firefox/features/safebrowser.scss | 12 +++++-- media/css/firefox/firstrun/nightly.scss | 6 +++- media/css/firefox/welcome10.scss | 12 +++++-- media/css/firefox/welcome11.scss | 18 ++++++++-- media/css/firefox/welcome12.scss | 18 ++++++++-- media/css/firefox/welcome13.scss | 18 ++++++++-- media/css/firefox/welcome15.scss | 18 ++++++++-- .../firefox/whatsnew/whatsnew-115-eu-ctd.scss | 5 +-- .../whatsnew/whatsnew-115-eu-mobile.scss | 5 +-- .../firefox/whatsnew/whatsnew-115-eu-vpn.scss | 3 +- .../firefox/whatsnew/whatsnew-account.scss | 18 ++++++++-- .../firefox/whatsnew/whatsnew-nightly.scss | 12 +++++-- media/css/firefox/whatsnew/whatsnew.scss | 18 ++++++++-- .../foundation/annual-report-2019-2020.scss | 6 +++- media/css/foundation/annual-report-2021.scss | 6 +++- media/css/legal/legal.scss | 4 +-- media/css/mozorg/about-transparency.scss | 15 ++++++-- media/css/mozorg/contribute.scss | 12 +++++-- media/css/mozorg/diversity/diversity.scss | 6 +++- media/css/mozorg/home/home-old.scss | 6 +++- media/css/newsletter/newsletter-recovery.scss | 5 +-- .../css/pocket/components/updates-signup.scss | 2 +- media/css/products/relay/landing.scss | 36 +++++++++++++++---- media/css/products/relay/waitlist.scss | 3 -- .../vpn/components/pricing-basic.scss | 5 +-- media/css/products/vpn/pricing-refresh.scss | 24 ++++++++++--- media/css/protocol/basic-article.scss | 3 -- media/css/protocol/protocol-firefox.scss | 18 ++++++---- media/css/protocol/protocol-mozilla.scss | 24 ++++++++----- package-lock.json | 14 ++++---- package.json | 2 +- 39 files changed, 290 insertions(+), 111 deletions(-) diff --git a/bedrock/products/templates/products/relay/includes/waitlist-base.html b/bedrock/products/templates/products/relay/includes/waitlist-base.html index 434d3eeab7d..e388b2f3f51 100644 --- a/bedrock/products/templates/products/relay/includes/waitlist-base.html +++ b/bedrock/products/templates/products/relay/includes/waitlist-base.html @@ -11,7 +11,7 @@ {% endblock %} {% block sub_navigation %} -{% include 'products/relay/includes/subnav.html' %} + {% include 'products/relay/includes/subnav.html' %} {% endblock %} {% set product_name = product_name|default(ftl('waitlist-premium-name')) %} diff --git a/media/css/careers/styles.scss b/media/css/careers/styles.scss index 48db8cc7ce7..8d72163a50b 100644 --- a/media/css/careers/styles.scss +++ b/media/css/careers/styles.scss @@ -2,8 +2,7 @@ // License, v. 2.0. If a copy of the MPL was not distributed with this // file, You can obtain one at https://mozilla.org/MPL/2.0/. -$image-path: '/media/protocol/img'; - +@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($image-path: '/media/protocol/img'); @use './components/hero-text.scss'; @use './components/hero-video.scss'; @use './components/home.scss'; @@ -14,12 +13,11 @@ $image-path: '/media/protocol/img'; @use './components/position.scss'; @use './components/footer.scss'; -@import '~@mozilla-protocol/core/protocol/css/includes/lib'; -@import '~@mozilla-protocol/core/protocol/css/components/modal'; -@import '~@mozilla-protocol/core/protocol/css/components/video'; -@import '~@mozilla-protocol/core/protocol/css/components/call-out'; -@import '~@mozilla-protocol/core/protocol/css/templates/card-layout'; -@import '../protocol/components/custom-menu-list'; +@use '~@mozilla-protocol/core/protocol/css/components/modal'; +@use '~@mozilla-protocol/core/protocol/css/components/video'; +@use '~@mozilla-protocol/core/protocol/css/components/call-out'; +@use '~@mozilla-protocol/core/protocol/css/templates/card-layout'; +@use '../protocol/components/custom-menu-list'; .c-careers { .c-careers-section-title { diff --git a/media/css/firefox/all/all-unified.scss b/media/css/firefox/all/all-unified.scss index b6f7b791742..f0108736d4f 100644 --- a/media/css/firefox/all/all-unified.scss +++ b/media/css/firefox/all/all-unified.scss @@ -8,7 +8,7 @@ $font-path: '/media/protocol/fonts'; $image-path: '/media/protocol/img'; @import '~@mozilla-protocol/core/protocol/css/includes/lib'; -@import '~@mozilla-protocol/core/protocol/css/includes/forms/lib'; +@import '~@mozilla-protocol/core/protocol/css/includes/forms'; @import '~@mozilla-protocol/core/protocol/css/templates/main-with-sidebar'; @import '~@mozilla-protocol/core/protocol/css/components/modal'; @import '~@mozilla-protocol/core/protocol/css/components/sidebar-menu'; diff --git a/media/css/firefox/browsers/best-browser.scss b/media/css/firefox/browsers/best-browser.scss index c2e9de29b71..706572ba961 100644 --- a/media/css/firefox/browsers/best-browser.scss +++ b/media/css/firefox/browsers/best-browser.scss @@ -13,11 +13,15 @@ $image-path: '/media/protocol/img'; .seo-hero { background: $color-purple-90 url('/media/img/firefox/browsers/best-browser/hero-pattern.png') 55% 60% no-repeat; @include background-size(2500px); - color: get-theme('body-text-color-inverse'); + color: $body-text-color-inverse; text-align: center; min-height: 520px; margin-bottom: $spacing-xl; + @supports (--css: variables) { + color: var(--body-text-color-inverse); + } + .hero-content { padding-top: $layout-xl; padding-bottom: $layout-xl; @@ -30,9 +34,13 @@ $image-path: '/media/protocol/img'; h1 { @include font-base; @include text-title-lg; - color: get-theme('title-text-color-inverse'); + color: $title-text-color-inverse; margin: 0 auto $spacing-2xl; max-width: 580px; + + @supports (--css: variables) { + color: var(--title-text-color-inverse); + } } p { diff --git a/media/css/firefox/browsers/windows-64-bit.scss b/media/css/firefox/browsers/windows-64-bit.scss index 4be0b2f8eb2..d658d858b25 100644 --- a/media/css/firefox/browsers/windows-64-bit.scss +++ b/media/css/firefox/browsers/windows-64-bit.scss @@ -11,11 +11,15 @@ $image-path: '/media/protocol/img'; .c-hero { background: $color-purple-90; - color: get-theme('body-text-color-inverse'); + color: $body-text-color-inverse; text-align: center; min-height: 500px; margin-bottom: $spacing-xl; + @supports (--css: variables) { + color: var(--body-text-color-inverse); + } + .hero-content { padding-top: $layout-xl; @@ -26,9 +30,13 @@ $image-path: '/media/protocol/img'; h1 { @include text-title-lg; - color: get-theme('title-text-color-inverse'); + color: $title-text-color-inverse; margin: 0 auto $spacing-2xl; + @supports (--css: variables) { + color: var(--title-text-color-inverse); + } + @media #{$mq-lg} { width: 400px; } diff --git a/media/css/firefox/challenge-the-default/index.scss b/media/css/firefox/challenge-the-default/index.scss index 44f8a4d5a6f..ae6ec701fdf 100644 --- a/media/css/firefox/challenge-the-default/index.scss +++ b/media/css/firefox/challenge-the-default/index.scss @@ -11,7 +11,7 @@ $font-path: '/media/protocol/fonts'; @import "./compare-table"; @import '~@mozilla-protocol/core/protocol/css/includes/lib'; -@import '~@mozilla-protocol/core/protocol/css/includes/forms/lib'; +@import '~@mozilla-protocol/core/protocol/css/includes/forms'; @import '~@mozilla-protocol/core/protocol/css/components/modal'; @import '~@mozilla-protocol/core/protocol/css/components/notification-bar'; @import '~@mozilla-protocol/core/protocol/css/includes/mixins/details'; diff --git a/media/css/firefox/family/components/_dad-jokes-banner.scss b/media/css/firefox/family/components/_dad-jokes-banner.scss index 915cbf599a9..e87c7fbfb01 100644 --- a/media/css/firefox/family/components/_dad-jokes-banner.scss +++ b/media/css/firefox/family/components/_dad-jokes-banner.scss @@ -3,6 +3,7 @@ // file, You can obtain one at https://mozilla.org/MPL/2.0/. @use '../utils' as f3; +@import '~@mozilla-protocol/core/protocol/css/includes/lib'; @import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark'; .no-js .c-dad-jokes-banner { diff --git a/media/css/firefox/family/styles.scss b/media/css/firefox/family/styles.scss index 75b07836e33..26aebcbafbb 100644 --- a/media/css/firefox/family/styles.scss +++ b/media/css/firefox/family/styles.scss @@ -2,6 +2,8 @@ // License, v. 2.0. If a copy of the MPL was not distributed with this // file, You can obtain one at https://mozilla.org/MPL/2.0/. +@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with($image-path: '/media/protocol/img'); + @use './components/agreement'; @use './components/blurb'; @use './components/browser'; diff --git a/media/css/firefox/features/safebrowser.scss b/media/css/firefox/features/safebrowser.scss index ed363e8d448..1bd07675f21 100644 --- a/media/css/firefox/features/safebrowser.scss +++ b/media/css/firefox/features/safebrowser.scss @@ -11,11 +11,15 @@ $image-path: '/media/protocol/img'; .c-hero { background: $color-purple-90; - color: get-theme('body-text-color-inverse'); + color: $body-text-color-inverse; text-align: center; min-height: 520px; margin-bottom: $spacing-xl; + @supports (--css: variables) { + color: var(--body-text-color-inverse); + } + .hero-content { padding-top: $layout-xl; padding-bottom: $layout-xl; @@ -28,9 +32,13 @@ $image-path: '/media/protocol/img'; h1 { @include font-base; @include text-title-lg; - color: get-theme('title-text-color-inverse'); + color: $title-text-color-inverse; margin: 0 auto $spacing-2xl; max-width: 580px; + + @supports (--css: variables) { + color: var(--title-text-color-inverse); + } } p { diff --git a/media/css/firefox/firstrun/nightly.scss b/media/css/firefox/firstrun/nightly.scss index 37921668577..ab9e6a78812 100644 --- a/media/css/firefox/firstrun/nightly.scss +++ b/media/css/firefox/firstrun/nightly.scss @@ -31,11 +31,15 @@ main { .contribute-title { @include text-title-xs; - color: get-theme('title-text-color-inverse'); + color: $title-text-color-inverse; font-weight: normal; margin: $spacing-lg auto; max-width: 580px; text-align: center; + + @supports (--css: variables) { + color: var(--title-text-color-inverse); + } } .contribute-list { diff --git a/media/css/firefox/welcome10.scss b/media/css/firefox/welcome10.scss index afb6ab0f23c..9ce40d2a772 100644 --- a/media/css/firefox/welcome10.scss +++ b/media/css/firefox/welcome10.scss @@ -31,19 +31,27 @@ $image-path: '/media/protocol/img'; .c-pre-title { @include text-title-2xs; - color: get-theme('title-text-color'); + color: $title-text-color; font-weight: bold; margin: 0 auto $spacing-xl; max-width: 750px; + + @supports (--css: variables) { + color: var(--title-text-color); + } } .c-main-title { @include text-title-md; - color: get-theme('title-text-color'); + color: $title-text-color; max-width: 750px; margin-left: auto; margin-right: auto; + @supports (--css: variables) { + color: var(--title-text-color); + } + strong { color: $color-violet-50; } diff --git a/media/css/firefox/welcome11.scss b/media/css/firefox/welcome11.scss index 59589157727..9de8cace82b 100644 --- a/media/css/firefox/welcome11.scss +++ b/media/css/firefox/welcome11.scss @@ -31,10 +31,14 @@ $image-path: '/media/protocol/img'; .c-main-title { @include text-title-md; - color: get-theme('title-text-color'); + color: $title-text-color; margin-left: auto; margin-right: auto; + @supports (--css: variables) { + color: var(--title-text-color); + } + strong { color: $color-violet-50; } @@ -89,12 +93,20 @@ $image-path: '/media/protocol/img'; #outer-wrapper { background: $color-dark-gray-60; - color: get-theme('title-text-color-inverse'); + color: $title-text-color-inverse; + + @supports (--css: variables) { + color: var(--title-text-color-inverse); + } } .c-main-title, .mzp-c-picto-title { - color: get-theme('title-text-color-inverse'); + color: $title-text-color-inverse; + + @supports (--css: variables) { + color: var(--title-text-color-inverse); + } } .c-main-image { diff --git a/media/css/firefox/welcome12.scss b/media/css/firefox/welcome12.scss index 9ca406221e6..f5fbab0d883 100644 --- a/media/css/firefox/welcome12.scss +++ b/media/css/firefox/welcome12.scss @@ -31,10 +31,14 @@ $image-path: '/media/protocol/img'; .c-main-title { @include text-title-md; - color: get-theme('title-text-color'); + color: $title-text-color; margin-left: auto; margin-right: auto; + @supports (--css: variables) { + color: var(--title-text-color); + } + strong { color: $color-violet-50; } @@ -100,12 +104,20 @@ $image-path: '/media/protocol/img'; #outer-wrapper { background: $color-dark-gray-60; - color: get-theme('title-text-color-inverse'); + color: $title-text-color-inverse; + + @supports (--css: variables) { + color: var(--title-text-color-inverse); + } } .c-main-title, .mzp-c-picto-title { - color: get-theme('title-text-color-inverse'); + color: $title-text-color-inverse; + + @supports (--css: variables) { + color: var(--title-text-color-inverse); + } } .c-main-image { diff --git a/media/css/firefox/welcome13.scss b/media/css/firefox/welcome13.scss index 9ca406221e6..f5fbab0d883 100644 --- a/media/css/firefox/welcome13.scss +++ b/media/css/firefox/welcome13.scss @@ -31,10 +31,14 @@ $image-path: '/media/protocol/img'; .c-main-title { @include text-title-md; - color: get-theme('title-text-color'); + color: $title-text-color; margin-left: auto; margin-right: auto; + @supports (--css: variables) { + color: var(--title-text-color); + } + strong { color: $color-violet-50; } @@ -100,12 +104,20 @@ $image-path: '/media/protocol/img'; #outer-wrapper { background: $color-dark-gray-60; - color: get-theme('title-text-color-inverse'); + color: $title-text-color-inverse; + + @supports (--css: variables) { + color: var(--title-text-color-inverse); + } } .c-main-title, .mzp-c-picto-title { - color: get-theme('title-text-color-inverse'); + color: $title-text-color-inverse; + + @supports (--css: variables) { + color: var(--title-text-color-inverse); + } } .c-main-image { diff --git a/media/css/firefox/welcome15.scss b/media/css/firefox/welcome15.scss index 2ae7589edb5..08c70ef16be 100644 --- a/media/css/firefox/welcome15.scss +++ b/media/css/firefox/welcome15.scss @@ -32,7 +32,11 @@ $image-path: '/media/protocol/img'; .c-main-title { @include text-title-md; - color: get-theme('title-text-color'); + color: $title-text-color; + + @supports (--css: variables) { + color: var(--title-text-color); + } } .c-main-tagline { @@ -80,12 +84,20 @@ $image-path: '/media/protocol/img'; @media (prefers-color-scheme: dark) { #outer-wrapper { background: $color-dark-gray-60; - color: get-theme('title-text-color-inverse'); + color: $title-text-color-inverse; + + @supports (--css: variables) { + color: var(--title-text-color-inverse); + } } .c-main-title, .mzp-c-picto-title { - color: get-theme('title-text-color-inverse'); + color: $title-text-color-inverse; + + @supports (--css: variables) { + color: var(--title-text-color-inverse); + } } .c-main-logo { diff --git a/media/css/firefox/whatsnew/whatsnew-115-eu-ctd.scss b/media/css/firefox/whatsnew/whatsnew-115-eu-ctd.scss index 3a5b23b2440..d1645aa5430 100644 --- a/media/css/firefox/whatsnew/whatsnew-115-eu-ctd.scss +++ b/media/css/firefox/whatsnew/whatsnew-115-eu-ctd.scss @@ -2,11 +2,8 @@ // License, v. 2.0. If a copy of the MPL was not distributed with this // file, You can obtain one at https://mozilla.org/MPL/2.0/. -$font-path: '/media/protocol/fonts'; -$image-path: '/media/protocol/img'; - +@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($image-path: '/media/protocol/img', $font-path: '/media/protocol/fonts'); @import '~@mozilla-protocol/core/protocol/css/components/notification-bar'; -@import '~@mozilla-protocol/core/protocol/css/includes/lib'; @import '~@mozilla-protocol/core/protocol/css/templates/multi-column'; @import 'includes/base'; @import 'includes/dark-mode'; diff --git a/media/css/firefox/whatsnew/whatsnew-115-eu-mobile.scss b/media/css/firefox/whatsnew/whatsnew-115-eu-mobile.scss index 6722f150c84..947d57c4eb0 100644 --- a/media/css/firefox/whatsnew/whatsnew-115-eu-mobile.scss +++ b/media/css/firefox/whatsnew/whatsnew-115-eu-mobile.scss @@ -2,11 +2,8 @@ // License, v. 2.0. If a copy of the MPL was not distributed with this // file, You can obtain one at https://mozilla.org/MPL/2.0/. -$font-path: '/media/protocol/fonts'; -$image-path: '/media/protocol/img'; - +@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($image-path: '/media/protocol/img'); @import '~@mozilla-protocol/core/protocol/css/components/notification-bar'; -@import '~@mozilla-protocol/core/protocol/css/includes/lib'; @import 'includes/base'; @import 'includes/dark-mode'; diff --git a/media/css/firefox/whatsnew/whatsnew-115-eu-vpn.scss b/media/css/firefox/whatsnew/whatsnew-115-eu-vpn.scss index 1712de4882c..f12445e33c0 100644 --- a/media/css/firefox/whatsnew/whatsnew-115-eu-vpn.scss +++ b/media/css/firefox/whatsnew/whatsnew-115-eu-vpn.scss @@ -2,11 +2,10 @@ // License, v. 2.0. If a copy of the MPL was not distributed with this // file, You can obtain one at https://mozilla.org/MPL/2.0/. -$font-path: '/media/protocol/fonts'; $image-path: '/media/protocol/img'; -@import '~@mozilla-protocol/core/protocol/css/components/notification-bar'; @import '~@mozilla-protocol/core/protocol/css/includes/lib'; +@import '~@mozilla-protocol/core/protocol/css/components/notification-bar'; @import 'includes/base'; @import 'includes/dark-mode'; diff --git a/media/css/firefox/whatsnew/whatsnew-account.scss b/media/css/firefox/whatsnew/whatsnew-account.scss index d6477beb040..122735e8f79 100644 --- a/media/css/firefox/whatsnew/whatsnew-account.scss +++ b/media/css/firefox/whatsnew/whatsnew-account.scss @@ -31,7 +31,11 @@ $image-path: '/media/protocol/img'; .wnp-main-title { @include text-title-md; - color: get-theme('title-text-color'); + color: $title-text-color; + + @supports (--css: variables) { + color: var(--title-text-color); + } } .wnp-main-tagline { @@ -68,12 +72,20 @@ $image-path: '/media/protocol/img'; color: $color-white; h2.thank-you { - color: get-theme('title-text-color-inverse'); + color: $title-text-color-inverse; + + @supports (--css: variables) { + color: var(--title-text-color-inverse); + } } } .wnp-main-title { - color: get-theme('title-text-color-inverse'); + color: $title-text-color-inverse; + + @supports (--css: variables) { + color: var(--title-text-color-inverse); + } strong { color: $color-violet-20; diff --git a/media/css/firefox/whatsnew/whatsnew-nightly.scss b/media/css/firefox/whatsnew/whatsnew-nightly.scss index 3dd3b54c80b..34d289e53cc 100644 --- a/media/css/firefox/whatsnew/whatsnew-nightly.scss +++ b/media/css/firefox/whatsnew/whatsnew-nightly.scss @@ -38,11 +38,15 @@ body { .mzp-c-emphasis-box { @include border-box; - color: get-theme('body-text-color'); + color: $body-text-color; margin: 0 auto $layout-sm; max-width: $content-md - ($layout-md * 2); padding: $spacing-xl; + @supports (--css: variables) { + color: var(--body-text-color); + } + a:link, a:visited { color: $color-ink-80; @@ -59,7 +63,11 @@ body { .c-emphasis-box-title { @include text-title-sm; - color: get-theme('title-text-color'); + color: $title-text-color; text-align: center; + + @supports (--css: variables) { + color: var(--title-text-color); + } } } diff --git a/media/css/firefox/whatsnew/whatsnew.scss b/media/css/firefox/whatsnew/whatsnew.scss index 44ee2288414..680abd97098 100644 --- a/media/css/firefox/whatsnew/whatsnew.scss +++ b/media/css/firefox/whatsnew/whatsnew.scss @@ -31,7 +31,11 @@ $image-path: '/media/protocol/img'; .wnp-main-title { @include text-title-md; - color: get-theme('title-text-color'); + color: $title-text-color; + + @supports (--css: variables) { + color: var(--title-text-color); + } } .wnp-main-tagline { @@ -51,14 +55,22 @@ $image-path: '/media/protocol/img'; @media (prefers-color-scheme: dark) { .wnp-main-title, .c-picto-block .c-picto-block-title { - color: get-theme('title-text-color-inverse'); + color: $title-text-color-inverse; + + @supports (--css: variables) { + color: var(--title-text-color-inverse); + } } .send-to-device { color: $color-white; h2.thank-you { - color: get-theme('title-text-color-inverse'); + color: $title-text-color-inverse; + + @supports (--css: variables) { + color: var(--title-text-color-inverse); + } } } } diff --git a/media/css/foundation/annual-report-2019-2020.scss b/media/css/foundation/annual-report-2019-2020.scss index 1beb6acaa95..0a34b124111 100644 --- a/media/css/foundation/annual-report-2019-2020.scss +++ b/media/css/foundation/annual-report-2019-2020.scss @@ -366,7 +366,11 @@ $image-path: '/media/protocol/img'; &:hover, &:focus, &:active { - color: get-theme('link-color-hover'); + color: $link-color-hover; + + @supports (--css: variables) { + color: var(--link-color-hover); + } } } diff --git a/media/css/foundation/annual-report-2021.scss b/media/css/foundation/annual-report-2021.scss index 8b4d9965582..e8717f035ce 100644 --- a/media/css/foundation/annual-report-2021.scss +++ b/media/css/foundation/annual-report-2021.scss @@ -179,7 +179,11 @@ main { &:hover, &:focus, &:active { - color: get-theme('link-color-hover'); + color: $link-color-hover; + + @supports (--css: variables) { + color: var(--link-color-hover); + } } } diff --git a/media/css/legal/legal.scss b/media/css/legal/legal.scss index 8e0239fdda4..5f059ec68f6 100644 --- a/media/css/legal/legal.scss +++ b/media/css/legal/legal.scss @@ -2,9 +2,7 @@ // License, v. 2.0. If a copy of the MPL was not distributed with this // file, You can obtain one at https://mozilla.org/MPL/2.0/. -$font-path: '/media/protocol/fonts'; -$image-path: '/media/protocol/img'; - +@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($font-path: '/media/protocol/fonts', $image-path: '/media/protocol/img'); @import '~@mozilla-protocol/core/protocol/css/components/notification-bar'; @import '~@mozilla-protocol/core/protocol/css/components/forms/form'; @import '~@mozilla-protocol/core/protocol/css/components/forms/field'; diff --git a/media/css/mozorg/about-transparency.scss b/media/css/mozorg/about-transparency.scss index d2d2e03880c..50770905017 100644 --- a/media/css/mozorg/about-transparency.scss +++ b/media/css/mozorg/about-transparency.scss @@ -69,11 +69,11 @@ dd { .c-page-header { @include text-title-xs; - background: get-theme('background-color-inverse'); - color: get-theme('body-text-color-inverse'); + background: $background-color-inverse; + color: $body-text-color-inverse; h1 { - color: get-theme('title-text-color-inverse'); + color: $title-text-color-inverse; } span { @@ -81,6 +81,15 @@ dd { display: block; margin-top: $spacing-md; } + + @supports (--css: variables) { + background: var(--background-color-inverse); + color: var(--body-text-color-inverse); + + h1 { + color: var(--title-text-color-inverse); + } + } } .mzp-c-article { diff --git a/media/css/mozorg/contribute.scss b/media/css/mozorg/contribute.scss index c3d374eabe8..c60caa96287 100644 --- a/media/css/mozorg/contribute.scss +++ b/media/css/mozorg/contribute.scss @@ -236,7 +236,11 @@ $image-path: '/media/protocol/img'; .contribute-banner-gethelp { background: $color-ink-80 url('/media/img/contribute/contribute-gethelp-banner-bg.jpg') center top no-repeat; background-size: cover; - color: get-theme('body-text-color-inverse'); + color: $body-text-color-inverse; + + @supports (--css: variables) { + color: var(--body-text-color-inverse); + } @media #{$mq-lg} { margin-bottom: $layout-lg; @@ -245,9 +249,13 @@ $image-path: '/media/protocol/img'; .contribute-banner-gethelp-title { @include font-firefox; @include font-size(24px); - color: get-theme('title-text-color-inverse'); + color: $title-text-color-inverse; position: relative; + @supports (--css: variables) { + color: var(--title-text-color-inverse); + } + @media #{$mq-lg} { @include font-size(40px); } diff --git a/media/css/mozorg/diversity/diversity.scss b/media/css/mozorg/diversity/diversity.scss index e23c69937da..019f09603d6 100644 --- a/media/css/mozorg/diversity/diversity.scss +++ b/media/css/mozorg/diversity/diversity.scss @@ -225,7 +225,11 @@ $image-path: '/media/protocol/img'; &:hover, &:focus, &:active { - color: get-theme('link-color-hover'); + color: $link-color-hover; + + @supports (--css: variables) { + color: var(--link-color-hover); + } } } diff --git a/media/css/mozorg/home/home-old.scss b/media/css/mozorg/home/home-old.scss index fe785f1f823..18fb545baec 100644 --- a/media/css/mozorg/home/home-old.scss +++ b/media/css/mozorg/home/home-old.scss @@ -18,7 +18,11 @@ $image-path: '/media/protocol/img'; // * -------------------------------------------------------------------------- */ // Billboard .mzp-c-billboard { - margin-top: get-theme('v-grid-xl'); + margin-top: $v-grid-xl; + + @supports (--css: variables) { + margin-top: var(--v-grid-xl); + } @media #{$mq-md} { margin-top: 0; diff --git a/media/css/newsletter/newsletter-recovery.scss b/media/css/newsletter/newsletter-recovery.scss index faa6691c19e..762c9cb4b8b 100644 --- a/media/css/newsletter/newsletter-recovery.scss +++ b/media/css/newsletter/newsletter-recovery.scss @@ -2,14 +2,11 @@ // License, v. 2.0. If a copy of the MPL was not distributed with this // file, You can obtain one at https://mozilla.org/MPL/2.0/. -$font-path: '/media/protocol/fonts'; -$image-path: '/media/protocol/img'; - +@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($font-path: '/media/protocol/fonts', $image-path: '/media/protocol/img'); @import '~@mozilla-protocol/core/protocol/css/components/forms/button-container'; @import '~@mozilla-protocol/core/protocol/css/components/forms/field'; @import '~@mozilla-protocol/core/protocol/css/components/forms/form'; @import '~@mozilla-protocol/core/protocol/css/components/notification-bar'; -@import '~@mozilla-protocol/core/protocol/css/includes/lib'; /* stylelint-disable declaration-no-important */ diff --git a/media/css/pocket/components/updates-signup.scss b/media/css/pocket/components/updates-signup.scss index 68eb4c34f83..9056a4afa9d 100644 --- a/media/css/pocket/components/updates-signup.scss +++ b/media/css/pocket/components/updates-signup.scss @@ -10,7 +10,7 @@ @import '../includes/footer'; @import '~@mozilla-protocol/core/protocol/css/includes/lib'; -@import '~@mozilla-protocol/core/protocol/css/includes/forms/lib'; +@import '~@mozilla-protocol/core/protocol/css/includes/forms'; @import '~@mozilla-protocol/core/protocol/css/components/forms/form'; @import '~@mozilla-protocol/core/protocol/css/base/elements/forms'; @import '~@mozilla-protocol/core/protocol/css/components/button'; diff --git a/media/css/products/relay/landing.scss b/media/css/products/relay/landing.scss index e04ea86f0c5..35bfc03d6a1 100644 --- a/media/css/products/relay/landing.scss +++ b/media/css/products/relay/landing.scss @@ -121,15 +121,27 @@ $brand-theme: 'firefox'; .c-pricing-intro { margin: 0 auto; max-width: $content-md; - padding-bottom: get-theme('v-grid-xs'); + padding-bottom: $v-grid-xs; text-align: center; @media #{$mq-md} { - padding-bottom: get-theme('v-grid-md'); + padding-bottom: $v-grid-md; } @media #{$mq-xl} { - padding-bottom: get-theme('v-grid-xl'); + padding-bottom: $v-grid-xl; + } + + @supports (--css: variables) { + color: var(--v-grid-xs); + + @media #{$mq-md} { + padding-bottom: var(--v-grid-md); + } + + @media #{$mq-xl} { + padding-bottom: var(--v-grid-xl); + } } } @@ -153,14 +165,26 @@ $brand-theme: 'firefox'; } .c-features-premium { - padding: get-theme('v-grid-xs') get-theme('h-grid-xs'); + padding: $v-grid-xs $h-grid-xs; @media #{$mq-md} { - padding: get-theme('v-grid-md') get-theme('h-grid-md'); + padding: $v-grid-md $h-grid-md; } @media #{$mq-xl} { - padding: get-theme('v-grid-xl') get-theme('h-grid-xl'); + padding: $v-grid-xl $h-grid-xl; + } + + @supports (--css: variables) { + 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); + } } } diff --git a/media/css/products/relay/waitlist.scss b/media/css/products/relay/waitlist.scss index eb18aa87668..0566da64b49 100644 --- a/media/css/products/relay/waitlist.scss +++ b/media/css/products/relay/waitlist.scss @@ -2,9 +2,6 @@ // License, v. 2.0. If a copy of the MPL was not distributed with this // file, You can obtain one at https://mozilla.org/MPL/2.0/. -$font-path: '/media/protocol/fonts'; -$image-path: '/media/protocol/img'; - @import '~@mozilla-protocol/core/protocol/css/components/forms/form'; @import '~@mozilla-protocol/core/protocol/css/components/forms/field'; @import '@mozilla-protocol/core/protocol/css/components/newsletter-form'; diff --git a/media/css/products/vpn/components/pricing-basic.scss b/media/css/products/vpn/components/pricing-basic.scss index 4e0bf549528..a946ae42853 100644 --- a/media/css/products/vpn/components/pricing-basic.scss +++ b/media/css/products/vpn/components/pricing-basic.scss @@ -2,12 +2,9 @@ // License, v. 2.0. If a copy of the MPL was not distributed with this // file, You can obtain one at https://mozilla.org/MPL/2.0/. -$font-path: '/media/protocol/fonts'; -$image-path: '/media/protocol/img'; - +@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($image-path: '/media/protocol/img', $font-path: '/media/protocol/fonts'); @import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark'; @import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-vpn'; -@import '~@mozilla-protocol/core/protocol/css/includes/lib'; @import '../includes/lib'; // * -------------------------------------------------------------------------- */ diff --git a/media/css/products/vpn/pricing-refresh.scss b/media/css/products/vpn/pricing-refresh.scss index dc90996919e..0aa73f89ab2 100644 --- a/media/css/products/vpn/pricing-refresh.scss +++ b/media/css/products/vpn/pricing-refresh.scss @@ -105,17 +105,33 @@ $image-path: '/media/protocol/img'; .c-pricing-block-horizontal { @media #{$mq-lg} { .mzp-l-columns { - grid-gap: get-theme('v-grid-sm') get-theme('h-grid-sm'); - gap: get-theme('v-grid-sm') get-theme('h-grid-sm'); + grid-gap: $v-grid-sm $h-grid-sm; + gap: $v-grid-sm $h-grid-sm; } } @media #{$mq-xl} { .mzp-l-columns { - grid-gap: get-theme('v-grid-lg') get-theme('h-grid-xl'); - gap: get-theme('v-grid-lg') get-theme('h-grid-xl'); + grid-gap: $v-grid-lg $h-grid-xl; + gap: $v-grid-lg $h-grid-xl; } } + + @supports (--css: variables) { + @media #{$mq-lg} { + .mzp-l-columns { + grid-gap: var(--v-grid-sm) var(--h-grid-sm); + gap: var(--v-grid-sm) var(--h-grid-sm); + } + } + + @media #{$mq-xl} { + .mzp-l-columns { + grid-gap: var(--v-grid-lg) var(--h-grid-xl); + gap: var(--v-grid-lg) var(--h-grid-xl); + } + } + } } // * -------------------------------------------------------------------------- */ diff --git a/media/css/protocol/basic-article.scss b/media/css/protocol/basic-article.scss index e5c8614ae62..e58292e8361 100644 --- a/media/css/protocol/basic-article.scss +++ b/media/css/protocol/basic-article.scss @@ -2,9 +2,6 @@ // License, v. 2.0. If a copy of the MPL was not distributed with this // file, You can obtain one at https://mozilla.org/MPL/2.0/. -$font-path: '/media/protocol/fonts'; -$image-path: '/media/protocol/img'; - @import '~@mozilla-protocol/core/protocol/css/components/article'; @import '~@mozilla-protocol/core/protocol/css/components/sidebar-menu'; @import '~@mozilla-protocol/core/protocol/css/includes/mixins/details'; diff --git a/media/css/protocol/protocol-firefox.scss b/media/css/protocol/protocol-firefox.scss index 12c2be5d9a5..49aef27086b 100644 --- a/media/css/protocol/protocol-firefox.scss +++ b/media/css/protocol/protocol-firefox.scss @@ -2,14 +2,14 @@ // License, v. 2.0. If a copy of the MPL was not distributed with this // file, You can obtain one at https://mozilla.org/MPL/2.0/. -$brand-theme: 'firefox'; -$type-scale: 'standard'; -$font-path: '/media/protocol/fonts'; -$image-path: '/media/protocol/img'; // These are general styles for elements/components that occur on every page. // Individual pages may include additional component styles as needed. +@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($brand-theme: 'firefox', $type-scale: 'standard', $font-path: '/media/protocol/fonts', $image-path: '/media/protocol/img'); +@use '~@mozilla-protocol/core/protocol/css/includes/themes'; +@use '~@mozilla-protocol/core/protocol/css/components/forms/form'; + // Fonts @import '~@mozilla-protocol/core/protocol/css/includes/fonts/inter'; @import '~@mozilla-protocol/core/protocol/css/includes/fonts/metropolis'; @@ -49,7 +49,11 @@ $image-path: '/media/protocol/img'; } .mzp-c-newsletter-details legend { - font-family: get-theme('body-font-family'); + font-family: $body-font-family; + + @supports (--css:variables) { + font-family: var(--body-font-family); + } } #newsletter-submit + .mzp-c-fieldnote { @@ -61,8 +65,8 @@ $image-path: '/media/protocol/img'; .errorlist, .error-msg { @include light-links; - background-color: $form-red; - border-radius: $field-border-radius; + background-color: form.$form-red; + border-radius: form.$field-border-radius; color: $color-white; padding: $spacing-sm; margin-bottom: $spacing-xl; diff --git a/media/css/protocol/protocol-mozilla.scss b/media/css/protocol/protocol-mozilla.scss index 00f9462ba97..959a7b6ed2e 100644 --- a/media/css/protocol/protocol-mozilla.scss +++ b/media/css/protocol/protocol-mozilla.scss @@ -2,13 +2,14 @@ // License, v. 2.0. If a copy of the MPL was not distributed with this // file, You can obtain one at https://mozilla.org/MPL/2.0/. -$brand-theme: 'mozilla'; -$type-scale: 'standard'; -$font-path: '/media/protocol/fonts'; -$image-path: '/media/protocol/img'; + + // These are general styles for elements/components that occur on every page. // Individual pages may include additional component styles as needed. +@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($brand-theme: 'mozilla', $type-scale: 'standard', $font-path: '/media/protocol/fonts', $image-path: '/media/protocol/img'); +@use '~@mozilla-protocol/core/protocol/css/includes/themes'; +@use '~@mozilla-protocol/core/protocol/css/components/forms/form'; // Fonts @import '~@mozilla-protocol/core/protocol/css/includes/fonts/inter'; @@ -28,6 +29,7 @@ $image-path: '/media/protocol/img'; @import '~@mozilla-protocol/core/protocol/css/components/button'; @import '~@mozilla-protocol/core/protocol/css/components/footer'; @import '~@mozilla-protocol/core/protocol/css/components/language-switcher'; + @import 'components/download-button'; // Custom global components for nav and footer @@ -50,7 +52,11 @@ $image-path: '/media/protocol/img'; } .mzp-c-newsletter-details legend { - font-family: get-theme('body-font-family'); + font-family: $body-font-family; + + @supports (--css: variables) { + font-family: var(--body-font-family); + } } #newsletter-submit + .mzp-c-fieldnote { @@ -61,8 +67,8 @@ $image-path: '/media/protocol/img'; // style classes automatically added by python to match Protocol form error styles .errorlist { @include white-links; - background-color: $form-red; - border-radius: $field-border-radius; + background-color: form.$form-red; + border-radius: form.$field-border-radius; color: $color-white; padding: $spacing-sm; margin-bottom: $spacing-xl; @@ -70,8 +76,8 @@ $image-path: '/media/protocol/img'; .error-msg { @include light-links; - background-color: $form-red; - border-radius: $field-border-radius; + background-color: form.$form-red; + border-radius: form.$field-border-radius; color: $color-white; padding: $spacing-sm; margin-bottom: $spacing-xl; diff --git a/package-lock.json b/package-lock.json index 93a4d294e09..1b8b6e62145 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "dependencies": { "@babel/core": "^7.22.9", "@babel/preset-env": "^7.22.9", - "@mozilla-protocol/core": "^17.0.1", + "@mozilla-protocol/core": "^18.0.0", "@mozilla/glean": "^2.0.0", "@mozmeao/cookie-helper": "^1.1.0", "@mozmeao/dnt-helper": "^1.0.0", @@ -2051,9 +2051,9 @@ "dev": true }, "node_modules/@mozilla-protocol/core": { - "version": "17.0.1", - "resolved": "https://registry.npmjs.org/@mozilla-protocol/core/-/core-17.0.1.tgz", - "integrity": "sha512-xN6DNJ1P93lqrzhEHhx6J8HvIVpWDBLNOO4cqlHWH6HNPOoD/vsfygCwg6UJ+pkWBAwQLbS10xgB3Y2+kCP82Q==" + "version": "18.0.0", + "resolved": "https://registry.npmjs.org/@mozilla-protocol/core/-/core-18.0.0.tgz", + "integrity": "sha512-jHZQxmr4Ogqg4avz5tznPvUNZvcFgddOPj+KhH14G9QzOUfbrfErdNtocRaa4H30U4vDbL5LiKmrWcF+RXNS3g==" }, "node_modules/@mozilla/glean": { "version": "2.0.0", @@ -11931,9 +11931,9 @@ "dev": true }, "@mozilla-protocol/core": { - "version": "17.0.1", - "resolved": "https://registry.npmjs.org/@mozilla-protocol/core/-/core-17.0.1.tgz", - "integrity": "sha512-xN6DNJ1P93lqrzhEHhx6J8HvIVpWDBLNOO4cqlHWH6HNPOoD/vsfygCwg6UJ+pkWBAwQLbS10xgB3Y2+kCP82Q==" + "version": "18.0.0", + "resolved": "https://registry.npmjs.org/@mozilla-protocol/core/-/core-18.0.0.tgz", + "integrity": "sha512-jHZQxmr4Ogqg4avz5tznPvUNZvcFgddOPj+KhH14G9QzOUfbrfErdNtocRaa4H30U4vDbL5LiKmrWcF+RXNS3g==" }, "@mozilla/glean": { "version": "2.0.0", diff --git a/package.json b/package.json index 7488dea5f7d..20046af66ce 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "dependencies": { "@babel/core": "^7.22.9", "@babel/preset-env": "^7.22.9", - "@mozilla-protocol/core": "^17.0.1", + "@mozilla-protocol/core": "^18.0.0", "@mozilla/glean": "^2.0.0", "@mozmeao/cookie-helper": "^1.1.0", "@mozmeao/dnt-helper": "^1.0.0",