From 5ec573b9130ad05f6d1f83d1e0c3ef1e78f4d9f4 Mon Sep 17 00:00:00 2001 From: John Whitlock Date: Mon, 4 Nov 2024 15:14:51 -0600 Subject: [PATCH 01/13] Add at-content to mozilla protocol text mixins Copy some of the text-* mixins to a new file /frontend/src/styles/typography.scss Modify the mixins to accept a @content parameter. Use these new mixins to generate the same CSS without the SCSS deprecation warning for mixed declarations: https://sass-lang.com/documentation/breaking-changes/mixed-decls/ --- frontend/next.config.js | 1 - .../EmailForwardingModal.module.scss | 16 +- .../dashboard/FreeOnboarding.module.scss | 27 +- .../dashboard/Onboarding.module.scss | 8 +- .../dashboard/PremiumOnboarding.module.scss | 27 +- .../dashboard/SubdomainPicker.module.scss | 6 +- .../aliases/BlockLevelSlider.module.scss | 8 +- .../subdomain/ConfirmationModal.module.scss | 12 +- .../landing/BundleBanner.module.scss | 15 +- .../landing/HighlightedFeatures.module.scss | 8 +- .../components/landing/PlanMatrix.module.scss | 31 ++- .../components/landing/Reviews.module.scss | 15 +- .../navigation/MobileNavigation.module.scss | 8 +- .../layout/navigation/UserMenu.module.scss | 8 +- .../whatsnew/WhatsNewContent.module.scss | 8 +- .../dashboard/PhoneWelcomeView.module.scss | 8 +- .../onboarding/PurchasePhonesPlan.module.scss | 17 +- .../onboarding/RealPhoneSetup.module.scss | 17 +- .../onboarding/RelayNumberPicker.module.scss | 17 +- .../waitlist/WaitlistPage.module.scss | 10 +- .../src/pages/accounts/profile.module.scss | 26 +- .../contains-tracker-warning.module.scss | 12 +- frontend/src/pages/faq.module.scss | 17 +- frontend/src/pages/index.module.scss | 31 ++- frontend/src/pages/premium.module.scss | 38 +-- frontend/src/pages/tracker-report.module.scss | 26 +- frontend/src/styles/typography.scss | 240 ++++++++++++++++++ 27 files changed, 481 insertions(+), 176 deletions(-) create mode 100644 frontend/src/styles/typography.scss diff --git a/frontend/next.config.js b/frontend/next.config.js index e35c796529..b131931502 100644 --- a/frontend/next.config.js +++ b/frontend/next.config.js @@ -120,7 +120,6 @@ module.exports = { silenceDeprecations: [ // Issues we can fix in our code "import", // https://sass-lang.com/documentation/breaking-changes/import/ - "mixed-decls", // https://sass-lang.com/d/mixed-decls // Upstream issues "legacy-js-api", // vercel/next.js issue #71638 diff --git a/frontend/src/components/dashboard/EmailForwardingModal.module.scss b/frontend/src/components/dashboard/EmailForwardingModal.module.scss index 086bc1e8cd..f34a5b6813 100644 --- a/frontend/src/components/dashboard/EmailForwardingModal.module.scss +++ b/frontend/src/components/dashboard/EmailForwardingModal.module.scss @@ -1,5 +1,6 @@ @import "../../styles/tokens"; @import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@import "../../styles/typography"; .underlay { position: fixed; @@ -64,13 +65,14 @@ } .headline { - @include text-title-xs; - display: flex; - align-items: center; - justify-content: center; - padding: $spacing-sm 0; - gap: $spacing-sm; - font-weight: 100; + @include text-title-xs { + display: flex; + align-items: center; + justify-content: center; + padding: $spacing-sm 0; + gap: $spacing-sm; + font-weight: 100; + } } .modal-title { diff --git a/frontend/src/components/dashboard/FreeOnboarding.module.scss b/frontend/src/components/dashboard/FreeOnboarding.module.scss index 234d2ec4aa..f18bca1786 100644 --- a/frontend/src/components/dashboard/FreeOnboarding.module.scss +++ b/frontend/src/components/dashboard/FreeOnboarding.module.scss @@ -1,6 +1,7 @@ @import "../../styles/tokens"; @import "~@mozilla-protocol/core/protocol/css/includes/lib"; @import "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; +@import "../../styles/typography"; .onboarding { display: flex; @@ -176,14 +177,15 @@ .domain-example { @include font-firefox; - @include text-title-2xs; - color: $color-light-gray-90; - display: inline-block; - padding: $spacing-md 0; - text-overflow: ellipsis; - white-space: nowrap; - overflow-x: hidden; - max-width: $content-xs; + @include text-title-2xs { + color: $color-light-gray-90; + display: inline-block; + padding: $spacing-md 0; + text-overflow: ellipsis; + white-space: nowrap; + overflow-x: hidden; + max-width: $content-xs; + } @media screen and #{$mq-md} { max-width: 100%; @@ -273,10 +275,11 @@ gap: $spacing-xs; h1 { - @include text-title-sm; - font-weight: 700; - font-family: $font-stack-firefox; - color: $color-purple-50; + @include text-title-sm { + font-weight: 700; + font-family: $font-stack-firefox; + color: $color-purple-50; + } } p { diff --git a/frontend/src/components/dashboard/Onboarding.module.scss b/frontend/src/components/dashboard/Onboarding.module.scss index 4061c54ab8..f9c694408c 100644 --- a/frontend/src/components/dashboard/Onboarding.module.scss +++ b/frontend/src/components/dashboard/Onboarding.module.scss @@ -1,5 +1,6 @@ @import "../../styles/tokens"; @import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@import "../../styles/typography"; .wrapper { padding: $spacing-lg; @@ -7,9 +8,10 @@ border: 1px solid $color-light-gray-40; h2 { - @include text-title-2xs; - @include font-firefox; - padding: $spacing-sm 0; + @include text-title-2xs { + @include font-firefox; + padding: $spacing-sm 0; + } } .steps { diff --git a/frontend/src/components/dashboard/PremiumOnboarding.module.scss b/frontend/src/components/dashboard/PremiumOnboarding.module.scss index 84a0bf99e6..18621953d9 100644 --- a/frontend/src/components/dashboard/PremiumOnboarding.module.scss +++ b/frontend/src/components/dashboard/PremiumOnboarding.module.scss @@ -1,6 +1,7 @@ @import "../../styles/tokens"; @import "~@mozilla-protocol/core/protocol/css/includes/lib"; @import "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; +@import "../../styles/typography"; .onboarding { display: flex; @@ -44,10 +45,11 @@ } h2 { - @include text-title-sm; - font-family: $font-stack-firefox; - color: $color-purple-50; - text-align: center; + @include text-title-sm { + font-family: $font-stack-firefox; + color: $color-purple-50; + text-align: center; + } } .lead { @@ -133,14 +135,15 @@ .domain-example { @include font-firefox; - @include text-title-2xs; - color: $color-light-gray-90; - display: inline-block; - padding: $spacing-md 0; - text-overflow: ellipsis; - white-space: nowrap; - overflow-x: hidden; - max-width: $content-xs; + @include text-title-2xs { + color: $color-light-gray-90; + display: inline-block; + padding: $spacing-md 0; + text-overflow: ellipsis; + white-space: nowrap; + overflow-x: hidden; + max-width: $content-xs; + } @media screen and #{$mq-md} { max-width: 100%; diff --git a/frontend/src/components/dashboard/SubdomainPicker.module.scss b/frontend/src/components/dashboard/SubdomainPicker.module.scss index d3bd1346a5..2315181346 100644 --- a/frontend/src/components/dashboard/SubdomainPicker.module.scss +++ b/frontend/src/components/dashboard/SubdomainPicker.module.scss @@ -1,6 +1,7 @@ @import "../../styles/tokens"; @import "~@mozilla-protocol/core/protocol/css/includes/lib"; @import "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; +@import "../../styles/typography"; .card { border-radius: $border-radius-md; @@ -62,8 +63,9 @@ } h2 { - @include text-title-2xs; - padding: $spacing-sm 0; + @include text-title-2xs { + padding: $spacing-sm 0; + } } .lead { diff --git a/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss b/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss index 09c909618f..bdfd214e58 100644 --- a/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss +++ b/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss @@ -9,10 +9,6 @@ $trackLineHeight: 4px; // A CSS variable to enable different values depending on the screen size: --thumbDiameter: 32px; - @media screen and #{$mq-md} { - --thumbDiameter: 24px; - } - display: flex; flex-direction: column; align-items: center; @@ -20,6 +16,10 @@ $trackLineHeight: 4px; padding: 0 $spacing-md; width: 100%; + @media screen and #{$mq-md} { + --thumbDiameter: 24px; + } + @media screen and #{$mq-md} { flex-direction: row; gap: $spacing-xl; diff --git a/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss b/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss index d87a4a51cd..e68e58aec2 100644 --- a/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss +++ b/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss @@ -1,5 +1,6 @@ @import "../../../styles/tokens"; @import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@import "../../../styles/typography"; .underlay { position: fixed; @@ -51,11 +52,12 @@ font-weight: 400; .subdomain { - @include text-title-xs; - display: block; - font-weight: 700; - margin-bottom: $spacing-sm; - padding: $spacing-sm 0; + @include text-title-xs { + display: block; + font-weight: 700; + margin-bottom: $spacing-sm; + padding: $spacing-sm 0; + } &::before { content: "@"; diff --git a/frontend/src/components/landing/BundleBanner.module.scss b/frontend/src/components/landing/BundleBanner.module.scss index 6e33464597..d621b0942e 100644 --- a/frontend/src/components/landing/BundleBanner.module.scss +++ b/frontend/src/components/landing/BundleBanner.module.scss @@ -1,5 +1,6 @@ @import "../../styles/tokens"; @import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@import "../../styles/typography"; .bundle-banner-wrapper { display: grid; @@ -194,9 +195,10 @@ } h2 { - @include text-title-sm; - @include font-firefox; - font-weight: 700; + @include text-title-sm { + @include font-firefox; + font-weight: 700; + } @media #{$mq-lg} { @include text-title-xs; @@ -204,9 +206,10 @@ } h3 { - @include text-title-xs; - @include font-firefox; - font-weight: 500; + @include text-title-xs { + @include font-firefox; + font-weight: 500; + } @media #{$mq-lg} { @include text-title-2xs; diff --git a/frontend/src/components/landing/HighlightedFeatures.module.scss b/frontend/src/components/landing/HighlightedFeatures.module.scss index 13f700a7d4..339cb6edaa 100644 --- a/frontend/src/components/landing/HighlightedFeatures.module.scss +++ b/frontend/src/components/landing/HighlightedFeatures.module.scss @@ -1,5 +1,6 @@ @import "../../styles/tokens"; @import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@import "../../styles/typography"; .highlighted-feature-wrapper { display: flex; @@ -64,9 +65,10 @@ h2 { @include font-firefox; - @include text-title-sm; - justify-content: center; - width: 100%; + @include text-title-sm { + justify-content: center; + width: 100%; + } } .cta { diff --git a/frontend/src/components/landing/PlanMatrix.module.scss b/frontend/src/components/landing/PlanMatrix.module.scss index 17572a11a4..288c6d0c1b 100644 --- a/frontend/src/components/landing/PlanMatrix.module.scss +++ b/frontend/src/components/landing/PlanMatrix.module.scss @@ -1,5 +1,6 @@ @import "../../styles/tokens"; @import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@import "../../styles/typography"; .wrapper { width: 100%; @@ -9,17 +10,18 @@ gap: $spacing-md; .bundle-offer-heading { - @include text-title-xs; - background-image: linear-gradient( - to right, - $color-violet-30, - $color-violet-80 20%, - $color-violet-30 80% - ); - background-clip: text; - color: transparent; - text-align: center; - font-weight: 700; + @include text-title-xs { + background-image: linear-gradient( + to right, + $color-violet-30, + $color-violet-80 20%, + $color-violet-30 80% + ); + background-clip: text; + color: transparent; + text-align: center; + font-weight: 700; + } } .bundle-offer-content { max-width: $content-md; @@ -256,9 +258,10 @@ table.desktop { padding: $spacing-md; h3 { - @include text-title-2xs; - font-weight: 600; - text-align: center; + @include text-title-2xs { + font-weight: 600; + text-align: center; + } } &.recommended h3 { diff --git a/frontend/src/components/landing/Reviews.module.scss b/frontend/src/components/landing/Reviews.module.scss index 02679fa87a..07b62cc539 100644 --- a/frontend/src/components/landing/Reviews.module.scss +++ b/frontend/src/components/landing/Reviews.module.scss @@ -1,5 +1,6 @@ @import "../../styles/tokens"; @import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@import "../../styles/typography"; .reviews { display: flex; @@ -52,9 +53,10 @@ } .logo-text { - @include text-title-xs; - font-weight: 600; - text-transform: uppercase; + @include text-title-xs { + font-weight: 600; + text-transform: uppercase; + } } } @@ -75,9 +77,10 @@ .rating { .title { - @include text-title-2xl; - font-family: $font-stack-firefox; - font-weight: 600; + @include text-title-2xl { + font-family: $font-stack-firefox; + font-weight: 600; + } } .text { diff --git a/frontend/src/components/layout/navigation/MobileNavigation.module.scss b/frontend/src/components/layout/navigation/MobileNavigation.module.scss index b3c0ec5c13..aed9b5c719 100644 --- a/frontend/src/components/layout/navigation/MobileNavigation.module.scss +++ b/frontend/src/components/layout/navigation/MobileNavigation.module.scss @@ -1,5 +1,6 @@ @import "../../../styles/tokens"; @import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@import "../../../styles/typography"; .mobile-menu { width: 100%; @@ -81,9 +82,10 @@ .menu-item { display: flex; - @include text-display-xxs; - font-family: $font-stack-firefox; - border-bottom: 2px solid $color-light-gray-20; + @include text-display-xxs { + font-family: $font-stack-firefox; + border-bottom: 2px solid $color-light-gray-20; + } &.sign-up-menu-item { padding: $spacing-md; diff --git a/frontend/src/components/layout/navigation/UserMenu.module.scss b/frontend/src/components/layout/navigation/UserMenu.module.scss index 6a40c6806c..abdc09b4b1 100644 --- a/frontend/src/components/layout/navigation/UserMenu.module.scss +++ b/frontend/src/components/layout/navigation/UserMenu.module.scss @@ -1,5 +1,6 @@ @import "../../../styles/tokens"; @import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@import "../../../styles/typography"; .wrapper { align-items: center; @@ -14,9 +15,10 @@ color: white; overflow: hidden; - @include text-title-2xs; - padding: 0; - border-style: none; + @include text-title-2xs { + padding: 0; + border-style: none; + } } .popup { diff --git a/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss b/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss index cb9c03fc77..cffc847d83 100644 --- a/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss +++ b/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss @@ -1,5 +1,6 @@ @import "../../../../styles/tokens"; @import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@import "../../../../styles/typography"; .wrapper { display: flex; @@ -15,9 +16,10 @@ padding: $spacing-lg 0; h2 { - @include text-title-2xs; - font-family: $font-stack-firefox; - padding-bottom: $spacing-sm; + @include text-title-2xs { + font-family: $font-stack-firefox; + padding-bottom: $spacing-sm; + } } .cta { diff --git a/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss b/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss index 9591174877..9eefb3ad13 100644 --- a/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss +++ b/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss @@ -1,5 +1,6 @@ @import "~@mozilla-protocol/core/protocol/css/includes/lib"; @import "../../../styles/tokens"; +@import "../../../styles/typography"; .main-wrapper { display: flex; @@ -19,9 +20,10 @@ text-align: center; h1 { - @include text-title-xs; - @include font-firefox; - font-weight: 600; + @include text-title-xs { + @include font-firefox; + font-weight: 600; + } } } diff --git a/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss b/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss index a8de81b40e..33158ddba3 100644 --- a/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss +++ b/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss @@ -1,5 +1,6 @@ @import "~@mozilla-protocol/core/protocol/css/includes/lib"; @import "../../../styles/tokens"; +@import "../../../styles/typography"; .wrapper { display: flex; @@ -13,9 +14,10 @@ overflow-x: hidden; h2 { - @include text-title-xs; - font-family: $font-stack-firefox; - text-align: center; + @include text-title-xs { + font-family: $font-stack-firefox; + text-align: center; + } } .lead { @@ -117,10 +119,11 @@ gap: $spacing-md; .price { - @include text-title-2xs; - padding-top: $spacing-sm; - display: block; - font-weight: 700; + @include text-title-2xs { + padding-top: $spacing-sm; + display: block; + font-weight: 700; + } > span { @include text-body-sm; diff --git a/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss b/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss index a191d02efc..222fd75637 100644 --- a/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss +++ b/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss @@ -1,6 +1,7 @@ @import "~@mozilla-protocol/core/protocol/css/includes/lib"; @import "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; @import "../../../styles/tokens"; +@import "../../../styles/typography"; .step { flex: 1 0 auto; @@ -20,9 +21,10 @@ } h2 { - @include text-title-xs; - font-family: $font-stack-firefox; - text-align: center; + @include text-title-xs { + font-family: $font-stack-firefox; + text-align: center; + } } .lead { @@ -86,10 +88,11 @@ } span { - @include text-title-2xs; - padding-top: $spacing-sm; - display: block; - font-weight: 700; + @include text-title-2xs { + padding-top: $spacing-sm; + display: block; + font-weight: 700; + } } } } diff --git a/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss b/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss index ca5951668c..374700509e 100644 --- a/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss +++ b/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss @@ -1,6 +1,7 @@ @import "~@mozilla-protocol/core/protocol/css/includes/lib"; @import "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; @import "../../../styles/tokens"; +@import "../../../styles/typography"; .step, .controls { @@ -34,9 +35,10 @@ } h2 { - @include text-title-xs; - font-family: $font-stack-firefox; - text-align: center; + @include text-title-xs { + font-family: $font-stack-firefox; + text-align: center; + } } .lead { @@ -100,10 +102,11 @@ } span { - @include text-title-2xs; - padding-top: $spacing-sm; - display: block; - font-weight: 700; + @include text-title-2xs { + padding-top: $spacing-sm; + display: block; + font-weight: 700; + } } } diff --git a/frontend/src/components/waitlist/WaitlistPage.module.scss b/frontend/src/components/waitlist/WaitlistPage.module.scss index abb1796bc1..2d4cd7ec52 100644 --- a/frontend/src/components/waitlist/WaitlistPage.module.scss +++ b/frontend/src/components/waitlist/WaitlistPage.module.scss @@ -1,6 +1,7 @@ @import "~@mozilla-protocol/core/protocol/css/includes/tokens/dist/index"; @import "~@mozilla-protocol/core/protocol/css/includes/lib"; @import "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; +@import "../../styles/typography"; .wrapper { display: flex; @@ -78,10 +79,11 @@ } .heading { - @include text-title-sm; - font-family: $font-stack-firefox; - align-self: center; - text-align: center; + @include text-title-sm { + font-family: $font-stack-firefox; + align-self: center; + text-align: center; + } } .lead { diff --git a/frontend/src/pages/accounts/profile.module.scss b/frontend/src/pages/accounts/profile.module.scss index eea9419873..3b4c2a2d85 100644 --- a/frontend/src/pages/accounts/profile.module.scss +++ b/frontend/src/pages/accounts/profile.module.scss @@ -1,6 +1,7 @@ @import "../../styles/tokens"; @import "~@mozilla-protocol/core/protocol/css/includes/lib"; @import "~@mozilla-protocol/core/protocol/css/includes/mixins/typography"; +@import "../../styles/typography"; .header { background-color: $color-light-gray-05; @@ -157,13 +158,14 @@ } .value { - @include text-title-xs; - font-family: $font-stack-firefox; - font-weight: 700; - padding: $spacing-xs 0; - flex: 1 0 auto; - display: flex; - flex-direction: column; + @include text-title-xs { + font-family: $font-stack-firefox; + font-weight: 700; + padding: $spacing-xs 0; + flex: 1 0 auto; + display: flex; + flex-direction: column; + } .learn-more-wrapper { @include text-body-sm; @@ -259,8 +261,9 @@ } .upsell-banner-header { - @include text-title-md; - font-weight: 700; + @include text-title-md { + font-weight: 700; + } } .upsell-banner-description { @@ -368,8 +371,9 @@ h3 { @include font-mozilla; - @include text-title-xs; - font-weight: 500; + @include text-title-xs { + font-weight: 500; + } strong { font-weight: 700; diff --git a/frontend/src/pages/contains-tracker-warning.module.scss b/frontend/src/pages/contains-tracker-warning.module.scss index 6346a9670a..636ff725e6 100644 --- a/frontend/src/pages/contains-tracker-warning.module.scss +++ b/frontend/src/pages/contains-tracker-warning.module.scss @@ -1,5 +1,6 @@ @import "../styles/tokens"; @import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@import "../styles/typography"; .contains-tracker-container { margin: $layout-sm; @@ -105,11 +106,12 @@ } .headline { - @include text-title-xs; - font-family: $font-stack-firefox; - font-weight: 700; - padding: $spacing-md 0; - color: $color-violet-90; + @include text-title-xs { + font-family: $font-stack-firefox; + font-weight: 700; + padding: $spacing-md 0; + color: $color-violet-90; + } @media screen and #{$mq-md} { @include text-title-2xs; diff --git a/frontend/src/pages/faq.module.scss b/frontend/src/pages/faq.module.scss index 76a76461d6..b0fd1c80f6 100644 --- a/frontend/src/pages/faq.module.scss +++ b/frontend/src/pages/faq.module.scss @@ -1,5 +1,6 @@ @import "../styles/tokens"; @import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@import "../styles/typography"; .faq-page { background-color: $color-blue-90; @@ -27,10 +28,10 @@ } .headline { - @include text-title-sm; - @include font-firefox; - - padding-bottom: $spacing-xl; + @include text-title-sm { + @include font-firefox; + padding-bottom: $spacing-xl; + } } .faqs { @@ -49,10 +50,10 @@ } .question { - @include text-title-2xs; - @include font-firefox; - - padding-bottom: $spacing-sm; + @include text-title-2xs { + @include font-firefox; + padding-bottom: $spacing-sm; + } } .answer { diff --git a/frontend/src/pages/index.module.scss b/frontend/src/pages/index.module.scss index cd80426535..e8c13a7dcc 100644 --- a/frontend/src/pages/index.module.scss +++ b/frontend/src/pages/index.module.scss @@ -1,5 +1,6 @@ @import "../styles/tokens"; @import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@import "../styles/typography"; .hero { display: flex; @@ -28,8 +29,9 @@ } h2 { - @include text-title-md; - font-family: $font-stack-firefox; + @include text-title-md { + font-family: $font-stack-firefox; + } } p { @@ -74,10 +76,11 @@ padding: $spacing-lg; h2 { - @include text-title-sm; - font-family: $font-stack-firefox; - text-align: center; - margin-bottom: $layout-sm; + @include text-title-sm { + font-family: $font-stack-firefox; + text-align: center; + margin-bottom: $layout-sm; + } } h2, @@ -196,9 +199,10 @@ margin-top: $layout-xl; h2 { - @include text-title-sm; - font-family: $font-stack-firefox; - font-weight: 500; + @include text-title-sm { + font-family: $font-stack-firefox; + font-weight: 500; + } } .end-of-intro-pricing-countdown-and-warning { @@ -245,10 +249,11 @@ } .headline { - @include text-title-sm; - font-family: $font-stack-firefox; - font-weight: 500; - padding: $spacing-md 0; + @include text-title-sm { + font-family: $font-stack-firefox; + font-weight: 500; + padding: $spacing-md 0; + } } .read-more { diff --git a/frontend/src/pages/premium.module.scss b/frontend/src/pages/premium.module.scss index f4b457ee36..da28f7a7f8 100644 --- a/frontend/src/pages/premium.module.scss +++ b/frontend/src/pages/premium.module.scss @@ -1,5 +1,6 @@ @import "~@mozilla-protocol/core/protocol/css/includes/lib"; @import "../styles/tokens"; +@import "../styles/typography"; .hero { display: flex; @@ -33,8 +34,9 @@ } h2 { - @include text-title-md; - font-family: $font-stack-firefox; + @include text-title-md { + font-family: $font-stack-firefox; + } } .social-proof { @@ -78,10 +80,11 @@ padding: $spacing-2xl $spacing-xl; h2 { - @include text-title-sm; - font-family: $font-stack-firefox; - text-align: center; - padding: $spacing-md 0; + @include text-title-sm { + font-family: $font-stack-firefox; + text-align: center; + padding: $spacing-md 0; + } } .lead { @@ -115,9 +118,10 @@ } h3 { - @include text-title-xs; - font-family: $font-stack-firefox; - padding: $spacing-sm 0; + @include text-title-xs { + font-family: $font-stack-firefox; + padding: $spacing-sm 0; + } } p { @@ -149,10 +153,11 @@ padding: $spacing-xl; .headline { - @include text-title-sm; - font-family: $font-stack-firefox; - text-align: center; - padding: $spacing-lg; + @include text-title-sm { + font-family: $font-stack-firefox; + text-align: center; + padding: $spacing-lg; + } } } @@ -188,9 +193,10 @@ gap: $spacing-lg; h2 { - @include text-title-md; - font-family: $font-stack-firefox; - font-weight: 500; + @include text-title-md { + font-family: $font-stack-firefox; + font-weight: 500; + } } .end-of-intro-pricing-countdown-and-warning { diff --git a/frontend/src/pages/tracker-report.module.scss b/frontend/src/pages/tracker-report.module.scss index 6a4ba6723e..788c9fad1c 100644 --- a/frontend/src/pages/tracker-report.module.scss +++ b/frontend/src/pages/tracker-report.module.scss @@ -1,5 +1,6 @@ @import "../styles/tokens"; @import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@import "../styles/typography"; .wrapper { height: 100%; @@ -70,10 +71,11 @@ } h1 { - @include text-title-2xs; - font-family: $font-stack-firefox; - padding: $spacing-md 0; - border-bottom: 1px solid $color-grey-20; + @include text-title-2xs { + font-family: $font-stack-firefox; + padding: $spacing-md 0; + border-bottom: 1px solid $color-grey-20; + } } .meta { @@ -127,9 +129,10 @@ } h2 { - @include text-title-xs; - font-family: $font-stack-firefox; - font-weight: 500; + @include text-title-xs { + font-family: $font-stack-firefox; + font-weight: 500; + } } table { @@ -257,10 +260,11 @@ } .headline { - @include text-title-sm; - font-family: $font-stack-firefox; - font-weight: 500; - padding: $spacing-md 0; + @include text-title-sm { + font-family: $font-stack-firefox; + font-weight: 500; + padding: $spacing-md 0; + } } .read-more { diff --git a/frontend/src/styles/typography.scss b/frontend/src/styles/typography.scss new file mode 100644 index 0000000000..c70346f163 --- /dev/null +++ b/frontend/src/styles/typography.scss @@ -0,0 +1,240 @@ +/* +Re-declare mozilla-protocol typography: + * text-title-* mixins to take a content block + * replace type-scale to return a numberremove + +TODO MPP-3946: Replace with mozilla-protocol v18.0.x overrides + +The v17.0.1 typography mixins are at: +https://github.com/mozilla/protocol/blob/v17.0.1/assets/sass/protocol/includes/mixins/_typography.scss + +A typical mixin text-title-xs looks like: + +@mixin text-title-xs { + @include font-size(type-scale('title-2xs-size')); + line-height: type-scale('title-2xs-line-height'); + + @media #{$mq-md} { + @include font-size(type-scale('title-xs-size')); + line-height: type-scale('title-xs-line-height'); + } +} + +Here's a typical usage, such as in +components/dashboard/EmailForwardingModal.module.scss: + +.headline { + @include text-title-xs; + display: flex; + align-items: center; + justify-content: center; + padding: $spacing-sm 0; + gap: $spacing-sm; + font-weight: 100; +} + +This compiles to the CSS: + +.EmailForwardingModal_headline__VgCSC { + font-size: 24px; + font-size: 1.5rem; + line-height: 1.08; + display: flex; + align-items: center; + justify-content: center; + padding: 8px 0; + gap: 8px; + font-weight: 100 +} +@media(min-width:768px) +{ + .EmailForwardingModal_headline__VgCSC { + font-size: 28px; + font-size: 1.75rem; + line-height: 1.07 + } +} + +However, it also triggers the Sass deprecation warning about mixed declarations: +https://sass-lang.com/documentation/breaking-changes/mixed-decls/ + +There are three ways to eliminate the warning. The first two result in the same CSS that is different from the original. + +The first is to move the `@import` down in the original ruleset: + +.headline { + display: flex; + align-items: center; + justify-content: center; + padding: $spacing-sm 0; + gap: $spacing-sm; + font-weight: 100; + @include text-title-xs; +} + +The second is opt-in to the new CSS ordering behaviour with the `&` operator: + +.headline { + @{@include text-title-xs;} + display: flex; + align-items: center; + justify-content: center; + padding: $spacing-sm 0; + gap: $spacing-sm; + font-weight: 100; +} + +Both result in this slightly different CSS: + +.EmailForwardingModal_headline__VgCSC { + display: flex; + align-items: center; + justify-content: center; + padding: 8px 0; + gap: 8px; + font-weight: 100 + font-size: 24px; + font-size: 1.5rem; + line-height: 1.08; +} +@media(min-width:768px) +{ + .EmailForwardingModal_headline__VgCSC { + font-size: 28px; + font-size: 1.75rem; + line-height: 1.07 + } +} + +The change is that the font-size and line-height elements have moved +from the top to the bottom of the ruleset. This can change the style +due to browser difference and later properties overriding previous +properties. See this Stack Overflow question for some of the subtleties: + +https://stackoverflow.com/questions/13080220/how-important-is-css-property-order + +This file implements a third method, overriding the mozilla-protocol mixins to +accept a content;. Documentation at: +https://sass-lang.com/documentation/at-rules/mixin/#content-blocks + +@mixin text-title-xs { + @include font-size(type-scale('title-2xs-size')); + line-height: type-scale('title-2xs-line-height'); + @content; + + @media #{$mq-md} { + @include font-size(type-scale('title-xs-size')); + line-height: type-scale('title-xs-line-height'); + } +} + +The .headline declaration changes to: + +.headline { + @include text-title-xs { + display: flex; + align-items: center; + justify-content: center; + padding: $spacing-sm 0; + gap: $spacing-sm; + font-weight: 100; + } +} + +This results in identical output CSS but without the warning. + +These mixins an also be used to inject the protocol properties in the middle of +the ruleset, such as .menu-item in: +components/layout/navigation/MobileNavigation.module.scss + +.menu-item { + display: flex; + + @include text-display-xxs { + font-family: $font-stack-firefox; + border-bottom: 2px solid $color-light-gray-20; + } + + &.sign-up-menu-item { + padding: $spacing-md; + } + // ... +} + +An experienced CSS author may prefer this form, to only include the properties +that they are using to override the base text-* mixin. +*/ + +@forward "~@mozilla-protocol/core/protocol/css/includes/mixins/typography" show + $font-stack-mozilla; + +@mixin text-title-2xl { + @include font-size(type-scale("title-xl-size")); + line-height: type-scale("title-xl-line-height"); + @content; + + @media #{$mq-md} { + @include font-size(type-scale("title-2xl-size")); + line-height: type-scale("title-2xl-line-height"); + } +} + +// @mixin text-title-xl is not used by Relay +// @mixin text-title-lg is not used by Relay + +@mixin text-title-md { + @include font-size(type-scale("title-sm-size")); + line-height: type-scale("title-sm-line-height"); + @content; + + @media #{$mq-md} { + @include font-size(type-scale("title-md-size")); + line-height: type-scale("title-md-line-height"); + } +} + +@mixin text-title-sm { + @include font-size(type-scale("title-xs-size")); + line-height: type-scale("title-xs-line-height"); + @content; + + @media #{$mq-md} { + @include font-size(type-scale("title-sm-size")); + line-height: type-scale("title-sm-line-height"); + } +} + +@mixin text-title-xs { + @include font-size(type-scale("title-2xs-size")); + line-height: type-scale("title-2xs-line-height"); + @content; + + @media #{$mq-md} { + @include font-size(type-scale("title-xs-size")); + line-height: type-scale("title-xs-line-height"); + } +} + +@mixin text-title-2xs { + @include font-size(type-scale("title-3xs-size")); + line-height: type-scale("title-3xs-line-height"); + @content; + + @media #{$mq-md} { + @include font-size(type-scale("title-2xs-size")); + line-height: type-scale("title-2xs-line-height"); + } +} + +// @mixin text-display-xxl is not used by Relay +// @mixin text-display-xl is not used by Relay +// @mixin text-display-lg is not used by Relay +// @mixin text-display-md is not used by Relay +// @mixin text-display-sm is not used by Relay +// @mixin text-display-xs is not used by Relay + +@mixin text-display-xxs { + @include text-title-2xs { + @content; + } +} From 4b0a43a6c6a5fde521eb7b27fea23b0cb7bd55d8 Mon Sep 17 00:00:00 2001 From: John Whitlock Date: Tue, 5 Nov 2024 13:45:00 -0600 Subject: [PATCH 02/13] Convert SCSS from at-import to at-use This is mostly done with: find . -type f -name '*.scss' | xargs npx sass-migrator module with some custom work to get the build working, and an extra comment to make the generated CSS exactly the same. --- frontend/next.config.js | 3 - frontend/src/components/Banner.module.scss | 122 ++++----- frontend/src/components/Button.module.scss | 40 +-- frontend/src/components/InfoModal.module.scss | 40 +-- .../src/components/InfoTooltip.module.scss | 22 +- .../dashboard/CornerNotification.module.scss | 52 ++-- .../EmailForwardingModal.module.scss | 66 ++--- .../dashboard/FreeOnboarding.module.scss | 210 +++++++------- .../dashboard/Onboarding.module.scss | 34 +-- .../dashboard/PremiumOnboarding.module.scss | 142 +++++----- .../dashboard/ProfileBanners.module.scss | 5 +- .../dashboard/SubdomainPicker.module.scss | 86 +++--- .../aliases/AddressPickerModal.module.scss | 124 ++++----- .../dashboard/aliases/Alias.module.scss | 166 +++++------ .../aliases/AliasDeletionButton.module.scss | 78 +++--- .../AliasDeletionButtonPermanent.module.scss | 90 +++--- .../aliases/AliasGenerationButton.module.scss | 35 +-- .../dashboard/aliases/AliasList.module.scss | 56 ++-- .../aliases/BlockLevelSlider.module.scss | 136 ++++----- .../aliases/CategoryFilter.module.scss | 27 +- .../CustomAddressGenerationModal.module.scss | 191 ++++++------- .../dashboard/aliases/LabelEditor.module.scss | 31 ++- .../dashboard/aliases/MaskCard.module.scss | 238 ++++++++-------- .../subdomain/ConfirmationForm.module.scss | 34 +-- .../subdomain/ConfirmationModal.module.scss | 64 ++--- .../SubdomainInfoTooltip.module.scss | 48 ++-- .../dashboard/tips/CustomAliasTip.module.scss | 22 +- .../dashboard/tips/GenericTip.module.scss | 18 +- .../dashboard/tips/Tips.module.scss | 84 +++--- .../landing/BundleBanner.module.scss | 144 +++++----- .../components/landing/DemoPhone.module.scss | 11 +- .../landing/FaqAccordion.module.scss | 26 +- .../landing/HighlightedFeatures.module.scss | 46 ++-- .../components/landing/PlanMatrix.module.scss | 160 +++++------ .../components/landing/Reviews.module.scss | 138 +++++----- .../src/components/layout/Layout.module.scss | 156 +++++------ .../layout/navigation/AppPicker.module.scss | 66 ++--- .../navigation/DashboardSwitcher.module.scss | 26 +- .../layout/navigation/MenuToggle.module.scss | 2 +- .../navigation/MobileNavigation.module.scss | 54 ++-- .../layout/navigation/Navigation.module.scss | 25 +- .../navigation/SignInButton.module.scss | 9 +- .../navigation/SignUpButton.module.scss | 2 +- .../navigation/UpgradeButton.module.scss | 22 +- .../layout/navigation/UserMenu.module.scss | 52 ++-- .../whatsnew/WhatsNewContent.module.scss | 20 +- .../whatsnew/WhatsNewDashboard.module.scss | 58 ++-- .../whatsnew/WhatsNewList.module.scss | 36 +-- .../whatsnew/WhatsNewMenu.module.scss | 48 ++-- .../layout/topmessage/CsatSurvey.module.scss | 36 +-- .../topmessage/HolidayPromoBanner.module.scss | 54 ++-- .../InterviewRecruitment.module.scss | 20 +- .../layout/topmessage/NpsSurvey.module.scss | 36 +-- .../layout/topmessage/PhoneSurvey.module.scss | 20 +- .../dashboard/PhoneDashboard.module.scss | 259 +++++++++--------- .../dashboard/PhoneWelcomeView.module.scss | 102 +++---- .../onboarding/PurchasePhonesPlan.module.scss | 80 +++--- .../onboarding/RealPhoneSetup.module.scss | 158 +++++------ .../RelayNumberConfirmationModal.module.scss | 34 +-- .../onboarding/RelayNumberPicker.module.scss | 144 +++++----- .../waitlist/WaitlistPage.module.scss | 46 ++-- frontend/src/hooks/mediaQuery.module.scss | 13 +- .../accounts/account_inactive.module.scss | 6 +- .../src/pages/accounts/profile.module.scss | 191 ++++++------- .../src/pages/accounts/settings.module.scss | 112 ++++---- .../contains-tracker-warning.module.scss | 86 +++--- frontend/src/pages/faq.module.scss | 42 +-- frontend/src/pages/flags.module.scss | 32 +-- frontend/src/pages/index.module.scss | 170 ++++++------ .../src/pages/mock/mockSession.module.scss | 38 +-- frontend/src/pages/premium.module.scss | 120 ++++---- frontend/src/pages/tracker-report.module.scss | 146 +++++----- .../src/pages/vpn-relay-welcome.module.scss | 74 ++--- frontend/src/styles/globals.scss | 14 +- frontend/src/styles/tokens.scss | 2 +- frontend/src/styles/typography.scss | 92 ++++--- 76 files changed, 2756 insertions(+), 2736 deletions(-) diff --git a/frontend/next.config.js b/frontend/next.config.js index b131931502..4ca1dcfa7f 100644 --- a/frontend/next.config.js +++ b/frontend/next.config.js @@ -118,9 +118,6 @@ module.exports = { // TODO MPP-3946: Fix deprecation warnings in sass 1.80.x // https://github.com/mozilla/protocol/releases/tag/v18.0.0 silenceDeprecations: [ - // Issues we can fix in our code - "import", // https://sass-lang.com/documentation/breaking-changes/import/ - // Upstream issues "legacy-js-api", // vercel/next.js issue #71638 ], diff --git a/frontend/src/components/Banner.module.scss b/frontend/src/components/Banner.module.scss index ee0856ab33..cd6b2d7ac7 100644 --- a/frontend/src/components/Banner.module.scss +++ b/frontend/src/components/Banner.module.scss @@ -1,37 +1,37 @@ -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; -@import "../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as lib2; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; +@use "../styles/tokens"; .banner { - border-radius: $border-radius-md; - padding: $spacing-md; - background-color: $color-white; + border-radius: lib2.$border-radius-md; + padding: lib2.$spacing-md; + background-color: tokens.$color-white; position: relative; - box-shadow: $box-shadow-sm; + box-shadow: lib2.$box-shadow-sm; &.promo { // This is the gradient border width (which is implemented as a background image): padding: 2px; box-shadow: none; - background-image: $firefoxGradient; + background-image: tokens.$firefoxGradient; } &.warning { - padding: $spacing-sm; + padding: lib2.$spacing-sm; } &.info { - @include text-body-sm; + @include lib2.text-body-sm; - @media screen and #{$mq-sm} { - padding: 0 $spacing-sm; + @media screen and #{lib2.$mq-sm} { + padding: 0 lib2.$spacing-sm; } } .dismiss-button { position: absolute; - top: $spacing-sm; - right: $spacing-sm; + top: lib2.$spacing-sm; + right: lib2.$spacing-sm; display: flex; align-items: center; justify-content: center; @@ -39,68 +39,68 @@ height: 30px; background-color: transparent; border-style: none; - border-radius: $border-radius-sm; + border-radius: lib2.$border-radius-sm; cursor: pointer; padding: 0; &:hover { - background-color: $color-blue-50; - color: $color-white; + background-color: tokens.$color-blue-50; + color: tokens.$color-white; } } } .highlight-wrapper { display: flex; - background-color: $color-white; + background-color: tokens.$color-white; flex-wrap: wrap; .banner.promo & { // .banner's border-radius - .banner's padding. // This is what makes .banner.promo appear as a 2px-wide border: - border-radius: calc($border-radius-md - 2px); + border-radius: calc(lib2.$border-radius-md - 2px); } .title-and-large-cta-wrapper { display: flex; flex-wrap: wrap; - flex: 1 1 $content-xs; - padding: $spacing-xs $spacing-md $spacing-md $spacing-md; + flex: 1 1 lib2.$content-xs; + padding: lib2.$spacing-xs lib2.$spacing-md lib2.$spacing-md lib2.$spacing-md; .title-text { flex: 1 1 auto; .banner.warning & { - @media screen and #{$mq-sm} { - padding-left: $spacing-md; + @media screen and #{lib2.$mq-sm} { + padding-left: lib2.$spacing-md; border-left-width: 4px; border-left-style: solid; - border-color: $color-yellow-50; + border-color: tokens.$color-yellow-50; } } } - @media screen and #{$mq-sm} { - padding: $spacing-md; + @media screen and #{lib2.$mq-sm} { + padding: lib2.$spacing-md; } - @media screen and #{$mq-lg} { + @media screen and #{lib2.$mq-lg} { flex-wrap: nowrap; } } .info-icon { align-self: center; - color: $color-violet-30; + color: tokens.$color-violet-30; } } .illustration { display: flex; align-items: center; - padding: $spacing-md $spacing-md 0 $spacing-md; + padding: lib2.$spacing-md lib2.$spacing-md 0 lib2.$spacing-md; - @media screen and #{$mq-md} { - padding: 0 $spacing-md 0 $spacing-xl; + @media screen and #{lib2.$mq-md} { + padding: 0 lib2.$spacing-md 0 lib2.$spacing-xl; } img { @@ -110,19 +110,19 @@ // For Banners in PremiumPromoBanners.tsx .flex-end { - border-bottom: 1px solid $color-light-gray-20; + border-bottom: 1px solid lib2.$color-light-gray-20; align-items: center; - margin: 0 $spacing-md; - padding-top: $spacing-sm; + margin: 0 lib2.$spacing-md; + padding-top: lib2.$spacing-sm; width: 100%; - @media screen and #{$mq-sm} { + @media screen and #{lib2.$mq-sm} { border-bottom: none; padding: none; width: auto; margin: 0; } - @media screen and #{$mq-lg} { + @media screen and #{lib2.$mq-lg} { align-items: flex-end; } @@ -130,36 +130,36 @@ width: 90px; margin: 0 auto; - @media screen and #{$mq-sm} { + @media screen and #{lib2.$mq-sm} { margin: 0; } } } .title { - @include text-title-3xs; - font-family: $font-stack-firefox; + @include lib2.text-title-3xs; + font-family: lib2.$font-stack-firefox; display: flex; align-items: center; - padding: $spacing-sm 0 $spacing-md 0; + padding: lib2.$spacing-sm 0 lib2.$spacing-md 0; .banner.info & { - @include text-body-sm; - font-family: $font-stack-base; + @include lib2.text-body-sm; + font-family: lib2.$font-stack-base; font-weight: 600; } .icon { flex: 0 0 auto; - margin-right: $spacing-sm; + margin-right: lib2.$spacing-sm; .warning & { - color: $color-yellow-50; + color: tokens.$color-yellow-50; } .info & { - color: $color-violet-30; - margin-right: $spacing-xs; + color: tokens.$color-violet-30; + margin-right: lib2.$spacing-xs; } } } @@ -168,9 +168,9 @@ a, button { display: inline-block; - padding-top: $spacing-md; + padding-top: lib2.$spacing-md; font-weight: 700; - color: $color-blue-50; + color: tokens.$color-blue-50; cursor: pointer; background: none; border: none; @@ -178,11 +178,11 @@ .banner.info & { font-weight: 500; text-decoration: underline; - padding: $spacing-sm 0 0 0; + padding: lib2.$spacing-sm 0 0 0; } &:hover { - color: $color-blue-40; + color: tokens.$color-blue-40; } &:focus { @@ -193,32 +193,32 @@ } .cta-large-button { - padding-top: $spacing-md; + padding-top: lib2.$spacing-md; flex: 0 0 auto; align-self: center; - @media screen and #{$mq-md} { + @media screen and #{lib2.$mq-md} { align-self: center; margin: 0 0 0 auto; - padding: $spacing-md; + padding: lib2.$spacing-md; } a { display: block; - padding: $spacing-sm $spacing-md; + padding: lib2.$spacing-sm lib2.$spacing-md; font-weight: 700; - border: 2px solid $color-blue-50; - color: $color-blue-50; - border-radius: $border-radius-sm; + border: 2px solid tokens.$color-blue-50; + color: tokens.$color-blue-50; + border-radius: lib2.$border-radius-sm; &:hover { - background-color: $color-blue-60; - color: $color-white; + background-color: tokens.$color-blue-60; + color: tokens.$color-white; } &:focus { - border-color: $button-border-color-focus; - box-shadow: $field-focus-ring; + border-color: lib.$button-border-color-focus; + box-shadow: lib.$field-focus-ring; outline: none; } } diff --git a/frontend/src/components/Button.module.scss b/frontend/src/components/Button.module.scss index 357d6bea4d..c83c24bf2c 100644 --- a/frontend/src/components/Button.module.scss +++ b/frontend/src/components/Button.module.scss @@ -1,49 +1,49 @@ -@import "../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/mixins/typography"; -@import "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as forms_lib; +@use "../styles/tokens"; .button { display: inline-flex; align-items: center; justify-content: center; - gap: $spacing-xs; + gap: lib.$spacing-xs; cursor: pointer; - background-color: $color-blue-50; - padding: $spacing-sm $spacing-md; - border-radius: $border-radius-sm; + background-color: lib.$color-blue-50; + padding: lib.$spacing-sm lib.$spacing-md; + border-radius: lib.$border-radius-sm; border: 2px solid transparent; - color: $color-white; + color: lib.$color-white; font-weight: 700; line-height: 1.25; - @include text-body-md; + @include lib.text-body-md; &:hover:not(:disabled) { - background-color: $color-blue-60; + background-color: lib.$color-blue-60; opacity: 1; } &:focus { - border-color: $button-border-color-focus; - box-shadow: $field-focus-ring; - color: $color-white; + border-color: forms_lib.$button-border-color-focus; + box-shadow: forms_lib.$field-focus-ring; + color: lib.$color-white; outline: none; } &:disabled { cursor: not-allowed; - background-color: $color-light-gray-80; + background-color: lib.$color-light-gray-80; } &.is-destructive { - background-color: $color-red-60; + background-color: lib.$color-red-60; &:disabled { - background-color: $color-red-10; + background-color: lib.$color-red-10; } &:hover:not(:disabled) { - background-color: $color-red-70; + background-color: lib.$color-red-70; opacity: 1; } } @@ -51,19 +51,19 @@ &.is-secondary { background-color: transparent; border: none; - color: $color-blue-50; + color: lib.$color-blue-50; &:disabled { opacity: 0.4; } &:active { - color: $color-blue-70; + color: lib.$color-blue-70; } &:hover:not(:disabled) { background-color: transparent; - color: $color-blue-60; + color: lib.$color-blue-60; } } } diff --git a/frontend/src/components/InfoModal.module.scss b/frontend/src/components/InfoModal.module.scss index a07385747d..7b349234a0 100644 --- a/frontend/src/components/InfoModal.module.scss +++ b/frontend/src/components/InfoModal.module.scss @@ -1,9 +1,9 @@ -@import "../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; .underlay { align-items: center; - background-color: rgba($color-black, 0.4); + background-color: rgba(lib.$color-black, 0.4); bottom: 0; display: flex; justify-content: center; @@ -13,59 +13,59 @@ top: 0; .dialog-wrapper { - background: $color-white; - border-radius: $border-radius-md; - box-shadow: $box-shadow-sm; + background: lib.$color-white; + border-radius: lib.$border-radius-md; + box-shadow: lib.$box-shadow-sm; max-width: 90%; position: relative; - width: calc((#{$content-sm} + #{$content-md}) / 2); // 560px + width: calc((#{lib.$content-sm} + #{lib.$content-md}) / 2); // 560px .dismiss-button { align-items: center; background-color: transparent; - border-radius: $border-radius-sm; + border-radius: lib.$border-radius-sm; border-style: none; cursor: pointer; display: flex; height: 30px; justify-content: center; position: absolute; - right: $spacing-sm; - top: $spacing-sm; + right: lib.$spacing-sm; + top: lib.$spacing-sm; width: 30px; padding: 0; &:hover { - background-color: $color-blue-50; - color: $color-white; + background-color: lib.$color-blue-50; + color: lib.$color-white; } } .dialog-container { - padding: $spacing-md; + padding: lib.$spacing-md; - @media screen and #{$mq-md} { - padding: $spacing-lg $spacing-xl; + @media screen and #{lib.$mq-md} { + padding: lib.$spacing-lg lib.$spacing-xl; } .hero { - padding: $spacing-sm 0; + padding: lib.$spacing-sm 0; text-align: start; width: 90%; // Shorter width to make room for the close button on mobile - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { width: 100%; } .headline { - @include text-title-3xs; - font-family: $font-stack-firefox; + @include lib.text-title-3xs; + font-family: lib.$font-stack-firefox; font-weight: 700; } } .modal-body { - @include text-body-sm; + @include lib.text-body-sm; } } } diff --git a/frontend/src/components/InfoTooltip.module.scss b/frontend/src/components/InfoTooltip.module.scss index b34970cff5..253e586578 100644 --- a/frontend/src/components/InfoTooltip.module.scss +++ b/frontend/src/components/InfoTooltip.module.scss @@ -1,11 +1,11 @@ -@import "../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; .wrapper { position: relative; display: none; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { display: initial; } @@ -14,25 +14,25 @@ align-items: center; background-color: transparent; border-style: none; - color: $color-light-gray-70; + color: lib.$color-light-gray-70; } .tooltip { - @include text-body-sm; + @include lib.text-body-sm; $triangleWidth: 10px; position: absolute; - background-color: $color-white; - box-shadow: $box-shadow-sm; - border-radius: $border-radius-sm; - padding: $spacing-md; - min-width: $content-xs; + background-color: lib.$color-white; + box-shadow: lib.$box-shadow-sm; + border-radius: lib.$border-radius-sm; + padding: lib.$spacing-md; + min-width: lib.$content-xs; margin-top: $triangleWidth; margin-left: calc(-1 * ($triangleWidth / 2)); // Overlap .banner in , which is relatively positioned: z-index: 1; &:after { - background-color: $color-white; + background-color: lib.$color-white; content: "\00a0"; display: block; diff --git a/frontend/src/components/dashboard/CornerNotification.module.scss b/frontend/src/components/dashboard/CornerNotification.module.scss index 5cb1685589..a57404082f 100644 --- a/frontend/src/components/dashboard/CornerNotification.module.scss +++ b/frontend/src/components/dashboard/CornerNotification.module.scss @@ -1,50 +1,50 @@ -@import "../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; .wrapper { position: relative; - padding-bottom: calc($spacing-md * 2 + 2rem); + padding-bottom: calc(lib.$spacing-md * 2 + 2rem); flex: 1 0 0; .card { position: fixed; - right: $spacing-md; - bottom: $spacing-md; + right: lib.$spacing-md; + bottom: lib.$spacing-md; display: flex; flex-direction: column; .card-header { - background-color: $color-blue-90; - padding: $spacing-md; - border-top-right-radius: $border-radius-sm; - border-top-left-radius: $border-radius-sm; + background-color: lib.$color-blue-90; + padding: lib.$spacing-md; + border-top-right-radius: lib.$border-radius-sm; + border-top-left-radius: lib.$border-radius-sm; } .card-content { - padding: $spacing-lg; + padding: lib.$spacing-lg; display: flex; flex-direction: column; - gap: $spacing-sm; + gap: lib.$spacing-sm; } .card-cta { - margin-top: $spacing-md; + margin-top: lib.$spacing-md; } .card-title { - color: $color-blue-90; + color: lib.$color-blue-90; - @include text-title-3xs; - font-family: $font-stack-firefox; + @include lib.text-title-3xs; + font-family: lib.$font-stack-firefox; font-weight: 600; word-wrap: break-word; } .card-description { - color: $color-blue-90; + color: lib.$color-blue-90; - @include text-body-md; - font-family: $font-stack-firefox; + @include lib.text-body-md; + font-family: lib.$font-stack-firefox; font-weight: 400; word-wrap: break-word; } @@ -52,14 +52,14 @@ .close-button { background-color: transparent; border-style: none; - border-radius: $border-radius-sm; + border-radius: lib.$border-radius-sm; padding: 0; cursor: pointer; - color: $color-white; + color: lib.$color-white; float: right; &:hover { - color: $color-blue-50; + color: lib.$color-blue-50; } } } @@ -76,9 +76,9 @@ } .card { - border-radius: $border-radius-md; - box-shadow: $box-shadow-sm; - background-color: $color-white; - width: $content-sm; - max-width: calc(100% - $spacing-xl); + border-radius: lib.$border-radius-md; + box-shadow: lib.$box-shadow-sm; + background-color: lib.$color-white; + width: lib.$content-sm; + max-width: calc(100% - lib.$spacing-xl); } diff --git a/frontend/src/components/dashboard/EmailForwardingModal.module.scss b/frontend/src/components/dashboard/EmailForwardingModal.module.scss index f34a5b6813..08f5299aca 100644 --- a/frontend/src/components/dashboard/EmailForwardingModal.module.scss +++ b/frontend/src/components/dashboard/EmailForwardingModal.module.scss @@ -1,10 +1,10 @@ -@import "../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "../../styles/typography"; +@use "../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../styles/typography" as styles-typography; .underlay { position: fixed; - background-color: rgba($color-black, 0.4); + background-color: rgba(lib.$color-black, 0.4); top: 0; bottom: 0; left: 0; @@ -14,14 +14,14 @@ justify-content: center; .dialog-wrapper { - background: $color-light-gray-10; - width: calc(100% - $spacing-2xl); - border-radius: $border-radius-md; - box-shadow: $box-shadow-sm; - padding: $spacing-md; - - @media screen and ($mq-md) { - width: $content-md; + background: lib.$color-light-gray-10; + width: calc(100% - lib.$spacing-2xl); + border-radius: lib.$border-radius-md; + box-shadow: lib.$box-shadow-sm; + padding: lib.$spacing-md; + + @media screen and (lib.$mq-md) { + width: lib.$content-md; } .close-icon { @@ -32,13 +32,13 @@ .hero { display: flex; flex-direction: column; - gap: $spacing-lg; - font-family: $font-stack-firefox; + gap: lib.$spacing-lg; + font-family: lib.$font-stack-firefox; font-weight: 400; text-align: center; - border-radius: $border-radius-md; - background-color: $color-light-gray-10; - padding: $spacing-lg $spacing-md; + border-radius: lib.$border-radius-md; + background-color: lib.$color-light-gray-10; + padding: lib.$spacing-lg lib.$spacing-md; clear: right; img { @@ -54,23 +54,23 @@ .modal-title { text-align: left; - margin-bottom: $spacing-sm; + margin-bottom: lib.$spacing-sm; } .modal-title-success { text-align: center; - margin-bottom: $spacing-sm; + margin-bottom: lib.$spacing-sm; font-weight: 400; } } .headline { - @include text-title-xs { + @include styles-typography.text-title-xs { display: flex; align-items: center; justify-content: center; - padding: $spacing-sm 0; - gap: $spacing-sm; + padding: lib.$spacing-sm 0; + gap: lib.$spacing-sm; font-weight: 100; } } @@ -78,33 +78,33 @@ .modal-title { font-weight: 600; - @include text-body-md; - color: $color-grey-50; + @include lib.text-body-md; + color: tokens.$color-grey-50; } .nevermind-link { background-color: transparent; border-style: none; - color: $color-blue-50; - border-radius: $border-radius-sm; + color: lib.$color-blue-50; + border-radius: lib.$border-radius-sm; &:hover { - color: $color-blue-70; + color: lib.$color-blue-70; text-decoration: underline; cursor: pointer; } } .label-input { - font-family: $font-stack-firefox; - border: 1px solid $color-grey-30; - border-radius: $border-radius-sm; + font-family: lib.$font-stack-firefox; + border: 1px solid tokens.$color-grey-30; + border-radius: lib.$border-radius-sm; font-weight: 100; - padding: $spacing-sm $spacing-md; + padding: lib.$spacing-sm lib.$spacing-md; // Inputs should be atleast 16px if we want to avoid iOS auto-zooming (MPP-3598) - @include text-body-md; - color: $color-grey-40; + @include lib.text-body-md; + color: tokens.$color-grey-40; width: 100%; } diff --git a/frontend/src/components/dashboard/FreeOnboarding.module.scss b/frontend/src/components/dashboard/FreeOnboarding.module.scss index f18bca1786..4a44ec2928 100644 --- a/frontend/src/components/dashboard/FreeOnboarding.module.scss +++ b/frontend/src/components/dashboard/FreeOnboarding.module.scss @@ -1,7 +1,7 @@ -@import "../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; -@import "../../styles/typography"; +@use "../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as lib2; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; +@use "../../styles/typography" as styles-typography; .onboarding { display: flex; @@ -12,21 +12,21 @@ .step, .controls { width: 100%; - max-width: $content-xl; + max-width: lib2.$content-xl; margin: 0 auto; - padding: $spacing-lg; + padding: lib2.$spacing-lg; .generate-new-mask { - padding: $spacing-sm $spacing-2xl; - margin-bottom: $spacing-lg; + padding: lib2.$spacing-sm lib2.$spacing-2xl; + margin-bottom: lib2.$spacing-lg; } } .step.step-copy-mask { .copy-mask-header { - margin-bottom: $spacing-lg; + margin-bottom: lib2.$spacing-lg; - @media screen and #{$mq-lg} { + @media screen and #{lib2.$mq-lg} { margin-bottom: 0; } } @@ -42,19 +42,19 @@ display: flex; flex-direction: column; position: relative; - padding: $spacing-lg $spacing-xl; - margin-top: $spacing-2xl; + padding: lib2.$spacing-lg lib2.$spacing-xl; + margin-top: lib2.$spacing-2xl; box-sizing: border-box; - background: $color-white; + background: lib2.$color-white; background-clip: padding-box; border: solid 2px transparent; - border-radius: $border-radius-md; + border-radius: lib2.$border-radius-md; hr { - background-color: $color-white; + background-color: lib2.$color-white; height: 2px; width: 100%; - margin: $spacing-md 0; + margin: lib2.$spacing-md 0; } } @@ -65,13 +65,13 @@ margin: 0 auto; display: none; - @media screen and #{$mq-lg} { + @media screen and #{lib2.$mq-lg} { display: block; } img { position: absolute; - width: $layout-xl; + width: lib2.$layout-xl; height: 125px; /* both calculations below deal with alignment of custom art element - vertical arrow */ bottom: -30px; @@ -90,7 +90,7 @@ /* sets order for clipped background */ z-index: -1; /* set to the same width of the border for clipping */ - margin: calc($spacing-xs * -1); + margin: calc(lib2.$spacing-xs * -1); border-radius: inherit; background: linear-gradient( to right, @@ -103,11 +103,11 @@ .content-item { display: flex; flex-direction: row; - gap: $spacing-lg; + gap: lib2.$spacing-lg; .content-text { display: flex; - gap: $spacing-md; + gap: lib2.$spacing-md; align-items: flex-start; flex-direction: column; } @@ -115,15 +115,15 @@ .headline { font-weight: 700; - @include text-body-md; - font-family: $font-stack-firefox; - color: $color-blue-80; + @include lib2.text-body-md; + font-family: lib2.$font-stack-firefox; + color: lib2.$color-blue-80; } .description { display: flex; flex-direction: column; - gap: $spacing-lg; + gap: lib2.$spacing-lg; } } @@ -134,65 +134,65 @@ justify-content: space-evenly; .action-complete { - @include text-body-sm; - font-family: $font-stack-firefox; + @include lib2.text-body-sm; + font-family: lib2.$font-stack-firefox; display: flex; flex-direction: column; align-items: center; justify-content: center; - padding: $spacing-md; - border-radius: $border-radius-md; - background-color: $color-white; + padding: lib2.$spacing-md; + border-radius: lib2.$border-radius-md; + background-color: lib2.$color-white; .label { display: inline-flex; align-items: center; - gap: $spacing-xs; - padding-bottom: $spacing-xs; + gap: lib2.$spacing-xs; + padding-bottom: lib2.$spacing-xs; svg { - color: $color-blue-50; + color: lib2.$color-blue-50; } } samp { - @include text-body-lg; - font-family: $font-stack-firefox; + @include lib2.text-body-lg; + font-family: lib2.$font-stack-firefox; font-weight: 700; - color: $color-purple-50; + color: lib2.$color-purple-50; } .domain { - @include text-body-xs; - color: $color-light-gray-90; + @include lib2.text-body-xs; + color: lib2.$color-light-gray-90; } } &.step-custom-domain { - max-width: $content-xl; + max-width: lib2.$content-xl; .subdomain-picker-heading { - padding: $spacing-md 0; + padding: lib2.$spacing-md 0; } .domain-example { - @include font-firefox; - @include text-title-2xs { - color: $color-light-gray-90; + @include lib2.font-firefox; + @include styles-typography.text-title-2xs { + color: lib2.$color-light-gray-90; display: inline-block; - padding: $spacing-md 0; + padding: lib2.$spacing-md 0; text-overflow: ellipsis; white-space: nowrap; overflow-x: hidden; - max-width: $content-xs; + max-width: lib2.$content-xs; } - @media screen and #{$mq-md} { + @media screen and #{lib2.$mq-md} { max-width: 100%; } .customizable-part { - color: $color-violet-50; + color: lib2.$color-violet-50; font-weight: 700; } } @@ -202,7 +202,7 @@ flex-direction: column; margin: 0 auto; - @media screen and #{$mq-md} { + @media screen and #{lib2.$mq-md} { flex-direction: row; justify-content: space-between; align-items: center; @@ -210,15 +210,15 @@ } input { - @include form-input; + @include lib.form-input; flex-grow: 2; margin: 0; - margin-bottom: $spacing-md; + margin-bottom: lib2.$spacing-md; width: 100%; - @media screen and #{ $mq-md } { + @media screen and #{ lib2.$mq-md } { margin: 0; - margin-right: $spacing-md; + margin-right: lib2.$spacing-md; } } @@ -233,14 +233,14 @@ // Hide the description of the add-on on small screens, // because it isn't available on mobile. display: none; - padding: $spacing-md 0; + padding: lib2.$spacing-md 0; - @media screen and #{$mq-md} { + @media screen and #{lib2.$mq-md} { display: block; } } - @media screen and #{$mq-md} { + @media screen and #{lib2.$mq-md} { // Don't show the description of replies on small screens, // to focus on the add-on availability: .reply-description { @@ -252,16 +252,16 @@ } h3 { - @include text-body-md; + @include lib2.text-body-md; } .get-addon-button { - margin-top: $spacing-md; + margin-top: lib2.$spacing-md; // The extension isn't available on mobile, // so hide it on small screens: display: none; - @media screen and #{$mq-md} { + @media screen and #{lib2.$mq-md} { display: inline-block; } } @@ -272,38 +272,38 @@ display: flex; flex-direction: column; align-items: center; - gap: $spacing-xs; + gap: lib2.$spacing-xs; h1 { - @include text-title-sm { + @include styles-typography.text-title-sm { font-weight: 700; - font-family: $font-stack-firefox; - color: $color-purple-50; + font-family: lib2.$font-stack-firefox; + color: lib2.$color-purple-50; } } p { - @include text-body-md; + @include lib2.text-body-md; font-weight: 600; - font-family: $font-stack-firefox; + font-family: lib2.$font-stack-firefox; } } .content-wrapper { display: flex; flex-direction: column; - gap: $spacing-2xl; + gap: lib2.$spacing-2xl; img { - margin: $spacing-2xl auto 0 auto; + margin: lib2.$spacing-2xl auto 0 auto; max-width: 300px; - @media screen and #{$mq-lg} { + @media screen and #{lib2.$mq-lg} { max-width: unset; } } - @media screen and #{$mq-md} { + @media screen and #{lib2.$mq-md} { flex-direction: row; } } @@ -312,7 +312,7 @@ .hidden-mobile { display: none; - @media screen and #{$mq-md} { + @media screen and #{lib2.$mq-md} { display: inline-block; } } @@ -320,20 +320,20 @@ .headline { font-weight: 700; - @include text-body-md; - font-family: $font-stack-firefox; - color: $color-blue-80; + @include lib2.text-body-md; + font-family: lib2.$font-stack-firefox; + color: lib2.$color-blue-80; } .content-text { display: flex; flex-direction: column; - gap: $spacing-lg; + gap: lib2.$spacing-lg; div:nth-child(2) { - border: 3px solid $color-white; - border-radius: $border-radius-md; - padding: $spacing-lg $spacing-2xl; + border: 3px solid lib2.$color-white; + border-radius: lib2.$border-radius-md; + padding: lib2.$spacing-lg lib2.$spacing-2xl; } } @@ -347,7 +347,7 @@ .controls { display: flex; flex-direction: column; - gap: $spacing-xl; + gap: lib2.$spacing-xl; align-items: center; width: 100%; @@ -355,11 +355,11 @@ .next-link { background-color: transparent; border-style: none; - color: $color-blue-50; - border-radius: $border-radius-sm; + color: lib2.$color-blue-50; + border-radius: lib2.$border-radius-sm; &:hover { - color: $color-blue-70; + color: lib2.$color-blue-70; text-decoration: underline; cursor: pointer; } @@ -367,12 +367,12 @@ .next-link { /* allows for flush positioning of link to next page with pagination component */ - margin: calc($spacing-lg * -1) 0 $spacing-xs $spacing-sm; + margin: calc(lib2.$spacing-lg * -1) 0 lib2.$spacing-xs lib2.$spacing-sm; display: flex; align-items: center; } - @media screen and (max-width: #{$screen-md}) { + @media screen and (max-width: #{lib2.$screen-md}) { .get-addon-button { display: none; } @@ -386,37 +386,37 @@ /* this code is copied from progress bar used in premium onboarding */ progress { width: 100%; - max-width: $content-md; + max-width: lib2.$content-md; } .styled-progress-bar { display: flex; width: 100%; - max-width: $content-md; - gap: $spacing-sm; + max-width: lib2.$content-md; + gap: lib2.$spacing-sm; list-style-type: none; li { width: 100%; - color: $color-light-gray-90; + color: lib2.$color-light-gray-90; text-align: center; transition: color 0.2s ease-out; span { display: block; height: 5px; - background-color: $color-light-gray-20; - margin-bottom: $spacing-xs; + background-color: lib2.$color-light-gray-20; + margin-bottom: lib2.$spacing-xs; transition: box-shadow 1s ease-out, color 0.2s ease-out; } &.is-completed { - color: $color-violet-20; + color: lib2.$color-violet-20; span { - box-shadow: inset 300px 0 0 0 $color-violet-20; + box-shadow: inset 300px 0 0 0 lib2.$color-violet-20; } } } @@ -427,16 +427,16 @@ .addon-content-items { flex-direction: column; - @media screen and #{$mq-md} { + @media screen and #{lib2.$mq-md} { flex-direction: row; } } .addon-content-items:nth-child(2) { flex-direction: column-reverse; - margin-top: $spacing-2xl; + margin-top: lib2.$spacing-2xl; - @media screen and #{ $mq-md } { + @media screen and #{ lib2.$mq-md } { flex-direction: row; } } @@ -445,7 +445,7 @@ .small-arrow { display: none; - @media screen and #{$mq-md} { + @media screen and #{lib2.$mq-md} { display: flex; } } @@ -454,14 +454,14 @@ .addon-content-wrapper { display: flex; flex-direction: column; - gap: $spacing-md; - margin-top: $spacing-lg; + gap: lib2.$spacing-md; + margin-top: lib2.$spacing-lg; .addon-content-items { display: flex; flex-direction: row; align-items: center; - gap: $spacing-2xl; + gap: lib2.$spacing-2xl; position: relative; .large-arrow, @@ -471,24 +471,24 @@ /* custom art element that requires absolute positioning */ .large-arrow { - bottom: calc($spacing-2xl * -1); - right: calc($spacing-lg * -5); + bottom: calc(lib2.$spacing-2xl * -1); + right: calc(lib2.$spacing-lg * -5); } /* custom art element that requires absolute positioning */ .small-arrow { - bottom: calc($spacing-2xl * -1); - left: calc($spacing-lg * -5); + bottom: calc(lib2.$spacing-2xl * -1); + left: calc(lib2.$spacing-lg * -5); } .headline { - @include text-body-lg; + @include lib2.text-body-lg; } .addon-content-text { display: flex; flex-direction: column; - gap: $spacing-sm; + gap: lib2.$spacing-sm; position: relative; } } @@ -496,8 +496,8 @@ .action-complete { text-align: center; - background: $color-white; - padding: $spacing-sm $spacing-2xl; + background: lib2.$color-white; + padding: lib2.$spacing-sm lib2.$spacing-2xl; svg { margin: 0 auto; diff --git a/frontend/src/components/dashboard/Onboarding.module.scss b/frontend/src/components/dashboard/Onboarding.module.scss index f9c694408c..f39472b7a5 100644 --- a/frontend/src/components/dashboard/Onboarding.module.scss +++ b/frontend/src/components/dashboard/Onboarding.module.scss @@ -1,29 +1,29 @@ -@import "../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "../../styles/typography"; +@use "../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../styles/typography" as styles-typography; .wrapper { - padding: $spacing-lg; - border-radius: $border-radius-md; - border: 1px solid $color-light-gray-40; + padding: lib.$spacing-lg; + border-radius: lib.$border-radius-md; + border: 1px solid lib.$color-light-gray-40; h2 { - @include text-title-2xs { - @include font-firefox; - padding: $spacing-sm 0; + @include styles-typography.text-title-2xs { + @include lib.font-firefox; + padding: lib.$spacing-sm 0; } } .steps { display: flex; flex-direction: column; - gap: $spacing-lg; + gap: lib.$spacing-lg; list-style-type: none; margin: 0; - padding: $spacing-lg 0; + padding: lib.$spacing-lg 0; counter-reset: step-counter; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { flex-direction: row; } @@ -32,10 +32,10 @@ display: flex; flex-direction: column; align-items: center; - gap: $spacing-xl; - background-color: $color-white; - border-radius: $border-radius-md; - padding: $spacing-lg; + gap: lib.$spacing-xl; + background-color: lib.$color-white; + border-radius: lib.$border-radius-md; + padding: lib.$spacing-lg; counter-increment: step-counter; &::before { @@ -48,7 +48,7 @@ width: 100%; text-align: center; font-weight: 700; - color: $color-light-gray-70; + color: lib.$color-light-gray-70; } p, diff --git a/frontend/src/components/dashboard/PremiumOnboarding.module.scss b/frontend/src/components/dashboard/PremiumOnboarding.module.scss index 18621953d9..9274175ad7 100644 --- a/frontend/src/components/dashboard/PremiumOnboarding.module.scss +++ b/frontend/src/components/dashboard/PremiumOnboarding.module.scss @@ -1,7 +1,7 @@ -@import "../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; -@import "../../styles/typography"; +@use "../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as lib2; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; +@use "../../styles/typography" as styles-typography; .onboarding { display: flex; @@ -12,9 +12,9 @@ .step, .controls { width: 100%; - max-width: $content-lg; + max-width: lib2.$content-lg; margin: 0 auto; - padding: $spacing-lg; + padding: lib2.$spacing-lg; } .step { @@ -24,133 +24,133 @@ justify-content: space-evenly; .title-container { - margin: $spacing-xl 0 $spacing-lg 0; + margin: lib2.$spacing-xl 0 lib2.$spacing-lg 0; } .feature-item-list { list-style-type: none; li { - margin: $spacing-sm 0; + margin: lib2.$spacing-sm 0; display: flex; flex-direction: row; align-items: center; - gap: $spacing-sm; + gap: lib2.$spacing-sm; .check-icon { - fill: $color-blue-50; + fill: lib2.$color-blue-50; min-width: 20px; // Width of the check icons } } } h2 { - @include text-title-sm { - font-family: $font-stack-firefox; - color: $color-purple-50; + @include styles-typography.text-title-sm { + font-family: lib2.$font-stack-firefox; + color: lib2.$color-purple-50; text-align: center; } } .lead { - @include text-title-3xs; - font-family: $font-stack-firefox; + @include lib2.text-title-3xs; + font-family: lib2.$font-stack-firefox; text-align: center; - padding-top: $spacing-md; + padding-top: lib2.$spacing-md; } .description { - @include text-body-sm; + @include lib2.text-body-sm; display: flex; flex-direction: column; align-items: center; - gap: $spacing-2xl; - padding-top: $spacing-lg; - max-width: $content-lg; + gap: lib2.$spacing-2xl; + padding-top: lib2.$spacing-lg; + max-width: lib2.$content-lg; align-self: center; .description-bolded-headline { - @include text-body-md; + @include lib2.text-body-md; font-weight: 600; display: block; } - @media screen and #{$mq-md} { + @media screen and #{lib2.$mq-md} { flex-direction: row; } .content { max-width: 100%; - min-width: $content-xs; + min-width: lib2.$content-xs; } .description-caption { - @include text-body-sm; - color: $color-purple-30; + @include lib2.text-body-sm; + color: lib2.$color-purple-30; font-weight: 500; } } .action-complete { - @include text-body-sm; - font-family: $font-stack-firefox; + @include lib2.text-body-sm; + font-family: lib2.$font-stack-firefox; display: flex; flex-direction: column; align-items: center; justify-content: center; - padding: $spacing-md; - border-radius: $border-radius-md; - background-color: $color-white; + padding: lib2.$spacing-md; + border-radius: lib2.$border-radius-md; + background-color: lib2.$color-white; .label { display: inline-flex; align-items: center; - gap: $spacing-xs; - padding-bottom: $spacing-xs; + gap: lib2.$spacing-xs; + padding-bottom: lib2.$spacing-xs; svg { - color: $color-blue-50; + color: lib2.$color-blue-50; } } samp { - @include text-body-lg; - font-family: $font-stack-firefox; + @include lib2.text-body-lg; + font-family: lib2.$font-stack-firefox; font-weight: 700; - color: $color-purple-50; + color: lib2.$color-purple-50; } .domain { - @include text-body-xs; - color: $color-light-gray-90; + @include lib2.text-body-xs; + color: lib2.$color-light-gray-90; } } &.step-custom-domain { - max-width: $content-xl; + max-width: lib2.$content-xl; .subdomain-picker-heading { - padding: $spacing-md 0; + padding: lib2.$spacing-md 0; } .domain-example { - @include font-firefox; - @include text-title-2xs { - color: $color-light-gray-90; + @include lib2.font-firefox; + @include styles-typography.text-title-2xs { + color: lib2.$color-light-gray-90; display: inline-block; - padding: $spacing-md 0; + padding: lib2.$spacing-md 0; text-overflow: ellipsis; white-space: nowrap; overflow-x: hidden; - max-width: $content-xs; + max-width: lib2.$content-xs; } - @media screen and #{$mq-md} { + @media screen and #{lib2.$mq-md} { max-width: 100%; } .customizable-part { - color: $color-violet-50; + color: lib2.$color-violet-50; font-weight: 700; } } @@ -160,7 +160,7 @@ flex-direction: column; margin: 0 auto; - @media screen and #{$mq-md} { + @media screen and #{lib2.$mq-md} { flex-direction: row; justify-content: space-between; align-items: center; @@ -168,15 +168,15 @@ } input { - @include form-input; + @include lib.form-input; flex-grow: 2; margin: 0; - margin-bottom: $spacing-md; + margin-bottom: lib2.$spacing-md; width: 100%; - @media screen and #{ $mq-md } { + @media screen and #{ lib2.$mq-md } { margin: 0; - margin-right: $spacing-md; + margin-right: lib2.$spacing-md; } } @@ -191,14 +191,14 @@ // Hide the description of the add-on on small screens, // because it isn't available on mobile. display: none; - padding: $spacing-md 0; + padding: lib2.$spacing-md 0; - @media screen and #{$mq-md} { + @media screen and #{lib2.$mq-md} { display: block; } } - @media screen and #{$mq-md} { + @media screen and #{lib2.$mq-md} { // Don't show the description of replies on small screens, // to focus on the add-on availability: .reply-description { @@ -210,16 +210,16 @@ } h3 { - @include text-body-md; + @include lib2.text-body-md; } .get-addon-button { - margin-top: $spacing-md; + margin-top: lib2.$spacing-md; // The extension isn't available on mobile, // so hide it on small screens: display: none; - @media screen and #{$mq-md} { + @media screen and #{lib2.$mq-md} { display: inline-block; } } @@ -229,24 +229,24 @@ .controls { display: flex; flex-direction: column; - gap: $spacing-xl; + gap: lib2.$spacing-xl; align-items: center; width: 100%; .skip-link { background-color: transparent; border-style: none; - color: $color-blue-50; - border-radius: $border-radius-sm; + color: lib2.$color-blue-50; + border-radius: lib2.$border-radius-sm; &:hover { - color: $color-blue-70; + color: lib2.$color-blue-70; text-decoration: underline; cursor: pointer; } } - @media screen and (max-width: #{$screen-md}) { + @media screen and (max-width: #{lib2.$screen-md}) { .get-addon-button { display: none; } @@ -259,37 +259,37 @@ progress { width: 100%; - max-width: $content-md; + max-width: lib2.$content-md; } .styled-progress-bar { display: flex; width: 100%; - max-width: $content-md; - gap: $spacing-sm; + max-width: lib2.$content-md; + gap: lib2.$spacing-sm; list-style-type: none; li { width: 100%; - color: $color-light-gray-90; + color: lib2.$color-light-gray-90; text-align: center; transition: color 0.2s ease-out; span { display: block; height: 5px; - background-color: $color-light-gray-20; - margin-bottom: $spacing-xs; + background-color: lib2.$color-light-gray-20; + margin-bottom: lib2.$spacing-xs; transition: box-shadow 1s ease-out, color 0.2s ease-out; } &.is-completed { - color: $color-violet-30; + color: lib2.$color-violet-30; span { - box-shadow: inset 300px 0 0 0 $color-violet-30; + box-shadow: inset 300px 0 0 0 lib2.$color-violet-30; } } } diff --git a/frontend/src/components/dashboard/ProfileBanners.module.scss b/frontend/src/components/dashboard/ProfileBanners.module.scss index 5c423c5feb..f5cb09d0cd 100644 --- a/frontend/src/components/dashboard/ProfileBanners.module.scss +++ b/frontend/src/components/dashboard/ProfileBanners.module.scss @@ -1,9 +1,10 @@ -@import "../../styles/tokens"; +@use "../../styles/tokens"; +@use "../../../../node_modules/@mozilla-protocol/core/protocol/css/includes/tokens/dist"; .profile-banners { display: flex; flex-direction: column; - gap: $spacing-xl; + gap: dist.$spacing-xl; } .bundle-logo { diff --git a/frontend/src/components/dashboard/SubdomainPicker.module.scss b/frontend/src/components/dashboard/SubdomainPicker.module.scss index 2315181346..db01b606b5 100644 --- a/frontend/src/components/dashboard/SubdomainPicker.module.scss +++ b/frontend/src/components/dashboard/SubdomainPicker.module.scss @@ -1,23 +1,23 @@ -@import "../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; -@import "../../styles/typography"; +@use "../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as lib2; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; +@use "../../styles/typography" as styles-typography; .card { - border-radius: $border-radius-md; - padding: $spacing-lg; - box-shadow: $box-shadow-sm; - background-color: $color-white; + border-radius: lib2.$border-radius-md; + padding: lib2.$spacing-lg; + box-shadow: lib2.$box-shadow-sm; + background-color: lib2.$color-white; display: flex; flex-direction: column; align-items: center; border: 4px solid transparent; &:target { - border-color: $color-blue-50; + border-color: lib2.$color-blue-50; } - @media screen and #{$mq-md} { + @media screen and #{lib2.$mq-md} { flex-direction: row; .description, @@ -27,54 +27,54 @@ } a { - @include text-body-sm; - color: $color-blue-50; + @include lib2.text-body-sm; + color: lib2.$color-blue-50; &:hover, &:focus { - color: $color-blue-60; + color: lib2.$color-blue-60; } } .description { max-width: 100%; - min-width: $content-xs; - border-color: $color-light-gray-30; + min-width: lib2.$content-xs; + border-color: lib2.$color-light-gray-30; border-width: 1px; border-bottom-style: solid; - margin-bottom: $spacing-md; - padding-bottom: $spacing-md; + margin-bottom: lib2.$spacing-md; + padding-bottom: lib2.$spacing-md; - @media screen and #{$mq-md} { + @media screen and #{lib2.$mq-md} { border-bottom-style: none; margin-bottom: 0; padding-bottom: 0; border-right-style: solid; - margin-right: $spacing-lg; - padding-right: $spacing-lg; + margin-right: lib2.$spacing-lg; + padding-right: lib2.$spacing-lg; align-self: start; } .action-step { - @include text-body-sm; - color: $color-violet-50; + @include lib2.text-body-sm; + color: lib2.$color-violet-50; margin-top: 0; - margin-bottom: $spacing-md; + margin-bottom: lib2.$spacing-md; } h2 { - @include text-title-2xs { - padding: $spacing-sm 0; + @include styles-typography.text-title-2xs { + padding: lib2.$spacing-sm 0; } } .lead { - @include text-body-sm; - padding: $spacing-md 0; - color: $color-grey-50; + @include lib2.text-body-sm; + padding: lib2.$spacing-md 0; + color: tokens.$color-grey-50; display: flex; flex-direction: column; - gap: $spacing-md; + gap: lib2.$spacing-md; } } @@ -88,30 +88,30 @@ .input-wrapper { width: 100%; - @media screen and #{$mq-md} { - max-width: $content-sm; + @media screen and #{lib2.$mq-md} { + max-width: lib2.$content-sm; } } .example { - @include font-firefox; - @include text-title-3xs; - color: $color-light-gray-90; + @include lib2.font-firefox; + @include lib2.text-title-3xs; + color: lib2.$color-light-gray-90; display: block; text-overflow: ellipsis; white-space: nowrap; overflow-x: hidden; text-align: center; - margin: $spacing-md 0; + margin: lib2.$spacing-md 0; width: 100%; .subdomain-part { - color: $color-violet-50; + color: lib2.$color-violet-50; font-weight: 700; } } - @media screen and #{$mq-md} { + @media screen and #{lib2.$mq-md} { width: 50%; } @@ -120,21 +120,21 @@ flex-direction: column; width: 100%; - @media screen and #{$mq-md} { + @media screen and #{lib2.$mq-md} { flex-direction: row; justify-content: space-between; } input { - @include form-input; + @include lib.form-input; flex-grow: 2; margin: 0; - margin-bottom: $spacing-md; + margin-bottom: lib2.$spacing-md; width: 100%; - @media screen and #{ $mq-md } { + @media screen and #{ lib2.$mq-md } { margin: 0; - margin-right: $spacing-md; + margin-right: lib2.$spacing-md; } } @@ -144,7 +144,7 @@ } .illustration { - margin-top: $spacing-lg; + margin-top: lib2.$spacing-lg; } } } diff --git a/frontend/src/components/dashboard/aliases/AddressPickerModal.module.scss b/frontend/src/components/dashboard/aliases/AddressPickerModal.module.scss index f7c25456dc..970ef741e8 100644 --- a/frontend/src/components/dashboard/aliases/AddressPickerModal.module.scss +++ b/frontend/src/components/dashboard/aliases/AddressPickerModal.module.scss @@ -1,10 +1,10 @@ -@import "../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; +@use "../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as lib2; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; .underlay { position: fixed; - background-color: rgba($color-black, 0.4); + background-color: rgba(lib2.$color-black, 0.4); top: 0; bottom: 0; left: 0; @@ -14,48 +14,48 @@ justify-content: center; .dialog-wrapper { - background: $color-white; - width: calc((#{$content-sm} + #{$content-md}) / 2); // 560px + background: lib2.$color-white; + width: calc((#{lib2.$content-sm} + #{lib2.$content-md}) / 2); // 560px max-width: 90%; - border-radius: $border-radius-md; - box-shadow: $box-shadow-sm; - padding: $spacing-md; + border-radius: lib2.$border-radius-md; + box-shadow: lib2.$box-shadow-sm; + padding: lib2.$spacing-md; .hero { - @include text-title-3xs; - font-family: $font-stack-firefox; + @include lib2.text-title-3xs; + font-family: lib2.$font-stack-firefox; font-weight: 700; text-align: center; - border-radius: $border-radius-md; - background-color: $color-light-gray-10; - padding: $spacing-md $spacing-sm; + border-radius: lib2.$border-radius-md; + background-color: lib2.$color-light-gray-10; + padding: lib2.$spacing-md lib2.$spacing-sm; - @media screen and #{$mq-sm} { - padding: $spacing-lg $spacing-md; + @media screen and #{lib2.$mq-sm} { + padding: lib2.$spacing-lg lib2.$spacing-md; } } .tip { display: flex; - gap: $spacing-sm; + gap: lib2.$spacing-sm; word-break: break-word; - border-left: 2px solid $color-violet-30; + border-left: 2px solid lib2.$color-violet-30; margin: 0 auto; width: 85%; - padding-left: $spacing-sm; - font-family: $font-stack-base; + padding-left: lib2.$spacing-sm; + font-family: lib2.$font-stack-base; font-weight: 400; - color: $color-grey-50; + color: tokens.$color-grey-50; - @include text-body-sm; + @include lib2.text-body-sm; .tip-icon { // There is limited space on the mask creation modal on mobile. // Hiding this icon until larger screens increases the available space for copy. display: none; - color: $color-pink-30; + color: lib2.$color-pink-30; - @media screen and #{$mq-sm} { + @media screen and #{lib2.$mq-sm} { display: block; } @@ -66,11 +66,11 @@ } hr { - border: 1px solid $color-light-gray-20; - margin-top: $spacing-lg; + border: 1px solid lib2.$color-light-gray-20; + margin-top: lib2.$spacing-lg; - @media screen and #{$mq-sm} { - margin-top: $spacing-xl; + @media screen and #{lib2.$mq-sm} { + margin-top: lib2.$spacing-xl; } } @@ -78,17 +78,17 @@ text-align: center; .form-heading { - color: $color-dark-gray-70; - padding: $spacing-md 0; + color: lib2.$color-dark-gray-70; + padding: lib2.$spacing-md 0; - @media screen and #{$mq-sm} { - padding: $spacing-lg 0; + @media screen and #{lib2.$mq-sm} { + padding: lib2.$spacing-lg 0; } } .prefix { - font-family: $font-stack-firefox; - color: $color-grey-50; + font-family: lib2.$font-stack-firefox; + color: tokens.$color-grey-50; width: 70%; margin: 0 auto; display: flex; @@ -98,26 +98,26 @@ label { text-align: start; font-weight: 600; - margin-top: $spacing-xl; + margin-top: lib2.$spacing-xl; } input { - @include form-input; + @include lib.form-input; // Override form-input's margin: - margin: $spacing-sm 0 0 0; + margin: lib2.$spacing-sm 0 0 0; font-weight: 400; - padding: $spacing-sm; - color: $color-grey-40; - font-family: $font-stack-base; + padding: lib2.$spacing-sm; + color: tokens.$color-grey-40; + font-family: lib2.$font-stack-base; - @include text-body-md; + @include lib2.text-body-md; } } .suffix { - font-family: $font-stack-firefox; + font-family: lib2.$font-stack-firefox; display: block; - padding-top: $spacing-xs; + padding-top: lib2.$spacing-xs; } } @@ -125,34 +125,34 @@ display: flex; align-items: center; justify-content: center; - gap: $spacing-sm; - margin: $spacing-md $spacing-sm; - font-family: $font-stack-firefox; - color: $color-grey-50; + gap: lib2.$spacing-sm; + margin: lib2.$spacing-md lib2.$spacing-sm; + font-family: lib2.$font-stack-firefox; + color: tokens.$color-grey-50; font-weight: 600; - @media screen and #{$mq-sm} { - margin: $spacing-xl $spacing-sm; + @media screen and #{lib2.$mq-sm} { + margin: lib2.$spacing-xl lib2.$spacing-sm; } input[type="checkbox"] { width: 20px; height: 20px; - border: 2px solid $color-grey-20; - border-radius: $border-radius-sm; + border: 2px solid tokens.$color-grey-20; + border-radius: lib2.$border-radius-sm; -webkit-appearance: none; } input[type="checkbox"]:checked { - background-color: $color-blue-50; - border-color: $color-blue-50; + background-color: lib2.$color-blue-50; + border-color: lib2.$color-blue-50; appearance: checkbox; } .promotionals-blocking-description { a { display: block; - color: $color-blue-50; + color: lib2.$color-blue-50; &:hover { text-decoration: underline; @@ -166,26 +166,26 @@ display: flex; align-items: center; justify-content: space-between; - padding-top: $spacing-lg; + padding-top: lib2.$spacing-lg; - @media screen and #{$mq-sm} { - padding-top: $spacing-xl; + @media screen and #{lib2.$mq-sm} { + padding-top: lib2.$spacing-xl; } .cancel-button { border-style: none; background-color: transparent; cursor: pointer; - border-radius: $border-radius-sm; - color: $color-blue-50; - padding: $spacing-sm 0; + border-radius: lib2.$border-radius-sm; + color: lib2.$color-blue-50; + padding: lib2.$spacing-sm 0; &:hover { - color: $color-link-hover; + color: lib2.$color-link-hover; } &:focus { - color: $color-blue-50; + color: lib2.$color-blue-50; } } } diff --git a/frontend/src/components/dashboard/aliases/Alias.module.scss b/frontend/src/components/dashboard/aliases/Alias.module.scss index 48db779548..a538c181b2 100644 --- a/frontend/src/components/dashboard/aliases/Alias.module.scss +++ b/frontend/src/components/dashboard/aliases/Alias.module.scss @@ -1,10 +1,10 @@ -@import "../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; $toggleTransitionDuration: 200ms; .alias-card { - border-radius: $border-radius-md; + border-radius: lib.$border-radius-md; padding: 0; transition: background-color $toggleTransitionDuration ease, @@ -13,25 +13,25 @@ $toggleTransitionDuration: 200ms; background-position: top; &.is-enabled { - box-shadow: $box-shadow-sm; - background-color: $color-white; + box-shadow: lib.$box-shadow-sm; + background-color: lib.$color-white; } &.is-disabled { - background-color: rgba($color-white, 0.5); + background-color: rgba(lib.$color-white, 0.5); } } .main-data { display: flex; - gap: $spacing-xs; - padding: $spacing-md; + gap: lib.$spacing-xs; + padding: lib.$spacing-md; } .controls { - min-width: $content-xs; + min-width: lib.$content-xs; display: flex; - gap: $spacing-xs; + gap: lib.$spacing-xs; align-items: center; flex-wrap: wrap; } @@ -44,22 +44,22 @@ $trackerRemovalIndicatorWidth: 20px; button { border-style: none; background-color: transparent; - color: $color-grey-30; + color: tokens.$color-grey-30; display: flex; align-items: center; - padding: 0 $spacing-xs; + padding: 0 lib.$spacing-xs; } $arrowWidth: 6px; .tracker-removal-indicator-tooltip { position: absolute; - box-shadow: $box-shadow-sm; - padding: $spacing-md; - background-color: $color-white; - border-radius: $border-radius-md; - width: $content-xs; - top: calc(-50% - $spacing-md / 2); - left: $trackerRemovalIndicatorWidth + $spacing-sm + $arrowWidth; + box-shadow: lib.$box-shadow-sm; + padding: lib.$spacing-md; + background-color: lib.$color-white; + border-radius: lib.$border-radius-md; + width: lib.$content-xs; + top: calc(-50% - lib.$spacing-md / 2); + left: $trackerRemovalIndicatorWidth + lib.$spacing-sm + $arrowWidth; // Overlap , which is relatively positioned: z-index: 1; @@ -71,7 +71,7 @@ $trackerRemovalIndicatorWidth: 20px; top: calc(50% - $arrowWidth); left: $arrowWidth * -1; transform: rotate(45deg); - background-color: $color-white; + background-color: lib.$color-white; } } } @@ -81,7 +81,7 @@ $trackerRemovalIndicatorWidth: 20px; // Grows to push the mask address to the next line when present, // but not so much to push itself down below the // `.tracker-removal-indicator-wrapper` if present: - width: calc(100% - $trackerRemovalIndicatorWidth - $spacing-xs); + width: calc(100% - $trackerRemovalIndicatorWidth - lib.$spacing-xs); } .copy-controls { @@ -95,14 +95,14 @@ $trackerRemovalIndicatorWidth: 20px; width: 100%; .copy-button { - @include text-body-lg; + @include lib.text-body-lg; display: flex; align-items: center; background-color: transparent; border: 2px solid transparent; - border-radius: $border-radius-md; + border-radius: lib.$border-radius-md; cursor: pointer; - padding: 0 $spacing-sm; + padding: 0 lib.$spacing-sm; width: 100%; flex-basis: 0; @@ -111,12 +111,12 @@ $trackerRemovalIndicatorWidth: 20px; // relative positioning), Protocol's default outline isn't visible by // default. Thus, we add a focus style using a border, and then remove the // remnants of the outline that are made visible when there's a border. - border-color: $color-blue-50; + border-color: lib.$color-blue-50; outline: none; } .address { - font-family: $font-stack-firefox; + font-family: lib.$font-stack-firefox; overflow: hidden; text-overflow: ellipsis; display: inline-block; @@ -126,13 +126,13 @@ $trackerRemovalIndicatorWidth: 20px; } .copy-icon { - padding: 0 $spacing-sm; + padding: 0 lib.$spacing-sm; opacity: 0.5; display: inline-block; flex-grow: 2; flex-shrink: 0; - max-width: $layout-sm; - color: $color-light-gray-90; + max-width: lib.$layout-sm; + color: lib.$color-light-gray-90; } &:hover { @@ -150,16 +150,16 @@ $trackerRemovalIndicatorWidth: 20px; opacity: 0; pointer-events: none; transition: opacity 2s; - background-color: $color-violet-30; - color: $color-white; - border-radius: $border-radius-md; - padding: 0 $spacing-xs; + background-color: lib.$color-violet-30; + color: lib.$color-white; + border-radius: lib.$border-radius-md; + padding: 0 lib.$spacing-xs; // By allowing this to overlap other elements, // we don't need to reserve empty space for it. // Otherwise, this empty space would push the // .expand-toggle out of the card on small screens: position: absolute; - left: $spacing-xs; + left: lib.$spacing-xs; top: 0; &.is-shown { @@ -176,27 +176,27 @@ $trackerRemovalIndicatorWidth: 20px; align-items: center; flex: 1 0 auto; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { display: flex; } .block-level-label { - @include text-body-sm; + @include lib.text-body-sm; border: 2px solid transparent; - border-radius: $border-radius-sm; - padding: $spacing-sm; + border-radius: lib.$border-radius-sm; + padding: lib.$spacing-sm; font-weight: 600; flex: 1 0 auto; text-align: center; &.block-level-all-label { - color: $color-light-gray-70; - border-color: $color-light-gray-40; + color: lib.$color-light-gray-70; + border-color: lib.$color-light-gray-40; } &.block-level-promotional-label { - color: $color-yellow-50; - border-color: $color-yellow-40; + color: lib.$color-yellow-50; + border-color: lib.$color-yellow-40; } } } @@ -209,7 +209,7 @@ $trackerRemovalIndicatorWidth: 20px; display: flex; } - @media screen and #{$mq-lg} { + @media screen and #{lib.$mq-lg} { // I've grouped these together under the media query to emphasise that they // switch visibility at the same time: // stylelint-disable-next-line no-duplicate-selectors @@ -231,24 +231,24 @@ $trackerRemovalIndicatorWidth: 20px; $arrowWidth: 6px; .tooltip { - @include text-body-sm; + @include lib.text-body-sm; position: absolute; - width: $content-sm; - max-width: calc(100% - 2 * $spacing-xs); - top: calc(100% + $arrowWidth + $spacing-xs); - right: $spacing-xs; - background-color: $color-light-gray-10; - border: 1px solid $color-light-gray-30; - box-shadow: $box-shadow-sm; + width: lib.$content-sm; + max-width: calc(100% - 2 * lib.$spacing-xs); + top: calc(100% + $arrowWidth + lib.$spacing-xs); + right: lib.$spacing-xs; + background-color: lib.$color-light-gray-10; + border: 1px solid lib.$color-light-gray-30; + box-shadow: lib.$box-shadow-sm; display: flex; flex-direction: column; - gap: $spacing-sm; - padding: $spacing-sm $spacing-md; - border-radius: $border-radius-sm; + gap: lib.$spacing-sm; + padding: lib.$spacing-sm lib.$spacing-md; + border-radius: lib.$border-radius-sm; // Prevent other .stat-wrapper elements from overlapping this tooltip: z-index: 2; - @media screen and #{$mq-lg} { + @media screen and #{lib.$mq-lg} { // The wrapper doesn't span the full width on large screens, // so limiting the tooltip to its wrapper's size makes it too thin: max-width: unset; @@ -260,11 +260,11 @@ $trackerRemovalIndicatorWidth: 20px; width: 2 * $arrowWidth; position: absolute; top: -1 * $arrowWidth; - right: $spacing-xl; + right: lib.$spacing-xl; transform: rotate(45deg); - background-color: $color-light-gray-10; - border-top: 1px solid $color-light-gray-30; - border-left: 1px solid $color-light-gray-30; + background-color: lib.$color-light-gray-10; + border-top: 1px solid lib.$color-light-gray-30; + border-left: 1px solid lib.$color-light-gray-30; } } } @@ -285,17 +285,17 @@ $trackerRemovalIndicatorWidth: 20px; flex-direction: column; align-items: center; justify-content: center; - padding: 0 $spacing-md; + padding: 0 lib.$spacing-md; transition: opacity $toggleTransitionDuration ease; .number { - @include text-body-xl; - font-family: $font-stack-firefox; + @include lib.text-body-xl; + font-family: lib.$font-stack-firefox; font-weight: 700; } .label { - @include text-body-sm; + @include lib.text-body-sm; line-height: 1.2; height: 25px; display: flex; @@ -330,9 +330,9 @@ $trackerRemovalIndicatorWidth: 20px; width: 100%; display: flex; flex-direction: row-reverse; - padding: $spacing-sm $spacing-md; - border-bottom: 1px solid $color-light-gray-20; - color: $color-marketing-gray-99; + padding: lib.$spacing-sm lib.$spacing-md; + border-bottom: 1px solid lib.$color-light-gray-20; + color: lib.$color-marketing-gray-99; .label { flex: 1 0 auto; @@ -354,9 +354,9 @@ $trackerRemovalIndicatorWidth: 20px; button { background-color: transparent; border-style: none; - padding: $spacing-sm; - border-radius: $border-radius-sm; - color: $color-dark-gray-50; + padding: lib.$spacing-sm; + border-radius: lib.$border-radius-sm; + color: lib.$color-dark-gray-50; cursor: pointer; svg { @@ -379,25 +379,25 @@ $trackerRemovalIndicatorWidth: 20px; padding 200ms; display: flex; flex-direction: column; - gap: $spacing-md; + gap: lib.$spacing-md; // Make sure hidden elements are unfocusable: visibility: hidden; .is-expanded & { // An arbitrary high value that allows it to expand to its full height: max-height: 1000vh; - border-color: $color-light-gray-20; - padding: $spacing-sm 0; + border-color: lib.$color-light-gray-20; + padding: lib.$spacing-sm 0; visibility: visible; } .row { display: flex; flex-direction: column; - gap: $spacing-md; - padding-inline: $spacing-md; - padding-bottom: $spacing-md; - border-bottom: 1px solid $color-light-gray-20; + gap: lib.$spacing-md; + padding-inline: lib.$spacing-md; + padding-bottom: lib.$spacing-md; + border-bottom: 1px solid lib.$color-light-gray-20; &:last-child { border-bottom-style: none; @@ -407,21 +407,21 @@ $trackerRemovalIndicatorWidth: 20px; dl { flex-grow: 2; display: flex; - gap: $spacing-sm; + gap: lib.$spacing-sm; flex-direction: column; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { flex-direction: row; - gap: $spacing-xl; + gap: lib.$spacing-xl; } dt { - @include text-body-xs; - color: $color-dark-gray-05; + @include lib.text-body-xs; + color: lib.$color-dark-gray-05; } } - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { flex-direction: row; .metadata { @@ -429,7 +429,7 @@ $trackerRemovalIndicatorWidth: 20px; background-repeat: no-repeat; background-position: left center; background-size: $metadataIconSize $metadataIconSize; - padding-left: calc($metadataIconSize + $spacing-md); + padding-left: calc($metadataIconSize + lib.$spacing-md); } .forward-target { diff --git a/frontend/src/components/dashboard/aliases/AliasDeletionButton.module.scss b/frontend/src/components/dashboard/aliases/AliasDeletionButton.module.scss index f6711f31c7..f3ed5a82e9 100644 --- a/frontend/src/components/dashboard/aliases/AliasDeletionButton.module.scss +++ b/frontend/src/components/dashboard/aliases/AliasDeletionButton.module.scss @@ -1,6 +1,6 @@ -@import "../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; +@use "../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as lib2; .deletion-button { display: inline-flex; @@ -8,26 +8,26 @@ justify-content: center; cursor: pointer; background-color: transparent; - padding: $spacing-sm $spacing-md; - border-radius: $border-radius-sm; + padding: lib.$spacing-sm lib.$spacing-md; + border-radius: lib.$border-radius-sm; font-weight: 600; border: 2px solid transparent; // Keep some space for the focus outline margin: 2px; - color: $color-red-60; + color: lib.$color-red-60; line-height: 1.25; - @include text-body-md; + @include lib.text-body-md; &:hover { - background-color: $color-red-70; - color: $color-white; + background-color: lib.$color-red-70; + color: lib.$color-white; } } .underlay { position: fixed; - background-color: rgba($color-black, 0.4); + background-color: rgba(lib.$color-black, 0.4); top: 0; bottom: 0; left: 0; @@ -37,43 +37,43 @@ justify-content: center; .dialog-wrapper { - background: $color-white; - width: calc((#{$content-sm} + #{$content-md}) / 2); // 560px + background: lib.$color-white; + width: calc((#{lib.$content-sm} + #{lib.$content-md}) / 2); // 560px max-width: 90%; - border-radius: $border-radius-md; - box-shadow: $box-shadow-sm; - padding: $spacing-md; + border-radius: lib.$border-radius-md; + box-shadow: lib.$box-shadow-sm; + padding: lib.$spacing-md; overflow-wrap: break-word; .hero { - @include text-title-3xs; - font-family: $font-stack-firefox; + @include lib.text-title-3xs; + font-family: lib.$font-stack-firefox; font-weight: 700; text-align: center; - border-radius: $border-radius-md; - background-color: $color-light-gray-10; - padding: $spacing-lg $spacing-md; + border-radius: lib.$border-radius-md; + background-color: lib.$color-light-gray-10; + padding: lib.$spacing-lg lib.$spacing-md; } .alias-to-delete { - font-family: $font-stack-firefox; + font-family: lib.$font-stack-firefox; display: block; text-align: center; - padding: $spacing-lg $spacing-lg $spacing-sm; + padding: lib.$spacing-lg lib.$spacing-lg lib.$spacing-sm; } .permanence-warning { - @include text-body-sm; + @include lib.text-body-sm; text-align: center; - padding: $spacing-sm $spacing-lg; - color: $color-dark-gray-70; + padding: lib.$spacing-sm lib.$spacing-lg; + color: lib.$color-dark-gray-70; } .usage-warning { - @include text-body-sm; + @include lib.text-body-sm; text-align: center; - padding: $spacing-sm $spacing-lg $spacing-lg; - color: $color-red-50; + padding: lib.$spacing-sm lib.$spacing-lg lib.$spacing-lg; + color: lib.$color-red-50; } .confirm { @@ -82,14 +82,14 @@ align-items: center; label { - background-color: $color-light-gray-10; - border-radius: $border-radius-md; - margin-bottom: $spacing-md; - padding: $spacing-md; + background-color: lib.$color-light-gray-10; + border-radius: lib.$border-radius-md; + margin-bottom: lib.$spacing-md; + padding: lib.$spacing-md; cursor: pointer; input { - margin-right: $spacing-sm; + margin-right: lib.$spacing-sm; } } @@ -98,22 +98,22 @@ display: flex; align-items: center; justify-content: space-between; - padding-top: $spacing-xl; + padding-top: lib.$spacing-xl; .cancel-button { border-style: none; background-color: transparent; cursor: pointer; - border-radius: $border-radius-sm; - color: $color-blue-50; - padding: $spacing-sm $spacing-md; + border-radius: lib.$border-radius-sm; + color: lib.$color-blue-50; + padding: lib.$spacing-sm lib.$spacing-md; &:hover { - color: $color-link-hover; + color: lib.$color-link-hover; } &:focus { - color: $color-blue-50; + color: lib.$color-blue-50; } } } diff --git a/frontend/src/components/dashboard/aliases/AliasDeletionButtonPermanent.module.scss b/frontend/src/components/dashboard/aliases/AliasDeletionButtonPermanent.module.scss index 474c9e53ae..be757a94b0 100644 --- a/frontend/src/components/dashboard/aliases/AliasDeletionButtonPermanent.module.scss +++ b/frontend/src/components/dashboard/aliases/AliasDeletionButtonPermanent.module.scss @@ -1,6 +1,6 @@ -@import "../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; +@use "../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as lib2; .deletion-button { display: inline-flex; @@ -8,26 +8,26 @@ justify-content: center; cursor: pointer; background-color: transparent; - padding: $spacing-sm $spacing-md; - border-radius: $border-radius-sm; + padding: lib.$spacing-sm lib.$spacing-md; + border-radius: lib.$border-radius-sm; font-weight: 600; border: 2px solid transparent; // Keep some space for the focus outline margin: 2px; - color: $color-red-60; + color: lib.$color-red-60; line-height: 1.25; - @include text-body-md; + @include lib.text-body-md; &:hover { - background-color: $color-red-70; - color: $color-white; + background-color: lib.$color-red-70; + color: lib.$color-white; } } .underlay { position: fixed; - background-color: rgba($color-black, 0.4); + background-color: rgba(lib.$color-black, 0.4); top: 0; bottom: 0; left: 0; @@ -37,51 +37,51 @@ justify-content: center; .dialog-wrapper { - background: $color-white; - width: calc((#{$content-sm} + #{$content-md}) / 2); // 560px + background: lib.$color-white; + width: calc((#{lib.$content-sm} + #{lib.$content-md}) / 2); // 560px max-width: 90%; - border-radius: $border-radius-md; - box-shadow: $box-shadow-sm; - padding: $spacing-md; + border-radius: lib.$border-radius-md; + box-shadow: lib.$box-shadow-sm; + padding: lib.$spacing-md; overflow-wrap: break-word; hr { - border: 1px solid $color-grey-10; - margin-top: $spacing-2xl; + border: 1px solid tokens.$color-grey-10; + margin-top: lib.$spacing-2xl; } .hero { - @include text-title-3xs; - font-family: $font-stack-firefox; + @include lib.text-title-3xs; + font-family: lib.$font-stack-firefox; font-weight: 700; text-align: center; - border-radius: $border-radius-md; - background-color: $color-light-gray-10; - padding: $spacing-lg $spacing-md; + border-radius: lib.$border-radius-md; + background-color: lib.$color-light-gray-10; + padding: lib.$spacing-lg lib.$spacing-md; } .alias-to-delete { - @include text-title-3xs; + @include lib.text-title-3xs; font-weight: 700; - font-family: $font-stack-firefox; + font-family: lib.$font-stack-firefox; display: block; text-align: center; - padding: $spacing-lg $spacing-lg $spacing-sm; - color: $color-grey-50; - margin-bottom: $spacing-sm; + padding: lib.$spacing-lg lib.$spacing-lg lib.$spacing-sm; + color: tokens.$color-grey-50; + margin-bottom: lib.$spacing-sm; user-select: auto; -webkit-user-select: auto; // Fixes overflow breaking in iOS devices (MPP-3686) } .permanence-warning { - @include text-body-sm; + @include lib.text-body-sm; font-weight: 600; text-align: center; - padding: $spacing-sm $spacing-lg; - color: $color-grey-50; - margin: 0 auto $spacing-2xl auto; + padding: lib.$spacing-sm lib.$spacing-lg; + color: tokens.$color-grey-50; + margin: 0 auto lib.$spacing-2xl auto; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { width: 75%; } } @@ -91,24 +91,24 @@ display: flex; align-items: center; justify-content: space-between; - padding-top: $spacing-xl; + padding-top: lib.$spacing-xl; .delete-btn { - width: calc($layout-xl + $layout-lg); + width: calc(lib.$layout-xl + lib.$layout-lg); } .cancel-button { border-style: none; background-color: transparent; cursor: pointer; - border-radius: $border-radius-sm; - color: $color-blue-50; - padding: $spacing-sm $spacing-md; + border-radius: lib.$border-radius-sm; + color: lib.$color-blue-50; + padding: lib.$spacing-sm lib.$spacing-md; &:hover { - color: $color-link-hover; + color: lib.$color-link-hover; } &:focus { - color: $color-blue-50; + color: lib.$color-blue-50; } } } @@ -116,22 +116,22 @@ .warning-wrapper { position: relative; display: flex; - border-left: $border-radius-xs solid color $color-error; + border-left: lib.$border-radius-xs solid color tokens.$color-error; align-items: center; - padding-left: $spacing-sm; + padding-left: lib.$spacing-sm; background-color: #fff; - gap: $spacing-md; + gap: lib.$spacing-md; width: 90%; margin: 0 auto; .left-content { display: flex; align-self: self-start; - gap: $spacing-sm; + gap: lib.$spacing-sm; p { - @include text-body-sm; - color: $color-grey-50; + @include lib.text-body-sm; + color: tokens.$color-grey-50; } } diff --git a/frontend/src/components/dashboard/aliases/AliasGenerationButton.module.scss b/frontend/src/components/dashboard/aliases/AliasGenerationButton.module.scss index d61644427b..cd96b6b964 100644 --- a/frontend/src/components/dashboard/aliases/AliasGenerationButton.module.scss +++ b/frontend/src/components/dashboard/aliases/AliasGenerationButton.module.scss @@ -1,4 +1,5 @@ -@import "../../../styles/tokens"; +@use "../../../styles/tokens"; +@use "../../../../../node_modules/@mozilla-protocol/core/protocol/css/includes/tokens/dist"; .button-wrapper { position: relative; @@ -6,36 +7,36 @@ .popup { position: absolute; - margin-top: $spacing-sm; + margin-top: dist.$spacing-sm; // Move to the left by the amount of horizontal padding in .menu-item-wrapper: - margin-left: -1 * $spacing-md; + margin-left: -1 * dist.$spacing-md; // Align the popup to the edge of the screen at narrow widths inset-inline-end: 0; - background-color: $color-white; - border-radius: $border-radius-md; - box-shadow: $box-shadow-md; + background-color: tokens.$color-white; + border-radius: dist.$border-radius-md; + box-shadow: dist.$box-shadow-md; list-style-type: none; - min-width: $content-xs; + min-width: dist.$content-xs; // Overlap the stats with position: relative in the alias cards: z-index: 4; - @media screen and #{$mq-xl} { + @media screen and #{dist.$mq-xl} { inset-inline-end: auto; } .menu-item-wrapper { - font-family: $font-stack-firefox; - color: $color-blue-50; - padding: $spacing-md $spacing-lg; + font-family: dist.$font-stack-firefox; + color: tokens.$color-blue-50; + padding: dist.$spacing-md dist.$spacing-lg; &:first-child { - border-top-left-radius: $border-radius-md; - border-top-right-radius: $border-radius-md; + border-top-left-radius: dist.$border-radius-md; + border-top-right-radius: dist.$border-radius-md; } &:last-child { - border-bottom-left-radius: $border-radius-md; - border-bottom-right-radius: $border-radius-md; + border-bottom-left-radius: dist.$border-radius-md; + border-bottom-right-radius: dist.$border-radius-md; } &:hover { @@ -45,8 +46,8 @@ &:focus { outline: none; - background-color: $color-blue-50; - color: $color-white; + background-color: tokens.$color-blue-50; + color: tokens.$color-white; } } } diff --git a/frontend/src/components/dashboard/aliases/AliasList.module.scss b/frontend/src/components/dashboard/aliases/AliasList.module.scss index d4d06413f2..49d5e0f3ef 100644 --- a/frontend/src/components/dashboard/aliases/AliasList.module.scss +++ b/frontend/src/components/dashboard/aliases/AliasList.module.scss @@ -1,6 +1,6 @@ -@import "../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; +@use "../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as lib2; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; // Resolves mobile extra spacing issues for 2nd step of updated free onboarding (MPP-3597). .alias-list-container { @@ -10,12 +10,12 @@ .controls { display: grid; grid-template-columns: auto 1fr auto; - row-gap: $spacing-md; + row-gap: lib2.$spacing-md; grid-template-areas: "stringFilterToggle categoryFilter newAliasButton" "stringFilter stringFilter stringFilter"; align-items: center; - padding: $spacing-md 0; + padding: lib2.$spacing-md 0; // The focus indicators of contained elements can overflow: overflow: visible; @@ -35,7 +35,7 @@ grid-area: newAliasButton; } - @media screen and #{$mq-md} { + @media screen and #{lib2.$mq-md} { grid-template-areas: "stringFilter categoryFilter newAliasButton"; .string-filter-toggle { @@ -45,7 +45,7 @@ } .alias-card-wrapper { - padding-top: $spacing-lg; + padding-top: lib2.$spacing-lg; list-style-type: none; &:first-child { @@ -55,10 +55,10 @@ .string-filter-toggle { background-color: transparent; - color: $color-dark-gray-50; + color: lib2.$color-dark-gray-50; border-radius: 100%; border-style: none; - padding: $spacing-sm; + padding: lib2.$spacing-sm; cursor: pointer; display: flex; align-items: center; @@ -66,8 +66,8 @@ &.active, &:hover { - background-color: $color-white; - color: $color-blue-50; + background-color: lib2.$color-white; + color: lib2.$color-blue-50; } img { @@ -87,23 +87,23 @@ display: block; } - @media screen and #{$mq-md} { + @media screen and #{lib2.$mq-md} { display: block; } input { - @include form-input; + @include lib.form-input; margin: 0; background-image: url("/icons/search-blue.svg"); background-repeat: no-repeat; - background-position: left $spacing-sm top 50%; + background-position: left lib2.$spacing-sm top 50%; // The search icon is 20px wide, surrounded by padding: - padding-left: calc($spacing-sm + 20px + $spacing-sm); + padding-left: calc(lib2.$spacing-sm + 20px + lib2.$spacing-sm); // Leave some space on the right for `.match-count` - padding-right: calc($spacing-sm + 30px); + padding-right: calc(lib2.$spacing-sm + 30px); width: 100%; - @media screen and #{$mq-md} { + @media screen and #{lib2.$mq-md} { width: auto; } } @@ -113,7 +113,7 @@ transition: opacity 200ms; position: absolute; transform: translateX(-100%); - padding: $spacing-sm; + padding: lib2.$spacing-sm; } // Show the counter when the search field is focused // or has a value: @@ -121,9 +121,9 @@ input:focus + .match-count { opacity: 1; // Make sure input in the input field isn't shown in the background - background-color: $color-white; + background-color: lib2.$color-white; // Then give it the same borders as the input it's covering... - @include form-input; + @include lib.form-input; // ...except where it intersects with the input: border-left: 0 solid transparent; border-top-left-radius: 0; @@ -132,27 +132,27 @@ } .category-filter { - padding-left: $spacing-xs; + padding-left: lib2.$spacing-xs; - @media screen and #{$mq-md} { - padding-left: $spacing-md; + @media screen and #{lib2.$mq-md} { + padding-left: lib2.$spacing-md; } } .empty-state-message { - background-color: $color-white; - border-radius: $border-radius-md; - padding: $spacing-lg; + background-color: lib2.$color-white; + border-radius: lib2.$border-radius-md; + padding: lib2.$spacing-lg; .clear-filters-button { background-color: transparent; border-style: none; - color: $color-blue-50; + color: lib2.$color-blue-50; text-decoration: underline; cursor: pointer; &:hover { - color: $color-blue-40; + color: lib2.$color-blue-40; } } } diff --git a/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss b/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss index bdfd214e58..3bac616d41 100644 --- a/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss +++ b/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss @@ -1,5 +1,5 @@ -@import "~@mozilla-protocol/core/protocol/css/includes/tokens/dist/index"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/tokens/dist/index" as dist; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; $stopLabelHeight: 2rem; $iconHeight: 50px; @@ -13,32 +13,32 @@ $trackLineHeight: 4px; flex-direction: column; align-items: center; touch-action: none; - padding: 0 $spacing-md; + padding: 0 lib.$spacing-md; width: 100%; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { --thumbDiameter: 24px; } - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { flex-direction: row; - gap: $spacing-xl; - padding: 0 $spacing-lg; + gap: lib.$spacing-xl; + padding: 0 lib.$spacing-lg; } - @media screen and #{$mq-lg} { - gap: $layout-2xl; + @media screen and #{lib.$mq-lg} { + gap: lib.$layout-2xl; } .control { width: 100%; - max-width: $content-xs; + max-width: lib.$content-xs; display: flex; flex-direction: column; align-items: center; - padding-left: $spacing-md; + padding-left: lib.$spacing-md; .slider-label { - padding-bottom: $spacing-md; + padding-bottom: lib.$spacing-md; display: inline-block; } @@ -70,7 +70,7 @@ $trackLineHeight: 4px; .track-line { position: absolute; - background-color: $color-light-gray-20; + background-color: lib.$color-light-gray-20; height: $trackLineHeight; top: calc(var(--trackLineOffset) - #{$iconHeight}); width: 100%; @@ -79,10 +79,10 @@ $trackLineHeight: 4px; &:focus-within { .track-line, .track-stop { - background-color: $color-violet-05; + background-color: lib.$color-violet-05; } .track-stop p { - color: $color-violet-90; + color: lib.$color-violet-90; } } @@ -100,15 +100,15 @@ $trackLineHeight: 4px; width: var(--thumbDiameter); height: var(--thumbDiameter); border-radius: 50%; - background-color: $color-violet-20; - border: 4px solid $color-violet-50; - box-shadow: $box-shadow-sm; + background-color: lib.$color-violet-20; + border: 4px solid lib.$color-violet-50; + box-shadow: lib.$box-shadow-sm; &.is-focused { // The alpha value makes sure the lock icon is still visible for // free users when the thumb is placed on the "Promotionals" level: - background-color: rgba($color-purple-30, 0.5); - border-color: $color-purple-60; + background-color: rgba(lib.$color-purple-30, 0.5); + border-color: lib.$color-purple-60; } &.is-dragging { // This class can be used if we want to style the thumb @@ -122,22 +122,22 @@ $trackLineHeight: 4px; width: var(--thumbDiameter); height: var(--thumbDiameter); border-radius: 50%; - background-color: $color-light-gray-20; + background-color: lib.$color-light-gray-20; position: absolute; display: flex; align-items: center; justify-content: center; - padding: $spacing-sm; + padding: lib.$spacing-sm; &:hover { - background-color: $color-purple-10; + background-color: lib.$color-purple-10; img { filter: grayscale(0%); } p { - color: $color-purple-30; + color: lib.$color-purple-30; } } @@ -147,7 +147,7 @@ $trackLineHeight: 4px; // the slider thumb), we set a negative top margin of its own height, // and the height of the thumb: margin-top: calc(-1 * #{$iconHeight} - var(--thumbDiameter)); - padding-bottom: $spacing-sm; + padding-bottom: lib.$spacing-sm; // The image should not take up space within the track stop, // so that the lock icon from .track-stop-promotional can be properly // centered: @@ -155,15 +155,15 @@ $trackLineHeight: 4px; } p { - @include text-body-sm; - color: $color-dark-gray-05; + @include lib.text-body-sm; + color: lib.$color-dark-gray-05; font-weight: 700; position: absolute; // To position the track sop label below the track stops (which are as // high as the slider thumb), we place it at a distance of the thumb // from the top, and some spacing so that it's not glued to the track // stop: - top: calc(var(--thumbDiameter) + #{$spacing-xs}); + top: calc(var(--thumbDiameter) + #{lib.$spacing-xs}); height: $stopLabelHeight; word-break: keep-all; } @@ -173,7 +173,7 @@ $trackLineHeight: 4px; filter: grayscale(0%); } p { - color: $color-black; + color: lib.$color-black; } } @@ -198,7 +198,7 @@ $trackLineHeight: 4px; } } - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { padding-top: 0; .track-stop { @@ -215,14 +215,14 @@ $trackLineHeight: 4px; .value-description { $arrowEdgeLength: 8px; margin-top: $arrowEdgeLength; - background-color: $color-light-gray-10; - padding: $spacing-md $spacing-xl; - border-radius: $border-radius-md; + background-color: lib.$color-light-gray-10; + padding: lib.$spacing-md lib.$spacing-xl; + border-radius: lib.$border-radius-md; position: relative; width: 100%; &::after { - background-color: $color-light-gray-10; + background-color: lib.$color-light-gray-10; height: 2 * $arrowEdgeLength; width: 2 * $arrowEdgeLength; transform: rotate(45deg); @@ -233,15 +233,15 @@ $trackLineHeight: 4px; } .value-description-content { - width: $content-xs; + width: lib.$content-xs; max-width: 100%; display: flex; flex-direction: column; - gap: $spacing-xs; + gap: lib.$spacing-xs; a { display: inline-block; - color: $color-blue-50; + color: lib.$color-blue-50; font-weight: 500; &:hover { @@ -252,11 +252,11 @@ $trackLineHeight: 4px; .locked-message { display: flex; align-items: center; - gap: $spacing-xs; + gap: lib.$spacing-xs; font-weight: 600; .lock-icon { - color: $color-light-gray-70; + color: lib.$color-light-gray-70; } } } @@ -265,11 +265,11 @@ $trackLineHeight: 4px; display: none; } - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { display: flex; align-items: center; justify-content: flex-end; - gap: $spacing-md; + gap: lib.$spacing-md; background-color: transparent; // The content changes depending on the selected blocking mode, // so if the height would be based on the content, switching blocking modes @@ -299,7 +299,7 @@ $trackLineHeight: 4px; position: absolute; // On small screens, `.track-stop` has a top padding of `$spacing-sm` // before the track stop begins: - top: $spacing-sm; + top: lib.$spacing-sm; left: 33%; width: 33%; // This is like the regular .track's bottom padding, but with @@ -312,41 +312,41 @@ $trackLineHeight: 4px; border-style: none; cursor: pointer; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { top: 0; } .track-stop-promotional { - color: $color-light-gray-70; + color: lib.$color-light-gray-70; border-style: none; &:hover { // The standard background colour, because this can't be selected // by a free user: - background-color: $color-light-gray-20; + background-color: lib.$color-light-gray-20; } p { - color: $color-light-gray-70; + color: lib.$color-light-gray-70; text-align: center; .premium-only-marker { - @include text-body-xs; - color: $color-purple-50; + @include lib.text-body-xs; + color: lib.$color-purple-50; } } &.is-selected { p, .lock-icon { - color: $color-purple-50; + color: lib.$color-purple-50; } } } &:hover { p { - color: $color-purple-30; + color: lib.$color-purple-30; } } @@ -354,7 +354,7 @@ $trackLineHeight: 4px; outline: none; .track-stop { - outline: 2px solid $color-blue-50; + outline: 2px solid lib.$color-blue-50; } } } @@ -372,29 +372,29 @@ $trackLineHeight: 4px; justify-content: center; .upgrade-tooltip { - background-color: $color-white; - box-shadow: $box-shadow-sm; + background-color: lib.$color-white; + box-shadow: lib.$box-shadow-sm; display: flex; - padding: $spacing-xl; - gap: $spacing-lg; - width: $content-md; - max-width: calc(100% - $spacing-xl); - border-radius: $border-radius-sm; + padding: lib.$spacing-xl; + gap: lib.$spacing-lg; + width: lib.$content-md; + max-width: calc(100% - lib.$spacing-xl); + border-radius: lib.$border-radius-sm; .close-button { position: absolute; - top: $spacing-sm; - right: $spacing-sm; + top: lib.$spacing-sm; + right: lib.$spacing-sm; padding: 0; background-color: transparent; border-style: none; - border-radius: $border-radius-sm; + border-radius: lib.$border-radius-sm; } .promotionals-blocking-icon { display: none; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { display: inline-block; } } @@ -403,24 +403,24 @@ $trackLineHeight: 4px; display: flex; flex-direction: column; align-items: flex-start; - gap: $spacing-xs; + gap: lib.$spacing-xs; b { display: flex; align-items: center; - gap: $spacing-sm; + gap: lib.$spacing-sm; svg { - color: $color-light-gray-70; + color: lib.$color-light-gray-70; } } a { - color: $color-blue-50; + color: lib.$color-blue-50; // Add some padding to the focus outline, without affecting the CTA's // position: - margin: -1 * $spacing-xs; - padding: $spacing-xs; + margin: -1 * lib.$spacing-xs; + padding: lib.$spacing-xs; &:hover { text-decoration: underline; diff --git a/frontend/src/components/dashboard/aliases/CategoryFilter.module.scss b/frontend/src/components/dashboard/aliases/CategoryFilter.module.scss index 120fd2a7f6..6a360fd42b 100644 --- a/frontend/src/components/dashboard/aliases/CategoryFilter.module.scss +++ b/frontend/src/components/dashboard/aliases/CategoryFilter.module.scss @@ -1,27 +1,28 @@ -@import "../../../styles/tokens"; +@use "../../../styles/tokens"; +@use "../../../../../node_modules/@mozilla-protocol/core/protocol/css/includes/tokens/dist"; .filter-button { background-color: transparent; border-radius: 100%; border-style: none; - padding: $spacing-sm; + padding: dist.$spacing-sm; cursor: pointer; display: flex; align-items: center; justify-content: center; - color: $color-dark-gray-50; + color: dist.$color-dark-gray-50; &:hover { - background-color: $color-white; - color: $color-blue-50; + background-color: tokens.$color-white; + color: tokens.$color-blue-50; } } .filter-menu { - box-shadow: $box-shadow-sm; - background-color: $color-white; - border-radius: $border-radius-md; - font-family: $font-stack-firefox; + box-shadow: dist.$box-shadow-sm; + background-color: tokens.$color-white; + border-radius: dist.$border-radius-md; + font-family: dist.$font-stack-firefox; overflow-y: auto; .filter-form { display: flex; @@ -29,21 +30,21 @@ label, .buttons { - padding: $spacing-md; + padding: dist.$spacing-md; } label { - border-bottom: 1px solid $color-light-gray-20; + border-bottom: 1px solid dist.$color-light-gray-20; input { - margin-right: $spacing-sm; + margin-right: dist.$spacing-sm; } } .buttons { display: flex; flex-direction: column-reverse; - gap: $spacing-sm; + gap: dist.$spacing-sm; } } } diff --git a/frontend/src/components/dashboard/aliases/CustomAddressGenerationModal.module.scss b/frontend/src/components/dashboard/aliases/CustomAddressGenerationModal.module.scss index 843b722508..8c3388723f 100644 --- a/frontend/src/components/dashboard/aliases/CustomAddressGenerationModal.module.scss +++ b/frontend/src/components/dashboard/aliases/CustomAddressGenerationModal.module.scss @@ -1,10 +1,10 @@ -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; -@import "../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as lib2; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; +@use "../../../styles/tokens"; .underlay { position: fixed; - background-color: rgba($color-black, 0.4); + background-color: rgba(tokens.$color-black, 0.4); top: 0; bottom: 0; left: 0; @@ -14,12 +14,12 @@ justify-content: center; .dialog-wrapper { - background: $color-white; - width: calc((#{$content-sm} + #{$content-md}) / 2); // 560px + background: tokens.$color-white; + width: calc((#{lib2.$content-sm} + #{lib2.$content-md}) / 2); // 560px max-width: 90%; - border-radius: $border-radius-md; - box-shadow: $box-shadow-sm; - padding: $spacing-md; + border-radius: lib2.$border-radius-md; + box-shadow: lib2.$box-shadow-sm; + padding: lib2.$spacing-md; outline: none; position: relative; @@ -38,18 +38,19 @@ .invalid-address-msg { display: flex; position: absolute; - box-shadow: $box-shadow-sm; - border-radius: $border-radius-sm; - border-left: $border-radius-md solid color $color-error; + box-shadow: lib2.$box-shadow-sm; + border-radius: lib2.$border-radius-sm; + border-left: lib2.$border-radius-md solid color tokens.$color-error; align-items: center; - padding: $spacing-sm $spacing-md $spacing-sm $spacing-sm; + padding: lib2.$spacing-sm lib2.$spacing-md lib2.$spacing-sm + lib2.$spacing-sm; background-color: #fff; - gap: $spacing-md; + gap: lib2.$spacing-md; .left-content { display: flex; align-self: self-start; - gap: $spacing-sm; + gap: lib2.$spacing-sm; } .prefix-error-icon { @@ -59,52 +60,52 @@ .prefix-error-icon.close-button { background-color: transparent; border-style: none; - border-radius: $border-radius-sm; + border-radius: lib2.$border-radius-sm; cursor: pointer; - color: $color-grey-30; + color: tokens.$color-grey-30; &:hover { - color: $color-blue-50; + color: tokens.$color-blue-50; } } } } .hero { - @include text-title-3xs; - font-family: $font-stack-firefox; + @include lib2.text-title-3xs; + font-family: lib2.$font-stack-firefox; font-weight: 700; text-align: center; - border-radius: $border-radius-md; - background-color: $color-light-gray-10; - padding: $spacing-md $spacing-sm; + border-radius: lib2.$border-radius-md; + background-color: lib2.$color-light-gray-10; + padding: lib2.$spacing-md lib2.$spacing-sm; - @media screen and #{$mq-sm} { - padding: $spacing-lg $spacing-md; + @media screen and #{lib2.$mq-sm} { + padding: lib2.$spacing-lg lib2.$spacing-md; } } .tip { display: flex; - gap: $spacing-sm; + gap: lib2.$spacing-sm; word-break: break-word; - border-left: 2px solid $color-violet-30; + border-left: 2px solid tokens.$color-violet-30; margin: 0 auto; width: 85%; - padding-left: $spacing-sm; - font-family: $font-stack-base; + padding-left: lib2.$spacing-sm; + font-family: lib2.$font-stack-base; font-weight: 400; - color: $color-grey-50; + color: tokens.$color-grey-50; - @include text-body-sm; + @include lib2.text-body-sm; .tip-icon { // There is limited space on the mask creation modal on mobile. // Hiding this icon until larger screens increases the available space for copy. display: none; - color: $color-pink-30; + color: tokens.$color-pink-30; - @media screen and #{$mq-sm} { + @media screen and #{lib2.$mq-sm} { display: block; } @@ -115,11 +116,11 @@ } hr { - border: 1px solid $color-light-gray-20; - margin-top: $spacing-lg; + border: 1px solid lib2.$color-light-gray-20; + margin-top: lib2.$spacing-lg; - @media screen and #{$mq-sm} { - margin-top: $spacing-xl; + @media screen and #{lib2.$mq-sm} { + margin-top: lib2.$spacing-xl; } } @@ -127,17 +128,17 @@ text-align: center; .form-heading { - color: $color-dark-gray-70; - padding: $spacing-md 0; + color: lib2.$color-dark-gray-70; + padding: lib2.$spacing-md 0; - @media screen and #{$mq-sm} { - padding: $spacing-lg 0; + @media screen and #{lib2.$mq-sm} { + padding: lib2.$spacing-lg 0; } } .prefix { - font-family: $font-stack-firefox; - color: $color-grey-50; + font-family: lib2.$font-stack-firefox; + color: tokens.$color-grey-50; width: 70%; margin: 0 auto; display: flex; @@ -147,35 +148,35 @@ label { text-align: start; font-weight: 600; - margin-top: $spacing-xl; + margin-top: lib2.$spacing-xl; } .profile-registered-domain-value { - color: $color-blue-50; + color: tokens.$color-blue-50; word-break: break-word; - margin-top: $spacing-md; - margin-bottom: $spacing-2xl; + margin-top: lib2.$spacing-md; + margin-bottom: lib2.$spacing-2xl; } input { - @include form-input; + @include lib.form-input; // Override form-input's margin: - margin: $spacing-sm 0 0 0; + margin: lib2.$spacing-sm 0 0 0; font-weight: 400; - padding: $spacing-sm; - color: $color-grey-40; - font-family: $font-stack-base; + padding: lib2.$spacing-sm; + color: tokens.$color-grey-40; + font-family: lib2.$font-stack-base; - @include text-body-md; + @include lib2.text-body-md; &.invalid-prefix:focus { - outline: 5px solid $color-red-10; - border: 2px solid $color-error; + outline: 5px solid tokens.$color-red-10; + border: 2px solid tokens.$color-error; } } input:focus { - outline: 5px solid rgba($color-informational, 0.4); - border: 2px solid $color-blue-50; + outline: 5px solid rgba(tokens.$color-informational, 0.4); + border: 2px solid tokens.$color-blue-50; + .wrapper { display: initial; @@ -190,35 +191,35 @@ display: flex; text-align: left; align-items: center; - margin: 0 0 $spacing-sm $spacing-sm; - gap: $spacing-md; + margin: 0 0 lib2.$spacing-sm lib2.$spacing-sm; + gap: lib2.$spacing-md; .error-icons { - min-width: $spacing-md; + min-width: lib2.$spacing-md; flex: 0 0 auto; } .check-icon { - color: $color-green-80; - width: calc($spacing-md - $spacing-xs); - height: calc($spacing-md - $spacing-xs); + color: tokens.$color-green-80; + width: calc(lib2.$spacing-md - lib2.$spacing-xs); + height: calc(lib2.$spacing-md - lib2.$spacing-xs); } .close-icon { - color: $color-error; + color: tokens.$color-error; } } .tooltip { display: initial; - @include text-body-sm; + @include lib2.text-body-sm; $triangleWidth: 10px; position: absolute; - background-color: $color-white; - box-shadow: $box-shadow-sm; - border-radius: $border-radius-sm; - padding: $spacing-md; + background-color: tokens.$color-white; + box-shadow: lib2.$box-shadow-sm; + border-radius: lib2.$border-radius-sm; + padding: lib2.$spacing-md; width: 100%; margin-top: $triangleWidth; left: 0; @@ -226,7 +227,7 @@ z-index: 1; &:after { - background-color: $color-white; + background-color: tokens.$color-white; content: "\00a0"; // Empty space to render the pseudo element for the tooltip triangle pointer display: block; @@ -244,9 +245,9 @@ } .suffix { - font-family: $font-stack-firefox; + font-family: lib2.$font-stack-firefox; display: block; - padding-top: $spacing-xs; + padding-top: lib2.$spacing-xs; } } @@ -254,16 +255,16 @@ display: flex; align-items: center; flex-direction: column; - gap: $spacing-sm; - margin-top: $spacing-md; + gap: lib2.$spacing-sm; + margin-top: lib2.$spacing-md; p { font-weight: 700; - color: $color-purple-60; + color: tokens.$color-purple-60; width: 100%; text-align: center; - @include text-body-lg; + @include lib2.text-body-lg; } } @@ -271,34 +272,34 @@ display: flex; align-items: center; justify-content: center; - gap: $spacing-sm; - margin: $spacing-md $spacing-sm; - font-family: $font-stack-firefox; - color: $color-grey-50; + gap: lib2.$spacing-sm; + margin: lib2.$spacing-md lib2.$spacing-sm; + font-family: lib2.$font-stack-firefox; + color: tokens.$color-grey-50; font-weight: 600; - @media screen and #{$mq-sm} { - margin: $spacing-xl $spacing-sm; + @media screen and #{lib2.$mq-sm} { + margin: lib2.$spacing-xl lib2.$spacing-sm; } input[type="checkbox"] { width: 20px; height: 20px; - border: 2px solid $color-grey-40; - border-radius: $border-radius-sm; + border: 2px solid tokens.$color-grey-40; + border-radius: lib2.$border-radius-sm; -webkit-appearance: none; } input[type="checkbox"]:checked { - background-color: $color-blue-50; - border-color: $color-blue-50; + background-color: tokens.$color-blue-50; + border-color: tokens.$color-blue-50; appearance: checkbox; } .promotionals-blocking-description { a { display: block; - color: $color-blue-50; + color: tokens.$color-blue-50; &:hover { text-decoration: underline; @@ -312,26 +313,26 @@ display: flex; align-items: center; justify-content: space-between; - padding-top: $spacing-lg; + padding-top: lib2.$spacing-lg; - @media screen and #{$mq-sm} { - padding-top: $spacing-xl; + @media screen and #{lib2.$mq-sm} { + padding-top: lib2.$spacing-xl; } .end-button { border-style: none; background-color: transparent; cursor: pointer; - border-radius: $border-radius-sm; - color: $color-blue-50; - padding: $spacing-sm 0; + border-radius: lib2.$border-radius-sm; + color: tokens.$color-blue-50; + padding: lib2.$spacing-sm 0; &:hover { - color: $color-link-hover; + color: lib2.$color-link-hover; } &:focus { - color: $color-blue-50; + color: tokens.$color-blue-50; } } } diff --git a/frontend/src/components/dashboard/aliases/LabelEditor.module.scss b/frontend/src/components/dashboard/aliases/LabelEditor.module.scss index eb8de8efa3..183e9a0fa6 100644 --- a/frontend/src/components/dashboard/aliases/LabelEditor.module.scss +++ b/frontend/src/components/dashboard/aliases/LabelEditor.module.scss @@ -1,35 +1,36 @@ -@import "../../../styles/tokens"; +@use "../../../styles/tokens"; +@use "../../../../../node_modules/@mozilla-protocol/core/protocol/css/includes/tokens/dist"; .label-form { position: relative; } .label-input { - font-family: $font-stack-firefox; + font-family: dist.$font-stack-firefox; background-color: transparent; background-repeat: no-repeat; - background-position: calc(100% - $spacing-xs); + background-position: calc(100% - dist.$spacing-xs); border-color: transparent; - border-radius: $border-radius-sm; - padding: $spacing-xs $spacing-sm; + border-radius: dist.$border-radius-sm; + padding: dist.$spacing-xs dist.$spacing-sm; // The pencil icon is 16px wide - padding-inline-end: calc($spacing-sm + 16px); + padding-inline-end: calc(dist.$spacing-sm + 16px); @media screen and (pointer: coarse) { // On touch screens, the pencil is always visible and left-aligned, to be // flush with the placeholder, because the user can't discover that it's // editable through hovering: background-image: url("/icons/edit.svg"); - background-position: $spacing-xs; - padding-inline-end: $spacing-sm; + background-position: dist.$spacing-xs; + padding-inline-end: dist.$spacing-sm; // The pencil icon is 16px wide - padding-inline-start: calc($spacing-sm + 16px); + padding-inline-start: calc(dist.$spacing-sm + 16px); } &:hover, &:focus { background-image: url("/icons/edit.svg"); - background-color: $color-light-gray-20; + background-color: dist.$color-light-gray-20; } } @@ -38,11 +39,11 @@ top: 40px; left: 0; opacity: 0; - background-color: $color-green-60; - color: $color-white; - border-radius: $border-radius-sm; + background-color: tokens.$color-green-60; + color: tokens.$color-white; + border-radius: dist.$border-radius-sm; transition: opacity 200ms; - padding: $spacing-xs; + padding: dist.$spacing-xs; // The .copy-button-wrapper is positioned as `relative` as well, // leading it to overlap this confirmation message. // Thus, this z-index makes this message overlap that. @@ -56,7 +57,7 @@ &::after { // This is the little arrow that attaches the message to the form $arrowEdgeLength: 4px; - background-color: $color-green-60; + background-color: tokens.$color-green-60; height: 2 * $arrowEdgeLength; width: 2 * $arrowEdgeLength; transform: rotate(45deg); diff --git a/frontend/src/components/dashboard/aliases/MaskCard.module.scss b/frontend/src/components/dashboard/aliases/MaskCard.module.scss index 961892acf2..9af045f7dd 100644 --- a/frontend/src/components/dashboard/aliases/MaskCard.module.scss +++ b/frontend/src/components/dashboard/aliases/MaskCard.module.scss @@ -1,15 +1,15 @@ -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../../styles/tokens"; .card { - background-color: $color-white; - border-radius: $border-radius-md; + background-color: tokens.$color-white; + border-radius: lib.$border-radius-md; transition: box-shadow 200ms ease-in-out, opacity 200ms ease-in-out; &.is-enabled { - box-shadow: $box-shadow-sm; + box-shadow: lib.$box-shadow-sm; } &:not(.is-enabled) { opacity: 0.7; @@ -19,8 +19,8 @@ .bar { display: flex; align-items: center; - gap: $spacing-sm; - padding: $spacing-sm; + gap: lib.$spacing-sm; + padding: lib.$spacing-sm; .summary { flex: 1 1 auto; @@ -32,16 +32,16 @@ flex-wrap: wrap; position: relative; - @media screen and #{$mq-md} { - gap: $spacing-sm; + @media screen and #{lib.$mq-md} { + gap: lib.$spacing-sm; flex-wrap: nowrap; } .label-editor-wrapper { - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { // Same as .summary's gap: - padding-inline-end: $spacing-sm; - border-right: 1px solid $color-grey-10; + padding-inline-end: lib.$spacing-sm; + border-right: 1px solid tokens.$color-grey-10; } } @@ -50,10 +50,10 @@ align-items: center; overflow: hidden; - @media screen and #{$mq-md} { - gap: $spacing-sm; + @media screen and #{lib.$mq-md} { + gap: lib.$spacing-sm; } - @media screen and (max-width: $screen-xs) { + @media screen and (max-width: lib.$screen-xs) { overflow: hidden; } } @@ -61,18 +61,18 @@ .copy-button { display: flex; align-items: center; - gap: $spacing-xs; + gap: lib.$spacing-xs; background-color: transparent; - color: $color-blue-50; + color: tokens.$color-blue-50; border-style: none; - font-family: $font-stack-firefox; + font-family: lib.$font-stack-firefox; font-weight: 500; - border-radius: $border-radius-sm; + border-radius: lib.$border-radius-sm; cursor: pointer; overflow: inherit; &:hover { - color: $color-green-70; + color: tokens.$color-green-70; } samp { @@ -90,18 +90,18 @@ } .copied-confirmation { - background-color: $color-green-50; - padding: $spacing-xs $spacing-sm; - border-radius: $border-radius-md; + background-color: tokens.$color-green-50; + padding: lib.$spacing-xs lib.$spacing-sm; + border-radius: lib.$border-radius-md; font-weight: 600; opacity: 1; pointer-events: none; z-index: 2; // Places copied label above promotions label - @media screen and (max-width: $screen-md) { - @include text-body-sm; + @media screen and (max-width: lib.$screen-md) { + @include lib.text-body-sm; } - @media screen and (max-width: $content-sm) { + @media screen and (max-width: lib.$content-sm) { position: absolute; right: 0; } @@ -116,10 +116,10 @@ .block-level-label { flex: 1 0 auto; text-align: end; - color: $color-grey-50; + color: tokens.$color-grey-50; display: none; - @media screen and #{$mq-lg} { + @media screen and #{lib.$mq-lg} { display: initial; } } @@ -133,18 +133,18 @@ background-color: transparent; border-style: none; cursor: pointer; - color: $color-grey-40; - border-radius: $border-radius-sm; - width: $layout-sm; + color: tokens.$color-grey-40; + border-radius: lib.$border-radius-sm; + width: lib.$layout-sm; z-index: 3; // Ensures that the button gets placed above the copied label (needed for long custom domains at viewport width ~ 780px) @media (any-pointer: coarse) { - width: $layout-md; + width: lib.$layout-md; } &:hover { - background-color: $color-grey-05; - color: $color-blue-50; + background-color: tokens.$color-grey-05; + color: tokens.$color-blue-50; } svg { @@ -175,10 +175,10 @@ grid-template-rows: 1fr; .details { - border-top: 1px solid $color-grey-10; + border-top: 1px solid tokens.$color-grey-10; - @media screen and #{$mq-md} { - padding: $spacing-md $spacing-lg; + @media screen and #{lib.$mq-md} { + padding: lib.$spacing-md lib.$spacing-lg; } } } @@ -188,19 +188,19 @@ transition: padding 200ms ease-in-out; .stats { - @media screen and (max-width: $screen-md) { + @media screen and (max-width: lib.$screen-md) { display: flex; flex-direction: column; - padding-inline: $spacing-md; - border-bottom: 1px solid $color-grey-10; + padding-inline: lib.$spacing-md; + border-bottom: 1px solid tokens.$color-grey-10; .stat { display: flex; justify-content: space-between; - padding-block: $spacing-sm; + padding-block: lib.$spacing-sm; &:not(:last-child) { - border-bottom: 1px solid $color-grey-10; + border-bottom: 1px solid tokens.$color-grey-10; } // De-emphasise stats for: @@ -213,22 +213,22 @@ .is-disabled &.trackers-removed-stat, // - forwarded emails when a mask is not forwarding emails. .is-disabled &.forwarded-stat { - color: $color-grey-40; + color: tokens.$color-grey-40; } dt { - @include text-body-md; + @include lib.text-body-md; } dd { - @include text-body-lg; + @include lib.text-body-lg; font-weight: 700; } } } - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { display: flex; - gap: $spacing-md; + gap: lib.$spacing-md; justify-content: space-between; width: 100%; @@ -237,9 +237,9 @@ display: flex; flex-direction: column-reverse; align-items: center; - background-color: $color-grey-05; - padding: $spacing-sm; - border-radius: $border-radius-sm; + background-color: tokens.$color-grey-05; + padding: lib.$spacing-sm; + border-radius: lib.$border-radius-sm; // De-emphasise stats for: // - blocked emails when a mask is not blocking emails, @@ -251,12 +251,12 @@ .is-disabled &.trackers-removed-stat, // - forwarded emails when a mask is not forwarding emails. .is-disabled &.forwarded-stat { - color: $color-grey-30; + color: tokens.$color-grey-30; } dd { - @include text-title-2xs; - font-family: $font-stack-firefox; + @include lib.text-title-2xs; + font-family: lib.$font-stack-firefox; font-weight: 600; } } @@ -267,7 +267,7 @@ .block-level { a { - color: $color-blue-50; + color: tokens.$color-blue-50; font-weight: 500; &:hover { @@ -275,18 +275,18 @@ } } - @media screen and (max-width: $screen-md) { + @media screen and (max-width: lib.$screen-md) { display: flex; flex-direction: column; - gap: $spacing-md; - padding: $spacing-lg; + gap: lib.$spacing-md; + padding: lib.$spacing-lg; $arrowWidth: 6px; .block-level-setting-description { - @include text-body-sm; - background-color: $color-grey-05; - padding: $spacing-lg; - border-radius: $border-radius-md; + @include lib.text-body-sm; + background-color: tokens.$color-grey-05; + padding: lib.$spacing-lg; + border-radius: lib.$border-radius-md; position: relative; &::after { @@ -296,7 +296,7 @@ position: absolute; top: -1 * $arrowWidth; transform: rotate(45deg); - background-color: $color-grey-05; + background-color: tokens.$color-grey-05; } &.without-chevron::after { @@ -305,7 +305,7 @@ } &.is-blocking-none .block-level-setting-description::after { - left: calc(calc(100% / 6) - ($spacing-md / 2)); + left: calc(calc(100% / 6) - (lib.$spacing-md / 2)); } &.is-blocking-promotionals .block-level-setting-description::after { @@ -313,17 +313,17 @@ } &.is-blocking-all .block-level-setting-description::after { - right: calc(calc(100% / 6) - ($spacing-md / 2)); + right: calc(calc(100% / 6) - (lib.$spacing-md / 2)); } } - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { display: flex; align-items: center; - gap: $spacing-2xl; - padding: $spacing-lg; + gap: lib.$spacing-2xl; + padding: lib.$spacing-lg; .block-level-setting { - flex: 0 0 $content-sm; + flex: 0 0 lib.$content-sm; } .block-level-setting-description { @@ -337,7 +337,7 @@ .block-level-control-wrapper { display: flex; flex-direction: column; - gap: $spacing-md; + gap: lib.$spacing-md; .block-level-control-label { text-align: center; @@ -345,55 +345,55 @@ .block-level-segmented-control { $toggle-border-radius: 40px; - background-color: $color-grey-05; + background-color: tokens.$color-grey-05; border-radius: $toggle-border-radius; - border: $border-radius-xs solid $color-grey-10; - padding: $spacing-xs; + border: lib.$border-radius-xs solid tokens.$color-grey-10; + padding: lib.$spacing-xs; display: flex; align-items: center; justify-content: space-between; - gap: $spacing-md; + gap: lib.$spacing-md; label { flex: 1 1 0; - padding: $spacing-xs $spacing-sm; + padding: lib.$spacing-xs lib.$spacing-sm; display: flex; - gap: $spacing-sm; + gap: lib.$spacing-sm; align-items: center; justify-content: center; - background-color: $color-white; + background-color: tokens.$color-white; border-radius: $toggle-border-radius; font-weight: 500; - color: $color-grey-40; + color: tokens.$color-grey-40; cursor: pointer; &:not(.is-selected) { &:hover { - background-color: $color-violet-30; - color: $color-white; + background-color: tokens.$color-violet-30; + color: tokens.$color-white; } } .is-selected &.is-disabled { &:hover { - border: 1px solid $color-violet-70; + border: 1px solid tokens.$color-violet-70; } } &.is-selected { - background-color: $color-violet-70; - color: $color-white; + background-color: tokens.$color-violet-70; + color: tokens.$color-white; } &.is-focused { - outline: 3px solid $color-blue-50; + outline: 3px solid tokens.$color-blue-50; } &.is-disabled { - padding-inline: $spacing-md; - color: $color-grey-30; + padding-inline: lib.$spacing-md; + color: tokens.$color-grey-30; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { svg { flex: 1 1 10px; } @@ -402,7 +402,7 @@ &.promo-selected { outline-width: 2px; - outline-color: $color-violet-70; + outline-color: tokens.$color-violet-70; outline-style: solid; } } @@ -410,20 +410,20 @@ } .meta { - @media screen and (max-width: $screen-md) { + @media screen and (max-width: lib.$screen-md) { display: flex; flex-direction: column; dl { - @include text-body-sm; + @include lib.text-body-sm; display: flex; flex-direction: column; - gap: $spacing-md; - border-top: 1px solid $color-grey-10; - padding: $spacing-lg; + gap: lib.$spacing-md; + border-top: 1px solid tokens.$color-grey-10; + padding: lib.$spacing-lg; dd { - font-family: $font-stack-firefox; + font-family: lib.$font-stack-firefox; font-weight: 500; img { @@ -435,30 +435,30 @@ .deletion-button-wrapper { display: flex; flex-direction: column; - border-top: 1px solid $color-grey-10; - padding: $spacing-md; + border-top: 1px solid tokens.$color-grey-10; + padding: lib.$spacing-md; } } - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { display: flex; - padding-block: $spacing-lg $spacing-sm; - border-top: 1px solid $color-grey-10; + padding-block: lib.$spacing-lg lib.$spacing-sm; + border-top: 1px solid tokens.$color-grey-10; dl { display: flex; - gap: $spacing-2xl; + gap: lib.$spacing-2xl; font-weight: 500; dt { - @include text-body-sm; - color: $color-grey-50; + @include lib.text-body-sm; + color: tokens.$color-grey-50; } dd { display: flex; align-items: center; - gap: $spacing-sm; - color: $color-grey-60; + gap: lib.$spacing-sm; + color: tokens.$color-grey-60; } } @@ -470,19 +470,19 @@ } .promotions-locked-description-wrapper { - margin-top: $spacing-md; - background: $color-grey-05; - border-radius: $border-radius-md; - padding: $spacing-md; + margin-top: lib.$spacing-md; + background: tokens.$color-grey-05; + border-radius: lib.$border-radius-md; + padding: lib.$spacing-md; display: flex; flex-direction: column; - gap: $spacing-sm; + gap: lib.$spacing-sm; strong { display: flex; align-items: center; - gap: $spacing-sm; - color: $color-grey-50; + gap: lib.$spacing-sm; + color: tokens.$color-grey-50; } } @@ -495,18 +495,18 @@ } .onboarding-alias-container { - width: $content-xs; + width: lib.$content-xs; position: absolute; - padding: $spacing-sm $spacing-md; - color: $color-black; - background: $color-white; - border: solid 4px $color-purple-50; - border-radius: $border-radius-md; - right: $spacing-xl; - box-shadow: $box-shadow-md; + padding: lib.$spacing-sm lib.$spacing-md; + color: tokens.$color-black; + background: tokens.$color-white; + border: solid 4px tokens.$color-purple-50; + border-radius: lib.$border-radius-md; + right: lib.$spacing-xl; + box-shadow: lib.$box-shadow-md; display: none; - @media screen and #{$mq-lg} { + @media screen and #{lib.$mq-lg} { display: block; } } diff --git a/frontend/src/components/dashboard/subdomain/ConfirmationForm.module.scss b/frontend/src/components/dashboard/subdomain/ConfirmationForm.module.scss index 0b0dd64aac..d6634ac581 100644 --- a/frontend/src/components/dashboard/subdomain/ConfirmationForm.module.scss +++ b/frontend/src/components/dashboard/subdomain/ConfirmationForm.module.scss @@ -1,11 +1,11 @@ -@import "../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; .permanence-warning { - @include text-body-sm; + @include lib.text-body-sm; text-align: center; - padding: $spacing-md $spacing-lg; - color: $color-dark-gray-70; + padding: lib.$spacing-md lib.$spacing-lg; + color: lib.$color-dark-gray-70; } .confirm { @@ -14,13 +14,13 @@ align-items: center; label { - background-color: $color-light-gray-10; - border-radius: $border-radius-md; - padding: $spacing-md; + background-color: lib.$color-light-gray-10; + border-radius: lib.$border-radius-md; + padding: lib.$spacing-md; cursor: pointer; input { - margin-right: $spacing-sm; + margin-right: lib.$spacing-sm; } .subdomain { @@ -37,10 +37,10 @@ display: flex; align-items: center; justify-content: space-between; - padding-top: $spacing-xl; + padding-top: lib.$spacing-xl; button[type="submit"] { - background: $color-blue-50; + background: lib.$color-blue-50; opacity: 0.4; &:not(:disabled) { @@ -48,7 +48,7 @@ } &:hover:not(:disabled) { - background-color: $color-blue-60; + background-color: lib.$color-blue-60; opacity: 1; } } @@ -57,16 +57,16 @@ border-style: none; background-color: transparent; cursor: pointer; - border-radius: $border-radius-sm; - color: $color-blue-50; - padding: $spacing-sm $spacing-md; + border-radius: lib.$border-radius-sm; + color: lib.$color-blue-50; + padding: lib.$spacing-sm lib.$spacing-md; &:hover { - color: $color-link-hover; + color: lib.$color-link-hover; } &:focus { - color: $color-blue-50; + color: lib.$color-blue-50; } } } diff --git a/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss b/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss index e68e58aec2..12e5243ea1 100644 --- a/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss +++ b/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss @@ -1,10 +1,10 @@ -@import "../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "../../../styles/typography"; +@use "../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../../styles/typography" as styles-typography; .underlay { position: fixed; - background-color: rgba($color-black, 0.4); + background-color: rgba(lib.$color-black, 0.4); top: 0; bottom: 0; left: 0; @@ -14,49 +14,49 @@ justify-content: center; .dialog-wrapper { - background: $color-white; - width: calc((#{$content-sm} + #{$content-md}) / 2); // 560px + background: lib.$color-white; + width: calc((#{lib.$content-sm} + #{lib.$content-md}) / 2); // 560px max-width: 90%; - border-radius: $border-radius-md; - box-shadow: $box-shadow-sm; - padding: $spacing-md; + border-radius: lib.$border-radius-md; + box-shadow: lib.$box-shadow-sm; + padding: lib.$spacing-md; - $illustrationOverlap: $spacing-lg; + $illustrationOverlap: lib.$spacing-lg; .hero { - @include text-body-lg; - font-family: $font-stack-firefox; + @include lib.text-body-lg; + font-family: lib.$font-stack-firefox; font-weight: 700; text-align: center; - border-radius: $border-radius-md; - background-color: $color-light-gray-10; - padding: $spacing-lg $spacing-md; + border-radius: lib.$border-radius-md; + background-color: lib.$color-light-gray-10; + padding: lib.$spacing-lg lib.$spacing-md; - @media screen and #{$mq-md} { - @include text-title-3xs; + @media screen and #{lib.$mq-md} { + @include lib.text-title-3xs; } .picked-confirmation & { - padding-bottom: $illustrationOverlap + $spacing-lg; + padding-bottom: $illustrationOverlap + lib.$spacing-lg; } .headline { display: flex; align-items: center; justify-content: center; - padding: $spacing-sm 0; - gap: $spacing-sm; + padding: lib.$spacing-sm 0; + gap: lib.$spacing-sm; } .modal-title { font-weight: 400; .subdomain { - @include text-title-xs { + @include styles-typography.text-title-xs { display: block; font-weight: 700; - margin-bottom: $spacing-sm; - padding: $spacing-sm 0; + margin-bottom: lib.$spacing-sm; + padding: lib.$spacing-sm 0; } &::before { @@ -69,31 +69,31 @@ .picked-confirmation-body { display: flex; flex-direction: column; - gap: $spacing-md; + gap: lib.$spacing-md; align-items: center; - padding-top: $spacing-sm; + padding-top: lib.$spacing-sm; .picked-confirmation-body-content { margin: 0 auto; - padding: 0 $spacing-sm; + padding: 0 lib.$spacing-sm; - @media screen and #{$mq-md} { - padding: 0 $spacing-2xl; + @media screen and #{lib.$mq-md} { + padding: 0 lib.$spacing-2xl; } .feature-item-list { - @include text-body-sm; + @include lib.text-body-sm; list-style-type: none; li { - margin: $spacing-sm 0; + margin: lib.$spacing-sm 0; display: flex; flex-direction: row; align-items: center; - gap: $spacing-md; + gap: lib.$spacing-md; .check-icon { - fill: $color-blue-50; + fill: lib.$color-blue-50; min-width: 20px; // Width of the check icons } } diff --git a/frontend/src/components/dashboard/subdomain/SubdomainInfoTooltip.module.scss b/frontend/src/components/dashboard/subdomain/SubdomainInfoTooltip.module.scss index d975c17246..424ebec75f 100644 --- a/frontend/src/components/dashboard/subdomain/SubdomainInfoTooltip.module.scss +++ b/frontend/src/components/dashboard/subdomain/SubdomainInfoTooltip.module.scss @@ -1,25 +1,25 @@ -@import "../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "~@mozilla-protocol/core/protocol/css/includes/mixins/typography"; +@use "../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/mixins/typography"; .info-icon { align-items: center; background-color: transparent; border-style: none; - color: $color-light-gray-70; + color: lib.$color-light-gray-70; cursor: pointer; display: flex; } .explainer-wrapper { - background-color: $color-white; - box-shadow: $box-shadow-sm; - border-radius: $border-radius-md; - padding: $spacing-lg; + background-color: lib.$color-white; + box-shadow: lib.$box-shadow-sm; + border-radius: lib.$border-radius-md; + padding: lib.$spacing-lg; // On small screens, appear as a modal at the top of the viewport: - top: $spacing-lg; - left: $spacing-lg; - right: $spacing-lg; + top: lib.$spacing-lg; + left: lib.$spacing-lg; + right: lib.$spacing-lg; position: absolute; &::before { @@ -30,15 +30,15 @@ top: -6px; // Top, left: needed for tooltip arrow pointer left: 12px; transform: rotate(45deg); - background-color: $color-white; + background-color: lib.$color-white; display: none; } - @media screen and #{$mq-lg} { + @media screen and #{lib.$mq-lg} { // On wider screens, the popover is attached to the indicator: inset: unset; position: unset; - max-width: 8px + $content-sm; // Magic number to avoid empty space near domain name + max-width: 8px + lib.$content-sm; // Magic number to avoid empty space near domain name &::before { display: initial; @@ -46,29 +46,29 @@ } h3 { - @include text-title-3xs; + @include lib.text-title-3xs; - font-family: $font-stack-firefox; - margin-bottom: $spacing-sm; + font-family: lib.$font-stack-firefox; + margin-bottom: lib.$spacing-sm; } p { - @include text-body-sm; + @include lib.text-body-sm; } .close-button { position: absolute; - top: $spacing-sm; - right: $spacing-sm; + top: lib.$spacing-sm; + right: lib.$spacing-sm; background-color: transparent; border-style: none; - border-radius: $border-radius-sm; - width: $spacing-lg; - height: $spacing-lg; + border-radius: lib.$border-radius-sm; + width: lib.$spacing-lg; + height: lib.$spacing-lg; cursor: pointer; &:hover { - color: $color-blue-50; + color: lib.$color-blue-50; } } } diff --git a/frontend/src/components/dashboard/tips/CustomAliasTip.module.scss b/frontend/src/components/dashboard/tips/CustomAliasTip.module.scss index c31074a7ab..7b8cdf64fc 100644 --- a/frontend/src/components/dashboard/tips/CustomAliasTip.module.scss +++ b/frontend/src/components/dashboard/tips/CustomAliasTip.module.scss @@ -1,28 +1,28 @@ -@import "../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; .custom-alias-tip { display: flex; flex-direction: column; - gap: $spacing-xs; + gap: lib.$spacing-xs; - @include text-body-sm; + @include lib.text-body-sm; samp { - @include text-body-sm; - font-family: $font-stack-base; - color: $color-blue-50; + @include lib.text-body-sm; + font-family: lib.$font-stack-base; + color: lib.$color-blue-50; font-weight: 700; } h3 { - @include text-title-3xs; - font-family: $font-stack-firefox; - color: $color-purple-90; + @include lib.text-title-3xs; + font-family: lib.$font-stack-firefox; + color: lib.$color-purple-90; } video { - border-radius: $border-radius-sm; + border-radius: lib.$border-radius-sm; } @media (prefers-reduced-motion) { diff --git a/frontend/src/components/dashboard/tips/GenericTip.module.scss b/frontend/src/components/dashboard/tips/GenericTip.module.scss index 938f9401f9..896928222c 100644 --- a/frontend/src/components/dashboard/tips/GenericTip.module.scss +++ b/frontend/src/components/dashboard/tips/GenericTip.module.scss @@ -1,20 +1,20 @@ -@import "../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; .generic-tip { - @include text-body-sm; + @include lib.text-body-sm; display: flex; flex-direction: column; - gap: $spacing-sm; + gap: lib.$spacing-sm; h3 { - @include text-title-3xs; - font-family: $font-stack-firefox; - color: $color-purple-90; + @include lib.text-title-3xs; + font-family: lib.$font-stack-firefox; + color: lib.$color-purple-90; } video { - border-radius: $border-radius-md; + border-radius: lib.$border-radius-md; // The video is listed last because its content is usually an example of the // textual content, so for screen readers it makes more sense to read it // last. However, we want to visually show it first. @@ -25,7 +25,7 @@ .still-alternative { display: none; - border-radius: $border-radius-md; + border-radius: lib.$border-radius-md; // The video is listed last because its content is usually an example of the // textual content, so for screen readers it makes more sense to read it // last. However, we want to visually show it first. diff --git a/frontend/src/components/dashboard/tips/Tips.module.scss b/frontend/src/components/dashboard/tips/Tips.module.scss index c09340d00c..9ae6110e9b 100644 --- a/frontend/src/components/dashboard/tips/Tips.module.scss +++ b/frontend/src/components/dashboard/tips/Tips.module.scss @@ -1,16 +1,16 @@ -@import "../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; .wrapper { position: relative; - padding-bottom: calc($spacing-md * 2 + 2rem); + padding-bottom: calc(lib.$spacing-md * 2 + 2rem); flex: 1 0 0; .expand-button, .card { position: fixed; - right: $spacing-md; - bottom: $spacing-md; + right: lib.$spacing-md; + bottom: lib.$spacing-md; } // .expand-button and .card stay fixed in the bottom right-hand corner, @@ -28,43 +28,43 @@ .expand-button { display: flex; align-items: center; - gap: $spacing-sm; - background-color: $color-white; - border-radius: $border-radius-md; + gap: lib.$spacing-sm; + background-color: lib.$color-white; + border-radius: lib.$border-radius-md; border-style: none; - padding: $spacing-md; - box-shadow: $box-shadow-sm; + padding: lib.$spacing-md; + box-shadow: lib.$box-shadow-sm; cursor: pointer; &:hover { - background-color: $color-violet-05; + background-color: lib.$color-violet-05; } .icon { - color: $color-pink-30; + color: lib.$color-pink-30; } } .card { - border-radius: $border-radius-md; - padding: $spacing-md; - box-shadow: $box-shadow-sm; - background-color: $color-white; - width: $content-sm; - max-width: calc(100% - $spacing-xl); + border-radius: lib.$border-radius-md; + padding: lib.$spacing-md; + box-shadow: lib.$box-shadow-sm; + background-color: lib.$color-white; + width: lib.$content-sm; + max-width: calc(100% - lib.$spacing-xl); .header { display: flex; align-items: center; - gap: $spacing-sm; - padding: 0 0 $spacing-lg; + gap: lib.$spacing-sm; + padding: 0 0 lib.$spacing-lg; .icon { - color: $color-pink-30; + color: lib.$color-pink-30; } h2 { - @include text-body-sm; + @include lib.text-body-sm; font-weight: 400; flex: 1 0 auto; } @@ -72,7 +72,7 @@ .close-button { background-color: transparent; border-style: none; - border-radius: $border-radius-sm; + border-radius: lib.$border-radius-sm; display: flex; align-items: center; justify-content: center; @@ -80,40 +80,40 @@ cursor: pointer; &:hover { - color: $color-blue-50; + color: lib.$color-blue-50; } } } .summary { display: flex; - gap: $spacing-md; + gap: lib.$spacing-md; justify-content: space-between; - padding-bottom: $spacing-xs; + padding-bottom: lib.$spacing-xs; b { - @include text-title-3xs; - font-family: $font-stack-firefox; + @include lib.text-title-3xs; + font-family: lib.$font-stack-firefox; } button { - @include text-body-sm; + @include lib.text-body-sm; background-color: transparent; border-style: none; - border-radius: $border-radius-sm; - color: $color-blue-50; + border-radius: lib.$border-radius-sm; + color: lib.$color-blue-50; flex-shrink: 0; cursor: pointer; &:hover { - color: $color-blue-70; + color: lib.$color-blue-70; text-decoration: underline; } } } .tip-carousel { - padding: $spacing-md; + padding: lib.$spacing-md; .tip { min-height: 15 * 16px; @@ -121,23 +121,23 @@ .tip-switcher { display: flex; - gap: $spacing-xs; + gap: lib.$spacing-xs; justify-content: center; .panel-dot { - color: $color-light-gray-50; + color: lib.$color-light-gray-50; // Increase the tap target for these dots: - padding: $spacing-sm $spacing-xs; + padding: lib.$spacing-sm lib.$spacing-xs; cursor: pointer; // Avoid layout shifts when adding a bottom border on focus: border: 2px solid transparent; &.is-selected { - color: $color-pink-30; + color: lib.$color-pink-30; } &:hover { - color: $color-pink-40; + color: lib.$color-pink-40; } // .focus-wrapper exists just to add an outlined border to the dot @@ -150,7 +150,7 @@ &:focus { outline: none; .focus-wrapper { - border-color: $color-blue-50; + border-color: lib.$color-blue-50; } } } @@ -158,8 +158,8 @@ } .footer { - border-top: 1px solid $color-light-gray-20; - padding-top: $spacing-md; + border-top: 1px solid lib.$color-light-gray-20; + padding-top: lib.$spacing-md; ul { list-style-type: none; @@ -167,7 +167,7 @@ justify-content: space-between; a { - color: $color-blue-50; + color: lib.$color-blue-50; font-weight: 500; } } diff --git a/frontend/src/components/landing/BundleBanner.module.scss b/frontend/src/components/landing/BundleBanner.module.scss index d621b0942e..20bdf76175 100644 --- a/frontend/src/components/landing/BundleBanner.module.scss +++ b/frontend/src/components/landing/BundleBanner.module.scss @@ -1,58 +1,58 @@ -@import "../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "../../styles/typography"; +@use "../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../styles/typography" as styles-typography; .bundle-banner-wrapper { display: grid; grid-template-columns: 10fr; grid-template-rows: auto; - background-color: $color-violet-80; - border-radius: $border-radius-lg; - gap: $layout-xs; + background-color: lib.$color-violet-80; + border-radius: lib.$border-radius-lg; + gap: lib.$layout-xs; // Snap to 2 columns - @media #{$mq-lg} { + @media #{lib.$mq-lg} { background-image: url("./images/bundle-bg.png"); grid-template-columns: 5fr 5fr; background-size: cover; - gap: $layout-md; + gap: lib.$layout-md; } - @media #{$mq-xl} { + @media #{lib.$mq-xl} { grid-template-columns: 5fr 6fr; } .first-section { - padding-right: $layout-lg; // Shrinks image towards the left side + padding-right: lib.$layout-lg; // Shrinks image towards the left side position: relative; background-image: url("./images/bundle-bg-mobile.png"); background-size: cover; background-repeat: no-repeat; - border-bottom: 4px solid $color-purple-30; - border-radius: $border-radius-lg $border-radius-lg 0 0; + border-bottom: 4px solid lib.$color-purple-30; + border-radius: lib.$border-radius-lg lib.$border-radius-lg 0 0; - @media #{$mq-sm} { - padding-right: $layout-xl; + @media #{lib.$mq-sm} { + padding-right: lib.$layout-xl; } - @media #{$mq-md} { - padding-right: $content-sm; + @media #{lib.$mq-md} { + padding-right: lib.$content-sm; } // Snap to 2 columns - @media #{$mq-lg} { - padding-right: $layout-lg; + @media #{lib.$mq-lg} { + padding-right: lib.$layout-lg; border-bottom: none; background-image: none; } .main-img-wrapper { .main-image { - margin-top: -$layout-lg; // Leave space for image to bleed out of frame + margin-top: -(lib.$layout-lg); // Leave space for image to bleed out of frame - @media #{$mq-lg} { + @media #{lib.$mq-lg} { position: absolute; bottom: 0; margin-top: auto; - margin-left: $spacing-xs; + margin-left: lib.$spacing-xs; max-height: 500px; // Magic number: Ensure image does not overlay other sections } } @@ -61,12 +61,12 @@ .float-features-wrapper { display: none; - @media #{$mq-lg} { + @media #{lib.$mq-lg} { display: block; .float-features-item { - @include text-body-xs; - @include font-firefox; + @include lib.text-body-xs; + @include lib.font-firefox; font-weight: 600; background: rgba( 255, @@ -78,9 +78,9 @@ display: flex; align-items: center; justify-content: center; - gap: $spacing-sm; - padding: $spacing-sm; - border-radius: $border-radius-md; + gap: lib.$spacing-sm; + padding: lib.$spacing-sm; + border-radius: lib.$border-radius-md; .float-features-text { line-height: 100%; @@ -88,16 +88,16 @@ } } .feature-one { - right: $layout-lg; - top: $layout-lg; + right: lib.$layout-lg; + top: lib.$layout-lg; } .feature-two { - right: $layout-xs; - bottom: $layout-2xl; + right: lib.$layout-xs; + bottom: lib.$layout-2xl; } .feature-three { - left: $layout-sm; - bottom: $layout-lg; + left: lib.$layout-sm; + bottom: lib.$layout-lg; .float-features-text { max-width: 100px; @@ -108,23 +108,23 @@ } .second-section { - @media #{$mq-lg} { + @media #{lib.$mq-lg} { display: flex; justify-content: flex-end; } .bundle-banner-description { justify-content: space-between; - color: $color-white; + color: lib.$color-white; height: auto; flex-direction: column; display: flex; - gap: $spacing-md; - padding: 0 $spacing-md $spacing-xl $spacing-md; + gap: lib.$spacing-md; + padding: 0 lib.$spacing-md lib.$spacing-xl lib.$spacing-md; - @media #{$mq-lg} { + @media #{lib.$mq-lg} { height: auto; - padding: $spacing-2xl $spacing-xl; + padding: lib.$spacing-2xl lib.$spacing-xl; } .headline { @@ -134,27 +134,27 @@ } .bundle-banner-one-year-plan-headline { - margin-top: $spacing-md; + margin-top: lib.$spacing-md; } .bundle-banner-value-props { display: flex; flex-direction: column; - gap: $spacing-sm; + gap: lib.$spacing-sm; list-style: none; - @media #{$mq-xl} { + @media #{lib.$mq-xl} { flex-direction: row; } li { border-radius: 50px; // custom border radius to follow design spec background: rgba(255, 255, 255, 0.1); - padding: $spacing-sm $spacing-md; + padding: lib.$spacing-sm lib.$spacing-md; font-weight: 500; display: flex; flex-direction: row; - gap: $spacing-sm; + gap: lib.$spacing-sm; align-items: center; } } @@ -162,11 +162,11 @@ .bottom-section { display: flex; flex-direction: column; - gap: $spacing-md; - margin-top: $spacing-md; + gap: lib.$spacing-md; + margin-top: lib.$spacing-md; align-items: center; - @media #{$mq-lg} { + @media #{lib.$mq-lg} { flex-direction: row; } @@ -174,10 +174,10 @@ font-weight: 600; flex: 1 0 auto; background: white; - max-width: $content-xs; - color: $color-blue-50; - padding: $spacing-sm $spacing-md; - border-radius: $border-radius-sm; + max-width: lib.$content-xs; + color: lib.$color-blue-50; + padding: lib.$spacing-sm lib.$spacing-md; + border-radius: lib.$border-radius-sm; &:hover { opacity: 0.8; @@ -185,41 +185,41 @@ } .money-back-guarantee { - @include text-body-xs; + @include lib.text-body-xs; text-align: center; - @media #{$mq-lg} { + @media #{lib.$mq-lg} { text-align: start; } } } h2 { - @include text-title-sm { - @include font-firefox; + @include styles-typography.text-title-sm { + @include lib.font-firefox; font-weight: 700; } - @media #{$mq-lg} { - @include text-title-xs; + @media #{lib.$mq-lg} { + @include styles-typography.text-title-xs; } } h3 { - @include text-title-xs { - @include font-firefox; + @include styles-typography.text-title-xs { + @include lib.font-firefox; font-weight: 500; } - @media #{$mq-lg} { - @include text-title-2xs; + @media #{lib.$mq-lg} { + @include styles-typography.text-title-2xs; } } .pricing-logo-wrapper { display: flex; flex-direction: column; - gap: $spacing-md; + gap: lib.$spacing-md; align-items: center; .bundle-logo { @@ -227,37 +227,37 @@ max-width: 130px; align-self: center; - @media #{$mq-lg} { + @media #{lib.$mq-lg} { display: block; } } - @media #{$mq-lg} { + @media #{lib.$mq-lg} { flex-direction: row; } .pricing-wrapper { - border-radius: $border-radius-sm; + border-radius: lib.$border-radius-sm; // Using rgba to manipulate alpha value border: 2px solid rgba(255, 255, 255, 0.4); display: flex; flex-direction: column; align-items: center; - @media #{$mq-lg} { + @media #{lib.$mq-lg} { flex-direction: row; } span { - padding: $spacing-xs $spacing-md; + padding: lib.$spacing-xs lib.$spacing-md; display: flex; flex-direction: row; align-items: center; font-weight: 600; - gap: $spacing-xs; + gap: lib.$spacing-xs; .price { - @include text-body-sm; + @include lib.text-body-sm; font-weight: 400; } @@ -265,15 +265,15 @@ // Using rgba to manipulate alpha value border-bottom: 1px solid rgba(255, 255, 255, 0.4); - @media #{$mq-lg} { + @media #{lib.$mq-lg} { border-right: 1px solid rgba(255, 255, 255, 0.4); border-bottom: none; - margin: $spacing-sm 0; + margin: lib.$spacing-sm 0; } } &:nth-child(2) { - @include text-body-xl; + @include lib.text-body-xl; } } } diff --git a/frontend/src/components/landing/DemoPhone.module.scss b/frontend/src/components/landing/DemoPhone.module.scss index 141ef2e0c7..30468b719b 100644 --- a/frontend/src/components/landing/DemoPhone.module.scss +++ b/frontend/src/components/landing/DemoPhone.module.scss @@ -1,17 +1,18 @@ -@import "../../styles/tokens"; +@use "../../styles/tokens"; +@use "../../../../node_modules/@mozilla-protocol/core/protocol/css/includes/tokens/dist"; .container { position: relative; - border-radius: $border-radius-lg; + border-radius: dist.$border-radius-lg; text-align: center; // This leaves some space below the phone on mobile, and is based on the rough // size of the phone image on small screens: height: 650px; - @media screen and #{$mq-lg} { + @media screen and #{dist.$mq-lg} { width: 400px; } - @media screen and #{$mq-xl} { + @media screen and #{dist.$mq-xl} { width: 550px; } @@ -31,7 +32,7 @@ &.foreground { display: none; - @media screen and #{$mq-md} { + @media screen and #{dist.$mq-md} { display: inline-block; } } diff --git a/frontend/src/components/landing/FaqAccordion.module.scss b/frontend/src/components/landing/FaqAccordion.module.scss index 7a354c14b4..baf913f2d0 100644 --- a/frontend/src/components/landing/FaqAccordion.module.scss +++ b/frontend/src/components/landing/FaqAccordion.module.scss @@ -1,27 +1,27 @@ -@import "../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; .entry { button { - @include text-body-xl; + @include lib.text-body-xl; background-color: transparent; border-style: none; display: flex; align-items: center; - gap: $spacing-md; + gap: lib.$spacing-md; justify-content: space-between; cursor: pointer; - padding: $spacing-lg $spacing-md; + padding: lib.$spacing-lg lib.$spacing-md; width: 100%; - border-bottom: 1px solid $color-light-gray-30; + border-bottom: 1px solid lib.$color-light-gray-30; text-align: start; &:focus { outline: none; - border-radius: $border-radius-md; - border-color: $color-light-gray-10; - background-color: $color-light-gray-10; - color: $color-blue-50; + border-radius: lib.$border-radius-md; + border-color: lib.$color-light-gray-10; + background-color: lib.$color-light-gray-10; + color: lib.$color-blue-50; } } @@ -30,10 +30,10 @@ } dd { - padding: $spacing-lg $spacing-md; + padding: lib.$spacing-lg lib.$spacing-md; display: flex; flex-direction: column; - gap: $spacing-md; + gap: lib.$spacing-md; } &.is-collapsed { @@ -45,7 +45,7 @@ .plus-icon { flex: 0 0 auto; transition: transform 0.2s ease-out; - color: $color-blue-50; + color: lib.$color-blue-50; } &.is-expanded { diff --git a/frontend/src/components/landing/HighlightedFeatures.module.scss b/frontend/src/components/landing/HighlightedFeatures.module.scss index 339cb6edaa..9b9e5ef72b 100644 --- a/frontend/src/components/landing/HighlightedFeatures.module.scss +++ b/frontend/src/components/landing/HighlightedFeatures.module.scss @@ -1,18 +1,18 @@ -@import "../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "../../styles/typography"; +@use "../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../styles/typography" as styles-typography; .highlighted-feature-wrapper { display: flex; align-content: center; justify-content: space-between; flex-direction: column-reverse; - margin-bottom: $layout-sm; + margin-bottom: lib.$layout-sm; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { flex-direction: row-reverse; - gap: $spacing-2xl; - margin-bottom: $layout-xs; + gap: lib.$spacing-2xl; + margin-bottom: lib.$layout-xs; &:nth-child(even) { flex-direction: row; @@ -20,59 +20,59 @@ } .new-callout-wrapper { - margin-bottom: $spacing-md; + margin-bottom: lib.$spacing-md; .new-callout { - @include text-body-sm; - background-color: $color-purple-30; - padding: $spacing-xs $spacing-sm; + @include lib.text-body-sm; + background-color: lib.$color-purple-30; + padding: lib.$spacing-xs lib.$spacing-sm; font-weight: 600; text-transform: uppercase; - color: $color-white; + color: lib.$color-white; text-align: center; align-content: center; - border-radius: $border-radius-sm; + border-radius: lib.$border-radius-sm; } } .highlighted-feature-description { - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { flex-direction: row-reverse; align-self: center; width: 100%; } .highlighted-feature-headline { - @include font-firefox; - @include text-body-xl; - margin-bottom: $spacing-sm; + @include lib.font-firefox; + @include lib.text-body-xl; + margin-bottom: lib.$spacing-sm; line-height: 100%; } } .highlighted-feature-image { - padding: $spacing-md; + padding: lib.$spacing-md; width: 100%; align-self: center; } } .section-title-wrapper { - padding: $spacing-lg $spacing-md $spacing-2xl $spacing-md; + padding: lib.$spacing-lg lib.$spacing-md lib.$spacing-2xl lib.$spacing-md; align-content: center; justify-content: center; text-align: center; h2 { - @include font-firefox; - @include text-title-sm { + @include lib.font-firefox; + @include styles-typography.text-title-sm { justify-content: center; width: 100%; } } .cta { - margin: $spacing-xl 0; - min-width: $content-xs; + margin: lib.$spacing-xl 0; + min-width: lib.$content-xs; } } diff --git a/frontend/src/components/landing/PlanMatrix.module.scss b/frontend/src/components/landing/PlanMatrix.module.scss index 288c6d0c1b..6d1e096f26 100644 --- a/frontend/src/components/landing/PlanMatrix.module.scss +++ b/frontend/src/components/landing/PlanMatrix.module.scss @@ -1,21 +1,21 @@ -@import "../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "../../styles/typography"; +@use "../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../styles/typography" as styles-typography; .wrapper { width: 100%; display: flex; flex-direction: column; align-items: center; - gap: $spacing-md; + gap: lib.$spacing-md; .bundle-offer-heading { - @include text-title-xs { + @include styles-typography.text-title-xs { background-image: linear-gradient( to right, - $color-violet-30, - $color-violet-80 20%, - $color-violet-30 80% + lib.$color-violet-30, + lib.$color-violet-80 20%, + lib.$color-violet-30 80% ); background-clip: text; color: transparent; @@ -24,7 +24,7 @@ } } .bundle-offer-content { - max-width: $content-md; + max-width: lib.$content-md; text-align: center; } @@ -35,7 +35,7 @@ display: initial; } - @media screen and #{$mq-xl} { + @media screen and #{lib.$mq-xl} { .desktop { display: table; table-layout: fixed; @@ -46,18 +46,18 @@ } .table-wrapper { - padding: $layout-md 0; + padding: lib.$layout-md 0; } .discount-notice-wrapper { - @include text-body-sm; + @include lib.text-body-sm; line-height: 100%; text-align: center; .discount-notice-container { display: flex; flex-direction: column; - gap: $spacing-sm; + gap: lib.$spacing-sm; .discount-notice-bolded { font-weight: 800; @@ -75,29 +75,29 @@ table.desktop { thead tr, tbody tr, tfoot tr:not(:last-child) { - border-bottom: $row-spacing solid $color-grey-10; + border-bottom: $row-spacing solid tokens.$color-grey-10; } tr { th:first-child { - width: $content-sm; + width: lib.$content-sm; font-weight: 400; text-align: start; } th:not(:first-child), td:not(:first-child) { - min-width: $layout-2xl; + min-width: lib.$layout-2xl; text-align: center; - background-color: $color-white; - padding: $spacing-md; + background-color: lib.$color-white; + padding: lib.$spacing-md; // Fake spacing between the columns. The disadvantage of this method is // that the horizontal bottom border on rows is interrupted, but if we // used the appropriate // border-collapse: separate; // border-spacing: $spacing-md 0; // then we wouldn't have been able to apply a bottom border at all. - border-inline: $spacing-md * 0.5 solid $color-light-gray-10; + border-inline: lib.$spacing-md * 0.5 solid lib.$color-light-gray-10; &:last-child { border-right-style: none; @@ -108,16 +108,16 @@ table.desktop { thead { tr { th:first-child { - color: $color-grey-40; + color: tokens.$color-grey-40; } &:first-child th { - border-top-left-radius: $spacing-sm; - border-top-right-radius: $spacing-sm; + border-top-left-radius: lib.$spacing-sm; + border-top-right-radius: lib.$spacing-sm; } th:not(:first-child) { - color: $color-violet-70; + color: lib.$color-violet-70; font-weight: 600; &.recommended { @@ -138,9 +138,9 @@ table.desktop { // We make it slightly taller than the so that it overlaps the // `thead tr`'s bottom border (with a width of $row-spacing). height: calc(100% + $row-spacing); - background-color: $color-violet-80; - color: $color-white; - border-radius: $spacing-sm; + background-color: lib.$color-violet-80; + color: lib.$color-white; + border-radius: lib.$spacing-sm; margin-bottom: -1 * $row-spacing; } } @@ -158,11 +158,11 @@ table.desktop { } td { - color: $color-dark-gray-50; + color: lib.$color-dark-gray-50; svg { display: inline; - color: $color-blue-60; + color: lib.$color-blue-60; } } } @@ -170,8 +170,8 @@ table.desktop { tfoot { tr:last-child td { - border-bottom-left-radius: $spacing-sm; - border-bottom-right-radius: $spacing-sm; + border-bottom-left-radius: lib.$spacing-sm; + border-bottom-right-radius: lib.$spacing-sm; } tr { @@ -190,7 +190,7 @@ table.desktop { display: flex; flex-direction: column; justify-content: space-between; - gap: $spacing-md; + gap: lib.$spacing-md; width: 100%; height: 100%; text-align: center; @@ -206,25 +206,25 @@ table.desktop { .pricing-overview { display: flex; flex-direction: column; - gap: $spacing-md; + gap: lib.$spacing-md; .price { - @include text-body-lg; - color: $color-blue-50; + @include lib.text-body-lg; + color: lib.$color-blue-50; font-weight: 600; } .pick-button { - border: 2px solid $color-blue-50; - border-radius: $border-radius-sm; - padding: $spacing-sm; + border: 2px solid lib.$color-blue-50; + border-radius: lib.$border-radius-sm; + padding: lib.$spacing-sm; text-align: center; - color: $color-blue-50; + color: lib.$color-blue-50; font-weight: 700; &:hover { - background-color: $color-blue-50; - color: $color-white; + background-color: lib.$color-blue-50; + color: lib.$color-white; cursor: pointer; } } @@ -243,22 +243,22 @@ table.desktop { .plans { display: flex; flex-wrap: wrap; - gap: $spacing-lg; + gap: lib.$spacing-lg; list-style-type: none; .plan { - flex: 1 0 $content-xs; + flex: 1 0 lib.$content-xs; display: flex; flex-direction: column; align-items: center; - gap: $spacing-lg; + gap: lib.$spacing-lg; max-width: 100%; - background-color: $color-white; - border-radius: $border-radius-md; - padding: $spacing-md; + background-color: lib.$color-white; + border-radius: lib.$border-radius-md; + padding: lib.$spacing-md; h3 { - @include text-title-2xs { + @include styles-typography.text-title-2xs { font-weight: 600; text-align: center; } @@ -269,13 +269,13 @@ table.desktop { // Since we want the h3 to spand the full width of the plan, and to be // flush with the top of the .plan, we enlarge it by that amount on the // sides and at the top: - width: calc(100% + 2 * $spacing-md); - margin-top: -1 * $spacing-md; - margin-inline: -1 * $spacing-md; - padding: $spacing-md; - background-color: $color-violet-80; - color: $color-white; - border-radius: $spacing-sm; + width: calc(100% + 2 * lib.$spacing-md); + margin-top: -1 * lib.$spacing-md; + margin-inline: -1 * lib.$spacing-md; + padding: lib.$spacing-md; + background-color: lib.$color-violet-80; + color: lib.$color-white; + border-radius: lib.$spacing-sm; font-weight: 900; } @@ -283,13 +283,13 @@ table.desktop { flex: 1 0 auto; display: flex; flex-direction: column; - gap: $spacing-sm; + gap: lib.$spacing-sm; width: 100%; list-style-type: none; li { display: flex; - gap: $spacing-xs; + gap: lib.$spacing-xs; .description { flex: 1 0 auto; @@ -300,13 +300,13 @@ table.desktop { } } .availability { - flex: 0 1 $layout-2xs; + flex: 0 1 lib.$layout-2xs; display: flex; align-items: center; justify-content: center; svg { - color: $color-blue-60; + color: lib.$color-blue-60; } } } @@ -315,29 +315,29 @@ table.desktop { .pricing { display: flex; flex-direction: column; - gap: $spacing-md; + gap: lib.$spacing-md; width: 100%; .pricing-overview { display: flex; flex-direction: column; align-items: center; - gap: $spacing-md; + gap: lib.$spacing-md; width: 100%; $billingMonthlyNoteHeight: 18px; - padding-bottom: $billingMonthlyNoteHeight + $spacing-md; + padding-bottom: $billingMonthlyNoteHeight + lib.$spacing-md; small { - @include text-body-sm; + @include lib.text-body-sm; display: block; height: $billingMonthlyNoteHeight; line-height: $billingMonthlyNoteHeight; - margin-bottom: -1 * ($billingMonthlyNoteHeight + $spacing-md); + margin-bottom: -1 * ($billingMonthlyNoteHeight + lib.$spacing-md); } .price { - @include text-body-xl; - color: $color-blue-50; + @include lib.text-body-xl; + color: lib.$color-blue-50; font-weight: 600; } @@ -346,17 +346,17 @@ table.desktop { } .pick-button { - border: 2px solid $color-blue-50; - border-radius: $border-radius-sm; + border: 2px solid lib.$color-blue-50; + border-radius: lib.$border-radius-sm; width: 100%; - padding: $spacing-sm; + padding: lib.$spacing-sm; text-align: center; - color: $color-blue-50; + color: lib.$color-blue-50; font-weight: 700; &:hover { - background-color: $color-blue-50; - color: $color-white; + background-color: lib.$color-blue-50; + color: lib.$color-white; cursor: pointer; } } @@ -368,23 +368,23 @@ table.desktop { .pricing-toggle { display: flex; - background-color: $color-grey-10; - padding: $spacing-xs; - border-radius: $border-radius-lg; + background-color: tokens.$color-grey-10; + padding: lib.$spacing-xs; + border-radius: lib.$border-radius-lg; > div { - @include text-body-sm; + @include lib.text-body-sm; width: 50%; - padding: $spacing-xs $spacing-sm; + padding: lib.$spacing-xs lib.$spacing-sm; text-align: center; - color: $color-grey-40; + color: tokens.$color-grey-40; font-weight: 500; cursor: pointer; &.is-selected { - background-color: $color-white; - border-radius: $border-radius-lg; - color: $color-blue-50; + background-color: lib.$color-white; + border-radius: lib.$border-radius-lg; + color: lib.$color-blue-50; } } } diff --git a/frontend/src/components/landing/Reviews.module.scss b/frontend/src/components/landing/Reviews.module.scss index 07b62cc539..9e34b0e68e 100644 --- a/frontend/src/components/landing/Reviews.module.scss +++ b/frontend/src/components/landing/Reviews.module.scss @@ -1,20 +1,20 @@ -@import "../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "../../styles/typography"; +@use "../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../styles/typography" as styles-typography; .reviews { display: flex; flex-direction: column; - max-width: $content-max; + max-width: lib.$content-max; width: 100%; margin: 0 auto; align-items: center; - padding: $spacing-md $spacing-lg 0 $spacing-lg; + padding: lib.$spacing-md lib.$spacing-lg 0 lib.$spacing-lg; justify-content: center; - gap: $layout-sm; + gap: lib.$layout-sm; - @media screen and #{$mq-xl} { - gap: $layout-md; + @media screen and #{lib.$mq-xl} { + gap: lib.$layout-md; flex-direction: row; align-items: flex-start; } @@ -23,37 +23,37 @@ .left-container { display: flex; flex-direction: row; - gap: $spacing-md; + gap: lib.$spacing-md; } .right-container { display: flex; flex-direction: column; - gap: $spacing-2xl; + gap: lib.$spacing-2xl; } .logo-container { display: flex; - font-family: $font-stack-base; - color: $color-white; - width: $layout-2xl; + font-family: lib.$font-stack-base; + color: lib.$color-white; + width: lib.$layout-2xl; flex-direction: column; align-items: center; - border-radius: $border-radius-lg; - padding: $spacing-md 0; - background-color: $color-violet-50; + border-radius: lib.$border-radius-lg; + padding: lib.$spacing-md 0; + background-color: lib.$color-violet-50; .logo { - width: $layout-xl; - padding: $spacing-sm; + width: lib.$layout-xl; + padding: lib.$spacing-sm; } .logo-title { - @include text-body-md; + @include lib.text-body-md; font-weight: 400; } .logo-text { - @include text-title-xs { + @include styles-typography.text-title-xs { font-weight: 600; text-transform: uppercase; } @@ -66,27 +66,27 @@ justify-content: center; align-items: center; text-align: center; - padding: 0 $spacing-md; - gap: $spacing-xs; - background-color: $color-white; - border-radius: $border-radius-lg; + padding: 0 lib.$spacing-md; + gap: lib.$spacing-xs; + background-color: lib.$color-white; + border-radius: lib.$border-radius-lg; - @media screen and #{$mq-lg} { + @media screen and #{lib.$mq-lg} { align-items: center; } .rating { .title { - @include text-title-2xl { - font-family: $font-stack-firefox; + @include styles-typography.text-title-2xl { + font-family: lib.$font-stack-firefox; font-weight: 600; } } .text { - @include text-body-sm; - color: $color-grey-40; - font-family: $font-stack-base; + @include lib.text-body-sm; + color: tokens.$color-grey-40; + font-family: lib.$font-stack-base; font-weight: 500; } } @@ -95,16 +95,16 @@ .stars { display: flex; flex-direction: row; - padding-left: $spacing-xs; + padding-left: lib.$spacing-xs; } .star { - color: $color-yellow-50; + color: lib.$color-yellow-50; } .empty-star { - color: $color-white; - stroke: $color-grey-20; + color: lib.$color-white; + stroke: tokens.$color-grey-20; stroke-width: 2px; } @@ -112,9 +112,9 @@ appearance: none; border: none; padding: 0; - color: $color-grey-30; + color: tokens.$color-grey-30; background: transparent; - width: $layout-sm; + width: lib.$layout-sm; align-self: center; cursor: pointer; } @@ -123,35 +123,35 @@ position: absolute; display: none; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { display: flex; left: 30px; // Following design specs top: -10px; // Following design specs } svg { - color: $color-purple-60; - height: $layout-sm; + color: lib.$color-purple-60; + height: lib.$layout-sm; } } .reviews-container { display: flex; flex-direction: row; - gap: $spacing-lg; - background-color: $color-white; - padding: $spacing-md; - border-radius: $border-radius-lg; + gap: lib.$spacing-lg; + background-color: lib.$color-white; + padding: lib.$spacing-md; + border-radius: lib.$border-radius-lg; align-items: flex-start; // magic number: set to avoid shifting - no character limit on reviews yet. - min-height: calc($layout-2xl * 2); + min-height: calc(lib.$layout-2xl * 2); position: relative; - @media screen and #{$mq-lg} { + @media screen and #{lib.$mq-lg} { // magic number: set to avoid shifting - no character limit on reviews yet. min-height: 200px; - padding: $spacing-lg $spacing-md; + padding: lib.$spacing-lg lib.$spacing-md; } .review-item { @@ -165,24 +165,24 @@ align-items: flex-start; position: relative; // allows us to animate - scroll width: 100%; // allows us to animate - scroll - padding: $spacing-sm; + padding: lib.$spacing-sm; // queries set to these static widths to prevent shifting - @media screen and #{$mq-sm} { - width: $content-xs; + @media screen and #{lib.$mq-sm} { + width: lib.$content-xs; } - @media screen and #{$mq-md} { - width: $content-sm; + @media screen and #{lib.$mq-md} { + width: lib.$content-sm; } - @media screen and #{$mq-xl} { - width: $content-md; + @media screen and #{lib.$mq-xl} { + width: lib.$content-md; } .text { width: 100%; ul { - padding-left: $spacing-md; + padding-left: lib.$spacing-md; } } } @@ -192,29 +192,29 @@ flex-direction: column; align-items: flex-start; font-weight: 400; - gap: $spacing-md; - padding: 0 0 $spacing-md 0; - font-family: $font-stack-base; + gap: lib.$spacing-md; + padding: 0 0 lib.$spacing-md 0; + font-family: lib.$font-stack-base; - @media screen and #{$mq-xl} { + @media screen and #{lib.$mq-xl} { flex-direction: row; align-items: flex-end; } .name { - @include text-title-3xs; - font-family: $font-stack-firefox; + @include lib.text-title-3xs; + font-family: lib.$font-stack-firefox; font-weight: 600; } .source { - @include text-body-sm; - color: $color-grey-30; + @include lib.text-body-sm; + color: tokens.$color-grey-30; } .star { - color: $color-yellow-40; - margin: 0 $spacing-xs 0 ($spacing-sm * -1); + color: lib.$color-yellow-40; + margin: 0 lib.$spacing-xs 0 (lib.$spacing-sm * -1); } } } @@ -279,14 +279,14 @@ .mobile-controls { display: flex; justify-content: space-between; - gap: $spacing-sm; + gap: lib.$spacing-sm; button { width: 50%; - padding: $spacing-md 0; + padding: lib.$spacing-md 0; &:hover { - background-color: $color-grey-10; + background-color: tokens.$color-grey-10; } svg { @@ -298,7 +298,7 @@ .hidden-mobile { display: none; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { display: inline-block; } } @@ -307,7 +307,7 @@ .show-mobile { display: flex; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { display: none; } } diff --git a/frontend/src/components/layout/Layout.module.scss b/frontend/src/components/layout/Layout.module.scss index 566085bef1..aacde0f76e 100644 --- a/frontend/src/components/layout/Layout.module.scss +++ b/frontend/src/components/layout/Layout.module.scss @@ -1,5 +1,5 @@ -@import "../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; .patch3701 { pointer-events: none; @@ -12,17 +12,17 @@ // See https://fkhadra.github.io/react-toastify/how-to-style#override-css-variables --toastify-toast-width: 95%; - --toastify-color-light: #{$color-white}; - --toastify-color-dark: #{$color-grey-50}; - --toastify-color-info: #{$color-blue-50}; - --toastify-color-success: #{$color-green-50}; - --toastify-color-warning: #{$color-yellow-50}; - --toastify-color-error: #{$color-red-60}; - - --toastify-text-color-info: #{$color-white}; - --toastify-text-color-success: #{$color-grey-50}; - --toastify-text-color-warning: #{$color-grey-50}; - --toastify-text-color-error: #{$color-white}; + --toastify-color-light: #{lib.$color-white}; + --toastify-color-dark: #{tokens.$color-grey-50}; + --toastify-color-info: #{lib.$color-blue-50}; + --toastify-color-success: #{lib.$color-green-50}; + --toastify-color-warning: #{lib.$color-yellow-50}; + --toastify-color-error: #{lib.$color-red-60}; + + --toastify-text-color-info: #{lib.$color-white}; + --toastify-text-color-success: #{tokens.$color-grey-50}; + --toastify-text-color-warning: #{tokens.$color-grey-50}; + --toastify-text-color-error: #{lib.$color-white}; --toastify-toast-min-height: $layout-md; --toastify-toast-max-height: $layout-md; @@ -33,105 +33,105 @@ $toastify-toast-close-button: var(--toast-close-button); // Targets the toast container and sets max-width to prevent it from obstructing nav items on larger screens. .toast-container { - max-width: $content-xl; + max-width: lib.$content-xl; } .toast { - @include text-body-sm; + @include lib.text-body-sm; text-align: center; font-weight: 400; - min-height: $layout-md; - border-radius: $border-radius-sm; - font-family: $font-stack-base; + min-height: lib.$layout-md; + border-radius: lib.$border-radius-sm; + font-family: lib.$font-stack-base; padding: 0; - max-width: $content-xl; + max-width: lib.$content-xl; margin: 0 auto; - @media screen and (max-width: $screen-sm) { - width: calc(100% - $spacing-xl); - margin-top: $spacing-md; + @media screen and (max-width: lib.$screen-sm) { + width: calc(100% - lib.$spacing-xl); + margin-top: lib.$spacing-md; } &:global { &[class*="toast--error"], &[class*="toast--info"] { [id*="close-toast-button-icon"] { - color: #{$color-white}; + color: #{lib.$color-white}; } } & > [class*="toast-body"] { - padding: $spacing-md; + padding: lib.$spacing-md; } &[class*="toast--success"], &[class*="toast--warning"] { [id*="close-toast-button-icon"] { - color: #{$color-grey-50}; + color: #{tokens.$color-grey-50}; } } &[class*="toast--error"] { - --toast-close-button: #{$color-red-60}; + --toast-close-button: #{lib.$color-red-60}; &:hover { - --toastify-color-error: #{$color-red-70}; + --toastify-color-error: #{lib.$color-red-70}; } &:active, &:focus { - --toastify-color-error: #{$color-red-80}; - --toast-close-button: #{$color-red-80}; + --toastify-color-error: #{lib.$color-red-80}; + --toast-close-button: #{lib.$color-red-80}; } } &[class*="toast--info"] { - --toast-close-button: #{$color-blue-50}; + --toast-close-button: #{lib.$color-blue-50}; &:hover { - --toast-close-button: #{$color-blue-60}; + --toast-close-button: #{lib.$color-blue-60}; } &:active, &:focus { - --toastify-color-info: #{$color-blue-70}; - --toast-close-button: #{$color-blue-70}; + --toastify-color-info: #{lib.$color-blue-70}; + --toast-close-button: #{lib.$color-blue-70}; } } &[class*="toast--success"] { - --toast-close-button: #{$color-green-50}; + --toast-close-button: #{lib.$color-green-50}; &:hover { - --toast-close-button: #{$color-green-60}; + --toast-close-button: #{lib.$color-green-60}; } &:active, &:focus { - --toastify-color-success: #{$color-green-70}; - --toast-close-button: #{$color-green-70}; + --toastify-color-success: #{lib.$color-green-70}; + --toast-close-button: #{lib.$color-green-70}; } } &[class*="toast--warning"] { - --toast-close-button: #{$color-yellow-50}; + --toast-close-button: #{lib.$color-yellow-50}; &:hover { - --toast-close-button: #{$color-yellow-60}; + --toast-close-button: #{lib.$color-yellow-60}; } &:active, &:focus { - --toastify-color-warning: #{$color-yellow-70}; - --toast-close-button: #{$color-yellow-70}; + --toastify-color-warning: #{lib.$color-yellow-70}; + --toast-close-button: #{lib.$color-yellow-70}; } } } } .close-toast-button-container { - padding: $spacing-md; - border-radius: 0 $border-radius-sm $border-radius-sm 0; + padding: lib.$spacing-md; + border-radius: 0 lib.$border-radius-sm lib.$border-radius-sm 0; background-color: $toastify-toast-close-button; display: flex; flex-direction: column; @@ -174,7 +174,7 @@ $toastify-toast-close-button: var(--toast-close-button); box-shadow: none; } - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { grid-template-areas: "logoWrapper navWrapper appPickerWrapper userMenuWrapper"; } @@ -182,23 +182,23 @@ $toastify-toast-close-button: var(--toast-close-button); grid-area: logoWrapper; display: flex; align-items: center; - max-width: calc(100% - $spacing-md); + max-width: calc(100% - lib.$spacing-md); &.plain-page { - padding-top: $layout-sm; + padding-top: lib.$layout-sm; justify-content: center; } .logo { display: inline-flex; align-items: center; - gap: $spacing-sm; - padding: $spacing-md; + gap: lib.$spacing-sm; + padding: lib.$spacing-md; // aligns the logo with the main content @ 1152px, // snaps logo in to place essentially - @media screen and (min-width: $content-xl) { - padding: $spacing-md $spacing-xl; + @media screen and (min-width: lib.$content-xl) { + padding: lib.$spacing-md lib.$spacing-xl; } .logotype { @@ -210,7 +210,7 @@ $toastify-toast-close-button: var(--toast-close-button); .nav-wrapper { display: flex; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { grid-area: navWrapper; } } @@ -219,9 +219,9 @@ $toastify-toast-close-button: var(--toast-close-button); grid-area: appPickerWrapper; display: none; align-items: center; - padding: 0 $spacing-sm; + padding: 0 lib.$spacing-sm; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { display: flex; } } @@ -230,38 +230,38 @@ $toastify-toast-close-button: var(--toast-close-button); grid-area: userMenuWrapper; display: flex; align-items: center; - padding: 0 $spacing-md; + padding: 0 lib.$spacing-md; } a:hover, button:hover { - color: $color-blue-50; + color: lib.$color-blue-50; } &.is-dark { - background-color: $color-blue-90; - border-bottom: 1px solid rgba($color-dark-gray-90, 0.5); - box-shadow: 0 0 3px 0 rgba($color-dark-gray-90, 0.5); - color: $color-white; + background-color: lib.$color-blue-90; + border-bottom: 1px solid rgba(lib.$color-dark-gray-90, 0.5); + box-shadow: 0 0 3px 0 rgba(lib.$color-dark-gray-90, 0.5); + color: lib.$color-white; a:hover, button:hover { - color: $color-light-gray-30; + color: lib.$color-light-gray-30; } } &.is-light { - background-color: $color-white; - color: $color-grey-40; + background-color: lib.$color-white; + color: tokens.$color-grey-40; } &.is-grey { - background-color: $color-light-gray-10; + background-color: lib.$color-light-gray-10; } - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { .logo { - padding: $spacing-md $spacing-xl; + padding: lib.$spacing-md lib.$spacing-xl; } } } @@ -279,16 +279,16 @@ $toastify-toast-close-button: var(--toast-close-button); // Create a new stacking context for the content, so we can use z-indexes in // the content without preventing the header/mobile menu from overlapping it. isolation: isolate; - background-color: $color-light-gray-10; + background-color: lib.$color-light-gray-10; } .gray-bg { - background-color: $color-light-gray-10; + background-color: lib.$color-light-gray-10; } .footer { background-color: black; - color: $color-white; + color: lib.$color-white; .links { font-weight: 700; @@ -296,37 +296,37 @@ $toastify-toast-close-button: var(--toast-close-button); align-items: flex-start; flex-direction: column; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { flex-direction: row; align-items: center; } .mozilla-logo { - padding: $spacing-xl; + padding: lib.$spacing-xl; } .meta { display: flex; flex-direction: column; - padding: $spacing-lg; + padding: lib.$spacing-lg; list-style-type: none; - gap: $spacing-md; + gap: lib.$spacing-md; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { flex-direction: row; align-items: center; margin-left: auto; } a { - padding: $spacing-md; + padding: lib.$spacing-md; img { display: inline-block; } &:hover { - color: $color-light-gray-40; + color: lib.$color-light-gray-40; img { opacity: 0.8; @@ -338,14 +338,14 @@ $toastify-toast-close-button: var(--toast-close-button); .stock-photo-disclaimer { display: block; - padding: $spacing-md; + padding: lib.$spacing-md; text-align: center; } } .api-mock-warning { - background-color: $color-yellow-10; - padding: $spacing-md $spacing-lg; + background-color: lib.$color-yellow-10; + padding: lib.$spacing-md lib.$spacing-lg; text-align: center; position: relative; } diff --git a/frontend/src/components/layout/navigation/AppPicker.module.scss b/frontend/src/components/layout/navigation/AppPicker.module.scss index 27270e5515..5ee728001a 100644 --- a/frontend/src/components/layout/navigation/AppPicker.module.scss +++ b/frontend/src/components/layout/navigation/AppPicker.module.scss @@ -1,5 +1,5 @@ -@import "../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; .wrapper { align-items: center; @@ -15,16 +15,16 @@ width: 24px; height: 24px; padding: 0; - border-radius: $border-radius-sm; + border-radius: lib.$border-radius-sm; svg { - color: $color-white; + color: lib.$color-white; &.premium { - color: $color-grey-40; + color: tokens.$color-grey-40; } &:hover { - color: $color-purple-20; + color: lib.$color-purple-20; } } } @@ -33,14 +33,14 @@ position: absolute; right: 0; // Design request to push popup down 4px - margin-top: ($spacing-lg - $spacing-xs); + margin-top: (lib.$spacing-lg - lib.$spacing-xs); padding: 0; - padding-bottom: $spacing-lg; - min-width: $content-xs; + padding-bottom: lib.$spacing-lg; + min-width: lib.$content-xs; list-style-type: none; - box-shadow: $box-shadow-sm; - border-radius: $border-radius-sm; - background-color: $color-light-gray-10; + box-shadow: lib.$box-shadow-sm; + border-radius: lib.$border-radius-sm; + background-color: lib.$color-light-gray-10; &::before { content: ""; @@ -48,42 +48,42 @@ width: 12px; position: absolute; top: -6px; - right: $spacing-sm; + right: lib.$spacing-sm; transform: rotate(45deg); - background-color: $color-light-gray-10; + background-color: lib.$color-light-gray-10; } .app-picker-heading { - color: $color-black; - padding: $spacing-lg; + color: lib.$color-black; + padding: lib.$spacing-lg; text-align: center; display: flex; flex-direction: row; align-items: center; - gap: $spacing-sm; + gap: lib.$spacing-sm; background-image: linear-gradient( to bottom, #f9f9fb calc(100% - 3px), rgba(0, 0, 0, 0) ), linear-gradient(90deg, #f73940 1.25%, #a83db5 96.87%); - border-radius: $border-radius-sm $border-radius-sm 0 0; + border-radius: lib.$border-radius-sm lib.$border-radius-sm 0 0; img { - height: $layout-sm; + height: lib.$layout-sm; } h2 { - @include text-body-md; - font-family: $font-stack-base; + @include lib.text-body-md; + font-family: lib.$font-stack-base; } } ul { display: grid; grid-template-columns: repeat(3, 1fr); - gap: $spacing-md; - padding: $spacing-lg; + gap: lib.$spacing-md; + padding: lib.$spacing-lg; list-style-type: none; } @@ -95,37 +95,37 @@ .menu-link { display: flex; flex-direction: column; - color: $color-black; + color: lib.$color-black; align-items: center; text-align: center; - @include text-body-sm; + @include lib.text-body-sm; font-weight: 400; - font-family: $font-stack-base; + font-family: lib.$font-stack-base; img { - height: $layout-sm; - padding: $spacing-lg; + height: lib.$layout-sm; + padding: lib.$spacing-lg; width: -moz-fit-content; width: fit-content; box-sizing: content-box; - border-radius: $border-radius-md; + border-radius: lib.$border-radius-md; object-fit: contain; } &:hover { - color: $color-violet-90; + color: lib.$color-violet-90; img { - background-color: $color-light-gray-20; + background-color: lib.$color-light-gray-20; } } &.mozilla-link { - color: $color-blue-50; + color: lib.$color-blue-50; justify-content: center; width: 100%; - margin-top: $spacing-lg; + margin-top: lib.$spacing-lg; } } diff --git a/frontend/src/components/layout/navigation/DashboardSwitcher.module.scss b/frontend/src/components/layout/navigation/DashboardSwitcher.module.scss index 7ef2e65398..e46c86b154 100644 --- a/frontend/src/components/layout/navigation/DashboardSwitcher.module.scss +++ b/frontend/src/components/layout/navigation/DashboardSwitcher.module.scss @@ -1,42 +1,42 @@ -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../../styles/tokens"; .nav-mask-phone { width: 100%; display: flex; flex-direction: row; - border-bottom: 1px solid $color-light-gray-20; + border-bottom: 1px solid lib.$color-light-gray-20; > * { flex: 1 1 0; - padding: $spacing-lg 0 $spacing-md 0; + padding: lib.$spacing-lg 0 lib.$spacing-md 0; justify-content: center; display: flex; border-bottom: 5px solid transparent; &.is-active { - border-bottom: 5px solid $color-purple-40; + border-bottom: 5px solid tokens.$color-purple-40; } &:hover { - background-color: $color-purple-05; + background-color: tokens.$color-purple-05; } } .nav-mask-phone-icon { - color: $color-grey-40; - stroke: $color-grey-40; + color: tokens.$color-grey-40; + stroke: tokens.$color-grey-40; stroke-width: 0.5px; p, p.is-active { - color: $color-purple-70; + color: tokens.$color-purple-70; text-transform: uppercase; } &.is-active { - color: $color-purple-40; - stroke: $color-purple-40; + color: tokens.$color-purple-40; + stroke: tokens.$color-purple-40; } } @@ -46,7 +46,7 @@ align-content: center; p { - @include text-body-sm; + @include lib.text-body-sm; margin: 0; font-weight: 600; align-self: center; @@ -55,7 +55,7 @@ } .hidden-desktop { - @media screen and (min-width: $screen-md) { + @media screen and (min-width: lib.$screen-md) { display: none; } } diff --git a/frontend/src/components/layout/navigation/MenuToggle.module.scss b/frontend/src/components/layout/navigation/MenuToggle.module.scss index 21ed32ab8b..c501adc2af 100644 --- a/frontend/src/components/layout/navigation/MenuToggle.module.scss +++ b/frontend/src/components/layout/navigation/MenuToggle.module.scss @@ -1 +1 @@ -@import "../../../styles/tokens"; +@use "../../../styles/tokens"; diff --git a/frontend/src/components/layout/navigation/MobileNavigation.module.scss b/frontend/src/components/layout/navigation/MobileNavigation.module.scss index aed9b5c719..4d619e489d 100644 --- a/frontend/src/components/layout/navigation/MobileNavigation.module.scss +++ b/frontend/src/components/layout/navigation/MobileNavigation.module.scss @@ -1,6 +1,6 @@ -@import "../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "../../../styles/typography"; +@use "../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../../styles/typography" as styles-typography; .mobile-menu { width: 100%; @@ -18,8 +18,8 @@ #mobile-menu { transform: translateY(-100%); - background-color: $color-white; - box-shadow: $box-shadow-lg; + background-color: lib.$color-white; + box-shadow: lib.$box-shadow-lg; width: 100%; // Prevent the menu from being shown while collapsed; // otherwise it might get exposed when the browser "overscrolls": @@ -74,7 +74,7 @@ } .menu-item-list { - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { display: none; } } @@ -82,25 +82,25 @@ .menu-item { display: flex; - @include text-display-xxs { - font-family: $font-stack-firefox; - border-bottom: 2px solid $color-light-gray-20; + @include styles-typography.text-display-xxs { + font-family: lib.$font-stack-firefox; + border-bottom: 2px solid lib.$color-light-gray-20; } &.sign-up-menu-item { - padding: $spacing-md; + padding: lib.$spacing-md; } .link { display: flex; border: none; background-color: transparent; - padding: $spacing-lg $spacing-md; + padding: lib.$spacing-lg lib.$spacing-md; width: 100%; flex-direction: row; - gap: $spacing-md; + gap: lib.$spacing-md; font-weight: 500; - color: $color-grey-40; + color: tokens.$color-grey-40; cursor: pointer; @media screen and (max-height: 700px) { @@ -108,7 +108,7 @@ // the content behind it scrolls), this makes it take up less space on // screens without a tall viewport, to increase the odds of every item // being visible: - padding: $spacing-md; + padding: lib.$spacing-md; } &:hover { @@ -116,7 +116,7 @@ } svg { - color: $color-purple-40; + color: lib.$color-purple-40; } } @@ -125,31 +125,31 @@ font-weight: 400; text-align: center; width: 100%; - padding: $spacing-md; - background-color: $color-blue-50; - border-radius: $border-radius-sm; - margin: $spacing-sm auto; + padding: lib.$spacing-md; + background-color: lib.$color-blue-50; + border-radius: lib.$border-radius-sm; + margin: lib.$spacing-sm auto; } } .user-info { display: flex; border-bottom: none; - padding: $spacing-lg $spacing-md; + padding: lib.$spacing-lg lib.$spacing-md; background-image: linear-gradient( to bottom, #f9f9fb calc(100% - 3px), rgba(0, 0, 0, 0) ), linear-gradient(90deg, #f73940 1.25%, #a83db5 96.87%); - gap: $spacing-md; + gap: lib.$spacing-md; @media screen and (max-height: 700px) { // Because the menu is not scrollable (it stays in the same position while // the content behind it scrolls), this makes it take up less space on // screens without a tall viewport, to increase the odds of every item // being visible: - padding: $spacing-md; + padding: lib.$spacing-md; } .user-avatar { @@ -162,7 +162,7 @@ } .user-email { - color: $color-blue-90; + color: lib.$color-blue-90; font-weight: 500; } @@ -170,17 +170,17 @@ flex-direction: row; display: flex; align-items: center; - color: $color-grey-40; + color: tokens.$color-grey-40; - @include text-body-sm; - gap: $spacing-sm; + @include lib.text-body-sm; + gap: lib.$spacing-sm; &:hover { text-decoration: underline; } svg { - color: $color-purple-40; + color: lib.$color-purple-40; } } } diff --git a/frontend/src/components/layout/navigation/Navigation.module.scss b/frontend/src/components/layout/navigation/Navigation.module.scss index f5cde0e051..3c5ef269c7 100644 --- a/frontend/src/components/layout/navigation/Navigation.module.scss +++ b/frontend/src/components/layout/navigation/Navigation.module.scss @@ -1,16 +1,17 @@ -@import "../../../styles/tokens"; +@use "../../../styles/tokens"; +@use "../../../../../node_modules/@mozilla-protocol/core/protocol/css/includes/tokens/dist"; .site-nav { display: flex; align-items: center; justify-content: flex-end; width: 100%; - padding: 0 $spacing-md; - gap: $spacing-md; + padding: 0 dist.$spacing-md; + gap: dist.$spacing-md; - @media screen and (min-width: $content-xl) { - padding: 0 $spacing-xl; - gap: $spacing-lg; + @media screen and (min-width: dist.$content-xl) { + padding: 0 dist.$spacing-xl; + gap: dist.$spacing-lg; } } @@ -19,8 +20,8 @@ align-items: center; justify-content: center; position: relative; - font-family: $font-stack-firefox; - min-width: $spacing-2xl + $spacing-lg; + font-family: dist.$font-stack-firefox; + min-width: dist.$spacing-2xl + dist.$spacing-lg; color: inherit; &.is-active { @@ -32,7 +33,7 @@ height: 4px; display: block; content: ""; - background: $firefoxGradient; + background: tokens.$firefoxGradient; position: absolute; bottom: 0; } @@ -48,19 +49,19 @@ // webkit adds a padding-right: 1em to button elements padding: 0; - @media screen and #{$mq-md} { + @media screen and #{dist.$mq-md} { display: none; } } .hidden-mobile { - @media screen and (max-width: $screen-md) { + @media screen and (max-width: dist.$screen-md) { display: none; } } .hidden-desktop { - @media screen and (min-width: $screen-md) { + @media screen and (min-width: dist.$screen-md) { display: none; } } diff --git a/frontend/src/components/layout/navigation/SignInButton.module.scss b/frontend/src/components/layout/navigation/SignInButton.module.scss index 30e79e6c0a..5e79e0d573 100644 --- a/frontend/src/components/layout/navigation/SignInButton.module.scss +++ b/frontend/src/components/layout/navigation/SignInButton.module.scss @@ -1,13 +1,14 @@ -@import "../../../styles/tokens"; +@use "../../../styles/tokens"; +@use "../../../../../node_modules/@mozilla-protocol/core/protocol/css/includes/tokens/dist"; .sign-in-button { // We're using CSS's `currentColor` here because the colour // is different in the light (Premium) and dark (regular) themes: border: 2px solid currentColor; - border-radius: $border-radius-sm; - padding: $spacing-xs $spacing-md; + border-radius: dist.$border-radius-sm; + padding: dist.$spacing-xs dist.$spacing-md; &:focus { - color: $color-blue-30; + color: tokens.$color-blue-30; } } diff --git a/frontend/src/components/layout/navigation/SignUpButton.module.scss b/frontend/src/components/layout/navigation/SignUpButton.module.scss index 8ed58ca2d8..905541f67e 100644 --- a/frontend/src/components/layout/navigation/SignUpButton.module.scss +++ b/frontend/src/components/layout/navigation/SignUpButton.module.scss @@ -1,4 +1,4 @@ -@import "../../../styles/tokens"; +@use "../../../styles/tokens"; .sign-up-button { color: currentColor; diff --git a/frontend/src/components/layout/navigation/UpgradeButton.module.scss b/frontend/src/components/layout/navigation/UpgradeButton.module.scss index f8260eff19..6d2f21a57c 100644 --- a/frontend/src/components/layout/navigation/UpgradeButton.module.scss +++ b/frontend/src/components/layout/navigation/UpgradeButton.module.scss @@ -1,23 +1,23 @@ -@import "../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; #upgrade-button { appearance: none; - @include text-body-lg; + @include lib.text-body-lg; line-height: 1; - color: $color-purple-10; + color: lib.$color-purple-10; font-weight: 600; - border-radius: $border-radius-md; - font-family: $font-stack-firefox; + border-radius: lib.$border-radius-md; + font-family: lib.$font-stack-firefox; - @media screen and #{$mq-md} { - background-color: $color-purple-20; - padding: $spacing-sm $spacing-md; - color: $color-blue-90; + @media screen and #{lib.$mq-md} { + background-color: lib.$color-purple-20; + padding: lib.$spacing-sm lib.$spacing-md; + color: lib.$color-blue-90; } &:hover { - color: $color-blue-50; + color: lib.$color-blue-50; } } diff --git a/frontend/src/components/layout/navigation/UserMenu.module.scss b/frontend/src/components/layout/navigation/UserMenu.module.scss index abdc09b4b1..b5206635ef 100644 --- a/frontend/src/components/layout/navigation/UserMenu.module.scss +++ b/frontend/src/components/layout/navigation/UserMenu.module.scss @@ -1,6 +1,6 @@ -@import "../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "../../../styles/typography"; +@use "../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../../styles/typography"; .wrapper { align-items: center; @@ -15,7 +15,7 @@ color: white; overflow: hidden; - @include text-title-2xs { + @include typography.text-title-2xs { padding: 0; border-style: none; } @@ -24,19 +24,19 @@ .popup { position: absolute; right: 0; - margin-top: $spacing-md; + margin-top: lib.$spacing-md; padding: 0; - padding-bottom: $spacing-lg; - min-width: $content-xs; + padding-bottom: lib.$spacing-lg; + min-width: lib.$content-xs; list-style-type: none; - box-shadow: $box-shadow-md; - border-radius: $border-radius-md; + box-shadow: lib.$box-shadow-md; + border-radius: lib.$border-radius-md; // The .account-menu-item has its own background color // (to overlap the $firefoxGradient everywhere but at the bottom), // so we need to push it down a bit to avoid that from covering // .popup's rounded corners: - padding-top: $border-radius-md; - $popupBackgroundColor: $color-light-gray-10; + padding-top: lib.$border-radius-md; + $popupBackgroundColor: lib.$color-light-gray-10; background-color: $popupBackgroundColor; &::before { @@ -45,7 +45,7 @@ width: 12px; position: absolute; top: -6px; - right: $spacing-md; + right: lib.$spacing-md; transform: rotate(45deg); background-color: $popupBackgroundColor; } @@ -59,25 +59,25 @@ $popupBackgroundColor calc(100% - $gradientWidth), rgba(0, 0, 0, 0) ), - $firefoxGradient; - margin-bottom: $spacing-md; - padding: $spacing-lg; + tokens.$firefoxGradient; + margin-bottom: lib.$spacing-md; + padding: lib.$spacing-lg; // To avoid overlapping .popup's rounded corners, // it has its own padding-top of $border-radius-md. Subtract that from // the .account-menu-item's padding-top: - padding-top: $spacing-lg - $border-radius-md; + padding-top: lib.$spacing-lg - lib.$border-radius-md; .user-email { font-weight: 700; display: block; - color: $color-violet-90; + color: lib.$color-violet-90; } .settings-link { - color: $color-dark-gray-50; + color: lib.$color-dark-gray-50; display: flex; align-items: center; - gap: $spacing-xs; + gap: lib.$spacing-xs; } &:hover { @@ -93,28 +93,28 @@ .menu-button { display: flex; align-items: center; - gap: $spacing-md; - padding: $spacing-md $spacing-lg; - color: $color-violet-90; + gap: lib.$spacing-md; + padding: lib.$spacing-md lib.$spacing-lg; + color: lib.$color-violet-90; border-style: none; background-color: transparent; width: 100%; cursor: pointer; svg { - color: $color-purple-40; + color: lib.$color-purple-40; } &:hover { text-decoration: underline; - background-color: $color-light-gray-20; - color: $color-violet-90; + background-color: lib.$color-light-gray-20; + color: lib.$color-violet-90; } } .settings-link { svg { - color: $color-purple-40; + color: lib.$color-purple-40; } } diff --git a/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss b/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss index cffc847d83..44e27c7310 100644 --- a/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss +++ b/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss @@ -1,29 +1,29 @@ -@import "../../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "../../../../styles/typography"; +@use "../../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../../../styles/typography"; .wrapper { display: flex; flex-direction: column; - gap: $spacing-sm; - padding: $spacing-md $spacing-md; + gap: lib.$spacing-sm; + padding: lib.$spacing-md lib.$spacing-md; img { width: 100%; } .content { - padding: $spacing-lg 0; + padding: lib.$spacing-lg 0; h2 { - @include text-title-2xs { - font-family: $font-stack-firefox; - padding-bottom: $spacing-sm; + @include typography.text-title-2xs { + font-family: lib.$font-stack-firefox; + padding-bottom: lib.$spacing-sm; } } .cta { - padding-top: $spacing-sm; + padding-top: lib.$spacing-sm; } } diff --git a/frontend/src/components/layout/navigation/whatsnew/WhatsNewDashboard.module.scss b/frontend/src/components/layout/navigation/whatsnew/WhatsNewDashboard.module.scss index 3dc216f9d0..c4ce80cb02 100644 --- a/frontend/src/components/layout/navigation/whatsnew/WhatsNewDashboard.module.scss +++ b/frontend/src/components/layout/navigation/whatsnew/WhatsNewDashboard.module.scss @@ -1,18 +1,18 @@ -@import "../../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; .wrapper { - background-color: $color-white; - border-radius: $border-radius-sm; + background-color: lib.$color-white; + border-radius: lib.$border-radius-sm; .controls { $closeButtonWidth: 20px; display: flex; align-items: center; justify-content: space-between; - padding: $spacing-sm; - padding-left: $spacing-sm + $closeButtonWidth; - border-bottom: 1px solid $color-light-gray-30; + padding: lib.$spacing-sm; + padding-left: lib.$spacing-sm + $closeButtonWidth; + border-bottom: 1px solid lib.$color-light-gray-30; .switch-wrapper { flex: 1 1 0; @@ -20,17 +20,17 @@ justify-content: center; .switch { - @include text-body-sm; + @include lib.text-body-sm; display: inline-flex; - gap: $spacing-xs; - border-radius: $border-radius-lg; - background-color: $color-light-gray-30; - padding: $spacing-xs; + gap: lib.$spacing-xs; + border-radius: lib.$border-radius-lg; + background-color: lib.$color-light-gray-30; + padding: lib.$spacing-xs; .switch-tab { - border-radius: $border-radius-lg; - color: $color-dark-gray-50; - padding: 0 $spacing-md; + border-radius: lib.$border-radius-lg; + color: lib.$color-dark-gray-50; + padding: 0 lib.$spacing-md; border: 2px solid transparent; font-weight: 500; @@ -38,17 +38,17 @@ cursor: pointer; &:hover { - color: $color-blue-50; + color: lib.$color-blue-50; } } &.is-selected { - background-color: $color-white; - color: $color-purple-70; - box-shadow: $box-shadow-sm; + background-color: lib.$color-white; + color: lib.$color-purple-70; + box-shadow: lib.$box-shadow-sm; &:focus { - border-color: $color-blue-50; - color: $color-blue-50; + border-color: lib.$color-blue-50; + color: lib.$color-blue-50; outline: none; } } @@ -66,30 +66,30 @@ } .content { - padding-bottom: $spacing-sm; + padding-bottom: lib.$spacing-sm; } .footer-controls { - padding: $spacing-xs $spacing-md; + padding: lib.$spacing-xs lib.$spacing-md; .controls-wrapper { display: flex; align-items: center; - border-top: 1px solid $color-light-gray-20; - padding: $spacing-sm 0; + border-top: 1px solid lib.$color-light-gray-20; + padding: lib.$spacing-sm 0; .start { flex: 1 0 0; } button { - @include text-body-sm; + @include lib.text-body-sm; font-weight: 500; background-color: transparent; border-style: none; - border-radius: $border-radius-sm; - color: $color-blue-50; - padding: $spacing-sm; + border-radius: lib.$border-radius-sm; + color: lib.$color-blue-50; + padding: lib.$spacing-sm; cursor: pointer; &:hover { diff --git a/frontend/src/components/layout/navigation/whatsnew/WhatsNewList.module.scss b/frontend/src/components/layout/navigation/whatsnew/WhatsNewList.module.scss index 5de0d20a86..f81b5316a5 100644 --- a/frontend/src/components/layout/navigation/whatsnew/WhatsNewList.module.scss +++ b/frontend/src/components/layout/navigation/whatsnew/WhatsNewList.module.scss @@ -1,17 +1,17 @@ -@import "../../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; .empty-message { display: flex; flex-direction: column; - padding-top: $spacing-lg; - padding-bottom: $spacing-2xl; - gap: $spacing-lg; + padding-top: lib.$spacing-lg; + padding-bottom: lib.$spacing-2xl; + gap: lib.$spacing-lg; align-items: center; text-align: center; p { - @include text-body-md; + @include lib.text-body-md; max-width: 75%; } } @@ -20,13 +20,13 @@ display: flex; flex-direction: column; list-style-type: none; - padding: 0 $spacing-md; - max-height: min($content-md, 50vh); + padding: 0 lib.$spacing-md; + max-height: min(lib.$content-md, 50vh); overflow-y: auto; li { - padding: $spacing-sm 0; - border-bottom: 1px solid $color-light-gray-30; + padding: lib.$spacing-sm 0; + border-bottom: 1px solid lib.$color-light-gray-30; &:last-child { border-bottom-style: none; @@ -43,9 +43,9 @@ .item { display: flex; align-items: center; - gap: $spacing-md; - border-radius: $border-radius-sm; - padding: $spacing-xs 0; + gap: lib.$spacing-md; + border-radius: lib.$border-radius-sm; + padding: lib.$spacing-xs 0; cursor: pointer; // Forces news icon to be the same size regardless of image size @@ -55,21 +55,21 @@ } h3 { - @include text-body-sm; + @include lib.text-body-sm; font-weight: 500; } p { - @include text-body-sm; + @include lib.text-body-sm; } &:hover { - background-color: $color-violet-05; + background-color: lib.$color-violet-05; // An item is $hoverOverflow wider than its container when hovered, // i.e. the background colour is wider than the separator. - $hoverOverflow: $spacing-sm; + $hoverOverflow: lib.$spacing-sm; margin: 0 (-1 * $hoverOverflow); - padding: $spacing-xs $hoverOverflow; + padding: lib.$spacing-xs $hoverOverflow; } } } diff --git a/frontend/src/components/layout/navigation/whatsnew/WhatsNewMenu.module.scss b/frontend/src/components/layout/navigation/whatsnew/WhatsNewMenu.module.scss index cbce3e8b15..477580fca5 100644 --- a/frontend/src/components/layout/navigation/whatsnew/WhatsNewMenu.module.scss +++ b/frontend/src/components/layout/navigation/whatsnew/WhatsNewMenu.module.scss @@ -1,6 +1,6 @@ -@import "../../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; +@use "../../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as lib2; button.trigger { flex-shrink: 0; @@ -9,18 +9,18 @@ button.trigger { background-color: transparent; border-style: none; color: inherit; - border-radius: $border-radius-lg; + border-radius: lib.$border-radius-lg; cursor: pointer; - padding: $spacing-xs $spacing-md; - font-family: $font-stack-firefox; + padding: lib.$spacing-xs lib.$spacing-md; + font-family: lib.$font-stack-firefox; position: relative; &.is-open { - background-color: $color-light-gray-20; - color: $color-dark-gray-20; + background-color: lib.$color-light-gray-20; + color: lib.$color-dark-gray-20; &:hover { - color: $color-blue-50; + color: lib.$color-blue-50; } } @@ -30,16 +30,16 @@ button.trigger { .pill { border-radius: 100%; - padding: $spacing-sm; + padding: lib.$spacing-sm; font-size: 14px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; - background-color: $color-yellow-40; + background-color: lib.$color-yellow-40; font-weight: 700; - color: $color-white; + color: lib.$color-white; font-style: normal; // On small screens, let the "new news entries" counter slightly overlap // the news icon. These position coordinates are not an exact science. @@ -48,8 +48,8 @@ button.trigger { right: 0; } - @media screen and #{$mq-md} { - gap: $spacing-sm; + @media screen and #{lib.$mq-md} { + gap: lib.$spacing-sm; position: initial; .trigger-icon { @@ -65,9 +65,9 @@ button.trigger { } .popover-wrapper { - box-shadow: $box-shadow-sm; - border-radius: $border-radius-sm; - width: min($content-sm, calc(100vw - 2 * $spacing-md)); + box-shadow: lib.$box-shadow-sm; + border-radius: lib.$border-radius-sm; + width: min(lib.$content-sm, calc(100vw - 2 * lib.$spacing-md)); button { padding: 0; @@ -79,27 +79,27 @@ button.trigger { width: 12px; position: absolute; top: -6px; - right: $spacing-lg; + right: lib.$spacing-lg; transform: rotate(45deg); - background-color: $color-white; + background-color: lib.$color-white; } } .cta { - @include text-body-lg; - color: $color-blue-50; + @include lib.text-body-lg; + color: lib.$color-blue-50; font-weight: 500; text-decoration: underline; - margin-top: $spacing-sm; + margin-top: lib.$spacing-sm; cursor: pointer; &:hover { - color: $color-blue-80; + color: lib.$color-blue-80; } } .countdown-timer { display: flex; justify-content: center; - padding: $spacing-2xl 0; + padding: lib.$spacing-2xl 0; } diff --git a/frontend/src/components/layout/topmessage/CsatSurvey.module.scss b/frontend/src/components/layout/topmessage/CsatSurvey.module.scss index c3c098f233..98a9e753d6 100644 --- a/frontend/src/components/layout/topmessage/CsatSurvey.module.scss +++ b/frontend/src/components/layout/topmessage/CsatSurvey.module.scss @@ -1,38 +1,38 @@ -@import "../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; .wrapper { display: none; flex-direction: column; align-items: center; justify-content: space-around; - gap: $spacing-sm; - padding: $spacing-md 0; - background-color: $color-purple-90; - color: $color-white; + gap: lib.$spacing-sm; + padding: lib.$spacing-md 0; + background-color: lib.$color-purple-90; + color: lib.$color-white; position: relative; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { display: flex; } .dismiss-button { position: absolute; - right: $spacing-md; + right: lib.$spacing-md; background-color: transparent; border-style: none; - color: $color-white; + color: lib.$color-white; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; - border-radius: $border-radius-sm; + border-radius: lib.$border-radius-sm; cursor: pointer; padding: 0; &:hover { - background-color: $color-blue-50; + background-color: lib.$color-blue-50; } } } @@ -51,27 +51,27 @@ display: flex; align-items: center; justify-content: space-around; - gap: $spacing-md; + gap: lib.$spacing-md; ol { display: flex; - gap: $spacing-md; + gap: lib.$spacing-md; list-style-type: none; } button { - border-radius: $border-radius-sm; - background-color: $color-violet-40; - color: $color-white; + border-radius: lib.$border-radius-sm; + background-color: lib.$color-violet-40; + color: lib.$color-white; transition: background-color 0.1s ease-out; border-style: none; - padding: $spacing-sm; + padding: lib.$spacing-sm; height: 2.5rem; text-align: center; cursor: pointer; &:hover { - background-color: $color-blue-50; + background-color: lib.$color-blue-50; } } } diff --git a/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss b/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss index b553c54580..34127d0628 100644 --- a/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss +++ b/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss @@ -1,40 +1,40 @@ -@import "../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; // Hardcoding #5015cd after talking with design, no token for this color exists yet in Nebula. $banner-gradient: linear-gradient( 90.13deg, - $color-purple-90 -2.39%, + lib.$color-purple-90 -2.39%, #5015cd 50.81%, - $color-purple-50 104% + lib.$color-purple-50 104% ); .wrapper { display: flex; align-items: center; justify-content: center; - padding: $spacing-md; - color: $color-white; + padding: lib.$spacing-md; + color: lib.$color-white; position: relative; background-image: url("../images/holiday-promo-banner-pattern-mobile.svg"), $banner-gradient; background-repeat: no-repeat; background-size: cover; flex-direction: column; - gap: $spacing-md; + gap: lib.$spacing-md; - @media screen and #{$mq-sm} { + @media screen and #{lib.$mq-sm} { flex-direction: row; - gap: $spacing-2xl; + gap: lib.$spacing-2xl; background-image: url("../images/holiday-promo-banner-pattern-tablet.svg"), $banner-gradient; } - @media screen and #{$mq-md} { - gap: $layout-xl; + @media screen and #{lib.$mq-md} { + gap: lib.$layout-xl; background-image: url("../images/holiday-promo-banner-pattern-laptop.svg"), $banner-gradient; } - @media screen and #{$mq-xl} { + @media screen and #{lib.$mq-xl} { background-image: url("../images/holiday-promo-banner-pattern-desktop.svg"), $banner-gradient; } @@ -43,14 +43,14 @@ $banner-gradient: linear-gradient( display: flex; align-items: center; flex-direction: column; - gap: $spacing-md; + gap: lib.$spacing-md; - @media screen and #{$mq-sm} { + @media screen and #{lib.$mq-sm} { gap: 0; } - @media screen and #{$mq-lg} { + @media screen and #{lib.$mq-lg} { flex-direction: row; - gap: $layout-xl; + gap: lib.$layout-xl; } } @@ -63,12 +63,12 @@ $banner-gradient: linear-gradient( align-items: center; justify-content: center; cursor: pointer; - background-color: $color-white; - padding: $spacing-sm $spacing-md; - border-radius: $border-radius-sm; - color: $color-purple-90; + background-color: lib.$color-white; + padding: lib.$spacing-sm lib.$spacing-md; + border-radius: lib.$border-radius-sm; + color: lib.$color-purple-90; font-weight: 700; - margin-bottom: $spacing-xs; + margin-bottom: lib.$spacing-xs; &:hover { cursor: pointer; @@ -77,11 +77,11 @@ $banner-gradient: linear-gradient( } .promo-code-expiry { - color: rgba($color-white, 0.7); + color: rgba(lib.$color-white, 0.7); font-weight: 700; display: block; - @include text-body-xs; + @include lib.text-body-xs; } .banner-pattern { @@ -90,15 +90,15 @@ $banner-gradient: linear-gradient( } .promo-text { - @include text-body-lg; + @include lib.text-body-lg; - font-family: $font-stack-base; + font-family: lib.$font-stack-base; } .promo-text-bolded { - @include text-body-xl; + @include lib.text-body-xl; font-weight: 700; - font-family: $font-stack-firefox; + font-family: lib.$font-stack-firefox; } } diff --git a/frontend/src/components/layout/topmessage/InterviewRecruitment.module.scss b/frontend/src/components/layout/topmessage/InterviewRecruitment.module.scss index 03338de1f7..a888a9dc2d 100644 --- a/frontend/src/components/layout/topmessage/InterviewRecruitment.module.scss +++ b/frontend/src/components/layout/topmessage/InterviewRecruitment.module.scss @@ -1,4 +1,5 @@ -@import "../../../styles/tokens"; +@use "../../../styles/tokens"; +@use "../../../../../node_modules/@mozilla-protocol/core/protocol/css/includes/tokens/dist"; $dismissButtonWidth: 30px; @@ -7,10 +8,11 @@ $dismissButtonWidth: 30px; flex-direction: column; align-items: center; justify-content: space-around; - gap: $spacing-sm; - padding: $spacing-md ($spacing-sm + $dismissButtonWidth + $spacing-md); - background-color: $color-purple-90; - color: $color-white; + gap: dist.$spacing-sm; + padding: dist.$spacing-md + (dist.$spacing-sm + $dismissButtonWidth + dist.$spacing-md); + background-color: tokens.$color-purple-90; + color: tokens.$color-white; position: relative; // Overlap the collapsed mobile menu (#mobile-menu.not-active), // which itself has a z-index of 1 to overlap the content. @@ -18,21 +20,21 @@ $dismissButtonWidth: 30px; .dismiss-button { position: absolute; - right: $spacing-md; + right: dist.$spacing-md; background-color: transparent; border-style: none; - color: $color-white; + color: tokens.$color-white; width: $dismissButtonWidth; height: $dismissButtonWidth; display: flex; align-items: center; justify-content: center; - border-radius: $border-radius-sm; + border-radius: dist.$border-radius-sm; cursor: pointer; padding: 0; &:hover { - background-color: $color-blue-50; + background-color: tokens.$color-blue-50; } } diff --git a/frontend/src/components/layout/topmessage/NpsSurvey.module.scss b/frontend/src/components/layout/topmessage/NpsSurvey.module.scss index 569a9cc0d9..f9407964fd 100644 --- a/frontend/src/components/layout/topmessage/NpsSurvey.module.scss +++ b/frontend/src/components/layout/topmessage/NpsSurvey.module.scss @@ -1,37 +1,37 @@ -@import "../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; .wrapper { display: none; flex-direction: column; align-items: center; justify-content: space-around; - gap: $spacing-sm; - padding: $spacing-md 0; - background-color: $color-purple-90; - color: $color-white; + gap: lib.$spacing-sm; + padding: lib.$spacing-md 0; + background-color: lib.$color-purple-90; + color: lib.$color-white; position: relative; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { display: flex; } .dismiss-button { position: absolute; - right: $spacing-md; + right: lib.$spacing-md; background-color: transparent; border-style: none; - color: $color-white; + color: lib.$color-white; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; - border-radius: $border-radius-sm; + border-radius: lib.$border-radius-sm; cursor: pointer; &:hover { - background-color: $color-blue-50; + background-color: lib.$color-blue-50; } } } @@ -40,18 +40,18 @@ display: flex; align-items: center; justify-content: space-around; - gap: $spacing-md; + gap: lib.$spacing-md; ol { display: flex; - gap: $spacing-md; + gap: lib.$spacing-md; list-style-type: none; } button { - border-radius: $border-radius-sm; - background-color: $color-violet-40; - color: $color-white; + border-radius: lib.$border-radius-sm; + background-color: lib.$color-violet-40; + color: lib.$color-white; transition: background-color 0.1s ease-out; border-style: none; width: 2.5rem; @@ -60,11 +60,11 @@ cursor: pointer; &:hover { - background-color: $color-blue-50; + background-color: lib.$color-blue-50; } } .legend { - @include text-body-sm; + @include lib.text-body-sm; } } diff --git a/frontend/src/components/layout/topmessage/PhoneSurvey.module.scss b/frontend/src/components/layout/topmessage/PhoneSurvey.module.scss index 03338de1f7..a888a9dc2d 100644 --- a/frontend/src/components/layout/topmessage/PhoneSurvey.module.scss +++ b/frontend/src/components/layout/topmessage/PhoneSurvey.module.scss @@ -1,4 +1,5 @@ -@import "../../../styles/tokens"; +@use "../../../styles/tokens"; +@use "../../../../../node_modules/@mozilla-protocol/core/protocol/css/includes/tokens/dist"; $dismissButtonWidth: 30px; @@ -7,10 +8,11 @@ $dismissButtonWidth: 30px; flex-direction: column; align-items: center; justify-content: space-around; - gap: $spacing-sm; - padding: $spacing-md ($spacing-sm + $dismissButtonWidth + $spacing-md); - background-color: $color-purple-90; - color: $color-white; + gap: dist.$spacing-sm; + padding: dist.$spacing-md + (dist.$spacing-sm + $dismissButtonWidth + dist.$spacing-md); + background-color: tokens.$color-purple-90; + color: tokens.$color-white; position: relative; // Overlap the collapsed mobile menu (#mobile-menu.not-active), // which itself has a z-index of 1 to overlap the content. @@ -18,21 +20,21 @@ $dismissButtonWidth: 30px; .dismiss-button { position: absolute; - right: $spacing-md; + right: dist.$spacing-md; background-color: transparent; border-style: none; - color: $color-white; + color: tokens.$color-white; width: $dismissButtonWidth; height: $dismissButtonWidth; display: flex; align-items: center; justify-content: center; - border-radius: $border-radius-sm; + border-radius: dist.$border-radius-sm; cursor: pointer; padding: 0; &:hover { - background-color: $color-blue-50; + background-color: tokens.$color-blue-50; } } diff --git a/frontend/src/components/phones/dashboard/PhoneDashboard.module.scss b/frontend/src/components/phones/dashboard/PhoneDashboard.module.scss index 4448de053d..c9ea50c744 100644 --- a/frontend/src/components/phones/dashboard/PhoneDashboard.module.scss +++ b/frontend/src/components/phones/dashboard/PhoneDashboard.module.scss @@ -1,5 +1,5 @@ -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../../styles/tokens"; .main-phone-wrapper { height: 100%; @@ -7,13 +7,13 @@ flex-direction: column; .content-wrapper { - max-width: calc($content-lg + $layout-lg); + max-width: calc(lib.$content-lg + lib.$layout-lg); width: 100%; height: 100%; margin: 0 auto; - padding: $spacing-md; - margin-bottom: $layout-md; - gap: $spacing-lg; + padding: lib.$spacing-md; + margin-bottom: lib.$layout-md; + gap: lib.$spacing-lg; display: flex; flex-direction: column; // Ensure that the card can always overlap elements in the profile, @@ -22,12 +22,12 @@ } .nav-icon { - color: $color-light-gray-80; - stroke: $color-light-gray-80; + color: lib.$color-light-gray-80; + stroke: lib.$color-light-gray-80; stroke-width: 1px; &:hover { - color: $color-blue-50; + color: tokens.$color-blue-50; } } @@ -35,14 +35,14 @@ display: flex; flex-direction: row; justify-content: space-between; - padding: 0 $spacing-xl $spacing-md $spacing-xl; - border-bottom: 1px solid $color-light-gray-20; + padding: 0 lib.$spacing-xl lib.$spacing-md lib.$spacing-xl; + border-bottom: 1px solid lib.$color-light-gray-20; } .senders-cta { display: flex; flex-direction: row; - border-radius: $border-radius-lg; + border-radius: lib.$border-radius-lg; align-items: center; border: 0; padding: 0; @@ -50,29 +50,29 @@ cursor: pointer; &:hover { - color: $color-blue-50; + color: tokens.$color-blue-50; .nav-icon { - color: $color-blue-50; - stroke: $color-blue-50; + color: tokens.$color-blue-50; + stroke: tokens.$color-blue-50; } } - @media screen and #{$mq-md} { - padding: $spacing-sm; - gap: $spacing-xs; - left: $spacing-sm; // Cancel out extra space from padding + @media screen and #{lib.$mq-md} { + padding: lib.$spacing-sm; + gap: lib.$spacing-xs; + left: lib.$spacing-sm; // Cancel out extra space from padding position: relative; &:hover { - background: $color-light-gray-10; + background: lib.$color-light-gray-10; } } span { display: none; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { display: block; } } @@ -80,16 +80,16 @@ .dashboard-card-caller-sms-senders-header { display: flex; - padding: 0 $spacing-xl $spacing-md $spacing-xl; + padding: 0 lib.$spacing-xl lib.$spacing-md lib.$spacing-xl; flex-direction: row; align-items: center; justify-content: space-between; - border-bottom: 1px solid $color-light-gray-20; + border-bottom: 1px solid lib.$color-light-gray-20; > * { flex: auto; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { flex: 1 1 auto; span:last-child { @@ -99,11 +99,11 @@ } .caller-sms-logs-title { - @include text-title-3xs; + @include lib.text-title-3xs; position: relative; text-align: center; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { left: -20px; // Width of the back button } } @@ -119,36 +119,36 @@ } .senders-panel { - padding: 0 $spacing-lg; + padding: 0 lib.$spacing-lg; display: flex; flex-direction: column; align-items: center; justify-content: center; - gap: $spacing-lg; - min-height: $content-xs; - margin-top: $spacing-lg; + gap: lib.$spacing-lg; + min-height: lib.$content-xs; + margin-top: lib.$spacing-lg; .senders-panel-body { - padding-top: $spacing-sm; + padding-top: lib.$spacing-sm; text-align: center; - max-width: $content-md; + max-width: lib.$content-md; margin: 0 auto; display: flex; } .update-settings-cta { display: inline-block; - padding: $spacing-md 0; + padding: lib.$spacing-md 0; font-weight: 700; - color: $color-blue-50; + color: tokens.$color-blue-50; &:hover { - color: $color-blue-80; + color: tokens.$color-blue-80; } } .warning-icon { - color: $color-yellow-50; + color: tokens.$color-yellow-50; min-width: 20px; } } @@ -156,12 +156,12 @@ .caller-sms-senders-table { display: flex; flex-direction: column; - margin-top: $spacing-lg; - padding: 0 $spacing-lg; + margin-top: lib.$spacing-lg; + padding: 0 lib.$spacing-lg; - @media screen and #{$mq-md} { - margin: 0 $spacing-sm; - margin-top: $spacing-2xl; + @media screen and #{lib.$mq-md} { + margin: 0 lib.$spacing-sm; + margin-top: lib.$spacing-2xl; } thead { @@ -174,7 +174,7 @@ clip: rect(0, 0, 0, 0); clip-path: circle(0); - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { position: unset; width: unset; height: unset; @@ -187,14 +187,14 @@ tr { display: grid; grid-template-columns: 2fr 1fr; - border-bottom: 1px solid $color-light-gray-20; - padding: $spacing-sm 0; + border-bottom: 1px solid lib.$color-light-gray-20; + padding: lib.$spacing-sm 0; align-items: center; - gap: $spacing-sm; + gap: lib.$spacing-sm; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { grid-template-columns: 3fr 2fr 1fr; - grid-gap: $spacing-md; + grid-gap: lib.$spacing-md; } th { @@ -215,7 +215,7 @@ .sender-date-wrapper { display: flex; align-items: center; - gap: $spacing-sm; + gap: lib.$spacing-sm; } .sender-controls { @@ -226,10 +226,10 @@ } .forwarded-type-icon { - color: $color-light-gray-70; + color: lib.$color-light-gray-70; } - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { .sender-number, .sender-date, .sender-controls { @@ -241,7 +241,7 @@ } .greyed-contact { - color: $color-light-gray-80; + color: lib.$color-light-gray-80; } .unblocked { @@ -249,36 +249,36 @@ } .block-btn { - color: $color-blue-50; + color: tokens.$color-blue-50; border: 0; padding: 0; background: transparent; cursor: pointer; &:hover { - color: $color-blue-80; + color: tokens.$color-blue-80; } } } .dashboard-card { - box-shadow: $box-shadow-sm; - background-color: $color-white; - border-radius: $border-radius-md; + box-shadow: lib.$box-shadow-sm; + background-color: tokens.$color-white; + border-radius: lib.$border-radius-md; display: flex; flex-direction: column; - padding: $spacing-md 0; - min-height: $content-xs; + padding: lib.$spacing-md 0; + min-height: lib.$content-xs; .header-phone-number { - @include text-body-md; - @include font-firefox; + @include lib.text-body-md; + @include lib.font-firefox; display: flex; justify-content: center; align-items: center; - @media screen and #{$mq-sm} { - @include text-body-xl; + @media screen and #{lib.$mq-sm} { + @include lib.text-body-xl; } .copy-controls { @@ -287,18 +287,18 @@ } .phone-statistics-container { - margin: $spacing-md $spacing-lg 0 $spacing-lg; + margin: lib.$spacing-md lib.$spacing-lg 0 lib.$spacing-lg; display: flex; flex-direction: column; justify-content: space-between; - border-radius: $border-radius-lg; - border: $border-radius-xs solid $color-light-gray-20; - gap: $spacing-md; - padding-top: $spacing-md; + border-radius: lib.$border-radius-lg; + border: lib.$border-radius-xs solid lib.$color-light-gray-20; + gap: lib.$spacing-md; + padding-top: lib.$spacing-md; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { flex-direction: row; - margin: 0 $spacing-lg; + margin: 0 lib.$spacing-lg; border-radius: auto; border: none; gap: none; @@ -310,64 +310,64 @@ display: flex; flex-direction: row-reverse; align-items: center; - padding-left: $spacing-md; - padding-right: $spacing-md; - padding-bottom: $spacing-md; - border-bottom: 1px solid $color-light-gray-20; + padding-left: lib.$spacing-md; + padding-right: lib.$spacing-md; + padding-bottom: lib.$spacing-md; + border-bottom: 1px solid lib.$color-light-gray-20; margin: 0; &:last-child { border-bottom: none; } - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { flex: 1; justify-content: center; align-items: center; flex-direction: column; text-align: center; - border-radius: $border-radius-md; - background: $color-light-gray-10; - padding: $spacing-md $spacing-lg; + border-radius: lib.$border-radius-md; + background: lib.$color-light-gray-10; + padding: lib.$spacing-md lib.$spacing-lg; } .phone-statistics-title { font-weight: 600; - border-radius: $border-radius-md; + border-radius: lib.$border-radius-md; - @include text-title-3xs; + @include lib.text-title-3xs; - @media screen and #{$mq-md} { - @include text-title-2xs; - @include font-firefox; + @media screen and #{lib.$mq-md} { + @include lib.text-title-2xs; + @include lib.font-firefox; } } .phone-statistics-body { line-height: 120%; - @media screen and #{$mq-md} { - @include text-body-xs; + @media screen and #{lib.$mq-md} { + @include lib.text-body-xs; } } } .inactive-statistics { - color: $color-light-gray-70; + color: lib.$color-light-gray-70; } .copy-icon { - padding: 0 $spacing-sm; + padding: 0 lib.$spacing-sm; opacity: 0.5; display: inline-block; - color: $color-light-gray-90; + color: lib.$color-light-gray-90; align-self: center; } .copy-button-wrapper { display: flex; flex-direction: row; - gap: $spacing-xs; + gap: lib.$spacing-xs; align-items: center; justify-content: center; position: relative; @@ -380,28 +380,28 @@ border: 0; background-color: transparent; text-align: center; - color: $color-grey-20; + color: tokens.$color-grey-20; cursor: pointer; svg { - width: $layout-sm; + width: lib.$layout-sm; } &:hover { - color: $color-grey-30; + color: tokens.$color-grey-30; } } .copied-confirmation { - @include text-body-sm; + @include lib.text-body-sm; opacity: 0; - padding: $spacing-xs $spacing-sm; + padding: lib.$spacing-xs lib.$spacing-sm; justify-content: center; pointer-events: none; transition: opacity 2s; - background-color: $color-violet-30; - color: $color-white; - border-radius: $border-radius-md; + background-color: tokens.$color-violet-30; + color: tokens.$color-white; + border-radius: lib.$border-radius-md; right: 0; &.is-shown { @@ -416,29 +416,30 @@ .phone-controls-container { display: flex; flex-direction: column; - margin-top: $spacing-md; - padding: 0 $spacing-lg $spacing-2xl $spacing-lg; + margin-top: lib.$spacing-md; + padding: 0 lib.$spacing-lg lib.$spacing-2xl lib.$spacing-lg; width: 100%; - gap: $spacing-lg; - border-bottom: 1px solid $color-light-gray-20; + gap: lib.$spacing-lg; + border-bottom: 1px solid lib.$color-light-gray-20; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { flex-direction: row; width: auto; - gap: $layout-xl; - padding: $spacing-lg $spacing-lg $spacing-2xl $spacing-lg; - border-top: 1px solid $color-light-gray-20; + gap: lib.$layout-xl; + padding: lib.$spacing-lg lib.$spacing-lg lib.$spacing-2xl + lib.$spacing-lg; + border-top: 1px solid lib.$color-light-gray-20; } .phone-controls { $toggle-border-radius: 40px; .forwarding-toggle { - width: $content-sm; + width: lib.$content-sm; max-width: 100%; - background-color: $color-grey-05; + background-color: tokens.$color-grey-05; border-radius: $toggle-border-radius; - border: 6px solid $color-white; - outline: $border-radius-xs solid $color-grey-10; + border: 6px solid tokens.$color-white; + outline: lib.$border-radius-xs solid tokens.$color-grey-10; display: flex; align-items: center; justify-content: center; @@ -450,7 +451,7 @@ &::before { content: ""; position: absolute; - background-color: $color-violet-70; + background-color: tokens.$color-violet-70; border-radius: $toggle-border-radius; width: 50%; height: 100%; @@ -471,37 +472,37 @@ // absolutely positioned so it can be animated: z-index: 1; flex: 1 0 auto; - padding: $spacing-sm $spacing-sm; + padding: lib.$spacing-sm lib.$spacing-sm; display: flex; - gap: $spacing-sm; + gap: lib.$spacing-sm; align-items: center; justify-content: center; - @media screen and #{$mq-md} { - width: $layout-xl; + @media screen and #{lib.$mq-md} { + width: lib.$layout-xl; } } &[aria-pressed="true"] .forward-state, &[aria-pressed="false"] .block-state { - color: $color-white; + color: tokens.$color-white; } &[aria-pressed="false"] .forward-state, &[aria-pressed="true"] .block-state { - color: $color-grey-30; + color: tokens.$color-grey-30; } &:hover { cursor: pointer; - background-color: $color-violet-05; + background-color: tokens.$color-violet-05; &[aria-pressed="true"] .block-state, &[aria-pressed="false"] .forward-state { - color: $color-blue-50; + color: tokens.$color-blue-50; } } &:focus-visible { - outline-color: $color-blue-50; + outline-color: tokens.$color-blue-50; } } } @@ -510,10 +511,10 @@ .metadata-container { display: flex; flex-direction: column; - gap: $spacing-md; - padding: 0 $spacing-xl; - margin-top: $spacing-md; - border-bottom: 1px solid $color-light-gray-20; + gap: lib.$spacing-md; + padding: 0 lib.$spacing-xl; + margin-top: lib.$spacing-md; + border-bottom: 1px solid lib.$color-light-gray-20; &:last-child { border-bottom-style: none; @@ -523,21 +524,21 @@ dl { flex-grow: 2; display: flex; - gap: $spacing-sm; + gap: lib.$spacing-sm; flex-direction: column; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { flex-direction: row; - gap: $spacing-xl; + gap: lib.$spacing-xl; } dt { - @include text-body-xs; - color: $color-dark-gray-05; + @include lib.text-body-xs; + color: lib.$color-dark-gray-05; } } - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { flex-direction: row; .metadata { @@ -545,7 +546,7 @@ background-repeat: no-repeat; background-position: left center; background-size: $metadataIconSize $metadataIconSize; - padding-left: calc($metadataIconSize + $spacing-md); + padding-left: calc($metadataIconSize + lib.$spacing-md); } .forward-target { diff --git a/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss b/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss index 9eefb3ad13..81ff603ab0 100644 --- a/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss +++ b/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss @@ -1,18 +1,18 @@ -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "../../../styles/tokens"; -@import "../../../styles/typography"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../../styles/tokens"; +@use "../../../styles/typography" as styles-typography; .main-wrapper { display: flex; flex-direction: column; align-items: center; - max-width: $content-max; + max-width: lib.$content-max; width: 100%; margin: 0 auto; - padding: $spacing-md; - margin-bottom: $layout-md; - margin-top: $layout-sm; - gap: $layout-md; + padding: lib.$spacing-md; + margin-bottom: lib.$layout-md; + margin-top: lib.$layout-sm; + gap: lib.$layout-md; .main-heading { display: flex; @@ -20,8 +20,8 @@ text-align: center; h1 { - @include text-title-xs { - @include font-firefox; + @include styles-typography.text-title-xs { + @include lib.font-firefox; font-weight: 600; } } @@ -30,9 +30,9 @@ .phone-instructions-wrapper { display: flex; flex-direction: column; - margin-top: $layout-md; + margin-top: lib.$layout-md; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { flex-direction: row; } @@ -41,20 +41,20 @@ position: relative; display: flex; flex-direction: column; - padding: $spacing-lg 0; + padding: lib.$spacing-lg 0; - @media screen and #{$mq-md} { - padding: 0 $spacing-md; + @media screen and #{lib.$mq-md} { + padding: 0 lib.$spacing-md; } - @media screen and #{$mq-lg} { - padding: 0 $spacing-2xl; + @media screen and #{lib.$mq-lg} { + padding: 0 lib.$spacing-2xl; } + .instruction-item { - border-top: solid 2px $color-light-gray-20; + border-top: solid 2px lib.$color-light-gray-20; - @media screen and #{$mq-md} { - border-left: solid 2px $color-light-gray-20; + @media screen and #{lib.$mq-md} { + border-left: solid 2px lib.$color-light-gray-20; border-top: none; } } @@ -63,15 +63,15 @@ align-self: center; display: inline; border-radius: 100%; - background-color: $color-light-gray-30; - color: $color-dark-gray-90; - padding: $spacing-xs; - margin-left: $spacing-sm; + background-color: lib.$color-light-gray-30; + color: lib.$color-dark-gray-90; + padding: lib.$spacing-xs; + margin-left: lib.$spacing-sm; } h2 { - @include text-title-3xs; - padding: $spacing-md 0; + @include lib.text-title-3xs; + padding: lib.$spacing-md 0; font-weight: 600; } @@ -80,14 +80,14 @@ margin: 0; padding: 0; text-decoration: underline; - color: $color-blue-50; + color: tokens.$color-blue-50; cursor: pointer; font-weight: 500; background: none; border: none; &:hover { - color: $color-blue-80; + color: tokens.$color-blue-80; } } @@ -96,15 +96,15 @@ } .demo-wrapper { - padding: 0 $spacing-md; + padding: 0 lib.$spacing-md; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { padding: 0; } .demo-heading { - color: $color-light-gray-80; - padding-top: $spacing-lg; + color: lib.$color-light-gray-80; + padding-top: lib.$spacing-lg; } .demo-input-wrapper { @@ -113,16 +113,16 @@ position: relative; .demo-input { - @include text-body-lg; + @include lib.text-body-lg; position: absolute; // Positioning the input into the text image margin: 0 0 5% 5%; - @media screen and #{$mq-md} { - @include text-body-md; + @media screen and #{lib.$mq-md} { + @include lib.text-body-md; } - @media screen and #{$mq-xl} { - @include text-body-lg; + @media screen and #{lib.$mq-xl} { + @include lib.text-body-lg; } } @@ -143,35 +143,35 @@ ul { display: flex; flex-direction: column; - padding: $spacing-sm; - background: $color-white; + padding: lib.$spacing-sm; + background: tokens.$color-white; box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1); // Taken from Figma style to match it with the other svgs - border-radius: $border-radius-md; + border-radius: lib.$border-radius-md; list-style: none; - gap: $spacing-xs; + gap: lib.$spacing-xs; li { display: flex; flex-direction: row; align-items: center; justify-content: space-between; - padding: $spacing-xs; + padding: lib.$spacing-xs; &:first-child { - color: $color-light-gray-50; - padding-bottom: $spacing-sm; - border-bottom: 1px solid $color-light-gray-10; + color: lib.$color-light-gray-50; + padding-bottom: lib.$spacing-sm; + border-bottom: 1px solid lib.$color-light-gray-10; } span { margin: 0; p:nth-child(2) { - @include text-body-sm; + @include lib.text-body-sm; } &:nth-child(2) { - color: $color-blue-50; + color: tokens.$color-blue-50; } } } @@ -182,14 +182,14 @@ } .dashboard-btn { - @include font-firefox; + @include lib.font-firefox; width: 100%; text-align: center; - padding: $spacing-sm; + padding: lib.$spacing-sm; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { width: auto; - padding: $spacing-sm $spacing-2xl; + padding: lib.$spacing-sm lib.$spacing-2xl; } } } diff --git a/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss b/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss index 33158ddba3..c860830743 100644 --- a/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss +++ b/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss @@ -1,35 +1,35 @@ -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "../../../styles/tokens"; -@import "../../../styles/typography"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../../styles/tokens"; +@use "../../../styles/typography" as styles-typography; .wrapper { display: flex; flex-direction: column; - gap: $spacing-xl; + gap: lib.$spacing-xl; flex: 1 0 auto; - max-width: $content-lg; + max-width: lib.$content-lg; margin: 0 auto; - padding: $spacing-2xl $spacing-lg; + padding: lib.$spacing-2xl lib.$spacing-lg; width: 100%; overflow-x: hidden; h2 { - @include text-title-xs { - font-family: $font-stack-firefox; + @include styles-typography.text-title-xs { + font-family: lib.$font-stack-firefox; text-align: center; } } .lead { - @include text-title-3xs; - font-family: $font-stack-firefox; + @include lib.text-title-3xs; + font-family: lib.$font-stack-firefox; text-align: center; display: flex; flex-direction: column; - gap: $spacing-lg; + gap: lib.$spacing-lg; p { - @include text-body-md; + @include lib.text-body-md; } img { @@ -38,27 +38,27 @@ } .description { - @include text-body-md; + @include lib.text-body-md; display: flex; flex-direction: column; align-items: center; - gap: $spacing-2xl; - padding: $spacing-md; - margin-top: $spacing-lg; + gap: lib.$spacing-2xl; + padding: lib.$spacing-md; + margin-top: lib.$spacing-lg; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { flex-direction: row; } ul { display: flex; flex-direction: column; - gap: $spacing-md; + gap: lib.$spacing-md; margin: 0; padding: 0; ::marker { - color: $color-violet-60; + color: tokens.$color-violet-60; } } } @@ -71,15 +71,15 @@ align-items: center; justify-items: center; text-align: center; - gap: $spacing-md; - background-color: $color-white; - padding: $spacing-lg $spacing-2xl; - border-radius: $border-radius-md; - box-shadow: $box-shadow-sm; + gap: lib.$spacing-md; + background-color: tokens.$color-white; + padding: lib.$spacing-lg lib.$spacing-2xl; + border-radius: lib.$border-radius-md; + box-shadow: lib.$box-shadow-sm; h3 { - @include text-body-md; - font-family: $font-stack-firefox; + @include lib.text-body-md; + font-family: lib.$font-stack-firefox; text-align: center; font-weight: 400; } @@ -87,28 +87,28 @@ .pricing { display: flex; flex-direction: column; - gap: $spacing-sm; + gap: lib.$spacing-sm; width: 100%; // Ensures responsiveness of container, and that the purchase tabpanel has a static width when toggling. .pricing-toggle { display: flex; - background-color: $color-grey-10; - padding: $spacing-xs; - border-radius: $border-radius-lg; + background-color: tokens.$color-grey-10; + padding: lib.$spacing-xs; + border-radius: lib.$border-radius-lg; > div { - @include text-body-sm; + @include lib.text-body-sm; width: 50%; - padding: $spacing-xs $spacing-sm; + padding: lib.$spacing-xs lib.$spacing-sm; text-align: center; - color: $color-grey-40; + color: tokens.$color-grey-40; font-weight: 500; cursor: pointer; &.is-selected { - background-color: $color-white; - border-radius: $border-radius-lg; - color: $color-blue-50; + background-color: tokens.$color-white; + border-radius: lib.$border-radius-lg; + color: tokens.$color-blue-50; } } } @@ -116,17 +116,17 @@ [role="tabpanel"] { display: flex; flex-direction: column; - gap: $spacing-md; + gap: lib.$spacing-md; .price { - @include text-title-2xs { - padding-top: $spacing-sm; + @include styles-typography.text-title-2xs { + padding-top: lib.$spacing-sm; display: block; font-weight: 700; } > span { - @include text-body-sm; + @include lib.text-body-sm; font-weight: 400; vertical-align: middle; } diff --git a/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss b/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss index 222fd75637..0503f057bd 100644 --- a/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss +++ b/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss @@ -1,17 +1,17 @@ -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; -@import "../../../styles/tokens"; -@import "../../../styles/typography"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as lib2; +@use "../../../styles/tokens"; +@use "../../../styles/typography" as styles-typography; .step { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; - gap: $spacing-2xl; - max-width: $content-md; + gap: lib.$spacing-2xl; + max-width: lib.$content-md; margin: 0 auto; - padding: $spacing-lg; + padding: lib.$spacing-lg; .button { // TODO: This is not working @@ -21,22 +21,22 @@ } h2 { - @include text-title-xs { - font-family: $font-stack-firefox; + @include styles-typography.text-title-xs { + font-family: lib.$font-stack-firefox; text-align: center; } } .lead { - @include text-title-3xs; - font-family: $font-stack-firefox; + @include lib.text-title-3xs; + font-family: lib.$font-stack-firefox; text-align: center; display: flex; flex-direction: column; - gap: $spacing-lg; + gap: lib.$spacing-lg; p { - @include text-body-md; + @include lib.text-body-md; } img { @@ -45,22 +45,22 @@ } .description { - @include text-body-md; + @include lib.text-body-md; display: flex; flex-direction: column; align-items: center; - gap: $spacing-2xl; - padding: $spacing-md; - margin-top: $spacing-lg; + gap: lib.$spacing-2xl; + padding: lib.$spacing-md; + margin-top: lib.$spacing-lg; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { flex-direction: row; } ul { display: flex; flex-direction: column; - gap: $spacing-md; + gap: lib.$spacing-md; margin: 0; padding: 0; } @@ -74,22 +74,22 @@ align-items: center; justify-items: center; text-align: center; - gap: $spacing-md; - background-color: $color-white; - padding: $spacing-lg $spacing-2xl; - border-radius: $border-radius-md; - box-shadow: $box-shadow-sm; + gap: lib.$spacing-md; + background-color: tokens.$color-white; + padding: lib.$spacing-lg lib.$spacing-2xl; + border-radius: lib.$border-radius-md; + box-shadow: lib.$box-shadow-sm; h3 { - @include text-body-md; - font-family: $font-stack-firefox; + @include lib.text-body-md; + font-family: lib.$font-stack-firefox; text-align: center; font-weight: 400; } span { - @include text-title-2xs { - padding-top: $spacing-sm; + @include styles-typography.text-title-2xs { + padding-top: lib.$spacing-sm; display: block; font-weight: 700; } @@ -100,18 +100,18 @@ // Step 2: Verify Phone Number .step-verify-input .error { - max-width: $content-sm; - background-color: $color-white; - border-radius: $border-radius-md; - box-shadow: $box-shadow-sm; - padding: $spacing-md; + max-width: lib.$content-sm; + background-color: tokens.$color-white; + border-radius: lib.$border-radius-md; + box-shadow: lib.$box-shadow-sm; + padding: lib.$spacing-md; text-align: center; margin: 0 auto; } .step-verify-sub-body { - background-color: $color-white; - border-radius: $border-radius-md; - padding: $spacing-lg; + background-color: tokens.$color-white; + border-radius: lib.$border-radius-md; + padding: lib.$spacing-lg; } .step-verify-input .is-hidden { @@ -119,11 +119,11 @@ } .form { - max-width: $content-sm; + max-width: lib.$content-sm; margin: 0 auto; display: flex; flex-direction: column; - gap: $spacing-lg; + gap: lib.$spacing-lg; } // Step 3: Enter verification code @@ -136,7 +136,7 @@ } h2 { - padding-top: $spacing-md; + padding-top: lib.$spacing-md; } &.is-error, @@ -151,7 +151,7 @@ display: block; } h2 { - color: $color-error; + color: tokens.$color-error; } } @@ -160,25 +160,25 @@ display: block; } h2 { - color: $color-success; + color: tokens.$color-success; } } } form { - background-color: $color-white; - box-shadow: $box-shadow-sm; - padding: $spacing-lg; - border-radius: $border-radius-md; - max-width: $screen-sm; + background-color: tokens.$color-white; + box-shadow: lib.$box-shadow-sm; + padding: lib.$spacing-lg; + border-radius: lib.$border-radius-md; + max-width: lib.$screen-sm; position: relative; &.is-hidden { display: none; } - @media screen and #{$mq-md} { - padding: $spacing-lg $spacing-2xl; + @media screen and #{lib.$mq-md} { + padding: lib.$spacing-lg lib.$spacing-2xl; } p { @@ -195,24 +195,24 @@ } input { - @include text-body-xl; - border-radius: $border-radius-md; + @include lib.text-body-xl; + border-radius: lib.$border-radius-md; display: block; - padding: $spacing-sm; + padding: lib.$spacing-sm; box-shadow: none; border: 0; - background-color: $color-grey-10; + background-color: tokens.$color-grey-10; letter-spacing: 1rem; text-align: center; width: 100%; &.is-error { - border: 2px solid $color-error; - outline: 4px solid $color-error-focus; + border: 2px solid tokens.$color-error; + outline: 4px solid tokens.$color-error-focus; } - @media screen and #{$mq-md} { - padding: $spacing-md; + @media screen and #{lib.$mq-md} { + padding: lib.$spacing-md; letter-spacing: 2rem; } } @@ -220,15 +220,15 @@ } .step-input-verificiation-code-timeout { - background-color: $color-white; - box-shadow: $box-shadow-sm; - border-radius: $border-radius-md; - padding: $spacing-lg $spacing-2xl; - max-width: $screen-sm; + background-color: tokens.$color-white; + box-shadow: lib.$box-shadow-sm; + border-radius: lib.$border-radius-md; + padding: lib.$spacing-lg lib.$spacing-2xl; + max-width: lib.$screen-sm; margin: 0 auto; display: flex; flex-direction: column; - gap: $spacing-lg; + gap: lib.$spacing-lg; &.is-hidden { display: none; @@ -240,15 +240,15 @@ } .step-input-verificiation-code-success { - background-color: $color-white; - box-shadow: $box-shadow-sm; - border-radius: $border-radius-md; - padding: $spacing-lg $spacing-2xl; - max-width: $screen-sm; + background-color: tokens.$color-white; + box-shadow: lib.$box-shadow-sm; + border-radius: lib.$border-radius-md; + padding: lib.$spacing-lg lib.$spacing-2xl; + max-width: lib.$screen-sm; margin: 0 auto; display: flex; flex-direction: column; - gap: $spacing-lg; + gap: lib.$spacing-lg; justify-content: center; &.is-hidden { @@ -256,7 +256,7 @@ } h3 { - @include text-body-md; + @include lib.text-body-md; } p, @@ -270,25 +270,25 @@ align-items: center; position: relative; - @include text-body-sm; + @include lib.text-body-sm; } .phone-input { - width: $content-xs; - height: $layout-sm; - padding: $spacing-md $spacing-sm $spacing-md $spacing-2xl; + width: lib.$content-xs; + height: lib.$layout-sm; + padding: lib.$spacing-md lib.$spacing-sm lib.$spacing-md lib.$spacing-2xl; &.is-error { - border: 2px solid $color-red-60; - box-shadow: 0 0 4px 4px $color-red-30; + border: 2px solid tokens.$color-red-60; + box-shadow: 0 0 4px 4px tokens.$color-red-30; } } // static country code in the real phone number input "+1" .phone-input-country-code { - background-color: $color-grey-10; - border-radius: $border-radius-sm; + background-color: tokens.$color-grey-10; + border-radius: lib.$border-radius-sm; position: absolute; - padding: 0 $spacing-sm; - margin-left: $spacing-sm; + padding: 0 lib.$spacing-sm; + margin-left: lib.$spacing-sm; } diff --git a/frontend/src/components/phones/onboarding/RelayNumberConfirmationModal.module.scss b/frontend/src/components/phones/onboarding/RelayNumberConfirmationModal.module.scss index 318e0575e7..a73314829d 100644 --- a/frontend/src/components/phones/onboarding/RelayNumberConfirmationModal.module.scss +++ b/frontend/src/components/phones/onboarding/RelayNumberConfirmationModal.module.scss @@ -1,10 +1,10 @@ -@import "../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; +@use "../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as lib2; .underlay { position: fixed; - background-color: rgba($color-black, 0.4); + background-color: rgba(lib.$color-black, 0.4); top: 0; bottom: 0; left: 0; @@ -17,44 +17,44 @@ display: flex; flex-direction: column; align-items: flex-end; - background: $color-white; - gap: $spacing-lg; - max-width: $content-sm; - border-radius: $border-radius-md; - box-shadow: $box-shadow-sm; - padding: $spacing-md; + background: lib.$color-white; + gap: lib.$spacing-lg; + max-width: lib.$content-sm; + border-radius: lib.$border-radius-md; + box-shadow: lib.$box-shadow-sm; + padding: lib.$spacing-md; .dialog-content { display: flex; flex-direction: column; align-items: center; text-align: center; - gap: $spacing-xl; - padding: $spacing-lg $spacing-md; + gap: lib.$spacing-xl; + padding: lib.$spacing-lg lib.$spacing-md; p { display: flex; - gap: $spacing-xs; + gap: lib.$spacing-xs; flex-direction: column; } } .confirm-button { - width: $content-xs; + width: lib.$content-xs; } .cancel-button { border-style: none; background-color: transparent; cursor: pointer; - color: $color-grey-40; + color: tokens.$color-grey-40; &:hover { - color: $color-link-hover; + color: lib.$color-link-hover; } &:focus { - color: $color-blue-50; + color: lib.$color-blue-50; } } } diff --git a/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss b/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss index 374700509e..9eff960fa3 100644 --- a/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss +++ b/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss @@ -1,16 +1,16 @@ -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; -@import "../../../styles/tokens"; -@import "../../../styles/typography"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as lib2; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; +@use "../../../styles/tokens"; +@use "../../../styles/typography" as styles-typography; .step, .controls { - max-width: $content-md; + max-width: lib2.$content-md; margin: 0 auto; - padding: $spacing-lg; + padding: lib2.$spacing-lg; &.step-welcome { - max-width: $content-lg; + max-width: lib2.$content-lg; } } @@ -19,7 +19,7 @@ display: flex; flex-direction: column; justify-content: center; - gap: $spacing-2xl; + gap: lib2.$spacing-2xl; .show-more-options { font-weight: 400; @@ -35,22 +35,22 @@ } h2 { - @include text-title-xs { - font-family: $font-stack-firefox; + @include styles-typography.text-title-xs { + font-family: lib2.$font-stack-firefox; text-align: center; } } .lead { - @include text-body-sm; - font-family: $font-stack-base; + @include lib2.text-body-sm; + font-family: lib2.$font-stack-base; text-align: center; display: flex; flex-direction: column; - gap: $spacing-lg; + gap: lib2.$spacing-lg; p { - @include text-body-md; + @include lib2.text-body-md; } img { @@ -59,22 +59,22 @@ } .description { - @include text-body-md; + @include lib2.text-body-md; display: flex; flex-direction: column; align-items: center; - gap: $spacing-2xl; - padding: $spacing-md; - margin-top: $spacing-lg; + gap: lib2.$spacing-2xl; + padding: lib2.$spacing-md; + margin-top: lib2.$spacing-lg; - @media screen and #{$mq-md} { + @media screen and #{lib2.$mq-md} { flex-direction: row; } ul { display: flex; flex-direction: column; - gap: $spacing-md; + gap: lib2.$spacing-md; margin: 0; padding: 0; } @@ -88,22 +88,22 @@ align-items: center; justify-items: center; text-align: center; - gap: $spacing-md; - background-color: $color-white; - padding: $spacing-lg $spacing-2xl; - border-radius: $border-radius-md; - box-shadow: $box-shadow-sm; + gap: lib2.$spacing-md; + background-color: tokens.$color-white; + padding: lib2.$spacing-lg lib2.$spacing-2xl; + border-radius: lib2.$border-radius-md; + box-shadow: lib2.$box-shadow-sm; h3 { - @include text-body-md; - font-family: $font-stack-firefox; + @include lib2.text-body-md; + font-family: lib2.$font-stack-firefox; text-align: center; font-weight: 400; } span { - @include text-title-2xs { - padding-top: $spacing-sm; + @include styles-typography.text-title-2xs { + padding-top: lib2.$spacing-sm; display: block; font-weight: 700; } @@ -111,11 +111,11 @@ } .form { - max-width: $content-sm; + max-width: lib2.$content-sm; margin: 0 auto; display: flex; flex-direction: column; - gap: $spacing-lg; + gap: lib2.$spacing-lg; } } @@ -140,7 +140,7 @@ display: block; } h2 { - color: $color-error; + color: tokens.$color-error; } } @@ -149,25 +149,25 @@ display: block; } h2 { - color: $color-success; + color: tokens.$color-success; } } } form { - background-color: $color-white; - box-shadow: $box-shadow-sm; - padding: $spacing-lg; - border-radius: $border-radius-md; - max-width: $screen-sm; + background-color: tokens.$color-white; + box-shadow: lib2.$box-shadow-sm; + padding: lib2.$spacing-lg; + border-radius: lib2.$border-radius-md; + max-width: lib2.$screen-sm; position: relative; &.is-hidden { display: none; } - @media screen and #{$mq-md} { - padding: $spacing-lg $spacing-2xl; + @media screen and #{lib2.$mq-md} { + padding: lib2.$spacing-lg lib2.$spacing-2xl; } p { @@ -184,24 +184,24 @@ } input { - @include text-body-xl; - border-radius: $border-radius-md; + @include lib2.text-body-xl; + border-radius: lib2.$border-radius-md; display: block; - padding: $spacing-sm; + padding: lib2.$spacing-sm; box-shadow: none; border: 0; - background-color: $color-grey-10; + background-color: tokens.$color-grey-10; letter-spacing: 1rem; text-align: center; width: 100%; &.is-error { - border: 2px solid $color-error; - outline: 4px solid $color-error-focus; + border: 2px solid tokens.$color-error; + outline: 4px solid tokens.$color-error-focus; } - @media screen and #{$mq-md} { - padding: $spacing-md; + @media screen and #{lib2.$mq-md} { + padding: lib2.$spacing-md; letter-spacing: 2rem; } } @@ -209,15 +209,15 @@ } .step-input-verificiation-code-success { - background-color: $color-white; - box-shadow: $box-shadow-sm; - border-radius: $border-radius-md; - padding: $spacing-lg $spacing-2xl; - max-width: $screen-sm; + background-color: tokens.$color-white; + box-shadow: lib2.$box-shadow-sm; + border-radius: lib2.$border-radius-md; + padding: lib2.$spacing-lg lib2.$spacing-2xl; + max-width: lib2.$screen-sm; margin: 0 auto; display: flex; flex-direction: column; - gap: $spacing-lg; + gap: lib2.$spacing-lg; justify-content: center; &.is-hidden { @@ -225,7 +225,7 @@ } h3 { - @include text-body-md; + @include lib2.text-body-md; } p, @@ -235,21 +235,21 @@ } .step-select-phone-number-mask { - background-color: $color-white; - box-shadow: $box-shadow-sm; - border-radius: $border-radius-md; - padding: $spacing-xl $spacing-lg; + background-color: tokens.$color-white; + box-shadow: lib2.$box-shadow-sm; + border-radius: lib2.$border-radius-md; + padding: lib2.$spacing-xl lib2.$spacing-lg; width: 100%; margin: 0 auto; display: flex; flex-direction: column; - gap: $spacing-lg; + gap: lib2.$spacing-lg; justify-content: center; .lead { display: flex; flex-direction: row; - gap: $spacing-md; + gap: lib2.$spacing-md; align-items: center; justify-content: center; @@ -268,22 +268,22 @@ flex-direction: column; align-items: center; justify-content: center; - gap: $spacing-md; + gap: lib2.$spacing-md; > div { display: flex; - gap: $spacing-sm; + gap: lib2.$spacing-sm; } } .search { - @include form-input; + @include lib.form-input; position: relative; - padding-left: $layout-md; - background: $spacing-sm center transparent no-repeat; + padding-left: lib2.$layout-md; + background: lib2.$spacing-sm center transparent no-repeat; background-image: url("/icons/search-blue.svg"); background-size: 1.5rem auto; - max-width: $content-xs; + max-width: lib2.$content-xs; margin: 0 auto; } } @@ -293,24 +293,24 @@ // Magic number: Min-height for both loading animation and body copy // TODO: Use height of parent container flex-direction: column; - gap: $spacing-md; + gap: lib2.$spacing-md; align-items: center; justify-content: center; - @media screen and #{$mq-tall} { + @media screen and #{lib2.$mq-tall} { // min-height: 75vh; } .loading { - width: $layout-lg; - height: $layout-lg; + width: lib2.$layout-lg; + height: lib2.$layout-lg; background: url("./images/loading.svg") center no-repeat transparent; background-size: contain; animation: spin 1s infinite linear; } p { - max-width: $content-xs; + max-width: lib2.$content-xs; margin: 0 auto; text-align: center; } diff --git a/frontend/src/components/waitlist/WaitlistPage.module.scss b/frontend/src/components/waitlist/WaitlistPage.module.scss index 2d4cd7ec52..8ca930e39f 100644 --- a/frontend/src/components/waitlist/WaitlistPage.module.scss +++ b/frontend/src/components/waitlist/WaitlistPage.module.scss @@ -1,54 +1,54 @@ -@import "~@mozilla-protocol/core/protocol/css/includes/tokens/dist/index"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; -@import "../../styles/typography"; +@use "~@mozilla-protocol/core/protocol/css/includes/tokens/dist/index" as dist; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as lib2; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; +@use "../../styles/typography" as styles-typography; .wrapper { display: flex; justify-content: space-around; align-items: center; height: 100%; - padding: $spacing-sm $spacing-lg; + padding: lib2.$spacing-sm lib2.$spacing-lg; .form { - width: $content-lg; + width: lib2.$content-lg; max-width: 100%; display: flex; flex-direction: column; align-items: center; - gap: $spacing-2xl; - padding: $spacing-md 0; + gap: lib2.$spacing-2xl; + padding: lib2.$spacing-md 0; .controls { display: flex; flex-direction: column; - gap: $spacing-sm; - width: $content-md; + gap: lib2.$spacing-sm; + width: lib2.$content-md; max-width: 100%; .control { display: flex; flex-direction: column; - gap: $spacing-xs; + gap: lib2.$spacing-xs; width: 100%; label { - @include field-label; - @include text-body-md; + @include lib.field-label; + @include lib2.text-body-md; padding: 0; } i { - @include text-body-sm; + @include lib2.text-body-sm; } input { - @include form-input; + @include lib.form-input; width: 100%; } select { - @include form-input; + @include lib.form-input; width: 100%; } } @@ -59,19 +59,19 @@ } .privacy { - @include text-body-sm; + @include lib2.text-body-sm; align-self: center; text-align: center; display: flex; flex-direction: column; - gap: $spacing-md; + gap: lib2.$spacing-md; a { - color: $color-blue-50; + color: lib2.$color-blue-50; text-decoration: underline; &:hover { - color: $color-blue-60; + color: lib2.$color-blue-60; text-decoration: none; } } @@ -79,15 +79,15 @@ } .heading { - @include text-title-sm { - font-family: $font-stack-firefox; + @include styles-typography.text-title-sm { + font-family: lib2.$font-stack-firefox; align-self: center; text-align: center; } } .lead { - @include text-body-lg; + @include lib2.text-body-lg; align-self: center; text-align: center; } diff --git a/frontend/src/hooks/mediaQuery.module.scss b/frontend/src/hooks/mediaQuery.module.scss index e8ae5fd391..c8ce6e84a1 100644 --- a/frontend/src/hooks/mediaQuery.module.scss +++ b/frontend/src/hooks/mediaQuery.module.scss @@ -1,10 +1,11 @@ -@import "~@mozilla-protocol/core/protocol/css/includes/tokens/dist/index.scss"; +@use "~@mozilla-protocol/core/protocol/css/includes/tokens/dist/index.scss" as + dist; // See https://nextjs.org/docs/basic-features/built-in-css-support#sass-variables :export { - mq_xs: $mq-xs; - mq_sm: $mq-sm; - mq_md: $mq-md; - mq_lg: $mq-lg; - mq_xl: $mq-xl; + mq_xs: dist.$mq-xs; + mq_sm: dist.$mq-sm; + mq_md: dist.$mq-md; + mq_lg: dist.$mq-lg; + mq_xl: dist.$mq-xl; } diff --git a/frontend/src/pages/accounts/account_inactive.module.scss b/frontend/src/pages/accounts/account_inactive.module.scss index 4346c56bed..7be77f8b12 100644 --- a/frontend/src/pages/accounts/account_inactive.module.scss +++ b/frontend/src/pages/accounts/account_inactive.module.scss @@ -1,6 +1,6 @@ -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; .error { - background-color: $color-red-60; - color: $color-white; + background-color: lib.$color-red-60; + color: lib.$color-white; } diff --git a/frontend/src/pages/accounts/profile.module.scss b/frontend/src/pages/accounts/profile.module.scss index 3b4c2a2d85..8f431e8f82 100644 --- a/frontend/src/pages/accounts/profile.module.scss +++ b/frontend/src/pages/accounts/profile.module.scss @@ -1,19 +1,20 @@ -@import "../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "~@mozilla-protocol/core/protocol/css/includes/mixins/typography"; -@import "../../styles/typography"; +@use "../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/mixins/typography" as + mixins-typography; +@use "../../styles/typography"; .header { - background-color: $color-light-gray-05; + background-color: lib.$color-light-gray-05; width: 100%; - padding: $spacing-md 0; + padding: lib.$spacing-md 0; .header-wrapper { display: flex; flex-direction: column; - gap: $spacing-md; + gap: lib.$spacing-md; - @media screen and #{$mq-lg} { + @media screen and #{lib.$mq-lg} { flex-direction: row; align-items: center; } @@ -22,14 +23,14 @@ flex: 1 0 auto; display: flex; flex-direction: column; - gap: $spacing-sm; + gap: lib.$spacing-sm; .greeting { - @include text-body-xl; + @include lib.text-body-xl; font-weight: 700; .lead { - @include text-body-md; + @include lib.text-body-md; font-weight: 400; display: block; } @@ -39,20 +40,20 @@ display: flex; flex-wrap: wrap; align-items: center; - gap: $spacing-xs; - color: $color-blue-50; + gap: lib.$spacing-xs; + color: lib.$color-blue-50; .info-icon { align-items: center; background-color: transparent; border-style: none; - color: $color-light-gray-70; + color: lib.$color-light-gray-70; cursor: pointer; display: flex; } .pencil-icon { - margin-right: $spacing-xs; + margin-right: lib.$spacing-xs; } } @@ -64,11 +65,11 @@ .account-stats { display: grid; grid-template-columns: 1fr 1fr; - gap: $spacing-md; + gap: lib.$spacing-md; text-align: center; justify-content: space-evenly; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { display: flex; } @@ -78,25 +79,25 @@ $arrowWidth: 6px; .tooltip { - @include text-body-sm; + @include lib.text-body-sm; position: absolute; - width: $content-xs; - color: $color-white; - max-width: calc(100% - 2 * $spacing-xs); - top: calc(100% + $arrowWidth + $spacing-xs); + width: lib.$content-xs; + color: lib.$color-white; + max-width: calc(100% - 2 * lib.$spacing-xs); + top: calc(100% + $arrowWidth + lib.$spacing-xs); font-weight: 400; - right: $spacing-xs; - background-color: $color-purple-80; - box-shadow: $box-shadow-sm; + right: lib.$spacing-xs; + background-color: lib.$color-purple-80; + box-shadow: lib.$box-shadow-sm; display: flex; flex-direction: column; - gap: $spacing-sm; - padding: $spacing-md $spacing-md; - border-radius: $border-radius-sm; + gap: lib.$spacing-sm; + padding: lib.$spacing-md lib.$spacing-md; + border-radius: lib.$border-radius-sm; // Prevent other .stat-wrapper elements from overlapping this tooltip: z-index: 2; - @media screen and #{$mq-lg} { + @media screen and #{lib.$mq-lg} { // The wrapper doesn't span the full width on large screens, // so limiting the tooltip to its wrapper's size makes it too thin: max-width: unset; @@ -108,11 +109,11 @@ width: 2 * $arrowWidth; position: absolute; top: -1 * $arrowWidth; - right: $spacing-md; + right: lib.$spacing-md; transform: rotate(45deg); - background-color: $color-purple-80; - border-top: 1px solid $color-purple-80; - border-left: 1px solid $color-purple-80; + background-color: lib.$color-purple-80; + border-top: 1px solid lib.$color-purple-80; + border-left: 1px solid lib.$color-purple-80; } } @@ -127,13 +128,13 @@ display: flex; flex-direction: column; align-items: center; - gap: $spacing-xs; - padding: $spacing-md; - background-color: $color-white; - border: 1px solid $color-light-gray-20; - border-radius: $border-radius-md; + gap: lib.$spacing-xs; + padding: lib.$spacing-md; + background-color: lib.$color-white; + border: 1px solid lib.$color-light-gray-20; + border-radius: lib.$border-radius-md; - @media screen and #{$mq-lg} { + @media screen and #{lib.$mq-lg} { // On small screens, stats have a border and all that, but since // Protocol doesn't have max-width media queries, we need to unset // all those for larger screens: @@ -149,77 +150,77 @@ } .label { - @include text-body-sm; - color: $color-dark-gray-10; + @include lib.text-body-sm; + color: lib.$color-dark-gray-10; } .maxed { - color: $color-purple-50; + color: lib.$color-purple-50; } .value { - @include text-title-xs { - font-family: $font-stack-firefox; + @include typography.text-title-xs { + font-family: lib.$font-stack-firefox; font-weight: 700; - padding: $spacing-xs 0; + padding: lib.$spacing-xs 0; flex: 1 0 auto; display: flex; flex-direction: column; } .learn-more-wrapper { - @include text-body-sm; + @include lib.text-body-sm; font-weight: 400; .open-button { background-color: transparent; border-style: none; - border-radius: $border-radius-lg; - color: $color-blue-50; - padding-inline: $spacing-md; - font-family: $font-stack-base; + border-radius: lib.$border-radius-lg; + color: lib.$color-blue-50; + padding-inline: lib.$spacing-md; + font-family: lib.$font-stack-base; font-weight: 500; cursor: pointer; &:hover { - background-color: $color-grey-10; + background-color: tokens.$color-grey-10; } } &.is-open .open-button { - background-color: $color-grey-10; + background-color: tokens.$color-grey-10; } .close-button { align-self: end; background-color: transparent; border-style: none; - border-radius: $border-radius-sm; + border-radius: lib.$border-radius-sm; float: right; padding: 0; cursor: pointer; &:hover { - color: $color-blue-50; + color: lib.$color-blue-50; } } .learn-more-tooltip { - padding: $spacing-md; - background-color: $color-white; - width: $content-sm; + padding: lib.$spacing-md; + background-color: lib.$color-white; + width: lib.$content-sm; // On small screens, the tooltip should span the full width, // minus the padding around `.stat` elements (i.e. the value of // `gap` for `.account-stats`): - max-width: calc(100vw - $spacing-md * 2); - box-shadow: $box-shadow-sm; - border-radius: $border-radius-sm; + max-width: calc(100vw - lib.$spacing-md * 2); + box-shadow: lib.$box-shadow-sm; + border-radius: lib.$border-radius-sm; text-align: start; p + p { // Not using `gap` on the parent becase we don't want space // between the close button and the first paragraph: - margin-top: $spacing-md; + margin-top: lib.$spacing-md; } } } @@ -237,7 +238,7 @@ right: 0; } - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { // On medium-sized screens, the `.stat` items are in a row, // so only the first element should have the tooltip aligned to its // left-hand side: @@ -252,22 +253,22 @@ } .upsell-banner { - background-color: $color-blue-90; + background-color: lib.$color-blue-90; .upsell-banner-description, .upsell-banner-header { - @include font-firefox; - color: $color-white; + @include lib.font-firefox; + color: lib.$color-white; } .upsell-banner-header { - @include text-title-md { + @include typography.text-title-md { font-weight: 700; } } .upsell-banner-description { - @include text-body-lg; + @include lib.text-body-lg; } .upsell-banner-wrapper { @@ -275,25 +276,25 @@ align-items: center; justify-content: center; flex-direction: column-reverse; - padding: $spacing-xl 0; - gap: $spacing-2xl; + padding: lib.$spacing-xl 0; + gap: lib.$spacing-2xl; - @media screen and #{$mq-lg} { + @media screen and #{lib.$mq-lg} { flex-direction: row; - gap: $spacing-xs; + gap: lib.$spacing-xs; } } .upsell-banner-image { - max-width: $content-md; + max-width: lib.$content-md; width: 100%; } .upsell-banner-content { - max-width: $content-md; + max-width: lib.$content-md; display: flex; - gap: $spacing-lg; - padding: 0 $spacing-xl; + gap: lib.$spacing-lg; + padding: 0 lib.$spacing-xl; flex-direction: column; align-items: flex-start; } @@ -303,14 +304,14 @@ display: flex; flex-direction: column; align-items: baseline; - gap: $spacing-md; - padding-bottom: $spacing-xl; + gap: lib.$spacing-md; + padding-bottom: lib.$spacing-xl; // Ensure that the card can always overlap elements in the profile, // even if they have z-indexes to overlap each other: isolation: isolate; - @media screen and (min-width: $screen-md) { - background-color: $color-light-gray-10; + @media screen and (min-width: lib.$screen-md) { + background-color: lib.$color-light-gray-10; } } @@ -319,59 +320,59 @@ .bottom-banner-wrapper, .no-premium-header, .header-wrapper { - max-width: $content-xl; + max-width: lib.$content-xl; width: 100%; margin: 0 auto; - padding: 0 $spacing-md; + padding: 0 lib.$spacing-md; } .banners-wrapper { - gap: $spacing-lg; + gap: lib.$spacing-lg; display: flex; flex-direction: column; } .no-premium-header { - padding-top: $spacing-xl; + padding-top: lib.$spacing-xl; } .main-wrapper { display: flex; flex-direction: column; - gap: $spacing-xl; + gap: lib.$spacing-xl; } .size-information { - padding: 0 0 $spacing-lg; + padding: 0 0 lib.$spacing-lg; } .bottom-banner { - background-color: $color-white; + background-color: lib.$color-white; width: 100%; .bottom-banner-wrapper { display: flex; flex-direction: column; justify-content: space-evenly; - gap: $spacing-xl; - padding: $spacing-xl; + gap: lib.$spacing-xl; + padding: lib.$spacing-xl; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { flex-direction: row; } } .bottom-banner-content { - max-width: $screen-sm; + max-width: lib.$screen-sm; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-evenly; - gap: $spacing-md; + gap: lib.$spacing-md; h3 { - @include font-mozilla; - @include text-title-xs { + @include lib.font-mozilla; + @include typography.text-title-xs { font-weight: 500; } @@ -381,8 +382,8 @@ } p { - @include text-body-md; - color: $color-light-gray-90; + @include lib.text-body-md; + color: lib.$color-light-gray-90; } } } diff --git a/frontend/src/pages/accounts/settings.module.scss b/frontend/src/pages/accounts/settings.module.scss index 342d4d2bfd..9785fa8426 100644 --- a/frontend/src/pages/accounts/settings.module.scss +++ b/frontend/src/pages/accounts/settings.module.scss @@ -1,5 +1,5 @@ -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../styles/tokens"; .settings-page { display: flex; @@ -7,10 +7,10 @@ } .menu { - padding: $spacing-lg $spacing-lg 0; + padding: lib.$spacing-lg lib.$spacing-lg 0; h1 { - padding-bottom: $spacing-lg; + padding-bottom: lib.$spacing-lg; } ul { @@ -19,15 +19,15 @@ list-style-type: none; li { - padding: $spacing-sm 0; + padding: lib.$spacing-sm 0; } a { - @include text-body-lg; + @include lib.text-body-lg; display: flex; align-items: center; - color: $color-dark-gray-50; - gap: $spacing-sm; + color: lib.$color-dark-gray-50; + gap: lib.$spacing-sm; &:hover { text-decoration: underline; @@ -36,8 +36,8 @@ img, svg.menu-icon { // The size of text-body-lg, i.e. the same size as the containing 's font: - width: remify(type-scale("body-lg-size")); - color: $color-violet-40; + width: lib.remify(lib.type-scale("body-lg-size")); + color: tokens.$color-violet-40; } } } @@ -45,32 +45,32 @@ .main { width: 100%; - padding: $spacing-lg; + padding: lib.$spacing-lg; } .banner-wrapper { - padding-bottom: $spacing-xl; + padding-bottom: lib.$spacing-xl; } -$field-gap: $spacing-lg; +$field-gap: lib.$spacing-lg; .settings-form { - @include text-body-sm; - box-shadow: $box-shadow-sm; - border-radius: $border-radius-md; - padding: $spacing-md; + @include lib.text-body-sm; + box-shadow: lib.$box-shadow-sm; + border-radius: lib.$border-radius-md; + padding: lib.$spacing-md; background-color: white; display: flex; flex-direction: column; gap: $field-gap; - color: $color-grey-50; + color: tokens.$color-grey-50; } .field { - border-bottom: 1px solid $color-light-gray-20; + border-bottom: 1px solid lib.$color-light-gray-20; display: flex; flex-direction: column; - gap: $spacing-sm; + gap: lib.$spacing-sm; // padding-bottom is used to have the same gap between the form field and the // bottom border, as the form field has to the bottom border of the form field // preceding it (via `.settings-form`'s `gap`). @@ -78,20 +78,20 @@ $field-gap: $spacing-lg; } .field-heading { - @include text-title-3xs; + @include lib.text-title-3xs; font-weight: 400; flex-basis: 0; - min-width: $layout-xl; + min-width: lib.$layout-xl; .field-heading-icon-wrapper { display: flex; align-items: center; - gap: $spacing-sm; + gap: lib.$spacing-sm; svg { display: none; - @media screen and #{$mq-sm} { + @media screen and #{lib.$mq-sm} { display: initial; } } @@ -101,35 +101,35 @@ $field-gap: $spacing-lg; .field-content { display: flex; flex-direction: column; - gap: $spacing-md; + gap: lib.$spacing-md; .field-control { display: flex; align-items: flex-start; - gap: $spacing-sm; + gap: lib.$spacing-sm; input { - margin-top: $spacing-xs; + margin-top: lib.$spacing-xs; } label { display: inline-flex; flex-direction: column; - gap: $spacing-sm; + gap: lib.$spacing-sm; } } .field-warning { display: flex; - gap: $spacing-sm; + gap: lib.$spacing-sm; align-items: flex-start; - background-color: $color-light-gray-20; + background-color: lib.$color-light-gray-20; width: 100%; - padding: $spacing-md $spacing-lg; - border-radius: $border-radius-sm; + padding: lib.$spacing-md lib.$spacing-lg; + border-radius: lib.$border-radius-sm; svg { - color: $color-yellow-50; + color: tokens.$color-yellow-50; flex: 1 0 auto; } } @@ -143,23 +143,23 @@ $field-gap: $spacing-lg; display: flex; flex-wrap: wrap; flex-direction: row; - gap: $spacing-md; + gap: lib.$spacing-md; align-items: center; } .copy-api-key-display { - padding: $spacing-sm $spacing-md; - background-color: $color-grey-05; + padding: lib.$spacing-sm lib.$spacing-md; + background-color: tokens.$color-grey-05; border: 0; - outline: 1px solid $color-grey-20; - border-radius: $border-radius-md; + outline: 1px solid tokens.$color-grey-20; + border-radius: lib.$border-radius-md; white-space: nowrap; overflow: hidden; font-family: monospace; max-width: 200px; text-overflow: ellipsis; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { max-width: 350px; } } @@ -168,7 +168,7 @@ $field-gap: $spacing-lg; display: flex; flex-wrap: wrap; align-items: center; - gap: $spacing-sm; + gap: lib.$spacing-sm; } .settings-api-key-copy { @@ -183,7 +183,7 @@ $field-gap: $spacing-lg; .copy-button-wrapper { display: flex; flex-direction: row; - gap: $spacing-xs; + gap: lib.$spacing-xs; position: relative; .copy-button { @@ -192,15 +192,15 @@ $field-gap: $spacing-lg; border: 0; background-color: transparent; text-align: center; - color: $color-grey-20; + color: tokens.$color-grey-20; cursor: pointer; svg { - width: $layout-xs; + width: lib.$layout-xs; } &:hover { - color: $color-grey-30; + color: tokens.$color-grey-30; } } @@ -208,10 +208,10 @@ $field-gap: $spacing-lg; opacity: 0; pointer-events: none; transition: opacity 2s; - background-color: $color-violet-30; - color: $color-white; - border-radius: $border-radius-md; - padding: 0 $spacing-xs; + background-color: tokens.$color-violet-30; + color: tokens.$color-white; + border-radius: lib.$border-radius-md; + padding: 0 lib.$spacing-xs; // On small screens, there's not enough room for the "Copied!" // notification to the right of the copy button, so it's absolutely // positioned to overlap the copy button. @@ -228,25 +228,25 @@ $field-gap: $spacing-lg; transition: opacity 0s; } - @media screen and #{$mq-sm} { + @media screen and #{lib.$mq-sm} { position: static; transform: none; } } } -@media screen and #{$mq-md} { +@media screen and #{lib.$mq-md} { .settings-page { display: flex; flex-direction: row-reverse; } .settings-form { - padding: $spacing-lg; + padding: lib.$spacing-lg; } .menu { - width: $content-sm; + width: lib.$content-sm; ul { display: block; @@ -255,7 +255,7 @@ $field-gap: $spacing-lg; .field { flex-direction: row; - gap: $spacing-2xl; + gap: lib.$spacing-2xl; } .field-heading { @@ -266,16 +266,16 @@ $field-gap: $spacing-lg; text-align: end; } } -@media screen and #{$mq-lg} { +@media screen and #{lib.$mq-lg} { .field-heading { flex-basis: auto; // Custom percentage to accommodate tablet/laptop screens width: 33%; } } -@media screen and #{$mq-xl} { +@media screen and #{lib.$mq-xl} { .field-heading { flex-basis: auto; - width: $content-sm; + width: lib.$content-sm; } } diff --git a/frontend/src/pages/contains-tracker-warning.module.scss b/frontend/src/pages/contains-tracker-warning.module.scss index 636ff725e6..5e09a0b00f 100644 --- a/frontend/src/pages/contains-tracker-warning.module.scss +++ b/frontend/src/pages/contains-tracker-warning.module.scss @@ -1,22 +1,22 @@ -@import "../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "../styles/typography"; +@use "../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../styles/typography"; .contains-tracker-container { - margin: $layout-sm; + margin: lib.$layout-sm; .warning-banner-wrapper { display: flex; gap: 10px; - background-color: $color-white; - padding: $spacing-lg $spacing-md; - border-radius: $border-radius-sm; - box-shadow: $box-shadow-sm; + background-color: lib.$color-white; + padding: lib.$spacing-lg lib.$spacing-md; + border-radius: lib.$border-radius-sm; + box-shadow: lib.$box-shadow-sm; justify-content: space-between; align-items: flex-start; flex-direction: column; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { flex-direction: row; align-items: center; } @@ -25,15 +25,15 @@ a { font-size: 15px; font-weight: 600; - font-family: $font-stack-firefox; - color: $color-black; + font-family: lib.$font-stack-firefox; + color: lib.$color-black; border: none; - background-color: $color-grey-10; + background-color: tokens.$color-grey-10; white-space: nowrap; align-self: center; margin: 0 0 0 auto; - padding: $spacing-md; - border-radius: $border-radius-sm; + padding: lib.$spacing-md; + border-radius: lib.$border-radius-sm; } } @@ -43,7 +43,7 @@ } svg { - fill: $color-yellow-50; + fill: lib.$color-yellow-50; min-width: 28px; min-height: 28px; } @@ -51,48 +51,48 @@ h2 { font-size: 18px; font-weight: 600; - font-family: $font-stack-firefox; - color: $color-grey-50; + font-family: lib.$font-stack-firefox; + color: tokens.$color-grey-50; } p { font-size: 16px; font-weight: 400; - font-family: $font-stack-base; - color: $color-grey-40; + font-family: lib.$font-stack-base; + color: tokens.$color-grey-40; } } - @media screen and #{$mq-md} { - max-width: $content-xl; - margin: $layout-md auto; - padding: 0 $layout-sm; + @media screen and #{lib.$mq-md} { + max-width: lib.$content-xl; + margin: lib.$layout-md auto; + padding: 0 lib.$layout-sm; } .details-section { - gap: $layout-xs; + gap: lib.$layout-xs; display: flex; flex-direction: column; h1 { - font-family: $font-stack-firefox; - border-bottom: 1px solid $color-light-gray-30; - padding-bottom: $spacing-xs; + font-family: lib.$font-stack-firefox; + border-bottom: 1px solid lib.$color-light-gray-30; + padding-bottom: lib.$spacing-xs; } .warning-banner { - margin-top: $spacing-sm; + margin-top: lib.$spacing-sm; } } } .faq-wrapper { - background-color: $color-white; + background-color: lib.$color-white; .faq { - max-width: $content-xl; + max-width: lib.$content-xl; margin: 0 auto; - padding: 0 $layout-sm; + padding: 0 lib.$layout-sm; display: flex; flex-direction: column; @@ -101,25 +101,25 @@ flex-basis: 0; flex-grow: 0.35; - @media screen and #{$mq-md} { - padding: $spacing-2xl $spacing-2xl 0 0; + @media screen and #{lib.$mq-md} { + padding: lib.$spacing-2xl lib.$spacing-2xl 0 0; } .headline { - @include text-title-xs { - font-family: $font-stack-firefox; + @include typography.text-title-xs { + font-family: lib.$font-stack-firefox; font-weight: 700; - padding: $spacing-md 0; - color: $color-violet-90; + padding: lib.$spacing-md 0; + color: lib.$color-violet-90; } - @media screen and #{$mq-md} { - @include text-title-2xs; + @media screen and #{lib.$mq-md} { + @include typography.text-title-2xs; } } .read-more { - color: $color-blue-50; + color: lib.$color-blue-50; font-weight: 700; text-decoration: underline; @@ -131,12 +131,12 @@ .entries { flex: 1; - padding: $spacing-lg 0; + padding: lib.$spacing-lg 0; } - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { flex-direction: row; - gap: $spacing-md; + gap: lib.$spacing-md; } } } diff --git a/frontend/src/pages/faq.module.scss b/frontend/src/pages/faq.module.scss index b0fd1c80f6..d75805a341 100644 --- a/frontend/src/pages/faq.module.scss +++ b/frontend/src/pages/faq.module.scss @@ -1,12 +1,12 @@ -@import "../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "../styles/typography"; +@use "../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../styles/typography" as styles-typography; .faq-page { - background-color: $color-blue-90; - color: $color-white; + background-color: lib.$color-blue-90; + color: lib.$color-white; height: 100%; - padding: 0 $spacing-lg $spacing-2xl; + padding: 0 lib.$spacing-lg lib.$spacing-2xl; a { text-decoration: underline; @@ -17,30 +17,30 @@ } p { - padding: $spacing-sm 0; + padding: lib.$spacing-sm 0; } } .faqs-wrapper { - max-width: $content-xl; + max-width: lib.$content-xl; margin: 0 auto; - padding-top: $spacing-2xl; + padding-top: lib.$spacing-2xl; } .headline { - @include text-title-sm { - @include font-firefox; - padding-bottom: $spacing-xl; + @include styles-typography.text-title-sm { + @include lib.font-firefox; + padding-bottom: lib.$spacing-xl; } } .faqs { - column-width: $content-sm; - column-gap: $spacing-2xl; + column-width: lib.$content-sm; + column-gap: lib.$spacing-2xl; } .faq { - margin-bottom: $spacing-2xl; + margin-bottom: lib.$spacing-2xl; break-inside: avoid; &:target { @@ -50,21 +50,21 @@ } .question { - @include text-title-2xs { - @include font-firefox; - padding-bottom: $spacing-sm; + @include styles-typography.text-title-2xs { + @include lib.font-firefox; + padding-bottom: lib.$spacing-sm; } } .answer { - @include text-body-md; + @include lib.text-body-md; - color: $color-light-gray-10; + color: lib.$color-light-gray-10; margin-top: 0; li { list-style-type: initial; - margin-left: $spacing-md; + margin-left: lib.$spacing-md; } } } diff --git a/frontend/src/pages/flags.module.scss b/frontend/src/pages/flags.module.scss index 728a3e59ea..898553d967 100644 --- a/frontend/src/pages/flags.module.scss +++ b/frontend/src/pages/flags.module.scss @@ -1,12 +1,12 @@ -@import "../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; .wrapper { display: flex; flex-direction: column; align-items: center; - gap: $spacing-2xl; - padding: $spacing-2xl; + gap: lib.$spacing-2xl; + padding: lib.$spacing-2xl; height: 100%; .flag-list { @@ -17,14 +17,14 @@ tbody { display: flex; flex-direction: column; - gap: $spacing-sm; + gap: lib.$spacing-sm; } tr { display: flex; - gap: $spacing-xs; + gap: lib.$spacing-xs; &.is-active td:first-of-type { - color: $color-green-80; + color: lib.$color-green-80; } &.is-non-global { @@ -54,13 +54,13 @@ .flag-form { display: flex; flex-direction: column; - gap: $spacing-lg; - width: $content-sm; + gap: lib.$spacing-lg; + width: lib.$content-sm; p { - border: 1px solid $color-yellow-20; - background-color: $color-yellow-05; - padding: $spacing-md; + border: 1px solid lib.$color-yellow-20; + background-color: lib.$color-yellow-05; + padding: lib.$spacing-md; } output { @@ -70,16 +70,16 @@ .field { display: flex; flex-direction: column; - gap: $spacing-sm; + gap: lib.$spacing-sm; label { - @include text-body-md; + @include lib.text-body-md; } input { - @include text-body-md; + @include lib.text-body-md; font-family: monospace; - padding: $spacing-xs $spacing-sm; + padding: lib.$spacing-xs lib.$spacing-sm; } } } diff --git a/frontend/src/pages/index.module.scss b/frontend/src/pages/index.module.scss index e8c13a7dcc..e5b89e0640 100644 --- a/frontend/src/pages/index.module.scss +++ b/frontend/src/pages/index.module.scss @@ -1,17 +1,17 @@ -@import "../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "../styles/typography"; +@use "../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../styles/typography" as styles-typography; .hero { display: flex; flex-direction: column; - gap: $spacing-2xl; - width: $content-max; + gap: lib.$spacing-2xl; + width: lib.$content-max; max-width: 100%; margin: 0 auto; - padding: $spacing-2xl $spacing-lg; + padding: lib.$spacing-2xl lib.$spacing-lg; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { flex-direction: row; align-items: center; } @@ -25,76 +25,76 @@ display: flex; flex-direction: column; align-items: flex-start; - gap: $spacing-lg; + gap: lib.$spacing-lg; } h2 { - @include text-title-md { - font-family: $font-stack-firefox; + @include styles-typography.text-title-md { + font-family: lib.$font-stack-firefox; } } p { - max-width: calc($content-sm + $layout-xl); + max-width: calc(lib.$content-sm + lib.$layout-xl); } .cta { - margin: $spacing-xl 0; - min-width: $content-xs; + margin: lib.$spacing-xl 0; + min-width: lib.$content-xs; } .social-proof { - padding: $spacing-lg 0; + padding: lib.$spacing-lg 0; width: 100%; max-width: 55%; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { width: auto; } } .end-of-intro-pricing-hero { display: flex; - gap: $spacing-lg; + gap: lib.$spacing-lg; flex-wrap: wrap; & > div { - flex: 1 1 $content-xs; + flex: 1 1 lib.$content-xs; } } } .how-it-works-wrapper { - background-color: $color-white; + background-color: lib.$color-white; // Magic number: 64px allows us to have an even spacing between sections on pages - padding: calc($spacing-xl * 2) $spacing-md; + padding: calc(lib.$spacing-xl * 2) lib.$spacing-md; } .how-it-works { - width: $content-max; + width: lib.$content-max; max-width: 100%; margin: 0 auto; - padding: $spacing-lg; + padding: lib.$spacing-lg; h2 { - @include text-title-sm { - font-family: $font-stack-firefox; + @include styles-typography.text-title-sm { + font-family: lib.$font-stack-firefox; text-align: center; - margin-bottom: $layout-sm; + margin-bottom: lib.$layout-sm; } } h2, .lead { - padding: $spacing-sm 0; + padding: lib.$spacing-sm 0; } a { - color: $color-blue-50; + color: lib.$color-blue-50; text-decoration: underline; font-weight: 700; &:hover { - color: $color-blue-60; + color: lib.$color-blue-60; text-decoration: none; } } @@ -102,31 +102,31 @@ .steps { display: flex; flex-direction: column; - gap: $layout-lg; + gap: lib.$layout-lg; list-style-type: none; - padding: $spacing-2xl 0; + padding: lib.$spacing-2xl 0; text-align: start; margin: 0; - @media screen and #{$mq-md} { - gap: $layout-xl; - margin: $spacing-2xl $layout-2xl 0 $layout-2xl; + @media screen and #{lib.$mq-md} { + gap: lib.$layout-xl; + margin: lib.$spacing-2xl lib.$layout-2xl 0 lib.$layout-2xl; } - @media screen and #{$mq-lg} { + @media screen and #{lib.$mq-lg} { flex-direction: row; margin: 0; } h3 { - @include text-title-3xs; - font-family: $font-stack-base; + @include lib.text-title-3xs; + font-family: lib.$font-stack-base; font-weight: 600; - padding-top: $spacing-md; + padding-top: lib.$spacing-md; line-height: 1.5; } p { - padding: $spacing-md 0; + padding: lib.$spacing-md 0; } .step { @@ -141,47 +141,47 @@ } .use-cases-wrapper { - background-color: $color-white; + background-color: lib.$color-white; } .use-cases { - width: $content-max; + width: lib.$content-max; max-width: 100%; margin: 0 auto; - padding: $spacing-lg; + padding: lib.$spacing-lg; } // Creates a page break effect .page-break { background: linear-gradient( 180deg, - $color-light-gray-20 0%, - $color-light-gray-10 45% + lib.$color-light-gray-20 0%, + lib.$color-light-gray-10 45% ); - height: $layout-md; + height: lib.$layout-md; } .features { - padding: $layout-xs; - width: $content-xl; + padding: lib.$layout-xs; + width: lib.$content-xl; max-width: 100%; margin: 0 auto; - @media screen and #{$mq-md} { - padding: $layout-sm $layout-xs; + @media screen and #{lib.$mq-md} { + padding: lib.$layout-sm lib.$layout-xs; } } .plans { - width: $content-max; + width: lib.$content-max; max-width: 100%; margin: 0 auto; display: flex; - gap: $spacing-2xl; + gap: lib.$spacing-2xl; flex-direction: column-reverse; align-items: center; - padding: 0 $spacing-md $spacing-md $spacing-md; - margin-top: $layout-xl; + padding: 0 lib.$spacing-md lib.$spacing-md lib.$spacing-md; + margin-top: lib.$layout-xl; &.non-premium-country { display: flex; @@ -194,13 +194,13 @@ flex-direction: column; align-items: flex-start; text-align: center; - max-width: $content-md; - gap: $spacing-lg; - margin-top: $layout-xl; + max-width: lib.$content-md; + gap: lib.$spacing-lg; + margin-top: lib.$layout-xl; h2 { - @include text-title-sm { - font-family: $font-stack-firefox; + @include styles-typography.text-title-sm { + font-family: lib.$font-stack-firefox; font-weight: 500; } } @@ -208,56 +208,56 @@ .end-of-intro-pricing-countdown-and-warning { display: flex; flex-direction: column; - gap: $spacing-sm; + gap: lib.$spacing-sm; } } - @media screen and #{$mq-xl} { + @media screen and #{lib.$mq-xl} { flex-direction: row; - padding: 0 $spacing-2xl $spacing-2xl $spacing-2xl; + padding: 0 lib.$spacing-2xl lib.$spacing-2xl lib.$spacing-2xl; .plan-comparison { - padding: $spacing-2xl; + padding: lib.$spacing-2xl; } .callout { - padding: $spacing-2xl; + padding: lib.$spacing-2xl; text-align: start; } } } .faq-wrapper { - background-color: $color-white; + background-color: lib.$color-white; // Magic number: 64px allows us to have an even spacing between sections on pages - padding: calc($spacing-xl * 2) $spacing-md; + padding: calc(lib.$spacing-xl * 2) lib.$spacing-md; } .faq { - width: $content-max; + width: lib.$content-max; max-width: 100%; margin: 0 auto; - padding: $spacing-lg; + padding: lib.$spacing-lg; display: flex; flex-direction: column; .lead { flex: 1 0 0; - @media screen and #{$mq-md} { - padding: 0 $spacing-2xl; + @media screen and #{lib.$mq-md} { + padding: 0 lib.$spacing-2xl; } .headline { - @include text-title-sm { - font-family: $font-stack-firefox; + @include styles-typography.text-title-sm { + font-family: lib.$font-stack-firefox; font-weight: 500; - padding: $spacing-md 0; + padding: lib.$spacing-md 0; } } .read-more { - color: $color-blue-50; + color: lib.$color-blue-50; font-weight: 700; text-decoration: underline; @@ -269,16 +269,16 @@ .entries { flex: 1 0 0; - padding-top: $spacing-lg; + padding-top: lib.$spacing-lg; - @media screen and #{$mq-md} { - padding: 0 $spacing-2xl; + @media screen and #{lib.$mq-md} { + padding: 0 lib.$spacing-2xl; } } - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { flex-direction: row; - gap: $spacing-md; + gap: lib.$spacing-md; } } @@ -286,22 +286,22 @@ width: 100%; margin: 0 auto; // Magic number: 64px allows us to have an even spacing between sections on pages - padding: calc($spacing-xl * 2) $spacing-md; + padding: calc(lib.$spacing-xl * 2) lib.$spacing-md; - @media screen and #{$mq-md} { - width: $content-max; + @media screen and #{lib.$mq-md} { + width: lib.$content-max; margin-top: 0; max-width: 100%; } } .gray-bg { - background-color: $color-light-gray-10; + background-color: lib.$color-light-gray-10; } .reviews-container { // Magic number: 64px allows us to have an even spacing between sections on pages - padding: calc($spacing-xl * 2) $spacing-md; + padding: calc(lib.$spacing-xl * 2) lib.$spacing-md; } .testimonials-wrapper { @@ -309,13 +309,13 @@ align-items: center; justify-content: center; flex-direction: row; - gap: $spacing-md; - border: 0 solid $color-light-gray-20; + gap: lib.$spacing-md; + border: 0 solid lib.$color-light-gray-20; border-top-width: 1px; border-bottom-width: 1px; p { - @include text-body-lg; - font-family: $font-stack-base; + @include lib.text-body-lg; + font-family: lib.$font-stack-base; } } diff --git a/frontend/src/pages/mock/mockSession.module.scss b/frontend/src/pages/mock/mockSession.module.scss index 80bbc80214..f9e41f2491 100644 --- a/frontend/src/pages/mock/mockSession.module.scss +++ b/frontend/src/pages/mock/mockSession.module.scss @@ -1,56 +1,56 @@ -@import "../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; .mock-session { - padding: $spacing-lg; + padding: lib.$spacing-lg; a { - color: $color-blue-50; + color: lib.$color-blue-50; } .lead { - max-width: $content-md; - padding: $spacing-md 0; + max-width: lib.$content-md; + padding: lib.$spacing-md 0; } form { display: flex; flex-direction: column; - gap: $spacing-sm; + gap: lib.$spacing-sm; align-items: flex-start; - padding: $spacing-lg; - width: $content-sm; + padding: lib.$spacing-lg; + width: lib.$content-sm; } input, button { - padding: $spacing-md; + padding: lib.$spacing-md; } button { - border-radius: $border-radius-sm; - border: 1px solid $color-blue-50; - background-color: $color-white; - color: $color-blue-50; + border-radius: lib.$border-radius-sm; + border: 1px solid lib.$color-blue-50; + background-color: lib.$color-white; + color: lib.$color-blue-50; font-weight: 700; cursor: pointer; &:hover { - background-color: $color-blue-50; - color: $color-white; + background-color: lib.$color-blue-50; + color: lib.$color-white; } } h1 { - padding: $spacing-sm 0; + padding: lib.$spacing-sm 0; - @include text-title-3xs; + @include lib.text-title-3xs; } ul { display: flex; flex-direction: column; - gap: $spacing-md; + gap: lib.$spacing-md; list-style-type: none; } } diff --git a/frontend/src/pages/premium.module.scss b/frontend/src/pages/premium.module.scss index da28f7a7f8..1ccb7b8cba 100644 --- a/frontend/src/pages/premium.module.scss +++ b/frontend/src/pages/premium.module.scss @@ -1,22 +1,22 @@ -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "../styles/tokens"; -@import "../styles/typography"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../styles/tokens"; +@use "../styles/typography" as styles-typography; .hero { display: flex; flex-direction: column; - gap: $spacing-2xl; - width: $content-max; + gap: lib.$spacing-2xl; + width: lib.$content-max; max-width: 100%; margin: 0 auto; - padding: $spacing-lg; + padding: lib.$spacing-lg; .hero-image { flex-basis: 0; flex-grow: 1; } - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { flex-direction: row; align-items: center; } @@ -30,76 +30,76 @@ display: flex; flex-direction: column; align-items: flex-start; - gap: $spacing-lg; + gap: lib.$spacing-lg; } h2 { - @include text-title-md { - font-family: $font-stack-firefox; + @include styles-typography.text-title-md { + font-family: lib.$font-stack-firefox; } } .social-proof { - border: 0 solid $color-light-gray-20; + border: 0 solid lib.$color-light-gray-20; border-top-width: 1px; border-bottom-width: 1px; - padding: $spacing-lg 0; + padding: lib.$spacing-lg 0; width: 100%; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { width: auto; } } .end-of-intro-pricing-hero { display: flex; - gap: $spacing-lg; + gap: lib.$spacing-lg; flex-wrap: wrap; & > div { - flex: 1 1 $content-xs; + flex: 1 1 lib.$content-xs; } } } .perks-wrapper { - padding: $layout-xs; - width: $content-xl; + padding: lib.$layout-xs; + width: lib.$content-xl; max-width: 100%; margin: 0 auto; - @media screen and #{$mq-md} { - padding: $layout-sm $layout-xs; + @media screen and #{lib.$mq-md} { + padding: lib.$layout-sm lib.$layout-xs; } } .perks { - width: $content-xl; + width: lib.$content-xl; max-width: 100%; margin: 0 auto; - padding: $spacing-2xl $spacing-xl; + padding: lib.$spacing-2xl lib.$spacing-xl; h2 { - @include text-title-sm { - font-family: $font-stack-firefox; + @include styles-typography.text-title-sm { + font-family: lib.$font-stack-firefox; text-align: center; - padding: $spacing-md 0; + padding: lib.$spacing-md 0; } } .lead { - @include text-body-md; + @include lib.text-body-md; display: block; width: 75%; margin: 0 auto; - padding: $spacing-md 0; + padding: lib.$spacing-md 0; } .perk { - padding: $spacing-lg 0; + padding: lib.$spacing-lg 0; display: flex; flex-direction: column; - gap: $spacing-2xl; + gap: lib.$spacing-2xl; align-items: center; img { @@ -108,27 +108,27 @@ } .pill { - background-color: $color-violet-30; - color: $color-white; - border-radius: $border-radius-sm; - padding: $spacing-xs $spacing-sm; - font-family: $font-stack-firefox; + background-color: tokens.$color-violet-30; + color: tokens.$color-white; + border-radius: lib.$border-radius-sm; + padding: lib.$spacing-xs lib.$spacing-sm; + font-family: lib.$font-stack-firefox; font-weight: 600; text-transform: uppercase; } h3 { - @include text-title-xs { - font-family: $font-stack-firefox; - padding: $spacing-sm 0; + @include styles-typography.text-title-xs { + font-family: lib.$font-stack-firefox; + padding: lib.$spacing-sm 0; } } p { - padding: $spacing-sm 0; + padding: lib.$spacing-sm 0; } - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { flex-direction: row; &:nth-child(even) { @@ -143,20 +143,20 @@ } .use-cases-wrapper { - background-color: $color-white; + background-color: tokens.$color-white; } .use-cases { - width: $content-max; + width: lib.$content-max; max-width: 100%; margin: 0 auto; - padding: $spacing-xl; + padding: lib.$spacing-xl; .headline { - @include text-title-sm { - font-family: $font-stack-firefox; + @include styles-typography.text-title-sm { + font-family: lib.$font-stack-firefox; text-align: center; - padding: $spacing-lg; + padding: lib.$spacing-lg; } } } @@ -164,18 +164,18 @@ .plans-wrapper { background: linear-gradient( 180deg, - $color-light-gray-20 0%, - $color-light-gray-10 3% + lib.$color-light-gray-20 0%, + lib.$color-light-gray-10 3% ); } .plans { - width: $content-max; + width: lib.$content-max; max-width: 100%; margin: 0 auto; - padding: $spacing-2xl; + padding: lib.$spacing-2xl; display: flex; - gap: $spacing-2xl; + gap: lib.$spacing-2xl; flex-direction: column-reverse; align-items: center; @@ -190,11 +190,11 @@ flex-direction: column; align-items: flex-start; text-align: center; - gap: $spacing-lg; + gap: lib.$spacing-lg; h2 { - @include text-title-md { - font-family: $font-stack-firefox; + @include styles-typography.text-title-md { + font-family: lib.$font-stack-firefox; font-weight: 500; } } @@ -202,19 +202,19 @@ .end-of-intro-pricing-countdown-and-warning { display: flex; flex-direction: column; - gap: $spacing-sm; + gap: lib.$spacing-sm; } } - @media screen and #{$mq-xl} { + @media screen and #{lib.$mq-xl} { flex-direction: row; .plan-comparison { - padding: $spacing-2xl; + padding: lib.$spacing-2xl; } .callout { - padding: $spacing-2xl; + padding: lib.$spacing-2xl; text-align: start; } } @@ -223,11 +223,11 @@ .bundle-banner-section { width: 100%; margin: 0 auto; - padding: calc($spacing-2xl * 2) $spacing-md; - margin-top: $layout-lg; + padding: calc(lib.$spacing-2xl * 2) lib.$spacing-md; + margin-top: lib.$layout-lg; - @media screen and #{$mq-md} { - width: $content-max; + @media screen and #{lib.$mq-md} { + width: lib.$content-max; margin-top: 0; max-width: 100%; } diff --git a/frontend/src/pages/tracker-report.module.scss b/frontend/src/pages/tracker-report.module.scss index 788c9fad1c..ae1eaa9f34 100644 --- a/frontend/src/pages/tracker-report.module.scss +++ b/frontend/src/pages/tracker-report.module.scss @@ -1,6 +1,6 @@ -@import "../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "../styles/typography"; +@use "../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../styles/typography"; .wrapper { height: 100%; @@ -28,39 +28,39 @@ } .loading { - padding: $spacing-xl; + padding: lib.$spacing-xl; height: 100%; - background-color: $color-grey-05; + background-color: tokens.$color-grey-05; animation-name: fadein; animation-duration: 400ms; } .load-error { - padding: $spacing-xl; + padding: lib.$spacing-xl; height: 100%; - background-color: $color-grey-05; + background-color: tokens.$color-grey-05; } .report-wrapper { - background-color: $color-grey-05; + background-color: tokens.$color-grey-05; flex: 1 0 auto; display: flex; justify-content: center; .report { width: 100%; - max-width: $content-xl; - padding: $spacing-xl; + max-width: lib.$content-xl; + padding: lib.$spacing-xl; display: flex; flex-direction: column; - gap: $spacing-md; + gap: lib.$spacing-md; } .logo { display: flex; align-items: center; justify-content: center; - gap: $spacing-xs; + gap: lib.$spacing-xs; .logomark { max-height: 35px; @@ -71,32 +71,32 @@ } h1 { - @include text-title-2xs { - font-family: $font-stack-firefox; - padding: $spacing-md 0; - border-bottom: 1px solid $color-grey-20; + @include typography.text-title-2xs { + font-family: lib.$font-stack-firefox; + padding: lib.$spacing-md 0; + border-bottom: 1px solid tokens.$color-grey-20; } } .meta { display: flex; flex-direction: column; - gap: $spacing-md; - padding: $spacing-lg; + gap: lib.$spacing-md; + padding: lib.$spacing-lg; - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { flex-direction: row; - gap: $spacing-2xl; - padding: $spacing-lg $spacing-2xl; + gap: lib.$spacing-2xl; + padding: lib.$spacing-lg lib.$spacing-2xl; } dt { - color: $color-grey-40; + color: tokens.$color-grey-40; } dd { font-weight: 600; - color: $color-grey-50; + color: tokens.$color-grey-50; } .from { @@ -105,32 +105,32 @@ dd { text-overflow: ellipsis; overflow: hidden; - max-width: $content-sm; + max-width: lib.$content-sm; } } } .trackers { - background-color: $color-white; - border-radius: $border-radius-md; + background-color: lib.$color-white; + border-radius: lib.$border-radius-md; display: flex; flex-direction: column; - box-shadow: $box-shadow-sm; + box-shadow: lib.$box-shadow-sm; // We typically avoid margins because they affect the positioning of other elements, // but since box-shadow is visible below the element, the bottom margin lets // us pretend like it's part of the element: - margin-bottom: $spacing-md; - padding: $spacing-lg; - gap: $spacing-md; + margin-bottom: lib.$spacing-md; + padding: lib.$spacing-lg; + gap: lib.$spacing-md; - @media screen and #{$mq-md} { - padding: $spacing-lg $spacing-2xl; - gap: $spacing-xl; + @media screen and #{lib.$mq-md} { + padding: lib.$spacing-lg lib.$spacing-2xl; + gap: lib.$spacing-xl; } h2 { - @include text-title-xs { - font-family: $font-stack-firefox; + @include typography.text-title-xs { + font-family: lib.$font-stack-firefox; font-weight: 500; } } @@ -154,15 +154,15 @@ "null count"; grid-template-columns: auto 1fr auto; align-items: center; - column-gap: $spacing-md; - row-gap: $spacing-xs; - padding: $spacing-md 0; - color: $color-grey-50; - border-top: 1px solid $color-grey-10; + column-gap: lib.$spacing-md; + row-gap: lib.$spacing-xs; + padding: lib.$spacing-md 0; + color: tokens.$color-grey-50; + border-top: 1px solid tokens.$color-grey-10; .icon { grid-area: icon; - color: $color-grey-20; + color: tokens.$color-grey-20; } .tracker-domain { @@ -179,7 +179,7 @@ width: 100%; } - @media screen and #{$mq-sm} { + @media screen and #{lib.$mq-sm} { grid-template-areas: "icon tracker-domain count"; .count { @@ -193,17 +193,17 @@ .confidentiality-notice { display: flex; align-items: center; - gap: $spacing-md; - background-color: $color-grey-10; - padding: $spacing-lg; - border-radius: $border-radius-md; + gap: lib.$spacing-md; + background-color: tokens.$color-grey-10; + padding: lib.$spacing-lg; + border-radius: lib.$border-radius-md; - @media screen and #{$mq-md} { - padding: $spacing-lg $spacing-2xl; + @media screen and #{lib.$mq-md} { + padding: lib.$spacing-lg lib.$spacing-2xl; } svg { - color: $color-purple-70; + color: lib.$color-purple-70; flex: 1 0 auto; } } @@ -211,15 +211,15 @@ .explainer { display: flex; flex-direction: column; - gap: $spacing-md; - padding: $spacing-lg; + gap: lib.$spacing-md; + padding: lib.$spacing-lg; - @media screen and #{$mq-md} { - padding: $spacing-lg $spacing-2xl; + @media screen and #{lib.$mq-md} { + padding: lib.$spacing-lg lib.$spacing-2xl; } hr { - background-color: $color-grey-10; + background-color: tokens.$color-grey-10; height: 2px; border-style: none; } @@ -227,13 +227,13 @@ .breakage-warning { display: flex; align-items: center; - gap: $spacing-md; - border-radius: $border-radius-sm; - border: 2px solid $color-yellow-50; - padding: $spacing-lg; + gap: lib.$spacing-md; + border-radius: lib.$border-radius-sm; + border: 2px solid lib.$color-yellow-50; + padding: lib.$spacing-lg; svg { - color: $color-yellow-50; + color: lib.$color-yellow-50; flex: 1 0 auto; } } @@ -241,34 +241,34 @@ } .faq-wrapper { - background-color: $color-white; + background-color: lib.$color-white; } .faq { - width: $content-max; + width: lib.$content-max; max-width: 100%; margin: 0 auto; - padding: $spacing-lg; + padding: lib.$spacing-lg; display: flex; flex-direction: column; .lead { flex: 1 0 0; - @media screen and #{$mq-md} { - padding: 0 $spacing-2xl; + @media screen and #{lib.$mq-md} { + padding: 0 lib.$spacing-2xl; } .headline { - @include text-title-sm { - font-family: $font-stack-firefox; + @include typography.text-title-sm { + font-family: lib.$font-stack-firefox; font-weight: 500; - padding: $spacing-md 0; + padding: lib.$spacing-md 0; } } .read-more { - color: $color-blue-50; + color: lib.$color-blue-50; font-weight: 500; text-decoration: underline; @@ -280,15 +280,15 @@ .entries { flex: 1 0 0; - padding-top: $spacing-lg; + padding-top: lib.$spacing-lg; - @media screen and #{$mq-md} { - padding: 0 $spacing-2xl; + @media screen and #{lib.$mq-md} { + padding: 0 lib.$spacing-2xl; } } - @media screen and #{$mq-md} { + @media screen and #{lib.$mq-md} { flex-direction: row; - gap: $spacing-md; + gap: lib.$spacing-md; } } diff --git a/frontend/src/pages/vpn-relay-welcome.module.scss b/frontend/src/pages/vpn-relay-welcome.module.scss index 3ef25159c7..b067b2c211 100644 --- a/frontend/src/pages/vpn-relay-welcome.module.scss +++ b/frontend/src/pages/vpn-relay-welcome.module.scss @@ -1,19 +1,25 @@ -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "../styles/tokens"; -@import "../../src/components/Button.module"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../styles/tokens"; + +// TODO MPP-3946: Remove this legacy versioning comment +// When this used @import, this versioning comment was duplicated because +// tokens was imported twice. With @use, it only appears once. It is +// manually added to keep the output CSS file hash from changing. +/*! v=1 */ +@use "../../src/components/Button.module"; .content-container { display: flex; flex-direction: column; - max-width: $content-lg; + max-width: lib.$content-lg; margin: 0 auto; } .content-head { display: flex; - max-width: $content-lg; - gap: $spacing-md; - padding: $layout-xl $spacing-md; + max-width: lib.$content-lg; + gap: lib.$spacing-md; + padding: lib.$layout-xl lib.$spacing-md; flex-direction: column; align-content: center; align-items: center; @@ -22,24 +28,24 @@ } .headline { - font-family: $font-stack-base; - color: $color-grey-40; + font-family: lib.$font-stack-base; + color: tokens.$color-grey-40; font-weight: 400; - @include text-title-3xs; + @include lib.text-title-3xs; } .subheadline { - font-family: $font-stack-firefox; - color: $color-grey-60; + font-family: lib.$font-stack-firefox; + color: tokens.$color-grey-60; font-weight: 700; - @include text-title-md; + @include lib.text-title-md; } .logo { display: flex; - gap: $spacing-md; + gap: lib.$spacing-md; justify-content: center; } @@ -48,21 +54,21 @@ flex-direction: column; justify-content: space-around; align-items: center; - gap: $spacing-xl; - margin-bottom: $spacing-2xl; + gap: lib.$spacing-xl; + margin-bottom: lib.$spacing-2xl; - @media #{$mq-lg} { + @media #{lib.$mq-lg} { flex-direction: row; - background-color: $color-white; - padding: 0 $spacing-2xl; - border-radius: $border-radius-md; - box-shadow: $box-shadow-sm; + background-color: tokens.$color-white; + padding: 0 lib.$spacing-2xl; + border-radius: lib.$border-radius-md; + box-shadow: lib.$box-shadow-sm; } .panel-art { display: none; - @media #{$mq-lg} { + @media #{lib.$mq-lg} { display: block; } } @@ -72,29 +78,29 @@ display: flex; flex-direction: column; align-items: stretch; - gap: $spacing-xl; - max-width: $content-xs; - background-color: $color-white; - padding: $spacing-2xl; - border-radius: $border-radius-md; - box-shadow: $box-shadow-sm; - - @media #{$mq-lg} { + gap: lib.$spacing-xl; + max-width: lib.$content-xs; + background-color: lib.$color-white; + padding: lib.$spacing-2xl; + border-radius: lib.$border-radius-md; + box-shadow: lib.$box-shadow-sm; + + @media #{lib.$mq-lg} { padding: 0; border-radius: 0; box-shadow: none; } p { - max-width: $content-xs; - font-family: $font-stack-base; + max-width: lib.$content-xs; + font-family: lib.$font-stack-base; - @include text-body-md; + @include lib.text-body-md; } a { white-space: pre; font-weight: 500; - font-family: $font-stack-firefox; + font-family: lib.$font-stack-firefox; } } diff --git a/frontend/src/styles/globals.scss b/frontend/src/styles/globals.scss index f3bbd4cf0d..a03190ddfb 100644 --- a/frontend/src/styles/globals.scss +++ b/frontend/src/styles/globals.scss @@ -1,8 +1,8 @@ -@import "./fonts/inter-ui"; -@import "./fonts/metropolis"; -@import "./fonts/zilla-slab"; -@import "~@mozilla-protocol/core/protocol/css/includes/tokens/dist/index"; -@import "~@mozilla-protocol/core/protocol/css/base/elements/reset"; +@use "fonts/inter-ui"; +@use "fonts/metropolis"; +@use "fonts/zilla-slab"; +@use "~@mozilla-protocol/core/protocol/css/includes/tokens/dist/index" as dist; +@use "~@mozilla-protocol/core/protocol/css/base/elements/reset"; /* next.js will rename the file if any of the content changes (after processing @@ -37,7 +37,7 @@ html, body, #__next, #overlayProvider { - font-family: $font-stack-base; + font-family: dist.$font-stack-base; height: 100%; } @@ -48,7 +48,7 @@ body, html { scroll-behavior: smooth; - scroll-padding-top: $layout-xl; + scroll-padding-top: dist.$layout-xl; @media (prefers-reduced-motion) { & { diff --git a/frontend/src/styles/tokens.scss b/frontend/src/styles/tokens.scss index 9e6a419c9b..cf64d7e806 100644 --- a/frontend/src/styles/tokens.scss +++ b/frontend/src/styles/tokens.scss @@ -1,4 +1,4 @@ -@import "~@mozilla-protocol/core/protocol/css/includes/tokens/dist/index"; +@use "~@mozilla-protocol/core/protocol/css/includes/tokens/dist/" as index; /* next.js will rename the file if any of the content changes (after processing diff --git a/frontend/src/styles/typography.scss b/frontend/src/styles/typography.scss index c70346f163..1b705f3f36 100644 --- a/frontend/src/styles/typography.scss +++ b/frontend/src/styles/typography.scss @@ -1,7 +1,9 @@ +@use "~@mozilla-protocol/core/protocol/css/includes/lib"; + /* Re-declare mozilla-protocol typography: * text-title-* mixins to take a content block - * replace type-scale to return a numberremove + * replace lib.type-scale to return a numberremove TODO MPP-3946: Replace with mozilla-protocol v18.0.x overrides @@ -11,12 +13,12 @@ https://github.com/mozilla/protocol/blob/v17.0.1/assets/sass/protocol/includes/m A typical mixin text-title-xs looks like: @mixin text-title-xs { - @include font-size(type-scale('title-2xs-size')); - line-height: type-scale('title-2xs-line-height'); + @include lib.font-size(lib.type-scale('title-2xs-size')); + line-height: lib.type-scale('title-2xs-line-height'); - @media #{$mq-md} { - @include font-size(type-scale('title-xs-size')); - line-height: type-scale('title-xs-line-height'); + @media #{lib.$mq-md} { + @include lib.font-size(lib.type-scale('title-xs-size')); + line-height: lib.type-scale('title-xs-line-height'); } } @@ -36,8 +38,8 @@ components/dashboard/EmailForwardingModal.module.scss: This compiles to the CSS: .EmailForwardingModal_headline__VgCSC { - font-size: 24px; - font-size: 1.5rem; + lib.font-size: 24px; + lib.font-size: 1.5rem; line-height: 1.08; display: flex; align-items: center; @@ -49,8 +51,8 @@ This compiles to the CSS: @media(min-width:768px) { .EmailForwardingModal_headline__VgCSC { - font-size: 28px; - font-size: 1.75rem; + lib.font-size: 28px; + lib.font-size: 1.75rem; line-height: 1.07 } } @@ -93,20 +95,20 @@ Both result in this slightly different CSS: padding: 8px 0; gap: 8px; font-weight: 100 - font-size: 24px; - font-size: 1.5rem; + lib.font-size: 24px; + lib.font-size: 1.5rem; line-height: 1.08; } @media(min-width:768px) { .EmailForwardingModal_headline__VgCSC { - font-size: 28px; - font-size: 1.75rem; + lib.font-size: 28px; + lib.font-size: 1.75rem; line-height: 1.07 } } -The change is that the font-size and line-height elements have moved +The change is that the lib.font-size and line-height elements have moved from the top to the bottom of the ruleset. This can change the style due to browser difference and later properties overriding previous properties. See this Stack Overflow question for some of the subtleties: @@ -118,13 +120,13 @@ accept a content;. Documentation at: https://sass-lang.com/documentation/at-rules/mixin/#content-blocks @mixin text-title-xs { - @include font-size(type-scale('title-2xs-size')); - line-height: type-scale('title-2xs-line-height'); + @include lib.font-size(lib.type-scale('title-2xs-size')); + line-height: lib.type-scale('title-2xs-line-height'); @content; - @media #{$mq-md} { - @include font-size(type-scale('title-xs-size')); - line-height: type-scale('title-xs-line-height'); + @media #{lib.$mq-md} { + @include lib.font-size(lib.type-scale('title-xs-size')); + line-height: lib.type-scale('title-xs-line-height'); } } @@ -169,13 +171,13 @@ that they are using to override the base text-* mixin. $font-stack-mozilla; @mixin text-title-2xl { - @include font-size(type-scale("title-xl-size")); - line-height: type-scale("title-xl-line-height"); + @include lib.font-size(lib.type-scale("title-xl-size")); + line-height: lib.type-scale("title-xl-line-height"); @content; - @media #{$mq-md} { - @include font-size(type-scale("title-2xl-size")); - line-height: type-scale("title-2xl-line-height"); + @media #{lib.$mq-md} { + @include lib.font-size(lib.type-scale("title-2xl-size")); + line-height: lib.type-scale("title-2xl-line-height"); } } @@ -183,46 +185,46 @@ that they are using to override the base text-* mixin. // @mixin text-title-lg is not used by Relay @mixin text-title-md { - @include font-size(type-scale("title-sm-size")); - line-height: type-scale("title-sm-line-height"); + @include lib.font-size(lib.type-scale("title-sm-size")); + line-height: lib.type-scale("title-sm-line-height"); @content; - @media #{$mq-md} { - @include font-size(type-scale("title-md-size")); - line-height: type-scale("title-md-line-height"); + @media #{lib.$mq-md} { + @include lib.font-size(lib.type-scale("title-md-size")); + line-height: lib.type-scale("title-md-line-height"); } } @mixin text-title-sm { - @include font-size(type-scale("title-xs-size")); - line-height: type-scale("title-xs-line-height"); + @include lib.font-size(lib.type-scale("title-xs-size")); + line-height: lib.type-scale("title-xs-line-height"); @content; - @media #{$mq-md} { - @include font-size(type-scale("title-sm-size")); - line-height: type-scale("title-sm-line-height"); + @media #{lib.$mq-md} { + @include lib.font-size(lib.type-scale("title-sm-size")); + line-height: lib.type-scale("title-sm-line-height"); } } @mixin text-title-xs { - @include font-size(type-scale("title-2xs-size")); - line-height: type-scale("title-2xs-line-height"); + @include lib.font-size(lib.type-scale("title-2xs-size")); + line-height: lib.type-scale("title-2xs-line-height"); @content; - @media #{$mq-md} { - @include font-size(type-scale("title-xs-size")); - line-height: type-scale("title-xs-line-height"); + @media #{lib.$mq-md} { + @include lib.font-size(lib.type-scale("title-xs-size")); + line-height: lib.type-scale("title-xs-line-height"); } } @mixin text-title-2xs { - @include font-size(type-scale("title-3xs-size")); - line-height: type-scale("title-3xs-line-height"); + @include lib.font-size(lib.type-scale("title-3xs-size")); + line-height: lib.type-scale("title-3xs-line-height"); @content; - @media #{$mq-md} { - @include font-size(type-scale("title-2xs-size")); - line-height: type-scale("title-2xs-line-height"); + @media #{lib.$mq-md} { + @include lib.font-size(lib.type-scale("title-2xs-size")); + line-height: lib.type-scale("title-2xs-line-height"); } } From 0838adc5fa42235968b35d6dca278a5cd724d63d Mon Sep 17 00:00:00 2001 From: John Whitlock Date: Tue, 5 Nov 2024 14:07:36 -0600 Subject: [PATCH 03/13] Use namespaces mp and mp_forms Use the namespace 'mp' for main mozilla/protocol lib, and namespace 'mp_forms' for forms library. Converted with: find . -type f -name '*.scss' | xargs npx sass-migrator namespace -r \ "url ~@mozilla-protocol/core/protocol/css/includes/lib to mp; url ~@mozilla-protocol/core/protocol/css/includes/forms/lib to mp_forms" --- frontend/src/components/Banner.module.scss | 90 ++++---- frontend/src/components/Button.module.scss | 38 ++-- frontend/src/components/InfoModal.module.scss | 38 ++-- .../src/components/InfoTooltip.module.scss | 20 +- .../dashboard/CornerNotification.module.scss | 50 ++-- .../EmailForwardingModal.module.scss | 54 ++--- .../dashboard/FreeOnboarding.module.scss | 202 ++++++++--------- .../dashboard/Onboarding.module.scss | 28 +-- .../dashboard/PremiumOnboarding.module.scss | 134 +++++------ .../dashboard/SubdomainPicker.module.scss | 78 +++---- .../aliases/AddressPickerModal.module.scss | 112 ++++----- .../dashboard/aliases/Alias.module.scss | 162 ++++++------- .../aliases/AliasDeletionButton.module.scss | 76 +++---- .../AliasDeletionButtonPermanent.module.scss | 80 +++---- .../dashboard/aliases/AliasList.module.scss | 54 ++--- .../aliases/BlockLevelSlider.module.scss | 134 +++++------ .../CustomAddressGenerationModal.module.scss | 137 ++++++----- .../dashboard/aliases/MaskCard.module.scss | 158 ++++++------- .../subdomain/ConfirmationForm.module.scss | 32 +-- .../subdomain/ConfirmationModal.module.scss | 58 ++--- .../SubdomainInfoTooltip.module.scss | 44 ++-- .../dashboard/tips/CustomAliasTip.module.scss | 20 +- .../dashboard/tips/GenericTip.module.scss | 16 +- .../dashboard/tips/Tips.module.scss | 82 +++---- .../landing/BundleBanner.module.scss | 132 +++++------ .../landing/FaqAccordion.module.scss | 24 +- .../landing/HighlightedFeatures.module.scss | 40 ++-- .../components/landing/PlanMatrix.module.scss | 144 ++++++------ .../components/landing/Reviews.module.scss | 120 +++++----- .../src/components/layout/Layout.module.scss | 142 ++++++------ .../layout/navigation/AppPicker.module.scss | 62 ++--- .../navigation/DashboardSwitcher.module.scss | 10 +- .../navigation/MobileNavigation.module.scss | 44 ++-- .../navigation/UpgradeButton.module.scss | 20 +- .../layout/navigation/UserMenu.module.scss | 44 ++-- .../whatsnew/WhatsNewContent.module.scss | 14 +- .../whatsnew/WhatsNewDashboard.module.scss | 56 ++--- .../whatsnew/WhatsNewList.module.scss | 34 +-- .../whatsnew/WhatsNewMenu.module.scss | 46 ++-- .../layout/topmessage/CsatSurvey.module.scss | 34 +-- .../topmessage/HolidayPromoBanner.module.scss | 52 ++--- .../layout/topmessage/NpsSurvey.module.scss | 34 +-- .../dashboard/PhoneDashboard.module.scss | 213 +++++++++--------- .../dashboard/PhoneWelcomeView.module.scss | 88 ++++---- .../onboarding/PurchasePhonesPlan.module.scss | 60 ++--- .../onboarding/RealPhoneSetup.module.scss | 122 +++++----- .../RelayNumberConfirmationModal.module.scss | 30 +-- .../onboarding/RelayNumberPicker.module.scss | 118 +++++----- .../waitlist/WaitlistPage.module.scss | 40 ++-- .../accounts/account_inactive.module.scss | 6 +- .../src/pages/accounts/profile.module.scss | 174 +++++++------- .../src/pages/accounts/settings.module.scss | 92 ++++---- .../contains-tracker-warning.module.scss | 72 +++--- frontend/src/pages/faq.module.scss | 34 +-- frontend/src/pages/flags.module.scss | 30 +-- frontend/src/pages/index.module.scss | 158 ++++++------- .../src/pages/mock/mockSession.module.scss | 36 +-- frontend/src/pages/premium.module.scss | 100 ++++---- frontend/src/pages/tracker-report.module.scss | 114 +++++----- .../src/pages/vpn-relay-welcome.module.scss | 58 ++--- frontend/src/styles/typography.scss | 56 ++--- 61 files changed, 2274 insertions(+), 2276 deletions(-) diff --git a/frontend/src/components/Banner.module.scss b/frontend/src/components/Banner.module.scss index cd6b2d7ac7..f9f60cc8d7 100644 --- a/frontend/src/components/Banner.module.scss +++ b/frontend/src/components/Banner.module.scss @@ -1,13 +1,13 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as lib2; -@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; @use "../styles/tokens"; .banner { - border-radius: lib2.$border-radius-md; - padding: lib2.$spacing-md; + border-radius: mp.$border-radius-md; + padding: mp.$spacing-md; background-color: tokens.$color-white; position: relative; - box-shadow: lib2.$box-shadow-sm; + box-shadow: mp.$box-shadow-sm; &.promo { // This is the gradient border width (which is implemented as a background image): @@ -17,21 +17,21 @@ } &.warning { - padding: lib2.$spacing-sm; + padding: mp.$spacing-sm; } &.info { - @include lib2.text-body-sm; + @include mp.text-body-sm; - @media screen and #{lib2.$mq-sm} { - padding: 0 lib2.$spacing-sm; + @media screen and #{mp.$mq-sm} { + padding: 0 mp.$spacing-sm; } } .dismiss-button { position: absolute; - top: lib2.$spacing-sm; - right: lib2.$spacing-sm; + top: mp.$spacing-sm; + right: mp.$spacing-sm; display: flex; align-items: center; justify-content: center; @@ -39,7 +39,7 @@ height: 30px; background-color: transparent; border-style: none; - border-radius: lib2.$border-radius-sm; + border-radius: mp.$border-radius-sm; cursor: pointer; padding: 0; @@ -58,21 +58,21 @@ .banner.promo & { // .banner's border-radius - .banner's padding. // This is what makes .banner.promo appear as a 2px-wide border: - border-radius: calc(lib2.$border-radius-md - 2px); + border-radius: calc(mp.$border-radius-md - 2px); } .title-and-large-cta-wrapper { display: flex; flex-wrap: wrap; - flex: 1 1 lib2.$content-xs; - padding: lib2.$spacing-xs lib2.$spacing-md lib2.$spacing-md lib2.$spacing-md; + flex: 1 1 mp.$content-xs; + padding: mp.$spacing-xs mp.$spacing-md mp.$spacing-md mp.$spacing-md; .title-text { flex: 1 1 auto; .banner.warning & { - @media screen and #{lib2.$mq-sm} { - padding-left: lib2.$spacing-md; + @media screen and #{mp.$mq-sm} { + padding-left: mp.$spacing-md; border-left-width: 4px; border-left-style: solid; border-color: tokens.$color-yellow-50; @@ -80,10 +80,10 @@ } } - @media screen and #{lib2.$mq-sm} { - padding: lib2.$spacing-md; + @media screen and #{mp.$mq-sm} { + padding: mp.$spacing-md; } - @media screen and #{lib2.$mq-lg} { + @media screen and #{mp.$mq-lg} { flex-wrap: nowrap; } } @@ -97,10 +97,10 @@ .illustration { display: flex; align-items: center; - padding: lib2.$spacing-md lib2.$spacing-md 0 lib2.$spacing-md; + padding: mp.$spacing-md mp.$spacing-md 0 mp.$spacing-md; - @media screen and #{lib2.$mq-md} { - padding: 0 lib2.$spacing-md 0 lib2.$spacing-xl; + @media screen and #{mp.$mq-md} { + padding: 0 mp.$spacing-md 0 mp.$spacing-xl; } img { @@ -110,19 +110,19 @@ // For Banners in PremiumPromoBanners.tsx .flex-end { - border-bottom: 1px solid lib2.$color-light-gray-20; + border-bottom: 1px solid mp.$color-light-gray-20; align-items: center; - margin: 0 lib2.$spacing-md; - padding-top: lib2.$spacing-sm; + margin: 0 mp.$spacing-md; + padding-top: mp.$spacing-sm; width: 100%; - @media screen and #{lib2.$mq-sm} { + @media screen and #{mp.$mq-sm} { border-bottom: none; padding: none; width: auto; margin: 0; } - @media screen and #{lib2.$mq-lg} { + @media screen and #{mp.$mq-lg} { align-items: flex-end; } @@ -130,28 +130,28 @@ width: 90px; margin: 0 auto; - @media screen and #{lib2.$mq-sm} { + @media screen and #{mp.$mq-sm} { margin: 0; } } } .title { - @include lib2.text-title-3xs; - font-family: lib2.$font-stack-firefox; + @include mp.text-title-3xs; + font-family: mp.$font-stack-firefox; display: flex; align-items: center; - padding: lib2.$spacing-sm 0 lib2.$spacing-md 0; + padding: mp.$spacing-sm 0 mp.$spacing-md 0; .banner.info & { - @include lib2.text-body-sm; - font-family: lib2.$font-stack-base; + @include mp.text-body-sm; + font-family: mp.$font-stack-base; font-weight: 600; } .icon { flex: 0 0 auto; - margin-right: lib2.$spacing-sm; + margin-right: mp.$spacing-sm; .warning & { color: tokens.$color-yellow-50; @@ -159,7 +159,7 @@ .info & { color: tokens.$color-violet-30; - margin-right: lib2.$spacing-xs; + margin-right: mp.$spacing-xs; } } } @@ -168,7 +168,7 @@ a, button { display: inline-block; - padding-top: lib2.$spacing-md; + padding-top: mp.$spacing-md; font-weight: 700; color: tokens.$color-blue-50; cursor: pointer; @@ -178,7 +178,7 @@ .banner.info & { font-weight: 500; text-decoration: underline; - padding: lib2.$spacing-sm 0 0 0; + padding: mp.$spacing-sm 0 0 0; } &:hover { @@ -193,23 +193,23 @@ } .cta-large-button { - padding-top: lib2.$spacing-md; + padding-top: mp.$spacing-md; flex: 0 0 auto; align-self: center; - @media screen and #{lib2.$mq-md} { + @media screen and #{mp.$mq-md} { align-self: center; margin: 0 0 0 auto; - padding: lib2.$spacing-md; + padding: mp.$spacing-md; } a { display: block; - padding: lib2.$spacing-sm lib2.$spacing-md; + padding: mp.$spacing-sm mp.$spacing-md; font-weight: 700; border: 2px solid tokens.$color-blue-50; color: tokens.$color-blue-50; - border-radius: lib2.$border-radius-sm; + border-radius: mp.$border-radius-sm; &:hover { background-color: tokens.$color-blue-60; @@ -217,8 +217,8 @@ } &:focus { - border-color: lib.$button-border-color-focus; - box-shadow: lib.$field-focus-ring; + border-color: mp_forms.$button-border-color-focus; + box-shadow: mp_forms.$field-focus-ring; outline: none; } } diff --git a/frontend/src/components/Button.module.scss b/frontend/src/components/Button.module.scss index c83c24bf2c..53b57654e3 100644 --- a/frontend/src/components/Button.module.scss +++ b/frontend/src/components/Button.module.scss @@ -1,49 +1,49 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; -@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as forms_lib; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; @use "../styles/tokens"; .button { display: inline-flex; align-items: center; justify-content: center; - gap: lib.$spacing-xs; + gap: mp.$spacing-xs; cursor: pointer; - background-color: lib.$color-blue-50; - padding: lib.$spacing-sm lib.$spacing-md; - border-radius: lib.$border-radius-sm; + background-color: mp.$color-blue-50; + padding: mp.$spacing-sm mp.$spacing-md; + border-radius: mp.$border-radius-sm; border: 2px solid transparent; - color: lib.$color-white; + color: mp.$color-white; font-weight: 700; line-height: 1.25; - @include lib.text-body-md; + @include mp.text-body-md; &:hover:not(:disabled) { - background-color: lib.$color-blue-60; + background-color: mp.$color-blue-60; opacity: 1; } &:focus { - border-color: forms_lib.$button-border-color-focus; - box-shadow: forms_lib.$field-focus-ring; - color: lib.$color-white; + border-color: mp_forms.$button-border-color-focus; + box-shadow: mp_forms.$field-focus-ring; + color: mp.$color-white; outline: none; } &:disabled { cursor: not-allowed; - background-color: lib.$color-light-gray-80; + background-color: mp.$color-light-gray-80; } &.is-destructive { - background-color: lib.$color-red-60; + background-color: mp.$color-red-60; &:disabled { - background-color: lib.$color-red-10; + background-color: mp.$color-red-10; } &:hover:not(:disabled) { - background-color: lib.$color-red-70; + background-color: mp.$color-red-70; opacity: 1; } } @@ -51,19 +51,19 @@ &.is-secondary { background-color: transparent; border: none; - color: lib.$color-blue-50; + color: mp.$color-blue-50; &:disabled { opacity: 0.4; } &:active { - color: lib.$color-blue-70; + color: mp.$color-blue-70; } &:hover:not(:disabled) { background-color: transparent; - color: lib.$color-blue-60; + color: mp.$color-blue-60; } } } diff --git a/frontend/src/components/InfoModal.module.scss b/frontend/src/components/InfoModal.module.scss index 7b349234a0..b538d671d0 100644 --- a/frontend/src/components/InfoModal.module.scss +++ b/frontend/src/components/InfoModal.module.scss @@ -1,9 +1,9 @@ @use "../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; .underlay { align-items: center; - background-color: rgba(lib.$color-black, 0.4); + background-color: rgba(mp.$color-black, 0.4); bottom: 0; display: flex; justify-content: center; @@ -13,59 +13,59 @@ top: 0; .dialog-wrapper { - background: lib.$color-white; - border-radius: lib.$border-radius-md; - box-shadow: lib.$box-shadow-sm; + background: mp.$color-white; + border-radius: mp.$border-radius-md; + box-shadow: mp.$box-shadow-sm; max-width: 90%; position: relative; - width: calc((#{lib.$content-sm} + #{lib.$content-md}) / 2); // 560px + width: calc((#{mp.$content-sm} + #{mp.$content-md}) / 2); // 560px .dismiss-button { align-items: center; background-color: transparent; - border-radius: lib.$border-radius-sm; + border-radius: mp.$border-radius-sm; border-style: none; cursor: pointer; display: flex; height: 30px; justify-content: center; position: absolute; - right: lib.$spacing-sm; - top: lib.$spacing-sm; + right: mp.$spacing-sm; + top: mp.$spacing-sm; width: 30px; padding: 0; &:hover { - background-color: lib.$color-blue-50; - color: lib.$color-white; + background-color: mp.$color-blue-50; + color: mp.$color-white; } } .dialog-container { - padding: lib.$spacing-md; + padding: mp.$spacing-md; - @media screen and #{lib.$mq-md} { - padding: lib.$spacing-lg lib.$spacing-xl; + @media screen and #{mp.$mq-md} { + padding: mp.$spacing-lg mp.$spacing-xl; } .hero { - padding: lib.$spacing-sm 0; + padding: mp.$spacing-sm 0; text-align: start; width: 90%; // Shorter width to make room for the close button on mobile - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { width: 100%; } .headline { - @include lib.text-title-3xs; - font-family: lib.$font-stack-firefox; + @include mp.text-title-3xs; + font-family: mp.$font-stack-firefox; font-weight: 700; } } .modal-body { - @include lib.text-body-sm; + @include mp.text-body-sm; } } } diff --git a/frontend/src/components/InfoTooltip.module.scss b/frontend/src/components/InfoTooltip.module.scss index 253e586578..0d76b9b6f8 100644 --- a/frontend/src/components/InfoTooltip.module.scss +++ b/frontend/src/components/InfoTooltip.module.scss @@ -1,11 +1,11 @@ @use "../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; .wrapper { position: relative; display: none; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { display: initial; } @@ -14,25 +14,25 @@ align-items: center; background-color: transparent; border-style: none; - color: lib.$color-light-gray-70; + color: mp.$color-light-gray-70; } .tooltip { - @include lib.text-body-sm; + @include mp.text-body-sm; $triangleWidth: 10px; position: absolute; - background-color: lib.$color-white; - box-shadow: lib.$box-shadow-sm; - border-radius: lib.$border-radius-sm; - padding: lib.$spacing-md; - min-width: lib.$content-xs; + background-color: mp.$color-white; + box-shadow: mp.$box-shadow-sm; + border-radius: mp.$border-radius-sm; + padding: mp.$spacing-md; + min-width: mp.$content-xs; margin-top: $triangleWidth; margin-left: calc(-1 * ($triangleWidth / 2)); // Overlap .banner in , which is relatively positioned: z-index: 1; &:after { - background-color: lib.$color-white; + background-color: mp.$color-white; content: "\00a0"; display: block; diff --git a/frontend/src/components/dashboard/CornerNotification.module.scss b/frontend/src/components/dashboard/CornerNotification.module.scss index a57404082f..d629f325d6 100644 --- a/frontend/src/components/dashboard/CornerNotification.module.scss +++ b/frontend/src/components/dashboard/CornerNotification.module.scss @@ -1,50 +1,50 @@ @use "../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; .wrapper { position: relative; - padding-bottom: calc(lib.$spacing-md * 2 + 2rem); + padding-bottom: calc(mp.$spacing-md * 2 + 2rem); flex: 1 0 0; .card { position: fixed; - right: lib.$spacing-md; - bottom: lib.$spacing-md; + right: mp.$spacing-md; + bottom: mp.$spacing-md; display: flex; flex-direction: column; .card-header { - background-color: lib.$color-blue-90; - padding: lib.$spacing-md; - border-top-right-radius: lib.$border-radius-sm; - border-top-left-radius: lib.$border-radius-sm; + background-color: mp.$color-blue-90; + padding: mp.$spacing-md; + border-top-right-radius: mp.$border-radius-sm; + border-top-left-radius: mp.$border-radius-sm; } .card-content { - padding: lib.$spacing-lg; + padding: mp.$spacing-lg; display: flex; flex-direction: column; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; } .card-cta { - margin-top: lib.$spacing-md; + margin-top: mp.$spacing-md; } .card-title { - color: lib.$color-blue-90; + color: mp.$color-blue-90; - @include lib.text-title-3xs; - font-family: lib.$font-stack-firefox; + @include mp.text-title-3xs; + font-family: mp.$font-stack-firefox; font-weight: 600; word-wrap: break-word; } .card-description { - color: lib.$color-blue-90; + color: mp.$color-blue-90; - @include lib.text-body-md; - font-family: lib.$font-stack-firefox; + @include mp.text-body-md; + font-family: mp.$font-stack-firefox; font-weight: 400; word-wrap: break-word; } @@ -52,14 +52,14 @@ .close-button { background-color: transparent; border-style: none; - border-radius: lib.$border-radius-sm; + border-radius: mp.$border-radius-sm; padding: 0; cursor: pointer; - color: lib.$color-white; + color: mp.$color-white; float: right; &:hover { - color: lib.$color-blue-50; + color: mp.$color-blue-50; } } } @@ -76,9 +76,9 @@ } .card { - border-radius: lib.$border-radius-md; - box-shadow: lib.$box-shadow-sm; - background-color: lib.$color-white; - width: lib.$content-sm; - max-width: calc(100% - lib.$spacing-xl); + border-radius: mp.$border-radius-md; + box-shadow: mp.$box-shadow-sm; + background-color: mp.$color-white; + width: mp.$content-sm; + max-width: calc(100% - mp.$spacing-xl); } diff --git a/frontend/src/components/dashboard/EmailForwardingModal.module.scss b/frontend/src/components/dashboard/EmailForwardingModal.module.scss index 08f5299aca..4f7aeb84c1 100644 --- a/frontend/src/components/dashboard/EmailForwardingModal.module.scss +++ b/frontend/src/components/dashboard/EmailForwardingModal.module.scss @@ -1,10 +1,10 @@ @use "../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; @use "../../styles/typography" as styles-typography; .underlay { position: fixed; - background-color: rgba(lib.$color-black, 0.4); + background-color: rgba(mp.$color-black, 0.4); top: 0; bottom: 0; left: 0; @@ -14,14 +14,14 @@ justify-content: center; .dialog-wrapper { - background: lib.$color-light-gray-10; - width: calc(100% - lib.$spacing-2xl); - border-radius: lib.$border-radius-md; - box-shadow: lib.$box-shadow-sm; - padding: lib.$spacing-md; - - @media screen and (lib.$mq-md) { - width: lib.$content-md; + background: mp.$color-light-gray-10; + width: calc(100% - mp.$spacing-2xl); + border-radius: mp.$border-radius-md; + box-shadow: mp.$box-shadow-sm; + padding: mp.$spacing-md; + + @media screen and (mp.$mq-md) { + width: mp.$content-md; } .close-icon { @@ -32,13 +32,13 @@ .hero { display: flex; flex-direction: column; - gap: lib.$spacing-lg; - font-family: lib.$font-stack-firefox; + gap: mp.$spacing-lg; + font-family: mp.$font-stack-firefox; font-weight: 400; text-align: center; - border-radius: lib.$border-radius-md; - background-color: lib.$color-light-gray-10; - padding: lib.$spacing-lg lib.$spacing-md; + border-radius: mp.$border-radius-md; + background-color: mp.$color-light-gray-10; + padding: mp.$spacing-lg mp.$spacing-md; clear: right; img { @@ -54,12 +54,12 @@ .modal-title { text-align: left; - margin-bottom: lib.$spacing-sm; + margin-bottom: mp.$spacing-sm; } .modal-title-success { text-align: center; - margin-bottom: lib.$spacing-sm; + margin-bottom: mp.$spacing-sm; font-weight: 400; } } @@ -69,8 +69,8 @@ display: flex; align-items: center; justify-content: center; - padding: lib.$spacing-sm 0; - gap: lib.$spacing-sm; + padding: mp.$spacing-sm 0; + gap: mp.$spacing-sm; font-weight: 100; } } @@ -78,32 +78,32 @@ .modal-title { font-weight: 600; - @include lib.text-body-md; + @include mp.text-body-md; color: tokens.$color-grey-50; } .nevermind-link { background-color: transparent; border-style: none; - color: lib.$color-blue-50; - border-radius: lib.$border-radius-sm; + color: mp.$color-blue-50; + border-radius: mp.$border-radius-sm; &:hover { - color: lib.$color-blue-70; + color: mp.$color-blue-70; text-decoration: underline; cursor: pointer; } } .label-input { - font-family: lib.$font-stack-firefox; + font-family: mp.$font-stack-firefox; border: 1px solid tokens.$color-grey-30; - border-radius: lib.$border-radius-sm; + border-radius: mp.$border-radius-sm; font-weight: 100; - padding: lib.$spacing-sm lib.$spacing-md; + padding: mp.$spacing-sm mp.$spacing-md; // Inputs should be atleast 16px if we want to avoid iOS auto-zooming (MPP-3598) - @include lib.text-body-md; + @include mp.text-body-md; color: tokens.$color-grey-40; width: 100%; } diff --git a/frontend/src/components/dashboard/FreeOnboarding.module.scss b/frontend/src/components/dashboard/FreeOnboarding.module.scss index 4a44ec2928..77af724687 100644 --- a/frontend/src/components/dashboard/FreeOnboarding.module.scss +++ b/frontend/src/components/dashboard/FreeOnboarding.module.scss @@ -1,6 +1,6 @@ @use "../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as lib2; -@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; @use "../../styles/typography" as styles-typography; .onboarding { @@ -12,21 +12,21 @@ .step, .controls { width: 100%; - max-width: lib2.$content-xl; + max-width: mp.$content-xl; margin: 0 auto; - padding: lib2.$spacing-lg; + padding: mp.$spacing-lg; .generate-new-mask { - padding: lib2.$spacing-sm lib2.$spacing-2xl; - margin-bottom: lib2.$spacing-lg; + padding: mp.$spacing-sm mp.$spacing-2xl; + margin-bottom: mp.$spacing-lg; } } .step.step-copy-mask { .copy-mask-header { - margin-bottom: lib2.$spacing-lg; + margin-bottom: mp.$spacing-lg; - @media screen and #{lib2.$mq-lg} { + @media screen and #{mp.$mq-lg} { margin-bottom: 0; } } @@ -42,19 +42,19 @@ display: flex; flex-direction: column; position: relative; - padding: lib2.$spacing-lg lib2.$spacing-xl; - margin-top: lib2.$spacing-2xl; + padding: mp.$spacing-lg mp.$spacing-xl; + margin-top: mp.$spacing-2xl; box-sizing: border-box; - background: lib2.$color-white; + background: mp.$color-white; background-clip: padding-box; border: solid 2px transparent; - border-radius: lib2.$border-radius-md; + border-radius: mp.$border-radius-md; hr { - background-color: lib2.$color-white; + background-color: mp.$color-white; height: 2px; width: 100%; - margin: lib2.$spacing-md 0; + margin: mp.$spacing-md 0; } } @@ -65,13 +65,13 @@ margin: 0 auto; display: none; - @media screen and #{lib2.$mq-lg} { + @media screen and #{mp.$mq-lg} { display: block; } img { position: absolute; - width: lib2.$layout-xl; + width: mp.$layout-xl; height: 125px; /* both calculations below deal with alignment of custom art element - vertical arrow */ bottom: -30px; @@ -90,7 +90,7 @@ /* sets order for clipped background */ z-index: -1; /* set to the same width of the border for clipping */ - margin: calc(lib2.$spacing-xs * -1); + margin: calc(mp.$spacing-xs * -1); border-radius: inherit; background: linear-gradient( to right, @@ -103,11 +103,11 @@ .content-item { display: flex; flex-direction: row; - gap: lib2.$spacing-lg; + gap: mp.$spacing-lg; .content-text { display: flex; - gap: lib2.$spacing-md; + gap: mp.$spacing-md; align-items: flex-start; flex-direction: column; } @@ -115,15 +115,15 @@ .headline { font-weight: 700; - @include lib2.text-body-md; - font-family: lib2.$font-stack-firefox; - color: lib2.$color-blue-80; + @include mp.text-body-md; + font-family: mp.$font-stack-firefox; + color: mp.$color-blue-80; } .description { display: flex; flex-direction: column; - gap: lib2.$spacing-lg; + gap: mp.$spacing-lg; } } @@ -134,65 +134,65 @@ justify-content: space-evenly; .action-complete { - @include lib2.text-body-sm; - font-family: lib2.$font-stack-firefox; + @include mp.text-body-sm; + font-family: mp.$font-stack-firefox; display: flex; flex-direction: column; align-items: center; justify-content: center; - padding: lib2.$spacing-md; - border-radius: lib2.$border-radius-md; - background-color: lib2.$color-white; + padding: mp.$spacing-md; + border-radius: mp.$border-radius-md; + background-color: mp.$color-white; .label { display: inline-flex; align-items: center; - gap: lib2.$spacing-xs; - padding-bottom: lib2.$spacing-xs; + gap: mp.$spacing-xs; + padding-bottom: mp.$spacing-xs; svg { - color: lib2.$color-blue-50; + color: mp.$color-blue-50; } } samp { - @include lib2.text-body-lg; - font-family: lib2.$font-stack-firefox; + @include mp.text-body-lg; + font-family: mp.$font-stack-firefox; font-weight: 700; - color: lib2.$color-purple-50; + color: mp.$color-purple-50; } .domain { - @include lib2.text-body-xs; - color: lib2.$color-light-gray-90; + @include mp.text-body-xs; + color: mp.$color-light-gray-90; } } &.step-custom-domain { - max-width: lib2.$content-xl; + max-width: mp.$content-xl; .subdomain-picker-heading { - padding: lib2.$spacing-md 0; + padding: mp.$spacing-md 0; } .domain-example { - @include lib2.font-firefox; + @include mp.font-firefox; @include styles-typography.text-title-2xs { - color: lib2.$color-light-gray-90; + color: mp.$color-light-gray-90; display: inline-block; - padding: lib2.$spacing-md 0; + padding: mp.$spacing-md 0; text-overflow: ellipsis; white-space: nowrap; overflow-x: hidden; - max-width: lib2.$content-xs; + max-width: mp.$content-xs; } - @media screen and #{lib2.$mq-md} { + @media screen and #{mp.$mq-md} { max-width: 100%; } .customizable-part { - color: lib2.$color-violet-50; + color: mp.$color-violet-50; font-weight: 700; } } @@ -202,7 +202,7 @@ flex-direction: column; margin: 0 auto; - @media screen and #{lib2.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; justify-content: space-between; align-items: center; @@ -210,15 +210,15 @@ } input { - @include lib.form-input; + @include mp_forms.form-input; flex-grow: 2; margin: 0; - margin-bottom: lib2.$spacing-md; + margin-bottom: mp.$spacing-md; width: 100%; - @media screen and #{ lib2.$mq-md } { + @media screen and #{ mp.$mq-md } { margin: 0; - margin-right: lib2.$spacing-md; + margin-right: mp.$spacing-md; } } @@ -233,14 +233,14 @@ // Hide the description of the add-on on small screens, // because it isn't available on mobile. display: none; - padding: lib2.$spacing-md 0; + padding: mp.$spacing-md 0; - @media screen and #{lib2.$mq-md} { + @media screen and #{mp.$mq-md} { display: block; } } - @media screen and #{lib2.$mq-md} { + @media screen and #{mp.$mq-md} { // Don't show the description of replies on small screens, // to focus on the add-on availability: .reply-description { @@ -252,16 +252,16 @@ } h3 { - @include lib2.text-body-md; + @include mp.text-body-md; } .get-addon-button { - margin-top: lib2.$spacing-md; + margin-top: mp.$spacing-md; // The extension isn't available on mobile, // so hide it on small screens: display: none; - @media screen and #{lib2.$mq-md} { + @media screen and #{mp.$mq-md} { display: inline-block; } } @@ -272,38 +272,38 @@ display: flex; flex-direction: column; align-items: center; - gap: lib2.$spacing-xs; + gap: mp.$spacing-xs; h1 { @include styles-typography.text-title-sm { font-weight: 700; - font-family: lib2.$font-stack-firefox; - color: lib2.$color-purple-50; + font-family: mp.$font-stack-firefox; + color: mp.$color-purple-50; } } p { - @include lib2.text-body-md; + @include mp.text-body-md; font-weight: 600; - font-family: lib2.$font-stack-firefox; + font-family: mp.$font-stack-firefox; } } .content-wrapper { display: flex; flex-direction: column; - gap: lib2.$spacing-2xl; + gap: mp.$spacing-2xl; img { - margin: lib2.$spacing-2xl auto 0 auto; + margin: mp.$spacing-2xl auto 0 auto; max-width: 300px; - @media screen and #{lib2.$mq-lg} { + @media screen and #{mp.$mq-lg} { max-width: unset; } } - @media screen and #{lib2.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; } } @@ -312,7 +312,7 @@ .hidden-mobile { display: none; - @media screen and #{lib2.$mq-md} { + @media screen and #{mp.$mq-md} { display: inline-block; } } @@ -320,20 +320,20 @@ .headline { font-weight: 700; - @include lib2.text-body-md; - font-family: lib2.$font-stack-firefox; - color: lib2.$color-blue-80; + @include mp.text-body-md; + font-family: mp.$font-stack-firefox; + color: mp.$color-blue-80; } .content-text { display: flex; flex-direction: column; - gap: lib2.$spacing-lg; + gap: mp.$spacing-lg; div:nth-child(2) { - border: 3px solid lib2.$color-white; - border-radius: lib2.$border-radius-md; - padding: lib2.$spacing-lg lib2.$spacing-2xl; + border: 3px solid mp.$color-white; + border-radius: mp.$border-radius-md; + padding: mp.$spacing-lg mp.$spacing-2xl; } } @@ -347,7 +347,7 @@ .controls { display: flex; flex-direction: column; - gap: lib2.$spacing-xl; + gap: mp.$spacing-xl; align-items: center; width: 100%; @@ -355,11 +355,11 @@ .next-link { background-color: transparent; border-style: none; - color: lib2.$color-blue-50; - border-radius: lib2.$border-radius-sm; + color: mp.$color-blue-50; + border-radius: mp.$border-radius-sm; &:hover { - color: lib2.$color-blue-70; + color: mp.$color-blue-70; text-decoration: underline; cursor: pointer; } @@ -367,12 +367,12 @@ .next-link { /* allows for flush positioning of link to next page with pagination component */ - margin: calc(lib2.$spacing-lg * -1) 0 lib2.$spacing-xs lib2.$spacing-sm; + margin: calc(mp.$spacing-lg * -1) 0 mp.$spacing-xs mp.$spacing-sm; display: flex; align-items: center; } - @media screen and (max-width: #{lib2.$screen-md}) { + @media screen and (max-width: #{mp.$screen-md}) { .get-addon-button { display: none; } @@ -386,37 +386,37 @@ /* this code is copied from progress bar used in premium onboarding */ progress { width: 100%; - max-width: lib2.$content-md; + max-width: mp.$content-md; } .styled-progress-bar { display: flex; width: 100%; - max-width: lib2.$content-md; - gap: lib2.$spacing-sm; + max-width: mp.$content-md; + gap: mp.$spacing-sm; list-style-type: none; li { width: 100%; - color: lib2.$color-light-gray-90; + color: mp.$color-light-gray-90; text-align: center; transition: color 0.2s ease-out; span { display: block; height: 5px; - background-color: lib2.$color-light-gray-20; - margin-bottom: lib2.$spacing-xs; + background-color: mp.$color-light-gray-20; + margin-bottom: mp.$spacing-xs; transition: box-shadow 1s ease-out, color 0.2s ease-out; } &.is-completed { - color: lib2.$color-violet-20; + color: mp.$color-violet-20; span { - box-shadow: inset 300px 0 0 0 lib2.$color-violet-20; + box-shadow: inset 300px 0 0 0 mp.$color-violet-20; } } } @@ -427,16 +427,16 @@ .addon-content-items { flex-direction: column; - @media screen and #{lib2.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; } } .addon-content-items:nth-child(2) { flex-direction: column-reverse; - margin-top: lib2.$spacing-2xl; + margin-top: mp.$spacing-2xl; - @media screen and #{ lib2.$mq-md } { + @media screen and #{ mp.$mq-md } { flex-direction: row; } } @@ -445,7 +445,7 @@ .small-arrow { display: none; - @media screen and #{lib2.$mq-md} { + @media screen and #{mp.$mq-md} { display: flex; } } @@ -454,14 +454,14 @@ .addon-content-wrapper { display: flex; flex-direction: column; - gap: lib2.$spacing-md; - margin-top: lib2.$spacing-lg; + gap: mp.$spacing-md; + margin-top: mp.$spacing-lg; .addon-content-items { display: flex; flex-direction: row; align-items: center; - gap: lib2.$spacing-2xl; + gap: mp.$spacing-2xl; position: relative; .large-arrow, @@ -471,24 +471,24 @@ /* custom art element that requires absolute positioning */ .large-arrow { - bottom: calc(lib2.$spacing-2xl * -1); - right: calc(lib2.$spacing-lg * -5); + bottom: calc(mp.$spacing-2xl * -1); + right: calc(mp.$spacing-lg * -5); } /* custom art element that requires absolute positioning */ .small-arrow { - bottom: calc(lib2.$spacing-2xl * -1); - left: calc(lib2.$spacing-lg * -5); + bottom: calc(mp.$spacing-2xl * -1); + left: calc(mp.$spacing-lg * -5); } .headline { - @include lib2.text-body-lg; + @include mp.text-body-lg; } .addon-content-text { display: flex; flex-direction: column; - gap: lib2.$spacing-sm; + gap: mp.$spacing-sm; position: relative; } } @@ -496,8 +496,8 @@ .action-complete { text-align: center; - background: lib2.$color-white; - padding: lib2.$spacing-sm lib2.$spacing-2xl; + background: mp.$color-white; + padding: mp.$spacing-sm mp.$spacing-2xl; svg { margin: 0 auto; diff --git a/frontend/src/components/dashboard/Onboarding.module.scss b/frontend/src/components/dashboard/Onboarding.module.scss index f39472b7a5..d763532cd2 100644 --- a/frontend/src/components/dashboard/Onboarding.module.scss +++ b/frontend/src/components/dashboard/Onboarding.module.scss @@ -1,29 +1,29 @@ @use "../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; @use "../../styles/typography" as styles-typography; .wrapper { - padding: lib.$spacing-lg; - border-radius: lib.$border-radius-md; - border: 1px solid lib.$color-light-gray-40; + padding: mp.$spacing-lg; + border-radius: mp.$border-radius-md; + border: 1px solid mp.$color-light-gray-40; h2 { @include styles-typography.text-title-2xs { - @include lib.font-firefox; - padding: lib.$spacing-sm 0; + @include mp.font-firefox; + padding: mp.$spacing-sm 0; } } .steps { display: flex; flex-direction: column; - gap: lib.$spacing-lg; + gap: mp.$spacing-lg; list-style-type: none; margin: 0; - padding: lib.$spacing-lg 0; + padding: mp.$spacing-lg 0; counter-reset: step-counter; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; } @@ -32,10 +32,10 @@ display: flex; flex-direction: column; align-items: center; - gap: lib.$spacing-xl; - background-color: lib.$color-white; - border-radius: lib.$border-radius-md; - padding: lib.$spacing-lg; + gap: mp.$spacing-xl; + background-color: mp.$color-white; + border-radius: mp.$border-radius-md; + padding: mp.$spacing-lg; counter-increment: step-counter; &::before { @@ -48,7 +48,7 @@ width: 100%; text-align: center; font-weight: 700; - color: lib.$color-light-gray-70; + color: mp.$color-light-gray-70; } p, diff --git a/frontend/src/components/dashboard/PremiumOnboarding.module.scss b/frontend/src/components/dashboard/PremiumOnboarding.module.scss index 9274175ad7..238c110216 100644 --- a/frontend/src/components/dashboard/PremiumOnboarding.module.scss +++ b/frontend/src/components/dashboard/PremiumOnboarding.module.scss @@ -1,6 +1,6 @@ @use "../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as lib2; -@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; @use "../../styles/typography" as styles-typography; .onboarding { @@ -12,9 +12,9 @@ .step, .controls { width: 100%; - max-width: lib2.$content-lg; + max-width: mp.$content-lg; margin: 0 auto; - padding: lib2.$spacing-lg; + padding: mp.$spacing-lg; } .step { @@ -24,21 +24,21 @@ justify-content: space-evenly; .title-container { - margin: lib2.$spacing-xl 0 lib2.$spacing-lg 0; + margin: mp.$spacing-xl 0 mp.$spacing-lg 0; } .feature-item-list { list-style-type: none; li { - margin: lib2.$spacing-sm 0; + margin: mp.$spacing-sm 0; display: flex; flex-direction: row; align-items: center; - gap: lib2.$spacing-sm; + gap: mp.$spacing-sm; .check-icon { - fill: lib2.$color-blue-50; + fill: mp.$color-blue-50; min-width: 20px; // Width of the check icons } } @@ -46,111 +46,111 @@ h2 { @include styles-typography.text-title-sm { - font-family: lib2.$font-stack-firefox; - color: lib2.$color-purple-50; + font-family: mp.$font-stack-firefox; + color: mp.$color-purple-50; text-align: center; } } .lead { - @include lib2.text-title-3xs; - font-family: lib2.$font-stack-firefox; + @include mp.text-title-3xs; + font-family: mp.$font-stack-firefox; text-align: center; - padding-top: lib2.$spacing-md; + padding-top: mp.$spacing-md; } .description { - @include lib2.text-body-sm; + @include mp.text-body-sm; display: flex; flex-direction: column; align-items: center; - gap: lib2.$spacing-2xl; - padding-top: lib2.$spacing-lg; - max-width: lib2.$content-lg; + gap: mp.$spacing-2xl; + padding-top: mp.$spacing-lg; + max-width: mp.$content-lg; align-self: center; .description-bolded-headline { - @include lib2.text-body-md; + @include mp.text-body-md; font-weight: 600; display: block; } - @media screen and #{lib2.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; } .content { max-width: 100%; - min-width: lib2.$content-xs; + min-width: mp.$content-xs; } .description-caption { - @include lib2.text-body-sm; - color: lib2.$color-purple-30; + @include mp.text-body-sm; + color: mp.$color-purple-30; font-weight: 500; } } .action-complete { - @include lib2.text-body-sm; - font-family: lib2.$font-stack-firefox; + @include mp.text-body-sm; + font-family: mp.$font-stack-firefox; display: flex; flex-direction: column; align-items: center; justify-content: center; - padding: lib2.$spacing-md; - border-radius: lib2.$border-radius-md; - background-color: lib2.$color-white; + padding: mp.$spacing-md; + border-radius: mp.$border-radius-md; + background-color: mp.$color-white; .label { display: inline-flex; align-items: center; - gap: lib2.$spacing-xs; - padding-bottom: lib2.$spacing-xs; + gap: mp.$spacing-xs; + padding-bottom: mp.$spacing-xs; svg { - color: lib2.$color-blue-50; + color: mp.$color-blue-50; } } samp { - @include lib2.text-body-lg; - font-family: lib2.$font-stack-firefox; + @include mp.text-body-lg; + font-family: mp.$font-stack-firefox; font-weight: 700; - color: lib2.$color-purple-50; + color: mp.$color-purple-50; } .domain { - @include lib2.text-body-xs; - color: lib2.$color-light-gray-90; + @include mp.text-body-xs; + color: mp.$color-light-gray-90; } } &.step-custom-domain { - max-width: lib2.$content-xl; + max-width: mp.$content-xl; .subdomain-picker-heading { - padding: lib2.$spacing-md 0; + padding: mp.$spacing-md 0; } .domain-example { - @include lib2.font-firefox; + @include mp.font-firefox; @include styles-typography.text-title-2xs { - color: lib2.$color-light-gray-90; + color: mp.$color-light-gray-90; display: inline-block; - padding: lib2.$spacing-md 0; + padding: mp.$spacing-md 0; text-overflow: ellipsis; white-space: nowrap; overflow-x: hidden; - max-width: lib2.$content-xs; + max-width: mp.$content-xs; } - @media screen and #{lib2.$mq-md} { + @media screen and #{mp.$mq-md} { max-width: 100%; } .customizable-part { - color: lib2.$color-violet-50; + color: mp.$color-violet-50; font-weight: 700; } } @@ -160,7 +160,7 @@ flex-direction: column; margin: 0 auto; - @media screen and #{lib2.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; justify-content: space-between; align-items: center; @@ -168,15 +168,15 @@ } input { - @include lib.form-input; + @include mp_forms.form-input; flex-grow: 2; margin: 0; - margin-bottom: lib2.$spacing-md; + margin-bottom: mp.$spacing-md; width: 100%; - @media screen and #{ lib2.$mq-md } { + @media screen and #{ mp.$mq-md } { margin: 0; - margin-right: lib2.$spacing-md; + margin-right: mp.$spacing-md; } } @@ -191,14 +191,14 @@ // Hide the description of the add-on on small screens, // because it isn't available on mobile. display: none; - padding: lib2.$spacing-md 0; + padding: mp.$spacing-md 0; - @media screen and #{lib2.$mq-md} { + @media screen and #{mp.$mq-md} { display: block; } } - @media screen and #{lib2.$mq-md} { + @media screen and #{mp.$mq-md} { // Don't show the description of replies on small screens, // to focus on the add-on availability: .reply-description { @@ -210,16 +210,16 @@ } h3 { - @include lib2.text-body-md; + @include mp.text-body-md; } .get-addon-button { - margin-top: lib2.$spacing-md; + margin-top: mp.$spacing-md; // The extension isn't available on mobile, // so hide it on small screens: display: none; - @media screen and #{lib2.$mq-md} { + @media screen and #{mp.$mq-md} { display: inline-block; } } @@ -229,24 +229,24 @@ .controls { display: flex; flex-direction: column; - gap: lib2.$spacing-xl; + gap: mp.$spacing-xl; align-items: center; width: 100%; .skip-link { background-color: transparent; border-style: none; - color: lib2.$color-blue-50; - border-radius: lib2.$border-radius-sm; + color: mp.$color-blue-50; + border-radius: mp.$border-radius-sm; &:hover { - color: lib2.$color-blue-70; + color: mp.$color-blue-70; text-decoration: underline; cursor: pointer; } } - @media screen and (max-width: #{lib2.$screen-md}) { + @media screen and (max-width: #{mp.$screen-md}) { .get-addon-button { display: none; } @@ -259,37 +259,37 @@ progress { width: 100%; - max-width: lib2.$content-md; + max-width: mp.$content-md; } .styled-progress-bar { display: flex; width: 100%; - max-width: lib2.$content-md; - gap: lib2.$spacing-sm; + max-width: mp.$content-md; + gap: mp.$spacing-sm; list-style-type: none; li { width: 100%; - color: lib2.$color-light-gray-90; + color: mp.$color-light-gray-90; text-align: center; transition: color 0.2s ease-out; span { display: block; height: 5px; - background-color: lib2.$color-light-gray-20; - margin-bottom: lib2.$spacing-xs; + background-color: mp.$color-light-gray-20; + margin-bottom: mp.$spacing-xs; transition: box-shadow 1s ease-out, color 0.2s ease-out; } &.is-completed { - color: lib2.$color-violet-30; + color: mp.$color-violet-30; span { - box-shadow: inset 300px 0 0 0 lib2.$color-violet-30; + box-shadow: inset 300px 0 0 0 mp.$color-violet-30; } } } diff --git a/frontend/src/components/dashboard/SubdomainPicker.module.scss b/frontend/src/components/dashboard/SubdomainPicker.module.scss index db01b606b5..d740ffe8ec 100644 --- a/frontend/src/components/dashboard/SubdomainPicker.module.scss +++ b/frontend/src/components/dashboard/SubdomainPicker.module.scss @@ -1,23 +1,23 @@ @use "../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as lib2; -@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; @use "../../styles/typography" as styles-typography; .card { - border-radius: lib2.$border-radius-md; - padding: lib2.$spacing-lg; - box-shadow: lib2.$box-shadow-sm; - background-color: lib2.$color-white; + border-radius: mp.$border-radius-md; + padding: mp.$spacing-lg; + box-shadow: mp.$box-shadow-sm; + background-color: mp.$color-white; display: flex; flex-direction: column; align-items: center; border: 4px solid transparent; &:target { - border-color: lib2.$color-blue-50; + border-color: mp.$color-blue-50; } - @media screen and #{lib2.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; .description, @@ -27,54 +27,54 @@ } a { - @include lib2.text-body-sm; - color: lib2.$color-blue-50; + @include mp.text-body-sm; + color: mp.$color-blue-50; &:hover, &:focus { - color: lib2.$color-blue-60; + color: mp.$color-blue-60; } } .description { max-width: 100%; - min-width: lib2.$content-xs; - border-color: lib2.$color-light-gray-30; + min-width: mp.$content-xs; + border-color: mp.$color-light-gray-30; border-width: 1px; border-bottom-style: solid; - margin-bottom: lib2.$spacing-md; - padding-bottom: lib2.$spacing-md; + margin-bottom: mp.$spacing-md; + padding-bottom: mp.$spacing-md; - @media screen and #{lib2.$mq-md} { + @media screen and #{mp.$mq-md} { border-bottom-style: none; margin-bottom: 0; padding-bottom: 0; border-right-style: solid; - margin-right: lib2.$spacing-lg; - padding-right: lib2.$spacing-lg; + margin-right: mp.$spacing-lg; + padding-right: mp.$spacing-lg; align-self: start; } .action-step { - @include lib2.text-body-sm; - color: lib2.$color-violet-50; + @include mp.text-body-sm; + color: mp.$color-violet-50; margin-top: 0; - margin-bottom: lib2.$spacing-md; + margin-bottom: mp.$spacing-md; } h2 { @include styles-typography.text-title-2xs { - padding: lib2.$spacing-sm 0; + padding: mp.$spacing-sm 0; } } .lead { - @include lib2.text-body-sm; - padding: lib2.$spacing-md 0; + @include mp.text-body-sm; + padding: mp.$spacing-md 0; color: tokens.$color-grey-50; display: flex; flex-direction: column; - gap: lib2.$spacing-md; + gap: mp.$spacing-md; } } @@ -88,30 +88,30 @@ .input-wrapper { width: 100%; - @media screen and #{lib2.$mq-md} { - max-width: lib2.$content-sm; + @media screen and #{mp.$mq-md} { + max-width: mp.$content-sm; } } .example { - @include lib2.font-firefox; - @include lib2.text-title-3xs; - color: lib2.$color-light-gray-90; + @include mp.font-firefox; + @include mp.text-title-3xs; + color: mp.$color-light-gray-90; display: block; text-overflow: ellipsis; white-space: nowrap; overflow-x: hidden; text-align: center; - margin: lib2.$spacing-md 0; + margin: mp.$spacing-md 0; width: 100%; .subdomain-part { - color: lib2.$color-violet-50; + color: mp.$color-violet-50; font-weight: 700; } } - @media screen and #{lib2.$mq-md} { + @media screen and #{mp.$mq-md} { width: 50%; } @@ -120,21 +120,21 @@ flex-direction: column; width: 100%; - @media screen and #{lib2.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; justify-content: space-between; } input { - @include lib.form-input; + @include mp_forms.form-input; flex-grow: 2; margin: 0; - margin-bottom: lib2.$spacing-md; + margin-bottom: mp.$spacing-md; width: 100%; - @media screen and #{ lib2.$mq-md } { + @media screen and #{ mp.$mq-md } { margin: 0; - margin-right: lib2.$spacing-md; + margin-right: mp.$spacing-md; } } @@ -144,7 +144,7 @@ } .illustration { - margin-top: lib2.$spacing-lg; + margin-top: mp.$spacing-lg; } } } diff --git a/frontend/src/components/dashboard/aliases/AddressPickerModal.module.scss b/frontend/src/components/dashboard/aliases/AddressPickerModal.module.scss index 970ef741e8..18a39378c9 100644 --- a/frontend/src/components/dashboard/aliases/AddressPickerModal.module.scss +++ b/frontend/src/components/dashboard/aliases/AddressPickerModal.module.scss @@ -1,10 +1,10 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as lib2; -@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; .underlay { position: fixed; - background-color: rgba(lib2.$color-black, 0.4); + background-color: rgba(mp.$color-black, 0.4); top: 0; bottom: 0; left: 0; @@ -14,48 +14,48 @@ justify-content: center; .dialog-wrapper { - background: lib2.$color-white; - width: calc((#{lib2.$content-sm} + #{lib2.$content-md}) / 2); // 560px + background: mp.$color-white; + width: calc((#{mp.$content-sm} + #{mp.$content-md}) / 2); // 560px max-width: 90%; - border-radius: lib2.$border-radius-md; - box-shadow: lib2.$box-shadow-sm; - padding: lib2.$spacing-md; + border-radius: mp.$border-radius-md; + box-shadow: mp.$box-shadow-sm; + padding: mp.$spacing-md; .hero { - @include lib2.text-title-3xs; - font-family: lib2.$font-stack-firefox; + @include mp.text-title-3xs; + font-family: mp.$font-stack-firefox; font-weight: 700; text-align: center; - border-radius: lib2.$border-radius-md; - background-color: lib2.$color-light-gray-10; - padding: lib2.$spacing-md lib2.$spacing-sm; + border-radius: mp.$border-radius-md; + background-color: mp.$color-light-gray-10; + padding: mp.$spacing-md mp.$spacing-sm; - @media screen and #{lib2.$mq-sm} { - padding: lib2.$spacing-lg lib2.$spacing-md; + @media screen and #{mp.$mq-sm} { + padding: mp.$spacing-lg mp.$spacing-md; } } .tip { display: flex; - gap: lib2.$spacing-sm; + gap: mp.$spacing-sm; word-break: break-word; - border-left: 2px solid lib2.$color-violet-30; + border-left: 2px solid mp.$color-violet-30; margin: 0 auto; width: 85%; - padding-left: lib2.$spacing-sm; - font-family: lib2.$font-stack-base; + padding-left: mp.$spacing-sm; + font-family: mp.$font-stack-base; font-weight: 400; color: tokens.$color-grey-50; - @include lib2.text-body-sm; + @include mp.text-body-sm; .tip-icon { // There is limited space on the mask creation modal on mobile. // Hiding this icon until larger screens increases the available space for copy. display: none; - color: lib2.$color-pink-30; + color: mp.$color-pink-30; - @media screen and #{lib2.$mq-sm} { + @media screen and #{mp.$mq-sm} { display: block; } @@ -66,11 +66,11 @@ } hr { - border: 1px solid lib2.$color-light-gray-20; - margin-top: lib2.$spacing-lg; + border: 1px solid mp.$color-light-gray-20; + margin-top: mp.$spacing-lg; - @media screen and #{lib2.$mq-sm} { - margin-top: lib2.$spacing-xl; + @media screen and #{mp.$mq-sm} { + margin-top: mp.$spacing-xl; } } @@ -78,16 +78,16 @@ text-align: center; .form-heading { - color: lib2.$color-dark-gray-70; - padding: lib2.$spacing-md 0; + color: mp.$color-dark-gray-70; + padding: mp.$spacing-md 0; - @media screen and #{lib2.$mq-sm} { - padding: lib2.$spacing-lg 0; + @media screen and #{mp.$mq-sm} { + padding: mp.$spacing-lg 0; } } .prefix { - font-family: lib2.$font-stack-firefox; + font-family: mp.$font-stack-firefox; color: tokens.$color-grey-50; width: 70%; margin: 0 auto; @@ -98,26 +98,26 @@ label { text-align: start; font-weight: 600; - margin-top: lib2.$spacing-xl; + margin-top: mp.$spacing-xl; } input { - @include lib.form-input; + @include mp_forms.form-input; // Override form-input's margin: - margin: lib2.$spacing-sm 0 0 0; + margin: mp.$spacing-sm 0 0 0; font-weight: 400; - padding: lib2.$spacing-sm; + padding: mp.$spacing-sm; color: tokens.$color-grey-40; - font-family: lib2.$font-stack-base; + font-family: mp.$font-stack-base; - @include lib2.text-body-md; + @include mp.text-body-md; } } .suffix { - font-family: lib2.$font-stack-firefox; + font-family: mp.$font-stack-firefox; display: block; - padding-top: lib2.$spacing-xs; + padding-top: mp.$spacing-xs; } } @@ -125,34 +125,34 @@ display: flex; align-items: center; justify-content: center; - gap: lib2.$spacing-sm; - margin: lib2.$spacing-md lib2.$spacing-sm; - font-family: lib2.$font-stack-firefox; + gap: mp.$spacing-sm; + margin: mp.$spacing-md mp.$spacing-sm; + font-family: mp.$font-stack-firefox; color: tokens.$color-grey-50; font-weight: 600; - @media screen and #{lib2.$mq-sm} { - margin: lib2.$spacing-xl lib2.$spacing-sm; + @media screen and #{mp.$mq-sm} { + margin: mp.$spacing-xl mp.$spacing-sm; } input[type="checkbox"] { width: 20px; height: 20px; border: 2px solid tokens.$color-grey-20; - border-radius: lib2.$border-radius-sm; + border-radius: mp.$border-radius-sm; -webkit-appearance: none; } input[type="checkbox"]:checked { - background-color: lib2.$color-blue-50; - border-color: lib2.$color-blue-50; + background-color: mp.$color-blue-50; + border-color: mp.$color-blue-50; appearance: checkbox; } .promotionals-blocking-description { a { display: block; - color: lib2.$color-blue-50; + color: mp.$color-blue-50; &:hover { text-decoration: underline; @@ -166,26 +166,26 @@ display: flex; align-items: center; justify-content: space-between; - padding-top: lib2.$spacing-lg; + padding-top: mp.$spacing-lg; - @media screen and #{lib2.$mq-sm} { - padding-top: lib2.$spacing-xl; + @media screen and #{mp.$mq-sm} { + padding-top: mp.$spacing-xl; } .cancel-button { border-style: none; background-color: transparent; cursor: pointer; - border-radius: lib2.$border-radius-sm; - color: lib2.$color-blue-50; - padding: lib2.$spacing-sm 0; + border-radius: mp.$border-radius-sm; + color: mp.$color-blue-50; + padding: mp.$spacing-sm 0; &:hover { - color: lib2.$color-link-hover; + color: mp.$color-link-hover; } &:focus { - color: lib2.$color-blue-50; + color: mp.$color-blue-50; } } } diff --git a/frontend/src/components/dashboard/aliases/Alias.module.scss b/frontend/src/components/dashboard/aliases/Alias.module.scss index a538c181b2..01604c88c1 100644 --- a/frontend/src/components/dashboard/aliases/Alias.module.scss +++ b/frontend/src/components/dashboard/aliases/Alias.module.scss @@ -1,10 +1,10 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; $toggleTransitionDuration: 200ms; .alias-card { - border-radius: lib.$border-radius-md; + border-radius: mp.$border-radius-md; padding: 0; transition: background-color $toggleTransitionDuration ease, @@ -13,25 +13,25 @@ $toggleTransitionDuration: 200ms; background-position: top; &.is-enabled { - box-shadow: lib.$box-shadow-sm; - background-color: lib.$color-white; + box-shadow: mp.$box-shadow-sm; + background-color: mp.$color-white; } &.is-disabled { - background-color: rgba(lib.$color-white, 0.5); + background-color: rgba(mp.$color-white, 0.5); } } .main-data { display: flex; - gap: lib.$spacing-xs; - padding: lib.$spacing-md; + gap: mp.$spacing-xs; + padding: mp.$spacing-md; } .controls { - min-width: lib.$content-xs; + min-width: mp.$content-xs; display: flex; - gap: lib.$spacing-xs; + gap: mp.$spacing-xs; align-items: center; flex-wrap: wrap; } @@ -47,19 +47,19 @@ $trackerRemovalIndicatorWidth: 20px; color: tokens.$color-grey-30; display: flex; align-items: center; - padding: 0 lib.$spacing-xs; + padding: 0 mp.$spacing-xs; } $arrowWidth: 6px; .tracker-removal-indicator-tooltip { position: absolute; - box-shadow: lib.$box-shadow-sm; - padding: lib.$spacing-md; - background-color: lib.$color-white; - border-radius: lib.$border-radius-md; - width: lib.$content-xs; - top: calc(-50% - lib.$spacing-md / 2); - left: $trackerRemovalIndicatorWidth + lib.$spacing-sm + $arrowWidth; + box-shadow: mp.$box-shadow-sm; + padding: mp.$spacing-md; + background-color: mp.$color-white; + border-radius: mp.$border-radius-md; + width: mp.$content-xs; + top: calc(-50% - mp.$spacing-md / 2); + left: $trackerRemovalIndicatorWidth + mp.$spacing-sm + $arrowWidth; // Overlap , which is relatively positioned: z-index: 1; @@ -71,7 +71,7 @@ $trackerRemovalIndicatorWidth: 20px; top: calc(50% - $arrowWidth); left: $arrowWidth * -1; transform: rotate(45deg); - background-color: lib.$color-white; + background-color: mp.$color-white; } } } @@ -81,7 +81,7 @@ $trackerRemovalIndicatorWidth: 20px; // Grows to push the mask address to the next line when present, // but not so much to push itself down below the // `.tracker-removal-indicator-wrapper` if present: - width: calc(100% - $trackerRemovalIndicatorWidth - lib.$spacing-xs); + width: calc(100% - $trackerRemovalIndicatorWidth - mp.$spacing-xs); } .copy-controls { @@ -95,14 +95,14 @@ $trackerRemovalIndicatorWidth: 20px; width: 100%; .copy-button { - @include lib.text-body-lg; + @include mp.text-body-lg; display: flex; align-items: center; background-color: transparent; border: 2px solid transparent; - border-radius: lib.$border-radius-md; + border-radius: mp.$border-radius-md; cursor: pointer; - padding: 0 lib.$spacing-sm; + padding: 0 mp.$spacing-sm; width: 100%; flex-basis: 0; @@ -111,12 +111,12 @@ $trackerRemovalIndicatorWidth: 20px; // relative positioning), Protocol's default outline isn't visible by // default. Thus, we add a focus style using a border, and then remove the // remnants of the outline that are made visible when there's a border. - border-color: lib.$color-blue-50; + border-color: mp.$color-blue-50; outline: none; } .address { - font-family: lib.$font-stack-firefox; + font-family: mp.$font-stack-firefox; overflow: hidden; text-overflow: ellipsis; display: inline-block; @@ -126,13 +126,13 @@ $trackerRemovalIndicatorWidth: 20px; } .copy-icon { - padding: 0 lib.$spacing-sm; + padding: 0 mp.$spacing-sm; opacity: 0.5; display: inline-block; flex-grow: 2; flex-shrink: 0; - max-width: lib.$layout-sm; - color: lib.$color-light-gray-90; + max-width: mp.$layout-sm; + color: mp.$color-light-gray-90; } &:hover { @@ -150,16 +150,16 @@ $trackerRemovalIndicatorWidth: 20px; opacity: 0; pointer-events: none; transition: opacity 2s; - background-color: lib.$color-violet-30; - color: lib.$color-white; - border-radius: lib.$border-radius-md; - padding: 0 lib.$spacing-xs; + background-color: mp.$color-violet-30; + color: mp.$color-white; + border-radius: mp.$border-radius-md; + padding: 0 mp.$spacing-xs; // By allowing this to overlap other elements, // we don't need to reserve empty space for it. // Otherwise, this empty space would push the // .expand-toggle out of the card on small screens: position: absolute; - left: lib.$spacing-xs; + left: mp.$spacing-xs; top: 0; &.is-shown { @@ -176,27 +176,27 @@ $trackerRemovalIndicatorWidth: 20px; align-items: center; flex: 1 0 auto; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { display: flex; } .block-level-label { - @include lib.text-body-sm; + @include mp.text-body-sm; border: 2px solid transparent; - border-radius: lib.$border-radius-sm; - padding: lib.$spacing-sm; + border-radius: mp.$border-radius-sm; + padding: mp.$spacing-sm; font-weight: 600; flex: 1 0 auto; text-align: center; &.block-level-all-label { - color: lib.$color-light-gray-70; - border-color: lib.$color-light-gray-40; + color: mp.$color-light-gray-70; + border-color: mp.$color-light-gray-40; } &.block-level-promotional-label { - color: lib.$color-yellow-50; - border-color: lib.$color-yellow-40; + color: mp.$color-yellow-50; + border-color: mp.$color-yellow-40; } } } @@ -209,7 +209,7 @@ $trackerRemovalIndicatorWidth: 20px; display: flex; } - @media screen and #{lib.$mq-lg} { + @media screen and #{mp.$mq-lg} { // I've grouped these together under the media query to emphasise that they // switch visibility at the same time: // stylelint-disable-next-line no-duplicate-selectors @@ -231,24 +231,24 @@ $trackerRemovalIndicatorWidth: 20px; $arrowWidth: 6px; .tooltip { - @include lib.text-body-sm; + @include mp.text-body-sm; position: absolute; - width: lib.$content-sm; - max-width: calc(100% - 2 * lib.$spacing-xs); - top: calc(100% + $arrowWidth + lib.$spacing-xs); - right: lib.$spacing-xs; - background-color: lib.$color-light-gray-10; - border: 1px solid lib.$color-light-gray-30; - box-shadow: lib.$box-shadow-sm; + width: mp.$content-sm; + max-width: calc(100% - 2 * mp.$spacing-xs); + top: calc(100% + $arrowWidth + mp.$spacing-xs); + right: mp.$spacing-xs; + background-color: mp.$color-light-gray-10; + border: 1px solid mp.$color-light-gray-30; + box-shadow: mp.$box-shadow-sm; display: flex; flex-direction: column; - gap: lib.$spacing-sm; - padding: lib.$spacing-sm lib.$spacing-md; - border-radius: lib.$border-radius-sm; + gap: mp.$spacing-sm; + padding: mp.$spacing-sm mp.$spacing-md; + border-radius: mp.$border-radius-sm; // Prevent other .stat-wrapper elements from overlapping this tooltip: z-index: 2; - @media screen and #{lib.$mq-lg} { + @media screen and #{mp.$mq-lg} { // The wrapper doesn't span the full width on large screens, // so limiting the tooltip to its wrapper's size makes it too thin: max-width: unset; @@ -260,11 +260,11 @@ $trackerRemovalIndicatorWidth: 20px; width: 2 * $arrowWidth; position: absolute; top: -1 * $arrowWidth; - right: lib.$spacing-xl; + right: mp.$spacing-xl; transform: rotate(45deg); - background-color: lib.$color-light-gray-10; - border-top: 1px solid lib.$color-light-gray-30; - border-left: 1px solid lib.$color-light-gray-30; + background-color: mp.$color-light-gray-10; + border-top: 1px solid mp.$color-light-gray-30; + border-left: 1px solid mp.$color-light-gray-30; } } } @@ -285,17 +285,17 @@ $trackerRemovalIndicatorWidth: 20px; flex-direction: column; align-items: center; justify-content: center; - padding: 0 lib.$spacing-md; + padding: 0 mp.$spacing-md; transition: opacity $toggleTransitionDuration ease; .number { - @include lib.text-body-xl; - font-family: lib.$font-stack-firefox; + @include mp.text-body-xl; + font-family: mp.$font-stack-firefox; font-weight: 700; } .label { - @include lib.text-body-sm; + @include mp.text-body-sm; line-height: 1.2; height: 25px; display: flex; @@ -330,9 +330,9 @@ $trackerRemovalIndicatorWidth: 20px; width: 100%; display: flex; flex-direction: row-reverse; - padding: lib.$spacing-sm lib.$spacing-md; - border-bottom: 1px solid lib.$color-light-gray-20; - color: lib.$color-marketing-gray-99; + padding: mp.$spacing-sm mp.$spacing-md; + border-bottom: 1px solid mp.$color-light-gray-20; + color: mp.$color-marketing-gray-99; .label { flex: 1 0 auto; @@ -354,9 +354,9 @@ $trackerRemovalIndicatorWidth: 20px; button { background-color: transparent; border-style: none; - padding: lib.$spacing-sm; - border-radius: lib.$border-radius-sm; - color: lib.$color-dark-gray-50; + padding: mp.$spacing-sm; + border-radius: mp.$border-radius-sm; + color: mp.$color-dark-gray-50; cursor: pointer; svg { @@ -379,25 +379,25 @@ $trackerRemovalIndicatorWidth: 20px; padding 200ms; display: flex; flex-direction: column; - gap: lib.$spacing-md; + gap: mp.$spacing-md; // Make sure hidden elements are unfocusable: visibility: hidden; .is-expanded & { // An arbitrary high value that allows it to expand to its full height: max-height: 1000vh; - border-color: lib.$color-light-gray-20; - padding: lib.$spacing-sm 0; + border-color: mp.$color-light-gray-20; + padding: mp.$spacing-sm 0; visibility: visible; } .row { display: flex; flex-direction: column; - gap: lib.$spacing-md; - padding-inline: lib.$spacing-md; - padding-bottom: lib.$spacing-md; - border-bottom: 1px solid lib.$color-light-gray-20; + gap: mp.$spacing-md; + padding-inline: mp.$spacing-md; + padding-bottom: mp.$spacing-md; + border-bottom: 1px solid mp.$color-light-gray-20; &:last-child { border-bottom-style: none; @@ -407,21 +407,21 @@ $trackerRemovalIndicatorWidth: 20px; dl { flex-grow: 2; display: flex; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; flex-direction: column; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; - gap: lib.$spacing-xl; + gap: mp.$spacing-xl; } dt { - @include lib.text-body-xs; - color: lib.$color-dark-gray-05; + @include mp.text-body-xs; + color: mp.$color-dark-gray-05; } } - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; .metadata { @@ -429,7 +429,7 @@ $trackerRemovalIndicatorWidth: 20px; background-repeat: no-repeat; background-position: left center; background-size: $metadataIconSize $metadataIconSize; - padding-left: calc($metadataIconSize + lib.$spacing-md); + padding-left: calc($metadataIconSize + mp.$spacing-md); } .forward-target { diff --git a/frontend/src/components/dashboard/aliases/AliasDeletionButton.module.scss b/frontend/src/components/dashboard/aliases/AliasDeletionButton.module.scss index f3ed5a82e9..c22fb7ae30 100644 --- a/frontend/src/components/dashboard/aliases/AliasDeletionButton.module.scss +++ b/frontend/src/components/dashboard/aliases/AliasDeletionButton.module.scss @@ -1,6 +1,6 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; -@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as lib2; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; .deletion-button { display: inline-flex; @@ -8,26 +8,26 @@ justify-content: center; cursor: pointer; background-color: transparent; - padding: lib.$spacing-sm lib.$spacing-md; - border-radius: lib.$border-radius-sm; + padding: mp.$spacing-sm mp.$spacing-md; + border-radius: mp.$border-radius-sm; font-weight: 600; border: 2px solid transparent; // Keep some space for the focus outline margin: 2px; - color: lib.$color-red-60; + color: mp.$color-red-60; line-height: 1.25; - @include lib.text-body-md; + @include mp.text-body-md; &:hover { - background-color: lib.$color-red-70; - color: lib.$color-white; + background-color: mp.$color-red-70; + color: mp.$color-white; } } .underlay { position: fixed; - background-color: rgba(lib.$color-black, 0.4); + background-color: rgba(mp.$color-black, 0.4); top: 0; bottom: 0; left: 0; @@ -37,43 +37,43 @@ justify-content: center; .dialog-wrapper { - background: lib.$color-white; - width: calc((#{lib.$content-sm} + #{lib.$content-md}) / 2); // 560px + background: mp.$color-white; + width: calc((#{mp.$content-sm} + #{mp.$content-md}) / 2); // 560px max-width: 90%; - border-radius: lib.$border-radius-md; - box-shadow: lib.$box-shadow-sm; - padding: lib.$spacing-md; + border-radius: mp.$border-radius-md; + box-shadow: mp.$box-shadow-sm; + padding: mp.$spacing-md; overflow-wrap: break-word; .hero { - @include lib.text-title-3xs; - font-family: lib.$font-stack-firefox; + @include mp.text-title-3xs; + font-family: mp.$font-stack-firefox; font-weight: 700; text-align: center; - border-radius: lib.$border-radius-md; - background-color: lib.$color-light-gray-10; - padding: lib.$spacing-lg lib.$spacing-md; + border-radius: mp.$border-radius-md; + background-color: mp.$color-light-gray-10; + padding: mp.$spacing-lg mp.$spacing-md; } .alias-to-delete { - font-family: lib.$font-stack-firefox; + font-family: mp.$font-stack-firefox; display: block; text-align: center; - padding: lib.$spacing-lg lib.$spacing-lg lib.$spacing-sm; + padding: mp.$spacing-lg mp.$spacing-lg mp.$spacing-sm; } .permanence-warning { - @include lib.text-body-sm; + @include mp.text-body-sm; text-align: center; - padding: lib.$spacing-sm lib.$spacing-lg; - color: lib.$color-dark-gray-70; + padding: mp.$spacing-sm mp.$spacing-lg; + color: mp.$color-dark-gray-70; } .usage-warning { - @include lib.text-body-sm; + @include mp.text-body-sm; text-align: center; - padding: lib.$spacing-sm lib.$spacing-lg lib.$spacing-lg; - color: lib.$color-red-50; + padding: mp.$spacing-sm mp.$spacing-lg mp.$spacing-lg; + color: mp.$color-red-50; } .confirm { @@ -82,14 +82,14 @@ align-items: center; label { - background-color: lib.$color-light-gray-10; - border-radius: lib.$border-radius-md; - margin-bottom: lib.$spacing-md; - padding: lib.$spacing-md; + background-color: mp.$color-light-gray-10; + border-radius: mp.$border-radius-md; + margin-bottom: mp.$spacing-md; + padding: mp.$spacing-md; cursor: pointer; input { - margin-right: lib.$spacing-sm; + margin-right: mp.$spacing-sm; } } @@ -98,22 +98,22 @@ display: flex; align-items: center; justify-content: space-between; - padding-top: lib.$spacing-xl; + padding-top: mp.$spacing-xl; .cancel-button { border-style: none; background-color: transparent; cursor: pointer; - border-radius: lib.$border-radius-sm; - color: lib.$color-blue-50; - padding: lib.$spacing-sm lib.$spacing-md; + border-radius: mp.$border-radius-sm; + color: mp.$color-blue-50; + padding: mp.$spacing-sm mp.$spacing-md; &:hover { - color: lib.$color-link-hover; + color: mp.$color-link-hover; } &:focus { - color: lib.$color-blue-50; + color: mp.$color-blue-50; } } } diff --git a/frontend/src/components/dashboard/aliases/AliasDeletionButtonPermanent.module.scss b/frontend/src/components/dashboard/aliases/AliasDeletionButtonPermanent.module.scss index be757a94b0..a5aa8a8126 100644 --- a/frontend/src/components/dashboard/aliases/AliasDeletionButtonPermanent.module.scss +++ b/frontend/src/components/dashboard/aliases/AliasDeletionButtonPermanent.module.scss @@ -1,6 +1,6 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; -@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as lib2; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; .deletion-button { display: inline-flex; @@ -8,26 +8,26 @@ justify-content: center; cursor: pointer; background-color: transparent; - padding: lib.$spacing-sm lib.$spacing-md; - border-radius: lib.$border-radius-sm; + padding: mp.$spacing-sm mp.$spacing-md; + border-radius: mp.$border-radius-sm; font-weight: 600; border: 2px solid transparent; // Keep some space for the focus outline margin: 2px; - color: lib.$color-red-60; + color: mp.$color-red-60; line-height: 1.25; - @include lib.text-body-md; + @include mp.text-body-md; &:hover { - background-color: lib.$color-red-70; - color: lib.$color-white; + background-color: mp.$color-red-70; + color: mp.$color-white; } } .underlay { position: fixed; - background-color: rgba(lib.$color-black, 0.4); + background-color: rgba(mp.$color-black, 0.4); top: 0; bottom: 0; left: 0; @@ -37,51 +37,51 @@ justify-content: center; .dialog-wrapper { - background: lib.$color-white; - width: calc((#{lib.$content-sm} + #{lib.$content-md}) / 2); // 560px + background: mp.$color-white; + width: calc((#{mp.$content-sm} + #{mp.$content-md}) / 2); // 560px max-width: 90%; - border-radius: lib.$border-radius-md; - box-shadow: lib.$box-shadow-sm; - padding: lib.$spacing-md; + border-radius: mp.$border-radius-md; + box-shadow: mp.$box-shadow-sm; + padding: mp.$spacing-md; overflow-wrap: break-word; hr { border: 1px solid tokens.$color-grey-10; - margin-top: lib.$spacing-2xl; + margin-top: mp.$spacing-2xl; } .hero { - @include lib.text-title-3xs; - font-family: lib.$font-stack-firefox; + @include mp.text-title-3xs; + font-family: mp.$font-stack-firefox; font-weight: 700; text-align: center; - border-radius: lib.$border-radius-md; - background-color: lib.$color-light-gray-10; - padding: lib.$spacing-lg lib.$spacing-md; + border-radius: mp.$border-radius-md; + background-color: mp.$color-light-gray-10; + padding: mp.$spacing-lg mp.$spacing-md; } .alias-to-delete { - @include lib.text-title-3xs; + @include mp.text-title-3xs; font-weight: 700; - font-family: lib.$font-stack-firefox; + font-family: mp.$font-stack-firefox; display: block; text-align: center; - padding: lib.$spacing-lg lib.$spacing-lg lib.$spacing-sm; + padding: mp.$spacing-lg mp.$spacing-lg mp.$spacing-sm; color: tokens.$color-grey-50; - margin-bottom: lib.$spacing-sm; + margin-bottom: mp.$spacing-sm; user-select: auto; -webkit-user-select: auto; // Fixes overflow breaking in iOS devices (MPP-3686) } .permanence-warning { - @include lib.text-body-sm; + @include mp.text-body-sm; font-weight: 600; text-align: center; - padding: lib.$spacing-sm lib.$spacing-lg; + padding: mp.$spacing-sm mp.$spacing-lg; color: tokens.$color-grey-50; - margin: 0 auto lib.$spacing-2xl auto; + margin: 0 auto mp.$spacing-2xl auto; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { width: 75%; } } @@ -91,24 +91,24 @@ display: flex; align-items: center; justify-content: space-between; - padding-top: lib.$spacing-xl; + padding-top: mp.$spacing-xl; .delete-btn { - width: calc(lib.$layout-xl + lib.$layout-lg); + width: calc(mp.$layout-xl + mp.$layout-lg); } .cancel-button { border-style: none; background-color: transparent; cursor: pointer; - border-radius: lib.$border-radius-sm; - color: lib.$color-blue-50; - padding: lib.$spacing-sm lib.$spacing-md; + border-radius: mp.$border-radius-sm; + color: mp.$color-blue-50; + padding: mp.$spacing-sm mp.$spacing-md; &:hover { - color: lib.$color-link-hover; + color: mp.$color-link-hover; } &:focus { - color: lib.$color-blue-50; + color: mp.$color-blue-50; } } } @@ -116,21 +116,21 @@ .warning-wrapper { position: relative; display: flex; - border-left: lib.$border-radius-xs solid color tokens.$color-error; + border-left: mp.$border-radius-xs solid color tokens.$color-error; align-items: center; - padding-left: lib.$spacing-sm; + padding-left: mp.$spacing-sm; background-color: #fff; - gap: lib.$spacing-md; + gap: mp.$spacing-md; width: 90%; margin: 0 auto; .left-content { display: flex; align-self: self-start; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; p { - @include lib.text-body-sm; + @include mp.text-body-sm; color: tokens.$color-grey-50; } } diff --git a/frontend/src/components/dashboard/aliases/AliasList.module.scss b/frontend/src/components/dashboard/aliases/AliasList.module.scss index 49d5e0f3ef..9f66d4736a 100644 --- a/frontend/src/components/dashboard/aliases/AliasList.module.scss +++ b/frontend/src/components/dashboard/aliases/AliasList.module.scss @@ -1,6 +1,6 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as lib2; -@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; // Resolves mobile extra spacing issues for 2nd step of updated free onboarding (MPP-3597). .alias-list-container { @@ -10,12 +10,12 @@ .controls { display: grid; grid-template-columns: auto 1fr auto; - row-gap: lib2.$spacing-md; + row-gap: mp.$spacing-md; grid-template-areas: "stringFilterToggle categoryFilter newAliasButton" "stringFilter stringFilter stringFilter"; align-items: center; - padding: lib2.$spacing-md 0; + padding: mp.$spacing-md 0; // The focus indicators of contained elements can overflow: overflow: visible; @@ -35,7 +35,7 @@ grid-area: newAliasButton; } - @media screen and #{lib2.$mq-md} { + @media screen and #{mp.$mq-md} { grid-template-areas: "stringFilter categoryFilter newAliasButton"; .string-filter-toggle { @@ -45,7 +45,7 @@ } .alias-card-wrapper { - padding-top: lib2.$spacing-lg; + padding-top: mp.$spacing-lg; list-style-type: none; &:first-child { @@ -55,10 +55,10 @@ .string-filter-toggle { background-color: transparent; - color: lib2.$color-dark-gray-50; + color: mp.$color-dark-gray-50; border-radius: 100%; border-style: none; - padding: lib2.$spacing-sm; + padding: mp.$spacing-sm; cursor: pointer; display: flex; align-items: center; @@ -66,8 +66,8 @@ &.active, &:hover { - background-color: lib2.$color-white; - color: lib2.$color-blue-50; + background-color: mp.$color-white; + color: mp.$color-blue-50; } img { @@ -87,23 +87,23 @@ display: block; } - @media screen and #{lib2.$mq-md} { + @media screen and #{mp.$mq-md} { display: block; } input { - @include lib.form-input; + @include mp_forms.form-input; margin: 0; background-image: url("/icons/search-blue.svg"); background-repeat: no-repeat; - background-position: left lib2.$spacing-sm top 50%; + background-position: left mp.$spacing-sm top 50%; // The search icon is 20px wide, surrounded by padding: - padding-left: calc(lib2.$spacing-sm + 20px + lib2.$spacing-sm); + padding-left: calc(mp.$spacing-sm + 20px + mp.$spacing-sm); // Leave some space on the right for `.match-count` - padding-right: calc(lib2.$spacing-sm + 30px); + padding-right: calc(mp.$spacing-sm + 30px); width: 100%; - @media screen and #{lib2.$mq-md} { + @media screen and #{mp.$mq-md} { width: auto; } } @@ -113,7 +113,7 @@ transition: opacity 200ms; position: absolute; transform: translateX(-100%); - padding: lib2.$spacing-sm; + padding: mp.$spacing-sm; } // Show the counter when the search field is focused // or has a value: @@ -121,9 +121,9 @@ input:focus + .match-count { opacity: 1; // Make sure input in the input field isn't shown in the background - background-color: lib2.$color-white; + background-color: mp.$color-white; // Then give it the same borders as the input it's covering... - @include lib.form-input; + @include mp_forms.form-input; // ...except where it intersects with the input: border-left: 0 solid transparent; border-top-left-radius: 0; @@ -132,27 +132,27 @@ } .category-filter { - padding-left: lib2.$spacing-xs; + padding-left: mp.$spacing-xs; - @media screen and #{lib2.$mq-md} { - padding-left: lib2.$spacing-md; + @media screen and #{mp.$mq-md} { + padding-left: mp.$spacing-md; } } .empty-state-message { - background-color: lib2.$color-white; - border-radius: lib2.$border-radius-md; - padding: lib2.$spacing-lg; + background-color: mp.$color-white; + border-radius: mp.$border-radius-md; + padding: mp.$spacing-lg; .clear-filters-button { background-color: transparent; border-style: none; - color: lib2.$color-blue-50; + color: mp.$color-blue-50; text-decoration: underline; cursor: pointer; &:hover { - color: lib2.$color-blue-40; + color: mp.$color-blue-40; } } } diff --git a/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss b/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss index 3bac616d41..f71f45a001 100644 --- a/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss +++ b/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss @@ -1,5 +1,5 @@ @use "~@mozilla-protocol/core/protocol/css/includes/tokens/dist/index" as dist; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; $stopLabelHeight: 2rem; $iconHeight: 50px; @@ -13,32 +13,32 @@ $trackLineHeight: 4px; flex-direction: column; align-items: center; touch-action: none; - padding: 0 lib.$spacing-md; + padding: 0 mp.$spacing-md; width: 100%; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { --thumbDiameter: 24px; } - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; - gap: lib.$spacing-xl; - padding: 0 lib.$spacing-lg; + gap: mp.$spacing-xl; + padding: 0 mp.$spacing-lg; } - @media screen and #{lib.$mq-lg} { - gap: lib.$layout-2xl; + @media screen and #{mp.$mq-lg} { + gap: mp.$layout-2xl; } .control { width: 100%; - max-width: lib.$content-xs; + max-width: mp.$content-xs; display: flex; flex-direction: column; align-items: center; - padding-left: lib.$spacing-md; + padding-left: mp.$spacing-md; .slider-label { - padding-bottom: lib.$spacing-md; + padding-bottom: mp.$spacing-md; display: inline-block; } @@ -70,7 +70,7 @@ $trackLineHeight: 4px; .track-line { position: absolute; - background-color: lib.$color-light-gray-20; + background-color: mp.$color-light-gray-20; height: $trackLineHeight; top: calc(var(--trackLineOffset) - #{$iconHeight}); width: 100%; @@ -79,10 +79,10 @@ $trackLineHeight: 4px; &:focus-within { .track-line, .track-stop { - background-color: lib.$color-violet-05; + background-color: mp.$color-violet-05; } .track-stop p { - color: lib.$color-violet-90; + color: mp.$color-violet-90; } } @@ -100,15 +100,15 @@ $trackLineHeight: 4px; width: var(--thumbDiameter); height: var(--thumbDiameter); border-radius: 50%; - background-color: lib.$color-violet-20; - border: 4px solid lib.$color-violet-50; - box-shadow: lib.$box-shadow-sm; + background-color: mp.$color-violet-20; + border: 4px solid mp.$color-violet-50; + box-shadow: mp.$box-shadow-sm; &.is-focused { // The alpha value makes sure the lock icon is still visible for // free users when the thumb is placed on the "Promotionals" level: - background-color: rgba(lib.$color-purple-30, 0.5); - border-color: lib.$color-purple-60; + background-color: rgba(mp.$color-purple-30, 0.5); + border-color: mp.$color-purple-60; } &.is-dragging { // This class can be used if we want to style the thumb @@ -122,22 +122,22 @@ $trackLineHeight: 4px; width: var(--thumbDiameter); height: var(--thumbDiameter); border-radius: 50%; - background-color: lib.$color-light-gray-20; + background-color: mp.$color-light-gray-20; position: absolute; display: flex; align-items: center; justify-content: center; - padding: lib.$spacing-sm; + padding: mp.$spacing-sm; &:hover { - background-color: lib.$color-purple-10; + background-color: mp.$color-purple-10; img { filter: grayscale(0%); } p { - color: lib.$color-purple-30; + color: mp.$color-purple-30; } } @@ -147,7 +147,7 @@ $trackLineHeight: 4px; // the slider thumb), we set a negative top margin of its own height, // and the height of the thumb: margin-top: calc(-1 * #{$iconHeight} - var(--thumbDiameter)); - padding-bottom: lib.$spacing-sm; + padding-bottom: mp.$spacing-sm; // The image should not take up space within the track stop, // so that the lock icon from .track-stop-promotional can be properly // centered: @@ -155,15 +155,15 @@ $trackLineHeight: 4px; } p { - @include lib.text-body-sm; - color: lib.$color-dark-gray-05; + @include mp.text-body-sm; + color: mp.$color-dark-gray-05; font-weight: 700; position: absolute; // To position the track sop label below the track stops (which are as // high as the slider thumb), we place it at a distance of the thumb // from the top, and some spacing so that it's not glued to the track // stop: - top: calc(var(--thumbDiameter) + #{lib.$spacing-xs}); + top: calc(var(--thumbDiameter) + #{mp.$spacing-xs}); height: $stopLabelHeight; word-break: keep-all; } @@ -173,7 +173,7 @@ $trackLineHeight: 4px; filter: grayscale(0%); } p { - color: lib.$color-black; + color: mp.$color-black; } } @@ -198,7 +198,7 @@ $trackLineHeight: 4px; } } - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { padding-top: 0; .track-stop { @@ -215,14 +215,14 @@ $trackLineHeight: 4px; .value-description { $arrowEdgeLength: 8px; margin-top: $arrowEdgeLength; - background-color: lib.$color-light-gray-10; - padding: lib.$spacing-md lib.$spacing-xl; - border-radius: lib.$border-radius-md; + background-color: mp.$color-light-gray-10; + padding: mp.$spacing-md mp.$spacing-xl; + border-radius: mp.$border-radius-md; position: relative; width: 100%; &::after { - background-color: lib.$color-light-gray-10; + background-color: mp.$color-light-gray-10; height: 2 * $arrowEdgeLength; width: 2 * $arrowEdgeLength; transform: rotate(45deg); @@ -233,15 +233,15 @@ $trackLineHeight: 4px; } .value-description-content { - width: lib.$content-xs; + width: mp.$content-xs; max-width: 100%; display: flex; flex-direction: column; - gap: lib.$spacing-xs; + gap: mp.$spacing-xs; a { display: inline-block; - color: lib.$color-blue-50; + color: mp.$color-blue-50; font-weight: 500; &:hover { @@ -252,11 +252,11 @@ $trackLineHeight: 4px; .locked-message { display: flex; align-items: center; - gap: lib.$spacing-xs; + gap: mp.$spacing-xs; font-weight: 600; .lock-icon { - color: lib.$color-light-gray-70; + color: mp.$color-light-gray-70; } } } @@ -265,11 +265,11 @@ $trackLineHeight: 4px; display: none; } - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { display: flex; align-items: center; justify-content: flex-end; - gap: lib.$spacing-md; + gap: mp.$spacing-md; background-color: transparent; // The content changes depending on the selected blocking mode, // so if the height would be based on the content, switching blocking modes @@ -299,7 +299,7 @@ $trackLineHeight: 4px; position: absolute; // On small screens, `.track-stop` has a top padding of `$spacing-sm` // before the track stop begins: - top: lib.$spacing-sm; + top: mp.$spacing-sm; left: 33%; width: 33%; // This is like the regular .track's bottom padding, but with @@ -312,41 +312,41 @@ $trackLineHeight: 4px; border-style: none; cursor: pointer; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { top: 0; } .track-stop-promotional { - color: lib.$color-light-gray-70; + color: mp.$color-light-gray-70; border-style: none; &:hover { // The standard background colour, because this can't be selected // by a free user: - background-color: lib.$color-light-gray-20; + background-color: mp.$color-light-gray-20; } p { - color: lib.$color-light-gray-70; + color: mp.$color-light-gray-70; text-align: center; .premium-only-marker { - @include lib.text-body-xs; - color: lib.$color-purple-50; + @include mp.text-body-xs; + color: mp.$color-purple-50; } } &.is-selected { p, .lock-icon { - color: lib.$color-purple-50; + color: mp.$color-purple-50; } } } &:hover { p { - color: lib.$color-purple-30; + color: mp.$color-purple-30; } } @@ -354,7 +354,7 @@ $trackLineHeight: 4px; outline: none; .track-stop { - outline: 2px solid lib.$color-blue-50; + outline: 2px solid mp.$color-blue-50; } } } @@ -372,29 +372,29 @@ $trackLineHeight: 4px; justify-content: center; .upgrade-tooltip { - background-color: lib.$color-white; - box-shadow: lib.$box-shadow-sm; + background-color: mp.$color-white; + box-shadow: mp.$box-shadow-sm; display: flex; - padding: lib.$spacing-xl; - gap: lib.$spacing-lg; - width: lib.$content-md; - max-width: calc(100% - lib.$spacing-xl); - border-radius: lib.$border-radius-sm; + padding: mp.$spacing-xl; + gap: mp.$spacing-lg; + width: mp.$content-md; + max-width: calc(100% - mp.$spacing-xl); + border-radius: mp.$border-radius-sm; .close-button { position: absolute; - top: lib.$spacing-sm; - right: lib.$spacing-sm; + top: mp.$spacing-sm; + right: mp.$spacing-sm; padding: 0; background-color: transparent; border-style: none; - border-radius: lib.$border-radius-sm; + border-radius: mp.$border-radius-sm; } .promotionals-blocking-icon { display: none; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { display: inline-block; } } @@ -403,24 +403,24 @@ $trackLineHeight: 4px; display: flex; flex-direction: column; align-items: flex-start; - gap: lib.$spacing-xs; + gap: mp.$spacing-xs; b { display: flex; align-items: center; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; svg { - color: lib.$color-light-gray-70; + color: mp.$color-light-gray-70; } } a { - color: lib.$color-blue-50; + color: mp.$color-blue-50; // Add some padding to the focus outline, without affecting the CTA's // position: - margin: -1 * lib.$spacing-xs; - padding: lib.$spacing-xs; + margin: -1 * mp.$spacing-xs; + padding: mp.$spacing-xs; &:hover { text-decoration: underline; diff --git a/frontend/src/components/dashboard/aliases/CustomAddressGenerationModal.module.scss b/frontend/src/components/dashboard/aliases/CustomAddressGenerationModal.module.scss index 8c3388723f..60db6a8dcb 100644 --- a/frontend/src/components/dashboard/aliases/CustomAddressGenerationModal.module.scss +++ b/frontend/src/components/dashboard/aliases/CustomAddressGenerationModal.module.scss @@ -1,5 +1,5 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as lib2; -@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; @use "../../../styles/tokens"; .underlay { @@ -15,11 +15,11 @@ .dialog-wrapper { background: tokens.$color-white; - width: calc((#{lib2.$content-sm} + #{lib2.$content-md}) / 2); // 560px + width: calc((#{mp.$content-sm} + #{mp.$content-md}) / 2); // 560px max-width: 90%; - border-radius: lib2.$border-radius-md; - box-shadow: lib2.$box-shadow-sm; - padding: lib2.$spacing-md; + border-radius: mp.$border-radius-md; + box-shadow: mp.$box-shadow-sm; + padding: mp.$spacing-md; outline: none; position: relative; @@ -38,19 +38,18 @@ .invalid-address-msg { display: flex; position: absolute; - box-shadow: lib2.$box-shadow-sm; - border-radius: lib2.$border-radius-sm; - border-left: lib2.$border-radius-md solid color tokens.$color-error; + box-shadow: mp.$box-shadow-sm; + border-radius: mp.$border-radius-sm; + border-left: mp.$border-radius-md solid color tokens.$color-error; align-items: center; - padding: lib2.$spacing-sm lib2.$spacing-md lib2.$spacing-sm - lib2.$spacing-sm; + padding: mp.$spacing-sm mp.$spacing-md mp.$spacing-sm mp.$spacing-sm; background-color: #fff; - gap: lib2.$spacing-md; + gap: mp.$spacing-md; .left-content { display: flex; align-self: self-start; - gap: lib2.$spacing-sm; + gap: mp.$spacing-sm; } .prefix-error-icon { @@ -60,7 +59,7 @@ .prefix-error-icon.close-button { background-color: transparent; border-style: none; - border-radius: lib2.$border-radius-sm; + border-radius: mp.$border-radius-sm; cursor: pointer; color: tokens.$color-grey-30; @@ -72,32 +71,32 @@ } .hero { - @include lib2.text-title-3xs; - font-family: lib2.$font-stack-firefox; + @include mp.text-title-3xs; + font-family: mp.$font-stack-firefox; font-weight: 700; text-align: center; - border-radius: lib2.$border-radius-md; - background-color: lib2.$color-light-gray-10; - padding: lib2.$spacing-md lib2.$spacing-sm; + border-radius: mp.$border-radius-md; + background-color: mp.$color-light-gray-10; + padding: mp.$spacing-md mp.$spacing-sm; - @media screen and #{lib2.$mq-sm} { - padding: lib2.$spacing-lg lib2.$spacing-md; + @media screen and #{mp.$mq-sm} { + padding: mp.$spacing-lg mp.$spacing-md; } } .tip { display: flex; - gap: lib2.$spacing-sm; + gap: mp.$spacing-sm; word-break: break-word; border-left: 2px solid tokens.$color-violet-30; margin: 0 auto; width: 85%; - padding-left: lib2.$spacing-sm; - font-family: lib2.$font-stack-base; + padding-left: mp.$spacing-sm; + font-family: mp.$font-stack-base; font-weight: 400; color: tokens.$color-grey-50; - @include lib2.text-body-sm; + @include mp.text-body-sm; .tip-icon { // There is limited space on the mask creation modal on mobile. @@ -105,7 +104,7 @@ display: none; color: tokens.$color-pink-30; - @media screen and #{lib2.$mq-sm} { + @media screen and #{mp.$mq-sm} { display: block; } @@ -116,11 +115,11 @@ } hr { - border: 1px solid lib2.$color-light-gray-20; - margin-top: lib2.$spacing-lg; + border: 1px solid mp.$color-light-gray-20; + margin-top: mp.$spacing-lg; - @media screen and #{lib2.$mq-sm} { - margin-top: lib2.$spacing-xl; + @media screen and #{mp.$mq-sm} { + margin-top: mp.$spacing-xl; } } @@ -128,16 +127,16 @@ text-align: center; .form-heading { - color: lib2.$color-dark-gray-70; - padding: lib2.$spacing-md 0; + color: mp.$color-dark-gray-70; + padding: mp.$spacing-md 0; - @media screen and #{lib2.$mq-sm} { - padding: lib2.$spacing-lg 0; + @media screen and #{mp.$mq-sm} { + padding: mp.$spacing-lg 0; } } .prefix { - font-family: lib2.$font-stack-firefox; + font-family: mp.$font-stack-firefox; color: tokens.$color-grey-50; width: 70%; margin: 0 auto; @@ -148,26 +147,26 @@ label { text-align: start; font-weight: 600; - margin-top: lib2.$spacing-xl; + margin-top: mp.$spacing-xl; } .profile-registered-domain-value { color: tokens.$color-blue-50; word-break: break-word; - margin-top: lib2.$spacing-md; - margin-bottom: lib2.$spacing-2xl; + margin-top: mp.$spacing-md; + margin-bottom: mp.$spacing-2xl; } input { - @include lib.form-input; + @include mp_forms.form-input; // Override form-input's margin: - margin: lib2.$spacing-sm 0 0 0; + margin: mp.$spacing-sm 0 0 0; font-weight: 400; - padding: lib2.$spacing-sm; + padding: mp.$spacing-sm; color: tokens.$color-grey-40; - font-family: lib2.$font-stack-base; + font-family: mp.$font-stack-base; - @include lib2.text-body-md; + @include mp.text-body-md; &.invalid-prefix:focus { outline: 5px solid tokens.$color-red-10; border: 2px solid tokens.$color-error; @@ -191,18 +190,18 @@ display: flex; text-align: left; align-items: center; - margin: 0 0 lib2.$spacing-sm lib2.$spacing-sm; - gap: lib2.$spacing-md; + margin: 0 0 mp.$spacing-sm mp.$spacing-sm; + gap: mp.$spacing-md; .error-icons { - min-width: lib2.$spacing-md; + min-width: mp.$spacing-md; flex: 0 0 auto; } .check-icon { color: tokens.$color-green-80; - width: calc(lib2.$spacing-md - lib2.$spacing-xs); - height: calc(lib2.$spacing-md - lib2.$spacing-xs); + width: calc(mp.$spacing-md - mp.$spacing-xs); + height: calc(mp.$spacing-md - mp.$spacing-xs); } .close-icon { @@ -213,13 +212,13 @@ .tooltip { display: initial; - @include lib2.text-body-sm; + @include mp.text-body-sm; $triangleWidth: 10px; position: absolute; background-color: tokens.$color-white; - box-shadow: lib2.$box-shadow-sm; - border-radius: lib2.$border-radius-sm; - padding: lib2.$spacing-md; + box-shadow: mp.$box-shadow-sm; + border-radius: mp.$border-radius-sm; + padding: mp.$spacing-md; width: 100%; margin-top: $triangleWidth; left: 0; @@ -245,9 +244,9 @@ } .suffix { - font-family: lib2.$font-stack-firefox; + font-family: mp.$font-stack-firefox; display: block; - padding-top: lib2.$spacing-xs; + padding-top: mp.$spacing-xs; } } @@ -255,8 +254,8 @@ display: flex; align-items: center; flex-direction: column; - gap: lib2.$spacing-sm; - margin-top: lib2.$spacing-md; + gap: mp.$spacing-sm; + margin-top: mp.$spacing-md; p { font-weight: 700; @@ -264,7 +263,7 @@ width: 100%; text-align: center; - @include lib2.text-body-lg; + @include mp.text-body-lg; } } @@ -272,21 +271,21 @@ display: flex; align-items: center; justify-content: center; - gap: lib2.$spacing-sm; - margin: lib2.$spacing-md lib2.$spacing-sm; - font-family: lib2.$font-stack-firefox; + gap: mp.$spacing-sm; + margin: mp.$spacing-md mp.$spacing-sm; + font-family: mp.$font-stack-firefox; color: tokens.$color-grey-50; font-weight: 600; - @media screen and #{lib2.$mq-sm} { - margin: lib2.$spacing-xl lib2.$spacing-sm; + @media screen and #{mp.$mq-sm} { + margin: mp.$spacing-xl mp.$spacing-sm; } input[type="checkbox"] { width: 20px; height: 20px; border: 2px solid tokens.$color-grey-40; - border-radius: lib2.$border-radius-sm; + border-radius: mp.$border-radius-sm; -webkit-appearance: none; } @@ -313,22 +312,22 @@ display: flex; align-items: center; justify-content: space-between; - padding-top: lib2.$spacing-lg; + padding-top: mp.$spacing-lg; - @media screen and #{lib2.$mq-sm} { - padding-top: lib2.$spacing-xl; + @media screen and #{mp.$mq-sm} { + padding-top: mp.$spacing-xl; } .end-button { border-style: none; background-color: transparent; cursor: pointer; - border-radius: lib2.$border-radius-sm; + border-radius: mp.$border-radius-sm; color: tokens.$color-blue-50; - padding: lib2.$spacing-sm 0; + padding: mp.$spacing-sm 0; &:hover { - color: lib2.$color-link-hover; + color: mp.$color-link-hover; } &:focus { diff --git a/frontend/src/components/dashboard/aliases/MaskCard.module.scss b/frontend/src/components/dashboard/aliases/MaskCard.module.scss index 9af045f7dd..49c8c565c0 100644 --- a/frontend/src/components/dashboard/aliases/MaskCard.module.scss +++ b/frontend/src/components/dashboard/aliases/MaskCard.module.scss @@ -1,15 +1,15 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; @use "../../../styles/tokens"; .card { background-color: tokens.$color-white; - border-radius: lib.$border-radius-md; + border-radius: mp.$border-radius-md; transition: box-shadow 200ms ease-in-out, opacity 200ms ease-in-out; &.is-enabled { - box-shadow: lib.$box-shadow-sm; + box-shadow: mp.$box-shadow-sm; } &:not(.is-enabled) { opacity: 0.7; @@ -19,8 +19,8 @@ .bar { display: flex; align-items: center; - gap: lib.$spacing-sm; - padding: lib.$spacing-sm; + gap: mp.$spacing-sm; + padding: mp.$spacing-sm; .summary { flex: 1 1 auto; @@ -32,15 +32,15 @@ flex-wrap: wrap; position: relative; - @media screen and #{lib.$mq-md} { - gap: lib.$spacing-sm; + @media screen and #{mp.$mq-md} { + gap: mp.$spacing-sm; flex-wrap: nowrap; } .label-editor-wrapper { - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { // Same as .summary's gap: - padding-inline-end: lib.$spacing-sm; + padding-inline-end: mp.$spacing-sm; border-right: 1px solid tokens.$color-grey-10; } } @@ -50,10 +50,10 @@ align-items: center; overflow: hidden; - @media screen and #{lib.$mq-md} { - gap: lib.$spacing-sm; + @media screen and #{mp.$mq-md} { + gap: mp.$spacing-sm; } - @media screen and (max-width: lib.$screen-xs) { + @media screen and (max-width: mp.$screen-xs) { overflow: hidden; } } @@ -61,13 +61,13 @@ .copy-button { display: flex; align-items: center; - gap: lib.$spacing-xs; + gap: mp.$spacing-xs; background-color: transparent; color: tokens.$color-blue-50; border-style: none; - font-family: lib.$font-stack-firefox; + font-family: mp.$font-stack-firefox; font-weight: 500; - border-radius: lib.$border-radius-sm; + border-radius: mp.$border-radius-sm; cursor: pointer; overflow: inherit; @@ -91,17 +91,17 @@ .copied-confirmation { background-color: tokens.$color-green-50; - padding: lib.$spacing-xs lib.$spacing-sm; - border-radius: lib.$border-radius-md; + padding: mp.$spacing-xs mp.$spacing-sm; + border-radius: mp.$border-radius-md; font-weight: 600; opacity: 1; pointer-events: none; z-index: 2; // Places copied label above promotions label - @media screen and (max-width: lib.$screen-md) { - @include lib.text-body-sm; + @media screen and (max-width: mp.$screen-md) { + @include mp.text-body-sm; } - @media screen and (max-width: lib.$content-sm) { + @media screen and (max-width: mp.$content-sm) { position: absolute; right: 0; } @@ -119,7 +119,7 @@ color: tokens.$color-grey-50; display: none; - @media screen and #{lib.$mq-lg} { + @media screen and #{mp.$mq-lg} { display: initial; } } @@ -134,12 +134,12 @@ border-style: none; cursor: pointer; color: tokens.$color-grey-40; - border-radius: lib.$border-radius-sm; - width: lib.$layout-sm; + border-radius: mp.$border-radius-sm; + width: mp.$layout-sm; z-index: 3; // Ensures that the button gets placed above the copied label (needed for long custom domains at viewport width ~ 780px) @media (any-pointer: coarse) { - width: lib.$layout-md; + width: mp.$layout-md; } &:hover { @@ -177,8 +177,8 @@ .details { border-top: 1px solid tokens.$color-grey-10; - @media screen and #{lib.$mq-md} { - padding: lib.$spacing-md lib.$spacing-lg; + @media screen and #{mp.$mq-md} { + padding: mp.$spacing-md mp.$spacing-lg; } } } @@ -188,16 +188,16 @@ transition: padding 200ms ease-in-out; .stats { - @media screen and (max-width: lib.$screen-md) { + @media screen and (max-width: mp.$screen-md) { display: flex; flex-direction: column; - padding-inline: lib.$spacing-md; + padding-inline: mp.$spacing-md; border-bottom: 1px solid tokens.$color-grey-10; .stat { display: flex; justify-content: space-between; - padding-block: lib.$spacing-sm; + padding-block: mp.$spacing-sm; &:not(:last-child) { border-bottom: 1px solid tokens.$color-grey-10; @@ -217,18 +217,18 @@ } dt { - @include lib.text-body-md; + @include mp.text-body-md; } dd { - @include lib.text-body-lg; + @include mp.text-body-lg; font-weight: 700; } } } - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { display: flex; - gap: lib.$spacing-md; + gap: mp.$spacing-md; justify-content: space-between; width: 100%; @@ -238,8 +238,8 @@ flex-direction: column-reverse; align-items: center; background-color: tokens.$color-grey-05; - padding: lib.$spacing-sm; - border-radius: lib.$border-radius-sm; + padding: mp.$spacing-sm; + border-radius: mp.$border-radius-sm; // De-emphasise stats for: // - blocked emails when a mask is not blocking emails, @@ -255,8 +255,8 @@ } dd { - @include lib.text-title-2xs; - font-family: lib.$font-stack-firefox; + @include mp.text-title-2xs; + font-family: mp.$font-stack-firefox; font-weight: 600; } } @@ -275,18 +275,18 @@ } } - @media screen and (max-width: lib.$screen-md) { + @media screen and (max-width: mp.$screen-md) { display: flex; flex-direction: column; - gap: lib.$spacing-md; - padding: lib.$spacing-lg; + gap: mp.$spacing-md; + padding: mp.$spacing-lg; $arrowWidth: 6px; .block-level-setting-description { - @include lib.text-body-sm; + @include mp.text-body-sm; background-color: tokens.$color-grey-05; - padding: lib.$spacing-lg; - border-radius: lib.$border-radius-md; + padding: mp.$spacing-lg; + border-radius: mp.$border-radius-md; position: relative; &::after { @@ -305,7 +305,7 @@ } &.is-blocking-none .block-level-setting-description::after { - left: calc(calc(100% / 6) - (lib.$spacing-md / 2)); + left: calc(calc(100% / 6) - (mp.$spacing-md / 2)); } &.is-blocking-promotionals .block-level-setting-description::after { @@ -313,17 +313,17 @@ } &.is-blocking-all .block-level-setting-description::after { - right: calc(calc(100% / 6) - (lib.$spacing-md / 2)); + right: calc(calc(100% / 6) - (mp.$spacing-md / 2)); } } - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { display: flex; align-items: center; - gap: lib.$spacing-2xl; - padding: lib.$spacing-lg; + gap: mp.$spacing-2xl; + padding: mp.$spacing-lg; .block-level-setting { - flex: 0 0 lib.$content-sm; + flex: 0 0 mp.$content-sm; } .block-level-setting-description { @@ -337,7 +337,7 @@ .block-level-control-wrapper { display: flex; flex-direction: column; - gap: lib.$spacing-md; + gap: mp.$spacing-md; .block-level-control-label { text-align: center; @@ -347,18 +347,18 @@ $toggle-border-radius: 40px; background-color: tokens.$color-grey-05; border-radius: $toggle-border-radius; - border: lib.$border-radius-xs solid tokens.$color-grey-10; - padding: lib.$spacing-xs; + border: mp.$border-radius-xs solid tokens.$color-grey-10; + padding: mp.$spacing-xs; display: flex; align-items: center; justify-content: space-between; - gap: lib.$spacing-md; + gap: mp.$spacing-md; label { flex: 1 1 0; - padding: lib.$spacing-xs lib.$spacing-sm; + padding: mp.$spacing-xs mp.$spacing-sm; display: flex; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; align-items: center; justify-content: center; background-color: tokens.$color-white; @@ -390,10 +390,10 @@ } &.is-disabled { - padding-inline: lib.$spacing-md; + padding-inline: mp.$spacing-md; color: tokens.$color-grey-30; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { svg { flex: 1 1 10px; } @@ -410,20 +410,20 @@ } .meta { - @media screen and (max-width: lib.$screen-md) { + @media screen and (max-width: mp.$screen-md) { display: flex; flex-direction: column; dl { - @include lib.text-body-sm; + @include mp.text-body-sm; display: flex; flex-direction: column; - gap: lib.$spacing-md; + gap: mp.$spacing-md; border-top: 1px solid tokens.$color-grey-10; - padding: lib.$spacing-lg; + padding: mp.$spacing-lg; dd { - font-family: lib.$font-stack-firefox; + font-family: mp.$font-stack-firefox; font-weight: 500; img { @@ -436,28 +436,28 @@ display: flex; flex-direction: column; border-top: 1px solid tokens.$color-grey-10; - padding: lib.$spacing-md; + padding: mp.$spacing-md; } } - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { display: flex; - padding-block: lib.$spacing-lg lib.$spacing-sm; + padding-block: mp.$spacing-lg mp.$spacing-sm; border-top: 1px solid tokens.$color-grey-10; dl { display: flex; - gap: lib.$spacing-2xl; + gap: mp.$spacing-2xl; font-weight: 500; dt { - @include lib.text-body-sm; + @include mp.text-body-sm; color: tokens.$color-grey-50; } dd { display: flex; align-items: center; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; color: tokens.$color-grey-60; } } @@ -470,18 +470,18 @@ } .promotions-locked-description-wrapper { - margin-top: lib.$spacing-md; + margin-top: mp.$spacing-md; background: tokens.$color-grey-05; - border-radius: lib.$border-radius-md; - padding: lib.$spacing-md; + border-radius: mp.$border-radius-md; + padding: mp.$spacing-md; display: flex; flex-direction: column; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; strong { display: flex; align-items: center; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; color: tokens.$color-grey-50; } } @@ -495,18 +495,18 @@ } .onboarding-alias-container { - width: lib.$content-xs; + width: mp.$content-xs; position: absolute; - padding: lib.$spacing-sm lib.$spacing-md; + padding: mp.$spacing-sm mp.$spacing-md; color: tokens.$color-black; background: tokens.$color-white; border: solid 4px tokens.$color-purple-50; - border-radius: lib.$border-radius-md; - right: lib.$spacing-xl; - box-shadow: lib.$box-shadow-md; + border-radius: mp.$border-radius-md; + right: mp.$spacing-xl; + box-shadow: mp.$box-shadow-md; display: none; - @media screen and #{lib.$mq-lg} { + @media screen and #{mp.$mq-lg} { display: block; } } diff --git a/frontend/src/components/dashboard/subdomain/ConfirmationForm.module.scss b/frontend/src/components/dashboard/subdomain/ConfirmationForm.module.scss index d6634ac581..80389f61d7 100644 --- a/frontend/src/components/dashboard/subdomain/ConfirmationForm.module.scss +++ b/frontend/src/components/dashboard/subdomain/ConfirmationForm.module.scss @@ -1,11 +1,11 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; .permanence-warning { - @include lib.text-body-sm; + @include mp.text-body-sm; text-align: center; - padding: lib.$spacing-md lib.$spacing-lg; - color: lib.$color-dark-gray-70; + padding: mp.$spacing-md mp.$spacing-lg; + color: mp.$color-dark-gray-70; } .confirm { @@ -14,13 +14,13 @@ align-items: center; label { - background-color: lib.$color-light-gray-10; - border-radius: lib.$border-radius-md; - padding: lib.$spacing-md; + background-color: mp.$color-light-gray-10; + border-radius: mp.$border-radius-md; + padding: mp.$spacing-md; cursor: pointer; input { - margin-right: lib.$spacing-sm; + margin-right: mp.$spacing-sm; } .subdomain { @@ -37,10 +37,10 @@ display: flex; align-items: center; justify-content: space-between; - padding-top: lib.$spacing-xl; + padding-top: mp.$spacing-xl; button[type="submit"] { - background: lib.$color-blue-50; + background: mp.$color-blue-50; opacity: 0.4; &:not(:disabled) { @@ -48,7 +48,7 @@ } &:hover:not(:disabled) { - background-color: lib.$color-blue-60; + background-color: mp.$color-blue-60; opacity: 1; } } @@ -57,16 +57,16 @@ border-style: none; background-color: transparent; cursor: pointer; - border-radius: lib.$border-radius-sm; - color: lib.$color-blue-50; - padding: lib.$spacing-sm lib.$spacing-md; + border-radius: mp.$border-radius-sm; + color: mp.$color-blue-50; + padding: mp.$spacing-sm mp.$spacing-md; &:hover { - color: lib.$color-link-hover; + color: mp.$color-link-hover; } &:focus { - color: lib.$color-blue-50; + color: mp.$color-blue-50; } } } diff --git a/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss b/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss index 12e5243ea1..d49441cd4d 100644 --- a/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss +++ b/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss @@ -1,10 +1,10 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; @use "../../../styles/typography" as styles-typography; .underlay { position: fixed; - background-color: rgba(lib.$color-black, 0.4); + background-color: rgba(mp.$color-black, 0.4); top: 0; bottom: 0; left: 0; @@ -14,38 +14,38 @@ justify-content: center; .dialog-wrapper { - background: lib.$color-white; - width: calc((#{lib.$content-sm} + #{lib.$content-md}) / 2); // 560px + background: mp.$color-white; + width: calc((#{mp.$content-sm} + #{mp.$content-md}) / 2); // 560px max-width: 90%; - border-radius: lib.$border-radius-md; - box-shadow: lib.$box-shadow-sm; - padding: lib.$spacing-md; + border-radius: mp.$border-radius-md; + box-shadow: mp.$box-shadow-sm; + padding: mp.$spacing-md; - $illustrationOverlap: lib.$spacing-lg; + $illustrationOverlap: mp.$spacing-lg; .hero { - @include lib.text-body-lg; - font-family: lib.$font-stack-firefox; + @include mp.text-body-lg; + font-family: mp.$font-stack-firefox; font-weight: 700; text-align: center; - border-radius: lib.$border-radius-md; - background-color: lib.$color-light-gray-10; - padding: lib.$spacing-lg lib.$spacing-md; + border-radius: mp.$border-radius-md; + background-color: mp.$color-light-gray-10; + padding: mp.$spacing-lg mp.$spacing-md; - @media screen and #{lib.$mq-md} { - @include lib.text-title-3xs; + @media screen and #{mp.$mq-md} { + @include mp.text-title-3xs; } .picked-confirmation & { - padding-bottom: $illustrationOverlap + lib.$spacing-lg; + padding-bottom: $illustrationOverlap + mp.$spacing-lg; } .headline { display: flex; align-items: center; justify-content: center; - padding: lib.$spacing-sm 0; - gap: lib.$spacing-sm; + padding: mp.$spacing-sm 0; + gap: mp.$spacing-sm; } .modal-title { @@ -55,8 +55,8 @@ @include styles-typography.text-title-xs { display: block; font-weight: 700; - margin-bottom: lib.$spacing-sm; - padding: lib.$spacing-sm 0; + margin-bottom: mp.$spacing-sm; + padding: mp.$spacing-sm 0; } &::before { @@ -69,31 +69,31 @@ .picked-confirmation-body { display: flex; flex-direction: column; - gap: lib.$spacing-md; + gap: mp.$spacing-md; align-items: center; - padding-top: lib.$spacing-sm; + padding-top: mp.$spacing-sm; .picked-confirmation-body-content { margin: 0 auto; - padding: 0 lib.$spacing-sm; + padding: 0 mp.$spacing-sm; - @media screen and #{lib.$mq-md} { - padding: 0 lib.$spacing-2xl; + @media screen and #{mp.$mq-md} { + padding: 0 mp.$spacing-2xl; } .feature-item-list { - @include lib.text-body-sm; + @include mp.text-body-sm; list-style-type: none; li { - margin: lib.$spacing-sm 0; + margin: mp.$spacing-sm 0; display: flex; flex-direction: row; align-items: center; - gap: lib.$spacing-md; + gap: mp.$spacing-md; .check-icon { - fill: lib.$color-blue-50; + fill: mp.$color-blue-50; min-width: 20px; // Width of the check icons } } diff --git a/frontend/src/components/dashboard/subdomain/SubdomainInfoTooltip.module.scss b/frontend/src/components/dashboard/subdomain/SubdomainInfoTooltip.module.scss index 424ebec75f..338c37ea90 100644 --- a/frontend/src/components/dashboard/subdomain/SubdomainInfoTooltip.module.scss +++ b/frontend/src/components/dashboard/subdomain/SubdomainInfoTooltip.module.scss @@ -1,25 +1,25 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; @use "~@mozilla-protocol/core/protocol/css/includes/mixins/typography"; .info-icon { align-items: center; background-color: transparent; border-style: none; - color: lib.$color-light-gray-70; + color: mp.$color-light-gray-70; cursor: pointer; display: flex; } .explainer-wrapper { - background-color: lib.$color-white; - box-shadow: lib.$box-shadow-sm; - border-radius: lib.$border-radius-md; - padding: lib.$spacing-lg; + background-color: mp.$color-white; + box-shadow: mp.$box-shadow-sm; + border-radius: mp.$border-radius-md; + padding: mp.$spacing-lg; // On small screens, appear as a modal at the top of the viewport: - top: lib.$spacing-lg; - left: lib.$spacing-lg; - right: lib.$spacing-lg; + top: mp.$spacing-lg; + left: mp.$spacing-lg; + right: mp.$spacing-lg; position: absolute; &::before { @@ -30,15 +30,15 @@ top: -6px; // Top, left: needed for tooltip arrow pointer left: 12px; transform: rotate(45deg); - background-color: lib.$color-white; + background-color: mp.$color-white; display: none; } - @media screen and #{lib.$mq-lg} { + @media screen and #{mp.$mq-lg} { // On wider screens, the popover is attached to the indicator: inset: unset; position: unset; - max-width: 8px + lib.$content-sm; // Magic number to avoid empty space near domain name + max-width: 8px + mp.$content-sm; // Magic number to avoid empty space near domain name &::before { display: initial; @@ -46,29 +46,29 @@ } h3 { - @include lib.text-title-3xs; + @include mp.text-title-3xs; - font-family: lib.$font-stack-firefox; - margin-bottom: lib.$spacing-sm; + font-family: mp.$font-stack-firefox; + margin-bottom: mp.$spacing-sm; } p { - @include lib.text-body-sm; + @include mp.text-body-sm; } .close-button { position: absolute; - top: lib.$spacing-sm; - right: lib.$spacing-sm; + top: mp.$spacing-sm; + right: mp.$spacing-sm; background-color: transparent; border-style: none; - border-radius: lib.$border-radius-sm; - width: lib.$spacing-lg; - height: lib.$spacing-lg; + border-radius: mp.$border-radius-sm; + width: mp.$spacing-lg; + height: mp.$spacing-lg; cursor: pointer; &:hover { - color: lib.$color-blue-50; + color: mp.$color-blue-50; } } } diff --git a/frontend/src/components/dashboard/tips/CustomAliasTip.module.scss b/frontend/src/components/dashboard/tips/CustomAliasTip.module.scss index 7b8cdf64fc..bf91809e66 100644 --- a/frontend/src/components/dashboard/tips/CustomAliasTip.module.scss +++ b/frontend/src/components/dashboard/tips/CustomAliasTip.module.scss @@ -1,28 +1,28 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; .custom-alias-tip { display: flex; flex-direction: column; - gap: lib.$spacing-xs; + gap: mp.$spacing-xs; - @include lib.text-body-sm; + @include mp.text-body-sm; samp { - @include lib.text-body-sm; - font-family: lib.$font-stack-base; - color: lib.$color-blue-50; + @include mp.text-body-sm; + font-family: mp.$font-stack-base; + color: mp.$color-blue-50; font-weight: 700; } h3 { - @include lib.text-title-3xs; - font-family: lib.$font-stack-firefox; - color: lib.$color-purple-90; + @include mp.text-title-3xs; + font-family: mp.$font-stack-firefox; + color: mp.$color-purple-90; } video { - border-radius: lib.$border-radius-sm; + border-radius: mp.$border-radius-sm; } @media (prefers-reduced-motion) { diff --git a/frontend/src/components/dashboard/tips/GenericTip.module.scss b/frontend/src/components/dashboard/tips/GenericTip.module.scss index 896928222c..f29557804f 100644 --- a/frontend/src/components/dashboard/tips/GenericTip.module.scss +++ b/frontend/src/components/dashboard/tips/GenericTip.module.scss @@ -1,20 +1,20 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; .generic-tip { - @include lib.text-body-sm; + @include mp.text-body-sm; display: flex; flex-direction: column; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; h3 { - @include lib.text-title-3xs; - font-family: lib.$font-stack-firefox; - color: lib.$color-purple-90; + @include mp.text-title-3xs; + font-family: mp.$font-stack-firefox; + color: mp.$color-purple-90; } video { - border-radius: lib.$border-radius-md; + border-radius: mp.$border-radius-md; // The video is listed last because its content is usually an example of the // textual content, so for screen readers it makes more sense to read it // last. However, we want to visually show it first. @@ -25,7 +25,7 @@ .still-alternative { display: none; - border-radius: lib.$border-radius-md; + border-radius: mp.$border-radius-md; // The video is listed last because its content is usually an example of the // textual content, so for screen readers it makes more sense to read it // last. However, we want to visually show it first. diff --git a/frontend/src/components/dashboard/tips/Tips.module.scss b/frontend/src/components/dashboard/tips/Tips.module.scss index 9ae6110e9b..1c2f90a675 100644 --- a/frontend/src/components/dashboard/tips/Tips.module.scss +++ b/frontend/src/components/dashboard/tips/Tips.module.scss @@ -1,16 +1,16 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; .wrapper { position: relative; - padding-bottom: calc(lib.$spacing-md * 2 + 2rem); + padding-bottom: calc(mp.$spacing-md * 2 + 2rem); flex: 1 0 0; .expand-button, .card { position: fixed; - right: lib.$spacing-md; - bottom: lib.$spacing-md; + right: mp.$spacing-md; + bottom: mp.$spacing-md; } // .expand-button and .card stay fixed in the bottom right-hand corner, @@ -28,43 +28,43 @@ .expand-button { display: flex; align-items: center; - gap: lib.$spacing-sm; - background-color: lib.$color-white; - border-radius: lib.$border-radius-md; + gap: mp.$spacing-sm; + background-color: mp.$color-white; + border-radius: mp.$border-radius-md; border-style: none; - padding: lib.$spacing-md; - box-shadow: lib.$box-shadow-sm; + padding: mp.$spacing-md; + box-shadow: mp.$box-shadow-sm; cursor: pointer; &:hover { - background-color: lib.$color-violet-05; + background-color: mp.$color-violet-05; } .icon { - color: lib.$color-pink-30; + color: mp.$color-pink-30; } } .card { - border-radius: lib.$border-radius-md; - padding: lib.$spacing-md; - box-shadow: lib.$box-shadow-sm; - background-color: lib.$color-white; - width: lib.$content-sm; - max-width: calc(100% - lib.$spacing-xl); + border-radius: mp.$border-radius-md; + padding: mp.$spacing-md; + box-shadow: mp.$box-shadow-sm; + background-color: mp.$color-white; + width: mp.$content-sm; + max-width: calc(100% - mp.$spacing-xl); .header { display: flex; align-items: center; - gap: lib.$spacing-sm; - padding: 0 0 lib.$spacing-lg; + gap: mp.$spacing-sm; + padding: 0 0 mp.$spacing-lg; .icon { - color: lib.$color-pink-30; + color: mp.$color-pink-30; } h2 { - @include lib.text-body-sm; + @include mp.text-body-sm; font-weight: 400; flex: 1 0 auto; } @@ -72,7 +72,7 @@ .close-button { background-color: transparent; border-style: none; - border-radius: lib.$border-radius-sm; + border-radius: mp.$border-radius-sm; display: flex; align-items: center; justify-content: center; @@ -80,40 +80,40 @@ cursor: pointer; &:hover { - color: lib.$color-blue-50; + color: mp.$color-blue-50; } } } .summary { display: flex; - gap: lib.$spacing-md; + gap: mp.$spacing-md; justify-content: space-between; - padding-bottom: lib.$spacing-xs; + padding-bottom: mp.$spacing-xs; b { - @include lib.text-title-3xs; - font-family: lib.$font-stack-firefox; + @include mp.text-title-3xs; + font-family: mp.$font-stack-firefox; } button { - @include lib.text-body-sm; + @include mp.text-body-sm; background-color: transparent; border-style: none; - border-radius: lib.$border-radius-sm; - color: lib.$color-blue-50; + border-radius: mp.$border-radius-sm; + color: mp.$color-blue-50; flex-shrink: 0; cursor: pointer; &:hover { - color: lib.$color-blue-70; + color: mp.$color-blue-70; text-decoration: underline; } } } .tip-carousel { - padding: lib.$spacing-md; + padding: mp.$spacing-md; .tip { min-height: 15 * 16px; @@ -121,23 +121,23 @@ .tip-switcher { display: flex; - gap: lib.$spacing-xs; + gap: mp.$spacing-xs; justify-content: center; .panel-dot { - color: lib.$color-light-gray-50; + color: mp.$color-light-gray-50; // Increase the tap target for these dots: - padding: lib.$spacing-sm lib.$spacing-xs; + padding: mp.$spacing-sm mp.$spacing-xs; cursor: pointer; // Avoid layout shifts when adding a bottom border on focus: border: 2px solid transparent; &.is-selected { - color: lib.$color-pink-30; + color: mp.$color-pink-30; } &:hover { - color: lib.$color-pink-40; + color: mp.$color-pink-40; } // .focus-wrapper exists just to add an outlined border to the dot @@ -150,7 +150,7 @@ &:focus { outline: none; .focus-wrapper { - border-color: lib.$color-blue-50; + border-color: mp.$color-blue-50; } } } @@ -158,8 +158,8 @@ } .footer { - border-top: 1px solid lib.$color-light-gray-20; - padding-top: lib.$spacing-md; + border-top: 1px solid mp.$color-light-gray-20; + padding-top: mp.$spacing-md; ul { list-style-type: none; @@ -167,7 +167,7 @@ justify-content: space-between; a { - color: lib.$color-blue-50; + color: mp.$color-blue-50; font-weight: 500; } } diff --git a/frontend/src/components/landing/BundleBanner.module.scss b/frontend/src/components/landing/BundleBanner.module.scss index 20bdf76175..b5ede449e5 100644 --- a/frontend/src/components/landing/BundleBanner.module.scss +++ b/frontend/src/components/landing/BundleBanner.module.scss @@ -1,58 +1,58 @@ @use "../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; @use "../../styles/typography" as styles-typography; .bundle-banner-wrapper { display: grid; grid-template-columns: 10fr; grid-template-rows: auto; - background-color: lib.$color-violet-80; - border-radius: lib.$border-radius-lg; - gap: lib.$layout-xs; + background-color: mp.$color-violet-80; + border-radius: mp.$border-radius-lg; + gap: mp.$layout-xs; // Snap to 2 columns - @media #{lib.$mq-lg} { + @media #{mp.$mq-lg} { background-image: url("./images/bundle-bg.png"); grid-template-columns: 5fr 5fr; background-size: cover; - gap: lib.$layout-md; + gap: mp.$layout-md; } - @media #{lib.$mq-xl} { + @media #{mp.$mq-xl} { grid-template-columns: 5fr 6fr; } .first-section { - padding-right: lib.$layout-lg; // Shrinks image towards the left side + padding-right: mp.$layout-lg; // Shrinks image towards the left side position: relative; background-image: url("./images/bundle-bg-mobile.png"); background-size: cover; background-repeat: no-repeat; - border-bottom: 4px solid lib.$color-purple-30; - border-radius: lib.$border-radius-lg lib.$border-radius-lg 0 0; + border-bottom: 4px solid mp.$color-purple-30; + border-radius: mp.$border-radius-lg mp.$border-radius-lg 0 0; - @media #{lib.$mq-sm} { - padding-right: lib.$layout-xl; + @media #{mp.$mq-sm} { + padding-right: mp.$layout-xl; } - @media #{lib.$mq-md} { - padding-right: lib.$content-sm; + @media #{mp.$mq-md} { + padding-right: mp.$content-sm; } // Snap to 2 columns - @media #{lib.$mq-lg} { - padding-right: lib.$layout-lg; + @media #{mp.$mq-lg} { + padding-right: mp.$layout-lg; border-bottom: none; background-image: none; } .main-img-wrapper { .main-image { - margin-top: -(lib.$layout-lg); // Leave space for image to bleed out of frame + margin-top: -(mp.$layout-lg); // Leave space for image to bleed out of frame - @media #{lib.$mq-lg} { + @media #{mp.$mq-lg} { position: absolute; bottom: 0; margin-top: auto; - margin-left: lib.$spacing-xs; + margin-left: mp.$spacing-xs; max-height: 500px; // Magic number: Ensure image does not overlay other sections } } @@ -61,12 +61,12 @@ .float-features-wrapper { display: none; - @media #{lib.$mq-lg} { + @media #{mp.$mq-lg} { display: block; .float-features-item { - @include lib.text-body-xs; - @include lib.font-firefox; + @include mp.text-body-xs; + @include mp.font-firefox; font-weight: 600; background: rgba( 255, @@ -78,9 +78,9 @@ display: flex; align-items: center; justify-content: center; - gap: lib.$spacing-sm; - padding: lib.$spacing-sm; - border-radius: lib.$border-radius-md; + gap: mp.$spacing-sm; + padding: mp.$spacing-sm; + border-radius: mp.$border-radius-md; .float-features-text { line-height: 100%; @@ -88,16 +88,16 @@ } } .feature-one { - right: lib.$layout-lg; - top: lib.$layout-lg; + right: mp.$layout-lg; + top: mp.$layout-lg; } .feature-two { - right: lib.$layout-xs; - bottom: lib.$layout-2xl; + right: mp.$layout-xs; + bottom: mp.$layout-2xl; } .feature-three { - left: lib.$layout-sm; - bottom: lib.$layout-lg; + left: mp.$layout-sm; + bottom: mp.$layout-lg; .float-features-text { max-width: 100px; @@ -108,23 +108,23 @@ } .second-section { - @media #{lib.$mq-lg} { + @media #{mp.$mq-lg} { display: flex; justify-content: flex-end; } .bundle-banner-description { justify-content: space-between; - color: lib.$color-white; + color: mp.$color-white; height: auto; flex-direction: column; display: flex; - gap: lib.$spacing-md; - padding: 0 lib.$spacing-md lib.$spacing-xl lib.$spacing-md; + gap: mp.$spacing-md; + padding: 0 mp.$spacing-md mp.$spacing-xl mp.$spacing-md; - @media #{lib.$mq-lg} { + @media #{mp.$mq-lg} { height: auto; - padding: lib.$spacing-2xl lib.$spacing-xl; + padding: mp.$spacing-2xl mp.$spacing-xl; } .headline { @@ -134,27 +134,27 @@ } .bundle-banner-one-year-plan-headline { - margin-top: lib.$spacing-md; + margin-top: mp.$spacing-md; } .bundle-banner-value-props { display: flex; flex-direction: column; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; list-style: none; - @media #{lib.$mq-xl} { + @media #{mp.$mq-xl} { flex-direction: row; } li { border-radius: 50px; // custom border radius to follow design spec background: rgba(255, 255, 255, 0.1); - padding: lib.$spacing-sm lib.$spacing-md; + padding: mp.$spacing-sm mp.$spacing-md; font-weight: 500; display: flex; flex-direction: row; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; align-items: center; } } @@ -162,11 +162,11 @@ .bottom-section { display: flex; flex-direction: column; - gap: lib.$spacing-md; - margin-top: lib.$spacing-md; + gap: mp.$spacing-md; + margin-top: mp.$spacing-md; align-items: center; - @media #{lib.$mq-lg} { + @media #{mp.$mq-lg} { flex-direction: row; } @@ -174,10 +174,10 @@ font-weight: 600; flex: 1 0 auto; background: white; - max-width: lib.$content-xs; - color: lib.$color-blue-50; - padding: lib.$spacing-sm lib.$spacing-md; - border-radius: lib.$border-radius-sm; + max-width: mp.$content-xs; + color: mp.$color-blue-50; + padding: mp.$spacing-sm mp.$spacing-md; + border-radius: mp.$border-radius-sm; &:hover { opacity: 0.8; @@ -185,10 +185,10 @@ } .money-back-guarantee { - @include lib.text-body-xs; + @include mp.text-body-xs; text-align: center; - @media #{lib.$mq-lg} { + @media #{mp.$mq-lg} { text-align: start; } } @@ -196,22 +196,22 @@ h2 { @include styles-typography.text-title-sm { - @include lib.font-firefox; + @include mp.font-firefox; font-weight: 700; } - @media #{lib.$mq-lg} { + @media #{mp.$mq-lg} { @include styles-typography.text-title-xs; } } h3 { @include styles-typography.text-title-xs { - @include lib.font-firefox; + @include mp.font-firefox; font-weight: 500; } - @media #{lib.$mq-lg} { + @media #{mp.$mq-lg} { @include styles-typography.text-title-2xs; } } @@ -219,7 +219,7 @@ .pricing-logo-wrapper { display: flex; flex-direction: column; - gap: lib.$spacing-md; + gap: mp.$spacing-md; align-items: center; .bundle-logo { @@ -227,37 +227,37 @@ max-width: 130px; align-self: center; - @media #{lib.$mq-lg} { + @media #{mp.$mq-lg} { display: block; } } - @media #{lib.$mq-lg} { + @media #{mp.$mq-lg} { flex-direction: row; } .pricing-wrapper { - border-radius: lib.$border-radius-sm; + border-radius: mp.$border-radius-sm; // Using rgba to manipulate alpha value border: 2px solid rgba(255, 255, 255, 0.4); display: flex; flex-direction: column; align-items: center; - @media #{lib.$mq-lg} { + @media #{mp.$mq-lg} { flex-direction: row; } span { - padding: lib.$spacing-xs lib.$spacing-md; + padding: mp.$spacing-xs mp.$spacing-md; display: flex; flex-direction: row; align-items: center; font-weight: 600; - gap: lib.$spacing-xs; + gap: mp.$spacing-xs; .price { - @include lib.text-body-sm; + @include mp.text-body-sm; font-weight: 400; } @@ -265,15 +265,15 @@ // Using rgba to manipulate alpha value border-bottom: 1px solid rgba(255, 255, 255, 0.4); - @media #{lib.$mq-lg} { + @media #{mp.$mq-lg} { border-right: 1px solid rgba(255, 255, 255, 0.4); border-bottom: none; - margin: lib.$spacing-sm 0; + margin: mp.$spacing-sm 0; } } &:nth-child(2) { - @include lib.text-body-xl; + @include mp.text-body-xl; } } } diff --git a/frontend/src/components/landing/FaqAccordion.module.scss b/frontend/src/components/landing/FaqAccordion.module.scss index baf913f2d0..41afeab51c 100644 --- a/frontend/src/components/landing/FaqAccordion.module.scss +++ b/frontend/src/components/landing/FaqAccordion.module.scss @@ -1,27 +1,27 @@ @use "../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; .entry { button { - @include lib.text-body-xl; + @include mp.text-body-xl; background-color: transparent; border-style: none; display: flex; align-items: center; - gap: lib.$spacing-md; + gap: mp.$spacing-md; justify-content: space-between; cursor: pointer; - padding: lib.$spacing-lg lib.$spacing-md; + padding: mp.$spacing-lg mp.$spacing-md; width: 100%; - border-bottom: 1px solid lib.$color-light-gray-30; + border-bottom: 1px solid mp.$color-light-gray-30; text-align: start; &:focus { outline: none; - border-radius: lib.$border-radius-md; - border-color: lib.$color-light-gray-10; - background-color: lib.$color-light-gray-10; - color: lib.$color-blue-50; + border-radius: mp.$border-radius-md; + border-color: mp.$color-light-gray-10; + background-color: mp.$color-light-gray-10; + color: mp.$color-blue-50; } } @@ -30,10 +30,10 @@ } dd { - padding: lib.$spacing-lg lib.$spacing-md; + padding: mp.$spacing-lg mp.$spacing-md; display: flex; flex-direction: column; - gap: lib.$spacing-md; + gap: mp.$spacing-md; } &.is-collapsed { @@ -45,7 +45,7 @@ .plus-icon { flex: 0 0 auto; transition: transform 0.2s ease-out; - color: lib.$color-blue-50; + color: mp.$color-blue-50; } &.is-expanded { diff --git a/frontend/src/components/landing/HighlightedFeatures.module.scss b/frontend/src/components/landing/HighlightedFeatures.module.scss index 9b9e5ef72b..ceb19938a3 100644 --- a/frontend/src/components/landing/HighlightedFeatures.module.scss +++ b/frontend/src/components/landing/HighlightedFeatures.module.scss @@ -1,5 +1,5 @@ @use "../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; @use "../../styles/typography" as styles-typography; .highlighted-feature-wrapper { @@ -7,12 +7,12 @@ align-content: center; justify-content: space-between; flex-direction: column-reverse; - margin-bottom: lib.$layout-sm; + margin-bottom: mp.$layout-sm; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row-reverse; - gap: lib.$spacing-2xl; - margin-bottom: lib.$layout-xs; + gap: mp.$spacing-2xl; + margin-bottom: mp.$layout-xs; &:nth-child(even) { flex-direction: row; @@ -20,51 +20,51 @@ } .new-callout-wrapper { - margin-bottom: lib.$spacing-md; + margin-bottom: mp.$spacing-md; .new-callout { - @include lib.text-body-sm; - background-color: lib.$color-purple-30; - padding: lib.$spacing-xs lib.$spacing-sm; + @include mp.text-body-sm; + background-color: mp.$color-purple-30; + padding: mp.$spacing-xs mp.$spacing-sm; font-weight: 600; text-transform: uppercase; - color: lib.$color-white; + color: mp.$color-white; text-align: center; align-content: center; - border-radius: lib.$border-radius-sm; + border-radius: mp.$border-radius-sm; } } .highlighted-feature-description { - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row-reverse; align-self: center; width: 100%; } .highlighted-feature-headline { - @include lib.font-firefox; - @include lib.text-body-xl; - margin-bottom: lib.$spacing-sm; + @include mp.font-firefox; + @include mp.text-body-xl; + margin-bottom: mp.$spacing-sm; line-height: 100%; } } .highlighted-feature-image { - padding: lib.$spacing-md; + padding: mp.$spacing-md; width: 100%; align-self: center; } } .section-title-wrapper { - padding: lib.$spacing-lg lib.$spacing-md lib.$spacing-2xl lib.$spacing-md; + padding: mp.$spacing-lg mp.$spacing-md mp.$spacing-2xl mp.$spacing-md; align-content: center; justify-content: center; text-align: center; h2 { - @include lib.font-firefox; + @include mp.font-firefox; @include styles-typography.text-title-sm { justify-content: center; width: 100%; @@ -72,7 +72,7 @@ } .cta { - margin: lib.$spacing-xl 0; - min-width: lib.$content-xs; + margin: mp.$spacing-xl 0; + min-width: mp.$content-xs; } } diff --git a/frontend/src/components/landing/PlanMatrix.module.scss b/frontend/src/components/landing/PlanMatrix.module.scss index 6d1e096f26..0977647a50 100644 --- a/frontend/src/components/landing/PlanMatrix.module.scss +++ b/frontend/src/components/landing/PlanMatrix.module.scss @@ -1,5 +1,5 @@ @use "../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; @use "../../styles/typography" as styles-typography; .wrapper { @@ -7,15 +7,15 @@ display: flex; flex-direction: column; align-items: center; - gap: lib.$spacing-md; + gap: mp.$spacing-md; .bundle-offer-heading { @include styles-typography.text-title-xs { background-image: linear-gradient( to right, - lib.$color-violet-30, - lib.$color-violet-80 20%, - lib.$color-violet-30 80% + mp.$color-violet-30, + mp.$color-violet-80 20%, + mp.$color-violet-30 80% ); background-clip: text; color: transparent; @@ -24,7 +24,7 @@ } } .bundle-offer-content { - max-width: lib.$content-md; + max-width: mp.$content-md; text-align: center; } @@ -35,7 +35,7 @@ display: initial; } - @media screen and #{lib.$mq-xl} { + @media screen and #{mp.$mq-xl} { .desktop { display: table; table-layout: fixed; @@ -46,18 +46,18 @@ } .table-wrapper { - padding: lib.$layout-md 0; + padding: mp.$layout-md 0; } .discount-notice-wrapper { - @include lib.text-body-sm; + @include mp.text-body-sm; line-height: 100%; text-align: center; .discount-notice-container { display: flex; flex-direction: column; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; .discount-notice-bolded { font-weight: 800; @@ -80,24 +80,24 @@ table.desktop { tr { th:first-child { - width: lib.$content-sm; + width: mp.$content-sm; font-weight: 400; text-align: start; } th:not(:first-child), td:not(:first-child) { - min-width: lib.$layout-2xl; + min-width: mp.$layout-2xl; text-align: center; - background-color: lib.$color-white; - padding: lib.$spacing-md; + background-color: mp.$color-white; + padding: mp.$spacing-md; // Fake spacing between the columns. The disadvantage of this method is // that the horizontal bottom border on rows is interrupted, but if we // used the appropriate // border-collapse: separate; // border-spacing: $spacing-md 0; // then we wouldn't have been able to apply a bottom border at all. - border-inline: lib.$spacing-md * 0.5 solid lib.$color-light-gray-10; + border-inline: mp.$spacing-md * 0.5 solid mp.$color-light-gray-10; &:last-child { border-right-style: none; @@ -112,12 +112,12 @@ table.desktop { } &:first-child th { - border-top-left-radius: lib.$spacing-sm; - border-top-right-radius: lib.$spacing-sm; + border-top-left-radius: mp.$spacing-sm; + border-top-right-radius: mp.$spacing-sm; } th:not(:first-child) { - color: lib.$color-violet-70; + color: mp.$color-violet-70; font-weight: 600; &.recommended { @@ -138,9 +138,9 @@ table.desktop { // We make it slightly taller than the so that it overlaps the // `thead tr`'s bottom border (with a width of $row-spacing). height: calc(100% + $row-spacing); - background-color: lib.$color-violet-80; - color: lib.$color-white; - border-radius: lib.$spacing-sm; + background-color: mp.$color-violet-80; + color: mp.$color-white; + border-radius: mp.$spacing-sm; margin-bottom: -1 * $row-spacing; } } @@ -158,11 +158,11 @@ table.desktop { } td { - color: lib.$color-dark-gray-50; + color: mp.$color-dark-gray-50; svg { display: inline; - color: lib.$color-blue-60; + color: mp.$color-blue-60; } } } @@ -170,8 +170,8 @@ table.desktop { tfoot { tr:last-child td { - border-bottom-left-radius: lib.$spacing-sm; - border-bottom-right-radius: lib.$spacing-sm; + border-bottom-left-radius: mp.$spacing-sm; + border-bottom-right-radius: mp.$spacing-sm; } tr { @@ -190,7 +190,7 @@ table.desktop { display: flex; flex-direction: column; justify-content: space-between; - gap: lib.$spacing-md; + gap: mp.$spacing-md; width: 100%; height: 100%; text-align: center; @@ -206,25 +206,25 @@ table.desktop { .pricing-overview { display: flex; flex-direction: column; - gap: lib.$spacing-md; + gap: mp.$spacing-md; .price { - @include lib.text-body-lg; - color: lib.$color-blue-50; + @include mp.text-body-lg; + color: mp.$color-blue-50; font-weight: 600; } .pick-button { - border: 2px solid lib.$color-blue-50; - border-radius: lib.$border-radius-sm; - padding: lib.$spacing-sm; + border: 2px solid mp.$color-blue-50; + border-radius: mp.$border-radius-sm; + padding: mp.$spacing-sm; text-align: center; - color: lib.$color-blue-50; + color: mp.$color-blue-50; font-weight: 700; &:hover { - background-color: lib.$color-blue-50; - color: lib.$color-white; + background-color: mp.$color-blue-50; + color: mp.$color-white; cursor: pointer; } } @@ -243,19 +243,19 @@ table.desktop { .plans { display: flex; flex-wrap: wrap; - gap: lib.$spacing-lg; + gap: mp.$spacing-lg; list-style-type: none; .plan { - flex: 1 0 lib.$content-xs; + flex: 1 0 mp.$content-xs; display: flex; flex-direction: column; align-items: center; - gap: lib.$spacing-lg; + gap: mp.$spacing-lg; max-width: 100%; - background-color: lib.$color-white; - border-radius: lib.$border-radius-md; - padding: lib.$spacing-md; + background-color: mp.$color-white; + border-radius: mp.$border-radius-md; + padding: mp.$spacing-md; h3 { @include styles-typography.text-title-2xs { @@ -269,13 +269,13 @@ table.desktop { // Since we want the h3 to spand the full width of the plan, and to be // flush with the top of the .plan, we enlarge it by that amount on the // sides and at the top: - width: calc(100% + 2 * lib.$spacing-md); - margin-top: -1 * lib.$spacing-md; - margin-inline: -1 * lib.$spacing-md; - padding: lib.$spacing-md; - background-color: lib.$color-violet-80; - color: lib.$color-white; - border-radius: lib.$spacing-sm; + width: calc(100% + 2 * mp.$spacing-md); + margin-top: -1 * mp.$spacing-md; + margin-inline: -1 * mp.$spacing-md; + padding: mp.$spacing-md; + background-color: mp.$color-violet-80; + color: mp.$color-white; + border-radius: mp.$spacing-sm; font-weight: 900; } @@ -283,13 +283,13 @@ table.desktop { flex: 1 0 auto; display: flex; flex-direction: column; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; width: 100%; list-style-type: none; li { display: flex; - gap: lib.$spacing-xs; + gap: mp.$spacing-xs; .description { flex: 1 0 auto; @@ -300,13 +300,13 @@ table.desktop { } } .availability { - flex: 0 1 lib.$layout-2xs; + flex: 0 1 mp.$layout-2xs; display: flex; align-items: center; justify-content: center; svg { - color: lib.$color-blue-60; + color: mp.$color-blue-60; } } } @@ -315,29 +315,29 @@ table.desktop { .pricing { display: flex; flex-direction: column; - gap: lib.$spacing-md; + gap: mp.$spacing-md; width: 100%; .pricing-overview { display: flex; flex-direction: column; align-items: center; - gap: lib.$spacing-md; + gap: mp.$spacing-md; width: 100%; $billingMonthlyNoteHeight: 18px; - padding-bottom: $billingMonthlyNoteHeight + lib.$spacing-md; + padding-bottom: $billingMonthlyNoteHeight + mp.$spacing-md; small { - @include lib.text-body-sm; + @include mp.text-body-sm; display: block; height: $billingMonthlyNoteHeight; line-height: $billingMonthlyNoteHeight; - margin-bottom: -1 * ($billingMonthlyNoteHeight + lib.$spacing-md); + margin-bottom: -1 * ($billingMonthlyNoteHeight + mp.$spacing-md); } .price { - @include lib.text-body-xl; - color: lib.$color-blue-50; + @include mp.text-body-xl; + color: mp.$color-blue-50; font-weight: 600; } @@ -346,17 +346,17 @@ table.desktop { } .pick-button { - border: 2px solid lib.$color-blue-50; - border-radius: lib.$border-radius-sm; + border: 2px solid mp.$color-blue-50; + border-radius: mp.$border-radius-sm; width: 100%; - padding: lib.$spacing-sm; + padding: mp.$spacing-sm; text-align: center; - color: lib.$color-blue-50; + color: mp.$color-blue-50; font-weight: 700; &:hover { - background-color: lib.$color-blue-50; - color: lib.$color-white; + background-color: mp.$color-blue-50; + color: mp.$color-white; cursor: pointer; } } @@ -369,22 +369,22 @@ table.desktop { .pricing-toggle { display: flex; background-color: tokens.$color-grey-10; - padding: lib.$spacing-xs; - border-radius: lib.$border-radius-lg; + padding: mp.$spacing-xs; + border-radius: mp.$border-radius-lg; > div { - @include lib.text-body-sm; + @include mp.text-body-sm; width: 50%; - padding: lib.$spacing-xs lib.$spacing-sm; + padding: mp.$spacing-xs mp.$spacing-sm; text-align: center; color: tokens.$color-grey-40; font-weight: 500; cursor: pointer; &.is-selected { - background-color: lib.$color-white; - border-radius: lib.$border-radius-lg; - color: lib.$color-blue-50; + background-color: mp.$color-white; + border-radius: mp.$border-radius-lg; + color: mp.$color-blue-50; } } } diff --git a/frontend/src/components/landing/Reviews.module.scss b/frontend/src/components/landing/Reviews.module.scss index 9e34b0e68e..6f1d7731cd 100644 --- a/frontend/src/components/landing/Reviews.module.scss +++ b/frontend/src/components/landing/Reviews.module.scss @@ -1,20 +1,20 @@ @use "../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; @use "../../styles/typography" as styles-typography; .reviews { display: flex; flex-direction: column; - max-width: lib.$content-max; + max-width: mp.$content-max; width: 100%; margin: 0 auto; align-items: center; - padding: lib.$spacing-md lib.$spacing-lg 0 lib.$spacing-lg; + padding: mp.$spacing-md mp.$spacing-lg 0 mp.$spacing-lg; justify-content: center; - gap: lib.$layout-sm; + gap: mp.$layout-sm; - @media screen and #{lib.$mq-xl} { - gap: lib.$layout-md; + @media screen and #{mp.$mq-xl} { + gap: mp.$layout-md; flex-direction: row; align-items: flex-start; } @@ -23,32 +23,32 @@ .left-container { display: flex; flex-direction: row; - gap: lib.$spacing-md; + gap: mp.$spacing-md; } .right-container { display: flex; flex-direction: column; - gap: lib.$spacing-2xl; + gap: mp.$spacing-2xl; } .logo-container { display: flex; - font-family: lib.$font-stack-base; - color: lib.$color-white; - width: lib.$layout-2xl; + font-family: mp.$font-stack-base; + color: mp.$color-white; + width: mp.$layout-2xl; flex-direction: column; align-items: center; - border-radius: lib.$border-radius-lg; - padding: lib.$spacing-md 0; - background-color: lib.$color-violet-50; + border-radius: mp.$border-radius-lg; + padding: mp.$spacing-md 0; + background-color: mp.$color-violet-50; .logo { - width: lib.$layout-xl; - padding: lib.$spacing-sm; + width: mp.$layout-xl; + padding: mp.$spacing-sm; } .logo-title { - @include lib.text-body-md; + @include mp.text-body-md; font-weight: 400; } @@ -66,27 +66,27 @@ justify-content: center; align-items: center; text-align: center; - padding: 0 lib.$spacing-md; - gap: lib.$spacing-xs; - background-color: lib.$color-white; - border-radius: lib.$border-radius-lg; + padding: 0 mp.$spacing-md; + gap: mp.$spacing-xs; + background-color: mp.$color-white; + border-radius: mp.$border-radius-lg; - @media screen and #{lib.$mq-lg} { + @media screen and #{mp.$mq-lg} { align-items: center; } .rating { .title { @include styles-typography.text-title-2xl { - font-family: lib.$font-stack-firefox; + font-family: mp.$font-stack-firefox; font-weight: 600; } } .text { - @include lib.text-body-sm; + @include mp.text-body-sm; color: tokens.$color-grey-40; - font-family: lib.$font-stack-base; + font-family: mp.$font-stack-base; font-weight: 500; } } @@ -95,15 +95,15 @@ .stars { display: flex; flex-direction: row; - padding-left: lib.$spacing-xs; + padding-left: mp.$spacing-xs; } .star { - color: lib.$color-yellow-50; + color: mp.$color-yellow-50; } .empty-star { - color: lib.$color-white; + color: mp.$color-white; stroke: tokens.$color-grey-20; stroke-width: 2px; } @@ -114,7 +114,7 @@ padding: 0; color: tokens.$color-grey-30; background: transparent; - width: lib.$layout-sm; + width: mp.$layout-sm; align-self: center; cursor: pointer; } @@ -123,35 +123,35 @@ position: absolute; display: none; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { display: flex; left: 30px; // Following design specs top: -10px; // Following design specs } svg { - color: lib.$color-purple-60; - height: lib.$layout-sm; + color: mp.$color-purple-60; + height: mp.$layout-sm; } } .reviews-container { display: flex; flex-direction: row; - gap: lib.$spacing-lg; - background-color: lib.$color-white; - padding: lib.$spacing-md; - border-radius: lib.$border-radius-lg; + gap: mp.$spacing-lg; + background-color: mp.$color-white; + padding: mp.$spacing-md; + border-radius: mp.$border-radius-lg; align-items: flex-start; // magic number: set to avoid shifting - no character limit on reviews yet. - min-height: calc(lib.$layout-2xl * 2); + min-height: calc(mp.$layout-2xl * 2); position: relative; - @media screen and #{lib.$mq-lg} { + @media screen and #{mp.$mq-lg} { // magic number: set to avoid shifting - no character limit on reviews yet. min-height: 200px; - padding: lib.$spacing-lg lib.$spacing-md; + padding: mp.$spacing-lg mp.$spacing-md; } .review-item { @@ -165,24 +165,24 @@ align-items: flex-start; position: relative; // allows us to animate - scroll width: 100%; // allows us to animate - scroll - padding: lib.$spacing-sm; + padding: mp.$spacing-sm; // queries set to these static widths to prevent shifting - @media screen and #{lib.$mq-sm} { - width: lib.$content-xs; + @media screen and #{mp.$mq-sm} { + width: mp.$content-xs; } - @media screen and #{lib.$mq-md} { - width: lib.$content-sm; + @media screen and #{mp.$mq-md} { + width: mp.$content-sm; } - @media screen and #{lib.$mq-xl} { - width: lib.$content-md; + @media screen and #{mp.$mq-xl} { + width: mp.$content-md; } .text { width: 100%; ul { - padding-left: lib.$spacing-md; + padding-left: mp.$spacing-md; } } } @@ -192,29 +192,29 @@ flex-direction: column; align-items: flex-start; font-weight: 400; - gap: lib.$spacing-md; - padding: 0 0 lib.$spacing-md 0; - font-family: lib.$font-stack-base; + gap: mp.$spacing-md; + padding: 0 0 mp.$spacing-md 0; + font-family: mp.$font-stack-base; - @media screen and #{lib.$mq-xl} { + @media screen and #{mp.$mq-xl} { flex-direction: row; align-items: flex-end; } .name { - @include lib.text-title-3xs; - font-family: lib.$font-stack-firefox; + @include mp.text-title-3xs; + font-family: mp.$font-stack-firefox; font-weight: 600; } .source { - @include lib.text-body-sm; + @include mp.text-body-sm; color: tokens.$color-grey-30; } .star { - color: lib.$color-yellow-40; - margin: 0 lib.$spacing-xs 0 (lib.$spacing-sm * -1); + color: mp.$color-yellow-40; + margin: 0 mp.$spacing-xs 0 (mp.$spacing-sm * -1); } } } @@ -279,11 +279,11 @@ .mobile-controls { display: flex; justify-content: space-between; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; button { width: 50%; - padding: lib.$spacing-md 0; + padding: mp.$spacing-md 0; &:hover { background-color: tokens.$color-grey-10; @@ -298,7 +298,7 @@ .hidden-mobile { display: none; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { display: inline-block; } } @@ -307,7 +307,7 @@ .show-mobile { display: flex; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { display: none; } } diff --git a/frontend/src/components/layout/Layout.module.scss b/frontend/src/components/layout/Layout.module.scss index aacde0f76e..056066e3b7 100644 --- a/frontend/src/components/layout/Layout.module.scss +++ b/frontend/src/components/layout/Layout.module.scss @@ -1,5 +1,5 @@ @use "../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; .patch3701 { pointer-events: none; @@ -12,17 +12,17 @@ // See https://fkhadra.github.io/react-toastify/how-to-style#override-css-variables --toastify-toast-width: 95%; - --toastify-color-light: #{lib.$color-white}; + --toastify-color-light: #{mp.$color-white}; --toastify-color-dark: #{tokens.$color-grey-50}; - --toastify-color-info: #{lib.$color-blue-50}; - --toastify-color-success: #{lib.$color-green-50}; - --toastify-color-warning: #{lib.$color-yellow-50}; - --toastify-color-error: #{lib.$color-red-60}; + --toastify-color-info: #{mp.$color-blue-50}; + --toastify-color-success: #{mp.$color-green-50}; + --toastify-color-warning: #{mp.$color-yellow-50}; + --toastify-color-error: #{mp.$color-red-60}; - --toastify-text-color-info: #{lib.$color-white}; + --toastify-text-color-info: #{mp.$color-white}; --toastify-text-color-success: #{tokens.$color-grey-50}; --toastify-text-color-warning: #{tokens.$color-grey-50}; - --toastify-text-color-error: #{lib.$color-white}; + --toastify-text-color-error: #{mp.$color-white}; --toastify-toast-min-height: $layout-md; --toastify-toast-max-height: $layout-md; @@ -33,35 +33,35 @@ $toastify-toast-close-button: var(--toast-close-button); // Targets the toast container and sets max-width to prevent it from obstructing nav items on larger screens. .toast-container { - max-width: lib.$content-xl; + max-width: mp.$content-xl; } .toast { - @include lib.text-body-sm; + @include mp.text-body-sm; text-align: center; font-weight: 400; - min-height: lib.$layout-md; - border-radius: lib.$border-radius-sm; - font-family: lib.$font-stack-base; + min-height: mp.$layout-md; + border-radius: mp.$border-radius-sm; + font-family: mp.$font-stack-base; padding: 0; - max-width: lib.$content-xl; + max-width: mp.$content-xl; margin: 0 auto; - @media screen and (max-width: lib.$screen-sm) { - width: calc(100% - lib.$spacing-xl); - margin-top: lib.$spacing-md; + @media screen and (max-width: mp.$screen-sm) { + width: calc(100% - mp.$spacing-xl); + margin-top: mp.$spacing-md; } &:global { &[class*="toast--error"], &[class*="toast--info"] { [id*="close-toast-button-icon"] { - color: #{lib.$color-white}; + color: #{mp.$color-white}; } } & > [class*="toast-body"] { - padding: lib.$spacing-md; + padding: mp.$spacing-md; } &[class*="toast--success"], @@ -72,66 +72,66 @@ $toastify-toast-close-button: var(--toast-close-button); } &[class*="toast--error"] { - --toast-close-button: #{lib.$color-red-60}; + --toast-close-button: #{mp.$color-red-60}; &:hover { - --toastify-color-error: #{lib.$color-red-70}; + --toastify-color-error: #{mp.$color-red-70}; } &:active, &:focus { - --toastify-color-error: #{lib.$color-red-80}; - --toast-close-button: #{lib.$color-red-80}; + --toastify-color-error: #{mp.$color-red-80}; + --toast-close-button: #{mp.$color-red-80}; } } &[class*="toast--info"] { - --toast-close-button: #{lib.$color-blue-50}; + --toast-close-button: #{mp.$color-blue-50}; &:hover { - --toast-close-button: #{lib.$color-blue-60}; + --toast-close-button: #{mp.$color-blue-60}; } &:active, &:focus { - --toastify-color-info: #{lib.$color-blue-70}; - --toast-close-button: #{lib.$color-blue-70}; + --toastify-color-info: #{mp.$color-blue-70}; + --toast-close-button: #{mp.$color-blue-70}; } } &[class*="toast--success"] { - --toast-close-button: #{lib.$color-green-50}; + --toast-close-button: #{mp.$color-green-50}; &:hover { - --toast-close-button: #{lib.$color-green-60}; + --toast-close-button: #{mp.$color-green-60}; } &:active, &:focus { - --toastify-color-success: #{lib.$color-green-70}; - --toast-close-button: #{lib.$color-green-70}; + --toastify-color-success: #{mp.$color-green-70}; + --toast-close-button: #{mp.$color-green-70}; } } &[class*="toast--warning"] { - --toast-close-button: #{lib.$color-yellow-50}; + --toast-close-button: #{mp.$color-yellow-50}; &:hover { - --toast-close-button: #{lib.$color-yellow-60}; + --toast-close-button: #{mp.$color-yellow-60}; } &:active, &:focus { - --toastify-color-warning: #{lib.$color-yellow-70}; - --toast-close-button: #{lib.$color-yellow-70}; + --toastify-color-warning: #{mp.$color-yellow-70}; + --toast-close-button: #{mp.$color-yellow-70}; } } } } .close-toast-button-container { - padding: lib.$spacing-md; - border-radius: 0 lib.$border-radius-sm lib.$border-radius-sm 0; + padding: mp.$spacing-md; + border-radius: 0 mp.$border-radius-sm mp.$border-radius-sm 0; background-color: $toastify-toast-close-button; display: flex; flex-direction: column; @@ -174,7 +174,7 @@ $toastify-toast-close-button: var(--toast-close-button); box-shadow: none; } - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { grid-template-areas: "logoWrapper navWrapper appPickerWrapper userMenuWrapper"; } @@ -182,23 +182,23 @@ $toastify-toast-close-button: var(--toast-close-button); grid-area: logoWrapper; display: flex; align-items: center; - max-width: calc(100% - lib.$spacing-md); + max-width: calc(100% - mp.$spacing-md); &.plain-page { - padding-top: lib.$layout-sm; + padding-top: mp.$layout-sm; justify-content: center; } .logo { display: inline-flex; align-items: center; - gap: lib.$spacing-sm; - padding: lib.$spacing-md; + gap: mp.$spacing-sm; + padding: mp.$spacing-md; // aligns the logo with the main content @ 1152px, // snaps logo in to place essentially - @media screen and (min-width: lib.$content-xl) { - padding: lib.$spacing-md lib.$spacing-xl; + @media screen and (min-width: mp.$content-xl) { + padding: mp.$spacing-md mp.$spacing-xl; } .logotype { @@ -210,7 +210,7 @@ $toastify-toast-close-button: var(--toast-close-button); .nav-wrapper { display: flex; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { grid-area: navWrapper; } } @@ -219,9 +219,9 @@ $toastify-toast-close-button: var(--toast-close-button); grid-area: appPickerWrapper; display: none; align-items: center; - padding: 0 lib.$spacing-sm; + padding: 0 mp.$spacing-sm; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { display: flex; } } @@ -230,38 +230,38 @@ $toastify-toast-close-button: var(--toast-close-button); grid-area: userMenuWrapper; display: flex; align-items: center; - padding: 0 lib.$spacing-md; + padding: 0 mp.$spacing-md; } a:hover, button:hover { - color: lib.$color-blue-50; + color: mp.$color-blue-50; } &.is-dark { - background-color: lib.$color-blue-90; - border-bottom: 1px solid rgba(lib.$color-dark-gray-90, 0.5); - box-shadow: 0 0 3px 0 rgba(lib.$color-dark-gray-90, 0.5); - color: lib.$color-white; + background-color: mp.$color-blue-90; + border-bottom: 1px solid rgba(mp.$color-dark-gray-90, 0.5); + box-shadow: 0 0 3px 0 rgba(mp.$color-dark-gray-90, 0.5); + color: mp.$color-white; a:hover, button:hover { - color: lib.$color-light-gray-30; + color: mp.$color-light-gray-30; } } &.is-light { - background-color: lib.$color-white; + background-color: mp.$color-white; color: tokens.$color-grey-40; } &.is-grey { - background-color: lib.$color-light-gray-10; + background-color: mp.$color-light-gray-10; } - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { .logo { - padding: lib.$spacing-md lib.$spacing-xl; + padding: mp.$spacing-md mp.$spacing-xl; } } } @@ -279,16 +279,16 @@ $toastify-toast-close-button: var(--toast-close-button); // Create a new stacking context for the content, so we can use z-indexes in // the content without preventing the header/mobile menu from overlapping it. isolation: isolate; - background-color: lib.$color-light-gray-10; + background-color: mp.$color-light-gray-10; } .gray-bg { - background-color: lib.$color-light-gray-10; + background-color: mp.$color-light-gray-10; } .footer { background-color: black; - color: lib.$color-white; + color: mp.$color-white; .links { font-weight: 700; @@ -296,37 +296,37 @@ $toastify-toast-close-button: var(--toast-close-button); align-items: flex-start; flex-direction: column; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; align-items: center; } .mozilla-logo { - padding: lib.$spacing-xl; + padding: mp.$spacing-xl; } .meta { display: flex; flex-direction: column; - padding: lib.$spacing-lg; + padding: mp.$spacing-lg; list-style-type: none; - gap: lib.$spacing-md; + gap: mp.$spacing-md; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; align-items: center; margin-left: auto; } a { - padding: lib.$spacing-md; + padding: mp.$spacing-md; img { display: inline-block; } &:hover { - color: lib.$color-light-gray-40; + color: mp.$color-light-gray-40; img { opacity: 0.8; @@ -338,14 +338,14 @@ $toastify-toast-close-button: var(--toast-close-button); .stock-photo-disclaimer { display: block; - padding: lib.$spacing-md; + padding: mp.$spacing-md; text-align: center; } } .api-mock-warning { - background-color: lib.$color-yellow-10; - padding: lib.$spacing-md lib.$spacing-lg; + background-color: mp.$color-yellow-10; + padding: mp.$spacing-md mp.$spacing-lg; text-align: center; position: relative; } diff --git a/frontend/src/components/layout/navigation/AppPicker.module.scss b/frontend/src/components/layout/navigation/AppPicker.module.scss index 5ee728001a..3778abd4b0 100644 --- a/frontend/src/components/layout/navigation/AppPicker.module.scss +++ b/frontend/src/components/layout/navigation/AppPicker.module.scss @@ -1,5 +1,5 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; .wrapper { align-items: center; @@ -15,16 +15,16 @@ width: 24px; height: 24px; padding: 0; - border-radius: lib.$border-radius-sm; + border-radius: mp.$border-radius-sm; svg { - color: lib.$color-white; + color: mp.$color-white; &.premium { color: tokens.$color-grey-40; } &:hover { - color: lib.$color-purple-20; + color: mp.$color-purple-20; } } } @@ -33,14 +33,14 @@ position: absolute; right: 0; // Design request to push popup down 4px - margin-top: (lib.$spacing-lg - lib.$spacing-xs); + margin-top: (mp.$spacing-lg - mp.$spacing-xs); padding: 0; - padding-bottom: lib.$spacing-lg; - min-width: lib.$content-xs; + padding-bottom: mp.$spacing-lg; + min-width: mp.$content-xs; list-style-type: none; - box-shadow: lib.$box-shadow-sm; - border-radius: lib.$border-radius-sm; - background-color: lib.$color-light-gray-10; + box-shadow: mp.$box-shadow-sm; + border-radius: mp.$border-radius-sm; + background-color: mp.$color-light-gray-10; &::before { content: ""; @@ -48,42 +48,42 @@ width: 12px; position: absolute; top: -6px; - right: lib.$spacing-sm; + right: mp.$spacing-sm; transform: rotate(45deg); - background-color: lib.$color-light-gray-10; + background-color: mp.$color-light-gray-10; } .app-picker-heading { - color: lib.$color-black; - padding: lib.$spacing-lg; + color: mp.$color-black; + padding: mp.$spacing-lg; text-align: center; display: flex; flex-direction: row; align-items: center; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; background-image: linear-gradient( to bottom, #f9f9fb calc(100% - 3px), rgba(0, 0, 0, 0) ), linear-gradient(90deg, #f73940 1.25%, #a83db5 96.87%); - border-radius: lib.$border-radius-sm lib.$border-radius-sm 0 0; + border-radius: mp.$border-radius-sm mp.$border-radius-sm 0 0; img { - height: lib.$layout-sm; + height: mp.$layout-sm; } h2 { - @include lib.text-body-md; - font-family: lib.$font-stack-base; + @include mp.text-body-md; + font-family: mp.$font-stack-base; } } ul { display: grid; grid-template-columns: repeat(3, 1fr); - gap: lib.$spacing-md; - padding: lib.$spacing-lg; + gap: mp.$spacing-md; + padding: mp.$spacing-lg; list-style-type: none; } @@ -95,37 +95,37 @@ .menu-link { display: flex; flex-direction: column; - color: lib.$color-black; + color: mp.$color-black; align-items: center; text-align: center; - @include lib.text-body-sm; + @include mp.text-body-sm; font-weight: 400; - font-family: lib.$font-stack-base; + font-family: mp.$font-stack-base; img { - height: lib.$layout-sm; - padding: lib.$spacing-lg; + height: mp.$layout-sm; + padding: mp.$spacing-lg; width: -moz-fit-content; width: fit-content; box-sizing: content-box; - border-radius: lib.$border-radius-md; + border-radius: mp.$border-radius-md; object-fit: contain; } &:hover { - color: lib.$color-violet-90; + color: mp.$color-violet-90; img { - background-color: lib.$color-light-gray-20; + background-color: mp.$color-light-gray-20; } } &.mozilla-link { - color: lib.$color-blue-50; + color: mp.$color-blue-50; justify-content: center; width: 100%; - margin-top: lib.$spacing-lg; + margin-top: mp.$spacing-lg; } } diff --git a/frontend/src/components/layout/navigation/DashboardSwitcher.module.scss b/frontend/src/components/layout/navigation/DashboardSwitcher.module.scss index e46c86b154..f37b3e4e69 100644 --- a/frontend/src/components/layout/navigation/DashboardSwitcher.module.scss +++ b/frontend/src/components/layout/navigation/DashboardSwitcher.module.scss @@ -1,15 +1,15 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; @use "../../../styles/tokens"; .nav-mask-phone { width: 100%; display: flex; flex-direction: row; - border-bottom: 1px solid lib.$color-light-gray-20; + border-bottom: 1px solid mp.$color-light-gray-20; > * { flex: 1 1 0; - padding: lib.$spacing-lg 0 lib.$spacing-md 0; + padding: mp.$spacing-lg 0 mp.$spacing-md 0; justify-content: center; display: flex; border-bottom: 5px solid transparent; @@ -46,7 +46,7 @@ align-content: center; p { - @include lib.text-body-sm; + @include mp.text-body-sm; margin: 0; font-weight: 600; align-self: center; @@ -55,7 +55,7 @@ } .hidden-desktop { - @media screen and (min-width: lib.$screen-md) { + @media screen and (min-width: mp.$screen-md) { display: none; } } diff --git a/frontend/src/components/layout/navigation/MobileNavigation.module.scss b/frontend/src/components/layout/navigation/MobileNavigation.module.scss index 4d619e489d..a171e4d2d5 100644 --- a/frontend/src/components/layout/navigation/MobileNavigation.module.scss +++ b/frontend/src/components/layout/navigation/MobileNavigation.module.scss @@ -1,5 +1,5 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; @use "../../../styles/typography" as styles-typography; .mobile-menu { @@ -18,8 +18,8 @@ #mobile-menu { transform: translateY(-100%); - background-color: lib.$color-white; - box-shadow: lib.$box-shadow-lg; + background-color: mp.$color-white; + box-shadow: mp.$box-shadow-lg; width: 100%; // Prevent the menu from being shown while collapsed; // otherwise it might get exposed when the browser "overscrolls": @@ -74,7 +74,7 @@ } .menu-item-list { - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { display: none; } } @@ -83,22 +83,22 @@ display: flex; @include styles-typography.text-display-xxs { - font-family: lib.$font-stack-firefox; - border-bottom: 2px solid lib.$color-light-gray-20; + font-family: mp.$font-stack-firefox; + border-bottom: 2px solid mp.$color-light-gray-20; } &.sign-up-menu-item { - padding: lib.$spacing-md; + padding: mp.$spacing-md; } .link { display: flex; border: none; background-color: transparent; - padding: lib.$spacing-lg lib.$spacing-md; + padding: mp.$spacing-lg mp.$spacing-md; width: 100%; flex-direction: row; - gap: lib.$spacing-md; + gap: mp.$spacing-md; font-weight: 500; color: tokens.$color-grey-40; cursor: pointer; @@ -108,7 +108,7 @@ // the content behind it scrolls), this makes it take up less space on // screens without a tall viewport, to increase the odds of every item // being visible: - padding: lib.$spacing-md; + padding: mp.$spacing-md; } &:hover { @@ -116,7 +116,7 @@ } svg { - color: lib.$color-purple-40; + color: mp.$color-purple-40; } } @@ -125,31 +125,31 @@ font-weight: 400; text-align: center; width: 100%; - padding: lib.$spacing-md; - background-color: lib.$color-blue-50; - border-radius: lib.$border-radius-sm; - margin: lib.$spacing-sm auto; + padding: mp.$spacing-md; + background-color: mp.$color-blue-50; + border-radius: mp.$border-radius-sm; + margin: mp.$spacing-sm auto; } } .user-info { display: flex; border-bottom: none; - padding: lib.$spacing-lg lib.$spacing-md; + padding: mp.$spacing-lg mp.$spacing-md; background-image: linear-gradient( to bottom, #f9f9fb calc(100% - 3px), rgba(0, 0, 0, 0) ), linear-gradient(90deg, #f73940 1.25%, #a83db5 96.87%); - gap: lib.$spacing-md; + gap: mp.$spacing-md; @media screen and (max-height: 700px) { // Because the menu is not scrollable (it stays in the same position while // the content behind it scrolls), this makes it take up less space on // screens without a tall viewport, to increase the odds of every item // being visible: - padding: lib.$spacing-md; + padding: mp.$spacing-md; } .user-avatar { @@ -162,7 +162,7 @@ } .user-email { - color: lib.$color-blue-90; + color: mp.$color-blue-90; font-weight: 500; } @@ -172,15 +172,15 @@ align-items: center; color: tokens.$color-grey-40; - @include lib.text-body-sm; - gap: lib.$spacing-sm; + @include mp.text-body-sm; + gap: mp.$spacing-sm; &:hover { text-decoration: underline; } svg { - color: lib.$color-purple-40; + color: mp.$color-purple-40; } } } diff --git a/frontend/src/components/layout/navigation/UpgradeButton.module.scss b/frontend/src/components/layout/navigation/UpgradeButton.module.scss index 6d2f21a57c..08a6dca8ba 100644 --- a/frontend/src/components/layout/navigation/UpgradeButton.module.scss +++ b/frontend/src/components/layout/navigation/UpgradeButton.module.scss @@ -1,23 +1,23 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; #upgrade-button { appearance: none; - @include lib.text-body-lg; + @include mp.text-body-lg; line-height: 1; - color: lib.$color-purple-10; + color: mp.$color-purple-10; font-weight: 600; - border-radius: lib.$border-radius-md; - font-family: lib.$font-stack-firefox; + border-radius: mp.$border-radius-md; + font-family: mp.$font-stack-firefox; - @media screen and #{lib.$mq-md} { - background-color: lib.$color-purple-20; - padding: lib.$spacing-sm lib.$spacing-md; - color: lib.$color-blue-90; + @media screen and #{mp.$mq-md} { + background-color: mp.$color-purple-20; + padding: mp.$spacing-sm mp.$spacing-md; + color: mp.$color-blue-90; } &:hover { - color: lib.$color-blue-50; + color: mp.$color-blue-50; } } diff --git a/frontend/src/components/layout/navigation/UserMenu.module.scss b/frontend/src/components/layout/navigation/UserMenu.module.scss index b5206635ef..7b27210254 100644 --- a/frontend/src/components/layout/navigation/UserMenu.module.scss +++ b/frontend/src/components/layout/navigation/UserMenu.module.scss @@ -1,5 +1,5 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; @use "../../../styles/typography"; .wrapper { @@ -24,19 +24,19 @@ .popup { position: absolute; right: 0; - margin-top: lib.$spacing-md; + margin-top: mp.$spacing-md; padding: 0; - padding-bottom: lib.$spacing-lg; - min-width: lib.$content-xs; + padding-bottom: mp.$spacing-lg; + min-width: mp.$content-xs; list-style-type: none; - box-shadow: lib.$box-shadow-md; - border-radius: lib.$border-radius-md; + box-shadow: mp.$box-shadow-md; + border-radius: mp.$border-radius-md; // The .account-menu-item has its own background color // (to overlap the $firefoxGradient everywhere but at the bottom), // so we need to push it down a bit to avoid that from covering // .popup's rounded corners: - padding-top: lib.$border-radius-md; - $popupBackgroundColor: lib.$color-light-gray-10; + padding-top: mp.$border-radius-md; + $popupBackgroundColor: mp.$color-light-gray-10; background-color: $popupBackgroundColor; &::before { @@ -45,7 +45,7 @@ width: 12px; position: absolute; top: -6px; - right: lib.$spacing-md; + right: mp.$spacing-md; transform: rotate(45deg); background-color: $popupBackgroundColor; } @@ -60,24 +60,24 @@ rgba(0, 0, 0, 0) ), tokens.$firefoxGradient; - margin-bottom: lib.$spacing-md; - padding: lib.$spacing-lg; + margin-bottom: mp.$spacing-md; + padding: mp.$spacing-lg; // To avoid overlapping .popup's rounded corners, // it has its own padding-top of $border-radius-md. Subtract that from // the .account-menu-item's padding-top: - padding-top: lib.$spacing-lg - lib.$border-radius-md; + padding-top: mp.$spacing-lg - mp.$border-radius-md; .user-email { font-weight: 700; display: block; - color: lib.$color-violet-90; + color: mp.$color-violet-90; } .settings-link { - color: lib.$color-dark-gray-50; + color: mp.$color-dark-gray-50; display: flex; align-items: center; - gap: lib.$spacing-xs; + gap: mp.$spacing-xs; } &:hover { @@ -93,28 +93,28 @@ .menu-button { display: flex; align-items: center; - gap: lib.$spacing-md; - padding: lib.$spacing-md lib.$spacing-lg; - color: lib.$color-violet-90; + gap: mp.$spacing-md; + padding: mp.$spacing-md mp.$spacing-lg; + color: mp.$color-violet-90; border-style: none; background-color: transparent; width: 100%; cursor: pointer; svg { - color: lib.$color-purple-40; + color: mp.$color-purple-40; } &:hover { text-decoration: underline; - background-color: lib.$color-light-gray-20; - color: lib.$color-violet-90; + background-color: mp.$color-light-gray-20; + color: mp.$color-violet-90; } } .settings-link { svg { - color: lib.$color-purple-40; + color: mp.$color-purple-40; } } diff --git a/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss b/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss index 44e27c7310..56554272b1 100644 --- a/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss +++ b/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss @@ -1,29 +1,29 @@ @use "../../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; @use "../../../../styles/typography"; .wrapper { display: flex; flex-direction: column; - gap: lib.$spacing-sm; - padding: lib.$spacing-md lib.$spacing-md; + gap: mp.$spacing-sm; + padding: mp.$spacing-md mp.$spacing-md; img { width: 100%; } .content { - padding: lib.$spacing-lg 0; + padding: mp.$spacing-lg 0; h2 { @include typography.text-title-2xs { - font-family: lib.$font-stack-firefox; - padding-bottom: lib.$spacing-sm; + font-family: mp.$font-stack-firefox; + padding-bottom: mp.$spacing-sm; } } .cta { - padding-top: lib.$spacing-sm; + padding-top: mp.$spacing-sm; } } diff --git a/frontend/src/components/layout/navigation/whatsnew/WhatsNewDashboard.module.scss b/frontend/src/components/layout/navigation/whatsnew/WhatsNewDashboard.module.scss index c4ce80cb02..33649009fb 100644 --- a/frontend/src/components/layout/navigation/whatsnew/WhatsNewDashboard.module.scss +++ b/frontend/src/components/layout/navigation/whatsnew/WhatsNewDashboard.module.scss @@ -1,18 +1,18 @@ @use "../../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; .wrapper { - background-color: lib.$color-white; - border-radius: lib.$border-radius-sm; + background-color: mp.$color-white; + border-radius: mp.$border-radius-sm; .controls { $closeButtonWidth: 20px; display: flex; align-items: center; justify-content: space-between; - padding: lib.$spacing-sm; - padding-left: lib.$spacing-sm + $closeButtonWidth; - border-bottom: 1px solid lib.$color-light-gray-30; + padding: mp.$spacing-sm; + padding-left: mp.$spacing-sm + $closeButtonWidth; + border-bottom: 1px solid mp.$color-light-gray-30; .switch-wrapper { flex: 1 1 0; @@ -20,17 +20,17 @@ justify-content: center; .switch { - @include lib.text-body-sm; + @include mp.text-body-sm; display: inline-flex; - gap: lib.$spacing-xs; - border-radius: lib.$border-radius-lg; - background-color: lib.$color-light-gray-30; - padding: lib.$spacing-xs; + gap: mp.$spacing-xs; + border-radius: mp.$border-radius-lg; + background-color: mp.$color-light-gray-30; + padding: mp.$spacing-xs; .switch-tab { - border-radius: lib.$border-radius-lg; - color: lib.$color-dark-gray-50; - padding: 0 lib.$spacing-md; + border-radius: mp.$border-radius-lg; + color: mp.$color-dark-gray-50; + padding: 0 mp.$spacing-md; border: 2px solid transparent; font-weight: 500; @@ -38,17 +38,17 @@ cursor: pointer; &:hover { - color: lib.$color-blue-50; + color: mp.$color-blue-50; } } &.is-selected { - background-color: lib.$color-white; - color: lib.$color-purple-70; - box-shadow: lib.$box-shadow-sm; + background-color: mp.$color-white; + color: mp.$color-purple-70; + box-shadow: mp.$box-shadow-sm; &:focus { - border-color: lib.$color-blue-50; - color: lib.$color-blue-50; + border-color: mp.$color-blue-50; + color: mp.$color-blue-50; outline: none; } } @@ -66,30 +66,30 @@ } .content { - padding-bottom: lib.$spacing-sm; + padding-bottom: mp.$spacing-sm; } .footer-controls { - padding: lib.$spacing-xs lib.$spacing-md; + padding: mp.$spacing-xs mp.$spacing-md; .controls-wrapper { display: flex; align-items: center; - border-top: 1px solid lib.$color-light-gray-20; - padding: lib.$spacing-sm 0; + border-top: 1px solid mp.$color-light-gray-20; + padding: mp.$spacing-sm 0; .start { flex: 1 0 0; } button { - @include lib.text-body-sm; + @include mp.text-body-sm; font-weight: 500; background-color: transparent; border-style: none; - border-radius: lib.$border-radius-sm; - color: lib.$color-blue-50; - padding: lib.$spacing-sm; + border-radius: mp.$border-radius-sm; + color: mp.$color-blue-50; + padding: mp.$spacing-sm; cursor: pointer; &:hover { diff --git a/frontend/src/components/layout/navigation/whatsnew/WhatsNewList.module.scss b/frontend/src/components/layout/navigation/whatsnew/WhatsNewList.module.scss index f81b5316a5..a1d62c1413 100644 --- a/frontend/src/components/layout/navigation/whatsnew/WhatsNewList.module.scss +++ b/frontend/src/components/layout/navigation/whatsnew/WhatsNewList.module.scss @@ -1,17 +1,17 @@ @use "../../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; .empty-message { display: flex; flex-direction: column; - padding-top: lib.$spacing-lg; - padding-bottom: lib.$spacing-2xl; - gap: lib.$spacing-lg; + padding-top: mp.$spacing-lg; + padding-bottom: mp.$spacing-2xl; + gap: mp.$spacing-lg; align-items: center; text-align: center; p { - @include lib.text-body-md; + @include mp.text-body-md; max-width: 75%; } } @@ -20,13 +20,13 @@ display: flex; flex-direction: column; list-style-type: none; - padding: 0 lib.$spacing-md; - max-height: min(lib.$content-md, 50vh); + padding: 0 mp.$spacing-md; + max-height: min(mp.$content-md, 50vh); overflow-y: auto; li { - padding: lib.$spacing-sm 0; - border-bottom: 1px solid lib.$color-light-gray-30; + padding: mp.$spacing-sm 0; + border-bottom: 1px solid mp.$color-light-gray-30; &:last-child { border-bottom-style: none; @@ -43,9 +43,9 @@ .item { display: flex; align-items: center; - gap: lib.$spacing-md; - border-radius: lib.$border-radius-sm; - padding: lib.$spacing-xs 0; + gap: mp.$spacing-md; + border-radius: mp.$border-radius-sm; + padding: mp.$spacing-xs 0; cursor: pointer; // Forces news icon to be the same size regardless of image size @@ -55,21 +55,21 @@ } h3 { - @include lib.text-body-sm; + @include mp.text-body-sm; font-weight: 500; } p { - @include lib.text-body-sm; + @include mp.text-body-sm; } &:hover { - background-color: lib.$color-violet-05; + background-color: mp.$color-violet-05; // An item is $hoverOverflow wider than its container when hovered, // i.e. the background colour is wider than the separator. - $hoverOverflow: lib.$spacing-sm; + $hoverOverflow: mp.$spacing-sm; margin: 0 (-1 * $hoverOverflow); - padding: lib.$spacing-xs $hoverOverflow; + padding: mp.$spacing-xs $hoverOverflow; } } } diff --git a/frontend/src/components/layout/navigation/whatsnew/WhatsNewMenu.module.scss b/frontend/src/components/layout/navigation/whatsnew/WhatsNewMenu.module.scss index 477580fca5..eb53ffa259 100644 --- a/frontend/src/components/layout/navigation/whatsnew/WhatsNewMenu.module.scss +++ b/frontend/src/components/layout/navigation/whatsnew/WhatsNewMenu.module.scss @@ -1,6 +1,6 @@ @use "../../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; -@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as lib2; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; button.trigger { flex-shrink: 0; @@ -9,18 +9,18 @@ button.trigger { background-color: transparent; border-style: none; color: inherit; - border-radius: lib.$border-radius-lg; + border-radius: mp.$border-radius-lg; cursor: pointer; - padding: lib.$spacing-xs lib.$spacing-md; - font-family: lib.$font-stack-firefox; + padding: mp.$spacing-xs mp.$spacing-md; + font-family: mp.$font-stack-firefox; position: relative; &.is-open { - background-color: lib.$color-light-gray-20; - color: lib.$color-dark-gray-20; + background-color: mp.$color-light-gray-20; + color: mp.$color-dark-gray-20; &:hover { - color: lib.$color-blue-50; + color: mp.$color-blue-50; } } @@ -30,16 +30,16 @@ button.trigger { .pill { border-radius: 100%; - padding: lib.$spacing-sm; + padding: mp.$spacing-sm; font-size: 14px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; - background-color: lib.$color-yellow-40; + background-color: mp.$color-yellow-40; font-weight: 700; - color: lib.$color-white; + color: mp.$color-white; font-style: normal; // On small screens, let the "new news entries" counter slightly overlap // the news icon. These position coordinates are not an exact science. @@ -48,8 +48,8 @@ button.trigger { right: 0; } - @media screen and #{lib.$mq-md} { - gap: lib.$spacing-sm; + @media screen and #{mp.$mq-md} { + gap: mp.$spacing-sm; position: initial; .trigger-icon { @@ -65,9 +65,9 @@ button.trigger { } .popover-wrapper { - box-shadow: lib.$box-shadow-sm; - border-radius: lib.$border-radius-sm; - width: min(lib.$content-sm, calc(100vw - 2 * lib.$spacing-md)); + box-shadow: mp.$box-shadow-sm; + border-radius: mp.$border-radius-sm; + width: min(mp.$content-sm, calc(100vw - 2 * mp.$spacing-md)); button { padding: 0; @@ -79,27 +79,27 @@ button.trigger { width: 12px; position: absolute; top: -6px; - right: lib.$spacing-lg; + right: mp.$spacing-lg; transform: rotate(45deg); - background-color: lib.$color-white; + background-color: mp.$color-white; } } .cta { - @include lib.text-body-lg; - color: lib.$color-blue-50; + @include mp.text-body-lg; + color: mp.$color-blue-50; font-weight: 500; text-decoration: underline; - margin-top: lib.$spacing-sm; + margin-top: mp.$spacing-sm; cursor: pointer; &:hover { - color: lib.$color-blue-80; + color: mp.$color-blue-80; } } .countdown-timer { display: flex; justify-content: center; - padding: lib.$spacing-2xl 0; + padding: mp.$spacing-2xl 0; } diff --git a/frontend/src/components/layout/topmessage/CsatSurvey.module.scss b/frontend/src/components/layout/topmessage/CsatSurvey.module.scss index 98a9e753d6..58cc57c9a5 100644 --- a/frontend/src/components/layout/topmessage/CsatSurvey.module.scss +++ b/frontend/src/components/layout/topmessage/CsatSurvey.module.scss @@ -1,38 +1,38 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; .wrapper { display: none; flex-direction: column; align-items: center; justify-content: space-around; - gap: lib.$spacing-sm; - padding: lib.$spacing-md 0; - background-color: lib.$color-purple-90; - color: lib.$color-white; + gap: mp.$spacing-sm; + padding: mp.$spacing-md 0; + background-color: mp.$color-purple-90; + color: mp.$color-white; position: relative; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { display: flex; } .dismiss-button { position: absolute; - right: lib.$spacing-md; + right: mp.$spacing-md; background-color: transparent; border-style: none; - color: lib.$color-white; + color: mp.$color-white; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; - border-radius: lib.$border-radius-sm; + border-radius: mp.$border-radius-sm; cursor: pointer; padding: 0; &:hover { - background-color: lib.$color-blue-50; + background-color: mp.$color-blue-50; } } } @@ -51,27 +51,27 @@ display: flex; align-items: center; justify-content: space-around; - gap: lib.$spacing-md; + gap: mp.$spacing-md; ol { display: flex; - gap: lib.$spacing-md; + gap: mp.$spacing-md; list-style-type: none; } button { - border-radius: lib.$border-radius-sm; - background-color: lib.$color-violet-40; - color: lib.$color-white; + border-radius: mp.$border-radius-sm; + background-color: mp.$color-violet-40; + color: mp.$color-white; transition: background-color 0.1s ease-out; border-style: none; - padding: lib.$spacing-sm; + padding: mp.$spacing-sm; height: 2.5rem; text-align: center; cursor: pointer; &:hover { - background-color: lib.$color-blue-50; + background-color: mp.$color-blue-50; } } } diff --git a/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss b/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss index 34127d0628..2e901d9da6 100644 --- a/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss +++ b/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss @@ -1,40 +1,40 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; // Hardcoding #5015cd after talking with design, no token for this color exists yet in Nebula. $banner-gradient: linear-gradient( 90.13deg, - lib.$color-purple-90 -2.39%, + mp.$color-purple-90 -2.39%, #5015cd 50.81%, - lib.$color-purple-50 104% + mp.$color-purple-50 104% ); .wrapper { display: flex; align-items: center; justify-content: center; - padding: lib.$spacing-md; - color: lib.$color-white; + padding: mp.$spacing-md; + color: mp.$color-white; position: relative; background-image: url("../images/holiday-promo-banner-pattern-mobile.svg"), $banner-gradient; background-repeat: no-repeat; background-size: cover; flex-direction: column; - gap: lib.$spacing-md; + gap: mp.$spacing-md; - @media screen and #{lib.$mq-sm} { + @media screen and #{mp.$mq-sm} { flex-direction: row; - gap: lib.$spacing-2xl; + gap: mp.$spacing-2xl; background-image: url("../images/holiday-promo-banner-pattern-tablet.svg"), $banner-gradient; } - @media screen and #{lib.$mq-md} { - gap: lib.$layout-xl; + @media screen and #{mp.$mq-md} { + gap: mp.$layout-xl; background-image: url("../images/holiday-promo-banner-pattern-laptop.svg"), $banner-gradient; } - @media screen and #{lib.$mq-xl} { + @media screen and #{mp.$mq-xl} { background-image: url("../images/holiday-promo-banner-pattern-desktop.svg"), $banner-gradient; } @@ -43,14 +43,14 @@ $banner-gradient: linear-gradient( display: flex; align-items: center; flex-direction: column; - gap: lib.$spacing-md; + gap: mp.$spacing-md; - @media screen and #{lib.$mq-sm} { + @media screen and #{mp.$mq-sm} { gap: 0; } - @media screen and #{lib.$mq-lg} { + @media screen and #{mp.$mq-lg} { flex-direction: row; - gap: lib.$layout-xl; + gap: mp.$layout-xl; } } @@ -63,12 +63,12 @@ $banner-gradient: linear-gradient( align-items: center; justify-content: center; cursor: pointer; - background-color: lib.$color-white; - padding: lib.$spacing-sm lib.$spacing-md; - border-radius: lib.$border-radius-sm; - color: lib.$color-purple-90; + background-color: mp.$color-white; + padding: mp.$spacing-sm mp.$spacing-md; + border-radius: mp.$border-radius-sm; + color: mp.$color-purple-90; font-weight: 700; - margin-bottom: lib.$spacing-xs; + margin-bottom: mp.$spacing-xs; &:hover { cursor: pointer; @@ -77,11 +77,11 @@ $banner-gradient: linear-gradient( } .promo-code-expiry { - color: rgba(lib.$color-white, 0.7); + color: rgba(mp.$color-white, 0.7); font-weight: 700; display: block; - @include lib.text-body-xs; + @include mp.text-body-xs; } .banner-pattern { @@ -90,15 +90,15 @@ $banner-gradient: linear-gradient( } .promo-text { - @include lib.text-body-lg; + @include mp.text-body-lg; - font-family: lib.$font-stack-base; + font-family: mp.$font-stack-base; } .promo-text-bolded { - @include lib.text-body-xl; + @include mp.text-body-xl; font-weight: 700; - font-family: lib.$font-stack-firefox; + font-family: mp.$font-stack-firefox; } } diff --git a/frontend/src/components/layout/topmessage/NpsSurvey.module.scss b/frontend/src/components/layout/topmessage/NpsSurvey.module.scss index f9407964fd..a15b238b63 100644 --- a/frontend/src/components/layout/topmessage/NpsSurvey.module.scss +++ b/frontend/src/components/layout/topmessage/NpsSurvey.module.scss @@ -1,37 +1,37 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; .wrapper { display: none; flex-direction: column; align-items: center; justify-content: space-around; - gap: lib.$spacing-sm; - padding: lib.$spacing-md 0; - background-color: lib.$color-purple-90; - color: lib.$color-white; + gap: mp.$spacing-sm; + padding: mp.$spacing-md 0; + background-color: mp.$color-purple-90; + color: mp.$color-white; position: relative; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { display: flex; } .dismiss-button { position: absolute; - right: lib.$spacing-md; + right: mp.$spacing-md; background-color: transparent; border-style: none; - color: lib.$color-white; + color: mp.$color-white; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; - border-radius: lib.$border-radius-sm; + border-radius: mp.$border-radius-sm; cursor: pointer; &:hover { - background-color: lib.$color-blue-50; + background-color: mp.$color-blue-50; } } } @@ -40,18 +40,18 @@ display: flex; align-items: center; justify-content: space-around; - gap: lib.$spacing-md; + gap: mp.$spacing-md; ol { display: flex; - gap: lib.$spacing-md; + gap: mp.$spacing-md; list-style-type: none; } button { - border-radius: lib.$border-radius-sm; - background-color: lib.$color-violet-40; - color: lib.$color-white; + border-radius: mp.$border-radius-sm; + background-color: mp.$color-violet-40; + color: mp.$color-white; transition: background-color 0.1s ease-out; border-style: none; width: 2.5rem; @@ -60,11 +60,11 @@ cursor: pointer; &:hover { - background-color: lib.$color-blue-50; + background-color: mp.$color-blue-50; } } .legend { - @include lib.text-body-sm; + @include mp.text-body-sm; } } diff --git a/frontend/src/components/phones/dashboard/PhoneDashboard.module.scss b/frontend/src/components/phones/dashboard/PhoneDashboard.module.scss index c9ea50c744..a13e6cd05d 100644 --- a/frontend/src/components/phones/dashboard/PhoneDashboard.module.scss +++ b/frontend/src/components/phones/dashboard/PhoneDashboard.module.scss @@ -1,4 +1,4 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; @use "../../../styles/tokens"; .main-phone-wrapper { @@ -7,13 +7,13 @@ flex-direction: column; .content-wrapper { - max-width: calc(lib.$content-lg + lib.$layout-lg); + max-width: calc(mp.$content-lg + mp.$layout-lg); width: 100%; height: 100%; margin: 0 auto; - padding: lib.$spacing-md; - margin-bottom: lib.$layout-md; - gap: lib.$spacing-lg; + padding: mp.$spacing-md; + margin-bottom: mp.$layout-md; + gap: mp.$spacing-lg; display: flex; flex-direction: column; // Ensure that the card can always overlap elements in the profile, @@ -22,8 +22,8 @@ } .nav-icon { - color: lib.$color-light-gray-80; - stroke: lib.$color-light-gray-80; + color: mp.$color-light-gray-80; + stroke: mp.$color-light-gray-80; stroke-width: 1px; &:hover { @@ -35,14 +35,14 @@ display: flex; flex-direction: row; justify-content: space-between; - padding: 0 lib.$spacing-xl lib.$spacing-md lib.$spacing-xl; - border-bottom: 1px solid lib.$color-light-gray-20; + padding: 0 mp.$spacing-xl mp.$spacing-md mp.$spacing-xl; + border-bottom: 1px solid mp.$color-light-gray-20; } .senders-cta { display: flex; flex-direction: row; - border-radius: lib.$border-radius-lg; + border-radius: mp.$border-radius-lg; align-items: center; border: 0; padding: 0; @@ -58,21 +58,21 @@ } } - @media screen and #{lib.$mq-md} { - padding: lib.$spacing-sm; - gap: lib.$spacing-xs; - left: lib.$spacing-sm; // Cancel out extra space from padding + @media screen and #{mp.$mq-md} { + padding: mp.$spacing-sm; + gap: mp.$spacing-xs; + left: mp.$spacing-sm; // Cancel out extra space from padding position: relative; &:hover { - background: lib.$color-light-gray-10; + background: mp.$color-light-gray-10; } } span { display: none; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { display: block; } } @@ -80,16 +80,16 @@ .dashboard-card-caller-sms-senders-header { display: flex; - padding: 0 lib.$spacing-xl lib.$spacing-md lib.$spacing-xl; + padding: 0 mp.$spacing-xl mp.$spacing-md mp.$spacing-xl; flex-direction: row; align-items: center; justify-content: space-between; - border-bottom: 1px solid lib.$color-light-gray-20; + border-bottom: 1px solid mp.$color-light-gray-20; > * { flex: auto; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { flex: 1 1 auto; span:last-child { @@ -99,11 +99,11 @@ } .caller-sms-logs-title { - @include lib.text-title-3xs; + @include mp.text-title-3xs; position: relative; text-align: center; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { left: -20px; // Width of the back button } } @@ -119,26 +119,26 @@ } .senders-panel { - padding: 0 lib.$spacing-lg; + padding: 0 mp.$spacing-lg; display: flex; flex-direction: column; align-items: center; justify-content: center; - gap: lib.$spacing-lg; - min-height: lib.$content-xs; - margin-top: lib.$spacing-lg; + gap: mp.$spacing-lg; + min-height: mp.$content-xs; + margin-top: mp.$spacing-lg; .senders-panel-body { - padding-top: lib.$spacing-sm; + padding-top: mp.$spacing-sm; text-align: center; - max-width: lib.$content-md; + max-width: mp.$content-md; margin: 0 auto; display: flex; } .update-settings-cta { display: inline-block; - padding: lib.$spacing-md 0; + padding: mp.$spacing-md 0; font-weight: 700; color: tokens.$color-blue-50; @@ -156,12 +156,12 @@ .caller-sms-senders-table { display: flex; flex-direction: column; - margin-top: lib.$spacing-lg; - padding: 0 lib.$spacing-lg; + margin-top: mp.$spacing-lg; + padding: 0 mp.$spacing-lg; - @media screen and #{lib.$mq-md} { - margin: 0 lib.$spacing-sm; - margin-top: lib.$spacing-2xl; + @media screen and #{mp.$mq-md} { + margin: 0 mp.$spacing-sm; + margin-top: mp.$spacing-2xl; } thead { @@ -174,7 +174,7 @@ clip: rect(0, 0, 0, 0); clip-path: circle(0); - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { position: unset; width: unset; height: unset; @@ -187,14 +187,14 @@ tr { display: grid; grid-template-columns: 2fr 1fr; - border-bottom: 1px solid lib.$color-light-gray-20; - padding: lib.$spacing-sm 0; + border-bottom: 1px solid mp.$color-light-gray-20; + padding: mp.$spacing-sm 0; align-items: center; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { grid-template-columns: 3fr 2fr 1fr; - grid-gap: lib.$spacing-md; + grid-gap: mp.$spacing-md; } th { @@ -215,7 +215,7 @@ .sender-date-wrapper { display: flex; align-items: center; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; } .sender-controls { @@ -226,10 +226,10 @@ } .forwarded-type-icon { - color: lib.$color-light-gray-70; + color: mp.$color-light-gray-70; } - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { .sender-number, .sender-date, .sender-controls { @@ -241,7 +241,7 @@ } .greyed-contact { - color: lib.$color-light-gray-80; + color: mp.$color-light-gray-80; } .unblocked { @@ -262,23 +262,23 @@ } .dashboard-card { - box-shadow: lib.$box-shadow-sm; + box-shadow: mp.$box-shadow-sm; background-color: tokens.$color-white; - border-radius: lib.$border-radius-md; + border-radius: mp.$border-radius-md; display: flex; flex-direction: column; - padding: lib.$spacing-md 0; - min-height: lib.$content-xs; + padding: mp.$spacing-md 0; + min-height: mp.$content-xs; .header-phone-number { - @include lib.text-body-md; - @include lib.font-firefox; + @include mp.text-body-md; + @include mp.font-firefox; display: flex; justify-content: center; align-items: center; - @media screen and #{lib.$mq-sm} { - @include lib.text-body-xl; + @media screen and #{mp.$mq-sm} { + @include mp.text-body-xl; } .copy-controls { @@ -287,18 +287,18 @@ } .phone-statistics-container { - margin: lib.$spacing-md lib.$spacing-lg 0 lib.$spacing-lg; + margin: mp.$spacing-md mp.$spacing-lg 0 mp.$spacing-lg; display: flex; flex-direction: column; justify-content: space-between; - border-radius: lib.$border-radius-lg; - border: lib.$border-radius-xs solid lib.$color-light-gray-20; - gap: lib.$spacing-md; - padding-top: lib.$spacing-md; + border-radius: mp.$border-radius-lg; + border: mp.$border-radius-xs solid mp.$color-light-gray-20; + gap: mp.$spacing-md; + padding-top: mp.$spacing-md; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; - margin: 0 lib.$spacing-lg; + margin: 0 mp.$spacing-lg; border-radius: auto; border: none; gap: none; @@ -310,64 +310,64 @@ display: flex; flex-direction: row-reverse; align-items: center; - padding-left: lib.$spacing-md; - padding-right: lib.$spacing-md; - padding-bottom: lib.$spacing-md; - border-bottom: 1px solid lib.$color-light-gray-20; + padding-left: mp.$spacing-md; + padding-right: mp.$spacing-md; + padding-bottom: mp.$spacing-md; + border-bottom: 1px solid mp.$color-light-gray-20; margin: 0; &:last-child { border-bottom: none; } - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { flex: 1; justify-content: center; align-items: center; flex-direction: column; text-align: center; - border-radius: lib.$border-radius-md; - background: lib.$color-light-gray-10; - padding: lib.$spacing-md lib.$spacing-lg; + border-radius: mp.$border-radius-md; + background: mp.$color-light-gray-10; + padding: mp.$spacing-md mp.$spacing-lg; } .phone-statistics-title { font-weight: 600; - border-radius: lib.$border-radius-md; + border-radius: mp.$border-radius-md; - @include lib.text-title-3xs; + @include mp.text-title-3xs; - @media screen and #{lib.$mq-md} { - @include lib.text-title-2xs; - @include lib.font-firefox; + @media screen and #{mp.$mq-md} { + @include mp.text-title-2xs; + @include mp.font-firefox; } } .phone-statistics-body { line-height: 120%; - @media screen and #{lib.$mq-md} { - @include lib.text-body-xs; + @media screen and #{mp.$mq-md} { + @include mp.text-body-xs; } } } .inactive-statistics { - color: lib.$color-light-gray-70; + color: mp.$color-light-gray-70; } .copy-icon { - padding: 0 lib.$spacing-sm; + padding: 0 mp.$spacing-sm; opacity: 0.5; display: inline-block; - color: lib.$color-light-gray-90; + color: mp.$color-light-gray-90; align-self: center; } .copy-button-wrapper { display: flex; flex-direction: row; - gap: lib.$spacing-xs; + gap: mp.$spacing-xs; align-items: center; justify-content: center; position: relative; @@ -384,7 +384,7 @@ cursor: pointer; svg { - width: lib.$layout-sm; + width: mp.$layout-sm; } &:hover { @@ -393,15 +393,15 @@ } .copied-confirmation { - @include lib.text-body-sm; + @include mp.text-body-sm; opacity: 0; - padding: lib.$spacing-xs lib.$spacing-sm; + padding: mp.$spacing-xs mp.$spacing-sm; justify-content: center; pointer-events: none; transition: opacity 2s; background-color: tokens.$color-violet-30; color: tokens.$color-white; - border-radius: lib.$border-radius-md; + border-radius: mp.$border-radius-md; right: 0; &.is-shown { @@ -416,30 +416,29 @@ .phone-controls-container { display: flex; flex-direction: column; - margin-top: lib.$spacing-md; - padding: 0 lib.$spacing-lg lib.$spacing-2xl lib.$spacing-lg; + margin-top: mp.$spacing-md; + padding: 0 mp.$spacing-lg mp.$spacing-2xl mp.$spacing-lg; width: 100%; - gap: lib.$spacing-lg; - border-bottom: 1px solid lib.$color-light-gray-20; + gap: mp.$spacing-lg; + border-bottom: 1px solid mp.$color-light-gray-20; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; width: auto; - gap: lib.$layout-xl; - padding: lib.$spacing-lg lib.$spacing-lg lib.$spacing-2xl - lib.$spacing-lg; - border-top: 1px solid lib.$color-light-gray-20; + gap: mp.$layout-xl; + padding: mp.$spacing-lg mp.$spacing-lg mp.$spacing-2xl mp.$spacing-lg; + border-top: 1px solid mp.$color-light-gray-20; } .phone-controls { $toggle-border-radius: 40px; .forwarding-toggle { - width: lib.$content-sm; + width: mp.$content-sm; max-width: 100%; background-color: tokens.$color-grey-05; border-radius: $toggle-border-radius; border: 6px solid tokens.$color-white; - outline: lib.$border-radius-xs solid tokens.$color-grey-10; + outline: mp.$border-radius-xs solid tokens.$color-grey-10; display: flex; align-items: center; justify-content: center; @@ -472,14 +471,14 @@ // absolutely positioned so it can be animated: z-index: 1; flex: 1 0 auto; - padding: lib.$spacing-sm lib.$spacing-sm; + padding: mp.$spacing-sm mp.$spacing-sm; display: flex; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; align-items: center; justify-content: center; - @media screen and #{lib.$mq-md} { - width: lib.$layout-xl; + @media screen and #{mp.$mq-md} { + width: mp.$layout-xl; } } @@ -511,10 +510,10 @@ .metadata-container { display: flex; flex-direction: column; - gap: lib.$spacing-md; - padding: 0 lib.$spacing-xl; - margin-top: lib.$spacing-md; - border-bottom: 1px solid lib.$color-light-gray-20; + gap: mp.$spacing-md; + padding: 0 mp.$spacing-xl; + margin-top: mp.$spacing-md; + border-bottom: 1px solid mp.$color-light-gray-20; &:last-child { border-bottom-style: none; @@ -524,21 +523,21 @@ dl { flex-grow: 2; display: flex; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; flex-direction: column; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; - gap: lib.$spacing-xl; + gap: mp.$spacing-xl; } dt { - @include lib.text-body-xs; - color: lib.$color-dark-gray-05; + @include mp.text-body-xs; + color: mp.$color-dark-gray-05; } } - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; .metadata { @@ -546,7 +545,7 @@ background-repeat: no-repeat; background-position: left center; background-size: $metadataIconSize $metadataIconSize; - padding-left: calc($metadataIconSize + lib.$spacing-md); + padding-left: calc($metadataIconSize + mp.$spacing-md); } .forward-target { diff --git a/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss b/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss index 81ff603ab0..be8238efe3 100644 --- a/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss +++ b/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss @@ -1,4 +1,4 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; @use "../../../styles/tokens"; @use "../../../styles/typography" as styles-typography; @@ -6,13 +6,13 @@ display: flex; flex-direction: column; align-items: center; - max-width: lib.$content-max; + max-width: mp.$content-max; width: 100%; margin: 0 auto; - padding: lib.$spacing-md; - margin-bottom: lib.$layout-md; - margin-top: lib.$layout-sm; - gap: lib.$layout-md; + padding: mp.$spacing-md; + margin-bottom: mp.$layout-md; + margin-top: mp.$layout-sm; + gap: mp.$layout-md; .main-heading { display: flex; @@ -21,7 +21,7 @@ h1 { @include styles-typography.text-title-xs { - @include lib.font-firefox; + @include mp.font-firefox; font-weight: 600; } } @@ -30,9 +30,9 @@ .phone-instructions-wrapper { display: flex; flex-direction: column; - margin-top: lib.$layout-md; + margin-top: mp.$layout-md; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; } @@ -41,20 +41,20 @@ position: relative; display: flex; flex-direction: column; - padding: lib.$spacing-lg 0; + padding: mp.$spacing-lg 0; - @media screen and #{lib.$mq-md} { - padding: 0 lib.$spacing-md; + @media screen and #{mp.$mq-md} { + padding: 0 mp.$spacing-md; } - @media screen and #{lib.$mq-lg} { - padding: 0 lib.$spacing-2xl; + @media screen and #{mp.$mq-lg} { + padding: 0 mp.$spacing-2xl; } + .instruction-item { - border-top: solid 2px lib.$color-light-gray-20; + border-top: solid 2px mp.$color-light-gray-20; - @media screen and #{lib.$mq-md} { - border-left: solid 2px lib.$color-light-gray-20; + @media screen and #{mp.$mq-md} { + border-left: solid 2px mp.$color-light-gray-20; border-top: none; } } @@ -63,15 +63,15 @@ align-self: center; display: inline; border-radius: 100%; - background-color: lib.$color-light-gray-30; - color: lib.$color-dark-gray-90; - padding: lib.$spacing-xs; - margin-left: lib.$spacing-sm; + background-color: mp.$color-light-gray-30; + color: mp.$color-dark-gray-90; + padding: mp.$spacing-xs; + margin-left: mp.$spacing-sm; } h2 { - @include lib.text-title-3xs; - padding: lib.$spacing-md 0; + @include mp.text-title-3xs; + padding: mp.$spacing-md 0; font-weight: 600; } @@ -96,15 +96,15 @@ } .demo-wrapper { - padding: 0 lib.$spacing-md; + padding: 0 mp.$spacing-md; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { padding: 0; } .demo-heading { - color: lib.$color-light-gray-80; - padding-top: lib.$spacing-lg; + color: mp.$color-light-gray-80; + padding-top: mp.$spacing-lg; } .demo-input-wrapper { @@ -113,16 +113,16 @@ position: relative; .demo-input { - @include lib.text-body-lg; + @include mp.text-body-lg; position: absolute; // Positioning the input into the text image margin: 0 0 5% 5%; - @media screen and #{lib.$mq-md} { - @include lib.text-body-md; + @media screen and #{mp.$mq-md} { + @include mp.text-body-md; } - @media screen and #{lib.$mq-xl} { - @include lib.text-body-lg; + @media screen and #{mp.$mq-xl} { + @include mp.text-body-lg; } } @@ -143,31 +143,31 @@ ul { display: flex; flex-direction: column; - padding: lib.$spacing-sm; + padding: mp.$spacing-sm; background: tokens.$color-white; box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1); // Taken from Figma style to match it with the other svgs - border-radius: lib.$border-radius-md; + border-radius: mp.$border-radius-md; list-style: none; - gap: lib.$spacing-xs; + gap: mp.$spacing-xs; li { display: flex; flex-direction: row; align-items: center; justify-content: space-between; - padding: lib.$spacing-xs; + padding: mp.$spacing-xs; &:first-child { - color: lib.$color-light-gray-50; - padding-bottom: lib.$spacing-sm; - border-bottom: 1px solid lib.$color-light-gray-10; + color: mp.$color-light-gray-50; + padding-bottom: mp.$spacing-sm; + border-bottom: 1px solid mp.$color-light-gray-10; } span { margin: 0; p:nth-child(2) { - @include lib.text-body-sm; + @include mp.text-body-sm; } &:nth-child(2) { @@ -182,14 +182,14 @@ } .dashboard-btn { - @include lib.font-firefox; + @include mp.font-firefox; width: 100%; text-align: center; - padding: lib.$spacing-sm; + padding: mp.$spacing-sm; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { width: auto; - padding: lib.$spacing-sm lib.$spacing-2xl; + padding: mp.$spacing-sm mp.$spacing-2xl; } } } diff --git a/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss b/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss index c860830743..196f21a705 100644 --- a/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss +++ b/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss @@ -1,35 +1,35 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; @use "../../../styles/tokens"; @use "../../../styles/typography" as styles-typography; .wrapper { display: flex; flex-direction: column; - gap: lib.$spacing-xl; + gap: mp.$spacing-xl; flex: 1 0 auto; - max-width: lib.$content-lg; + max-width: mp.$content-lg; margin: 0 auto; - padding: lib.$spacing-2xl lib.$spacing-lg; + padding: mp.$spacing-2xl mp.$spacing-lg; width: 100%; overflow-x: hidden; h2 { @include styles-typography.text-title-xs { - font-family: lib.$font-stack-firefox; + font-family: mp.$font-stack-firefox; text-align: center; } } .lead { - @include lib.text-title-3xs; - font-family: lib.$font-stack-firefox; + @include mp.text-title-3xs; + font-family: mp.$font-stack-firefox; text-align: center; display: flex; flex-direction: column; - gap: lib.$spacing-lg; + gap: mp.$spacing-lg; p { - @include lib.text-body-md; + @include mp.text-body-md; } img { @@ -38,22 +38,22 @@ } .description { - @include lib.text-body-md; + @include mp.text-body-md; display: flex; flex-direction: column; align-items: center; - gap: lib.$spacing-2xl; - padding: lib.$spacing-md; - margin-top: lib.$spacing-lg; + gap: mp.$spacing-2xl; + padding: mp.$spacing-md; + margin-top: mp.$spacing-lg; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; } ul { display: flex; flex-direction: column; - gap: lib.$spacing-md; + gap: mp.$spacing-md; margin: 0; padding: 0; @@ -71,15 +71,15 @@ align-items: center; justify-items: center; text-align: center; - gap: lib.$spacing-md; + gap: mp.$spacing-md; background-color: tokens.$color-white; - padding: lib.$spacing-lg lib.$spacing-2xl; - border-radius: lib.$border-radius-md; - box-shadow: lib.$box-shadow-sm; + padding: mp.$spacing-lg mp.$spacing-2xl; + border-radius: mp.$border-radius-md; + box-shadow: mp.$box-shadow-sm; h3 { - @include lib.text-body-md; - font-family: lib.$font-stack-firefox; + @include mp.text-body-md; + font-family: mp.$font-stack-firefox; text-align: center; font-weight: 400; } @@ -87,19 +87,19 @@ .pricing { display: flex; flex-direction: column; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; width: 100%; // Ensures responsiveness of container, and that the purchase tabpanel has a static width when toggling. .pricing-toggle { display: flex; background-color: tokens.$color-grey-10; - padding: lib.$spacing-xs; - border-radius: lib.$border-radius-lg; + padding: mp.$spacing-xs; + border-radius: mp.$border-radius-lg; > div { - @include lib.text-body-sm; + @include mp.text-body-sm; width: 50%; - padding: lib.$spacing-xs lib.$spacing-sm; + padding: mp.$spacing-xs mp.$spacing-sm; text-align: center; color: tokens.$color-grey-40; font-weight: 500; @@ -107,7 +107,7 @@ &.is-selected { background-color: tokens.$color-white; - border-radius: lib.$border-radius-lg; + border-radius: mp.$border-radius-lg; color: tokens.$color-blue-50; } } @@ -116,17 +116,17 @@ [role="tabpanel"] { display: flex; flex-direction: column; - gap: lib.$spacing-md; + gap: mp.$spacing-md; .price { @include styles-typography.text-title-2xs { - padding-top: lib.$spacing-sm; + padding-top: mp.$spacing-sm; display: block; font-weight: 700; } > span { - @include lib.text-body-sm; + @include mp.text-body-sm; font-weight: 400; vertical-align: middle; } diff --git a/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss b/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss index 0503f057bd..182e753cc1 100644 --- a/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss +++ b/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss @@ -1,5 +1,5 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; -@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as lib2; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; @use "../../../styles/tokens"; @use "../../../styles/typography" as styles-typography; @@ -8,10 +8,10 @@ display: flex; flex-direction: column; justify-content: center; - gap: lib.$spacing-2xl; - max-width: lib.$content-md; + gap: mp.$spacing-2xl; + max-width: mp.$content-md; margin: 0 auto; - padding: lib.$spacing-lg; + padding: mp.$spacing-lg; .button { // TODO: This is not working @@ -22,21 +22,21 @@ h2 { @include styles-typography.text-title-xs { - font-family: lib.$font-stack-firefox; + font-family: mp.$font-stack-firefox; text-align: center; } } .lead { - @include lib.text-title-3xs; - font-family: lib.$font-stack-firefox; + @include mp.text-title-3xs; + font-family: mp.$font-stack-firefox; text-align: center; display: flex; flex-direction: column; - gap: lib.$spacing-lg; + gap: mp.$spacing-lg; p { - @include lib.text-body-md; + @include mp.text-body-md; } img { @@ -45,22 +45,22 @@ } .description { - @include lib.text-body-md; + @include mp.text-body-md; display: flex; flex-direction: column; align-items: center; - gap: lib.$spacing-2xl; - padding: lib.$spacing-md; - margin-top: lib.$spacing-lg; + gap: mp.$spacing-2xl; + padding: mp.$spacing-md; + margin-top: mp.$spacing-lg; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; } ul { display: flex; flex-direction: column; - gap: lib.$spacing-md; + gap: mp.$spacing-md; margin: 0; padding: 0; } @@ -74,22 +74,22 @@ align-items: center; justify-items: center; text-align: center; - gap: lib.$spacing-md; + gap: mp.$spacing-md; background-color: tokens.$color-white; - padding: lib.$spacing-lg lib.$spacing-2xl; - border-radius: lib.$border-radius-md; - box-shadow: lib.$box-shadow-sm; + padding: mp.$spacing-lg mp.$spacing-2xl; + border-radius: mp.$border-radius-md; + box-shadow: mp.$box-shadow-sm; h3 { - @include lib.text-body-md; - font-family: lib.$font-stack-firefox; + @include mp.text-body-md; + font-family: mp.$font-stack-firefox; text-align: center; font-weight: 400; } span { @include styles-typography.text-title-2xs { - padding-top: lib.$spacing-sm; + padding-top: mp.$spacing-sm; display: block; font-weight: 700; } @@ -100,18 +100,18 @@ // Step 2: Verify Phone Number .step-verify-input .error { - max-width: lib.$content-sm; + max-width: mp.$content-sm; background-color: tokens.$color-white; - border-radius: lib.$border-radius-md; - box-shadow: lib.$box-shadow-sm; - padding: lib.$spacing-md; + border-radius: mp.$border-radius-md; + box-shadow: mp.$box-shadow-sm; + padding: mp.$spacing-md; text-align: center; margin: 0 auto; } .step-verify-sub-body { background-color: tokens.$color-white; - border-radius: lib.$border-radius-md; - padding: lib.$spacing-lg; + border-radius: mp.$border-radius-md; + padding: mp.$spacing-lg; } .step-verify-input .is-hidden { @@ -119,11 +119,11 @@ } .form { - max-width: lib.$content-sm; + max-width: mp.$content-sm; margin: 0 auto; display: flex; flex-direction: column; - gap: lib.$spacing-lg; + gap: mp.$spacing-lg; } // Step 3: Enter verification code @@ -136,7 +136,7 @@ } h2 { - padding-top: lib.$spacing-md; + padding-top: mp.$spacing-md; } &.is-error, @@ -167,18 +167,18 @@ form { background-color: tokens.$color-white; - box-shadow: lib.$box-shadow-sm; - padding: lib.$spacing-lg; - border-radius: lib.$border-radius-md; - max-width: lib.$screen-sm; + box-shadow: mp.$box-shadow-sm; + padding: mp.$spacing-lg; + border-radius: mp.$border-radius-md; + max-width: mp.$screen-sm; position: relative; &.is-hidden { display: none; } - @media screen and #{lib.$mq-md} { - padding: lib.$spacing-lg lib.$spacing-2xl; + @media screen and #{mp.$mq-md} { + padding: mp.$spacing-lg mp.$spacing-2xl; } p { @@ -195,10 +195,10 @@ } input { - @include lib.text-body-xl; - border-radius: lib.$border-radius-md; + @include mp.text-body-xl; + border-radius: mp.$border-radius-md; display: block; - padding: lib.$spacing-sm; + padding: mp.$spacing-sm; box-shadow: none; border: 0; background-color: tokens.$color-grey-10; @@ -211,8 +211,8 @@ outline: 4px solid tokens.$color-error-focus; } - @media screen and #{lib.$mq-md} { - padding: lib.$spacing-md; + @media screen and #{mp.$mq-md} { + padding: mp.$spacing-md; letter-spacing: 2rem; } } @@ -221,14 +221,14 @@ .step-input-verificiation-code-timeout { background-color: tokens.$color-white; - box-shadow: lib.$box-shadow-sm; - border-radius: lib.$border-radius-md; - padding: lib.$spacing-lg lib.$spacing-2xl; - max-width: lib.$screen-sm; + box-shadow: mp.$box-shadow-sm; + border-radius: mp.$border-radius-md; + padding: mp.$spacing-lg mp.$spacing-2xl; + max-width: mp.$screen-sm; margin: 0 auto; display: flex; flex-direction: column; - gap: lib.$spacing-lg; + gap: mp.$spacing-lg; &.is-hidden { display: none; @@ -241,14 +241,14 @@ .step-input-verificiation-code-success { background-color: tokens.$color-white; - box-shadow: lib.$box-shadow-sm; - border-radius: lib.$border-radius-md; - padding: lib.$spacing-lg lib.$spacing-2xl; - max-width: lib.$screen-sm; + box-shadow: mp.$box-shadow-sm; + border-radius: mp.$border-radius-md; + padding: mp.$spacing-lg mp.$spacing-2xl; + max-width: mp.$screen-sm; margin: 0 auto; display: flex; flex-direction: column; - gap: lib.$spacing-lg; + gap: mp.$spacing-lg; justify-content: center; &.is-hidden { @@ -256,7 +256,7 @@ } h3 { - @include lib.text-body-md; + @include mp.text-body-md; } p, @@ -270,13 +270,13 @@ align-items: center; position: relative; - @include lib.text-body-sm; + @include mp.text-body-sm; } .phone-input { - width: lib.$content-xs; - height: lib.$layout-sm; - padding: lib.$spacing-md lib.$spacing-sm lib.$spacing-md lib.$spacing-2xl; + width: mp.$content-xs; + height: mp.$layout-sm; + padding: mp.$spacing-md mp.$spacing-sm mp.$spacing-md mp.$spacing-2xl; &.is-error { border: 2px solid tokens.$color-red-60; @@ -287,8 +287,8 @@ // static country code in the real phone number input "+1" .phone-input-country-code { background-color: tokens.$color-grey-10; - border-radius: lib.$border-radius-sm; + border-radius: mp.$border-radius-sm; position: absolute; - padding: 0 lib.$spacing-sm; - margin-left: lib.$spacing-sm; + padding: 0 mp.$spacing-sm; + margin-left: mp.$spacing-sm; } diff --git a/frontend/src/components/phones/onboarding/RelayNumberConfirmationModal.module.scss b/frontend/src/components/phones/onboarding/RelayNumberConfirmationModal.module.scss index a73314829d..d571be7083 100644 --- a/frontend/src/components/phones/onboarding/RelayNumberConfirmationModal.module.scss +++ b/frontend/src/components/phones/onboarding/RelayNumberConfirmationModal.module.scss @@ -1,10 +1,10 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; -@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as lib2; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; .underlay { position: fixed; - background-color: rgba(lib.$color-black, 0.4); + background-color: rgba(mp.$color-black, 0.4); top: 0; bottom: 0; left: 0; @@ -17,30 +17,30 @@ display: flex; flex-direction: column; align-items: flex-end; - background: lib.$color-white; - gap: lib.$spacing-lg; - max-width: lib.$content-sm; - border-radius: lib.$border-radius-md; - box-shadow: lib.$box-shadow-sm; - padding: lib.$spacing-md; + background: mp.$color-white; + gap: mp.$spacing-lg; + max-width: mp.$content-sm; + border-radius: mp.$border-radius-md; + box-shadow: mp.$box-shadow-sm; + padding: mp.$spacing-md; .dialog-content { display: flex; flex-direction: column; align-items: center; text-align: center; - gap: lib.$spacing-xl; - padding: lib.$spacing-lg lib.$spacing-md; + gap: mp.$spacing-xl; + padding: mp.$spacing-lg mp.$spacing-md; p { display: flex; - gap: lib.$spacing-xs; + gap: mp.$spacing-xs; flex-direction: column; } } .confirm-button { - width: lib.$content-xs; + width: mp.$content-xs; } .cancel-button { @@ -50,11 +50,11 @@ color: tokens.$color-grey-40; &:hover { - color: lib.$color-link-hover; + color: mp.$color-link-hover; } &:focus { - color: lib.$color-blue-50; + color: mp.$color-blue-50; } } } diff --git a/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss b/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss index 9eff960fa3..274a2ba6ae 100644 --- a/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss +++ b/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss @@ -1,16 +1,16 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as lib2; -@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; @use "../../../styles/tokens"; @use "../../../styles/typography" as styles-typography; .step, .controls { - max-width: lib2.$content-md; + max-width: mp.$content-md; margin: 0 auto; - padding: lib2.$spacing-lg; + padding: mp.$spacing-lg; &.step-welcome { - max-width: lib2.$content-lg; + max-width: mp.$content-lg; } } @@ -19,7 +19,7 @@ display: flex; flex-direction: column; justify-content: center; - gap: lib2.$spacing-2xl; + gap: mp.$spacing-2xl; .show-more-options { font-weight: 400; @@ -36,21 +36,21 @@ h2 { @include styles-typography.text-title-xs { - font-family: lib2.$font-stack-firefox; + font-family: mp.$font-stack-firefox; text-align: center; } } .lead { - @include lib2.text-body-sm; - font-family: lib2.$font-stack-base; + @include mp.text-body-sm; + font-family: mp.$font-stack-base; text-align: center; display: flex; flex-direction: column; - gap: lib2.$spacing-lg; + gap: mp.$spacing-lg; p { - @include lib2.text-body-md; + @include mp.text-body-md; } img { @@ -59,22 +59,22 @@ } .description { - @include lib2.text-body-md; + @include mp.text-body-md; display: flex; flex-direction: column; align-items: center; - gap: lib2.$spacing-2xl; - padding: lib2.$spacing-md; - margin-top: lib2.$spacing-lg; + gap: mp.$spacing-2xl; + padding: mp.$spacing-md; + margin-top: mp.$spacing-lg; - @media screen and #{lib2.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; } ul { display: flex; flex-direction: column; - gap: lib2.$spacing-md; + gap: mp.$spacing-md; margin: 0; padding: 0; } @@ -88,22 +88,22 @@ align-items: center; justify-items: center; text-align: center; - gap: lib2.$spacing-md; + gap: mp.$spacing-md; background-color: tokens.$color-white; - padding: lib2.$spacing-lg lib2.$spacing-2xl; - border-radius: lib2.$border-radius-md; - box-shadow: lib2.$box-shadow-sm; + padding: mp.$spacing-lg mp.$spacing-2xl; + border-radius: mp.$border-radius-md; + box-shadow: mp.$box-shadow-sm; h3 { - @include lib2.text-body-md; - font-family: lib2.$font-stack-firefox; + @include mp.text-body-md; + font-family: mp.$font-stack-firefox; text-align: center; font-weight: 400; } span { @include styles-typography.text-title-2xs { - padding-top: lib2.$spacing-sm; + padding-top: mp.$spacing-sm; display: block; font-weight: 700; } @@ -111,11 +111,11 @@ } .form { - max-width: lib2.$content-sm; + max-width: mp.$content-sm; margin: 0 auto; display: flex; flex-direction: column; - gap: lib2.$spacing-lg; + gap: mp.$spacing-lg; } } @@ -156,18 +156,18 @@ form { background-color: tokens.$color-white; - box-shadow: lib2.$box-shadow-sm; - padding: lib2.$spacing-lg; - border-radius: lib2.$border-radius-md; - max-width: lib2.$screen-sm; + box-shadow: mp.$box-shadow-sm; + padding: mp.$spacing-lg; + border-radius: mp.$border-radius-md; + max-width: mp.$screen-sm; position: relative; &.is-hidden { display: none; } - @media screen and #{lib2.$mq-md} { - padding: lib2.$spacing-lg lib2.$spacing-2xl; + @media screen and #{mp.$mq-md} { + padding: mp.$spacing-lg mp.$spacing-2xl; } p { @@ -184,10 +184,10 @@ } input { - @include lib2.text-body-xl; - border-radius: lib2.$border-radius-md; + @include mp.text-body-xl; + border-radius: mp.$border-radius-md; display: block; - padding: lib2.$spacing-sm; + padding: mp.$spacing-sm; box-shadow: none; border: 0; background-color: tokens.$color-grey-10; @@ -200,8 +200,8 @@ outline: 4px solid tokens.$color-error-focus; } - @media screen and #{lib2.$mq-md} { - padding: lib2.$spacing-md; + @media screen and #{mp.$mq-md} { + padding: mp.$spacing-md; letter-spacing: 2rem; } } @@ -210,14 +210,14 @@ .step-input-verificiation-code-success { background-color: tokens.$color-white; - box-shadow: lib2.$box-shadow-sm; - border-radius: lib2.$border-radius-md; - padding: lib2.$spacing-lg lib2.$spacing-2xl; - max-width: lib2.$screen-sm; + box-shadow: mp.$box-shadow-sm; + border-radius: mp.$border-radius-md; + padding: mp.$spacing-lg mp.$spacing-2xl; + max-width: mp.$screen-sm; margin: 0 auto; display: flex; flex-direction: column; - gap: lib2.$spacing-lg; + gap: mp.$spacing-lg; justify-content: center; &.is-hidden { @@ -225,7 +225,7 @@ } h3 { - @include lib2.text-body-md; + @include mp.text-body-md; } p, @@ -236,20 +236,20 @@ .step-select-phone-number-mask { background-color: tokens.$color-white; - box-shadow: lib2.$box-shadow-sm; - border-radius: lib2.$border-radius-md; - padding: lib2.$spacing-xl lib2.$spacing-lg; + box-shadow: mp.$box-shadow-sm; + border-radius: mp.$border-radius-md; + padding: mp.$spacing-xl mp.$spacing-lg; width: 100%; margin: 0 auto; display: flex; flex-direction: column; - gap: lib2.$spacing-lg; + gap: mp.$spacing-lg; justify-content: center; .lead { display: flex; flex-direction: row; - gap: lib2.$spacing-md; + gap: mp.$spacing-md; align-items: center; justify-content: center; @@ -268,22 +268,22 @@ flex-direction: column; align-items: center; justify-content: center; - gap: lib2.$spacing-md; + gap: mp.$spacing-md; > div { display: flex; - gap: lib2.$spacing-sm; + gap: mp.$spacing-sm; } } .search { - @include lib.form-input; + @include mp_forms.form-input; position: relative; - padding-left: lib2.$layout-md; - background: lib2.$spacing-sm center transparent no-repeat; + padding-left: mp.$layout-md; + background: mp.$spacing-sm center transparent no-repeat; background-image: url("/icons/search-blue.svg"); background-size: 1.5rem auto; - max-width: lib2.$content-xs; + max-width: mp.$content-xs; margin: 0 auto; } } @@ -293,24 +293,24 @@ // Magic number: Min-height for both loading animation and body copy // TODO: Use height of parent container flex-direction: column; - gap: lib2.$spacing-md; + gap: mp.$spacing-md; align-items: center; justify-content: center; - @media screen and #{lib2.$mq-tall} { + @media screen and #{mp.$mq-tall} { // min-height: 75vh; } .loading { - width: lib2.$layout-lg; - height: lib2.$layout-lg; + width: mp.$layout-lg; + height: mp.$layout-lg; background: url("./images/loading.svg") center no-repeat transparent; background-size: contain; animation: spin 1s infinite linear; } p { - max-width: lib2.$content-xs; + max-width: mp.$content-xs; margin: 0 auto; text-align: center; } diff --git a/frontend/src/components/waitlist/WaitlistPage.module.scss b/frontend/src/components/waitlist/WaitlistPage.module.scss index 8ca930e39f..14c7ca58f3 100644 --- a/frontend/src/components/waitlist/WaitlistPage.module.scss +++ b/frontend/src/components/waitlist/WaitlistPage.module.scss @@ -1,6 +1,6 @@ @use "~@mozilla-protocol/core/protocol/css/includes/tokens/dist/index" as dist; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as lib2; -@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; @use "../../styles/typography" as styles-typography; .wrapper { @@ -8,47 +8,47 @@ justify-content: space-around; align-items: center; height: 100%; - padding: lib2.$spacing-sm lib2.$spacing-lg; + padding: mp.$spacing-sm mp.$spacing-lg; .form { - width: lib2.$content-lg; + width: mp.$content-lg; max-width: 100%; display: flex; flex-direction: column; align-items: center; - gap: lib2.$spacing-2xl; - padding: lib2.$spacing-md 0; + gap: mp.$spacing-2xl; + padding: mp.$spacing-md 0; .controls { display: flex; flex-direction: column; - gap: lib2.$spacing-sm; - width: lib2.$content-md; + gap: mp.$spacing-sm; + width: mp.$content-md; max-width: 100%; .control { display: flex; flex-direction: column; - gap: lib2.$spacing-xs; + gap: mp.$spacing-xs; width: 100%; label { - @include lib.field-label; - @include lib2.text-body-md; + @include mp_forms.field-label; + @include mp.text-body-md; padding: 0; } i { - @include lib2.text-body-sm; + @include mp.text-body-sm; } input { - @include lib.form-input; + @include mp_forms.form-input; width: 100%; } select { - @include lib.form-input; + @include mp_forms.form-input; width: 100%; } } @@ -59,19 +59,19 @@ } .privacy { - @include lib2.text-body-sm; + @include mp.text-body-sm; align-self: center; text-align: center; display: flex; flex-direction: column; - gap: lib2.$spacing-md; + gap: mp.$spacing-md; a { - color: lib2.$color-blue-50; + color: mp.$color-blue-50; text-decoration: underline; &:hover { - color: lib2.$color-blue-60; + color: mp.$color-blue-60; text-decoration: none; } } @@ -80,14 +80,14 @@ .heading { @include styles-typography.text-title-sm { - font-family: lib2.$font-stack-firefox; + font-family: mp.$font-stack-firefox; align-self: center; text-align: center; } } .lead { - @include lib2.text-body-lg; + @include mp.text-body-lg; align-self: center; text-align: center; } diff --git a/frontend/src/pages/accounts/account_inactive.module.scss b/frontend/src/pages/accounts/account_inactive.module.scss index 7be77f8b12..3dc4884167 100644 --- a/frontend/src/pages/accounts/account_inactive.module.scss +++ b/frontend/src/pages/accounts/account_inactive.module.scss @@ -1,6 +1,6 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; .error { - background-color: lib.$color-red-60; - color: lib.$color-white; + background-color: mp.$color-red-60; + color: mp.$color-white; } diff --git a/frontend/src/pages/accounts/profile.module.scss b/frontend/src/pages/accounts/profile.module.scss index 8f431e8f82..9a139679ba 100644 --- a/frontend/src/pages/accounts/profile.module.scss +++ b/frontend/src/pages/accounts/profile.module.scss @@ -1,20 +1,20 @@ @use "../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; @use "~@mozilla-protocol/core/protocol/css/includes/mixins/typography" as mixins-typography; @use "../../styles/typography"; .header { - background-color: lib.$color-light-gray-05; + background-color: mp.$color-light-gray-05; width: 100%; - padding: lib.$spacing-md 0; + padding: mp.$spacing-md 0; .header-wrapper { display: flex; flex-direction: column; - gap: lib.$spacing-md; + gap: mp.$spacing-md; - @media screen and #{lib.$mq-lg} { + @media screen and #{mp.$mq-lg} { flex-direction: row; align-items: center; } @@ -23,14 +23,14 @@ flex: 1 0 auto; display: flex; flex-direction: column; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; .greeting { - @include lib.text-body-xl; + @include mp.text-body-xl; font-weight: 700; .lead { - @include lib.text-body-md; + @include mp.text-body-md; font-weight: 400; display: block; } @@ -40,20 +40,20 @@ display: flex; flex-wrap: wrap; align-items: center; - gap: lib.$spacing-xs; - color: lib.$color-blue-50; + gap: mp.$spacing-xs; + color: mp.$color-blue-50; .info-icon { align-items: center; background-color: transparent; border-style: none; - color: lib.$color-light-gray-70; + color: mp.$color-light-gray-70; cursor: pointer; display: flex; } .pencil-icon { - margin-right: lib.$spacing-xs; + margin-right: mp.$spacing-xs; } } @@ -65,11 +65,11 @@ .account-stats { display: grid; grid-template-columns: 1fr 1fr; - gap: lib.$spacing-md; + gap: mp.$spacing-md; text-align: center; justify-content: space-evenly; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { display: flex; } @@ -79,25 +79,25 @@ $arrowWidth: 6px; .tooltip { - @include lib.text-body-sm; + @include mp.text-body-sm; position: absolute; - width: lib.$content-xs; - color: lib.$color-white; - max-width: calc(100% - 2 * lib.$spacing-xs); - top: calc(100% + $arrowWidth + lib.$spacing-xs); + width: mp.$content-xs; + color: mp.$color-white; + max-width: calc(100% - 2 * mp.$spacing-xs); + top: calc(100% + $arrowWidth + mp.$spacing-xs); font-weight: 400; - right: lib.$spacing-xs; - background-color: lib.$color-purple-80; - box-shadow: lib.$box-shadow-sm; + right: mp.$spacing-xs; + background-color: mp.$color-purple-80; + box-shadow: mp.$box-shadow-sm; display: flex; flex-direction: column; - gap: lib.$spacing-sm; - padding: lib.$spacing-md lib.$spacing-md; - border-radius: lib.$border-radius-sm; + gap: mp.$spacing-sm; + padding: mp.$spacing-md mp.$spacing-md; + border-radius: mp.$border-radius-sm; // Prevent other .stat-wrapper elements from overlapping this tooltip: z-index: 2; - @media screen and #{lib.$mq-lg} { + @media screen and #{mp.$mq-lg} { // The wrapper doesn't span the full width on large screens, // so limiting the tooltip to its wrapper's size makes it too thin: max-width: unset; @@ -109,11 +109,11 @@ width: 2 * $arrowWidth; position: absolute; top: -1 * $arrowWidth; - right: lib.$spacing-md; + right: mp.$spacing-md; transform: rotate(45deg); - background-color: lib.$color-purple-80; - border-top: 1px solid lib.$color-purple-80; - border-left: 1px solid lib.$color-purple-80; + background-color: mp.$color-purple-80; + border-top: 1px solid mp.$color-purple-80; + border-left: 1px solid mp.$color-purple-80; } } @@ -128,13 +128,13 @@ display: flex; flex-direction: column; align-items: center; - gap: lib.$spacing-xs; - padding: lib.$spacing-md; - background-color: lib.$color-white; - border: 1px solid lib.$color-light-gray-20; - border-radius: lib.$border-radius-md; + gap: mp.$spacing-xs; + padding: mp.$spacing-md; + background-color: mp.$color-white; + border: 1px solid mp.$color-light-gray-20; + border-radius: mp.$border-radius-md; - @media screen and #{lib.$mq-lg} { + @media screen and #{mp.$mq-lg} { // On small screens, stats have a border and all that, but since // Protocol doesn't have max-width media queries, we need to unset // all those for larger screens: @@ -150,35 +150,35 @@ } .label { - @include lib.text-body-sm; - color: lib.$color-dark-gray-10; + @include mp.text-body-sm; + color: mp.$color-dark-gray-10; } .maxed { - color: lib.$color-purple-50; + color: mp.$color-purple-50; } .value { @include typography.text-title-xs { - font-family: lib.$font-stack-firefox; + font-family: mp.$font-stack-firefox; font-weight: 700; - padding: lib.$spacing-xs 0; + padding: mp.$spacing-xs 0; flex: 1 0 auto; display: flex; flex-direction: column; } .learn-more-wrapper { - @include lib.text-body-sm; + @include mp.text-body-sm; font-weight: 400; .open-button { background-color: transparent; border-style: none; - border-radius: lib.$border-radius-lg; - color: lib.$color-blue-50; - padding-inline: lib.$spacing-md; - font-family: lib.$font-stack-base; + border-radius: mp.$border-radius-lg; + color: mp.$color-blue-50; + padding-inline: mp.$spacing-md; + font-family: mp.$font-stack-base; font-weight: 500; cursor: pointer; @@ -195,32 +195,32 @@ align-self: end; background-color: transparent; border-style: none; - border-radius: lib.$border-radius-sm; + border-radius: mp.$border-radius-sm; float: right; padding: 0; cursor: pointer; &:hover { - color: lib.$color-blue-50; + color: mp.$color-blue-50; } } .learn-more-tooltip { - padding: lib.$spacing-md; - background-color: lib.$color-white; - width: lib.$content-sm; + padding: mp.$spacing-md; + background-color: mp.$color-white; + width: mp.$content-sm; // On small screens, the tooltip should span the full width, // minus the padding around `.stat` elements (i.e. the value of // `gap` for `.account-stats`): - max-width: calc(100vw - lib.$spacing-md * 2); - box-shadow: lib.$box-shadow-sm; - border-radius: lib.$border-radius-sm; + max-width: calc(100vw - mp.$spacing-md * 2); + box-shadow: mp.$box-shadow-sm; + border-radius: mp.$border-radius-sm; text-align: start; p + p { // Not using `gap` on the parent becase we don't want space // between the close button and the first paragraph: - margin-top: lib.$spacing-md; + margin-top: mp.$spacing-md; } } } @@ -238,7 +238,7 @@ right: 0; } - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { // On medium-sized screens, the `.stat` items are in a row, // so only the first element should have the tooltip aligned to its // left-hand side: @@ -253,12 +253,12 @@ } .upsell-banner { - background-color: lib.$color-blue-90; + background-color: mp.$color-blue-90; .upsell-banner-description, .upsell-banner-header { - @include lib.font-firefox; - color: lib.$color-white; + @include mp.font-firefox; + color: mp.$color-white; } .upsell-banner-header { @@ -268,7 +268,7 @@ } .upsell-banner-description { - @include lib.text-body-lg; + @include mp.text-body-lg; } .upsell-banner-wrapper { @@ -276,25 +276,25 @@ align-items: center; justify-content: center; flex-direction: column-reverse; - padding: lib.$spacing-xl 0; - gap: lib.$spacing-2xl; + padding: mp.$spacing-xl 0; + gap: mp.$spacing-2xl; - @media screen and #{lib.$mq-lg} { + @media screen and #{mp.$mq-lg} { flex-direction: row; - gap: lib.$spacing-xs; + gap: mp.$spacing-xs; } } .upsell-banner-image { - max-width: lib.$content-md; + max-width: mp.$content-md; width: 100%; } .upsell-banner-content { - max-width: lib.$content-md; + max-width: mp.$content-md; display: flex; - gap: lib.$spacing-lg; - padding: 0 lib.$spacing-xl; + gap: mp.$spacing-lg; + padding: 0 mp.$spacing-xl; flex-direction: column; align-items: flex-start; } @@ -304,14 +304,14 @@ display: flex; flex-direction: column; align-items: baseline; - gap: lib.$spacing-md; - padding-bottom: lib.$spacing-xl; + gap: mp.$spacing-md; + padding-bottom: mp.$spacing-xl; // Ensure that the card can always overlap elements in the profile, // even if they have z-indexes to overlap each other: isolation: isolate; - @media screen and (min-width: lib.$screen-md) { - background-color: lib.$color-light-gray-10; + @media screen and (min-width: mp.$screen-md) { + background-color: mp.$color-light-gray-10; } } @@ -320,58 +320,58 @@ .bottom-banner-wrapper, .no-premium-header, .header-wrapper { - max-width: lib.$content-xl; + max-width: mp.$content-xl; width: 100%; margin: 0 auto; - padding: 0 lib.$spacing-md; + padding: 0 mp.$spacing-md; } .banners-wrapper { - gap: lib.$spacing-lg; + gap: mp.$spacing-lg; display: flex; flex-direction: column; } .no-premium-header { - padding-top: lib.$spacing-xl; + padding-top: mp.$spacing-xl; } .main-wrapper { display: flex; flex-direction: column; - gap: lib.$spacing-xl; + gap: mp.$spacing-xl; } .size-information { - padding: 0 0 lib.$spacing-lg; + padding: 0 0 mp.$spacing-lg; } .bottom-banner { - background-color: lib.$color-white; + background-color: mp.$color-white; width: 100%; .bottom-banner-wrapper { display: flex; flex-direction: column; justify-content: space-evenly; - gap: lib.$spacing-xl; - padding: lib.$spacing-xl; + gap: mp.$spacing-xl; + padding: mp.$spacing-xl; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; } } .bottom-banner-content { - max-width: lib.$screen-sm; + max-width: mp.$screen-sm; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-evenly; - gap: lib.$spacing-md; + gap: mp.$spacing-md; h3 { - @include lib.font-mozilla; + @include mp.font-mozilla; @include typography.text-title-xs { font-weight: 500; } @@ -382,8 +382,8 @@ } p { - @include lib.text-body-md; - color: lib.$color-light-gray-90; + @include mp.text-body-md; + color: mp.$color-light-gray-90; } } } diff --git a/frontend/src/pages/accounts/settings.module.scss b/frontend/src/pages/accounts/settings.module.scss index 9785fa8426..cd1ea9255d 100644 --- a/frontend/src/pages/accounts/settings.module.scss +++ b/frontend/src/pages/accounts/settings.module.scss @@ -1,4 +1,4 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; @use "../../styles/tokens"; .settings-page { @@ -7,10 +7,10 @@ } .menu { - padding: lib.$spacing-lg lib.$spacing-lg 0; + padding: mp.$spacing-lg mp.$spacing-lg 0; h1 { - padding-bottom: lib.$spacing-lg; + padding-bottom: mp.$spacing-lg; } ul { @@ -19,15 +19,15 @@ list-style-type: none; li { - padding: lib.$spacing-sm 0; + padding: mp.$spacing-sm 0; } a { - @include lib.text-body-lg; + @include mp.text-body-lg; display: flex; align-items: center; - color: lib.$color-dark-gray-50; - gap: lib.$spacing-sm; + color: mp.$color-dark-gray-50; + gap: mp.$spacing-sm; &:hover { text-decoration: underline; @@ -36,7 +36,7 @@ img, svg.menu-icon { // The size of text-body-lg, i.e. the same size as the containing 's font: - width: lib.remify(lib.type-scale("body-lg-size")); + width: mp.remify(mp.type-scale("body-lg-size")); color: tokens.$color-violet-40; } } @@ -45,20 +45,20 @@ .main { width: 100%; - padding: lib.$spacing-lg; + padding: mp.$spacing-lg; } .banner-wrapper { - padding-bottom: lib.$spacing-xl; + padding-bottom: mp.$spacing-xl; } -$field-gap: lib.$spacing-lg; +$field-gap: mp.$spacing-lg; .settings-form { - @include lib.text-body-sm; - box-shadow: lib.$box-shadow-sm; - border-radius: lib.$border-radius-md; - padding: lib.$spacing-md; + @include mp.text-body-sm; + box-shadow: mp.$box-shadow-sm; + border-radius: mp.$border-radius-md; + padding: mp.$spacing-md; background-color: white; display: flex; flex-direction: column; @@ -67,10 +67,10 @@ $field-gap: lib.$spacing-lg; } .field { - border-bottom: 1px solid lib.$color-light-gray-20; + border-bottom: 1px solid mp.$color-light-gray-20; display: flex; flex-direction: column; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; // padding-bottom is used to have the same gap between the form field and the // bottom border, as the form field has to the bottom border of the form field // preceding it (via `.settings-form`'s `gap`). @@ -78,20 +78,20 @@ $field-gap: lib.$spacing-lg; } .field-heading { - @include lib.text-title-3xs; + @include mp.text-title-3xs; font-weight: 400; flex-basis: 0; - min-width: lib.$layout-xl; + min-width: mp.$layout-xl; .field-heading-icon-wrapper { display: flex; align-items: center; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; svg { display: none; - @media screen and #{lib.$mq-sm} { + @media screen and #{mp.$mq-sm} { display: initial; } } @@ -101,32 +101,32 @@ $field-gap: lib.$spacing-lg; .field-content { display: flex; flex-direction: column; - gap: lib.$spacing-md; + gap: mp.$spacing-md; .field-control { display: flex; align-items: flex-start; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; input { - margin-top: lib.$spacing-xs; + margin-top: mp.$spacing-xs; } label { display: inline-flex; flex-direction: column; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; } } .field-warning { display: flex; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; align-items: flex-start; - background-color: lib.$color-light-gray-20; + background-color: mp.$color-light-gray-20; width: 100%; - padding: lib.$spacing-md lib.$spacing-lg; - border-radius: lib.$border-radius-sm; + padding: mp.$spacing-md mp.$spacing-lg; + border-radius: mp.$border-radius-sm; svg { color: tokens.$color-yellow-50; @@ -143,23 +143,23 @@ $field-gap: lib.$spacing-lg; display: flex; flex-wrap: wrap; flex-direction: row; - gap: lib.$spacing-md; + gap: mp.$spacing-md; align-items: center; } .copy-api-key-display { - padding: lib.$spacing-sm lib.$spacing-md; + padding: mp.$spacing-sm mp.$spacing-md; background-color: tokens.$color-grey-05; border: 0; outline: 1px solid tokens.$color-grey-20; - border-radius: lib.$border-radius-md; + border-radius: mp.$border-radius-md; white-space: nowrap; overflow: hidden; font-family: monospace; max-width: 200px; text-overflow: ellipsis; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { max-width: 350px; } } @@ -168,7 +168,7 @@ $field-gap: lib.$spacing-lg; display: flex; flex-wrap: wrap; align-items: center; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; } .settings-api-key-copy { @@ -183,7 +183,7 @@ $field-gap: lib.$spacing-lg; .copy-button-wrapper { display: flex; flex-direction: row; - gap: lib.$spacing-xs; + gap: mp.$spacing-xs; position: relative; .copy-button { @@ -196,7 +196,7 @@ $field-gap: lib.$spacing-lg; cursor: pointer; svg { - width: lib.$layout-xs; + width: mp.$layout-xs; } &:hover { @@ -210,8 +210,8 @@ $field-gap: lib.$spacing-lg; transition: opacity 2s; background-color: tokens.$color-violet-30; color: tokens.$color-white; - border-radius: lib.$border-radius-md; - padding: 0 lib.$spacing-xs; + border-radius: mp.$border-radius-md; + padding: 0 mp.$spacing-xs; // On small screens, there's not enough room for the "Copied!" // notification to the right of the copy button, so it's absolutely // positioned to overlap the copy button. @@ -228,25 +228,25 @@ $field-gap: lib.$spacing-lg; transition: opacity 0s; } - @media screen and #{lib.$mq-sm} { + @media screen and #{mp.$mq-sm} { position: static; transform: none; } } } -@media screen and #{lib.$mq-md} { +@media screen and #{mp.$mq-md} { .settings-page { display: flex; flex-direction: row-reverse; } .settings-form { - padding: lib.$spacing-lg; + padding: mp.$spacing-lg; } .menu { - width: lib.$content-sm; + width: mp.$content-sm; ul { display: block; @@ -255,7 +255,7 @@ $field-gap: lib.$spacing-lg; .field { flex-direction: row; - gap: lib.$spacing-2xl; + gap: mp.$spacing-2xl; } .field-heading { @@ -266,16 +266,16 @@ $field-gap: lib.$spacing-lg; text-align: end; } } -@media screen and #{lib.$mq-lg} { +@media screen and #{mp.$mq-lg} { .field-heading { flex-basis: auto; // Custom percentage to accommodate tablet/laptop screens width: 33%; } } -@media screen and #{lib.$mq-xl} { +@media screen and #{mp.$mq-xl} { .field-heading { flex-basis: auto; - width: lib.$content-sm; + width: mp.$content-sm; } } diff --git a/frontend/src/pages/contains-tracker-warning.module.scss b/frontend/src/pages/contains-tracker-warning.module.scss index 5e09a0b00f..f266eb16ab 100644 --- a/frontend/src/pages/contains-tracker-warning.module.scss +++ b/frontend/src/pages/contains-tracker-warning.module.scss @@ -1,22 +1,22 @@ @use "../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; @use "../styles/typography"; .contains-tracker-container { - margin: lib.$layout-sm; + margin: mp.$layout-sm; .warning-banner-wrapper { display: flex; gap: 10px; - background-color: lib.$color-white; - padding: lib.$spacing-lg lib.$spacing-md; - border-radius: lib.$border-radius-sm; - box-shadow: lib.$box-shadow-sm; + background-color: mp.$color-white; + padding: mp.$spacing-lg mp.$spacing-md; + border-radius: mp.$border-radius-sm; + box-shadow: mp.$box-shadow-sm; justify-content: space-between; align-items: flex-start; flex-direction: column; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; align-items: center; } @@ -25,15 +25,15 @@ a { font-size: 15px; font-weight: 600; - font-family: lib.$font-stack-firefox; - color: lib.$color-black; + font-family: mp.$font-stack-firefox; + color: mp.$color-black; border: none; background-color: tokens.$color-grey-10; white-space: nowrap; align-self: center; margin: 0 0 0 auto; - padding: lib.$spacing-md; - border-radius: lib.$border-radius-sm; + padding: mp.$spacing-md; + border-radius: mp.$border-radius-sm; } } @@ -43,7 +43,7 @@ } svg { - fill: lib.$color-yellow-50; + fill: mp.$color-yellow-50; min-width: 28px; min-height: 28px; } @@ -51,48 +51,48 @@ h2 { font-size: 18px; font-weight: 600; - font-family: lib.$font-stack-firefox; + font-family: mp.$font-stack-firefox; color: tokens.$color-grey-50; } p { font-size: 16px; font-weight: 400; - font-family: lib.$font-stack-base; + font-family: mp.$font-stack-base; color: tokens.$color-grey-40; } } - @media screen and #{lib.$mq-md} { - max-width: lib.$content-xl; - margin: lib.$layout-md auto; - padding: 0 lib.$layout-sm; + @media screen and #{mp.$mq-md} { + max-width: mp.$content-xl; + margin: mp.$layout-md auto; + padding: 0 mp.$layout-sm; } .details-section { - gap: lib.$layout-xs; + gap: mp.$layout-xs; display: flex; flex-direction: column; h1 { - font-family: lib.$font-stack-firefox; - border-bottom: 1px solid lib.$color-light-gray-30; - padding-bottom: lib.$spacing-xs; + font-family: mp.$font-stack-firefox; + border-bottom: 1px solid mp.$color-light-gray-30; + padding-bottom: mp.$spacing-xs; } .warning-banner { - margin-top: lib.$spacing-sm; + margin-top: mp.$spacing-sm; } } } .faq-wrapper { - background-color: lib.$color-white; + background-color: mp.$color-white; .faq { - max-width: lib.$content-xl; + max-width: mp.$content-xl; margin: 0 auto; - padding: 0 lib.$layout-sm; + padding: 0 mp.$layout-sm; display: flex; flex-direction: column; @@ -101,25 +101,25 @@ flex-basis: 0; flex-grow: 0.35; - @media screen and #{lib.$mq-md} { - padding: lib.$spacing-2xl lib.$spacing-2xl 0 0; + @media screen and #{mp.$mq-md} { + padding: mp.$spacing-2xl mp.$spacing-2xl 0 0; } .headline { @include typography.text-title-xs { - font-family: lib.$font-stack-firefox; + font-family: mp.$font-stack-firefox; font-weight: 700; - padding: lib.$spacing-md 0; - color: lib.$color-violet-90; + padding: mp.$spacing-md 0; + color: mp.$color-violet-90; } - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { @include typography.text-title-2xs; } } .read-more { - color: lib.$color-blue-50; + color: mp.$color-blue-50; font-weight: 700; text-decoration: underline; @@ -131,12 +131,12 @@ .entries { flex: 1; - padding: lib.$spacing-lg 0; + padding: mp.$spacing-lg 0; } - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; - gap: lib.$spacing-md; + gap: mp.$spacing-md; } } } diff --git a/frontend/src/pages/faq.module.scss b/frontend/src/pages/faq.module.scss index d75805a341..ce3a5f0cea 100644 --- a/frontend/src/pages/faq.module.scss +++ b/frontend/src/pages/faq.module.scss @@ -1,12 +1,12 @@ @use "../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; @use "../styles/typography" as styles-typography; .faq-page { - background-color: lib.$color-blue-90; - color: lib.$color-white; + background-color: mp.$color-blue-90; + color: mp.$color-white; height: 100%; - padding: 0 lib.$spacing-lg lib.$spacing-2xl; + padding: 0 mp.$spacing-lg mp.$spacing-2xl; a { text-decoration: underline; @@ -17,30 +17,30 @@ } p { - padding: lib.$spacing-sm 0; + padding: mp.$spacing-sm 0; } } .faqs-wrapper { - max-width: lib.$content-xl; + max-width: mp.$content-xl; margin: 0 auto; - padding-top: lib.$spacing-2xl; + padding-top: mp.$spacing-2xl; } .headline { @include styles-typography.text-title-sm { - @include lib.font-firefox; - padding-bottom: lib.$spacing-xl; + @include mp.font-firefox; + padding-bottom: mp.$spacing-xl; } } .faqs { - column-width: lib.$content-sm; - column-gap: lib.$spacing-2xl; + column-width: mp.$content-sm; + column-gap: mp.$spacing-2xl; } .faq { - margin-bottom: lib.$spacing-2xl; + margin-bottom: mp.$spacing-2xl; break-inside: avoid; &:target { @@ -51,20 +51,20 @@ .question { @include styles-typography.text-title-2xs { - @include lib.font-firefox; - padding-bottom: lib.$spacing-sm; + @include mp.font-firefox; + padding-bottom: mp.$spacing-sm; } } .answer { - @include lib.text-body-md; + @include mp.text-body-md; - color: lib.$color-light-gray-10; + color: mp.$color-light-gray-10; margin-top: 0; li { list-style-type: initial; - margin-left: lib.$spacing-md; + margin-left: mp.$spacing-md; } } } diff --git a/frontend/src/pages/flags.module.scss b/frontend/src/pages/flags.module.scss index 898553d967..a5a23b6c2c 100644 --- a/frontend/src/pages/flags.module.scss +++ b/frontend/src/pages/flags.module.scss @@ -1,12 +1,12 @@ @use "../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; .wrapper { display: flex; flex-direction: column; align-items: center; - gap: lib.$spacing-2xl; - padding: lib.$spacing-2xl; + gap: mp.$spacing-2xl; + padding: mp.$spacing-2xl; height: 100%; .flag-list { @@ -17,14 +17,14 @@ tbody { display: flex; flex-direction: column; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; } tr { display: flex; - gap: lib.$spacing-xs; + gap: mp.$spacing-xs; &.is-active td:first-of-type { - color: lib.$color-green-80; + color: mp.$color-green-80; } &.is-non-global { @@ -54,13 +54,13 @@ .flag-form { display: flex; flex-direction: column; - gap: lib.$spacing-lg; - width: lib.$content-sm; + gap: mp.$spacing-lg; + width: mp.$content-sm; p { - border: 1px solid lib.$color-yellow-20; - background-color: lib.$color-yellow-05; - padding: lib.$spacing-md; + border: 1px solid mp.$color-yellow-20; + background-color: mp.$color-yellow-05; + padding: mp.$spacing-md; } output { @@ -70,16 +70,16 @@ .field { display: flex; flex-direction: column; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; label { - @include lib.text-body-md; + @include mp.text-body-md; } input { - @include lib.text-body-md; + @include mp.text-body-md; font-family: monospace; - padding: lib.$spacing-xs lib.$spacing-sm; + padding: mp.$spacing-xs mp.$spacing-sm; } } } diff --git a/frontend/src/pages/index.module.scss b/frontend/src/pages/index.module.scss index e5b89e0640..eb71859bbf 100644 --- a/frontend/src/pages/index.module.scss +++ b/frontend/src/pages/index.module.scss @@ -1,17 +1,17 @@ @use "../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; @use "../styles/typography" as styles-typography; .hero { display: flex; flex-direction: column; - gap: lib.$spacing-2xl; - width: lib.$content-max; + gap: mp.$spacing-2xl; + width: mp.$content-max; max-width: 100%; margin: 0 auto; - padding: lib.$spacing-2xl lib.$spacing-lg; + padding: mp.$spacing-2xl mp.$spacing-lg; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; align-items: center; } @@ -25,76 +25,76 @@ display: flex; flex-direction: column; align-items: flex-start; - gap: lib.$spacing-lg; + gap: mp.$spacing-lg; } h2 { @include styles-typography.text-title-md { - font-family: lib.$font-stack-firefox; + font-family: mp.$font-stack-firefox; } } p { - max-width: calc(lib.$content-sm + lib.$layout-xl); + max-width: calc(mp.$content-sm + mp.$layout-xl); } .cta { - margin: lib.$spacing-xl 0; - min-width: lib.$content-xs; + margin: mp.$spacing-xl 0; + min-width: mp.$content-xs; } .social-proof { - padding: lib.$spacing-lg 0; + padding: mp.$spacing-lg 0; width: 100%; max-width: 55%; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { width: auto; } } .end-of-intro-pricing-hero { display: flex; - gap: lib.$spacing-lg; + gap: mp.$spacing-lg; flex-wrap: wrap; & > div { - flex: 1 1 lib.$content-xs; + flex: 1 1 mp.$content-xs; } } } .how-it-works-wrapper { - background-color: lib.$color-white; + background-color: mp.$color-white; // Magic number: 64px allows us to have an even spacing between sections on pages - padding: calc(lib.$spacing-xl * 2) lib.$spacing-md; + padding: calc(mp.$spacing-xl * 2) mp.$spacing-md; } .how-it-works { - width: lib.$content-max; + width: mp.$content-max; max-width: 100%; margin: 0 auto; - padding: lib.$spacing-lg; + padding: mp.$spacing-lg; h2 { @include styles-typography.text-title-sm { - font-family: lib.$font-stack-firefox; + font-family: mp.$font-stack-firefox; text-align: center; - margin-bottom: lib.$layout-sm; + margin-bottom: mp.$layout-sm; } } h2, .lead { - padding: lib.$spacing-sm 0; + padding: mp.$spacing-sm 0; } a { - color: lib.$color-blue-50; + color: mp.$color-blue-50; text-decoration: underline; font-weight: 700; &:hover { - color: lib.$color-blue-60; + color: mp.$color-blue-60; text-decoration: none; } } @@ -102,31 +102,31 @@ .steps { display: flex; flex-direction: column; - gap: lib.$layout-lg; + gap: mp.$layout-lg; list-style-type: none; - padding: lib.$spacing-2xl 0; + padding: mp.$spacing-2xl 0; text-align: start; margin: 0; - @media screen and #{lib.$mq-md} { - gap: lib.$layout-xl; - margin: lib.$spacing-2xl lib.$layout-2xl 0 lib.$layout-2xl; + @media screen and #{mp.$mq-md} { + gap: mp.$layout-xl; + margin: mp.$spacing-2xl mp.$layout-2xl 0 mp.$layout-2xl; } - @media screen and #{lib.$mq-lg} { + @media screen and #{mp.$mq-lg} { flex-direction: row; margin: 0; } h3 { - @include lib.text-title-3xs; - font-family: lib.$font-stack-base; + @include mp.text-title-3xs; + font-family: mp.$font-stack-base; font-weight: 600; - padding-top: lib.$spacing-md; + padding-top: mp.$spacing-md; line-height: 1.5; } p { - padding: lib.$spacing-md 0; + padding: mp.$spacing-md 0; } .step { @@ -141,47 +141,47 @@ } .use-cases-wrapper { - background-color: lib.$color-white; + background-color: mp.$color-white; } .use-cases { - width: lib.$content-max; + width: mp.$content-max; max-width: 100%; margin: 0 auto; - padding: lib.$spacing-lg; + padding: mp.$spacing-lg; } // Creates a page break effect .page-break { background: linear-gradient( 180deg, - lib.$color-light-gray-20 0%, - lib.$color-light-gray-10 45% + mp.$color-light-gray-20 0%, + mp.$color-light-gray-10 45% ); - height: lib.$layout-md; + height: mp.$layout-md; } .features { - padding: lib.$layout-xs; - width: lib.$content-xl; + padding: mp.$layout-xs; + width: mp.$content-xl; max-width: 100%; margin: 0 auto; - @media screen and #{lib.$mq-md} { - padding: lib.$layout-sm lib.$layout-xs; + @media screen and #{mp.$mq-md} { + padding: mp.$layout-sm mp.$layout-xs; } } .plans { - width: lib.$content-max; + width: mp.$content-max; max-width: 100%; margin: 0 auto; display: flex; - gap: lib.$spacing-2xl; + gap: mp.$spacing-2xl; flex-direction: column-reverse; align-items: center; - padding: 0 lib.$spacing-md lib.$spacing-md lib.$spacing-md; - margin-top: lib.$layout-xl; + padding: 0 mp.$spacing-md mp.$spacing-md mp.$spacing-md; + margin-top: mp.$layout-xl; &.non-premium-country { display: flex; @@ -194,13 +194,13 @@ flex-direction: column; align-items: flex-start; text-align: center; - max-width: lib.$content-md; - gap: lib.$spacing-lg; - margin-top: lib.$layout-xl; + max-width: mp.$content-md; + gap: mp.$spacing-lg; + margin-top: mp.$layout-xl; h2 { @include styles-typography.text-title-sm { - font-family: lib.$font-stack-firefox; + font-family: mp.$font-stack-firefox; font-weight: 500; } } @@ -208,56 +208,56 @@ .end-of-intro-pricing-countdown-and-warning { display: flex; flex-direction: column; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; } } - @media screen and #{lib.$mq-xl} { + @media screen and #{mp.$mq-xl} { flex-direction: row; - padding: 0 lib.$spacing-2xl lib.$spacing-2xl lib.$spacing-2xl; + padding: 0 mp.$spacing-2xl mp.$spacing-2xl mp.$spacing-2xl; .plan-comparison { - padding: lib.$spacing-2xl; + padding: mp.$spacing-2xl; } .callout { - padding: lib.$spacing-2xl; + padding: mp.$spacing-2xl; text-align: start; } } } .faq-wrapper { - background-color: lib.$color-white; + background-color: mp.$color-white; // Magic number: 64px allows us to have an even spacing between sections on pages - padding: calc(lib.$spacing-xl * 2) lib.$spacing-md; + padding: calc(mp.$spacing-xl * 2) mp.$spacing-md; } .faq { - width: lib.$content-max; + width: mp.$content-max; max-width: 100%; margin: 0 auto; - padding: lib.$spacing-lg; + padding: mp.$spacing-lg; display: flex; flex-direction: column; .lead { flex: 1 0 0; - @media screen and #{lib.$mq-md} { - padding: 0 lib.$spacing-2xl; + @media screen and #{mp.$mq-md} { + padding: 0 mp.$spacing-2xl; } .headline { @include styles-typography.text-title-sm { - font-family: lib.$font-stack-firefox; + font-family: mp.$font-stack-firefox; font-weight: 500; - padding: lib.$spacing-md 0; + padding: mp.$spacing-md 0; } } .read-more { - color: lib.$color-blue-50; + color: mp.$color-blue-50; font-weight: 700; text-decoration: underline; @@ -269,16 +269,16 @@ .entries { flex: 1 0 0; - padding-top: lib.$spacing-lg; + padding-top: mp.$spacing-lg; - @media screen and #{lib.$mq-md} { - padding: 0 lib.$spacing-2xl; + @media screen and #{mp.$mq-md} { + padding: 0 mp.$spacing-2xl; } } - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; - gap: lib.$spacing-md; + gap: mp.$spacing-md; } } @@ -286,22 +286,22 @@ width: 100%; margin: 0 auto; // Magic number: 64px allows us to have an even spacing between sections on pages - padding: calc(lib.$spacing-xl * 2) lib.$spacing-md; + padding: calc(mp.$spacing-xl * 2) mp.$spacing-md; - @media screen and #{lib.$mq-md} { - width: lib.$content-max; + @media screen and #{mp.$mq-md} { + width: mp.$content-max; margin-top: 0; max-width: 100%; } } .gray-bg { - background-color: lib.$color-light-gray-10; + background-color: mp.$color-light-gray-10; } .reviews-container { // Magic number: 64px allows us to have an even spacing between sections on pages - padding: calc(lib.$spacing-xl * 2) lib.$spacing-md; + padding: calc(mp.$spacing-xl * 2) mp.$spacing-md; } .testimonials-wrapper { @@ -309,13 +309,13 @@ align-items: center; justify-content: center; flex-direction: row; - gap: lib.$spacing-md; - border: 0 solid lib.$color-light-gray-20; + gap: mp.$spacing-md; + border: 0 solid mp.$color-light-gray-20; border-top-width: 1px; border-bottom-width: 1px; p { - @include lib.text-body-lg; - font-family: lib.$font-stack-base; + @include mp.text-body-lg; + font-family: mp.$font-stack-base; } } diff --git a/frontend/src/pages/mock/mockSession.module.scss b/frontend/src/pages/mock/mockSession.module.scss index f9e41f2491..12a1acbd5a 100644 --- a/frontend/src/pages/mock/mockSession.module.scss +++ b/frontend/src/pages/mock/mockSession.module.scss @@ -1,56 +1,56 @@ @use "../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; .mock-session { - padding: lib.$spacing-lg; + padding: mp.$spacing-lg; a { - color: lib.$color-blue-50; + color: mp.$color-blue-50; } .lead { - max-width: lib.$content-md; - padding: lib.$spacing-md 0; + max-width: mp.$content-md; + padding: mp.$spacing-md 0; } form { display: flex; flex-direction: column; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; align-items: flex-start; - padding: lib.$spacing-lg; - width: lib.$content-sm; + padding: mp.$spacing-lg; + width: mp.$content-sm; } input, button { - padding: lib.$spacing-md; + padding: mp.$spacing-md; } button { - border-radius: lib.$border-radius-sm; - border: 1px solid lib.$color-blue-50; - background-color: lib.$color-white; - color: lib.$color-blue-50; + border-radius: mp.$border-radius-sm; + border: 1px solid mp.$color-blue-50; + background-color: mp.$color-white; + color: mp.$color-blue-50; font-weight: 700; cursor: pointer; &:hover { - background-color: lib.$color-blue-50; - color: lib.$color-white; + background-color: mp.$color-blue-50; + color: mp.$color-white; } } h1 { - padding: lib.$spacing-sm 0; + padding: mp.$spacing-sm 0; - @include lib.text-title-3xs; + @include mp.text-title-3xs; } ul { display: flex; flex-direction: column; - gap: lib.$spacing-md; + gap: mp.$spacing-md; list-style-type: none; } } diff --git a/frontend/src/pages/premium.module.scss b/frontend/src/pages/premium.module.scss index 1ccb7b8cba..afe91c4fae 100644 --- a/frontend/src/pages/premium.module.scss +++ b/frontend/src/pages/premium.module.scss @@ -1,22 +1,22 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; @use "../styles/tokens"; @use "../styles/typography" as styles-typography; .hero { display: flex; flex-direction: column; - gap: lib.$spacing-2xl; - width: lib.$content-max; + gap: mp.$spacing-2xl; + width: mp.$content-max; max-width: 100%; margin: 0 auto; - padding: lib.$spacing-lg; + padding: mp.$spacing-lg; .hero-image { flex-basis: 0; flex-grow: 1; } - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; align-items: center; } @@ -30,76 +30,76 @@ display: flex; flex-direction: column; align-items: flex-start; - gap: lib.$spacing-lg; + gap: mp.$spacing-lg; } h2 { @include styles-typography.text-title-md { - font-family: lib.$font-stack-firefox; + font-family: mp.$font-stack-firefox; } } .social-proof { - border: 0 solid lib.$color-light-gray-20; + border: 0 solid mp.$color-light-gray-20; border-top-width: 1px; border-bottom-width: 1px; - padding: lib.$spacing-lg 0; + padding: mp.$spacing-lg 0; width: 100%; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { width: auto; } } .end-of-intro-pricing-hero { display: flex; - gap: lib.$spacing-lg; + gap: mp.$spacing-lg; flex-wrap: wrap; & > div { - flex: 1 1 lib.$content-xs; + flex: 1 1 mp.$content-xs; } } } .perks-wrapper { - padding: lib.$layout-xs; - width: lib.$content-xl; + padding: mp.$layout-xs; + width: mp.$content-xl; max-width: 100%; margin: 0 auto; - @media screen and #{lib.$mq-md} { - padding: lib.$layout-sm lib.$layout-xs; + @media screen and #{mp.$mq-md} { + padding: mp.$layout-sm mp.$layout-xs; } } .perks { - width: lib.$content-xl; + width: mp.$content-xl; max-width: 100%; margin: 0 auto; - padding: lib.$spacing-2xl lib.$spacing-xl; + padding: mp.$spacing-2xl mp.$spacing-xl; h2 { @include styles-typography.text-title-sm { - font-family: lib.$font-stack-firefox; + font-family: mp.$font-stack-firefox; text-align: center; - padding: lib.$spacing-md 0; + padding: mp.$spacing-md 0; } } .lead { - @include lib.text-body-md; + @include mp.text-body-md; display: block; width: 75%; margin: 0 auto; - padding: lib.$spacing-md 0; + padding: mp.$spacing-md 0; } .perk { - padding: lib.$spacing-lg 0; + padding: mp.$spacing-lg 0; display: flex; flex-direction: column; - gap: lib.$spacing-2xl; + gap: mp.$spacing-2xl; align-items: center; img { @@ -110,25 +110,25 @@ .pill { background-color: tokens.$color-violet-30; color: tokens.$color-white; - border-radius: lib.$border-radius-sm; - padding: lib.$spacing-xs lib.$spacing-sm; - font-family: lib.$font-stack-firefox; + border-radius: mp.$border-radius-sm; + padding: mp.$spacing-xs mp.$spacing-sm; + font-family: mp.$font-stack-firefox; font-weight: 600; text-transform: uppercase; } h3 { @include styles-typography.text-title-xs { - font-family: lib.$font-stack-firefox; - padding: lib.$spacing-sm 0; + font-family: mp.$font-stack-firefox; + padding: mp.$spacing-sm 0; } } p { - padding: lib.$spacing-sm 0; + padding: mp.$spacing-sm 0; } - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; &:nth-child(even) { @@ -147,16 +147,16 @@ } .use-cases { - width: lib.$content-max; + width: mp.$content-max; max-width: 100%; margin: 0 auto; - padding: lib.$spacing-xl; + padding: mp.$spacing-xl; .headline { @include styles-typography.text-title-sm { - font-family: lib.$font-stack-firefox; + font-family: mp.$font-stack-firefox; text-align: center; - padding: lib.$spacing-lg; + padding: mp.$spacing-lg; } } } @@ -164,18 +164,18 @@ .plans-wrapper { background: linear-gradient( 180deg, - lib.$color-light-gray-20 0%, - lib.$color-light-gray-10 3% + mp.$color-light-gray-20 0%, + mp.$color-light-gray-10 3% ); } .plans { - width: lib.$content-max; + width: mp.$content-max; max-width: 100%; margin: 0 auto; - padding: lib.$spacing-2xl; + padding: mp.$spacing-2xl; display: flex; - gap: lib.$spacing-2xl; + gap: mp.$spacing-2xl; flex-direction: column-reverse; align-items: center; @@ -190,11 +190,11 @@ flex-direction: column; align-items: flex-start; text-align: center; - gap: lib.$spacing-lg; + gap: mp.$spacing-lg; h2 { @include styles-typography.text-title-md { - font-family: lib.$font-stack-firefox; + font-family: mp.$font-stack-firefox; font-weight: 500; } } @@ -202,19 +202,19 @@ .end-of-intro-pricing-countdown-and-warning { display: flex; flex-direction: column; - gap: lib.$spacing-sm; + gap: mp.$spacing-sm; } } - @media screen and #{lib.$mq-xl} { + @media screen and #{mp.$mq-xl} { flex-direction: row; .plan-comparison { - padding: lib.$spacing-2xl; + padding: mp.$spacing-2xl; } .callout { - padding: lib.$spacing-2xl; + padding: mp.$spacing-2xl; text-align: start; } } @@ -223,11 +223,11 @@ .bundle-banner-section { width: 100%; margin: 0 auto; - padding: calc(lib.$spacing-2xl * 2) lib.$spacing-md; - margin-top: lib.$layout-lg; + padding: calc(mp.$spacing-2xl * 2) mp.$spacing-md; + margin-top: mp.$layout-lg; - @media screen and #{lib.$mq-md} { - width: lib.$content-max; + @media screen and #{mp.$mq-md} { + width: mp.$content-max; margin-top: 0; max-width: 100%; } diff --git a/frontend/src/pages/tracker-report.module.scss b/frontend/src/pages/tracker-report.module.scss index ae1eaa9f34..93321d8c8f 100644 --- a/frontend/src/pages/tracker-report.module.scss +++ b/frontend/src/pages/tracker-report.module.scss @@ -1,5 +1,5 @@ @use "../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; @use "../styles/typography"; .wrapper { @@ -28,7 +28,7 @@ } .loading { - padding: lib.$spacing-xl; + padding: mp.$spacing-xl; height: 100%; background-color: tokens.$color-grey-05; animation-name: fadein; @@ -36,7 +36,7 @@ } .load-error { - padding: lib.$spacing-xl; + padding: mp.$spacing-xl; height: 100%; background-color: tokens.$color-grey-05; } @@ -49,18 +49,18 @@ .report { width: 100%; - max-width: lib.$content-xl; - padding: lib.$spacing-xl; + max-width: mp.$content-xl; + padding: mp.$spacing-xl; display: flex; flex-direction: column; - gap: lib.$spacing-md; + gap: mp.$spacing-md; } .logo { display: flex; align-items: center; justify-content: center; - gap: lib.$spacing-xs; + gap: mp.$spacing-xs; .logomark { max-height: 35px; @@ -72,8 +72,8 @@ h1 { @include typography.text-title-2xs { - font-family: lib.$font-stack-firefox; - padding: lib.$spacing-md 0; + font-family: mp.$font-stack-firefox; + padding: mp.$spacing-md 0; border-bottom: 1px solid tokens.$color-grey-20; } } @@ -81,13 +81,13 @@ .meta { display: flex; flex-direction: column; - gap: lib.$spacing-md; - padding: lib.$spacing-lg; + gap: mp.$spacing-md; + padding: mp.$spacing-lg; - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; - gap: lib.$spacing-2xl; - padding: lib.$spacing-lg lib.$spacing-2xl; + gap: mp.$spacing-2xl; + padding: mp.$spacing-lg mp.$spacing-2xl; } dt { @@ -105,32 +105,32 @@ dd { text-overflow: ellipsis; overflow: hidden; - max-width: lib.$content-sm; + max-width: mp.$content-sm; } } } .trackers { - background-color: lib.$color-white; - border-radius: lib.$border-radius-md; + background-color: mp.$color-white; + border-radius: mp.$border-radius-md; display: flex; flex-direction: column; - box-shadow: lib.$box-shadow-sm; + box-shadow: mp.$box-shadow-sm; // We typically avoid margins because they affect the positioning of other elements, // but since box-shadow is visible below the element, the bottom margin lets // us pretend like it's part of the element: - margin-bottom: lib.$spacing-md; - padding: lib.$spacing-lg; - gap: lib.$spacing-md; + margin-bottom: mp.$spacing-md; + padding: mp.$spacing-lg; + gap: mp.$spacing-md; - @media screen and #{lib.$mq-md} { - padding: lib.$spacing-lg lib.$spacing-2xl; - gap: lib.$spacing-xl; + @media screen and #{mp.$mq-md} { + padding: mp.$spacing-lg mp.$spacing-2xl; + gap: mp.$spacing-xl; } h2 { @include typography.text-title-xs { - font-family: lib.$font-stack-firefox; + font-family: mp.$font-stack-firefox; font-weight: 500; } } @@ -154,9 +154,9 @@ "null count"; grid-template-columns: auto 1fr auto; align-items: center; - column-gap: lib.$spacing-md; - row-gap: lib.$spacing-xs; - padding: lib.$spacing-md 0; + column-gap: mp.$spacing-md; + row-gap: mp.$spacing-xs; + padding: mp.$spacing-md 0; color: tokens.$color-grey-50; border-top: 1px solid tokens.$color-grey-10; @@ -179,7 +179,7 @@ width: 100%; } - @media screen and #{lib.$mq-sm} { + @media screen and #{mp.$mq-sm} { grid-template-areas: "icon tracker-domain count"; .count { @@ -193,17 +193,17 @@ .confidentiality-notice { display: flex; align-items: center; - gap: lib.$spacing-md; + gap: mp.$spacing-md; background-color: tokens.$color-grey-10; - padding: lib.$spacing-lg; - border-radius: lib.$border-radius-md; + padding: mp.$spacing-lg; + border-radius: mp.$border-radius-md; - @media screen and #{lib.$mq-md} { - padding: lib.$spacing-lg lib.$spacing-2xl; + @media screen and #{mp.$mq-md} { + padding: mp.$spacing-lg mp.$spacing-2xl; } svg { - color: lib.$color-purple-70; + color: mp.$color-purple-70; flex: 1 0 auto; } } @@ -211,11 +211,11 @@ .explainer { display: flex; flex-direction: column; - gap: lib.$spacing-md; - padding: lib.$spacing-lg; + gap: mp.$spacing-md; + padding: mp.$spacing-lg; - @media screen and #{lib.$mq-md} { - padding: lib.$spacing-lg lib.$spacing-2xl; + @media screen and #{mp.$mq-md} { + padding: mp.$spacing-lg mp.$spacing-2xl; } hr { @@ -227,13 +227,13 @@ .breakage-warning { display: flex; align-items: center; - gap: lib.$spacing-md; - border-radius: lib.$border-radius-sm; - border: 2px solid lib.$color-yellow-50; - padding: lib.$spacing-lg; + gap: mp.$spacing-md; + border-radius: mp.$border-radius-sm; + border: 2px solid mp.$color-yellow-50; + padding: mp.$spacing-lg; svg { - color: lib.$color-yellow-50; + color: mp.$color-yellow-50; flex: 1 0 auto; } } @@ -241,34 +241,34 @@ } .faq-wrapper { - background-color: lib.$color-white; + background-color: mp.$color-white; } .faq { - width: lib.$content-max; + width: mp.$content-max; max-width: 100%; margin: 0 auto; - padding: lib.$spacing-lg; + padding: mp.$spacing-lg; display: flex; flex-direction: column; .lead { flex: 1 0 0; - @media screen and #{lib.$mq-md} { - padding: 0 lib.$spacing-2xl; + @media screen and #{mp.$mq-md} { + padding: 0 mp.$spacing-2xl; } .headline { @include typography.text-title-sm { - font-family: lib.$font-stack-firefox; + font-family: mp.$font-stack-firefox; font-weight: 500; - padding: lib.$spacing-md 0; + padding: mp.$spacing-md 0; } } .read-more { - color: lib.$color-blue-50; + color: mp.$color-blue-50; font-weight: 500; text-decoration: underline; @@ -280,15 +280,15 @@ .entries { flex: 1 0 0; - padding-top: lib.$spacing-lg; + padding-top: mp.$spacing-lg; - @media screen and #{lib.$mq-md} { - padding: 0 lib.$spacing-2xl; + @media screen and #{mp.$mq-md} { + padding: 0 mp.$spacing-2xl; } } - @media screen and #{lib.$mq-md} { + @media screen and #{mp.$mq-md} { flex-direction: row; - gap: lib.$spacing-md; + gap: mp.$spacing-md; } } diff --git a/frontend/src/pages/vpn-relay-welcome.module.scss b/frontend/src/pages/vpn-relay-welcome.module.scss index b067b2c211..a3b6fbc12a 100644 --- a/frontend/src/pages/vpn-relay-welcome.module.scss +++ b/frontend/src/pages/vpn-relay-welcome.module.scss @@ -1,4 +1,4 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; @use "../styles/tokens"; // TODO MPP-3946: Remove this legacy versioning comment @@ -11,15 +11,15 @@ .content-container { display: flex; flex-direction: column; - max-width: lib.$content-lg; + max-width: mp.$content-lg; margin: 0 auto; } .content-head { display: flex; - max-width: lib.$content-lg; - gap: lib.$spacing-md; - padding: lib.$layout-xl lib.$spacing-md; + max-width: mp.$content-lg; + gap: mp.$spacing-md; + padding: mp.$layout-xl mp.$spacing-md; flex-direction: column; align-content: center; align-items: center; @@ -28,24 +28,24 @@ } .headline { - font-family: lib.$font-stack-base; + font-family: mp.$font-stack-base; color: tokens.$color-grey-40; font-weight: 400; - @include lib.text-title-3xs; + @include mp.text-title-3xs; } .subheadline { - font-family: lib.$font-stack-firefox; + font-family: mp.$font-stack-firefox; color: tokens.$color-grey-60; font-weight: 700; - @include lib.text-title-md; + @include mp.text-title-md; } .logo { display: flex; - gap: lib.$spacing-md; + gap: mp.$spacing-md; justify-content: center; } @@ -54,21 +54,21 @@ flex-direction: column; justify-content: space-around; align-items: center; - gap: lib.$spacing-xl; - margin-bottom: lib.$spacing-2xl; + gap: mp.$spacing-xl; + margin-bottom: mp.$spacing-2xl; - @media #{lib.$mq-lg} { + @media #{mp.$mq-lg} { flex-direction: row; background-color: tokens.$color-white; - padding: 0 lib.$spacing-2xl; - border-radius: lib.$border-radius-md; - box-shadow: lib.$box-shadow-sm; + padding: 0 mp.$spacing-2xl; + border-radius: mp.$border-radius-md; + box-shadow: mp.$box-shadow-sm; } .panel-art { display: none; - @media #{lib.$mq-lg} { + @media #{mp.$mq-lg} { display: block; } } @@ -78,29 +78,29 @@ display: flex; flex-direction: column; align-items: stretch; - gap: lib.$spacing-xl; - max-width: lib.$content-xs; - background-color: lib.$color-white; - padding: lib.$spacing-2xl; - border-radius: lib.$border-radius-md; - box-shadow: lib.$box-shadow-sm; - - @media #{lib.$mq-lg} { + gap: mp.$spacing-xl; + max-width: mp.$content-xs; + background-color: mp.$color-white; + padding: mp.$spacing-2xl; + border-radius: mp.$border-radius-md; + box-shadow: mp.$box-shadow-sm; + + @media #{mp.$mq-lg} { padding: 0; border-radius: 0; box-shadow: none; } p { - max-width: lib.$content-xs; - font-family: lib.$font-stack-base; + max-width: mp.$content-xs; + font-family: mp.$font-stack-base; - @include lib.text-body-md; + @include mp.text-body-md; } a { white-space: pre; font-weight: 500; - font-family: lib.$font-stack-firefox; + font-family: mp.$font-stack-firefox; } } diff --git a/frontend/src/styles/typography.scss b/frontend/src/styles/typography.scss index 1b705f3f36..4972859a3c 100644 --- a/frontend/src/styles/typography.scss +++ b/frontend/src/styles/typography.scss @@ -1,4 +1,4 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; /* Re-declare mozilla-protocol typography: @@ -16,7 +16,7 @@ A typical mixin text-title-xs looks like: @include lib.font-size(lib.type-scale('title-2xs-size')); line-height: lib.type-scale('title-2xs-line-height'); - @media #{lib.$mq-md} { + @media #{mp.$mq-md} { @include lib.font-size(lib.type-scale('title-xs-size')); line-height: lib.type-scale('title-xs-line-height'); } @@ -124,7 +124,7 @@ https://sass-lang.com/documentation/at-rules/mixin/#content-blocks line-height: lib.type-scale('title-2xs-line-height'); @content; - @media #{lib.$mq-md} { + @media #{mp.$mq-md} { @include lib.font-size(lib.type-scale('title-xs-size')); line-height: lib.type-scale('title-xs-line-height'); } @@ -171,13 +171,13 @@ that they are using to override the base text-* mixin. $font-stack-mozilla; @mixin text-title-2xl { - @include lib.font-size(lib.type-scale("title-xl-size")); - line-height: lib.type-scale("title-xl-line-height"); + @include mp.font-size(mp.type-scale("title-xl-size")); + line-height: mp.type-scale("title-xl-line-height"); @content; - @media #{lib.$mq-md} { - @include lib.font-size(lib.type-scale("title-2xl-size")); - line-height: lib.type-scale("title-2xl-line-height"); + @media #{mp.$mq-md} { + @include mp.font-size(mp.type-scale("title-2xl-size")); + line-height: mp.type-scale("title-2xl-line-height"); } } @@ -185,46 +185,46 @@ that they are using to override the base text-* mixin. // @mixin text-title-lg is not used by Relay @mixin text-title-md { - @include lib.font-size(lib.type-scale("title-sm-size")); - line-height: lib.type-scale("title-sm-line-height"); + @include mp.font-size(mp.type-scale("title-sm-size")); + line-height: mp.type-scale("title-sm-line-height"); @content; - @media #{lib.$mq-md} { - @include lib.font-size(lib.type-scale("title-md-size")); - line-height: lib.type-scale("title-md-line-height"); + @media #{mp.$mq-md} { + @include mp.font-size(mp.type-scale("title-md-size")); + line-height: mp.type-scale("title-md-line-height"); } } @mixin text-title-sm { - @include lib.font-size(lib.type-scale("title-xs-size")); - line-height: lib.type-scale("title-xs-line-height"); + @include mp.font-size(mp.type-scale("title-xs-size")); + line-height: mp.type-scale("title-xs-line-height"); @content; - @media #{lib.$mq-md} { - @include lib.font-size(lib.type-scale("title-sm-size")); - line-height: lib.type-scale("title-sm-line-height"); + @media #{mp.$mq-md} { + @include mp.font-size(mp.type-scale("title-sm-size")); + line-height: mp.type-scale("title-sm-line-height"); } } @mixin text-title-xs { - @include lib.font-size(lib.type-scale("title-2xs-size")); - line-height: lib.type-scale("title-2xs-line-height"); + @include mp.font-size(mp.type-scale("title-2xs-size")); + line-height: mp.type-scale("title-2xs-line-height"); @content; - @media #{lib.$mq-md} { - @include lib.font-size(lib.type-scale("title-xs-size")); - line-height: lib.type-scale("title-xs-line-height"); + @media #{mp.$mq-md} { + @include mp.font-size(mp.type-scale("title-xs-size")); + line-height: mp.type-scale("title-xs-line-height"); } } @mixin text-title-2xs { - @include lib.font-size(lib.type-scale("title-3xs-size")); - line-height: lib.type-scale("title-3xs-line-height"); + @include mp.font-size(mp.type-scale("title-3xs-size")); + line-height: mp.type-scale("title-3xs-line-height"); @content; - @media #{lib.$mq-md} { - @include lib.font-size(lib.type-scale("title-2xs-size")); - line-height: lib.type-scale("title-2xs-line-height"); + @media #{mp.$mq-md} { + @include mp.font-size(mp.type-scale("title-2xs-size")); + line-height: mp.type-scale("title-2xs-line-height"); } } From 78f246133676b87d33aca3a06c5e4e3579d7402c Mon Sep 17 00:00:00 2001 From: John Whitlock Date: Tue, 5 Nov 2024 16:01:19 -0600 Subject: [PATCH 04/13] Use mozilla protocol w/o namespace --- frontend/src/components/Banner.module.scss | 84 +++---- frontend/src/components/Button.module.scss | 32 +-- frontend/src/components/InfoModal.module.scss | 38 ++-- .../src/components/InfoTooltip.module.scss | 20 +- .../dashboard/CornerNotification.module.scss | 50 ++--- .../EmailForwardingModal.module.scss | 54 ++--- .../dashboard/FreeOnboarding.module.scss | 198 ++++++++-------- .../dashboard/Onboarding.module.scss | 28 +-- .../dashboard/PremiumOnboarding.module.scss | 130 +++++------ .../dashboard/SubdomainPicker.module.scss | 74 +++--- .../aliases/AddressPickerModal.module.scss | 108 ++++----- .../dashboard/aliases/Alias.module.scss | 162 ++++++------- .../aliases/AliasDeletionButton.module.scss | 74 +++--- .../AliasDeletionButtonPermanent.module.scss | 78 +++---- .../dashboard/aliases/AliasList.module.scss | 48 ++-- .../aliases/BlockLevelSlider.module.scss | 134 +++++------ .../CustomAddressGenerationModal.module.scss | 132 +++++------ .../dashboard/aliases/MaskCard.module.scss | 158 ++++++------- .../subdomain/ConfirmationForm.module.scss | 32 +-- .../subdomain/ConfirmationModal.module.scss | 58 ++--- .../SubdomainInfoTooltip.module.scss | 44 ++-- .../dashboard/tips/CustomAliasTip.module.scss | 20 +- .../dashboard/tips/GenericTip.module.scss | 16 +- .../dashboard/tips/Tips.module.scss | 82 +++---- .../landing/BundleBanner.module.scss | 132 +++++------ .../landing/FaqAccordion.module.scss | 24 +- .../landing/HighlightedFeatures.module.scss | 40 ++-- .../components/landing/PlanMatrix.module.scss | 144 ++++++------ .../components/landing/Reviews.module.scss | 120 +++++----- .../src/components/layout/Layout.module.scss | 142 ++++++------ .../layout/navigation/AppPicker.module.scss | 62 ++--- .../navigation/DashboardSwitcher.module.scss | 10 +- .../navigation/MobileNavigation.module.scss | 44 ++-- .../navigation/UpgradeButton.module.scss | 20 +- .../layout/navigation/UserMenu.module.scss | 44 ++-- .../whatsnew/WhatsNewContent.module.scss | 14 +- .../whatsnew/WhatsNewDashboard.module.scss | 56 ++--- .../whatsnew/WhatsNewList.module.scss | 34 +-- .../whatsnew/WhatsNewMenu.module.scss | 44 ++-- .../layout/topmessage/CsatSurvey.module.scss | 34 +-- .../topmessage/HolidayPromoBanner.module.scss | 52 ++--- .../layout/topmessage/NpsSurvey.module.scss | 34 +-- .../dashboard/PhoneDashboard.module.scss | 212 +++++++++--------- .../dashboard/PhoneWelcomeView.module.scss | 88 ++++---- .../onboarding/PurchasePhonesPlan.module.scss | 60 ++--- .../onboarding/RealPhoneSetup.module.scss | 120 +++++----- .../RelayNumberConfirmationModal.module.scss | 28 +-- .../onboarding/RelayNumberPicker.module.scss | 114 +++++----- .../waitlist/WaitlistPage.module.scss | 32 +-- .../accounts/account_inactive.module.scss | 6 +- .../src/pages/accounts/profile.module.scss | 174 +++++++------- .../src/pages/accounts/settings.module.scss | 92 ++++---- .../contains-tracker-warning.module.scss | 72 +++--- frontend/src/pages/faq.module.scss | 34 +-- frontend/src/pages/flags.module.scss | 30 +-- frontend/src/pages/index.module.scss | 158 ++++++------- .../src/pages/mock/mockSession.module.scss | 36 +-- frontend/src/pages/premium.module.scss | 100 ++++----- frontend/src/pages/tracker-report.module.scss | 114 +++++----- .../src/pages/vpn-relay-welcome.module.scss | 58 ++--- frontend/src/styles/typography.scss | 56 ++--- 61 files changed, 2244 insertions(+), 2244 deletions(-) diff --git a/frontend/src/components/Banner.module.scss b/frontend/src/components/Banner.module.scss index f9f60cc8d7..0d8cb6bfd3 100644 --- a/frontend/src/components/Banner.module.scss +++ b/frontend/src/components/Banner.module.scss @@ -1,13 +1,13 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; @use "../styles/tokens"; .banner { - border-radius: mp.$border-radius-md; - padding: mp.$spacing-md; + border-radius: $border-radius-md; + padding: $spacing-md; background-color: tokens.$color-white; position: relative; - box-shadow: mp.$box-shadow-sm; + box-shadow: $box-shadow-sm; &.promo { // This is the gradient border width (which is implemented as a background image): @@ -17,21 +17,21 @@ } &.warning { - padding: mp.$spacing-sm; + padding: $spacing-sm; } &.info { - @include mp.text-body-sm; + @include text-body-sm; - @media screen and #{mp.$mq-sm} { - padding: 0 mp.$spacing-sm; + @media screen and #{$mq-sm} { + padding: 0 $spacing-sm; } } .dismiss-button { position: absolute; - top: mp.$spacing-sm; - right: mp.$spacing-sm; + top: $spacing-sm; + right: $spacing-sm; display: flex; align-items: center; justify-content: center; @@ -39,7 +39,7 @@ height: 30px; background-color: transparent; border-style: none; - border-radius: mp.$border-radius-sm; + border-radius: $border-radius-sm; cursor: pointer; padding: 0; @@ -58,21 +58,21 @@ .banner.promo & { // .banner's border-radius - .banner's padding. // This is what makes .banner.promo appear as a 2px-wide border: - border-radius: calc(mp.$border-radius-md - 2px); + border-radius: calc($border-radius-md - 2px); } .title-and-large-cta-wrapper { display: flex; flex-wrap: wrap; - flex: 1 1 mp.$content-xs; - padding: mp.$spacing-xs mp.$spacing-md mp.$spacing-md mp.$spacing-md; + flex: 1 1 $content-xs; + padding: $spacing-xs $spacing-md $spacing-md $spacing-md; .title-text { flex: 1 1 auto; .banner.warning & { - @media screen and #{mp.$mq-sm} { - padding-left: mp.$spacing-md; + @media screen and #{$mq-sm} { + padding-left: $spacing-md; border-left-width: 4px; border-left-style: solid; border-color: tokens.$color-yellow-50; @@ -80,10 +80,10 @@ } } - @media screen and #{mp.$mq-sm} { - padding: mp.$spacing-md; + @media screen and #{$mq-sm} { + padding: $spacing-md; } - @media screen and #{mp.$mq-lg} { + @media screen and #{$mq-lg} { flex-wrap: nowrap; } } @@ -97,10 +97,10 @@ .illustration { display: flex; align-items: center; - padding: mp.$spacing-md mp.$spacing-md 0 mp.$spacing-md; + padding: $spacing-md $spacing-md 0 $spacing-md; - @media screen and #{mp.$mq-md} { - padding: 0 mp.$spacing-md 0 mp.$spacing-xl; + @media screen and #{$mq-md} { + padding: 0 $spacing-md 0 $spacing-xl; } img { @@ -110,19 +110,19 @@ // For Banners in PremiumPromoBanners.tsx .flex-end { - border-bottom: 1px solid mp.$color-light-gray-20; + border-bottom: 1px solid $color-light-gray-20; align-items: center; - margin: 0 mp.$spacing-md; - padding-top: mp.$spacing-sm; + margin: 0 $spacing-md; + padding-top: $spacing-sm; width: 100%; - @media screen and #{mp.$mq-sm} { + @media screen and #{$mq-sm} { border-bottom: none; padding: none; width: auto; margin: 0; } - @media screen and #{mp.$mq-lg} { + @media screen and #{$mq-lg} { align-items: flex-end; } @@ -130,28 +130,28 @@ width: 90px; margin: 0 auto; - @media screen and #{mp.$mq-sm} { + @media screen and #{$mq-sm} { margin: 0; } } } .title { - @include mp.text-title-3xs; - font-family: mp.$font-stack-firefox; + @include text-title-3xs; + font-family: $font-stack-firefox; display: flex; align-items: center; - padding: mp.$spacing-sm 0 mp.$spacing-md 0; + padding: $spacing-sm 0 $spacing-md 0; .banner.info & { - @include mp.text-body-sm; - font-family: mp.$font-stack-base; + @include text-body-sm; + font-family: $font-stack-base; font-weight: 600; } .icon { flex: 0 0 auto; - margin-right: mp.$spacing-sm; + margin-right: $spacing-sm; .warning & { color: tokens.$color-yellow-50; @@ -159,7 +159,7 @@ .info & { color: tokens.$color-violet-30; - margin-right: mp.$spacing-xs; + margin-right: $spacing-xs; } } } @@ -168,7 +168,7 @@ a, button { display: inline-block; - padding-top: mp.$spacing-md; + padding-top: $spacing-md; font-weight: 700; color: tokens.$color-blue-50; cursor: pointer; @@ -178,7 +178,7 @@ .banner.info & { font-weight: 500; text-decoration: underline; - padding: mp.$spacing-sm 0 0 0; + padding: $spacing-sm 0 0 0; } &:hover { @@ -193,23 +193,23 @@ } .cta-large-button { - padding-top: mp.$spacing-md; + padding-top: $spacing-md; flex: 0 0 auto; align-self: center; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { align-self: center; margin: 0 0 0 auto; - padding: mp.$spacing-md; + padding: $spacing-md; } a { display: block; - padding: mp.$spacing-sm mp.$spacing-md; + padding: $spacing-sm $spacing-md; font-weight: 700; border: 2px solid tokens.$color-blue-50; color: tokens.$color-blue-50; - border-radius: mp.$border-radius-sm; + border-radius: $border-radius-sm; &:hover { background-color: tokens.$color-blue-60; diff --git a/frontend/src/components/Button.module.scss b/frontend/src/components/Button.module.scss index 53b57654e3..6b791b494d 100644 --- a/frontend/src/components/Button.module.scss +++ b/frontend/src/components/Button.module.scss @@ -1,4 +1,4 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; @use "../styles/tokens"; @@ -6,44 +6,44 @@ display: inline-flex; align-items: center; justify-content: center; - gap: mp.$spacing-xs; + gap: $spacing-xs; cursor: pointer; - background-color: mp.$color-blue-50; - padding: mp.$spacing-sm mp.$spacing-md; - border-radius: mp.$border-radius-sm; + background-color: $color-blue-50; + padding: $spacing-sm $spacing-md; + border-radius: $border-radius-sm; border: 2px solid transparent; - color: mp.$color-white; + color: $color-white; font-weight: 700; line-height: 1.25; - @include mp.text-body-md; + @include text-body-md; &:hover:not(:disabled) { - background-color: mp.$color-blue-60; + background-color: $color-blue-60; opacity: 1; } &:focus { border-color: mp_forms.$button-border-color-focus; box-shadow: mp_forms.$field-focus-ring; - color: mp.$color-white; + color: $color-white; outline: none; } &:disabled { cursor: not-allowed; - background-color: mp.$color-light-gray-80; + background-color: $color-light-gray-80; } &.is-destructive { - background-color: mp.$color-red-60; + background-color: $color-red-60; &:disabled { - background-color: mp.$color-red-10; + background-color: $color-red-10; } &:hover:not(:disabled) { - background-color: mp.$color-red-70; + background-color: $color-red-70; opacity: 1; } } @@ -51,19 +51,19 @@ &.is-secondary { background-color: transparent; border: none; - color: mp.$color-blue-50; + color: $color-blue-50; &:disabled { opacity: 0.4; } &:active { - color: mp.$color-blue-70; + color: $color-blue-70; } &:hover:not(:disabled) { background-color: transparent; - color: mp.$color-blue-60; + color: $color-blue-60; } } } diff --git a/frontend/src/components/InfoModal.module.scss b/frontend/src/components/InfoModal.module.scss index b538d671d0..d5c0eca0c2 100644 --- a/frontend/src/components/InfoModal.module.scss +++ b/frontend/src/components/InfoModal.module.scss @@ -1,9 +1,9 @@ @use "../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .underlay { align-items: center; - background-color: rgba(mp.$color-black, 0.4); + background-color: rgba($color-black, 0.4); bottom: 0; display: flex; justify-content: center; @@ -13,59 +13,59 @@ top: 0; .dialog-wrapper { - background: mp.$color-white; - border-radius: mp.$border-radius-md; - box-shadow: mp.$box-shadow-sm; + background: $color-white; + border-radius: $border-radius-md; + box-shadow: $box-shadow-sm; max-width: 90%; position: relative; - width: calc((#{mp.$content-sm} + #{mp.$content-md}) / 2); // 560px + width: calc((#{$content-sm} + #{$content-md}) / 2); // 560px .dismiss-button { align-items: center; background-color: transparent; - border-radius: mp.$border-radius-sm; + border-radius: $border-radius-sm; border-style: none; cursor: pointer; display: flex; height: 30px; justify-content: center; position: absolute; - right: mp.$spacing-sm; - top: mp.$spacing-sm; + right: $spacing-sm; + top: $spacing-sm; width: 30px; padding: 0; &:hover { - background-color: mp.$color-blue-50; - color: mp.$color-white; + background-color: $color-blue-50; + color: $color-white; } } .dialog-container { - padding: mp.$spacing-md; + padding: $spacing-md; - @media screen and #{mp.$mq-md} { - padding: mp.$spacing-lg mp.$spacing-xl; + @media screen and #{$mq-md} { + padding: $spacing-lg $spacing-xl; } .hero { - padding: mp.$spacing-sm 0; + padding: $spacing-sm 0; text-align: start; width: 90%; // Shorter width to make room for the close button on mobile - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { width: 100%; } .headline { - @include mp.text-title-3xs; - font-family: mp.$font-stack-firefox; + @include text-title-3xs; + font-family: $font-stack-firefox; font-weight: 700; } } .modal-body { - @include mp.text-body-sm; + @include text-body-sm; } } } diff --git a/frontend/src/components/InfoTooltip.module.scss b/frontend/src/components/InfoTooltip.module.scss index 0d76b9b6f8..2d684568bf 100644 --- a/frontend/src/components/InfoTooltip.module.scss +++ b/frontend/src/components/InfoTooltip.module.scss @@ -1,11 +1,11 @@ @use "../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .wrapper { position: relative; display: none; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { display: initial; } @@ -14,25 +14,25 @@ align-items: center; background-color: transparent; border-style: none; - color: mp.$color-light-gray-70; + color: $color-light-gray-70; } .tooltip { - @include mp.text-body-sm; + @include text-body-sm; $triangleWidth: 10px; position: absolute; - background-color: mp.$color-white; - box-shadow: mp.$box-shadow-sm; - border-radius: mp.$border-radius-sm; - padding: mp.$spacing-md; - min-width: mp.$content-xs; + background-color: $color-white; + box-shadow: $box-shadow-sm; + border-radius: $border-radius-sm; + padding: $spacing-md; + min-width: $content-xs; margin-top: $triangleWidth; margin-left: calc(-1 * ($triangleWidth / 2)); // Overlap .banner in , which is relatively positioned: z-index: 1; &:after { - background-color: mp.$color-white; + background-color: $color-white; content: "\00a0"; display: block; diff --git a/frontend/src/components/dashboard/CornerNotification.module.scss b/frontend/src/components/dashboard/CornerNotification.module.scss index d629f325d6..e98403dcf6 100644 --- a/frontend/src/components/dashboard/CornerNotification.module.scss +++ b/frontend/src/components/dashboard/CornerNotification.module.scss @@ -1,50 +1,50 @@ @use "../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .wrapper { position: relative; - padding-bottom: calc(mp.$spacing-md * 2 + 2rem); + padding-bottom: calc($spacing-md * 2 + 2rem); flex: 1 0 0; .card { position: fixed; - right: mp.$spacing-md; - bottom: mp.$spacing-md; + right: $spacing-md; + bottom: $spacing-md; display: flex; flex-direction: column; .card-header { - background-color: mp.$color-blue-90; - padding: mp.$spacing-md; - border-top-right-radius: mp.$border-radius-sm; - border-top-left-radius: mp.$border-radius-sm; + background-color: $color-blue-90; + padding: $spacing-md; + border-top-right-radius: $border-radius-sm; + border-top-left-radius: $border-radius-sm; } .card-content { - padding: mp.$spacing-lg; + padding: $spacing-lg; display: flex; flex-direction: column; - gap: mp.$spacing-sm; + gap: $spacing-sm; } .card-cta { - margin-top: mp.$spacing-md; + margin-top: $spacing-md; } .card-title { - color: mp.$color-blue-90; + color: $color-blue-90; - @include mp.text-title-3xs; - font-family: mp.$font-stack-firefox; + @include text-title-3xs; + font-family: $font-stack-firefox; font-weight: 600; word-wrap: break-word; } .card-description { - color: mp.$color-blue-90; + color: $color-blue-90; - @include mp.text-body-md; - font-family: mp.$font-stack-firefox; + @include text-body-md; + font-family: $font-stack-firefox; font-weight: 400; word-wrap: break-word; } @@ -52,14 +52,14 @@ .close-button { background-color: transparent; border-style: none; - border-radius: mp.$border-radius-sm; + border-radius: $border-radius-sm; padding: 0; cursor: pointer; - color: mp.$color-white; + color: $color-white; float: right; &:hover { - color: mp.$color-blue-50; + color: $color-blue-50; } } } @@ -76,9 +76,9 @@ } .card { - border-radius: mp.$border-radius-md; - box-shadow: mp.$box-shadow-sm; - background-color: mp.$color-white; - width: mp.$content-sm; - max-width: calc(100% - mp.$spacing-xl); + border-radius: $border-radius-md; + box-shadow: $box-shadow-sm; + background-color: $color-white; + width: $content-sm; + max-width: calc(100% - $spacing-xl); } diff --git a/frontend/src/components/dashboard/EmailForwardingModal.module.scss b/frontend/src/components/dashboard/EmailForwardingModal.module.scss index 4f7aeb84c1..eae6e805bb 100644 --- a/frontend/src/components/dashboard/EmailForwardingModal.module.scss +++ b/frontend/src/components/dashboard/EmailForwardingModal.module.scss @@ -1,10 +1,10 @@ @use "../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../styles/typography" as styles-typography; .underlay { position: fixed; - background-color: rgba(mp.$color-black, 0.4); + background-color: rgba($color-black, 0.4); top: 0; bottom: 0; left: 0; @@ -14,14 +14,14 @@ justify-content: center; .dialog-wrapper { - background: mp.$color-light-gray-10; - width: calc(100% - mp.$spacing-2xl); - border-radius: mp.$border-radius-md; - box-shadow: mp.$box-shadow-sm; - padding: mp.$spacing-md; - - @media screen and (mp.$mq-md) { - width: mp.$content-md; + background: $color-light-gray-10; + width: calc(100% - $spacing-2xl); + border-radius: $border-radius-md; + box-shadow: $box-shadow-sm; + padding: $spacing-md; + + @media screen and ($mq-md) { + width: $content-md; } .close-icon { @@ -32,13 +32,13 @@ .hero { display: flex; flex-direction: column; - gap: mp.$spacing-lg; - font-family: mp.$font-stack-firefox; + gap: $spacing-lg; + font-family: $font-stack-firefox; font-weight: 400; text-align: center; - border-radius: mp.$border-radius-md; - background-color: mp.$color-light-gray-10; - padding: mp.$spacing-lg mp.$spacing-md; + border-radius: $border-radius-md; + background-color: $color-light-gray-10; + padding: $spacing-lg $spacing-md; clear: right; img { @@ -54,12 +54,12 @@ .modal-title { text-align: left; - margin-bottom: mp.$spacing-sm; + margin-bottom: $spacing-sm; } .modal-title-success { text-align: center; - margin-bottom: mp.$spacing-sm; + margin-bottom: $spacing-sm; font-weight: 400; } } @@ -69,8 +69,8 @@ display: flex; align-items: center; justify-content: center; - padding: mp.$spacing-sm 0; - gap: mp.$spacing-sm; + padding: $spacing-sm 0; + gap: $spacing-sm; font-weight: 100; } } @@ -78,32 +78,32 @@ .modal-title { font-weight: 600; - @include mp.text-body-md; + @include text-body-md; color: tokens.$color-grey-50; } .nevermind-link { background-color: transparent; border-style: none; - color: mp.$color-blue-50; - border-radius: mp.$border-radius-sm; + color: $color-blue-50; + border-radius: $border-radius-sm; &:hover { - color: mp.$color-blue-70; + color: $color-blue-70; text-decoration: underline; cursor: pointer; } } .label-input { - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; border: 1px solid tokens.$color-grey-30; - border-radius: mp.$border-radius-sm; + border-radius: $border-radius-sm; font-weight: 100; - padding: mp.$spacing-sm mp.$spacing-md; + padding: $spacing-sm $spacing-md; // Inputs should be atleast 16px if we want to avoid iOS auto-zooming (MPP-3598) - @include mp.text-body-md; + @include text-body-md; color: tokens.$color-grey-40; width: 100%; } diff --git a/frontend/src/components/dashboard/FreeOnboarding.module.scss b/frontend/src/components/dashboard/FreeOnboarding.module.scss index 77af724687..9c40d65c15 100644 --- a/frontend/src/components/dashboard/FreeOnboarding.module.scss +++ b/frontend/src/components/dashboard/FreeOnboarding.module.scss @@ -1,5 +1,5 @@ @use "../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; @use "../../styles/typography" as styles-typography; @@ -12,21 +12,21 @@ .step, .controls { width: 100%; - max-width: mp.$content-xl; + max-width: $content-xl; margin: 0 auto; - padding: mp.$spacing-lg; + padding: $spacing-lg; .generate-new-mask { - padding: mp.$spacing-sm mp.$spacing-2xl; - margin-bottom: mp.$spacing-lg; + padding: $spacing-sm $spacing-2xl; + margin-bottom: $spacing-lg; } } .step.step-copy-mask { .copy-mask-header { - margin-bottom: mp.$spacing-lg; + margin-bottom: $spacing-lg; - @media screen and #{mp.$mq-lg} { + @media screen and #{$mq-lg} { margin-bottom: 0; } } @@ -42,19 +42,19 @@ display: flex; flex-direction: column; position: relative; - padding: mp.$spacing-lg mp.$spacing-xl; - margin-top: mp.$spacing-2xl; + padding: $spacing-lg $spacing-xl; + margin-top: $spacing-2xl; box-sizing: border-box; - background: mp.$color-white; + background: $color-white; background-clip: padding-box; border: solid 2px transparent; - border-radius: mp.$border-radius-md; + border-radius: $border-radius-md; hr { - background-color: mp.$color-white; + background-color: $color-white; height: 2px; width: 100%; - margin: mp.$spacing-md 0; + margin: $spacing-md 0; } } @@ -65,13 +65,13 @@ margin: 0 auto; display: none; - @media screen and #{mp.$mq-lg} { + @media screen and #{$mq-lg} { display: block; } img { position: absolute; - width: mp.$layout-xl; + width: $layout-xl; height: 125px; /* both calculations below deal with alignment of custom art element - vertical arrow */ bottom: -30px; @@ -90,7 +90,7 @@ /* sets order for clipped background */ z-index: -1; /* set to the same width of the border for clipping */ - margin: calc(mp.$spacing-xs * -1); + margin: calc($spacing-xs * -1); border-radius: inherit; background: linear-gradient( to right, @@ -103,11 +103,11 @@ .content-item { display: flex; flex-direction: row; - gap: mp.$spacing-lg; + gap: $spacing-lg; .content-text { display: flex; - gap: mp.$spacing-md; + gap: $spacing-md; align-items: flex-start; flex-direction: column; } @@ -115,15 +115,15 @@ .headline { font-weight: 700; - @include mp.text-body-md; - font-family: mp.$font-stack-firefox; - color: mp.$color-blue-80; + @include text-body-md; + font-family: $font-stack-firefox; + color: $color-blue-80; } .description { display: flex; flex-direction: column; - gap: mp.$spacing-lg; + gap: $spacing-lg; } } @@ -134,65 +134,65 @@ justify-content: space-evenly; .action-complete { - @include mp.text-body-sm; - font-family: mp.$font-stack-firefox; + @include text-body-sm; + font-family: $font-stack-firefox; display: flex; flex-direction: column; align-items: center; justify-content: center; - padding: mp.$spacing-md; - border-radius: mp.$border-radius-md; - background-color: mp.$color-white; + padding: $spacing-md; + border-radius: $border-radius-md; + background-color: $color-white; .label { display: inline-flex; align-items: center; - gap: mp.$spacing-xs; - padding-bottom: mp.$spacing-xs; + gap: $spacing-xs; + padding-bottom: $spacing-xs; svg { - color: mp.$color-blue-50; + color: $color-blue-50; } } samp { - @include mp.text-body-lg; - font-family: mp.$font-stack-firefox; + @include text-body-lg; + font-family: $font-stack-firefox; font-weight: 700; - color: mp.$color-purple-50; + color: $color-purple-50; } .domain { - @include mp.text-body-xs; - color: mp.$color-light-gray-90; + @include text-body-xs; + color: $color-light-gray-90; } } &.step-custom-domain { - max-width: mp.$content-xl; + max-width: $content-xl; .subdomain-picker-heading { - padding: mp.$spacing-md 0; + padding: $spacing-md 0; } .domain-example { - @include mp.font-firefox; + @include font-firefox; @include styles-typography.text-title-2xs { - color: mp.$color-light-gray-90; + color: $color-light-gray-90; display: inline-block; - padding: mp.$spacing-md 0; + padding: $spacing-md 0; text-overflow: ellipsis; white-space: nowrap; overflow-x: hidden; - max-width: mp.$content-xs; + max-width: $content-xs; } - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { max-width: 100%; } .customizable-part { - color: mp.$color-violet-50; + color: $color-violet-50; font-weight: 700; } } @@ -202,7 +202,7 @@ flex-direction: column; margin: 0 auto; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; justify-content: space-between; align-items: center; @@ -213,12 +213,12 @@ @include mp_forms.form-input; flex-grow: 2; margin: 0; - margin-bottom: mp.$spacing-md; + margin-bottom: $spacing-md; width: 100%; - @media screen and #{ mp.$mq-md } { + @media screen and #{ $mq-md } { margin: 0; - margin-right: mp.$spacing-md; + margin-right: $spacing-md; } } @@ -233,14 +233,14 @@ // Hide the description of the add-on on small screens, // because it isn't available on mobile. display: none; - padding: mp.$spacing-md 0; + padding: $spacing-md 0; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { display: block; } } - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { // Don't show the description of replies on small screens, // to focus on the add-on availability: .reply-description { @@ -252,16 +252,16 @@ } h3 { - @include mp.text-body-md; + @include text-body-md; } .get-addon-button { - margin-top: mp.$spacing-md; + margin-top: $spacing-md; // The extension isn't available on mobile, // so hide it on small screens: display: none; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { display: inline-block; } } @@ -272,38 +272,38 @@ display: flex; flex-direction: column; align-items: center; - gap: mp.$spacing-xs; + gap: $spacing-xs; h1 { @include styles-typography.text-title-sm { font-weight: 700; - font-family: mp.$font-stack-firefox; - color: mp.$color-purple-50; + font-family: $font-stack-firefox; + color: $color-purple-50; } } p { - @include mp.text-body-md; + @include text-body-md; font-weight: 600; - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; } } .content-wrapper { display: flex; flex-direction: column; - gap: mp.$spacing-2xl; + gap: $spacing-2xl; img { - margin: mp.$spacing-2xl auto 0 auto; + margin: $spacing-2xl auto 0 auto; max-width: 300px; - @media screen and #{mp.$mq-lg} { + @media screen and #{$mq-lg} { max-width: unset; } } - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; } } @@ -312,7 +312,7 @@ .hidden-mobile { display: none; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { display: inline-block; } } @@ -320,20 +320,20 @@ .headline { font-weight: 700; - @include mp.text-body-md; - font-family: mp.$font-stack-firefox; - color: mp.$color-blue-80; + @include text-body-md; + font-family: $font-stack-firefox; + color: $color-blue-80; } .content-text { display: flex; flex-direction: column; - gap: mp.$spacing-lg; + gap: $spacing-lg; div:nth-child(2) { - border: 3px solid mp.$color-white; - border-radius: mp.$border-radius-md; - padding: mp.$spacing-lg mp.$spacing-2xl; + border: 3px solid $color-white; + border-radius: $border-radius-md; + padding: $spacing-lg $spacing-2xl; } } @@ -347,7 +347,7 @@ .controls { display: flex; flex-direction: column; - gap: mp.$spacing-xl; + gap: $spacing-xl; align-items: center; width: 100%; @@ -355,11 +355,11 @@ .next-link { background-color: transparent; border-style: none; - color: mp.$color-blue-50; - border-radius: mp.$border-radius-sm; + color: $color-blue-50; + border-radius: $border-radius-sm; &:hover { - color: mp.$color-blue-70; + color: $color-blue-70; text-decoration: underline; cursor: pointer; } @@ -367,12 +367,12 @@ .next-link { /* allows for flush positioning of link to next page with pagination component */ - margin: calc(mp.$spacing-lg * -1) 0 mp.$spacing-xs mp.$spacing-sm; + margin: calc($spacing-lg * -1) 0 $spacing-xs $spacing-sm; display: flex; align-items: center; } - @media screen and (max-width: #{mp.$screen-md}) { + @media screen and (max-width: #{$screen-md}) { .get-addon-button { display: none; } @@ -386,37 +386,37 @@ /* this code is copied from progress bar used in premium onboarding */ progress { width: 100%; - max-width: mp.$content-md; + max-width: $content-md; } .styled-progress-bar { display: flex; width: 100%; - max-width: mp.$content-md; - gap: mp.$spacing-sm; + max-width: $content-md; + gap: $spacing-sm; list-style-type: none; li { width: 100%; - color: mp.$color-light-gray-90; + color: $color-light-gray-90; text-align: center; transition: color 0.2s ease-out; span { display: block; height: 5px; - background-color: mp.$color-light-gray-20; - margin-bottom: mp.$spacing-xs; + background-color: $color-light-gray-20; + margin-bottom: $spacing-xs; transition: box-shadow 1s ease-out, color 0.2s ease-out; } &.is-completed { - color: mp.$color-violet-20; + color: $color-violet-20; span { - box-shadow: inset 300px 0 0 0 mp.$color-violet-20; + box-shadow: inset 300px 0 0 0 $color-violet-20; } } } @@ -427,16 +427,16 @@ .addon-content-items { flex-direction: column; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; } } .addon-content-items:nth-child(2) { flex-direction: column-reverse; - margin-top: mp.$spacing-2xl; + margin-top: $spacing-2xl; - @media screen and #{ mp.$mq-md } { + @media screen and #{ $mq-md } { flex-direction: row; } } @@ -445,7 +445,7 @@ .small-arrow { display: none; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { display: flex; } } @@ -454,14 +454,14 @@ .addon-content-wrapper { display: flex; flex-direction: column; - gap: mp.$spacing-md; - margin-top: mp.$spacing-lg; + gap: $spacing-md; + margin-top: $spacing-lg; .addon-content-items { display: flex; flex-direction: row; align-items: center; - gap: mp.$spacing-2xl; + gap: $spacing-2xl; position: relative; .large-arrow, @@ -471,24 +471,24 @@ /* custom art element that requires absolute positioning */ .large-arrow { - bottom: calc(mp.$spacing-2xl * -1); - right: calc(mp.$spacing-lg * -5); + bottom: calc($spacing-2xl * -1); + right: calc($spacing-lg * -5); } /* custom art element that requires absolute positioning */ .small-arrow { - bottom: calc(mp.$spacing-2xl * -1); - left: calc(mp.$spacing-lg * -5); + bottom: calc($spacing-2xl * -1); + left: calc($spacing-lg * -5); } .headline { - @include mp.text-body-lg; + @include text-body-lg; } .addon-content-text { display: flex; flex-direction: column; - gap: mp.$spacing-sm; + gap: $spacing-sm; position: relative; } } @@ -496,8 +496,8 @@ .action-complete { text-align: center; - background: mp.$color-white; - padding: mp.$spacing-sm mp.$spacing-2xl; + background: $color-white; + padding: $spacing-sm $spacing-2xl; svg { margin: 0 auto; diff --git a/frontend/src/components/dashboard/Onboarding.module.scss b/frontend/src/components/dashboard/Onboarding.module.scss index d763532cd2..a364608ddb 100644 --- a/frontend/src/components/dashboard/Onboarding.module.scss +++ b/frontend/src/components/dashboard/Onboarding.module.scss @@ -1,29 +1,29 @@ @use "../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../styles/typography" as styles-typography; .wrapper { - padding: mp.$spacing-lg; - border-radius: mp.$border-radius-md; - border: 1px solid mp.$color-light-gray-40; + padding: $spacing-lg; + border-radius: $border-radius-md; + border: 1px solid $color-light-gray-40; h2 { @include styles-typography.text-title-2xs { - @include mp.font-firefox; - padding: mp.$spacing-sm 0; + @include font-firefox; + padding: $spacing-sm 0; } } .steps { display: flex; flex-direction: column; - gap: mp.$spacing-lg; + gap: $spacing-lg; list-style-type: none; margin: 0; - padding: mp.$spacing-lg 0; + padding: $spacing-lg 0; counter-reset: step-counter; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; } @@ -32,10 +32,10 @@ display: flex; flex-direction: column; align-items: center; - gap: mp.$spacing-xl; - background-color: mp.$color-white; - border-radius: mp.$border-radius-md; - padding: mp.$spacing-lg; + gap: $spacing-xl; + background-color: $color-white; + border-radius: $border-radius-md; + padding: $spacing-lg; counter-increment: step-counter; &::before { @@ -48,7 +48,7 @@ width: 100%; text-align: center; font-weight: 700; - color: mp.$color-light-gray-70; + color: $color-light-gray-70; } p, diff --git a/frontend/src/components/dashboard/PremiumOnboarding.module.scss b/frontend/src/components/dashboard/PremiumOnboarding.module.scss index 238c110216..53f6ca66e3 100644 --- a/frontend/src/components/dashboard/PremiumOnboarding.module.scss +++ b/frontend/src/components/dashboard/PremiumOnboarding.module.scss @@ -1,5 +1,5 @@ @use "../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; @use "../../styles/typography" as styles-typography; @@ -12,9 +12,9 @@ .step, .controls { width: 100%; - max-width: mp.$content-lg; + max-width: $content-lg; margin: 0 auto; - padding: mp.$spacing-lg; + padding: $spacing-lg; } .step { @@ -24,21 +24,21 @@ justify-content: space-evenly; .title-container { - margin: mp.$spacing-xl 0 mp.$spacing-lg 0; + margin: $spacing-xl 0 $spacing-lg 0; } .feature-item-list { list-style-type: none; li { - margin: mp.$spacing-sm 0; + margin: $spacing-sm 0; display: flex; flex-direction: row; align-items: center; - gap: mp.$spacing-sm; + gap: $spacing-sm; .check-icon { - fill: mp.$color-blue-50; + fill: $color-blue-50; min-width: 20px; // Width of the check icons } } @@ -46,111 +46,111 @@ h2 { @include styles-typography.text-title-sm { - font-family: mp.$font-stack-firefox; - color: mp.$color-purple-50; + font-family: $font-stack-firefox; + color: $color-purple-50; text-align: center; } } .lead { - @include mp.text-title-3xs; - font-family: mp.$font-stack-firefox; + @include text-title-3xs; + font-family: $font-stack-firefox; text-align: center; - padding-top: mp.$spacing-md; + padding-top: $spacing-md; } .description { - @include mp.text-body-sm; + @include text-body-sm; display: flex; flex-direction: column; align-items: center; - gap: mp.$spacing-2xl; - padding-top: mp.$spacing-lg; - max-width: mp.$content-lg; + gap: $spacing-2xl; + padding-top: $spacing-lg; + max-width: $content-lg; align-self: center; .description-bolded-headline { - @include mp.text-body-md; + @include text-body-md; font-weight: 600; display: block; } - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; } .content { max-width: 100%; - min-width: mp.$content-xs; + min-width: $content-xs; } .description-caption { - @include mp.text-body-sm; - color: mp.$color-purple-30; + @include text-body-sm; + color: $color-purple-30; font-weight: 500; } } .action-complete { - @include mp.text-body-sm; - font-family: mp.$font-stack-firefox; + @include text-body-sm; + font-family: $font-stack-firefox; display: flex; flex-direction: column; align-items: center; justify-content: center; - padding: mp.$spacing-md; - border-radius: mp.$border-radius-md; - background-color: mp.$color-white; + padding: $spacing-md; + border-radius: $border-radius-md; + background-color: $color-white; .label { display: inline-flex; align-items: center; - gap: mp.$spacing-xs; - padding-bottom: mp.$spacing-xs; + gap: $spacing-xs; + padding-bottom: $spacing-xs; svg { - color: mp.$color-blue-50; + color: $color-blue-50; } } samp { - @include mp.text-body-lg; - font-family: mp.$font-stack-firefox; + @include text-body-lg; + font-family: $font-stack-firefox; font-weight: 700; - color: mp.$color-purple-50; + color: $color-purple-50; } .domain { - @include mp.text-body-xs; - color: mp.$color-light-gray-90; + @include text-body-xs; + color: $color-light-gray-90; } } &.step-custom-domain { - max-width: mp.$content-xl; + max-width: $content-xl; .subdomain-picker-heading { - padding: mp.$spacing-md 0; + padding: $spacing-md 0; } .domain-example { - @include mp.font-firefox; + @include font-firefox; @include styles-typography.text-title-2xs { - color: mp.$color-light-gray-90; + color: $color-light-gray-90; display: inline-block; - padding: mp.$spacing-md 0; + padding: $spacing-md 0; text-overflow: ellipsis; white-space: nowrap; overflow-x: hidden; - max-width: mp.$content-xs; + max-width: $content-xs; } - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { max-width: 100%; } .customizable-part { - color: mp.$color-violet-50; + color: $color-violet-50; font-weight: 700; } } @@ -160,7 +160,7 @@ flex-direction: column; margin: 0 auto; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; justify-content: space-between; align-items: center; @@ -171,12 +171,12 @@ @include mp_forms.form-input; flex-grow: 2; margin: 0; - margin-bottom: mp.$spacing-md; + margin-bottom: $spacing-md; width: 100%; - @media screen and #{ mp.$mq-md } { + @media screen and #{ $mq-md } { margin: 0; - margin-right: mp.$spacing-md; + margin-right: $spacing-md; } } @@ -191,14 +191,14 @@ // Hide the description of the add-on on small screens, // because it isn't available on mobile. display: none; - padding: mp.$spacing-md 0; + padding: $spacing-md 0; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { display: block; } } - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { // Don't show the description of replies on small screens, // to focus on the add-on availability: .reply-description { @@ -210,16 +210,16 @@ } h3 { - @include mp.text-body-md; + @include text-body-md; } .get-addon-button { - margin-top: mp.$spacing-md; + margin-top: $spacing-md; // The extension isn't available on mobile, // so hide it on small screens: display: none; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { display: inline-block; } } @@ -229,24 +229,24 @@ .controls { display: flex; flex-direction: column; - gap: mp.$spacing-xl; + gap: $spacing-xl; align-items: center; width: 100%; .skip-link { background-color: transparent; border-style: none; - color: mp.$color-blue-50; - border-radius: mp.$border-radius-sm; + color: $color-blue-50; + border-radius: $border-radius-sm; &:hover { - color: mp.$color-blue-70; + color: $color-blue-70; text-decoration: underline; cursor: pointer; } } - @media screen and (max-width: #{mp.$screen-md}) { + @media screen and (max-width: #{$screen-md}) { .get-addon-button { display: none; } @@ -259,37 +259,37 @@ progress { width: 100%; - max-width: mp.$content-md; + max-width: $content-md; } .styled-progress-bar { display: flex; width: 100%; - max-width: mp.$content-md; - gap: mp.$spacing-sm; + max-width: $content-md; + gap: $spacing-sm; list-style-type: none; li { width: 100%; - color: mp.$color-light-gray-90; + color: $color-light-gray-90; text-align: center; transition: color 0.2s ease-out; span { display: block; height: 5px; - background-color: mp.$color-light-gray-20; - margin-bottom: mp.$spacing-xs; + background-color: $color-light-gray-20; + margin-bottom: $spacing-xs; transition: box-shadow 1s ease-out, color 0.2s ease-out; } &.is-completed { - color: mp.$color-violet-30; + color: $color-violet-30; span { - box-shadow: inset 300px 0 0 0 mp.$color-violet-30; + box-shadow: inset 300px 0 0 0 $color-violet-30; } } } diff --git a/frontend/src/components/dashboard/SubdomainPicker.module.scss b/frontend/src/components/dashboard/SubdomainPicker.module.scss index d740ffe8ec..45fe656a1d 100644 --- a/frontend/src/components/dashboard/SubdomainPicker.module.scss +++ b/frontend/src/components/dashboard/SubdomainPicker.module.scss @@ -1,23 +1,23 @@ @use "../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; @use "../../styles/typography" as styles-typography; .card { - border-radius: mp.$border-radius-md; - padding: mp.$spacing-lg; - box-shadow: mp.$box-shadow-sm; - background-color: mp.$color-white; + border-radius: $border-radius-md; + padding: $spacing-lg; + box-shadow: $box-shadow-sm; + background-color: $color-white; display: flex; flex-direction: column; align-items: center; border: 4px solid transparent; &:target { - border-color: mp.$color-blue-50; + border-color: $color-blue-50; } - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; .description, @@ -27,54 +27,54 @@ } a { - @include mp.text-body-sm; - color: mp.$color-blue-50; + @include text-body-sm; + color: $color-blue-50; &:hover, &:focus { - color: mp.$color-blue-60; + color: $color-blue-60; } } .description { max-width: 100%; - min-width: mp.$content-xs; - border-color: mp.$color-light-gray-30; + min-width: $content-xs; + border-color: $color-light-gray-30; border-width: 1px; border-bottom-style: solid; - margin-bottom: mp.$spacing-md; - padding-bottom: mp.$spacing-md; + margin-bottom: $spacing-md; + padding-bottom: $spacing-md; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { border-bottom-style: none; margin-bottom: 0; padding-bottom: 0; border-right-style: solid; - margin-right: mp.$spacing-lg; - padding-right: mp.$spacing-lg; + margin-right: $spacing-lg; + padding-right: $spacing-lg; align-self: start; } .action-step { - @include mp.text-body-sm; - color: mp.$color-violet-50; + @include text-body-sm; + color: $color-violet-50; margin-top: 0; - margin-bottom: mp.$spacing-md; + margin-bottom: $spacing-md; } h2 { @include styles-typography.text-title-2xs { - padding: mp.$spacing-sm 0; + padding: $spacing-sm 0; } } .lead { - @include mp.text-body-sm; - padding: mp.$spacing-md 0; + @include text-body-sm; + padding: $spacing-md 0; color: tokens.$color-grey-50; display: flex; flex-direction: column; - gap: mp.$spacing-md; + gap: $spacing-md; } } @@ -88,30 +88,30 @@ .input-wrapper { width: 100%; - @media screen and #{mp.$mq-md} { - max-width: mp.$content-sm; + @media screen and #{$mq-md} { + max-width: $content-sm; } } .example { - @include mp.font-firefox; - @include mp.text-title-3xs; - color: mp.$color-light-gray-90; + @include font-firefox; + @include text-title-3xs; + color: $color-light-gray-90; display: block; text-overflow: ellipsis; white-space: nowrap; overflow-x: hidden; text-align: center; - margin: mp.$spacing-md 0; + margin: $spacing-md 0; width: 100%; .subdomain-part { - color: mp.$color-violet-50; + color: $color-violet-50; font-weight: 700; } } - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { width: 50%; } @@ -120,7 +120,7 @@ flex-direction: column; width: 100%; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; justify-content: space-between; } @@ -129,12 +129,12 @@ @include mp_forms.form-input; flex-grow: 2; margin: 0; - margin-bottom: mp.$spacing-md; + margin-bottom: $spacing-md; width: 100%; - @media screen and #{ mp.$mq-md } { + @media screen and #{ $mq-md } { margin: 0; - margin-right: mp.$spacing-md; + margin-right: $spacing-md; } } @@ -144,7 +144,7 @@ } .illustration { - margin-top: mp.$spacing-lg; + margin-top: $spacing-lg; } } } diff --git a/frontend/src/components/dashboard/aliases/AddressPickerModal.module.scss b/frontend/src/components/dashboard/aliases/AddressPickerModal.module.scss index 18a39378c9..e5c1548a21 100644 --- a/frontend/src/components/dashboard/aliases/AddressPickerModal.module.scss +++ b/frontend/src/components/dashboard/aliases/AddressPickerModal.module.scss @@ -1,10 +1,10 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; .underlay { position: fixed; - background-color: rgba(mp.$color-black, 0.4); + background-color: rgba($color-black, 0.4); top: 0; bottom: 0; left: 0; @@ -14,48 +14,48 @@ justify-content: center; .dialog-wrapper { - background: mp.$color-white; - width: calc((#{mp.$content-sm} + #{mp.$content-md}) / 2); // 560px + background: $color-white; + width: calc((#{$content-sm} + #{$content-md}) / 2); // 560px max-width: 90%; - border-radius: mp.$border-radius-md; - box-shadow: mp.$box-shadow-sm; - padding: mp.$spacing-md; + border-radius: $border-radius-md; + box-shadow: $box-shadow-sm; + padding: $spacing-md; .hero { - @include mp.text-title-3xs; - font-family: mp.$font-stack-firefox; + @include text-title-3xs; + font-family: $font-stack-firefox; font-weight: 700; text-align: center; - border-radius: mp.$border-radius-md; - background-color: mp.$color-light-gray-10; - padding: mp.$spacing-md mp.$spacing-sm; + border-radius: $border-radius-md; + background-color: $color-light-gray-10; + padding: $spacing-md $spacing-sm; - @media screen and #{mp.$mq-sm} { - padding: mp.$spacing-lg mp.$spacing-md; + @media screen and #{$mq-sm} { + padding: $spacing-lg $spacing-md; } } .tip { display: flex; - gap: mp.$spacing-sm; + gap: $spacing-sm; word-break: break-word; - border-left: 2px solid mp.$color-violet-30; + border-left: 2px solid $color-violet-30; margin: 0 auto; width: 85%; - padding-left: mp.$spacing-sm; - font-family: mp.$font-stack-base; + padding-left: $spacing-sm; + font-family: $font-stack-base; font-weight: 400; color: tokens.$color-grey-50; - @include mp.text-body-sm; + @include text-body-sm; .tip-icon { // There is limited space on the mask creation modal on mobile. // Hiding this icon until larger screens increases the available space for copy. display: none; - color: mp.$color-pink-30; + color: $color-pink-30; - @media screen and #{mp.$mq-sm} { + @media screen and #{$mq-sm} { display: block; } @@ -66,11 +66,11 @@ } hr { - border: 1px solid mp.$color-light-gray-20; - margin-top: mp.$spacing-lg; + border: 1px solid $color-light-gray-20; + margin-top: $spacing-lg; - @media screen and #{mp.$mq-sm} { - margin-top: mp.$spacing-xl; + @media screen and #{$mq-sm} { + margin-top: $spacing-xl; } } @@ -78,16 +78,16 @@ text-align: center; .form-heading { - color: mp.$color-dark-gray-70; - padding: mp.$spacing-md 0; + color: $color-dark-gray-70; + padding: $spacing-md 0; - @media screen and #{mp.$mq-sm} { - padding: mp.$spacing-lg 0; + @media screen and #{$mq-sm} { + padding: $spacing-lg 0; } } .prefix { - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; color: tokens.$color-grey-50; width: 70%; margin: 0 auto; @@ -98,26 +98,26 @@ label { text-align: start; font-weight: 600; - margin-top: mp.$spacing-xl; + margin-top: $spacing-xl; } input { @include mp_forms.form-input; // Override form-input's margin: - margin: mp.$spacing-sm 0 0 0; + margin: $spacing-sm 0 0 0; font-weight: 400; - padding: mp.$spacing-sm; + padding: $spacing-sm; color: tokens.$color-grey-40; - font-family: mp.$font-stack-base; + font-family: $font-stack-base; - @include mp.text-body-md; + @include text-body-md; } } .suffix { - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; display: block; - padding-top: mp.$spacing-xs; + padding-top: $spacing-xs; } } @@ -125,34 +125,34 @@ display: flex; align-items: center; justify-content: center; - gap: mp.$spacing-sm; - margin: mp.$spacing-md mp.$spacing-sm; - font-family: mp.$font-stack-firefox; + gap: $spacing-sm; + margin: $spacing-md $spacing-sm; + font-family: $font-stack-firefox; color: tokens.$color-grey-50; font-weight: 600; - @media screen and #{mp.$mq-sm} { - margin: mp.$spacing-xl mp.$spacing-sm; + @media screen and #{$mq-sm} { + margin: $spacing-xl $spacing-sm; } input[type="checkbox"] { width: 20px; height: 20px; border: 2px solid tokens.$color-grey-20; - border-radius: mp.$border-radius-sm; + border-radius: $border-radius-sm; -webkit-appearance: none; } input[type="checkbox"]:checked { - background-color: mp.$color-blue-50; - border-color: mp.$color-blue-50; + background-color: $color-blue-50; + border-color: $color-blue-50; appearance: checkbox; } .promotionals-blocking-description { a { display: block; - color: mp.$color-blue-50; + color: $color-blue-50; &:hover { text-decoration: underline; @@ -166,26 +166,26 @@ display: flex; align-items: center; justify-content: space-between; - padding-top: mp.$spacing-lg; + padding-top: $spacing-lg; - @media screen and #{mp.$mq-sm} { - padding-top: mp.$spacing-xl; + @media screen and #{$mq-sm} { + padding-top: $spacing-xl; } .cancel-button { border-style: none; background-color: transparent; cursor: pointer; - border-radius: mp.$border-radius-sm; - color: mp.$color-blue-50; - padding: mp.$spacing-sm 0; + border-radius: $border-radius-sm; + color: $color-blue-50; + padding: $spacing-sm 0; &:hover { - color: mp.$color-link-hover; + color: $color-link-hover; } &:focus { - color: mp.$color-blue-50; + color: $color-blue-50; } } } diff --git a/frontend/src/components/dashboard/aliases/Alias.module.scss b/frontend/src/components/dashboard/aliases/Alias.module.scss index 01604c88c1..51c948fa5b 100644 --- a/frontend/src/components/dashboard/aliases/Alias.module.scss +++ b/frontend/src/components/dashboard/aliases/Alias.module.scss @@ -1,10 +1,10 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; $toggleTransitionDuration: 200ms; .alias-card { - border-radius: mp.$border-radius-md; + border-radius: $border-radius-md; padding: 0; transition: background-color $toggleTransitionDuration ease, @@ -13,25 +13,25 @@ $toggleTransitionDuration: 200ms; background-position: top; &.is-enabled { - box-shadow: mp.$box-shadow-sm; - background-color: mp.$color-white; + box-shadow: $box-shadow-sm; + background-color: $color-white; } &.is-disabled { - background-color: rgba(mp.$color-white, 0.5); + background-color: rgba($color-white, 0.5); } } .main-data { display: flex; - gap: mp.$spacing-xs; - padding: mp.$spacing-md; + gap: $spacing-xs; + padding: $spacing-md; } .controls { - min-width: mp.$content-xs; + min-width: $content-xs; display: flex; - gap: mp.$spacing-xs; + gap: $spacing-xs; align-items: center; flex-wrap: wrap; } @@ -47,19 +47,19 @@ $trackerRemovalIndicatorWidth: 20px; color: tokens.$color-grey-30; display: flex; align-items: center; - padding: 0 mp.$spacing-xs; + padding: 0 $spacing-xs; } $arrowWidth: 6px; .tracker-removal-indicator-tooltip { position: absolute; - box-shadow: mp.$box-shadow-sm; - padding: mp.$spacing-md; - background-color: mp.$color-white; - border-radius: mp.$border-radius-md; - width: mp.$content-xs; - top: calc(-50% - mp.$spacing-md / 2); - left: $trackerRemovalIndicatorWidth + mp.$spacing-sm + $arrowWidth; + box-shadow: $box-shadow-sm; + padding: $spacing-md; + background-color: $color-white; + border-radius: $border-radius-md; + width: $content-xs; + top: calc(-50% - $spacing-md / 2); + left: $trackerRemovalIndicatorWidth + $spacing-sm + $arrowWidth; // Overlap , which is relatively positioned: z-index: 1; @@ -71,7 +71,7 @@ $trackerRemovalIndicatorWidth: 20px; top: calc(50% - $arrowWidth); left: $arrowWidth * -1; transform: rotate(45deg); - background-color: mp.$color-white; + background-color: $color-white; } } } @@ -81,7 +81,7 @@ $trackerRemovalIndicatorWidth: 20px; // Grows to push the mask address to the next line when present, // but not so much to push itself down below the // `.tracker-removal-indicator-wrapper` if present: - width: calc(100% - $trackerRemovalIndicatorWidth - mp.$spacing-xs); + width: calc(100% - $trackerRemovalIndicatorWidth - $spacing-xs); } .copy-controls { @@ -95,14 +95,14 @@ $trackerRemovalIndicatorWidth: 20px; width: 100%; .copy-button { - @include mp.text-body-lg; + @include text-body-lg; display: flex; align-items: center; background-color: transparent; border: 2px solid transparent; - border-radius: mp.$border-radius-md; + border-radius: $border-radius-md; cursor: pointer; - padding: 0 mp.$spacing-sm; + padding: 0 $spacing-sm; width: 100%; flex-basis: 0; @@ -111,12 +111,12 @@ $trackerRemovalIndicatorWidth: 20px; // relative positioning), Protocol's default outline isn't visible by // default. Thus, we add a focus style using a border, and then remove the // remnants of the outline that are made visible when there's a border. - border-color: mp.$color-blue-50; + border-color: $color-blue-50; outline: none; } .address { - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; overflow: hidden; text-overflow: ellipsis; display: inline-block; @@ -126,13 +126,13 @@ $trackerRemovalIndicatorWidth: 20px; } .copy-icon { - padding: 0 mp.$spacing-sm; + padding: 0 $spacing-sm; opacity: 0.5; display: inline-block; flex-grow: 2; flex-shrink: 0; - max-width: mp.$layout-sm; - color: mp.$color-light-gray-90; + max-width: $layout-sm; + color: $color-light-gray-90; } &:hover { @@ -150,16 +150,16 @@ $trackerRemovalIndicatorWidth: 20px; opacity: 0; pointer-events: none; transition: opacity 2s; - background-color: mp.$color-violet-30; - color: mp.$color-white; - border-radius: mp.$border-radius-md; - padding: 0 mp.$spacing-xs; + background-color: $color-violet-30; + color: $color-white; + border-radius: $border-radius-md; + padding: 0 $spacing-xs; // By allowing this to overlap other elements, // we don't need to reserve empty space for it. // Otherwise, this empty space would push the // .expand-toggle out of the card on small screens: position: absolute; - left: mp.$spacing-xs; + left: $spacing-xs; top: 0; &.is-shown { @@ -176,27 +176,27 @@ $trackerRemovalIndicatorWidth: 20px; align-items: center; flex: 1 0 auto; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { display: flex; } .block-level-label { - @include mp.text-body-sm; + @include text-body-sm; border: 2px solid transparent; - border-radius: mp.$border-radius-sm; - padding: mp.$spacing-sm; + border-radius: $border-radius-sm; + padding: $spacing-sm; font-weight: 600; flex: 1 0 auto; text-align: center; &.block-level-all-label { - color: mp.$color-light-gray-70; - border-color: mp.$color-light-gray-40; + color: $color-light-gray-70; + border-color: $color-light-gray-40; } &.block-level-promotional-label { - color: mp.$color-yellow-50; - border-color: mp.$color-yellow-40; + color: $color-yellow-50; + border-color: $color-yellow-40; } } } @@ -209,7 +209,7 @@ $trackerRemovalIndicatorWidth: 20px; display: flex; } - @media screen and #{mp.$mq-lg} { + @media screen and #{$mq-lg} { // I've grouped these together under the media query to emphasise that they // switch visibility at the same time: // stylelint-disable-next-line no-duplicate-selectors @@ -231,24 +231,24 @@ $trackerRemovalIndicatorWidth: 20px; $arrowWidth: 6px; .tooltip { - @include mp.text-body-sm; + @include text-body-sm; position: absolute; - width: mp.$content-sm; - max-width: calc(100% - 2 * mp.$spacing-xs); - top: calc(100% + $arrowWidth + mp.$spacing-xs); - right: mp.$spacing-xs; - background-color: mp.$color-light-gray-10; - border: 1px solid mp.$color-light-gray-30; - box-shadow: mp.$box-shadow-sm; + width: $content-sm; + max-width: calc(100% - 2 * $spacing-xs); + top: calc(100% + $arrowWidth + $spacing-xs); + right: $spacing-xs; + background-color: $color-light-gray-10; + border: 1px solid $color-light-gray-30; + box-shadow: $box-shadow-sm; display: flex; flex-direction: column; - gap: mp.$spacing-sm; - padding: mp.$spacing-sm mp.$spacing-md; - border-radius: mp.$border-radius-sm; + gap: $spacing-sm; + padding: $spacing-sm $spacing-md; + border-radius: $border-radius-sm; // Prevent other .stat-wrapper elements from overlapping this tooltip: z-index: 2; - @media screen and #{mp.$mq-lg} { + @media screen and #{$mq-lg} { // The wrapper doesn't span the full width on large screens, // so limiting the tooltip to its wrapper's size makes it too thin: max-width: unset; @@ -260,11 +260,11 @@ $trackerRemovalIndicatorWidth: 20px; width: 2 * $arrowWidth; position: absolute; top: -1 * $arrowWidth; - right: mp.$spacing-xl; + right: $spacing-xl; transform: rotate(45deg); - background-color: mp.$color-light-gray-10; - border-top: 1px solid mp.$color-light-gray-30; - border-left: 1px solid mp.$color-light-gray-30; + background-color: $color-light-gray-10; + border-top: 1px solid $color-light-gray-30; + border-left: 1px solid $color-light-gray-30; } } } @@ -285,17 +285,17 @@ $trackerRemovalIndicatorWidth: 20px; flex-direction: column; align-items: center; justify-content: center; - padding: 0 mp.$spacing-md; + padding: 0 $spacing-md; transition: opacity $toggleTransitionDuration ease; .number { - @include mp.text-body-xl; - font-family: mp.$font-stack-firefox; + @include text-body-xl; + font-family: $font-stack-firefox; font-weight: 700; } .label { - @include mp.text-body-sm; + @include text-body-sm; line-height: 1.2; height: 25px; display: flex; @@ -330,9 +330,9 @@ $trackerRemovalIndicatorWidth: 20px; width: 100%; display: flex; flex-direction: row-reverse; - padding: mp.$spacing-sm mp.$spacing-md; - border-bottom: 1px solid mp.$color-light-gray-20; - color: mp.$color-marketing-gray-99; + padding: $spacing-sm $spacing-md; + border-bottom: 1px solid $color-light-gray-20; + color: $color-marketing-gray-99; .label { flex: 1 0 auto; @@ -354,9 +354,9 @@ $trackerRemovalIndicatorWidth: 20px; button { background-color: transparent; border-style: none; - padding: mp.$spacing-sm; - border-radius: mp.$border-radius-sm; - color: mp.$color-dark-gray-50; + padding: $spacing-sm; + border-radius: $border-radius-sm; + color: $color-dark-gray-50; cursor: pointer; svg { @@ -379,25 +379,25 @@ $trackerRemovalIndicatorWidth: 20px; padding 200ms; display: flex; flex-direction: column; - gap: mp.$spacing-md; + gap: $spacing-md; // Make sure hidden elements are unfocusable: visibility: hidden; .is-expanded & { // An arbitrary high value that allows it to expand to its full height: max-height: 1000vh; - border-color: mp.$color-light-gray-20; - padding: mp.$spacing-sm 0; + border-color: $color-light-gray-20; + padding: $spacing-sm 0; visibility: visible; } .row { display: flex; flex-direction: column; - gap: mp.$spacing-md; - padding-inline: mp.$spacing-md; - padding-bottom: mp.$spacing-md; - border-bottom: 1px solid mp.$color-light-gray-20; + gap: $spacing-md; + padding-inline: $spacing-md; + padding-bottom: $spacing-md; + border-bottom: 1px solid $color-light-gray-20; &:last-child { border-bottom-style: none; @@ -407,21 +407,21 @@ $trackerRemovalIndicatorWidth: 20px; dl { flex-grow: 2; display: flex; - gap: mp.$spacing-sm; + gap: $spacing-sm; flex-direction: column; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; - gap: mp.$spacing-xl; + gap: $spacing-xl; } dt { - @include mp.text-body-xs; - color: mp.$color-dark-gray-05; + @include text-body-xs; + color: $color-dark-gray-05; } } - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; .metadata { @@ -429,7 +429,7 @@ $trackerRemovalIndicatorWidth: 20px; background-repeat: no-repeat; background-position: left center; background-size: $metadataIconSize $metadataIconSize; - padding-left: calc($metadataIconSize + mp.$spacing-md); + padding-left: calc($metadataIconSize + $spacing-md); } .forward-target { diff --git a/frontend/src/components/dashboard/aliases/AliasDeletionButton.module.scss b/frontend/src/components/dashboard/aliases/AliasDeletionButton.module.scss index c22fb7ae30..1de09c59b4 100644 --- a/frontend/src/components/dashboard/aliases/AliasDeletionButton.module.scss +++ b/frontend/src/components/dashboard/aliases/AliasDeletionButton.module.scss @@ -1,5 +1,5 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; .deletion-button { @@ -8,26 +8,26 @@ justify-content: center; cursor: pointer; background-color: transparent; - padding: mp.$spacing-sm mp.$spacing-md; - border-radius: mp.$border-radius-sm; + padding: $spacing-sm $spacing-md; + border-radius: $border-radius-sm; font-weight: 600; border: 2px solid transparent; // Keep some space for the focus outline margin: 2px; - color: mp.$color-red-60; + color: $color-red-60; line-height: 1.25; - @include mp.text-body-md; + @include text-body-md; &:hover { - background-color: mp.$color-red-70; - color: mp.$color-white; + background-color: $color-red-70; + color: $color-white; } } .underlay { position: fixed; - background-color: rgba(mp.$color-black, 0.4); + background-color: rgba($color-black, 0.4); top: 0; bottom: 0; left: 0; @@ -37,43 +37,43 @@ justify-content: center; .dialog-wrapper { - background: mp.$color-white; - width: calc((#{mp.$content-sm} + #{mp.$content-md}) / 2); // 560px + background: $color-white; + width: calc((#{$content-sm} + #{$content-md}) / 2); // 560px max-width: 90%; - border-radius: mp.$border-radius-md; - box-shadow: mp.$box-shadow-sm; - padding: mp.$spacing-md; + border-radius: $border-radius-md; + box-shadow: $box-shadow-sm; + padding: $spacing-md; overflow-wrap: break-word; .hero { - @include mp.text-title-3xs; - font-family: mp.$font-stack-firefox; + @include text-title-3xs; + font-family: $font-stack-firefox; font-weight: 700; text-align: center; - border-radius: mp.$border-radius-md; - background-color: mp.$color-light-gray-10; - padding: mp.$spacing-lg mp.$spacing-md; + border-radius: $border-radius-md; + background-color: $color-light-gray-10; + padding: $spacing-lg $spacing-md; } .alias-to-delete { - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; display: block; text-align: center; - padding: mp.$spacing-lg mp.$spacing-lg mp.$spacing-sm; + padding: $spacing-lg $spacing-lg $spacing-sm; } .permanence-warning { - @include mp.text-body-sm; + @include text-body-sm; text-align: center; - padding: mp.$spacing-sm mp.$spacing-lg; - color: mp.$color-dark-gray-70; + padding: $spacing-sm $spacing-lg; + color: $color-dark-gray-70; } .usage-warning { - @include mp.text-body-sm; + @include text-body-sm; text-align: center; - padding: mp.$spacing-sm mp.$spacing-lg mp.$spacing-lg; - color: mp.$color-red-50; + padding: $spacing-sm $spacing-lg $spacing-lg; + color: $color-red-50; } .confirm { @@ -82,14 +82,14 @@ align-items: center; label { - background-color: mp.$color-light-gray-10; - border-radius: mp.$border-radius-md; - margin-bottom: mp.$spacing-md; - padding: mp.$spacing-md; + background-color: $color-light-gray-10; + border-radius: $border-radius-md; + margin-bottom: $spacing-md; + padding: $spacing-md; cursor: pointer; input { - margin-right: mp.$spacing-sm; + margin-right: $spacing-sm; } } @@ -98,22 +98,22 @@ display: flex; align-items: center; justify-content: space-between; - padding-top: mp.$spacing-xl; + padding-top: $spacing-xl; .cancel-button { border-style: none; background-color: transparent; cursor: pointer; - border-radius: mp.$border-radius-sm; - color: mp.$color-blue-50; - padding: mp.$spacing-sm mp.$spacing-md; + border-radius: $border-radius-sm; + color: $color-blue-50; + padding: $spacing-sm $spacing-md; &:hover { - color: mp.$color-link-hover; + color: $color-link-hover; } &:focus { - color: mp.$color-blue-50; + color: $color-blue-50; } } } diff --git a/frontend/src/components/dashboard/aliases/AliasDeletionButtonPermanent.module.scss b/frontend/src/components/dashboard/aliases/AliasDeletionButtonPermanent.module.scss index a5aa8a8126..50e324cfdd 100644 --- a/frontend/src/components/dashboard/aliases/AliasDeletionButtonPermanent.module.scss +++ b/frontend/src/components/dashboard/aliases/AliasDeletionButtonPermanent.module.scss @@ -1,5 +1,5 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; .deletion-button { @@ -8,26 +8,26 @@ justify-content: center; cursor: pointer; background-color: transparent; - padding: mp.$spacing-sm mp.$spacing-md; - border-radius: mp.$border-radius-sm; + padding: $spacing-sm $spacing-md; + border-radius: $border-radius-sm; font-weight: 600; border: 2px solid transparent; // Keep some space for the focus outline margin: 2px; - color: mp.$color-red-60; + color: $color-red-60; line-height: 1.25; - @include mp.text-body-md; + @include text-body-md; &:hover { - background-color: mp.$color-red-70; - color: mp.$color-white; + background-color: $color-red-70; + color: $color-white; } } .underlay { position: fixed; - background-color: rgba(mp.$color-black, 0.4); + background-color: rgba($color-black, 0.4); top: 0; bottom: 0; left: 0; @@ -37,51 +37,51 @@ justify-content: center; .dialog-wrapper { - background: mp.$color-white; - width: calc((#{mp.$content-sm} + #{mp.$content-md}) / 2); // 560px + background: $color-white; + width: calc((#{$content-sm} + #{$content-md}) / 2); // 560px max-width: 90%; - border-radius: mp.$border-radius-md; - box-shadow: mp.$box-shadow-sm; - padding: mp.$spacing-md; + border-radius: $border-radius-md; + box-shadow: $box-shadow-sm; + padding: $spacing-md; overflow-wrap: break-word; hr { border: 1px solid tokens.$color-grey-10; - margin-top: mp.$spacing-2xl; + margin-top: $spacing-2xl; } .hero { - @include mp.text-title-3xs; - font-family: mp.$font-stack-firefox; + @include text-title-3xs; + font-family: $font-stack-firefox; font-weight: 700; text-align: center; - border-radius: mp.$border-radius-md; - background-color: mp.$color-light-gray-10; - padding: mp.$spacing-lg mp.$spacing-md; + border-radius: $border-radius-md; + background-color: $color-light-gray-10; + padding: $spacing-lg $spacing-md; } .alias-to-delete { - @include mp.text-title-3xs; + @include text-title-3xs; font-weight: 700; - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; display: block; text-align: center; - padding: mp.$spacing-lg mp.$spacing-lg mp.$spacing-sm; + padding: $spacing-lg $spacing-lg $spacing-sm; color: tokens.$color-grey-50; - margin-bottom: mp.$spacing-sm; + margin-bottom: $spacing-sm; user-select: auto; -webkit-user-select: auto; // Fixes overflow breaking in iOS devices (MPP-3686) } .permanence-warning { - @include mp.text-body-sm; + @include text-body-sm; font-weight: 600; text-align: center; - padding: mp.$spacing-sm mp.$spacing-lg; + padding: $spacing-sm $spacing-lg; color: tokens.$color-grey-50; - margin: 0 auto mp.$spacing-2xl auto; + margin: 0 auto $spacing-2xl auto; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { width: 75%; } } @@ -91,24 +91,24 @@ display: flex; align-items: center; justify-content: space-between; - padding-top: mp.$spacing-xl; + padding-top: $spacing-xl; .delete-btn { - width: calc(mp.$layout-xl + mp.$layout-lg); + width: calc($layout-xl + $layout-lg); } .cancel-button { border-style: none; background-color: transparent; cursor: pointer; - border-radius: mp.$border-radius-sm; - color: mp.$color-blue-50; - padding: mp.$spacing-sm mp.$spacing-md; + border-radius: $border-radius-sm; + color: $color-blue-50; + padding: $spacing-sm $spacing-md; &:hover { - color: mp.$color-link-hover; + color: $color-link-hover; } &:focus { - color: mp.$color-blue-50; + color: $color-blue-50; } } } @@ -116,21 +116,21 @@ .warning-wrapper { position: relative; display: flex; - border-left: mp.$border-radius-xs solid color tokens.$color-error; + border-left: $border-radius-xs solid color tokens.$color-error; align-items: center; - padding-left: mp.$spacing-sm; + padding-left: $spacing-sm; background-color: #fff; - gap: mp.$spacing-md; + gap: $spacing-md; width: 90%; margin: 0 auto; .left-content { display: flex; align-self: self-start; - gap: mp.$spacing-sm; + gap: $spacing-sm; p { - @include mp.text-body-sm; + @include text-body-sm; color: tokens.$color-grey-50; } } diff --git a/frontend/src/components/dashboard/aliases/AliasList.module.scss b/frontend/src/components/dashboard/aliases/AliasList.module.scss index 9f66d4736a..4c5fda07b5 100644 --- a/frontend/src/components/dashboard/aliases/AliasList.module.scss +++ b/frontend/src/components/dashboard/aliases/AliasList.module.scss @@ -1,5 +1,5 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; // Resolves mobile extra spacing issues for 2nd step of updated free onboarding (MPP-3597). @@ -10,12 +10,12 @@ .controls { display: grid; grid-template-columns: auto 1fr auto; - row-gap: mp.$spacing-md; + row-gap: $spacing-md; grid-template-areas: "stringFilterToggle categoryFilter newAliasButton" "stringFilter stringFilter stringFilter"; align-items: center; - padding: mp.$spacing-md 0; + padding: $spacing-md 0; // The focus indicators of contained elements can overflow: overflow: visible; @@ -35,7 +35,7 @@ grid-area: newAliasButton; } - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { grid-template-areas: "stringFilter categoryFilter newAliasButton"; .string-filter-toggle { @@ -45,7 +45,7 @@ } .alias-card-wrapper { - padding-top: mp.$spacing-lg; + padding-top: $spacing-lg; list-style-type: none; &:first-child { @@ -55,10 +55,10 @@ .string-filter-toggle { background-color: transparent; - color: mp.$color-dark-gray-50; + color: $color-dark-gray-50; border-radius: 100%; border-style: none; - padding: mp.$spacing-sm; + padding: $spacing-sm; cursor: pointer; display: flex; align-items: center; @@ -66,8 +66,8 @@ &.active, &:hover { - background-color: mp.$color-white; - color: mp.$color-blue-50; + background-color: $color-white; + color: $color-blue-50; } img { @@ -87,7 +87,7 @@ display: block; } - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { display: block; } @@ -96,14 +96,14 @@ margin: 0; background-image: url("/icons/search-blue.svg"); background-repeat: no-repeat; - background-position: left mp.$spacing-sm top 50%; + background-position: left $spacing-sm top 50%; // The search icon is 20px wide, surrounded by padding: - padding-left: calc(mp.$spacing-sm + 20px + mp.$spacing-sm); + padding-left: calc($spacing-sm + 20px + $spacing-sm); // Leave some space on the right for `.match-count` - padding-right: calc(mp.$spacing-sm + 30px); + padding-right: calc($spacing-sm + 30px); width: 100%; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { width: auto; } } @@ -113,7 +113,7 @@ transition: opacity 200ms; position: absolute; transform: translateX(-100%); - padding: mp.$spacing-sm; + padding: $spacing-sm; } // Show the counter when the search field is focused // or has a value: @@ -121,7 +121,7 @@ input:focus + .match-count { opacity: 1; // Make sure input in the input field isn't shown in the background - background-color: mp.$color-white; + background-color: $color-white; // Then give it the same borders as the input it's covering... @include mp_forms.form-input; // ...except where it intersects with the input: @@ -132,27 +132,27 @@ } .category-filter { - padding-left: mp.$spacing-xs; + padding-left: $spacing-xs; - @media screen and #{mp.$mq-md} { - padding-left: mp.$spacing-md; + @media screen and #{$mq-md} { + padding-left: $spacing-md; } } .empty-state-message { - background-color: mp.$color-white; - border-radius: mp.$border-radius-md; - padding: mp.$spacing-lg; + background-color: $color-white; + border-radius: $border-radius-md; + padding: $spacing-lg; .clear-filters-button { background-color: transparent; border-style: none; - color: mp.$color-blue-50; + color: $color-blue-50; text-decoration: underline; cursor: pointer; &:hover { - color: mp.$color-blue-40; + color: $color-blue-40; } } } diff --git a/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss b/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss index f71f45a001..30b89ebecd 100644 --- a/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss +++ b/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss @@ -1,5 +1,5 @@ @use "~@mozilla-protocol/core/protocol/css/includes/tokens/dist/index" as dist; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; $stopLabelHeight: 2rem; $iconHeight: 50px; @@ -13,32 +13,32 @@ $trackLineHeight: 4px; flex-direction: column; align-items: center; touch-action: none; - padding: 0 mp.$spacing-md; + padding: 0 $spacing-md; width: 100%; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { --thumbDiameter: 24px; } - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; - gap: mp.$spacing-xl; - padding: 0 mp.$spacing-lg; + gap: $spacing-xl; + padding: 0 $spacing-lg; } - @media screen and #{mp.$mq-lg} { - gap: mp.$layout-2xl; + @media screen and #{$mq-lg} { + gap: $layout-2xl; } .control { width: 100%; - max-width: mp.$content-xs; + max-width: $content-xs; display: flex; flex-direction: column; align-items: center; - padding-left: mp.$spacing-md; + padding-left: $spacing-md; .slider-label { - padding-bottom: mp.$spacing-md; + padding-bottom: $spacing-md; display: inline-block; } @@ -70,7 +70,7 @@ $trackLineHeight: 4px; .track-line { position: absolute; - background-color: mp.$color-light-gray-20; + background-color: $color-light-gray-20; height: $trackLineHeight; top: calc(var(--trackLineOffset) - #{$iconHeight}); width: 100%; @@ -79,10 +79,10 @@ $trackLineHeight: 4px; &:focus-within { .track-line, .track-stop { - background-color: mp.$color-violet-05; + background-color: $color-violet-05; } .track-stop p { - color: mp.$color-violet-90; + color: $color-violet-90; } } @@ -100,15 +100,15 @@ $trackLineHeight: 4px; width: var(--thumbDiameter); height: var(--thumbDiameter); border-radius: 50%; - background-color: mp.$color-violet-20; - border: 4px solid mp.$color-violet-50; - box-shadow: mp.$box-shadow-sm; + background-color: $color-violet-20; + border: 4px solid $color-violet-50; + box-shadow: $box-shadow-sm; &.is-focused { // The alpha value makes sure the lock icon is still visible for // free users when the thumb is placed on the "Promotionals" level: - background-color: rgba(mp.$color-purple-30, 0.5); - border-color: mp.$color-purple-60; + background-color: rgba($color-purple-30, 0.5); + border-color: $color-purple-60; } &.is-dragging { // This class can be used if we want to style the thumb @@ -122,22 +122,22 @@ $trackLineHeight: 4px; width: var(--thumbDiameter); height: var(--thumbDiameter); border-radius: 50%; - background-color: mp.$color-light-gray-20; + background-color: $color-light-gray-20; position: absolute; display: flex; align-items: center; justify-content: center; - padding: mp.$spacing-sm; + padding: $spacing-sm; &:hover { - background-color: mp.$color-purple-10; + background-color: $color-purple-10; img { filter: grayscale(0%); } p { - color: mp.$color-purple-30; + color: $color-purple-30; } } @@ -147,7 +147,7 @@ $trackLineHeight: 4px; // the slider thumb), we set a negative top margin of its own height, // and the height of the thumb: margin-top: calc(-1 * #{$iconHeight} - var(--thumbDiameter)); - padding-bottom: mp.$spacing-sm; + padding-bottom: $spacing-sm; // The image should not take up space within the track stop, // so that the lock icon from .track-stop-promotional can be properly // centered: @@ -155,15 +155,15 @@ $trackLineHeight: 4px; } p { - @include mp.text-body-sm; - color: mp.$color-dark-gray-05; + @include text-body-sm; + color: $color-dark-gray-05; font-weight: 700; position: absolute; // To position the track sop label below the track stops (which are as // high as the slider thumb), we place it at a distance of the thumb // from the top, and some spacing so that it's not glued to the track // stop: - top: calc(var(--thumbDiameter) + #{mp.$spacing-xs}); + top: calc(var(--thumbDiameter) + #{$spacing-xs}); height: $stopLabelHeight; word-break: keep-all; } @@ -173,7 +173,7 @@ $trackLineHeight: 4px; filter: grayscale(0%); } p { - color: mp.$color-black; + color: $color-black; } } @@ -198,7 +198,7 @@ $trackLineHeight: 4px; } } - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { padding-top: 0; .track-stop { @@ -215,14 +215,14 @@ $trackLineHeight: 4px; .value-description { $arrowEdgeLength: 8px; margin-top: $arrowEdgeLength; - background-color: mp.$color-light-gray-10; - padding: mp.$spacing-md mp.$spacing-xl; - border-radius: mp.$border-radius-md; + background-color: $color-light-gray-10; + padding: $spacing-md $spacing-xl; + border-radius: $border-radius-md; position: relative; width: 100%; &::after { - background-color: mp.$color-light-gray-10; + background-color: $color-light-gray-10; height: 2 * $arrowEdgeLength; width: 2 * $arrowEdgeLength; transform: rotate(45deg); @@ -233,15 +233,15 @@ $trackLineHeight: 4px; } .value-description-content { - width: mp.$content-xs; + width: $content-xs; max-width: 100%; display: flex; flex-direction: column; - gap: mp.$spacing-xs; + gap: $spacing-xs; a { display: inline-block; - color: mp.$color-blue-50; + color: $color-blue-50; font-weight: 500; &:hover { @@ -252,11 +252,11 @@ $trackLineHeight: 4px; .locked-message { display: flex; align-items: center; - gap: mp.$spacing-xs; + gap: $spacing-xs; font-weight: 600; .lock-icon { - color: mp.$color-light-gray-70; + color: $color-light-gray-70; } } } @@ -265,11 +265,11 @@ $trackLineHeight: 4px; display: none; } - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { display: flex; align-items: center; justify-content: flex-end; - gap: mp.$spacing-md; + gap: $spacing-md; background-color: transparent; // The content changes depending on the selected blocking mode, // so if the height would be based on the content, switching blocking modes @@ -299,7 +299,7 @@ $trackLineHeight: 4px; position: absolute; // On small screens, `.track-stop` has a top padding of `$spacing-sm` // before the track stop begins: - top: mp.$spacing-sm; + top: $spacing-sm; left: 33%; width: 33%; // This is like the regular .track's bottom padding, but with @@ -312,41 +312,41 @@ $trackLineHeight: 4px; border-style: none; cursor: pointer; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { top: 0; } .track-stop-promotional { - color: mp.$color-light-gray-70; + color: $color-light-gray-70; border-style: none; &:hover { // The standard background colour, because this can't be selected // by a free user: - background-color: mp.$color-light-gray-20; + background-color: $color-light-gray-20; } p { - color: mp.$color-light-gray-70; + color: $color-light-gray-70; text-align: center; .premium-only-marker { - @include mp.text-body-xs; - color: mp.$color-purple-50; + @include text-body-xs; + color: $color-purple-50; } } &.is-selected { p, .lock-icon { - color: mp.$color-purple-50; + color: $color-purple-50; } } } &:hover { p { - color: mp.$color-purple-30; + color: $color-purple-30; } } @@ -354,7 +354,7 @@ $trackLineHeight: 4px; outline: none; .track-stop { - outline: 2px solid mp.$color-blue-50; + outline: 2px solid $color-blue-50; } } } @@ -372,29 +372,29 @@ $trackLineHeight: 4px; justify-content: center; .upgrade-tooltip { - background-color: mp.$color-white; - box-shadow: mp.$box-shadow-sm; + background-color: $color-white; + box-shadow: $box-shadow-sm; display: flex; - padding: mp.$spacing-xl; - gap: mp.$spacing-lg; - width: mp.$content-md; - max-width: calc(100% - mp.$spacing-xl); - border-radius: mp.$border-radius-sm; + padding: $spacing-xl; + gap: $spacing-lg; + width: $content-md; + max-width: calc(100% - $spacing-xl); + border-radius: $border-radius-sm; .close-button { position: absolute; - top: mp.$spacing-sm; - right: mp.$spacing-sm; + top: $spacing-sm; + right: $spacing-sm; padding: 0; background-color: transparent; border-style: none; - border-radius: mp.$border-radius-sm; + border-radius: $border-radius-sm; } .promotionals-blocking-icon { display: none; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { display: inline-block; } } @@ -403,24 +403,24 @@ $trackLineHeight: 4px; display: flex; flex-direction: column; align-items: flex-start; - gap: mp.$spacing-xs; + gap: $spacing-xs; b { display: flex; align-items: center; - gap: mp.$spacing-sm; + gap: $spacing-sm; svg { - color: mp.$color-light-gray-70; + color: $color-light-gray-70; } } a { - color: mp.$color-blue-50; + color: $color-blue-50; // Add some padding to the focus outline, without affecting the CTA's // position: - margin: -1 * mp.$spacing-xs; - padding: mp.$spacing-xs; + margin: -1 * $spacing-xs; + padding: $spacing-xs; &:hover { text-decoration: underline; diff --git a/frontend/src/components/dashboard/aliases/CustomAddressGenerationModal.module.scss b/frontend/src/components/dashboard/aliases/CustomAddressGenerationModal.module.scss index 60db6a8dcb..69f5e27316 100644 --- a/frontend/src/components/dashboard/aliases/CustomAddressGenerationModal.module.scss +++ b/frontend/src/components/dashboard/aliases/CustomAddressGenerationModal.module.scss @@ -1,4 +1,4 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; @use "../../../styles/tokens"; @@ -15,11 +15,11 @@ .dialog-wrapper { background: tokens.$color-white; - width: calc((#{mp.$content-sm} + #{mp.$content-md}) / 2); // 560px + width: calc((#{$content-sm} + #{$content-md}) / 2); // 560px max-width: 90%; - border-radius: mp.$border-radius-md; - box-shadow: mp.$box-shadow-sm; - padding: mp.$spacing-md; + border-radius: $border-radius-md; + box-shadow: $box-shadow-sm; + padding: $spacing-md; outline: none; position: relative; @@ -38,18 +38,18 @@ .invalid-address-msg { display: flex; position: absolute; - box-shadow: mp.$box-shadow-sm; - border-radius: mp.$border-radius-sm; - border-left: mp.$border-radius-md solid color tokens.$color-error; + box-shadow: $box-shadow-sm; + border-radius: $border-radius-sm; + border-left: $border-radius-md solid color tokens.$color-error; align-items: center; - padding: mp.$spacing-sm mp.$spacing-md mp.$spacing-sm mp.$spacing-sm; + padding: $spacing-sm $spacing-md $spacing-sm $spacing-sm; background-color: #fff; - gap: mp.$spacing-md; + gap: $spacing-md; .left-content { display: flex; align-self: self-start; - gap: mp.$spacing-sm; + gap: $spacing-sm; } .prefix-error-icon { @@ -59,7 +59,7 @@ .prefix-error-icon.close-button { background-color: transparent; border-style: none; - border-radius: mp.$border-radius-sm; + border-radius: $border-radius-sm; cursor: pointer; color: tokens.$color-grey-30; @@ -71,32 +71,32 @@ } .hero { - @include mp.text-title-3xs; - font-family: mp.$font-stack-firefox; + @include text-title-3xs; + font-family: $font-stack-firefox; font-weight: 700; text-align: center; - border-radius: mp.$border-radius-md; - background-color: mp.$color-light-gray-10; - padding: mp.$spacing-md mp.$spacing-sm; + border-radius: $border-radius-md; + background-color: $color-light-gray-10; + padding: $spacing-md $spacing-sm; - @media screen and #{mp.$mq-sm} { - padding: mp.$spacing-lg mp.$spacing-md; + @media screen and #{$mq-sm} { + padding: $spacing-lg $spacing-md; } } .tip { display: flex; - gap: mp.$spacing-sm; + gap: $spacing-sm; word-break: break-word; border-left: 2px solid tokens.$color-violet-30; margin: 0 auto; width: 85%; - padding-left: mp.$spacing-sm; - font-family: mp.$font-stack-base; + padding-left: $spacing-sm; + font-family: $font-stack-base; font-weight: 400; color: tokens.$color-grey-50; - @include mp.text-body-sm; + @include text-body-sm; .tip-icon { // There is limited space on the mask creation modal on mobile. @@ -104,7 +104,7 @@ display: none; color: tokens.$color-pink-30; - @media screen and #{mp.$mq-sm} { + @media screen and #{$mq-sm} { display: block; } @@ -115,11 +115,11 @@ } hr { - border: 1px solid mp.$color-light-gray-20; - margin-top: mp.$spacing-lg; + border: 1px solid $color-light-gray-20; + margin-top: $spacing-lg; - @media screen and #{mp.$mq-sm} { - margin-top: mp.$spacing-xl; + @media screen and #{$mq-sm} { + margin-top: $spacing-xl; } } @@ -127,16 +127,16 @@ text-align: center; .form-heading { - color: mp.$color-dark-gray-70; - padding: mp.$spacing-md 0; + color: $color-dark-gray-70; + padding: $spacing-md 0; - @media screen and #{mp.$mq-sm} { - padding: mp.$spacing-lg 0; + @media screen and #{$mq-sm} { + padding: $spacing-lg 0; } } .prefix { - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; color: tokens.$color-grey-50; width: 70%; margin: 0 auto; @@ -147,26 +147,26 @@ label { text-align: start; font-weight: 600; - margin-top: mp.$spacing-xl; + margin-top: $spacing-xl; } .profile-registered-domain-value { color: tokens.$color-blue-50; word-break: break-word; - margin-top: mp.$spacing-md; - margin-bottom: mp.$spacing-2xl; + margin-top: $spacing-md; + margin-bottom: $spacing-2xl; } input { @include mp_forms.form-input; // Override form-input's margin: - margin: mp.$spacing-sm 0 0 0; + margin: $spacing-sm 0 0 0; font-weight: 400; - padding: mp.$spacing-sm; + padding: $spacing-sm; color: tokens.$color-grey-40; - font-family: mp.$font-stack-base; + font-family: $font-stack-base; - @include mp.text-body-md; + @include text-body-md; &.invalid-prefix:focus { outline: 5px solid tokens.$color-red-10; border: 2px solid tokens.$color-error; @@ -190,18 +190,18 @@ display: flex; text-align: left; align-items: center; - margin: 0 0 mp.$spacing-sm mp.$spacing-sm; - gap: mp.$spacing-md; + margin: 0 0 $spacing-sm $spacing-sm; + gap: $spacing-md; .error-icons { - min-width: mp.$spacing-md; + min-width: $spacing-md; flex: 0 0 auto; } .check-icon { color: tokens.$color-green-80; - width: calc(mp.$spacing-md - mp.$spacing-xs); - height: calc(mp.$spacing-md - mp.$spacing-xs); + width: calc($spacing-md - $spacing-xs); + height: calc($spacing-md - $spacing-xs); } .close-icon { @@ -212,13 +212,13 @@ .tooltip { display: initial; - @include mp.text-body-sm; + @include text-body-sm; $triangleWidth: 10px; position: absolute; background-color: tokens.$color-white; - box-shadow: mp.$box-shadow-sm; - border-radius: mp.$border-radius-sm; - padding: mp.$spacing-md; + box-shadow: $box-shadow-sm; + border-radius: $border-radius-sm; + padding: $spacing-md; width: 100%; margin-top: $triangleWidth; left: 0; @@ -244,9 +244,9 @@ } .suffix { - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; display: block; - padding-top: mp.$spacing-xs; + padding-top: $spacing-xs; } } @@ -254,8 +254,8 @@ display: flex; align-items: center; flex-direction: column; - gap: mp.$spacing-sm; - margin-top: mp.$spacing-md; + gap: $spacing-sm; + margin-top: $spacing-md; p { font-weight: 700; @@ -263,7 +263,7 @@ width: 100%; text-align: center; - @include mp.text-body-lg; + @include text-body-lg; } } @@ -271,21 +271,21 @@ display: flex; align-items: center; justify-content: center; - gap: mp.$spacing-sm; - margin: mp.$spacing-md mp.$spacing-sm; - font-family: mp.$font-stack-firefox; + gap: $spacing-sm; + margin: $spacing-md $spacing-sm; + font-family: $font-stack-firefox; color: tokens.$color-grey-50; font-weight: 600; - @media screen and #{mp.$mq-sm} { - margin: mp.$spacing-xl mp.$spacing-sm; + @media screen and #{$mq-sm} { + margin: $spacing-xl $spacing-sm; } input[type="checkbox"] { width: 20px; height: 20px; border: 2px solid tokens.$color-grey-40; - border-radius: mp.$border-radius-sm; + border-radius: $border-radius-sm; -webkit-appearance: none; } @@ -312,22 +312,22 @@ display: flex; align-items: center; justify-content: space-between; - padding-top: mp.$spacing-lg; + padding-top: $spacing-lg; - @media screen and #{mp.$mq-sm} { - padding-top: mp.$spacing-xl; + @media screen and #{$mq-sm} { + padding-top: $spacing-xl; } .end-button { border-style: none; background-color: transparent; cursor: pointer; - border-radius: mp.$border-radius-sm; + border-radius: $border-radius-sm; color: tokens.$color-blue-50; - padding: mp.$spacing-sm 0; + padding: $spacing-sm 0; &:hover { - color: mp.$color-link-hover; + color: $color-link-hover; } &:focus { diff --git a/frontend/src/components/dashboard/aliases/MaskCard.module.scss b/frontend/src/components/dashboard/aliases/MaskCard.module.scss index 49c8c565c0..f5bd3ff71d 100644 --- a/frontend/src/components/dashboard/aliases/MaskCard.module.scss +++ b/frontend/src/components/dashboard/aliases/MaskCard.module.scss @@ -1,15 +1,15 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../../styles/tokens"; .card { background-color: tokens.$color-white; - border-radius: mp.$border-radius-md; + border-radius: $border-radius-md; transition: box-shadow 200ms ease-in-out, opacity 200ms ease-in-out; &.is-enabled { - box-shadow: mp.$box-shadow-sm; + box-shadow: $box-shadow-sm; } &:not(.is-enabled) { opacity: 0.7; @@ -19,8 +19,8 @@ .bar { display: flex; align-items: center; - gap: mp.$spacing-sm; - padding: mp.$spacing-sm; + gap: $spacing-sm; + padding: $spacing-sm; .summary { flex: 1 1 auto; @@ -32,15 +32,15 @@ flex-wrap: wrap; position: relative; - @media screen and #{mp.$mq-md} { - gap: mp.$spacing-sm; + @media screen and #{$mq-md} { + gap: $spacing-sm; flex-wrap: nowrap; } .label-editor-wrapper { - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { // Same as .summary's gap: - padding-inline-end: mp.$spacing-sm; + padding-inline-end: $spacing-sm; border-right: 1px solid tokens.$color-grey-10; } } @@ -50,10 +50,10 @@ align-items: center; overflow: hidden; - @media screen and #{mp.$mq-md} { - gap: mp.$spacing-sm; + @media screen and #{$mq-md} { + gap: $spacing-sm; } - @media screen and (max-width: mp.$screen-xs) { + @media screen and (max-width: $screen-xs) { overflow: hidden; } } @@ -61,13 +61,13 @@ .copy-button { display: flex; align-items: center; - gap: mp.$spacing-xs; + gap: $spacing-xs; background-color: transparent; color: tokens.$color-blue-50; border-style: none; - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; font-weight: 500; - border-radius: mp.$border-radius-sm; + border-radius: $border-radius-sm; cursor: pointer; overflow: inherit; @@ -91,17 +91,17 @@ .copied-confirmation { background-color: tokens.$color-green-50; - padding: mp.$spacing-xs mp.$spacing-sm; - border-radius: mp.$border-radius-md; + padding: $spacing-xs $spacing-sm; + border-radius: $border-radius-md; font-weight: 600; opacity: 1; pointer-events: none; z-index: 2; // Places copied label above promotions label - @media screen and (max-width: mp.$screen-md) { - @include mp.text-body-sm; + @media screen and (max-width: $screen-md) { + @include text-body-sm; } - @media screen and (max-width: mp.$content-sm) { + @media screen and (max-width: $content-sm) { position: absolute; right: 0; } @@ -119,7 +119,7 @@ color: tokens.$color-grey-50; display: none; - @media screen and #{mp.$mq-lg} { + @media screen and #{$mq-lg} { display: initial; } } @@ -134,12 +134,12 @@ border-style: none; cursor: pointer; color: tokens.$color-grey-40; - border-radius: mp.$border-radius-sm; - width: mp.$layout-sm; + border-radius: $border-radius-sm; + width: $layout-sm; z-index: 3; // Ensures that the button gets placed above the copied label (needed for long custom domains at viewport width ~ 780px) @media (any-pointer: coarse) { - width: mp.$layout-md; + width: $layout-md; } &:hover { @@ -177,8 +177,8 @@ .details { border-top: 1px solid tokens.$color-grey-10; - @media screen and #{mp.$mq-md} { - padding: mp.$spacing-md mp.$spacing-lg; + @media screen and #{$mq-md} { + padding: $spacing-md $spacing-lg; } } } @@ -188,16 +188,16 @@ transition: padding 200ms ease-in-out; .stats { - @media screen and (max-width: mp.$screen-md) { + @media screen and (max-width: $screen-md) { display: flex; flex-direction: column; - padding-inline: mp.$spacing-md; + padding-inline: $spacing-md; border-bottom: 1px solid tokens.$color-grey-10; .stat { display: flex; justify-content: space-between; - padding-block: mp.$spacing-sm; + padding-block: $spacing-sm; &:not(:last-child) { border-bottom: 1px solid tokens.$color-grey-10; @@ -217,18 +217,18 @@ } dt { - @include mp.text-body-md; + @include text-body-md; } dd { - @include mp.text-body-lg; + @include text-body-lg; font-weight: 700; } } } - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { display: flex; - gap: mp.$spacing-md; + gap: $spacing-md; justify-content: space-between; width: 100%; @@ -238,8 +238,8 @@ flex-direction: column-reverse; align-items: center; background-color: tokens.$color-grey-05; - padding: mp.$spacing-sm; - border-radius: mp.$border-radius-sm; + padding: $spacing-sm; + border-radius: $border-radius-sm; // De-emphasise stats for: // - blocked emails when a mask is not blocking emails, @@ -255,8 +255,8 @@ } dd { - @include mp.text-title-2xs; - font-family: mp.$font-stack-firefox; + @include text-title-2xs; + font-family: $font-stack-firefox; font-weight: 600; } } @@ -275,18 +275,18 @@ } } - @media screen and (max-width: mp.$screen-md) { + @media screen and (max-width: $screen-md) { display: flex; flex-direction: column; - gap: mp.$spacing-md; - padding: mp.$spacing-lg; + gap: $spacing-md; + padding: $spacing-lg; $arrowWidth: 6px; .block-level-setting-description { - @include mp.text-body-sm; + @include text-body-sm; background-color: tokens.$color-grey-05; - padding: mp.$spacing-lg; - border-radius: mp.$border-radius-md; + padding: $spacing-lg; + border-radius: $border-radius-md; position: relative; &::after { @@ -305,7 +305,7 @@ } &.is-blocking-none .block-level-setting-description::after { - left: calc(calc(100% / 6) - (mp.$spacing-md / 2)); + left: calc(calc(100% / 6) - ($spacing-md / 2)); } &.is-blocking-promotionals .block-level-setting-description::after { @@ -313,17 +313,17 @@ } &.is-blocking-all .block-level-setting-description::after { - right: calc(calc(100% / 6) - (mp.$spacing-md / 2)); + right: calc(calc(100% / 6) - ($spacing-md / 2)); } } - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { display: flex; align-items: center; - gap: mp.$spacing-2xl; - padding: mp.$spacing-lg; + gap: $spacing-2xl; + padding: $spacing-lg; .block-level-setting { - flex: 0 0 mp.$content-sm; + flex: 0 0 $content-sm; } .block-level-setting-description { @@ -337,7 +337,7 @@ .block-level-control-wrapper { display: flex; flex-direction: column; - gap: mp.$spacing-md; + gap: $spacing-md; .block-level-control-label { text-align: center; @@ -347,18 +347,18 @@ $toggle-border-radius: 40px; background-color: tokens.$color-grey-05; border-radius: $toggle-border-radius; - border: mp.$border-radius-xs solid tokens.$color-grey-10; - padding: mp.$spacing-xs; + border: $border-radius-xs solid tokens.$color-grey-10; + padding: $spacing-xs; display: flex; align-items: center; justify-content: space-between; - gap: mp.$spacing-md; + gap: $spacing-md; label { flex: 1 1 0; - padding: mp.$spacing-xs mp.$spacing-sm; + padding: $spacing-xs $spacing-sm; display: flex; - gap: mp.$spacing-sm; + gap: $spacing-sm; align-items: center; justify-content: center; background-color: tokens.$color-white; @@ -390,10 +390,10 @@ } &.is-disabled { - padding-inline: mp.$spacing-md; + padding-inline: $spacing-md; color: tokens.$color-grey-30; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { svg { flex: 1 1 10px; } @@ -410,20 +410,20 @@ } .meta { - @media screen and (max-width: mp.$screen-md) { + @media screen and (max-width: $screen-md) { display: flex; flex-direction: column; dl { - @include mp.text-body-sm; + @include text-body-sm; display: flex; flex-direction: column; - gap: mp.$spacing-md; + gap: $spacing-md; border-top: 1px solid tokens.$color-grey-10; - padding: mp.$spacing-lg; + padding: $spacing-lg; dd { - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; font-weight: 500; img { @@ -436,28 +436,28 @@ display: flex; flex-direction: column; border-top: 1px solid tokens.$color-grey-10; - padding: mp.$spacing-md; + padding: $spacing-md; } } - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { display: flex; - padding-block: mp.$spacing-lg mp.$spacing-sm; + padding-block: $spacing-lg $spacing-sm; border-top: 1px solid tokens.$color-grey-10; dl { display: flex; - gap: mp.$spacing-2xl; + gap: $spacing-2xl; font-weight: 500; dt { - @include mp.text-body-sm; + @include text-body-sm; color: tokens.$color-grey-50; } dd { display: flex; align-items: center; - gap: mp.$spacing-sm; + gap: $spacing-sm; color: tokens.$color-grey-60; } } @@ -470,18 +470,18 @@ } .promotions-locked-description-wrapper { - margin-top: mp.$spacing-md; + margin-top: $spacing-md; background: tokens.$color-grey-05; - border-radius: mp.$border-radius-md; - padding: mp.$spacing-md; + border-radius: $border-radius-md; + padding: $spacing-md; display: flex; flex-direction: column; - gap: mp.$spacing-sm; + gap: $spacing-sm; strong { display: flex; align-items: center; - gap: mp.$spacing-sm; + gap: $spacing-sm; color: tokens.$color-grey-50; } } @@ -495,18 +495,18 @@ } .onboarding-alias-container { - width: mp.$content-xs; + width: $content-xs; position: absolute; - padding: mp.$spacing-sm mp.$spacing-md; + padding: $spacing-sm $spacing-md; color: tokens.$color-black; background: tokens.$color-white; border: solid 4px tokens.$color-purple-50; - border-radius: mp.$border-radius-md; - right: mp.$spacing-xl; - box-shadow: mp.$box-shadow-md; + border-radius: $border-radius-md; + right: $spacing-xl; + box-shadow: $box-shadow-md; display: none; - @media screen and #{mp.$mq-lg} { + @media screen and #{$mq-lg} { display: block; } } diff --git a/frontend/src/components/dashboard/subdomain/ConfirmationForm.module.scss b/frontend/src/components/dashboard/subdomain/ConfirmationForm.module.scss index 80389f61d7..1e754bb6be 100644 --- a/frontend/src/components/dashboard/subdomain/ConfirmationForm.module.scss +++ b/frontend/src/components/dashboard/subdomain/ConfirmationForm.module.scss @@ -1,11 +1,11 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .permanence-warning { - @include mp.text-body-sm; + @include text-body-sm; text-align: center; - padding: mp.$spacing-md mp.$spacing-lg; - color: mp.$color-dark-gray-70; + padding: $spacing-md $spacing-lg; + color: $color-dark-gray-70; } .confirm { @@ -14,13 +14,13 @@ align-items: center; label { - background-color: mp.$color-light-gray-10; - border-radius: mp.$border-radius-md; - padding: mp.$spacing-md; + background-color: $color-light-gray-10; + border-radius: $border-radius-md; + padding: $spacing-md; cursor: pointer; input { - margin-right: mp.$spacing-sm; + margin-right: $spacing-sm; } .subdomain { @@ -37,10 +37,10 @@ display: flex; align-items: center; justify-content: space-between; - padding-top: mp.$spacing-xl; + padding-top: $spacing-xl; button[type="submit"] { - background: mp.$color-blue-50; + background: $color-blue-50; opacity: 0.4; &:not(:disabled) { @@ -48,7 +48,7 @@ } &:hover:not(:disabled) { - background-color: mp.$color-blue-60; + background-color: $color-blue-60; opacity: 1; } } @@ -57,16 +57,16 @@ border-style: none; background-color: transparent; cursor: pointer; - border-radius: mp.$border-radius-sm; - color: mp.$color-blue-50; - padding: mp.$spacing-sm mp.$spacing-md; + border-radius: $border-radius-sm; + color: $color-blue-50; + padding: $spacing-sm $spacing-md; &:hover { - color: mp.$color-link-hover; + color: $color-link-hover; } &:focus { - color: mp.$color-blue-50; + color: $color-blue-50; } } } diff --git a/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss b/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss index d49441cd4d..5af725b57e 100644 --- a/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss +++ b/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss @@ -1,10 +1,10 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../../styles/typography" as styles-typography; .underlay { position: fixed; - background-color: rgba(mp.$color-black, 0.4); + background-color: rgba($color-black, 0.4); top: 0; bottom: 0; left: 0; @@ -14,38 +14,38 @@ justify-content: center; .dialog-wrapper { - background: mp.$color-white; - width: calc((#{mp.$content-sm} + #{mp.$content-md}) / 2); // 560px + background: $color-white; + width: calc((#{$content-sm} + #{$content-md}) / 2); // 560px max-width: 90%; - border-radius: mp.$border-radius-md; - box-shadow: mp.$box-shadow-sm; - padding: mp.$spacing-md; + border-radius: $border-radius-md; + box-shadow: $box-shadow-sm; + padding: $spacing-md; - $illustrationOverlap: mp.$spacing-lg; + $illustrationOverlap: $spacing-lg; .hero { - @include mp.text-body-lg; - font-family: mp.$font-stack-firefox; + @include text-body-lg; + font-family: $font-stack-firefox; font-weight: 700; text-align: center; - border-radius: mp.$border-radius-md; - background-color: mp.$color-light-gray-10; - padding: mp.$spacing-lg mp.$spacing-md; + border-radius: $border-radius-md; + background-color: $color-light-gray-10; + padding: $spacing-lg $spacing-md; - @media screen and #{mp.$mq-md} { - @include mp.text-title-3xs; + @media screen and #{$mq-md} { + @include text-title-3xs; } .picked-confirmation & { - padding-bottom: $illustrationOverlap + mp.$spacing-lg; + padding-bottom: $illustrationOverlap + $spacing-lg; } .headline { display: flex; align-items: center; justify-content: center; - padding: mp.$spacing-sm 0; - gap: mp.$spacing-sm; + padding: $spacing-sm 0; + gap: $spacing-sm; } .modal-title { @@ -55,8 +55,8 @@ @include styles-typography.text-title-xs { display: block; font-weight: 700; - margin-bottom: mp.$spacing-sm; - padding: mp.$spacing-sm 0; + margin-bottom: $spacing-sm; + padding: $spacing-sm 0; } &::before { @@ -69,31 +69,31 @@ .picked-confirmation-body { display: flex; flex-direction: column; - gap: mp.$spacing-md; + gap: $spacing-md; align-items: center; - padding-top: mp.$spacing-sm; + padding-top: $spacing-sm; .picked-confirmation-body-content { margin: 0 auto; - padding: 0 mp.$spacing-sm; + padding: 0 $spacing-sm; - @media screen and #{mp.$mq-md} { - padding: 0 mp.$spacing-2xl; + @media screen and #{$mq-md} { + padding: 0 $spacing-2xl; } .feature-item-list { - @include mp.text-body-sm; + @include text-body-sm; list-style-type: none; li { - margin: mp.$spacing-sm 0; + margin: $spacing-sm 0; display: flex; flex-direction: row; align-items: center; - gap: mp.$spacing-md; + gap: $spacing-md; .check-icon { - fill: mp.$color-blue-50; + fill: $color-blue-50; min-width: 20px; // Width of the check icons } } diff --git a/frontend/src/components/dashboard/subdomain/SubdomainInfoTooltip.module.scss b/frontend/src/components/dashboard/subdomain/SubdomainInfoTooltip.module.scss index 338c37ea90..684af5c2e1 100644 --- a/frontend/src/components/dashboard/subdomain/SubdomainInfoTooltip.module.scss +++ b/frontend/src/components/dashboard/subdomain/SubdomainInfoTooltip.module.scss @@ -1,25 +1,25 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/mixins/typography"; .info-icon { align-items: center; background-color: transparent; border-style: none; - color: mp.$color-light-gray-70; + color: $color-light-gray-70; cursor: pointer; display: flex; } .explainer-wrapper { - background-color: mp.$color-white; - box-shadow: mp.$box-shadow-sm; - border-radius: mp.$border-radius-md; - padding: mp.$spacing-lg; + background-color: $color-white; + box-shadow: $box-shadow-sm; + border-radius: $border-radius-md; + padding: $spacing-lg; // On small screens, appear as a modal at the top of the viewport: - top: mp.$spacing-lg; - left: mp.$spacing-lg; - right: mp.$spacing-lg; + top: $spacing-lg; + left: $spacing-lg; + right: $spacing-lg; position: absolute; &::before { @@ -30,15 +30,15 @@ top: -6px; // Top, left: needed for tooltip arrow pointer left: 12px; transform: rotate(45deg); - background-color: mp.$color-white; + background-color: $color-white; display: none; } - @media screen and #{mp.$mq-lg} { + @media screen and #{$mq-lg} { // On wider screens, the popover is attached to the indicator: inset: unset; position: unset; - max-width: 8px + mp.$content-sm; // Magic number to avoid empty space near domain name + max-width: 8px + $content-sm; // Magic number to avoid empty space near domain name &::before { display: initial; @@ -46,29 +46,29 @@ } h3 { - @include mp.text-title-3xs; + @include text-title-3xs; - font-family: mp.$font-stack-firefox; - margin-bottom: mp.$spacing-sm; + font-family: $font-stack-firefox; + margin-bottom: $spacing-sm; } p { - @include mp.text-body-sm; + @include text-body-sm; } .close-button { position: absolute; - top: mp.$spacing-sm; - right: mp.$spacing-sm; + top: $spacing-sm; + right: $spacing-sm; background-color: transparent; border-style: none; - border-radius: mp.$border-radius-sm; - width: mp.$spacing-lg; - height: mp.$spacing-lg; + border-radius: $border-radius-sm; + width: $spacing-lg; + height: $spacing-lg; cursor: pointer; &:hover { - color: mp.$color-blue-50; + color: $color-blue-50; } } } diff --git a/frontend/src/components/dashboard/tips/CustomAliasTip.module.scss b/frontend/src/components/dashboard/tips/CustomAliasTip.module.scss index bf91809e66..27978343c4 100644 --- a/frontend/src/components/dashboard/tips/CustomAliasTip.module.scss +++ b/frontend/src/components/dashboard/tips/CustomAliasTip.module.scss @@ -1,28 +1,28 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .custom-alias-tip { display: flex; flex-direction: column; - gap: mp.$spacing-xs; + gap: $spacing-xs; - @include mp.text-body-sm; + @include text-body-sm; samp { - @include mp.text-body-sm; - font-family: mp.$font-stack-base; - color: mp.$color-blue-50; + @include text-body-sm; + font-family: $font-stack-base; + color: $color-blue-50; font-weight: 700; } h3 { - @include mp.text-title-3xs; - font-family: mp.$font-stack-firefox; - color: mp.$color-purple-90; + @include text-title-3xs; + font-family: $font-stack-firefox; + color: $color-purple-90; } video { - border-radius: mp.$border-radius-sm; + border-radius: $border-radius-sm; } @media (prefers-reduced-motion) { diff --git a/frontend/src/components/dashboard/tips/GenericTip.module.scss b/frontend/src/components/dashboard/tips/GenericTip.module.scss index f29557804f..4625daf2ea 100644 --- a/frontend/src/components/dashboard/tips/GenericTip.module.scss +++ b/frontend/src/components/dashboard/tips/GenericTip.module.scss @@ -1,20 +1,20 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .generic-tip { - @include mp.text-body-sm; + @include text-body-sm; display: flex; flex-direction: column; - gap: mp.$spacing-sm; + gap: $spacing-sm; h3 { - @include mp.text-title-3xs; - font-family: mp.$font-stack-firefox; - color: mp.$color-purple-90; + @include text-title-3xs; + font-family: $font-stack-firefox; + color: $color-purple-90; } video { - border-radius: mp.$border-radius-md; + border-radius: $border-radius-md; // The video is listed last because its content is usually an example of the // textual content, so for screen readers it makes more sense to read it // last. However, we want to visually show it first. @@ -25,7 +25,7 @@ .still-alternative { display: none; - border-radius: mp.$border-radius-md; + border-radius: $border-radius-md; // The video is listed last because its content is usually an example of the // textual content, so for screen readers it makes more sense to read it // last. However, we want to visually show it first. diff --git a/frontend/src/components/dashboard/tips/Tips.module.scss b/frontend/src/components/dashboard/tips/Tips.module.scss index 1c2f90a675..665ba74144 100644 --- a/frontend/src/components/dashboard/tips/Tips.module.scss +++ b/frontend/src/components/dashboard/tips/Tips.module.scss @@ -1,16 +1,16 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .wrapper { position: relative; - padding-bottom: calc(mp.$spacing-md * 2 + 2rem); + padding-bottom: calc($spacing-md * 2 + 2rem); flex: 1 0 0; .expand-button, .card { position: fixed; - right: mp.$spacing-md; - bottom: mp.$spacing-md; + right: $spacing-md; + bottom: $spacing-md; } // .expand-button and .card stay fixed in the bottom right-hand corner, @@ -28,43 +28,43 @@ .expand-button { display: flex; align-items: center; - gap: mp.$spacing-sm; - background-color: mp.$color-white; - border-radius: mp.$border-radius-md; + gap: $spacing-sm; + background-color: $color-white; + border-radius: $border-radius-md; border-style: none; - padding: mp.$spacing-md; - box-shadow: mp.$box-shadow-sm; + padding: $spacing-md; + box-shadow: $box-shadow-sm; cursor: pointer; &:hover { - background-color: mp.$color-violet-05; + background-color: $color-violet-05; } .icon { - color: mp.$color-pink-30; + color: $color-pink-30; } } .card { - border-radius: mp.$border-radius-md; - padding: mp.$spacing-md; - box-shadow: mp.$box-shadow-sm; - background-color: mp.$color-white; - width: mp.$content-sm; - max-width: calc(100% - mp.$spacing-xl); + border-radius: $border-radius-md; + padding: $spacing-md; + box-shadow: $box-shadow-sm; + background-color: $color-white; + width: $content-sm; + max-width: calc(100% - $spacing-xl); .header { display: flex; align-items: center; - gap: mp.$spacing-sm; - padding: 0 0 mp.$spacing-lg; + gap: $spacing-sm; + padding: 0 0 $spacing-lg; .icon { - color: mp.$color-pink-30; + color: $color-pink-30; } h2 { - @include mp.text-body-sm; + @include text-body-sm; font-weight: 400; flex: 1 0 auto; } @@ -72,7 +72,7 @@ .close-button { background-color: transparent; border-style: none; - border-radius: mp.$border-radius-sm; + border-radius: $border-radius-sm; display: flex; align-items: center; justify-content: center; @@ -80,40 +80,40 @@ cursor: pointer; &:hover { - color: mp.$color-blue-50; + color: $color-blue-50; } } } .summary { display: flex; - gap: mp.$spacing-md; + gap: $spacing-md; justify-content: space-between; - padding-bottom: mp.$spacing-xs; + padding-bottom: $spacing-xs; b { - @include mp.text-title-3xs; - font-family: mp.$font-stack-firefox; + @include text-title-3xs; + font-family: $font-stack-firefox; } button { - @include mp.text-body-sm; + @include text-body-sm; background-color: transparent; border-style: none; - border-radius: mp.$border-radius-sm; - color: mp.$color-blue-50; + border-radius: $border-radius-sm; + color: $color-blue-50; flex-shrink: 0; cursor: pointer; &:hover { - color: mp.$color-blue-70; + color: $color-blue-70; text-decoration: underline; } } } .tip-carousel { - padding: mp.$spacing-md; + padding: $spacing-md; .tip { min-height: 15 * 16px; @@ -121,23 +121,23 @@ .tip-switcher { display: flex; - gap: mp.$spacing-xs; + gap: $spacing-xs; justify-content: center; .panel-dot { - color: mp.$color-light-gray-50; + color: $color-light-gray-50; // Increase the tap target for these dots: - padding: mp.$spacing-sm mp.$spacing-xs; + padding: $spacing-sm $spacing-xs; cursor: pointer; // Avoid layout shifts when adding a bottom border on focus: border: 2px solid transparent; &.is-selected { - color: mp.$color-pink-30; + color: $color-pink-30; } &:hover { - color: mp.$color-pink-40; + color: $color-pink-40; } // .focus-wrapper exists just to add an outlined border to the dot @@ -150,7 +150,7 @@ &:focus { outline: none; .focus-wrapper { - border-color: mp.$color-blue-50; + border-color: $color-blue-50; } } } @@ -158,8 +158,8 @@ } .footer { - border-top: 1px solid mp.$color-light-gray-20; - padding-top: mp.$spacing-md; + border-top: 1px solid $color-light-gray-20; + padding-top: $spacing-md; ul { list-style-type: none; @@ -167,7 +167,7 @@ justify-content: space-between; a { - color: mp.$color-blue-50; + color: $color-blue-50; font-weight: 500; } } diff --git a/frontend/src/components/landing/BundleBanner.module.scss b/frontend/src/components/landing/BundleBanner.module.scss index b5ede449e5..3c8eb618d7 100644 --- a/frontend/src/components/landing/BundleBanner.module.scss +++ b/frontend/src/components/landing/BundleBanner.module.scss @@ -1,58 +1,58 @@ @use "../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../styles/typography" as styles-typography; .bundle-banner-wrapper { display: grid; grid-template-columns: 10fr; grid-template-rows: auto; - background-color: mp.$color-violet-80; - border-radius: mp.$border-radius-lg; - gap: mp.$layout-xs; + background-color: $color-violet-80; + border-radius: $border-radius-lg; + gap: $layout-xs; // Snap to 2 columns - @media #{mp.$mq-lg} { + @media #{$mq-lg} { background-image: url("./images/bundle-bg.png"); grid-template-columns: 5fr 5fr; background-size: cover; - gap: mp.$layout-md; + gap: $layout-md; } - @media #{mp.$mq-xl} { + @media #{$mq-xl} { grid-template-columns: 5fr 6fr; } .first-section { - padding-right: mp.$layout-lg; // Shrinks image towards the left side + padding-right: $layout-lg; // Shrinks image towards the left side position: relative; background-image: url("./images/bundle-bg-mobile.png"); background-size: cover; background-repeat: no-repeat; - border-bottom: 4px solid mp.$color-purple-30; - border-radius: mp.$border-radius-lg mp.$border-radius-lg 0 0; + border-bottom: 4px solid $color-purple-30; + border-radius: $border-radius-lg $border-radius-lg 0 0; - @media #{mp.$mq-sm} { - padding-right: mp.$layout-xl; + @media #{$mq-sm} { + padding-right: $layout-xl; } - @media #{mp.$mq-md} { - padding-right: mp.$content-sm; + @media #{$mq-md} { + padding-right: $content-sm; } // Snap to 2 columns - @media #{mp.$mq-lg} { - padding-right: mp.$layout-lg; + @media #{$mq-lg} { + padding-right: $layout-lg; border-bottom: none; background-image: none; } .main-img-wrapper { .main-image { - margin-top: -(mp.$layout-lg); // Leave space for image to bleed out of frame + margin-top: -($layout-lg); // Leave space for image to bleed out of frame - @media #{mp.$mq-lg} { + @media #{$mq-lg} { position: absolute; bottom: 0; margin-top: auto; - margin-left: mp.$spacing-xs; + margin-left: $spacing-xs; max-height: 500px; // Magic number: Ensure image does not overlay other sections } } @@ -61,12 +61,12 @@ .float-features-wrapper { display: none; - @media #{mp.$mq-lg} { + @media #{$mq-lg} { display: block; .float-features-item { - @include mp.text-body-xs; - @include mp.font-firefox; + @include text-body-xs; + @include font-firefox; font-weight: 600; background: rgba( 255, @@ -78,9 +78,9 @@ display: flex; align-items: center; justify-content: center; - gap: mp.$spacing-sm; - padding: mp.$spacing-sm; - border-radius: mp.$border-radius-md; + gap: $spacing-sm; + padding: $spacing-sm; + border-radius: $border-radius-md; .float-features-text { line-height: 100%; @@ -88,16 +88,16 @@ } } .feature-one { - right: mp.$layout-lg; - top: mp.$layout-lg; + right: $layout-lg; + top: $layout-lg; } .feature-two { - right: mp.$layout-xs; - bottom: mp.$layout-2xl; + right: $layout-xs; + bottom: $layout-2xl; } .feature-three { - left: mp.$layout-sm; - bottom: mp.$layout-lg; + left: $layout-sm; + bottom: $layout-lg; .float-features-text { max-width: 100px; @@ -108,23 +108,23 @@ } .second-section { - @media #{mp.$mq-lg} { + @media #{$mq-lg} { display: flex; justify-content: flex-end; } .bundle-banner-description { justify-content: space-between; - color: mp.$color-white; + color: $color-white; height: auto; flex-direction: column; display: flex; - gap: mp.$spacing-md; - padding: 0 mp.$spacing-md mp.$spacing-xl mp.$spacing-md; + gap: $spacing-md; + padding: 0 $spacing-md $spacing-xl $spacing-md; - @media #{mp.$mq-lg} { + @media #{$mq-lg} { height: auto; - padding: mp.$spacing-2xl mp.$spacing-xl; + padding: $spacing-2xl $spacing-xl; } .headline { @@ -134,27 +134,27 @@ } .bundle-banner-one-year-plan-headline { - margin-top: mp.$spacing-md; + margin-top: $spacing-md; } .bundle-banner-value-props { display: flex; flex-direction: column; - gap: mp.$spacing-sm; + gap: $spacing-sm; list-style: none; - @media #{mp.$mq-xl} { + @media #{$mq-xl} { flex-direction: row; } li { border-radius: 50px; // custom border radius to follow design spec background: rgba(255, 255, 255, 0.1); - padding: mp.$spacing-sm mp.$spacing-md; + padding: $spacing-sm $spacing-md; font-weight: 500; display: flex; flex-direction: row; - gap: mp.$spacing-sm; + gap: $spacing-sm; align-items: center; } } @@ -162,11 +162,11 @@ .bottom-section { display: flex; flex-direction: column; - gap: mp.$spacing-md; - margin-top: mp.$spacing-md; + gap: $spacing-md; + margin-top: $spacing-md; align-items: center; - @media #{mp.$mq-lg} { + @media #{$mq-lg} { flex-direction: row; } @@ -174,10 +174,10 @@ font-weight: 600; flex: 1 0 auto; background: white; - max-width: mp.$content-xs; - color: mp.$color-blue-50; - padding: mp.$spacing-sm mp.$spacing-md; - border-radius: mp.$border-radius-sm; + max-width: $content-xs; + color: $color-blue-50; + padding: $spacing-sm $spacing-md; + border-radius: $border-radius-sm; &:hover { opacity: 0.8; @@ -185,10 +185,10 @@ } .money-back-guarantee { - @include mp.text-body-xs; + @include text-body-xs; text-align: center; - @media #{mp.$mq-lg} { + @media #{$mq-lg} { text-align: start; } } @@ -196,22 +196,22 @@ h2 { @include styles-typography.text-title-sm { - @include mp.font-firefox; + @include font-firefox; font-weight: 700; } - @media #{mp.$mq-lg} { + @media #{$mq-lg} { @include styles-typography.text-title-xs; } } h3 { @include styles-typography.text-title-xs { - @include mp.font-firefox; + @include font-firefox; font-weight: 500; } - @media #{mp.$mq-lg} { + @media #{$mq-lg} { @include styles-typography.text-title-2xs; } } @@ -219,7 +219,7 @@ .pricing-logo-wrapper { display: flex; flex-direction: column; - gap: mp.$spacing-md; + gap: $spacing-md; align-items: center; .bundle-logo { @@ -227,37 +227,37 @@ max-width: 130px; align-self: center; - @media #{mp.$mq-lg} { + @media #{$mq-lg} { display: block; } } - @media #{mp.$mq-lg} { + @media #{$mq-lg} { flex-direction: row; } .pricing-wrapper { - border-radius: mp.$border-radius-sm; + border-radius: $border-radius-sm; // Using rgba to manipulate alpha value border: 2px solid rgba(255, 255, 255, 0.4); display: flex; flex-direction: column; align-items: center; - @media #{mp.$mq-lg} { + @media #{$mq-lg} { flex-direction: row; } span { - padding: mp.$spacing-xs mp.$spacing-md; + padding: $spacing-xs $spacing-md; display: flex; flex-direction: row; align-items: center; font-weight: 600; - gap: mp.$spacing-xs; + gap: $spacing-xs; .price { - @include mp.text-body-sm; + @include text-body-sm; font-weight: 400; } @@ -265,15 +265,15 @@ // Using rgba to manipulate alpha value border-bottom: 1px solid rgba(255, 255, 255, 0.4); - @media #{mp.$mq-lg} { + @media #{$mq-lg} { border-right: 1px solid rgba(255, 255, 255, 0.4); border-bottom: none; - margin: mp.$spacing-sm 0; + margin: $spacing-sm 0; } } &:nth-child(2) { - @include mp.text-body-xl; + @include text-body-xl; } } } diff --git a/frontend/src/components/landing/FaqAccordion.module.scss b/frontend/src/components/landing/FaqAccordion.module.scss index 41afeab51c..3d4464f4ff 100644 --- a/frontend/src/components/landing/FaqAccordion.module.scss +++ b/frontend/src/components/landing/FaqAccordion.module.scss @@ -1,27 +1,27 @@ @use "../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .entry { button { - @include mp.text-body-xl; + @include text-body-xl; background-color: transparent; border-style: none; display: flex; align-items: center; - gap: mp.$spacing-md; + gap: $spacing-md; justify-content: space-between; cursor: pointer; - padding: mp.$spacing-lg mp.$spacing-md; + padding: $spacing-lg $spacing-md; width: 100%; - border-bottom: 1px solid mp.$color-light-gray-30; + border-bottom: 1px solid $color-light-gray-30; text-align: start; &:focus { outline: none; - border-radius: mp.$border-radius-md; - border-color: mp.$color-light-gray-10; - background-color: mp.$color-light-gray-10; - color: mp.$color-blue-50; + border-radius: $border-radius-md; + border-color: $color-light-gray-10; + background-color: $color-light-gray-10; + color: $color-blue-50; } } @@ -30,10 +30,10 @@ } dd { - padding: mp.$spacing-lg mp.$spacing-md; + padding: $spacing-lg $spacing-md; display: flex; flex-direction: column; - gap: mp.$spacing-md; + gap: $spacing-md; } &.is-collapsed { @@ -45,7 +45,7 @@ .plus-icon { flex: 0 0 auto; transition: transform 0.2s ease-out; - color: mp.$color-blue-50; + color: $color-blue-50; } &.is-expanded { diff --git a/frontend/src/components/landing/HighlightedFeatures.module.scss b/frontend/src/components/landing/HighlightedFeatures.module.scss index ceb19938a3..20edabc345 100644 --- a/frontend/src/components/landing/HighlightedFeatures.module.scss +++ b/frontend/src/components/landing/HighlightedFeatures.module.scss @@ -1,5 +1,5 @@ @use "../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../styles/typography" as styles-typography; .highlighted-feature-wrapper { @@ -7,12 +7,12 @@ align-content: center; justify-content: space-between; flex-direction: column-reverse; - margin-bottom: mp.$layout-sm; + margin-bottom: $layout-sm; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row-reverse; - gap: mp.$spacing-2xl; - margin-bottom: mp.$layout-xs; + gap: $spacing-2xl; + margin-bottom: $layout-xs; &:nth-child(even) { flex-direction: row; @@ -20,51 +20,51 @@ } .new-callout-wrapper { - margin-bottom: mp.$spacing-md; + margin-bottom: $spacing-md; .new-callout { - @include mp.text-body-sm; - background-color: mp.$color-purple-30; - padding: mp.$spacing-xs mp.$spacing-sm; + @include text-body-sm; + background-color: $color-purple-30; + padding: $spacing-xs $spacing-sm; font-weight: 600; text-transform: uppercase; - color: mp.$color-white; + color: $color-white; text-align: center; align-content: center; - border-radius: mp.$border-radius-sm; + border-radius: $border-radius-sm; } } .highlighted-feature-description { - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row-reverse; align-self: center; width: 100%; } .highlighted-feature-headline { - @include mp.font-firefox; - @include mp.text-body-xl; - margin-bottom: mp.$spacing-sm; + @include font-firefox; + @include text-body-xl; + margin-bottom: $spacing-sm; line-height: 100%; } } .highlighted-feature-image { - padding: mp.$spacing-md; + padding: $spacing-md; width: 100%; align-self: center; } } .section-title-wrapper { - padding: mp.$spacing-lg mp.$spacing-md mp.$spacing-2xl mp.$spacing-md; + padding: $spacing-lg $spacing-md $spacing-2xl $spacing-md; align-content: center; justify-content: center; text-align: center; h2 { - @include mp.font-firefox; + @include font-firefox; @include styles-typography.text-title-sm { justify-content: center; width: 100%; @@ -72,7 +72,7 @@ } .cta { - margin: mp.$spacing-xl 0; - min-width: mp.$content-xs; + margin: $spacing-xl 0; + min-width: $content-xs; } } diff --git a/frontend/src/components/landing/PlanMatrix.module.scss b/frontend/src/components/landing/PlanMatrix.module.scss index 0977647a50..eae4cf447b 100644 --- a/frontend/src/components/landing/PlanMatrix.module.scss +++ b/frontend/src/components/landing/PlanMatrix.module.scss @@ -1,5 +1,5 @@ @use "../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../styles/typography" as styles-typography; .wrapper { @@ -7,15 +7,15 @@ display: flex; flex-direction: column; align-items: center; - gap: mp.$spacing-md; + gap: $spacing-md; .bundle-offer-heading { @include styles-typography.text-title-xs { background-image: linear-gradient( to right, - mp.$color-violet-30, - mp.$color-violet-80 20%, - mp.$color-violet-30 80% + $color-violet-30, + $color-violet-80 20%, + $color-violet-30 80% ); background-clip: text; color: transparent; @@ -24,7 +24,7 @@ } } .bundle-offer-content { - max-width: mp.$content-md; + max-width: $content-md; text-align: center; } @@ -35,7 +35,7 @@ display: initial; } - @media screen and #{mp.$mq-xl} { + @media screen and #{$mq-xl} { .desktop { display: table; table-layout: fixed; @@ -46,18 +46,18 @@ } .table-wrapper { - padding: mp.$layout-md 0; + padding: $layout-md 0; } .discount-notice-wrapper { - @include mp.text-body-sm; + @include text-body-sm; line-height: 100%; text-align: center; .discount-notice-container { display: flex; flex-direction: column; - gap: mp.$spacing-sm; + gap: $spacing-sm; .discount-notice-bolded { font-weight: 800; @@ -80,24 +80,24 @@ table.desktop { tr { th:first-child { - width: mp.$content-sm; + width: $content-sm; font-weight: 400; text-align: start; } th:not(:first-child), td:not(:first-child) { - min-width: mp.$layout-2xl; + min-width: $layout-2xl; text-align: center; - background-color: mp.$color-white; - padding: mp.$spacing-md; + background-color: $color-white; + padding: $spacing-md; // Fake spacing between the columns. The disadvantage of this method is // that the horizontal bottom border on rows is interrupted, but if we // used the appropriate // border-collapse: separate; // border-spacing: $spacing-md 0; // then we wouldn't have been able to apply a bottom border at all. - border-inline: mp.$spacing-md * 0.5 solid mp.$color-light-gray-10; + border-inline: $spacing-md * 0.5 solid $color-light-gray-10; &:last-child { border-right-style: none; @@ -112,12 +112,12 @@ table.desktop { } &:first-child th { - border-top-left-radius: mp.$spacing-sm; - border-top-right-radius: mp.$spacing-sm; + border-top-left-radius: $spacing-sm; + border-top-right-radius: $spacing-sm; } th:not(:first-child) { - color: mp.$color-violet-70; + color: $color-violet-70; font-weight: 600; &.recommended { @@ -138,9 +138,9 @@ table.desktop { // We make it slightly taller than the so that it overlaps the // `thead tr`'s bottom border (with a width of $row-spacing). height: calc(100% + $row-spacing); - background-color: mp.$color-violet-80; - color: mp.$color-white; - border-radius: mp.$spacing-sm; + background-color: $color-violet-80; + color: $color-white; + border-radius: $spacing-sm; margin-bottom: -1 * $row-spacing; } } @@ -158,11 +158,11 @@ table.desktop { } td { - color: mp.$color-dark-gray-50; + color: $color-dark-gray-50; svg { display: inline; - color: mp.$color-blue-60; + color: $color-blue-60; } } } @@ -170,8 +170,8 @@ table.desktop { tfoot { tr:last-child td { - border-bottom-left-radius: mp.$spacing-sm; - border-bottom-right-radius: mp.$spacing-sm; + border-bottom-left-radius: $spacing-sm; + border-bottom-right-radius: $spacing-sm; } tr { @@ -190,7 +190,7 @@ table.desktop { display: flex; flex-direction: column; justify-content: space-between; - gap: mp.$spacing-md; + gap: $spacing-md; width: 100%; height: 100%; text-align: center; @@ -206,25 +206,25 @@ table.desktop { .pricing-overview { display: flex; flex-direction: column; - gap: mp.$spacing-md; + gap: $spacing-md; .price { - @include mp.text-body-lg; - color: mp.$color-blue-50; + @include text-body-lg; + color: $color-blue-50; font-weight: 600; } .pick-button { - border: 2px solid mp.$color-blue-50; - border-radius: mp.$border-radius-sm; - padding: mp.$spacing-sm; + border: 2px solid $color-blue-50; + border-radius: $border-radius-sm; + padding: $spacing-sm; text-align: center; - color: mp.$color-blue-50; + color: $color-blue-50; font-weight: 700; &:hover { - background-color: mp.$color-blue-50; - color: mp.$color-white; + background-color: $color-blue-50; + color: $color-white; cursor: pointer; } } @@ -243,19 +243,19 @@ table.desktop { .plans { display: flex; flex-wrap: wrap; - gap: mp.$spacing-lg; + gap: $spacing-lg; list-style-type: none; .plan { - flex: 1 0 mp.$content-xs; + flex: 1 0 $content-xs; display: flex; flex-direction: column; align-items: center; - gap: mp.$spacing-lg; + gap: $spacing-lg; max-width: 100%; - background-color: mp.$color-white; - border-radius: mp.$border-radius-md; - padding: mp.$spacing-md; + background-color: $color-white; + border-radius: $border-radius-md; + padding: $spacing-md; h3 { @include styles-typography.text-title-2xs { @@ -269,13 +269,13 @@ table.desktop { // Since we want the h3 to spand the full width of the plan, and to be // flush with the top of the .plan, we enlarge it by that amount on the // sides and at the top: - width: calc(100% + 2 * mp.$spacing-md); - margin-top: -1 * mp.$spacing-md; - margin-inline: -1 * mp.$spacing-md; - padding: mp.$spacing-md; - background-color: mp.$color-violet-80; - color: mp.$color-white; - border-radius: mp.$spacing-sm; + width: calc(100% + 2 * $spacing-md); + margin-top: -1 * $spacing-md; + margin-inline: -1 * $spacing-md; + padding: $spacing-md; + background-color: $color-violet-80; + color: $color-white; + border-radius: $spacing-sm; font-weight: 900; } @@ -283,13 +283,13 @@ table.desktop { flex: 1 0 auto; display: flex; flex-direction: column; - gap: mp.$spacing-sm; + gap: $spacing-sm; width: 100%; list-style-type: none; li { display: flex; - gap: mp.$spacing-xs; + gap: $spacing-xs; .description { flex: 1 0 auto; @@ -300,13 +300,13 @@ table.desktop { } } .availability { - flex: 0 1 mp.$layout-2xs; + flex: 0 1 $layout-2xs; display: flex; align-items: center; justify-content: center; svg { - color: mp.$color-blue-60; + color: $color-blue-60; } } } @@ -315,29 +315,29 @@ table.desktop { .pricing { display: flex; flex-direction: column; - gap: mp.$spacing-md; + gap: $spacing-md; width: 100%; .pricing-overview { display: flex; flex-direction: column; align-items: center; - gap: mp.$spacing-md; + gap: $spacing-md; width: 100%; $billingMonthlyNoteHeight: 18px; - padding-bottom: $billingMonthlyNoteHeight + mp.$spacing-md; + padding-bottom: $billingMonthlyNoteHeight + $spacing-md; small { - @include mp.text-body-sm; + @include text-body-sm; display: block; height: $billingMonthlyNoteHeight; line-height: $billingMonthlyNoteHeight; - margin-bottom: -1 * ($billingMonthlyNoteHeight + mp.$spacing-md); + margin-bottom: -1 * ($billingMonthlyNoteHeight + $spacing-md); } .price { - @include mp.text-body-xl; - color: mp.$color-blue-50; + @include text-body-xl; + color: $color-blue-50; font-weight: 600; } @@ -346,17 +346,17 @@ table.desktop { } .pick-button { - border: 2px solid mp.$color-blue-50; - border-radius: mp.$border-radius-sm; + border: 2px solid $color-blue-50; + border-radius: $border-radius-sm; width: 100%; - padding: mp.$spacing-sm; + padding: $spacing-sm; text-align: center; - color: mp.$color-blue-50; + color: $color-blue-50; font-weight: 700; &:hover { - background-color: mp.$color-blue-50; - color: mp.$color-white; + background-color: $color-blue-50; + color: $color-white; cursor: pointer; } } @@ -369,22 +369,22 @@ table.desktop { .pricing-toggle { display: flex; background-color: tokens.$color-grey-10; - padding: mp.$spacing-xs; - border-radius: mp.$border-radius-lg; + padding: $spacing-xs; + border-radius: $border-radius-lg; > div { - @include mp.text-body-sm; + @include text-body-sm; width: 50%; - padding: mp.$spacing-xs mp.$spacing-sm; + padding: $spacing-xs $spacing-sm; text-align: center; color: tokens.$color-grey-40; font-weight: 500; cursor: pointer; &.is-selected { - background-color: mp.$color-white; - border-radius: mp.$border-radius-lg; - color: mp.$color-blue-50; + background-color: $color-white; + border-radius: $border-radius-lg; + color: $color-blue-50; } } } diff --git a/frontend/src/components/landing/Reviews.module.scss b/frontend/src/components/landing/Reviews.module.scss index 6f1d7731cd..07967bd7c3 100644 --- a/frontend/src/components/landing/Reviews.module.scss +++ b/frontend/src/components/landing/Reviews.module.scss @@ -1,20 +1,20 @@ @use "../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../styles/typography" as styles-typography; .reviews { display: flex; flex-direction: column; - max-width: mp.$content-max; + max-width: $content-max; width: 100%; margin: 0 auto; align-items: center; - padding: mp.$spacing-md mp.$spacing-lg 0 mp.$spacing-lg; + padding: $spacing-md $spacing-lg 0 $spacing-lg; justify-content: center; - gap: mp.$layout-sm; + gap: $layout-sm; - @media screen and #{mp.$mq-xl} { - gap: mp.$layout-md; + @media screen and #{$mq-xl} { + gap: $layout-md; flex-direction: row; align-items: flex-start; } @@ -23,32 +23,32 @@ .left-container { display: flex; flex-direction: row; - gap: mp.$spacing-md; + gap: $spacing-md; } .right-container { display: flex; flex-direction: column; - gap: mp.$spacing-2xl; + gap: $spacing-2xl; } .logo-container { display: flex; - font-family: mp.$font-stack-base; - color: mp.$color-white; - width: mp.$layout-2xl; + font-family: $font-stack-base; + color: $color-white; + width: $layout-2xl; flex-direction: column; align-items: center; - border-radius: mp.$border-radius-lg; - padding: mp.$spacing-md 0; - background-color: mp.$color-violet-50; + border-radius: $border-radius-lg; + padding: $spacing-md 0; + background-color: $color-violet-50; .logo { - width: mp.$layout-xl; - padding: mp.$spacing-sm; + width: $layout-xl; + padding: $spacing-sm; } .logo-title { - @include mp.text-body-md; + @include text-body-md; font-weight: 400; } @@ -66,27 +66,27 @@ justify-content: center; align-items: center; text-align: center; - padding: 0 mp.$spacing-md; - gap: mp.$spacing-xs; - background-color: mp.$color-white; - border-radius: mp.$border-radius-lg; + padding: 0 $spacing-md; + gap: $spacing-xs; + background-color: $color-white; + border-radius: $border-radius-lg; - @media screen and #{mp.$mq-lg} { + @media screen and #{$mq-lg} { align-items: center; } .rating { .title { @include styles-typography.text-title-2xl { - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; font-weight: 600; } } .text { - @include mp.text-body-sm; + @include text-body-sm; color: tokens.$color-grey-40; - font-family: mp.$font-stack-base; + font-family: $font-stack-base; font-weight: 500; } } @@ -95,15 +95,15 @@ .stars { display: flex; flex-direction: row; - padding-left: mp.$spacing-xs; + padding-left: $spacing-xs; } .star { - color: mp.$color-yellow-50; + color: $color-yellow-50; } .empty-star { - color: mp.$color-white; + color: $color-white; stroke: tokens.$color-grey-20; stroke-width: 2px; } @@ -114,7 +114,7 @@ padding: 0; color: tokens.$color-grey-30; background: transparent; - width: mp.$layout-sm; + width: $layout-sm; align-self: center; cursor: pointer; } @@ -123,35 +123,35 @@ position: absolute; display: none; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { display: flex; left: 30px; // Following design specs top: -10px; // Following design specs } svg { - color: mp.$color-purple-60; - height: mp.$layout-sm; + color: $color-purple-60; + height: $layout-sm; } } .reviews-container { display: flex; flex-direction: row; - gap: mp.$spacing-lg; - background-color: mp.$color-white; - padding: mp.$spacing-md; - border-radius: mp.$border-radius-lg; + gap: $spacing-lg; + background-color: $color-white; + padding: $spacing-md; + border-radius: $border-radius-lg; align-items: flex-start; // magic number: set to avoid shifting - no character limit on reviews yet. - min-height: calc(mp.$layout-2xl * 2); + min-height: calc($layout-2xl * 2); position: relative; - @media screen and #{mp.$mq-lg} { + @media screen and #{$mq-lg} { // magic number: set to avoid shifting - no character limit on reviews yet. min-height: 200px; - padding: mp.$spacing-lg mp.$spacing-md; + padding: $spacing-lg $spacing-md; } .review-item { @@ -165,24 +165,24 @@ align-items: flex-start; position: relative; // allows us to animate - scroll width: 100%; // allows us to animate - scroll - padding: mp.$spacing-sm; + padding: $spacing-sm; // queries set to these static widths to prevent shifting - @media screen and #{mp.$mq-sm} { - width: mp.$content-xs; + @media screen and #{$mq-sm} { + width: $content-xs; } - @media screen and #{mp.$mq-md} { - width: mp.$content-sm; + @media screen and #{$mq-md} { + width: $content-sm; } - @media screen and #{mp.$mq-xl} { - width: mp.$content-md; + @media screen and #{$mq-xl} { + width: $content-md; } .text { width: 100%; ul { - padding-left: mp.$spacing-md; + padding-left: $spacing-md; } } } @@ -192,29 +192,29 @@ flex-direction: column; align-items: flex-start; font-weight: 400; - gap: mp.$spacing-md; - padding: 0 0 mp.$spacing-md 0; - font-family: mp.$font-stack-base; + gap: $spacing-md; + padding: 0 0 $spacing-md 0; + font-family: $font-stack-base; - @media screen and #{mp.$mq-xl} { + @media screen and #{$mq-xl} { flex-direction: row; align-items: flex-end; } .name { - @include mp.text-title-3xs; - font-family: mp.$font-stack-firefox; + @include text-title-3xs; + font-family: $font-stack-firefox; font-weight: 600; } .source { - @include mp.text-body-sm; + @include text-body-sm; color: tokens.$color-grey-30; } .star { - color: mp.$color-yellow-40; - margin: 0 mp.$spacing-xs 0 (mp.$spacing-sm * -1); + color: $color-yellow-40; + margin: 0 $spacing-xs 0 ($spacing-sm * -1); } } } @@ -279,11 +279,11 @@ .mobile-controls { display: flex; justify-content: space-between; - gap: mp.$spacing-sm; + gap: $spacing-sm; button { width: 50%; - padding: mp.$spacing-md 0; + padding: $spacing-md 0; &:hover { background-color: tokens.$color-grey-10; @@ -298,7 +298,7 @@ .hidden-mobile { display: none; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { display: inline-block; } } @@ -307,7 +307,7 @@ .show-mobile { display: flex; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { display: none; } } diff --git a/frontend/src/components/layout/Layout.module.scss b/frontend/src/components/layout/Layout.module.scss index 056066e3b7..a1e0071174 100644 --- a/frontend/src/components/layout/Layout.module.scss +++ b/frontend/src/components/layout/Layout.module.scss @@ -1,5 +1,5 @@ @use "../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .patch3701 { pointer-events: none; @@ -12,17 +12,17 @@ // See https://fkhadra.github.io/react-toastify/how-to-style#override-css-variables --toastify-toast-width: 95%; - --toastify-color-light: #{mp.$color-white}; + --toastify-color-light: #{$color-white}; --toastify-color-dark: #{tokens.$color-grey-50}; - --toastify-color-info: #{mp.$color-blue-50}; - --toastify-color-success: #{mp.$color-green-50}; - --toastify-color-warning: #{mp.$color-yellow-50}; - --toastify-color-error: #{mp.$color-red-60}; + --toastify-color-info: #{$color-blue-50}; + --toastify-color-success: #{$color-green-50}; + --toastify-color-warning: #{$color-yellow-50}; + --toastify-color-error: #{$color-red-60}; - --toastify-text-color-info: #{mp.$color-white}; + --toastify-text-color-info: #{$color-white}; --toastify-text-color-success: #{tokens.$color-grey-50}; --toastify-text-color-warning: #{tokens.$color-grey-50}; - --toastify-text-color-error: #{mp.$color-white}; + --toastify-text-color-error: #{$color-white}; --toastify-toast-min-height: $layout-md; --toastify-toast-max-height: $layout-md; @@ -33,35 +33,35 @@ $toastify-toast-close-button: var(--toast-close-button); // Targets the toast container and sets max-width to prevent it from obstructing nav items on larger screens. .toast-container { - max-width: mp.$content-xl; + max-width: $content-xl; } .toast { - @include mp.text-body-sm; + @include text-body-sm; text-align: center; font-weight: 400; - min-height: mp.$layout-md; - border-radius: mp.$border-radius-sm; - font-family: mp.$font-stack-base; + min-height: $layout-md; + border-radius: $border-radius-sm; + font-family: $font-stack-base; padding: 0; - max-width: mp.$content-xl; + max-width: $content-xl; margin: 0 auto; - @media screen and (max-width: mp.$screen-sm) { - width: calc(100% - mp.$spacing-xl); - margin-top: mp.$spacing-md; + @media screen and (max-width: $screen-sm) { + width: calc(100% - $spacing-xl); + margin-top: $spacing-md; } &:global { &[class*="toast--error"], &[class*="toast--info"] { [id*="close-toast-button-icon"] { - color: #{mp.$color-white}; + color: #{$color-white}; } } & > [class*="toast-body"] { - padding: mp.$spacing-md; + padding: $spacing-md; } &[class*="toast--success"], @@ -72,66 +72,66 @@ $toastify-toast-close-button: var(--toast-close-button); } &[class*="toast--error"] { - --toast-close-button: #{mp.$color-red-60}; + --toast-close-button: #{$color-red-60}; &:hover { - --toastify-color-error: #{mp.$color-red-70}; + --toastify-color-error: #{$color-red-70}; } &:active, &:focus { - --toastify-color-error: #{mp.$color-red-80}; - --toast-close-button: #{mp.$color-red-80}; + --toastify-color-error: #{$color-red-80}; + --toast-close-button: #{$color-red-80}; } } &[class*="toast--info"] { - --toast-close-button: #{mp.$color-blue-50}; + --toast-close-button: #{$color-blue-50}; &:hover { - --toast-close-button: #{mp.$color-blue-60}; + --toast-close-button: #{$color-blue-60}; } &:active, &:focus { - --toastify-color-info: #{mp.$color-blue-70}; - --toast-close-button: #{mp.$color-blue-70}; + --toastify-color-info: #{$color-blue-70}; + --toast-close-button: #{$color-blue-70}; } } &[class*="toast--success"] { - --toast-close-button: #{mp.$color-green-50}; + --toast-close-button: #{$color-green-50}; &:hover { - --toast-close-button: #{mp.$color-green-60}; + --toast-close-button: #{$color-green-60}; } &:active, &:focus { - --toastify-color-success: #{mp.$color-green-70}; - --toast-close-button: #{mp.$color-green-70}; + --toastify-color-success: #{$color-green-70}; + --toast-close-button: #{$color-green-70}; } } &[class*="toast--warning"] { - --toast-close-button: #{mp.$color-yellow-50}; + --toast-close-button: #{$color-yellow-50}; &:hover { - --toast-close-button: #{mp.$color-yellow-60}; + --toast-close-button: #{$color-yellow-60}; } &:active, &:focus { - --toastify-color-warning: #{mp.$color-yellow-70}; - --toast-close-button: #{mp.$color-yellow-70}; + --toastify-color-warning: #{$color-yellow-70}; + --toast-close-button: #{$color-yellow-70}; } } } } .close-toast-button-container { - padding: mp.$spacing-md; - border-radius: 0 mp.$border-radius-sm mp.$border-radius-sm 0; + padding: $spacing-md; + border-radius: 0 $border-radius-sm $border-radius-sm 0; background-color: $toastify-toast-close-button; display: flex; flex-direction: column; @@ -174,7 +174,7 @@ $toastify-toast-close-button: var(--toast-close-button); box-shadow: none; } - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { grid-template-areas: "logoWrapper navWrapper appPickerWrapper userMenuWrapper"; } @@ -182,23 +182,23 @@ $toastify-toast-close-button: var(--toast-close-button); grid-area: logoWrapper; display: flex; align-items: center; - max-width: calc(100% - mp.$spacing-md); + max-width: calc(100% - $spacing-md); &.plain-page { - padding-top: mp.$layout-sm; + padding-top: $layout-sm; justify-content: center; } .logo { display: inline-flex; align-items: center; - gap: mp.$spacing-sm; - padding: mp.$spacing-md; + gap: $spacing-sm; + padding: $spacing-md; // aligns the logo with the main content @ 1152px, // snaps logo in to place essentially - @media screen and (min-width: mp.$content-xl) { - padding: mp.$spacing-md mp.$spacing-xl; + @media screen and (min-width: $content-xl) { + padding: $spacing-md $spacing-xl; } .logotype { @@ -210,7 +210,7 @@ $toastify-toast-close-button: var(--toast-close-button); .nav-wrapper { display: flex; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { grid-area: navWrapper; } } @@ -219,9 +219,9 @@ $toastify-toast-close-button: var(--toast-close-button); grid-area: appPickerWrapper; display: none; align-items: center; - padding: 0 mp.$spacing-sm; + padding: 0 $spacing-sm; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { display: flex; } } @@ -230,38 +230,38 @@ $toastify-toast-close-button: var(--toast-close-button); grid-area: userMenuWrapper; display: flex; align-items: center; - padding: 0 mp.$spacing-md; + padding: 0 $spacing-md; } a:hover, button:hover { - color: mp.$color-blue-50; + color: $color-blue-50; } &.is-dark { - background-color: mp.$color-blue-90; - border-bottom: 1px solid rgba(mp.$color-dark-gray-90, 0.5); - box-shadow: 0 0 3px 0 rgba(mp.$color-dark-gray-90, 0.5); - color: mp.$color-white; + background-color: $color-blue-90; + border-bottom: 1px solid rgba($color-dark-gray-90, 0.5); + box-shadow: 0 0 3px 0 rgba($color-dark-gray-90, 0.5); + color: $color-white; a:hover, button:hover { - color: mp.$color-light-gray-30; + color: $color-light-gray-30; } } &.is-light { - background-color: mp.$color-white; + background-color: $color-white; color: tokens.$color-grey-40; } &.is-grey { - background-color: mp.$color-light-gray-10; + background-color: $color-light-gray-10; } - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { .logo { - padding: mp.$spacing-md mp.$spacing-xl; + padding: $spacing-md $spacing-xl; } } } @@ -279,16 +279,16 @@ $toastify-toast-close-button: var(--toast-close-button); // Create a new stacking context for the content, so we can use z-indexes in // the content without preventing the header/mobile menu from overlapping it. isolation: isolate; - background-color: mp.$color-light-gray-10; + background-color: $color-light-gray-10; } .gray-bg { - background-color: mp.$color-light-gray-10; + background-color: $color-light-gray-10; } .footer { background-color: black; - color: mp.$color-white; + color: $color-white; .links { font-weight: 700; @@ -296,37 +296,37 @@ $toastify-toast-close-button: var(--toast-close-button); align-items: flex-start; flex-direction: column; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; align-items: center; } .mozilla-logo { - padding: mp.$spacing-xl; + padding: $spacing-xl; } .meta { display: flex; flex-direction: column; - padding: mp.$spacing-lg; + padding: $spacing-lg; list-style-type: none; - gap: mp.$spacing-md; + gap: $spacing-md; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; align-items: center; margin-left: auto; } a { - padding: mp.$spacing-md; + padding: $spacing-md; img { display: inline-block; } &:hover { - color: mp.$color-light-gray-40; + color: $color-light-gray-40; img { opacity: 0.8; @@ -338,14 +338,14 @@ $toastify-toast-close-button: var(--toast-close-button); .stock-photo-disclaimer { display: block; - padding: mp.$spacing-md; + padding: $spacing-md; text-align: center; } } .api-mock-warning { - background-color: mp.$color-yellow-10; - padding: mp.$spacing-md mp.$spacing-lg; + background-color: $color-yellow-10; + padding: $spacing-md $spacing-lg; text-align: center; position: relative; } diff --git a/frontend/src/components/layout/navigation/AppPicker.module.scss b/frontend/src/components/layout/navigation/AppPicker.module.scss index 3778abd4b0..bf6449ff74 100644 --- a/frontend/src/components/layout/navigation/AppPicker.module.scss +++ b/frontend/src/components/layout/navigation/AppPicker.module.scss @@ -1,5 +1,5 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .wrapper { align-items: center; @@ -15,16 +15,16 @@ width: 24px; height: 24px; padding: 0; - border-radius: mp.$border-radius-sm; + border-radius: $border-radius-sm; svg { - color: mp.$color-white; + color: $color-white; &.premium { color: tokens.$color-grey-40; } &:hover { - color: mp.$color-purple-20; + color: $color-purple-20; } } } @@ -33,14 +33,14 @@ position: absolute; right: 0; // Design request to push popup down 4px - margin-top: (mp.$spacing-lg - mp.$spacing-xs); + margin-top: ($spacing-lg - $spacing-xs); padding: 0; - padding-bottom: mp.$spacing-lg; - min-width: mp.$content-xs; + padding-bottom: $spacing-lg; + min-width: $content-xs; list-style-type: none; - box-shadow: mp.$box-shadow-sm; - border-radius: mp.$border-radius-sm; - background-color: mp.$color-light-gray-10; + box-shadow: $box-shadow-sm; + border-radius: $border-radius-sm; + background-color: $color-light-gray-10; &::before { content: ""; @@ -48,42 +48,42 @@ width: 12px; position: absolute; top: -6px; - right: mp.$spacing-sm; + right: $spacing-sm; transform: rotate(45deg); - background-color: mp.$color-light-gray-10; + background-color: $color-light-gray-10; } .app-picker-heading { - color: mp.$color-black; - padding: mp.$spacing-lg; + color: $color-black; + padding: $spacing-lg; text-align: center; display: flex; flex-direction: row; align-items: center; - gap: mp.$spacing-sm; + gap: $spacing-sm; background-image: linear-gradient( to bottom, #f9f9fb calc(100% - 3px), rgba(0, 0, 0, 0) ), linear-gradient(90deg, #f73940 1.25%, #a83db5 96.87%); - border-radius: mp.$border-radius-sm mp.$border-radius-sm 0 0; + border-radius: $border-radius-sm $border-radius-sm 0 0; img { - height: mp.$layout-sm; + height: $layout-sm; } h2 { - @include mp.text-body-md; - font-family: mp.$font-stack-base; + @include text-body-md; + font-family: $font-stack-base; } } ul { display: grid; grid-template-columns: repeat(3, 1fr); - gap: mp.$spacing-md; - padding: mp.$spacing-lg; + gap: $spacing-md; + padding: $spacing-lg; list-style-type: none; } @@ -95,37 +95,37 @@ .menu-link { display: flex; flex-direction: column; - color: mp.$color-black; + color: $color-black; align-items: center; text-align: center; - @include mp.text-body-sm; + @include text-body-sm; font-weight: 400; - font-family: mp.$font-stack-base; + font-family: $font-stack-base; img { - height: mp.$layout-sm; - padding: mp.$spacing-lg; + height: $layout-sm; + padding: $spacing-lg; width: -moz-fit-content; width: fit-content; box-sizing: content-box; - border-radius: mp.$border-radius-md; + border-radius: $border-radius-md; object-fit: contain; } &:hover { - color: mp.$color-violet-90; + color: $color-violet-90; img { - background-color: mp.$color-light-gray-20; + background-color: $color-light-gray-20; } } &.mozilla-link { - color: mp.$color-blue-50; + color: $color-blue-50; justify-content: center; width: 100%; - margin-top: mp.$spacing-lg; + margin-top: $spacing-lg; } } diff --git a/frontend/src/components/layout/navigation/DashboardSwitcher.module.scss b/frontend/src/components/layout/navigation/DashboardSwitcher.module.scss index f37b3e4e69..bf5c97d7b4 100644 --- a/frontend/src/components/layout/navigation/DashboardSwitcher.module.scss +++ b/frontend/src/components/layout/navigation/DashboardSwitcher.module.scss @@ -1,15 +1,15 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../../styles/tokens"; .nav-mask-phone { width: 100%; display: flex; flex-direction: row; - border-bottom: 1px solid mp.$color-light-gray-20; + border-bottom: 1px solid $color-light-gray-20; > * { flex: 1 1 0; - padding: mp.$spacing-lg 0 mp.$spacing-md 0; + padding: $spacing-lg 0 $spacing-md 0; justify-content: center; display: flex; border-bottom: 5px solid transparent; @@ -46,7 +46,7 @@ align-content: center; p { - @include mp.text-body-sm; + @include text-body-sm; margin: 0; font-weight: 600; align-self: center; @@ -55,7 +55,7 @@ } .hidden-desktop { - @media screen and (min-width: mp.$screen-md) { + @media screen and (min-width: $screen-md) { display: none; } } diff --git a/frontend/src/components/layout/navigation/MobileNavigation.module.scss b/frontend/src/components/layout/navigation/MobileNavigation.module.scss index a171e4d2d5..a6d497ca95 100644 --- a/frontend/src/components/layout/navigation/MobileNavigation.module.scss +++ b/frontend/src/components/layout/navigation/MobileNavigation.module.scss @@ -1,5 +1,5 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../../styles/typography" as styles-typography; .mobile-menu { @@ -18,8 +18,8 @@ #mobile-menu { transform: translateY(-100%); - background-color: mp.$color-white; - box-shadow: mp.$box-shadow-lg; + background-color: $color-white; + box-shadow: $box-shadow-lg; width: 100%; // Prevent the menu from being shown while collapsed; // otherwise it might get exposed when the browser "overscrolls": @@ -74,7 +74,7 @@ } .menu-item-list { - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { display: none; } } @@ -83,22 +83,22 @@ display: flex; @include styles-typography.text-display-xxs { - font-family: mp.$font-stack-firefox; - border-bottom: 2px solid mp.$color-light-gray-20; + font-family: $font-stack-firefox; + border-bottom: 2px solid $color-light-gray-20; } &.sign-up-menu-item { - padding: mp.$spacing-md; + padding: $spacing-md; } .link { display: flex; border: none; background-color: transparent; - padding: mp.$spacing-lg mp.$spacing-md; + padding: $spacing-lg $spacing-md; width: 100%; flex-direction: row; - gap: mp.$spacing-md; + gap: $spacing-md; font-weight: 500; color: tokens.$color-grey-40; cursor: pointer; @@ -108,7 +108,7 @@ // the content behind it scrolls), this makes it take up less space on // screens without a tall viewport, to increase the odds of every item // being visible: - padding: mp.$spacing-md; + padding: $spacing-md; } &:hover { @@ -116,7 +116,7 @@ } svg { - color: mp.$color-purple-40; + color: $color-purple-40; } } @@ -125,31 +125,31 @@ font-weight: 400; text-align: center; width: 100%; - padding: mp.$spacing-md; - background-color: mp.$color-blue-50; - border-radius: mp.$border-radius-sm; - margin: mp.$spacing-sm auto; + padding: $spacing-md; + background-color: $color-blue-50; + border-radius: $border-radius-sm; + margin: $spacing-sm auto; } } .user-info { display: flex; border-bottom: none; - padding: mp.$spacing-lg mp.$spacing-md; + padding: $spacing-lg $spacing-md; background-image: linear-gradient( to bottom, #f9f9fb calc(100% - 3px), rgba(0, 0, 0, 0) ), linear-gradient(90deg, #f73940 1.25%, #a83db5 96.87%); - gap: mp.$spacing-md; + gap: $spacing-md; @media screen and (max-height: 700px) { // Because the menu is not scrollable (it stays in the same position while // the content behind it scrolls), this makes it take up less space on // screens without a tall viewport, to increase the odds of every item // being visible: - padding: mp.$spacing-md; + padding: $spacing-md; } .user-avatar { @@ -162,7 +162,7 @@ } .user-email { - color: mp.$color-blue-90; + color: $color-blue-90; font-weight: 500; } @@ -172,15 +172,15 @@ align-items: center; color: tokens.$color-grey-40; - @include mp.text-body-sm; - gap: mp.$spacing-sm; + @include text-body-sm; + gap: $spacing-sm; &:hover { text-decoration: underline; } svg { - color: mp.$color-purple-40; + color: $color-purple-40; } } } diff --git a/frontend/src/components/layout/navigation/UpgradeButton.module.scss b/frontend/src/components/layout/navigation/UpgradeButton.module.scss index 08a6dca8ba..462a14dff4 100644 --- a/frontend/src/components/layout/navigation/UpgradeButton.module.scss +++ b/frontend/src/components/layout/navigation/UpgradeButton.module.scss @@ -1,23 +1,23 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; #upgrade-button { appearance: none; - @include mp.text-body-lg; + @include text-body-lg; line-height: 1; - color: mp.$color-purple-10; + color: $color-purple-10; font-weight: 600; - border-radius: mp.$border-radius-md; - font-family: mp.$font-stack-firefox; + border-radius: $border-radius-md; + font-family: $font-stack-firefox; - @media screen and #{mp.$mq-md} { - background-color: mp.$color-purple-20; - padding: mp.$spacing-sm mp.$spacing-md; - color: mp.$color-blue-90; + @media screen and #{$mq-md} { + background-color: $color-purple-20; + padding: $spacing-sm $spacing-md; + color: $color-blue-90; } &:hover { - color: mp.$color-blue-50; + color: $color-blue-50; } } diff --git a/frontend/src/components/layout/navigation/UserMenu.module.scss b/frontend/src/components/layout/navigation/UserMenu.module.scss index 7b27210254..298b8aa4d2 100644 --- a/frontend/src/components/layout/navigation/UserMenu.module.scss +++ b/frontend/src/components/layout/navigation/UserMenu.module.scss @@ -1,5 +1,5 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../../styles/typography"; .wrapper { @@ -24,19 +24,19 @@ .popup { position: absolute; right: 0; - margin-top: mp.$spacing-md; + margin-top: $spacing-md; padding: 0; - padding-bottom: mp.$spacing-lg; - min-width: mp.$content-xs; + padding-bottom: $spacing-lg; + min-width: $content-xs; list-style-type: none; - box-shadow: mp.$box-shadow-md; - border-radius: mp.$border-radius-md; + box-shadow: $box-shadow-md; + border-radius: $border-radius-md; // The .account-menu-item has its own background color // (to overlap the $firefoxGradient everywhere but at the bottom), // so we need to push it down a bit to avoid that from covering // .popup's rounded corners: - padding-top: mp.$border-radius-md; - $popupBackgroundColor: mp.$color-light-gray-10; + padding-top: $border-radius-md; + $popupBackgroundColor: $color-light-gray-10; background-color: $popupBackgroundColor; &::before { @@ -45,7 +45,7 @@ width: 12px; position: absolute; top: -6px; - right: mp.$spacing-md; + right: $spacing-md; transform: rotate(45deg); background-color: $popupBackgroundColor; } @@ -60,24 +60,24 @@ rgba(0, 0, 0, 0) ), tokens.$firefoxGradient; - margin-bottom: mp.$spacing-md; - padding: mp.$spacing-lg; + margin-bottom: $spacing-md; + padding: $spacing-lg; // To avoid overlapping .popup's rounded corners, // it has its own padding-top of $border-radius-md. Subtract that from // the .account-menu-item's padding-top: - padding-top: mp.$spacing-lg - mp.$border-radius-md; + padding-top: $spacing-lg - $border-radius-md; .user-email { font-weight: 700; display: block; - color: mp.$color-violet-90; + color: $color-violet-90; } .settings-link { - color: mp.$color-dark-gray-50; + color: $color-dark-gray-50; display: flex; align-items: center; - gap: mp.$spacing-xs; + gap: $spacing-xs; } &:hover { @@ -93,28 +93,28 @@ .menu-button { display: flex; align-items: center; - gap: mp.$spacing-md; - padding: mp.$spacing-md mp.$spacing-lg; - color: mp.$color-violet-90; + gap: $spacing-md; + padding: $spacing-md $spacing-lg; + color: $color-violet-90; border-style: none; background-color: transparent; width: 100%; cursor: pointer; svg { - color: mp.$color-purple-40; + color: $color-purple-40; } &:hover { text-decoration: underline; - background-color: mp.$color-light-gray-20; - color: mp.$color-violet-90; + background-color: $color-light-gray-20; + color: $color-violet-90; } } .settings-link { svg { - color: mp.$color-purple-40; + color: $color-purple-40; } } diff --git a/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss b/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss index 56554272b1..c4910f8e82 100644 --- a/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss +++ b/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss @@ -1,29 +1,29 @@ @use "../../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../../../styles/typography"; .wrapper { display: flex; flex-direction: column; - gap: mp.$spacing-sm; - padding: mp.$spacing-md mp.$spacing-md; + gap: $spacing-sm; + padding: $spacing-md $spacing-md; img { width: 100%; } .content { - padding: mp.$spacing-lg 0; + padding: $spacing-lg 0; h2 { @include typography.text-title-2xs { - font-family: mp.$font-stack-firefox; - padding-bottom: mp.$spacing-sm; + font-family: $font-stack-firefox; + padding-bottom: $spacing-sm; } } .cta { - padding-top: mp.$spacing-sm; + padding-top: $spacing-sm; } } diff --git a/frontend/src/components/layout/navigation/whatsnew/WhatsNewDashboard.module.scss b/frontend/src/components/layout/navigation/whatsnew/WhatsNewDashboard.module.scss index 33649009fb..327c4a3e02 100644 --- a/frontend/src/components/layout/navigation/whatsnew/WhatsNewDashboard.module.scss +++ b/frontend/src/components/layout/navigation/whatsnew/WhatsNewDashboard.module.scss @@ -1,18 +1,18 @@ @use "../../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .wrapper { - background-color: mp.$color-white; - border-radius: mp.$border-radius-sm; + background-color: $color-white; + border-radius: $border-radius-sm; .controls { $closeButtonWidth: 20px; display: flex; align-items: center; justify-content: space-between; - padding: mp.$spacing-sm; - padding-left: mp.$spacing-sm + $closeButtonWidth; - border-bottom: 1px solid mp.$color-light-gray-30; + padding: $spacing-sm; + padding-left: $spacing-sm + $closeButtonWidth; + border-bottom: 1px solid $color-light-gray-30; .switch-wrapper { flex: 1 1 0; @@ -20,17 +20,17 @@ justify-content: center; .switch { - @include mp.text-body-sm; + @include text-body-sm; display: inline-flex; - gap: mp.$spacing-xs; - border-radius: mp.$border-radius-lg; - background-color: mp.$color-light-gray-30; - padding: mp.$spacing-xs; + gap: $spacing-xs; + border-radius: $border-radius-lg; + background-color: $color-light-gray-30; + padding: $spacing-xs; .switch-tab { - border-radius: mp.$border-radius-lg; - color: mp.$color-dark-gray-50; - padding: 0 mp.$spacing-md; + border-radius: $border-radius-lg; + color: $color-dark-gray-50; + padding: 0 $spacing-md; border: 2px solid transparent; font-weight: 500; @@ -38,17 +38,17 @@ cursor: pointer; &:hover { - color: mp.$color-blue-50; + color: $color-blue-50; } } &.is-selected { - background-color: mp.$color-white; - color: mp.$color-purple-70; - box-shadow: mp.$box-shadow-sm; + background-color: $color-white; + color: $color-purple-70; + box-shadow: $box-shadow-sm; &:focus { - border-color: mp.$color-blue-50; - color: mp.$color-blue-50; + border-color: $color-blue-50; + color: $color-blue-50; outline: none; } } @@ -66,30 +66,30 @@ } .content { - padding-bottom: mp.$spacing-sm; + padding-bottom: $spacing-sm; } .footer-controls { - padding: mp.$spacing-xs mp.$spacing-md; + padding: $spacing-xs $spacing-md; .controls-wrapper { display: flex; align-items: center; - border-top: 1px solid mp.$color-light-gray-20; - padding: mp.$spacing-sm 0; + border-top: 1px solid $color-light-gray-20; + padding: $spacing-sm 0; .start { flex: 1 0 0; } button { - @include mp.text-body-sm; + @include text-body-sm; font-weight: 500; background-color: transparent; border-style: none; - border-radius: mp.$border-radius-sm; - color: mp.$color-blue-50; - padding: mp.$spacing-sm; + border-radius: $border-radius-sm; + color: $color-blue-50; + padding: $spacing-sm; cursor: pointer; &:hover { diff --git a/frontend/src/components/layout/navigation/whatsnew/WhatsNewList.module.scss b/frontend/src/components/layout/navigation/whatsnew/WhatsNewList.module.scss index a1d62c1413..a95c10c119 100644 --- a/frontend/src/components/layout/navigation/whatsnew/WhatsNewList.module.scss +++ b/frontend/src/components/layout/navigation/whatsnew/WhatsNewList.module.scss @@ -1,17 +1,17 @@ @use "../../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .empty-message { display: flex; flex-direction: column; - padding-top: mp.$spacing-lg; - padding-bottom: mp.$spacing-2xl; - gap: mp.$spacing-lg; + padding-top: $spacing-lg; + padding-bottom: $spacing-2xl; + gap: $spacing-lg; align-items: center; text-align: center; p { - @include mp.text-body-md; + @include text-body-md; max-width: 75%; } } @@ -20,13 +20,13 @@ display: flex; flex-direction: column; list-style-type: none; - padding: 0 mp.$spacing-md; - max-height: min(mp.$content-md, 50vh); + padding: 0 $spacing-md; + max-height: min($content-md, 50vh); overflow-y: auto; li { - padding: mp.$spacing-sm 0; - border-bottom: 1px solid mp.$color-light-gray-30; + padding: $spacing-sm 0; + border-bottom: 1px solid $color-light-gray-30; &:last-child { border-bottom-style: none; @@ -43,9 +43,9 @@ .item { display: flex; align-items: center; - gap: mp.$spacing-md; - border-radius: mp.$border-radius-sm; - padding: mp.$spacing-xs 0; + gap: $spacing-md; + border-radius: $border-radius-sm; + padding: $spacing-xs 0; cursor: pointer; // Forces news icon to be the same size regardless of image size @@ -55,21 +55,21 @@ } h3 { - @include mp.text-body-sm; + @include text-body-sm; font-weight: 500; } p { - @include mp.text-body-sm; + @include text-body-sm; } &:hover { - background-color: mp.$color-violet-05; + background-color: $color-violet-05; // An item is $hoverOverflow wider than its container when hovered, // i.e. the background colour is wider than the separator. - $hoverOverflow: mp.$spacing-sm; + $hoverOverflow: $spacing-sm; margin: 0 (-1 * $hoverOverflow); - padding: mp.$spacing-xs $hoverOverflow; + padding: $spacing-xs $hoverOverflow; } } } diff --git a/frontend/src/components/layout/navigation/whatsnew/WhatsNewMenu.module.scss b/frontend/src/components/layout/navigation/whatsnew/WhatsNewMenu.module.scss index eb53ffa259..1fa2346c3d 100644 --- a/frontend/src/components/layout/navigation/whatsnew/WhatsNewMenu.module.scss +++ b/frontend/src/components/layout/navigation/whatsnew/WhatsNewMenu.module.scss @@ -1,5 +1,5 @@ @use "../../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; button.trigger { @@ -9,18 +9,18 @@ button.trigger { background-color: transparent; border-style: none; color: inherit; - border-radius: mp.$border-radius-lg; + border-radius: $border-radius-lg; cursor: pointer; - padding: mp.$spacing-xs mp.$spacing-md; - font-family: mp.$font-stack-firefox; + padding: $spacing-xs $spacing-md; + font-family: $font-stack-firefox; position: relative; &.is-open { - background-color: mp.$color-light-gray-20; - color: mp.$color-dark-gray-20; + background-color: $color-light-gray-20; + color: $color-dark-gray-20; &:hover { - color: mp.$color-blue-50; + color: $color-blue-50; } } @@ -30,16 +30,16 @@ button.trigger { .pill { border-radius: 100%; - padding: mp.$spacing-sm; + padding: $spacing-sm; font-size: 14px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; - background-color: mp.$color-yellow-40; + background-color: $color-yellow-40; font-weight: 700; - color: mp.$color-white; + color: $color-white; font-style: normal; // On small screens, let the "new news entries" counter slightly overlap // the news icon. These position coordinates are not an exact science. @@ -48,8 +48,8 @@ button.trigger { right: 0; } - @media screen and #{mp.$mq-md} { - gap: mp.$spacing-sm; + @media screen and #{$mq-md} { + gap: $spacing-sm; position: initial; .trigger-icon { @@ -65,9 +65,9 @@ button.trigger { } .popover-wrapper { - box-shadow: mp.$box-shadow-sm; - border-radius: mp.$border-radius-sm; - width: min(mp.$content-sm, calc(100vw - 2 * mp.$spacing-md)); + box-shadow: $box-shadow-sm; + border-radius: $border-radius-sm; + width: min($content-sm, calc(100vw - 2 * $spacing-md)); button { padding: 0; @@ -79,27 +79,27 @@ button.trigger { width: 12px; position: absolute; top: -6px; - right: mp.$spacing-lg; + right: $spacing-lg; transform: rotate(45deg); - background-color: mp.$color-white; + background-color: $color-white; } } .cta { - @include mp.text-body-lg; - color: mp.$color-blue-50; + @include text-body-lg; + color: $color-blue-50; font-weight: 500; text-decoration: underline; - margin-top: mp.$spacing-sm; + margin-top: $spacing-sm; cursor: pointer; &:hover { - color: mp.$color-blue-80; + color: $color-blue-80; } } .countdown-timer { display: flex; justify-content: center; - padding: mp.$spacing-2xl 0; + padding: $spacing-2xl 0; } diff --git a/frontend/src/components/layout/topmessage/CsatSurvey.module.scss b/frontend/src/components/layout/topmessage/CsatSurvey.module.scss index 58cc57c9a5..6078e0b22a 100644 --- a/frontend/src/components/layout/topmessage/CsatSurvey.module.scss +++ b/frontend/src/components/layout/topmessage/CsatSurvey.module.scss @@ -1,38 +1,38 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .wrapper { display: none; flex-direction: column; align-items: center; justify-content: space-around; - gap: mp.$spacing-sm; - padding: mp.$spacing-md 0; - background-color: mp.$color-purple-90; - color: mp.$color-white; + gap: $spacing-sm; + padding: $spacing-md 0; + background-color: $color-purple-90; + color: $color-white; position: relative; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { display: flex; } .dismiss-button { position: absolute; - right: mp.$spacing-md; + right: $spacing-md; background-color: transparent; border-style: none; - color: mp.$color-white; + color: $color-white; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; - border-radius: mp.$border-radius-sm; + border-radius: $border-radius-sm; cursor: pointer; padding: 0; &:hover { - background-color: mp.$color-blue-50; + background-color: $color-blue-50; } } } @@ -51,27 +51,27 @@ display: flex; align-items: center; justify-content: space-around; - gap: mp.$spacing-md; + gap: $spacing-md; ol { display: flex; - gap: mp.$spacing-md; + gap: $spacing-md; list-style-type: none; } button { - border-radius: mp.$border-radius-sm; - background-color: mp.$color-violet-40; - color: mp.$color-white; + border-radius: $border-radius-sm; + background-color: $color-violet-40; + color: $color-white; transition: background-color 0.1s ease-out; border-style: none; - padding: mp.$spacing-sm; + padding: $spacing-sm; height: 2.5rem; text-align: center; cursor: pointer; &:hover { - background-color: mp.$color-blue-50; + background-color: $color-blue-50; } } } diff --git a/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss b/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss index 2e901d9da6..f23e1cb834 100644 --- a/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss +++ b/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss @@ -1,40 +1,40 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; // Hardcoding #5015cd after talking with design, no token for this color exists yet in Nebula. $banner-gradient: linear-gradient( 90.13deg, - mp.$color-purple-90 -2.39%, + $color-purple-90 -2.39%, #5015cd 50.81%, - mp.$color-purple-50 104% + $color-purple-50 104% ); .wrapper { display: flex; align-items: center; justify-content: center; - padding: mp.$spacing-md; - color: mp.$color-white; + padding: $spacing-md; + color: $color-white; position: relative; background-image: url("../images/holiday-promo-banner-pattern-mobile.svg"), $banner-gradient; background-repeat: no-repeat; background-size: cover; flex-direction: column; - gap: mp.$spacing-md; + gap: $spacing-md; - @media screen and #{mp.$mq-sm} { + @media screen and #{$mq-sm} { flex-direction: row; - gap: mp.$spacing-2xl; + gap: $spacing-2xl; background-image: url("../images/holiday-promo-banner-pattern-tablet.svg"), $banner-gradient; } - @media screen and #{mp.$mq-md} { - gap: mp.$layout-xl; + @media screen and #{$mq-md} { + gap: $layout-xl; background-image: url("../images/holiday-promo-banner-pattern-laptop.svg"), $banner-gradient; } - @media screen and #{mp.$mq-xl} { + @media screen and #{$mq-xl} { background-image: url("../images/holiday-promo-banner-pattern-desktop.svg"), $banner-gradient; } @@ -43,14 +43,14 @@ $banner-gradient: linear-gradient( display: flex; align-items: center; flex-direction: column; - gap: mp.$spacing-md; + gap: $spacing-md; - @media screen and #{mp.$mq-sm} { + @media screen and #{$mq-sm} { gap: 0; } - @media screen and #{mp.$mq-lg} { + @media screen and #{$mq-lg} { flex-direction: row; - gap: mp.$layout-xl; + gap: $layout-xl; } } @@ -63,12 +63,12 @@ $banner-gradient: linear-gradient( align-items: center; justify-content: center; cursor: pointer; - background-color: mp.$color-white; - padding: mp.$spacing-sm mp.$spacing-md; - border-radius: mp.$border-radius-sm; - color: mp.$color-purple-90; + background-color: $color-white; + padding: $spacing-sm $spacing-md; + border-radius: $border-radius-sm; + color: $color-purple-90; font-weight: 700; - margin-bottom: mp.$spacing-xs; + margin-bottom: $spacing-xs; &:hover { cursor: pointer; @@ -77,11 +77,11 @@ $banner-gradient: linear-gradient( } .promo-code-expiry { - color: rgba(mp.$color-white, 0.7); + color: rgba($color-white, 0.7); font-weight: 700; display: block; - @include mp.text-body-xs; + @include text-body-xs; } .banner-pattern { @@ -90,15 +90,15 @@ $banner-gradient: linear-gradient( } .promo-text { - @include mp.text-body-lg; + @include text-body-lg; - font-family: mp.$font-stack-base; + font-family: $font-stack-base; } .promo-text-bolded { - @include mp.text-body-xl; + @include text-body-xl; font-weight: 700; - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; } } diff --git a/frontend/src/components/layout/topmessage/NpsSurvey.module.scss b/frontend/src/components/layout/topmessage/NpsSurvey.module.scss index a15b238b63..4ed8c7a0fb 100644 --- a/frontend/src/components/layout/topmessage/NpsSurvey.module.scss +++ b/frontend/src/components/layout/topmessage/NpsSurvey.module.scss @@ -1,37 +1,37 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .wrapper { display: none; flex-direction: column; align-items: center; justify-content: space-around; - gap: mp.$spacing-sm; - padding: mp.$spacing-md 0; - background-color: mp.$color-purple-90; - color: mp.$color-white; + gap: $spacing-sm; + padding: $spacing-md 0; + background-color: $color-purple-90; + color: $color-white; position: relative; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { display: flex; } .dismiss-button { position: absolute; - right: mp.$spacing-md; + right: $spacing-md; background-color: transparent; border-style: none; - color: mp.$color-white; + color: $color-white; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; - border-radius: mp.$border-radius-sm; + border-radius: $border-radius-sm; cursor: pointer; &:hover { - background-color: mp.$color-blue-50; + background-color: $color-blue-50; } } } @@ -40,18 +40,18 @@ display: flex; align-items: center; justify-content: space-around; - gap: mp.$spacing-md; + gap: $spacing-md; ol { display: flex; - gap: mp.$spacing-md; + gap: $spacing-md; list-style-type: none; } button { - border-radius: mp.$border-radius-sm; - background-color: mp.$color-violet-40; - color: mp.$color-white; + border-radius: $border-radius-sm; + background-color: $color-violet-40; + color: $color-white; transition: background-color 0.1s ease-out; border-style: none; width: 2.5rem; @@ -60,11 +60,11 @@ cursor: pointer; &:hover { - background-color: mp.$color-blue-50; + background-color: $color-blue-50; } } .legend { - @include mp.text-body-sm; + @include text-body-sm; } } diff --git a/frontend/src/components/phones/dashboard/PhoneDashboard.module.scss b/frontend/src/components/phones/dashboard/PhoneDashboard.module.scss index a13e6cd05d..b866a54687 100644 --- a/frontend/src/components/phones/dashboard/PhoneDashboard.module.scss +++ b/frontend/src/components/phones/dashboard/PhoneDashboard.module.scss @@ -1,4 +1,4 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../../styles/tokens"; .main-phone-wrapper { @@ -7,13 +7,13 @@ flex-direction: column; .content-wrapper { - max-width: calc(mp.$content-lg + mp.$layout-lg); + max-width: calc($content-lg + $layout-lg); width: 100%; height: 100%; margin: 0 auto; - padding: mp.$spacing-md; - margin-bottom: mp.$layout-md; - gap: mp.$spacing-lg; + padding: $spacing-md; + margin-bottom: $layout-md; + gap: $spacing-lg; display: flex; flex-direction: column; // Ensure that the card can always overlap elements in the profile, @@ -22,8 +22,8 @@ } .nav-icon { - color: mp.$color-light-gray-80; - stroke: mp.$color-light-gray-80; + color: $color-light-gray-80; + stroke: $color-light-gray-80; stroke-width: 1px; &:hover { @@ -35,14 +35,14 @@ display: flex; flex-direction: row; justify-content: space-between; - padding: 0 mp.$spacing-xl mp.$spacing-md mp.$spacing-xl; - border-bottom: 1px solid mp.$color-light-gray-20; + padding: 0 $spacing-xl $spacing-md $spacing-xl; + border-bottom: 1px solid $color-light-gray-20; } .senders-cta { display: flex; flex-direction: row; - border-radius: mp.$border-radius-lg; + border-radius: $border-radius-lg; align-items: center; border: 0; padding: 0; @@ -58,21 +58,21 @@ } } - @media screen and #{mp.$mq-md} { - padding: mp.$spacing-sm; - gap: mp.$spacing-xs; - left: mp.$spacing-sm; // Cancel out extra space from padding + @media screen and #{$mq-md} { + padding: $spacing-sm; + gap: $spacing-xs; + left: $spacing-sm; // Cancel out extra space from padding position: relative; &:hover { - background: mp.$color-light-gray-10; + background: $color-light-gray-10; } } span { display: none; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { display: block; } } @@ -80,16 +80,16 @@ .dashboard-card-caller-sms-senders-header { display: flex; - padding: 0 mp.$spacing-xl mp.$spacing-md mp.$spacing-xl; + padding: 0 $spacing-xl $spacing-md $spacing-xl; flex-direction: row; align-items: center; justify-content: space-between; - border-bottom: 1px solid mp.$color-light-gray-20; + border-bottom: 1px solid $color-light-gray-20; > * { flex: auto; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex: 1 1 auto; span:last-child { @@ -99,11 +99,11 @@ } .caller-sms-logs-title { - @include mp.text-title-3xs; + @include text-title-3xs; position: relative; text-align: center; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { left: -20px; // Width of the back button } } @@ -119,26 +119,26 @@ } .senders-panel { - padding: 0 mp.$spacing-lg; + padding: 0 $spacing-lg; display: flex; flex-direction: column; align-items: center; justify-content: center; - gap: mp.$spacing-lg; - min-height: mp.$content-xs; - margin-top: mp.$spacing-lg; + gap: $spacing-lg; + min-height: $content-xs; + margin-top: $spacing-lg; .senders-panel-body { - padding-top: mp.$spacing-sm; + padding-top: $spacing-sm; text-align: center; - max-width: mp.$content-md; + max-width: $content-md; margin: 0 auto; display: flex; } .update-settings-cta { display: inline-block; - padding: mp.$spacing-md 0; + padding: $spacing-md 0; font-weight: 700; color: tokens.$color-blue-50; @@ -156,12 +156,12 @@ .caller-sms-senders-table { display: flex; flex-direction: column; - margin-top: mp.$spacing-lg; - padding: 0 mp.$spacing-lg; + margin-top: $spacing-lg; + padding: 0 $spacing-lg; - @media screen and #{mp.$mq-md} { - margin: 0 mp.$spacing-sm; - margin-top: mp.$spacing-2xl; + @media screen and #{$mq-md} { + margin: 0 $spacing-sm; + margin-top: $spacing-2xl; } thead { @@ -174,7 +174,7 @@ clip: rect(0, 0, 0, 0); clip-path: circle(0); - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { position: unset; width: unset; height: unset; @@ -187,14 +187,14 @@ tr { display: grid; grid-template-columns: 2fr 1fr; - border-bottom: 1px solid mp.$color-light-gray-20; - padding: mp.$spacing-sm 0; + border-bottom: 1px solid $color-light-gray-20; + padding: $spacing-sm 0; align-items: center; - gap: mp.$spacing-sm; + gap: $spacing-sm; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { grid-template-columns: 3fr 2fr 1fr; - grid-gap: mp.$spacing-md; + grid-gap: $spacing-md; } th { @@ -215,7 +215,7 @@ .sender-date-wrapper { display: flex; align-items: center; - gap: mp.$spacing-sm; + gap: $spacing-sm; } .sender-controls { @@ -226,10 +226,10 @@ } .forwarded-type-icon { - color: mp.$color-light-gray-70; + color: $color-light-gray-70; } - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { .sender-number, .sender-date, .sender-controls { @@ -241,7 +241,7 @@ } .greyed-contact { - color: mp.$color-light-gray-80; + color: $color-light-gray-80; } .unblocked { @@ -262,23 +262,23 @@ } .dashboard-card { - box-shadow: mp.$box-shadow-sm; + box-shadow: $box-shadow-sm; background-color: tokens.$color-white; - border-radius: mp.$border-radius-md; + border-radius: $border-radius-md; display: flex; flex-direction: column; - padding: mp.$spacing-md 0; - min-height: mp.$content-xs; + padding: $spacing-md 0; + min-height: $content-xs; .header-phone-number { - @include mp.text-body-md; - @include mp.font-firefox; + @include text-body-md; + @include font-firefox; display: flex; justify-content: center; align-items: center; - @media screen and #{mp.$mq-sm} { - @include mp.text-body-xl; + @media screen and #{$mq-sm} { + @include text-body-xl; } .copy-controls { @@ -287,18 +287,18 @@ } .phone-statistics-container { - margin: mp.$spacing-md mp.$spacing-lg 0 mp.$spacing-lg; + margin: $spacing-md $spacing-lg 0 $spacing-lg; display: flex; flex-direction: column; justify-content: space-between; - border-radius: mp.$border-radius-lg; - border: mp.$border-radius-xs solid mp.$color-light-gray-20; - gap: mp.$spacing-md; - padding-top: mp.$spacing-md; + border-radius: $border-radius-lg; + border: $border-radius-xs solid $color-light-gray-20; + gap: $spacing-md; + padding-top: $spacing-md; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; - margin: 0 mp.$spacing-lg; + margin: 0 $spacing-lg; border-radius: auto; border: none; gap: none; @@ -310,64 +310,64 @@ display: flex; flex-direction: row-reverse; align-items: center; - padding-left: mp.$spacing-md; - padding-right: mp.$spacing-md; - padding-bottom: mp.$spacing-md; - border-bottom: 1px solid mp.$color-light-gray-20; + padding-left: $spacing-md; + padding-right: $spacing-md; + padding-bottom: $spacing-md; + border-bottom: 1px solid $color-light-gray-20; margin: 0; &:last-child { border-bottom: none; } - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex: 1; justify-content: center; align-items: center; flex-direction: column; text-align: center; - border-radius: mp.$border-radius-md; - background: mp.$color-light-gray-10; - padding: mp.$spacing-md mp.$spacing-lg; + border-radius: $border-radius-md; + background: $color-light-gray-10; + padding: $spacing-md $spacing-lg; } .phone-statistics-title { font-weight: 600; - border-radius: mp.$border-radius-md; + border-radius: $border-radius-md; - @include mp.text-title-3xs; + @include text-title-3xs; - @media screen and #{mp.$mq-md} { - @include mp.text-title-2xs; - @include mp.font-firefox; + @media screen and #{$mq-md} { + @include text-title-2xs; + @include font-firefox; } } .phone-statistics-body { line-height: 120%; - @media screen and #{mp.$mq-md} { - @include mp.text-body-xs; + @media screen and #{$mq-md} { + @include text-body-xs; } } } .inactive-statistics { - color: mp.$color-light-gray-70; + color: $color-light-gray-70; } .copy-icon { - padding: 0 mp.$spacing-sm; + padding: 0 $spacing-sm; opacity: 0.5; display: inline-block; - color: mp.$color-light-gray-90; + color: $color-light-gray-90; align-self: center; } .copy-button-wrapper { display: flex; flex-direction: row; - gap: mp.$spacing-xs; + gap: $spacing-xs; align-items: center; justify-content: center; position: relative; @@ -384,7 +384,7 @@ cursor: pointer; svg { - width: mp.$layout-sm; + width: $layout-sm; } &:hover { @@ -393,15 +393,15 @@ } .copied-confirmation { - @include mp.text-body-sm; + @include text-body-sm; opacity: 0; - padding: mp.$spacing-xs mp.$spacing-sm; + padding: $spacing-xs $spacing-sm; justify-content: center; pointer-events: none; transition: opacity 2s; background-color: tokens.$color-violet-30; color: tokens.$color-white; - border-radius: mp.$border-radius-md; + border-radius: $border-radius-md; right: 0; &.is-shown { @@ -416,29 +416,29 @@ .phone-controls-container { display: flex; flex-direction: column; - margin-top: mp.$spacing-md; - padding: 0 mp.$spacing-lg mp.$spacing-2xl mp.$spacing-lg; + margin-top: $spacing-md; + padding: 0 $spacing-lg $spacing-2xl $spacing-lg; width: 100%; - gap: mp.$spacing-lg; - border-bottom: 1px solid mp.$color-light-gray-20; + gap: $spacing-lg; + border-bottom: 1px solid $color-light-gray-20; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; width: auto; - gap: mp.$layout-xl; - padding: mp.$spacing-lg mp.$spacing-lg mp.$spacing-2xl mp.$spacing-lg; - border-top: 1px solid mp.$color-light-gray-20; + gap: $layout-xl; + padding: $spacing-lg $spacing-lg $spacing-2xl $spacing-lg; + border-top: 1px solid $color-light-gray-20; } .phone-controls { $toggle-border-radius: 40px; .forwarding-toggle { - width: mp.$content-sm; + width: $content-sm; max-width: 100%; background-color: tokens.$color-grey-05; border-radius: $toggle-border-radius; border: 6px solid tokens.$color-white; - outline: mp.$border-radius-xs solid tokens.$color-grey-10; + outline: $border-radius-xs solid tokens.$color-grey-10; display: flex; align-items: center; justify-content: center; @@ -471,14 +471,14 @@ // absolutely positioned so it can be animated: z-index: 1; flex: 1 0 auto; - padding: mp.$spacing-sm mp.$spacing-sm; + padding: $spacing-sm $spacing-sm; display: flex; - gap: mp.$spacing-sm; + gap: $spacing-sm; align-items: center; justify-content: center; - @media screen and #{mp.$mq-md} { - width: mp.$layout-xl; + @media screen and #{$mq-md} { + width: $layout-xl; } } @@ -510,10 +510,10 @@ .metadata-container { display: flex; flex-direction: column; - gap: mp.$spacing-md; - padding: 0 mp.$spacing-xl; - margin-top: mp.$spacing-md; - border-bottom: 1px solid mp.$color-light-gray-20; + gap: $spacing-md; + padding: 0 $spacing-xl; + margin-top: $spacing-md; + border-bottom: 1px solid $color-light-gray-20; &:last-child { border-bottom-style: none; @@ -523,21 +523,21 @@ dl { flex-grow: 2; display: flex; - gap: mp.$spacing-sm; + gap: $spacing-sm; flex-direction: column; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; - gap: mp.$spacing-xl; + gap: $spacing-xl; } dt { - @include mp.text-body-xs; - color: mp.$color-dark-gray-05; + @include text-body-xs; + color: $color-dark-gray-05; } } - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; .metadata { @@ -545,7 +545,7 @@ background-repeat: no-repeat; background-position: left center; background-size: $metadataIconSize $metadataIconSize; - padding-left: calc($metadataIconSize + mp.$spacing-md); + padding-left: calc($metadataIconSize + $spacing-md); } .forward-target { diff --git a/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss b/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss index be8238efe3..61e367b6fe 100644 --- a/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss +++ b/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss @@ -1,4 +1,4 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../../styles/tokens"; @use "../../../styles/typography" as styles-typography; @@ -6,13 +6,13 @@ display: flex; flex-direction: column; align-items: center; - max-width: mp.$content-max; + max-width: $content-max; width: 100%; margin: 0 auto; - padding: mp.$spacing-md; - margin-bottom: mp.$layout-md; - margin-top: mp.$layout-sm; - gap: mp.$layout-md; + padding: $spacing-md; + margin-bottom: $layout-md; + margin-top: $layout-sm; + gap: $layout-md; .main-heading { display: flex; @@ -21,7 +21,7 @@ h1 { @include styles-typography.text-title-xs { - @include mp.font-firefox; + @include font-firefox; font-weight: 600; } } @@ -30,9 +30,9 @@ .phone-instructions-wrapper { display: flex; flex-direction: column; - margin-top: mp.$layout-md; + margin-top: $layout-md; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; } @@ -41,20 +41,20 @@ position: relative; display: flex; flex-direction: column; - padding: mp.$spacing-lg 0; + padding: $spacing-lg 0; - @media screen and #{mp.$mq-md} { - padding: 0 mp.$spacing-md; + @media screen and #{$mq-md} { + padding: 0 $spacing-md; } - @media screen and #{mp.$mq-lg} { - padding: 0 mp.$spacing-2xl; + @media screen and #{$mq-lg} { + padding: 0 $spacing-2xl; } + .instruction-item { - border-top: solid 2px mp.$color-light-gray-20; + border-top: solid 2px $color-light-gray-20; - @media screen and #{mp.$mq-md} { - border-left: solid 2px mp.$color-light-gray-20; + @media screen and #{$mq-md} { + border-left: solid 2px $color-light-gray-20; border-top: none; } } @@ -63,15 +63,15 @@ align-self: center; display: inline; border-radius: 100%; - background-color: mp.$color-light-gray-30; - color: mp.$color-dark-gray-90; - padding: mp.$spacing-xs; - margin-left: mp.$spacing-sm; + background-color: $color-light-gray-30; + color: $color-dark-gray-90; + padding: $spacing-xs; + margin-left: $spacing-sm; } h2 { - @include mp.text-title-3xs; - padding: mp.$spacing-md 0; + @include text-title-3xs; + padding: $spacing-md 0; font-weight: 600; } @@ -96,15 +96,15 @@ } .demo-wrapper { - padding: 0 mp.$spacing-md; + padding: 0 $spacing-md; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { padding: 0; } .demo-heading { - color: mp.$color-light-gray-80; - padding-top: mp.$spacing-lg; + color: $color-light-gray-80; + padding-top: $spacing-lg; } .demo-input-wrapper { @@ -113,16 +113,16 @@ position: relative; .demo-input { - @include mp.text-body-lg; + @include text-body-lg; position: absolute; // Positioning the input into the text image margin: 0 0 5% 5%; - @media screen and #{mp.$mq-md} { - @include mp.text-body-md; + @media screen and #{$mq-md} { + @include text-body-md; } - @media screen and #{mp.$mq-xl} { - @include mp.text-body-lg; + @media screen and #{$mq-xl} { + @include text-body-lg; } } @@ -143,31 +143,31 @@ ul { display: flex; flex-direction: column; - padding: mp.$spacing-sm; + padding: $spacing-sm; background: tokens.$color-white; box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1); // Taken from Figma style to match it with the other svgs - border-radius: mp.$border-radius-md; + border-radius: $border-radius-md; list-style: none; - gap: mp.$spacing-xs; + gap: $spacing-xs; li { display: flex; flex-direction: row; align-items: center; justify-content: space-between; - padding: mp.$spacing-xs; + padding: $spacing-xs; &:first-child { - color: mp.$color-light-gray-50; - padding-bottom: mp.$spacing-sm; - border-bottom: 1px solid mp.$color-light-gray-10; + color: $color-light-gray-50; + padding-bottom: $spacing-sm; + border-bottom: 1px solid $color-light-gray-10; } span { margin: 0; p:nth-child(2) { - @include mp.text-body-sm; + @include text-body-sm; } &:nth-child(2) { @@ -182,14 +182,14 @@ } .dashboard-btn { - @include mp.font-firefox; + @include font-firefox; width: 100%; text-align: center; - padding: mp.$spacing-sm; + padding: $spacing-sm; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { width: auto; - padding: mp.$spacing-sm mp.$spacing-2xl; + padding: $spacing-sm $spacing-2xl; } } } diff --git a/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss b/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss index 196f21a705..667e670ced 100644 --- a/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss +++ b/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss @@ -1,35 +1,35 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../../styles/tokens"; @use "../../../styles/typography" as styles-typography; .wrapper { display: flex; flex-direction: column; - gap: mp.$spacing-xl; + gap: $spacing-xl; flex: 1 0 auto; - max-width: mp.$content-lg; + max-width: $content-lg; margin: 0 auto; - padding: mp.$spacing-2xl mp.$spacing-lg; + padding: $spacing-2xl $spacing-lg; width: 100%; overflow-x: hidden; h2 { @include styles-typography.text-title-xs { - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; text-align: center; } } .lead { - @include mp.text-title-3xs; - font-family: mp.$font-stack-firefox; + @include text-title-3xs; + font-family: $font-stack-firefox; text-align: center; display: flex; flex-direction: column; - gap: mp.$spacing-lg; + gap: $spacing-lg; p { - @include mp.text-body-md; + @include text-body-md; } img { @@ -38,22 +38,22 @@ } .description { - @include mp.text-body-md; + @include text-body-md; display: flex; flex-direction: column; align-items: center; - gap: mp.$spacing-2xl; - padding: mp.$spacing-md; - margin-top: mp.$spacing-lg; + gap: $spacing-2xl; + padding: $spacing-md; + margin-top: $spacing-lg; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; } ul { display: flex; flex-direction: column; - gap: mp.$spacing-md; + gap: $spacing-md; margin: 0; padding: 0; @@ -71,15 +71,15 @@ align-items: center; justify-items: center; text-align: center; - gap: mp.$spacing-md; + gap: $spacing-md; background-color: tokens.$color-white; - padding: mp.$spacing-lg mp.$spacing-2xl; - border-radius: mp.$border-radius-md; - box-shadow: mp.$box-shadow-sm; + padding: $spacing-lg $spacing-2xl; + border-radius: $border-radius-md; + box-shadow: $box-shadow-sm; h3 { - @include mp.text-body-md; - font-family: mp.$font-stack-firefox; + @include text-body-md; + font-family: $font-stack-firefox; text-align: center; font-weight: 400; } @@ -87,19 +87,19 @@ .pricing { display: flex; flex-direction: column; - gap: mp.$spacing-sm; + gap: $spacing-sm; width: 100%; // Ensures responsiveness of container, and that the purchase tabpanel has a static width when toggling. .pricing-toggle { display: flex; background-color: tokens.$color-grey-10; - padding: mp.$spacing-xs; - border-radius: mp.$border-radius-lg; + padding: $spacing-xs; + border-radius: $border-radius-lg; > div { - @include mp.text-body-sm; + @include text-body-sm; width: 50%; - padding: mp.$spacing-xs mp.$spacing-sm; + padding: $spacing-xs $spacing-sm; text-align: center; color: tokens.$color-grey-40; font-weight: 500; @@ -107,7 +107,7 @@ &.is-selected { background-color: tokens.$color-white; - border-radius: mp.$border-radius-lg; + border-radius: $border-radius-lg; color: tokens.$color-blue-50; } } @@ -116,17 +116,17 @@ [role="tabpanel"] { display: flex; flex-direction: column; - gap: mp.$spacing-md; + gap: $spacing-md; .price { @include styles-typography.text-title-2xs { - padding-top: mp.$spacing-sm; + padding-top: $spacing-sm; display: block; font-weight: 700; } > span { - @include mp.text-body-sm; + @include text-body-sm; font-weight: 400; vertical-align: middle; } diff --git a/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss b/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss index 182e753cc1..842cb92645 100644 --- a/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss +++ b/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss @@ -1,4 +1,4 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; @use "../../../styles/tokens"; @use "../../../styles/typography" as styles-typography; @@ -8,10 +8,10 @@ display: flex; flex-direction: column; justify-content: center; - gap: mp.$spacing-2xl; - max-width: mp.$content-md; + gap: $spacing-2xl; + max-width: $content-md; margin: 0 auto; - padding: mp.$spacing-lg; + padding: $spacing-lg; .button { // TODO: This is not working @@ -22,21 +22,21 @@ h2 { @include styles-typography.text-title-xs { - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; text-align: center; } } .lead { - @include mp.text-title-3xs; - font-family: mp.$font-stack-firefox; + @include text-title-3xs; + font-family: $font-stack-firefox; text-align: center; display: flex; flex-direction: column; - gap: mp.$spacing-lg; + gap: $spacing-lg; p { - @include mp.text-body-md; + @include text-body-md; } img { @@ -45,22 +45,22 @@ } .description { - @include mp.text-body-md; + @include text-body-md; display: flex; flex-direction: column; align-items: center; - gap: mp.$spacing-2xl; - padding: mp.$spacing-md; - margin-top: mp.$spacing-lg; + gap: $spacing-2xl; + padding: $spacing-md; + margin-top: $spacing-lg; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; } ul { display: flex; flex-direction: column; - gap: mp.$spacing-md; + gap: $spacing-md; margin: 0; padding: 0; } @@ -74,22 +74,22 @@ align-items: center; justify-items: center; text-align: center; - gap: mp.$spacing-md; + gap: $spacing-md; background-color: tokens.$color-white; - padding: mp.$spacing-lg mp.$spacing-2xl; - border-radius: mp.$border-radius-md; - box-shadow: mp.$box-shadow-sm; + padding: $spacing-lg $spacing-2xl; + border-radius: $border-radius-md; + box-shadow: $box-shadow-sm; h3 { - @include mp.text-body-md; - font-family: mp.$font-stack-firefox; + @include text-body-md; + font-family: $font-stack-firefox; text-align: center; font-weight: 400; } span { @include styles-typography.text-title-2xs { - padding-top: mp.$spacing-sm; + padding-top: $spacing-sm; display: block; font-weight: 700; } @@ -100,18 +100,18 @@ // Step 2: Verify Phone Number .step-verify-input .error { - max-width: mp.$content-sm; + max-width: $content-sm; background-color: tokens.$color-white; - border-radius: mp.$border-radius-md; - box-shadow: mp.$box-shadow-sm; - padding: mp.$spacing-md; + border-radius: $border-radius-md; + box-shadow: $box-shadow-sm; + padding: $spacing-md; text-align: center; margin: 0 auto; } .step-verify-sub-body { background-color: tokens.$color-white; - border-radius: mp.$border-radius-md; - padding: mp.$spacing-lg; + border-radius: $border-radius-md; + padding: $spacing-lg; } .step-verify-input .is-hidden { @@ -119,11 +119,11 @@ } .form { - max-width: mp.$content-sm; + max-width: $content-sm; margin: 0 auto; display: flex; flex-direction: column; - gap: mp.$spacing-lg; + gap: $spacing-lg; } // Step 3: Enter verification code @@ -136,7 +136,7 @@ } h2 { - padding-top: mp.$spacing-md; + padding-top: $spacing-md; } &.is-error, @@ -167,18 +167,18 @@ form { background-color: tokens.$color-white; - box-shadow: mp.$box-shadow-sm; - padding: mp.$spacing-lg; - border-radius: mp.$border-radius-md; - max-width: mp.$screen-sm; + box-shadow: $box-shadow-sm; + padding: $spacing-lg; + border-radius: $border-radius-md; + max-width: $screen-sm; position: relative; &.is-hidden { display: none; } - @media screen and #{mp.$mq-md} { - padding: mp.$spacing-lg mp.$spacing-2xl; + @media screen and #{$mq-md} { + padding: $spacing-lg $spacing-2xl; } p { @@ -195,10 +195,10 @@ } input { - @include mp.text-body-xl; - border-radius: mp.$border-radius-md; + @include text-body-xl; + border-radius: $border-radius-md; display: block; - padding: mp.$spacing-sm; + padding: $spacing-sm; box-shadow: none; border: 0; background-color: tokens.$color-grey-10; @@ -211,8 +211,8 @@ outline: 4px solid tokens.$color-error-focus; } - @media screen and #{mp.$mq-md} { - padding: mp.$spacing-md; + @media screen and #{$mq-md} { + padding: $spacing-md; letter-spacing: 2rem; } } @@ -221,14 +221,14 @@ .step-input-verificiation-code-timeout { background-color: tokens.$color-white; - box-shadow: mp.$box-shadow-sm; - border-radius: mp.$border-radius-md; - padding: mp.$spacing-lg mp.$spacing-2xl; - max-width: mp.$screen-sm; + box-shadow: $box-shadow-sm; + border-radius: $border-radius-md; + padding: $spacing-lg $spacing-2xl; + max-width: $screen-sm; margin: 0 auto; display: flex; flex-direction: column; - gap: mp.$spacing-lg; + gap: $spacing-lg; &.is-hidden { display: none; @@ -241,14 +241,14 @@ .step-input-verificiation-code-success { background-color: tokens.$color-white; - box-shadow: mp.$box-shadow-sm; - border-radius: mp.$border-radius-md; - padding: mp.$spacing-lg mp.$spacing-2xl; - max-width: mp.$screen-sm; + box-shadow: $box-shadow-sm; + border-radius: $border-radius-md; + padding: $spacing-lg $spacing-2xl; + max-width: $screen-sm; margin: 0 auto; display: flex; flex-direction: column; - gap: mp.$spacing-lg; + gap: $spacing-lg; justify-content: center; &.is-hidden { @@ -256,7 +256,7 @@ } h3 { - @include mp.text-body-md; + @include text-body-md; } p, @@ -270,13 +270,13 @@ align-items: center; position: relative; - @include mp.text-body-sm; + @include text-body-sm; } .phone-input { - width: mp.$content-xs; - height: mp.$layout-sm; - padding: mp.$spacing-md mp.$spacing-sm mp.$spacing-md mp.$spacing-2xl; + width: $content-xs; + height: $layout-sm; + padding: $spacing-md $spacing-sm $spacing-md $spacing-2xl; &.is-error { border: 2px solid tokens.$color-red-60; @@ -287,8 +287,8 @@ // static country code in the real phone number input "+1" .phone-input-country-code { background-color: tokens.$color-grey-10; - border-radius: mp.$border-radius-sm; + border-radius: $border-radius-sm; position: absolute; - padding: 0 mp.$spacing-sm; - margin-left: mp.$spacing-sm; + padding: 0 $spacing-sm; + margin-left: $spacing-sm; } diff --git a/frontend/src/components/phones/onboarding/RelayNumberConfirmationModal.module.scss b/frontend/src/components/phones/onboarding/RelayNumberConfirmationModal.module.scss index d571be7083..1c36a096b5 100644 --- a/frontend/src/components/phones/onboarding/RelayNumberConfirmationModal.module.scss +++ b/frontend/src/components/phones/onboarding/RelayNumberConfirmationModal.module.scss @@ -1,10 +1,10 @@ @use "../../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; .underlay { position: fixed; - background-color: rgba(mp.$color-black, 0.4); + background-color: rgba($color-black, 0.4); top: 0; bottom: 0; left: 0; @@ -17,30 +17,30 @@ display: flex; flex-direction: column; align-items: flex-end; - background: mp.$color-white; - gap: mp.$spacing-lg; - max-width: mp.$content-sm; - border-radius: mp.$border-radius-md; - box-shadow: mp.$box-shadow-sm; - padding: mp.$spacing-md; + background: $color-white; + gap: $spacing-lg; + max-width: $content-sm; + border-radius: $border-radius-md; + box-shadow: $box-shadow-sm; + padding: $spacing-md; .dialog-content { display: flex; flex-direction: column; align-items: center; text-align: center; - gap: mp.$spacing-xl; - padding: mp.$spacing-lg mp.$spacing-md; + gap: $spacing-xl; + padding: $spacing-lg $spacing-md; p { display: flex; - gap: mp.$spacing-xs; + gap: $spacing-xs; flex-direction: column; } } .confirm-button { - width: mp.$content-xs; + width: $content-xs; } .cancel-button { @@ -50,11 +50,11 @@ color: tokens.$color-grey-40; &:hover { - color: mp.$color-link-hover; + color: $color-link-hover; } &:focus { - color: mp.$color-blue-50; + color: $color-blue-50; } } } diff --git a/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss b/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss index 274a2ba6ae..2afac72c80 100644 --- a/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss +++ b/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss @@ -1,16 +1,16 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; @use "../../../styles/tokens"; @use "../../../styles/typography" as styles-typography; .step, .controls { - max-width: mp.$content-md; + max-width: $content-md; margin: 0 auto; - padding: mp.$spacing-lg; + padding: $spacing-lg; &.step-welcome { - max-width: mp.$content-lg; + max-width: $content-lg; } } @@ -19,7 +19,7 @@ display: flex; flex-direction: column; justify-content: center; - gap: mp.$spacing-2xl; + gap: $spacing-2xl; .show-more-options { font-weight: 400; @@ -36,21 +36,21 @@ h2 { @include styles-typography.text-title-xs { - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; text-align: center; } } .lead { - @include mp.text-body-sm; - font-family: mp.$font-stack-base; + @include text-body-sm; + font-family: $font-stack-base; text-align: center; display: flex; flex-direction: column; - gap: mp.$spacing-lg; + gap: $spacing-lg; p { - @include mp.text-body-md; + @include text-body-md; } img { @@ -59,22 +59,22 @@ } .description { - @include mp.text-body-md; + @include text-body-md; display: flex; flex-direction: column; align-items: center; - gap: mp.$spacing-2xl; - padding: mp.$spacing-md; - margin-top: mp.$spacing-lg; + gap: $spacing-2xl; + padding: $spacing-md; + margin-top: $spacing-lg; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; } ul { display: flex; flex-direction: column; - gap: mp.$spacing-md; + gap: $spacing-md; margin: 0; padding: 0; } @@ -88,22 +88,22 @@ align-items: center; justify-items: center; text-align: center; - gap: mp.$spacing-md; + gap: $spacing-md; background-color: tokens.$color-white; - padding: mp.$spacing-lg mp.$spacing-2xl; - border-radius: mp.$border-radius-md; - box-shadow: mp.$box-shadow-sm; + padding: $spacing-lg $spacing-2xl; + border-radius: $border-radius-md; + box-shadow: $box-shadow-sm; h3 { - @include mp.text-body-md; - font-family: mp.$font-stack-firefox; + @include text-body-md; + font-family: $font-stack-firefox; text-align: center; font-weight: 400; } span { @include styles-typography.text-title-2xs { - padding-top: mp.$spacing-sm; + padding-top: $spacing-sm; display: block; font-weight: 700; } @@ -111,11 +111,11 @@ } .form { - max-width: mp.$content-sm; + max-width: $content-sm; margin: 0 auto; display: flex; flex-direction: column; - gap: mp.$spacing-lg; + gap: $spacing-lg; } } @@ -156,18 +156,18 @@ form { background-color: tokens.$color-white; - box-shadow: mp.$box-shadow-sm; - padding: mp.$spacing-lg; - border-radius: mp.$border-radius-md; - max-width: mp.$screen-sm; + box-shadow: $box-shadow-sm; + padding: $spacing-lg; + border-radius: $border-radius-md; + max-width: $screen-sm; position: relative; &.is-hidden { display: none; } - @media screen and #{mp.$mq-md} { - padding: mp.$spacing-lg mp.$spacing-2xl; + @media screen and #{$mq-md} { + padding: $spacing-lg $spacing-2xl; } p { @@ -184,10 +184,10 @@ } input { - @include mp.text-body-xl; - border-radius: mp.$border-radius-md; + @include text-body-xl; + border-radius: $border-radius-md; display: block; - padding: mp.$spacing-sm; + padding: $spacing-sm; box-shadow: none; border: 0; background-color: tokens.$color-grey-10; @@ -200,8 +200,8 @@ outline: 4px solid tokens.$color-error-focus; } - @media screen and #{mp.$mq-md} { - padding: mp.$spacing-md; + @media screen and #{$mq-md} { + padding: $spacing-md; letter-spacing: 2rem; } } @@ -210,14 +210,14 @@ .step-input-verificiation-code-success { background-color: tokens.$color-white; - box-shadow: mp.$box-shadow-sm; - border-radius: mp.$border-radius-md; - padding: mp.$spacing-lg mp.$spacing-2xl; - max-width: mp.$screen-sm; + box-shadow: $box-shadow-sm; + border-radius: $border-radius-md; + padding: $spacing-lg $spacing-2xl; + max-width: $screen-sm; margin: 0 auto; display: flex; flex-direction: column; - gap: mp.$spacing-lg; + gap: $spacing-lg; justify-content: center; &.is-hidden { @@ -225,7 +225,7 @@ } h3 { - @include mp.text-body-md; + @include text-body-md; } p, @@ -236,20 +236,20 @@ .step-select-phone-number-mask { background-color: tokens.$color-white; - box-shadow: mp.$box-shadow-sm; - border-radius: mp.$border-radius-md; - padding: mp.$spacing-xl mp.$spacing-lg; + box-shadow: $box-shadow-sm; + border-radius: $border-radius-md; + padding: $spacing-xl $spacing-lg; width: 100%; margin: 0 auto; display: flex; flex-direction: column; - gap: mp.$spacing-lg; + gap: $spacing-lg; justify-content: center; .lead { display: flex; flex-direction: row; - gap: mp.$spacing-md; + gap: $spacing-md; align-items: center; justify-content: center; @@ -268,22 +268,22 @@ flex-direction: column; align-items: center; justify-content: center; - gap: mp.$spacing-md; + gap: $spacing-md; > div { display: flex; - gap: mp.$spacing-sm; + gap: $spacing-sm; } } .search { @include mp_forms.form-input; position: relative; - padding-left: mp.$layout-md; - background: mp.$spacing-sm center transparent no-repeat; + padding-left: $layout-md; + background: $spacing-sm center transparent no-repeat; background-image: url("/icons/search-blue.svg"); background-size: 1.5rem auto; - max-width: mp.$content-xs; + max-width: $content-xs; margin: 0 auto; } } @@ -293,24 +293,24 @@ // Magic number: Min-height for both loading animation and body copy // TODO: Use height of parent container flex-direction: column; - gap: mp.$spacing-md; + gap: $spacing-md; align-items: center; justify-content: center; - @media screen and #{mp.$mq-tall} { + @media screen and #{$mq-tall} { // min-height: 75vh; } .loading { - width: mp.$layout-lg; - height: mp.$layout-lg; + width: $layout-lg; + height: $layout-lg; background: url("./images/loading.svg") center no-repeat transparent; background-size: contain; animation: spin 1s infinite linear; } p { - max-width: mp.$content-xs; + max-width: $content-xs; margin: 0 auto; text-align: center; } diff --git a/frontend/src/components/waitlist/WaitlistPage.module.scss b/frontend/src/components/waitlist/WaitlistPage.module.scss index 14c7ca58f3..bdce439326 100644 --- a/frontend/src/components/waitlist/WaitlistPage.module.scss +++ b/frontend/src/components/waitlist/WaitlistPage.module.scss @@ -1,5 +1,5 @@ @use "~@mozilla-protocol/core/protocol/css/includes/tokens/dist/index" as dist; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; @use "../../styles/typography" as styles-typography; @@ -8,38 +8,38 @@ justify-content: space-around; align-items: center; height: 100%; - padding: mp.$spacing-sm mp.$spacing-lg; + padding: $spacing-sm $spacing-lg; .form { - width: mp.$content-lg; + width: $content-lg; max-width: 100%; display: flex; flex-direction: column; align-items: center; - gap: mp.$spacing-2xl; - padding: mp.$spacing-md 0; + gap: $spacing-2xl; + padding: $spacing-md 0; .controls { display: flex; flex-direction: column; - gap: mp.$spacing-sm; - width: mp.$content-md; + gap: $spacing-sm; + width: $content-md; max-width: 100%; .control { display: flex; flex-direction: column; - gap: mp.$spacing-xs; + gap: $spacing-xs; width: 100%; label { @include mp_forms.field-label; - @include mp.text-body-md; + @include text-body-md; padding: 0; } i { - @include mp.text-body-sm; + @include text-body-sm; } input { @@ -59,19 +59,19 @@ } .privacy { - @include mp.text-body-sm; + @include text-body-sm; align-self: center; text-align: center; display: flex; flex-direction: column; - gap: mp.$spacing-md; + gap: $spacing-md; a { - color: mp.$color-blue-50; + color: $color-blue-50; text-decoration: underline; &:hover { - color: mp.$color-blue-60; + color: $color-blue-60; text-decoration: none; } } @@ -80,14 +80,14 @@ .heading { @include styles-typography.text-title-sm { - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; align-self: center; text-align: center; } } .lead { - @include mp.text-body-lg; + @include text-body-lg; align-self: center; text-align: center; } diff --git a/frontend/src/pages/accounts/account_inactive.module.scss b/frontend/src/pages/accounts/account_inactive.module.scss index 3dc4884167..47e94b7d16 100644 --- a/frontend/src/pages/accounts/account_inactive.module.scss +++ b/frontend/src/pages/accounts/account_inactive.module.scss @@ -1,6 +1,6 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .error { - background-color: mp.$color-red-60; - color: mp.$color-white; + background-color: $color-red-60; + color: $color-white; } diff --git a/frontend/src/pages/accounts/profile.module.scss b/frontend/src/pages/accounts/profile.module.scss index 9a139679ba..93e0e531fa 100644 --- a/frontend/src/pages/accounts/profile.module.scss +++ b/frontend/src/pages/accounts/profile.module.scss @@ -1,20 +1,20 @@ @use "../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/mixins/typography" as mixins-typography; @use "../../styles/typography"; .header { - background-color: mp.$color-light-gray-05; + background-color: $color-light-gray-05; width: 100%; - padding: mp.$spacing-md 0; + padding: $spacing-md 0; .header-wrapper { display: flex; flex-direction: column; - gap: mp.$spacing-md; + gap: $spacing-md; - @media screen and #{mp.$mq-lg} { + @media screen and #{$mq-lg} { flex-direction: row; align-items: center; } @@ -23,14 +23,14 @@ flex: 1 0 auto; display: flex; flex-direction: column; - gap: mp.$spacing-sm; + gap: $spacing-sm; .greeting { - @include mp.text-body-xl; + @include text-body-xl; font-weight: 700; .lead { - @include mp.text-body-md; + @include text-body-md; font-weight: 400; display: block; } @@ -40,20 +40,20 @@ display: flex; flex-wrap: wrap; align-items: center; - gap: mp.$spacing-xs; - color: mp.$color-blue-50; + gap: $spacing-xs; + color: $color-blue-50; .info-icon { align-items: center; background-color: transparent; border-style: none; - color: mp.$color-light-gray-70; + color: $color-light-gray-70; cursor: pointer; display: flex; } .pencil-icon { - margin-right: mp.$spacing-xs; + margin-right: $spacing-xs; } } @@ -65,11 +65,11 @@ .account-stats { display: grid; grid-template-columns: 1fr 1fr; - gap: mp.$spacing-md; + gap: $spacing-md; text-align: center; justify-content: space-evenly; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { display: flex; } @@ -79,25 +79,25 @@ $arrowWidth: 6px; .tooltip { - @include mp.text-body-sm; + @include text-body-sm; position: absolute; - width: mp.$content-xs; - color: mp.$color-white; - max-width: calc(100% - 2 * mp.$spacing-xs); - top: calc(100% + $arrowWidth + mp.$spacing-xs); + width: $content-xs; + color: $color-white; + max-width: calc(100% - 2 * $spacing-xs); + top: calc(100% + $arrowWidth + $spacing-xs); font-weight: 400; - right: mp.$spacing-xs; - background-color: mp.$color-purple-80; - box-shadow: mp.$box-shadow-sm; + right: $spacing-xs; + background-color: $color-purple-80; + box-shadow: $box-shadow-sm; display: flex; flex-direction: column; - gap: mp.$spacing-sm; - padding: mp.$spacing-md mp.$spacing-md; - border-radius: mp.$border-radius-sm; + gap: $spacing-sm; + padding: $spacing-md $spacing-md; + border-radius: $border-radius-sm; // Prevent other .stat-wrapper elements from overlapping this tooltip: z-index: 2; - @media screen and #{mp.$mq-lg} { + @media screen and #{$mq-lg} { // The wrapper doesn't span the full width on large screens, // so limiting the tooltip to its wrapper's size makes it too thin: max-width: unset; @@ -109,11 +109,11 @@ width: 2 * $arrowWidth; position: absolute; top: -1 * $arrowWidth; - right: mp.$spacing-md; + right: $spacing-md; transform: rotate(45deg); - background-color: mp.$color-purple-80; - border-top: 1px solid mp.$color-purple-80; - border-left: 1px solid mp.$color-purple-80; + background-color: $color-purple-80; + border-top: 1px solid $color-purple-80; + border-left: 1px solid $color-purple-80; } } @@ -128,13 +128,13 @@ display: flex; flex-direction: column; align-items: center; - gap: mp.$spacing-xs; - padding: mp.$spacing-md; - background-color: mp.$color-white; - border: 1px solid mp.$color-light-gray-20; - border-radius: mp.$border-radius-md; + gap: $spacing-xs; + padding: $spacing-md; + background-color: $color-white; + border: 1px solid $color-light-gray-20; + border-radius: $border-radius-md; - @media screen and #{mp.$mq-lg} { + @media screen and #{$mq-lg} { // On small screens, stats have a border and all that, but since // Protocol doesn't have max-width media queries, we need to unset // all those for larger screens: @@ -150,35 +150,35 @@ } .label { - @include mp.text-body-sm; - color: mp.$color-dark-gray-10; + @include text-body-sm; + color: $color-dark-gray-10; } .maxed { - color: mp.$color-purple-50; + color: $color-purple-50; } .value { @include typography.text-title-xs { - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; font-weight: 700; - padding: mp.$spacing-xs 0; + padding: $spacing-xs 0; flex: 1 0 auto; display: flex; flex-direction: column; } .learn-more-wrapper { - @include mp.text-body-sm; + @include text-body-sm; font-weight: 400; .open-button { background-color: transparent; border-style: none; - border-radius: mp.$border-radius-lg; - color: mp.$color-blue-50; - padding-inline: mp.$spacing-md; - font-family: mp.$font-stack-base; + border-radius: $border-radius-lg; + color: $color-blue-50; + padding-inline: $spacing-md; + font-family: $font-stack-base; font-weight: 500; cursor: pointer; @@ -195,32 +195,32 @@ align-self: end; background-color: transparent; border-style: none; - border-radius: mp.$border-radius-sm; + border-radius: $border-radius-sm; float: right; padding: 0; cursor: pointer; &:hover { - color: mp.$color-blue-50; + color: $color-blue-50; } } .learn-more-tooltip { - padding: mp.$spacing-md; - background-color: mp.$color-white; - width: mp.$content-sm; + padding: $spacing-md; + background-color: $color-white; + width: $content-sm; // On small screens, the tooltip should span the full width, // minus the padding around `.stat` elements (i.e. the value of // `gap` for `.account-stats`): - max-width: calc(100vw - mp.$spacing-md * 2); - box-shadow: mp.$box-shadow-sm; - border-radius: mp.$border-radius-sm; + max-width: calc(100vw - $spacing-md * 2); + box-shadow: $box-shadow-sm; + border-radius: $border-radius-sm; text-align: start; p + p { // Not using `gap` on the parent becase we don't want space // between the close button and the first paragraph: - margin-top: mp.$spacing-md; + margin-top: $spacing-md; } } } @@ -238,7 +238,7 @@ right: 0; } - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { // On medium-sized screens, the `.stat` items are in a row, // so only the first element should have the tooltip aligned to its // left-hand side: @@ -253,12 +253,12 @@ } .upsell-banner { - background-color: mp.$color-blue-90; + background-color: $color-blue-90; .upsell-banner-description, .upsell-banner-header { - @include mp.font-firefox; - color: mp.$color-white; + @include font-firefox; + color: $color-white; } .upsell-banner-header { @@ -268,7 +268,7 @@ } .upsell-banner-description { - @include mp.text-body-lg; + @include text-body-lg; } .upsell-banner-wrapper { @@ -276,25 +276,25 @@ align-items: center; justify-content: center; flex-direction: column-reverse; - padding: mp.$spacing-xl 0; - gap: mp.$spacing-2xl; + padding: $spacing-xl 0; + gap: $spacing-2xl; - @media screen and #{mp.$mq-lg} { + @media screen and #{$mq-lg} { flex-direction: row; - gap: mp.$spacing-xs; + gap: $spacing-xs; } } .upsell-banner-image { - max-width: mp.$content-md; + max-width: $content-md; width: 100%; } .upsell-banner-content { - max-width: mp.$content-md; + max-width: $content-md; display: flex; - gap: mp.$spacing-lg; - padding: 0 mp.$spacing-xl; + gap: $spacing-lg; + padding: 0 $spacing-xl; flex-direction: column; align-items: flex-start; } @@ -304,14 +304,14 @@ display: flex; flex-direction: column; align-items: baseline; - gap: mp.$spacing-md; - padding-bottom: mp.$spacing-xl; + gap: $spacing-md; + padding-bottom: $spacing-xl; // Ensure that the card can always overlap elements in the profile, // even if they have z-indexes to overlap each other: isolation: isolate; - @media screen and (min-width: mp.$screen-md) { - background-color: mp.$color-light-gray-10; + @media screen and (min-width: $screen-md) { + background-color: $color-light-gray-10; } } @@ -320,58 +320,58 @@ .bottom-banner-wrapper, .no-premium-header, .header-wrapper { - max-width: mp.$content-xl; + max-width: $content-xl; width: 100%; margin: 0 auto; - padding: 0 mp.$spacing-md; + padding: 0 $spacing-md; } .banners-wrapper { - gap: mp.$spacing-lg; + gap: $spacing-lg; display: flex; flex-direction: column; } .no-premium-header { - padding-top: mp.$spacing-xl; + padding-top: $spacing-xl; } .main-wrapper { display: flex; flex-direction: column; - gap: mp.$spacing-xl; + gap: $spacing-xl; } .size-information { - padding: 0 0 mp.$spacing-lg; + padding: 0 0 $spacing-lg; } .bottom-banner { - background-color: mp.$color-white; + background-color: $color-white; width: 100%; .bottom-banner-wrapper { display: flex; flex-direction: column; justify-content: space-evenly; - gap: mp.$spacing-xl; - padding: mp.$spacing-xl; + gap: $spacing-xl; + padding: $spacing-xl; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; } } .bottom-banner-content { - max-width: mp.$screen-sm; + max-width: $screen-sm; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-evenly; - gap: mp.$spacing-md; + gap: $spacing-md; h3 { - @include mp.font-mozilla; + @include font-mozilla; @include typography.text-title-xs { font-weight: 500; } @@ -382,8 +382,8 @@ } p { - @include mp.text-body-md; - color: mp.$color-light-gray-90; + @include text-body-md; + color: $color-light-gray-90; } } } diff --git a/frontend/src/pages/accounts/settings.module.scss b/frontend/src/pages/accounts/settings.module.scss index cd1ea9255d..e2402420f1 100644 --- a/frontend/src/pages/accounts/settings.module.scss +++ b/frontend/src/pages/accounts/settings.module.scss @@ -1,4 +1,4 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../styles/tokens"; .settings-page { @@ -7,10 +7,10 @@ } .menu { - padding: mp.$spacing-lg mp.$spacing-lg 0; + padding: $spacing-lg $spacing-lg 0; h1 { - padding-bottom: mp.$spacing-lg; + padding-bottom: $spacing-lg; } ul { @@ -19,15 +19,15 @@ list-style-type: none; li { - padding: mp.$spacing-sm 0; + padding: $spacing-sm 0; } a { - @include mp.text-body-lg; + @include text-body-lg; display: flex; align-items: center; - color: mp.$color-dark-gray-50; - gap: mp.$spacing-sm; + color: $color-dark-gray-50; + gap: $spacing-sm; &:hover { text-decoration: underline; @@ -36,7 +36,7 @@ img, svg.menu-icon { // The size of text-body-lg, i.e. the same size as the containing 's font: - width: mp.remify(mp.type-scale("body-lg-size")); + width: remify(type-scale("body-lg-size")); color: tokens.$color-violet-40; } } @@ -45,20 +45,20 @@ .main { width: 100%; - padding: mp.$spacing-lg; + padding: $spacing-lg; } .banner-wrapper { - padding-bottom: mp.$spacing-xl; + padding-bottom: $spacing-xl; } -$field-gap: mp.$spacing-lg; +$field-gap: $spacing-lg; .settings-form { - @include mp.text-body-sm; - box-shadow: mp.$box-shadow-sm; - border-radius: mp.$border-radius-md; - padding: mp.$spacing-md; + @include text-body-sm; + box-shadow: $box-shadow-sm; + border-radius: $border-radius-md; + padding: $spacing-md; background-color: white; display: flex; flex-direction: column; @@ -67,10 +67,10 @@ $field-gap: mp.$spacing-lg; } .field { - border-bottom: 1px solid mp.$color-light-gray-20; + border-bottom: 1px solid $color-light-gray-20; display: flex; flex-direction: column; - gap: mp.$spacing-sm; + gap: $spacing-sm; // padding-bottom is used to have the same gap between the form field and the // bottom border, as the form field has to the bottom border of the form field // preceding it (via `.settings-form`'s `gap`). @@ -78,20 +78,20 @@ $field-gap: mp.$spacing-lg; } .field-heading { - @include mp.text-title-3xs; + @include text-title-3xs; font-weight: 400; flex-basis: 0; - min-width: mp.$layout-xl; + min-width: $layout-xl; .field-heading-icon-wrapper { display: flex; align-items: center; - gap: mp.$spacing-sm; + gap: $spacing-sm; svg { display: none; - @media screen and #{mp.$mq-sm} { + @media screen and #{$mq-sm} { display: initial; } } @@ -101,32 +101,32 @@ $field-gap: mp.$spacing-lg; .field-content { display: flex; flex-direction: column; - gap: mp.$spacing-md; + gap: $spacing-md; .field-control { display: flex; align-items: flex-start; - gap: mp.$spacing-sm; + gap: $spacing-sm; input { - margin-top: mp.$spacing-xs; + margin-top: $spacing-xs; } label { display: inline-flex; flex-direction: column; - gap: mp.$spacing-sm; + gap: $spacing-sm; } } .field-warning { display: flex; - gap: mp.$spacing-sm; + gap: $spacing-sm; align-items: flex-start; - background-color: mp.$color-light-gray-20; + background-color: $color-light-gray-20; width: 100%; - padding: mp.$spacing-md mp.$spacing-lg; - border-radius: mp.$border-radius-sm; + padding: $spacing-md $spacing-lg; + border-radius: $border-radius-sm; svg { color: tokens.$color-yellow-50; @@ -143,23 +143,23 @@ $field-gap: mp.$spacing-lg; display: flex; flex-wrap: wrap; flex-direction: row; - gap: mp.$spacing-md; + gap: $spacing-md; align-items: center; } .copy-api-key-display { - padding: mp.$spacing-sm mp.$spacing-md; + padding: $spacing-sm $spacing-md; background-color: tokens.$color-grey-05; border: 0; outline: 1px solid tokens.$color-grey-20; - border-radius: mp.$border-radius-md; + border-radius: $border-radius-md; white-space: nowrap; overflow: hidden; font-family: monospace; max-width: 200px; text-overflow: ellipsis; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { max-width: 350px; } } @@ -168,7 +168,7 @@ $field-gap: mp.$spacing-lg; display: flex; flex-wrap: wrap; align-items: center; - gap: mp.$spacing-sm; + gap: $spacing-sm; } .settings-api-key-copy { @@ -183,7 +183,7 @@ $field-gap: mp.$spacing-lg; .copy-button-wrapper { display: flex; flex-direction: row; - gap: mp.$spacing-xs; + gap: $spacing-xs; position: relative; .copy-button { @@ -196,7 +196,7 @@ $field-gap: mp.$spacing-lg; cursor: pointer; svg { - width: mp.$layout-xs; + width: $layout-xs; } &:hover { @@ -210,8 +210,8 @@ $field-gap: mp.$spacing-lg; transition: opacity 2s; background-color: tokens.$color-violet-30; color: tokens.$color-white; - border-radius: mp.$border-radius-md; - padding: 0 mp.$spacing-xs; + border-radius: $border-radius-md; + padding: 0 $spacing-xs; // On small screens, there's not enough room for the "Copied!" // notification to the right of the copy button, so it's absolutely // positioned to overlap the copy button. @@ -228,25 +228,25 @@ $field-gap: mp.$spacing-lg; transition: opacity 0s; } - @media screen and #{mp.$mq-sm} { + @media screen and #{$mq-sm} { position: static; transform: none; } } } -@media screen and #{mp.$mq-md} { +@media screen and #{$mq-md} { .settings-page { display: flex; flex-direction: row-reverse; } .settings-form { - padding: mp.$spacing-lg; + padding: $spacing-lg; } .menu { - width: mp.$content-sm; + width: $content-sm; ul { display: block; @@ -255,7 +255,7 @@ $field-gap: mp.$spacing-lg; .field { flex-direction: row; - gap: mp.$spacing-2xl; + gap: $spacing-2xl; } .field-heading { @@ -266,16 +266,16 @@ $field-gap: mp.$spacing-lg; text-align: end; } } -@media screen and #{mp.$mq-lg} { +@media screen and #{$mq-lg} { .field-heading { flex-basis: auto; // Custom percentage to accommodate tablet/laptop screens width: 33%; } } -@media screen and #{mp.$mq-xl} { +@media screen and #{$mq-xl} { .field-heading { flex-basis: auto; - width: mp.$content-sm; + width: $content-sm; } } diff --git a/frontend/src/pages/contains-tracker-warning.module.scss b/frontend/src/pages/contains-tracker-warning.module.scss index f266eb16ab..db6e29c103 100644 --- a/frontend/src/pages/contains-tracker-warning.module.scss +++ b/frontend/src/pages/contains-tracker-warning.module.scss @@ -1,22 +1,22 @@ @use "../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../styles/typography"; .contains-tracker-container { - margin: mp.$layout-sm; + margin: $layout-sm; .warning-banner-wrapper { display: flex; gap: 10px; - background-color: mp.$color-white; - padding: mp.$spacing-lg mp.$spacing-md; - border-radius: mp.$border-radius-sm; - box-shadow: mp.$box-shadow-sm; + background-color: $color-white; + padding: $spacing-lg $spacing-md; + border-radius: $border-radius-sm; + box-shadow: $box-shadow-sm; justify-content: space-between; align-items: flex-start; flex-direction: column; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; align-items: center; } @@ -25,15 +25,15 @@ a { font-size: 15px; font-weight: 600; - font-family: mp.$font-stack-firefox; - color: mp.$color-black; + font-family: $font-stack-firefox; + color: $color-black; border: none; background-color: tokens.$color-grey-10; white-space: nowrap; align-self: center; margin: 0 0 0 auto; - padding: mp.$spacing-md; - border-radius: mp.$border-radius-sm; + padding: $spacing-md; + border-radius: $border-radius-sm; } } @@ -43,7 +43,7 @@ } svg { - fill: mp.$color-yellow-50; + fill: $color-yellow-50; min-width: 28px; min-height: 28px; } @@ -51,48 +51,48 @@ h2 { font-size: 18px; font-weight: 600; - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; color: tokens.$color-grey-50; } p { font-size: 16px; font-weight: 400; - font-family: mp.$font-stack-base; + font-family: $font-stack-base; color: tokens.$color-grey-40; } } - @media screen and #{mp.$mq-md} { - max-width: mp.$content-xl; - margin: mp.$layout-md auto; - padding: 0 mp.$layout-sm; + @media screen and #{$mq-md} { + max-width: $content-xl; + margin: $layout-md auto; + padding: 0 $layout-sm; } .details-section { - gap: mp.$layout-xs; + gap: $layout-xs; display: flex; flex-direction: column; h1 { - font-family: mp.$font-stack-firefox; - border-bottom: 1px solid mp.$color-light-gray-30; - padding-bottom: mp.$spacing-xs; + font-family: $font-stack-firefox; + border-bottom: 1px solid $color-light-gray-30; + padding-bottom: $spacing-xs; } .warning-banner { - margin-top: mp.$spacing-sm; + margin-top: $spacing-sm; } } } .faq-wrapper { - background-color: mp.$color-white; + background-color: $color-white; .faq { - max-width: mp.$content-xl; + max-width: $content-xl; margin: 0 auto; - padding: 0 mp.$layout-sm; + padding: 0 $layout-sm; display: flex; flex-direction: column; @@ -101,25 +101,25 @@ flex-basis: 0; flex-grow: 0.35; - @media screen and #{mp.$mq-md} { - padding: mp.$spacing-2xl mp.$spacing-2xl 0 0; + @media screen and #{$mq-md} { + padding: $spacing-2xl $spacing-2xl 0 0; } .headline { @include typography.text-title-xs { - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; font-weight: 700; - padding: mp.$spacing-md 0; - color: mp.$color-violet-90; + padding: $spacing-md 0; + color: $color-violet-90; } - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { @include typography.text-title-2xs; } } .read-more { - color: mp.$color-blue-50; + color: $color-blue-50; font-weight: 700; text-decoration: underline; @@ -131,12 +131,12 @@ .entries { flex: 1; - padding: mp.$spacing-lg 0; + padding: $spacing-lg 0; } - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; - gap: mp.$spacing-md; + gap: $spacing-md; } } } diff --git a/frontend/src/pages/faq.module.scss b/frontend/src/pages/faq.module.scss index ce3a5f0cea..c58f9b4aca 100644 --- a/frontend/src/pages/faq.module.scss +++ b/frontend/src/pages/faq.module.scss @@ -1,12 +1,12 @@ @use "../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../styles/typography" as styles-typography; .faq-page { - background-color: mp.$color-blue-90; - color: mp.$color-white; + background-color: $color-blue-90; + color: $color-white; height: 100%; - padding: 0 mp.$spacing-lg mp.$spacing-2xl; + padding: 0 $spacing-lg $spacing-2xl; a { text-decoration: underline; @@ -17,30 +17,30 @@ } p { - padding: mp.$spacing-sm 0; + padding: $spacing-sm 0; } } .faqs-wrapper { - max-width: mp.$content-xl; + max-width: $content-xl; margin: 0 auto; - padding-top: mp.$spacing-2xl; + padding-top: $spacing-2xl; } .headline { @include styles-typography.text-title-sm { - @include mp.font-firefox; - padding-bottom: mp.$spacing-xl; + @include font-firefox; + padding-bottom: $spacing-xl; } } .faqs { - column-width: mp.$content-sm; - column-gap: mp.$spacing-2xl; + column-width: $content-sm; + column-gap: $spacing-2xl; } .faq { - margin-bottom: mp.$spacing-2xl; + margin-bottom: $spacing-2xl; break-inside: avoid; &:target { @@ -51,20 +51,20 @@ .question { @include styles-typography.text-title-2xs { - @include mp.font-firefox; - padding-bottom: mp.$spacing-sm; + @include font-firefox; + padding-bottom: $spacing-sm; } } .answer { - @include mp.text-body-md; + @include text-body-md; - color: mp.$color-light-gray-10; + color: $color-light-gray-10; margin-top: 0; li { list-style-type: initial; - margin-left: mp.$spacing-md; + margin-left: $spacing-md; } } } diff --git a/frontend/src/pages/flags.module.scss b/frontend/src/pages/flags.module.scss index a5a23b6c2c..8f6f1977ac 100644 --- a/frontend/src/pages/flags.module.scss +++ b/frontend/src/pages/flags.module.scss @@ -1,12 +1,12 @@ @use "../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .wrapper { display: flex; flex-direction: column; align-items: center; - gap: mp.$spacing-2xl; - padding: mp.$spacing-2xl; + gap: $spacing-2xl; + padding: $spacing-2xl; height: 100%; .flag-list { @@ -17,14 +17,14 @@ tbody { display: flex; flex-direction: column; - gap: mp.$spacing-sm; + gap: $spacing-sm; } tr { display: flex; - gap: mp.$spacing-xs; + gap: $spacing-xs; &.is-active td:first-of-type { - color: mp.$color-green-80; + color: $color-green-80; } &.is-non-global { @@ -54,13 +54,13 @@ .flag-form { display: flex; flex-direction: column; - gap: mp.$spacing-lg; - width: mp.$content-sm; + gap: $spacing-lg; + width: $content-sm; p { - border: 1px solid mp.$color-yellow-20; - background-color: mp.$color-yellow-05; - padding: mp.$spacing-md; + border: 1px solid $color-yellow-20; + background-color: $color-yellow-05; + padding: $spacing-md; } output { @@ -70,16 +70,16 @@ .field { display: flex; flex-direction: column; - gap: mp.$spacing-sm; + gap: $spacing-sm; label { - @include mp.text-body-md; + @include text-body-md; } input { - @include mp.text-body-md; + @include text-body-md; font-family: monospace; - padding: mp.$spacing-xs mp.$spacing-sm; + padding: $spacing-xs $spacing-sm; } } } diff --git a/frontend/src/pages/index.module.scss b/frontend/src/pages/index.module.scss index eb71859bbf..a710bf6dbc 100644 --- a/frontend/src/pages/index.module.scss +++ b/frontend/src/pages/index.module.scss @@ -1,17 +1,17 @@ @use "../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../styles/typography" as styles-typography; .hero { display: flex; flex-direction: column; - gap: mp.$spacing-2xl; - width: mp.$content-max; + gap: $spacing-2xl; + width: $content-max; max-width: 100%; margin: 0 auto; - padding: mp.$spacing-2xl mp.$spacing-lg; + padding: $spacing-2xl $spacing-lg; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; align-items: center; } @@ -25,76 +25,76 @@ display: flex; flex-direction: column; align-items: flex-start; - gap: mp.$spacing-lg; + gap: $spacing-lg; } h2 { @include styles-typography.text-title-md { - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; } } p { - max-width: calc(mp.$content-sm + mp.$layout-xl); + max-width: calc($content-sm + $layout-xl); } .cta { - margin: mp.$spacing-xl 0; - min-width: mp.$content-xs; + margin: $spacing-xl 0; + min-width: $content-xs; } .social-proof { - padding: mp.$spacing-lg 0; + padding: $spacing-lg 0; width: 100%; max-width: 55%; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { width: auto; } } .end-of-intro-pricing-hero { display: flex; - gap: mp.$spacing-lg; + gap: $spacing-lg; flex-wrap: wrap; & > div { - flex: 1 1 mp.$content-xs; + flex: 1 1 $content-xs; } } } .how-it-works-wrapper { - background-color: mp.$color-white; + background-color: $color-white; // Magic number: 64px allows us to have an even spacing between sections on pages - padding: calc(mp.$spacing-xl * 2) mp.$spacing-md; + padding: calc($spacing-xl * 2) $spacing-md; } .how-it-works { - width: mp.$content-max; + width: $content-max; max-width: 100%; margin: 0 auto; - padding: mp.$spacing-lg; + padding: $spacing-lg; h2 { @include styles-typography.text-title-sm { - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; text-align: center; - margin-bottom: mp.$layout-sm; + margin-bottom: $layout-sm; } } h2, .lead { - padding: mp.$spacing-sm 0; + padding: $spacing-sm 0; } a { - color: mp.$color-blue-50; + color: $color-blue-50; text-decoration: underline; font-weight: 700; &:hover { - color: mp.$color-blue-60; + color: $color-blue-60; text-decoration: none; } } @@ -102,31 +102,31 @@ .steps { display: flex; flex-direction: column; - gap: mp.$layout-lg; + gap: $layout-lg; list-style-type: none; - padding: mp.$spacing-2xl 0; + padding: $spacing-2xl 0; text-align: start; margin: 0; - @media screen and #{mp.$mq-md} { - gap: mp.$layout-xl; - margin: mp.$spacing-2xl mp.$layout-2xl 0 mp.$layout-2xl; + @media screen and #{$mq-md} { + gap: $layout-xl; + margin: $spacing-2xl $layout-2xl 0 $layout-2xl; } - @media screen and #{mp.$mq-lg} { + @media screen and #{$mq-lg} { flex-direction: row; margin: 0; } h3 { - @include mp.text-title-3xs; - font-family: mp.$font-stack-base; + @include text-title-3xs; + font-family: $font-stack-base; font-weight: 600; - padding-top: mp.$spacing-md; + padding-top: $spacing-md; line-height: 1.5; } p { - padding: mp.$spacing-md 0; + padding: $spacing-md 0; } .step { @@ -141,47 +141,47 @@ } .use-cases-wrapper { - background-color: mp.$color-white; + background-color: $color-white; } .use-cases { - width: mp.$content-max; + width: $content-max; max-width: 100%; margin: 0 auto; - padding: mp.$spacing-lg; + padding: $spacing-lg; } // Creates a page break effect .page-break { background: linear-gradient( 180deg, - mp.$color-light-gray-20 0%, - mp.$color-light-gray-10 45% + $color-light-gray-20 0%, + $color-light-gray-10 45% ); - height: mp.$layout-md; + height: $layout-md; } .features { - padding: mp.$layout-xs; - width: mp.$content-xl; + padding: $layout-xs; + width: $content-xl; max-width: 100%; margin: 0 auto; - @media screen and #{mp.$mq-md} { - padding: mp.$layout-sm mp.$layout-xs; + @media screen and #{$mq-md} { + padding: $layout-sm $layout-xs; } } .plans { - width: mp.$content-max; + width: $content-max; max-width: 100%; margin: 0 auto; display: flex; - gap: mp.$spacing-2xl; + gap: $spacing-2xl; flex-direction: column-reverse; align-items: center; - padding: 0 mp.$spacing-md mp.$spacing-md mp.$spacing-md; - margin-top: mp.$layout-xl; + padding: 0 $spacing-md $spacing-md $spacing-md; + margin-top: $layout-xl; &.non-premium-country { display: flex; @@ -194,13 +194,13 @@ flex-direction: column; align-items: flex-start; text-align: center; - max-width: mp.$content-md; - gap: mp.$spacing-lg; - margin-top: mp.$layout-xl; + max-width: $content-md; + gap: $spacing-lg; + margin-top: $layout-xl; h2 { @include styles-typography.text-title-sm { - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; font-weight: 500; } } @@ -208,56 +208,56 @@ .end-of-intro-pricing-countdown-and-warning { display: flex; flex-direction: column; - gap: mp.$spacing-sm; + gap: $spacing-sm; } } - @media screen and #{mp.$mq-xl} { + @media screen and #{$mq-xl} { flex-direction: row; - padding: 0 mp.$spacing-2xl mp.$spacing-2xl mp.$spacing-2xl; + padding: 0 $spacing-2xl $spacing-2xl $spacing-2xl; .plan-comparison { - padding: mp.$spacing-2xl; + padding: $spacing-2xl; } .callout { - padding: mp.$spacing-2xl; + padding: $spacing-2xl; text-align: start; } } } .faq-wrapper { - background-color: mp.$color-white; + background-color: $color-white; // Magic number: 64px allows us to have an even spacing between sections on pages - padding: calc(mp.$spacing-xl * 2) mp.$spacing-md; + padding: calc($spacing-xl * 2) $spacing-md; } .faq { - width: mp.$content-max; + width: $content-max; max-width: 100%; margin: 0 auto; - padding: mp.$spacing-lg; + padding: $spacing-lg; display: flex; flex-direction: column; .lead { flex: 1 0 0; - @media screen and #{mp.$mq-md} { - padding: 0 mp.$spacing-2xl; + @media screen and #{$mq-md} { + padding: 0 $spacing-2xl; } .headline { @include styles-typography.text-title-sm { - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; font-weight: 500; - padding: mp.$spacing-md 0; + padding: $spacing-md 0; } } .read-more { - color: mp.$color-blue-50; + color: $color-blue-50; font-weight: 700; text-decoration: underline; @@ -269,16 +269,16 @@ .entries { flex: 1 0 0; - padding-top: mp.$spacing-lg; + padding-top: $spacing-lg; - @media screen and #{mp.$mq-md} { - padding: 0 mp.$spacing-2xl; + @media screen and #{$mq-md} { + padding: 0 $spacing-2xl; } } - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; - gap: mp.$spacing-md; + gap: $spacing-md; } } @@ -286,22 +286,22 @@ width: 100%; margin: 0 auto; // Magic number: 64px allows us to have an even spacing between sections on pages - padding: calc(mp.$spacing-xl * 2) mp.$spacing-md; + padding: calc($spacing-xl * 2) $spacing-md; - @media screen and #{mp.$mq-md} { - width: mp.$content-max; + @media screen and #{$mq-md} { + width: $content-max; margin-top: 0; max-width: 100%; } } .gray-bg { - background-color: mp.$color-light-gray-10; + background-color: $color-light-gray-10; } .reviews-container { // Magic number: 64px allows us to have an even spacing between sections on pages - padding: calc(mp.$spacing-xl * 2) mp.$spacing-md; + padding: calc($spacing-xl * 2) $spacing-md; } .testimonials-wrapper { @@ -309,13 +309,13 @@ align-items: center; justify-content: center; flex-direction: row; - gap: mp.$spacing-md; - border: 0 solid mp.$color-light-gray-20; + gap: $spacing-md; + border: 0 solid $color-light-gray-20; border-top-width: 1px; border-bottom-width: 1px; p { - @include mp.text-body-lg; - font-family: mp.$font-stack-base; + @include text-body-lg; + font-family: $font-stack-base; } } diff --git a/frontend/src/pages/mock/mockSession.module.scss b/frontend/src/pages/mock/mockSession.module.scss index 12a1acbd5a..4f924dfc22 100644 --- a/frontend/src/pages/mock/mockSession.module.scss +++ b/frontend/src/pages/mock/mockSession.module.scss @@ -1,56 +1,56 @@ @use "../../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .mock-session { - padding: mp.$spacing-lg; + padding: $spacing-lg; a { - color: mp.$color-blue-50; + color: $color-blue-50; } .lead { - max-width: mp.$content-md; - padding: mp.$spacing-md 0; + max-width: $content-md; + padding: $spacing-md 0; } form { display: flex; flex-direction: column; - gap: mp.$spacing-sm; + gap: $spacing-sm; align-items: flex-start; - padding: mp.$spacing-lg; - width: mp.$content-sm; + padding: $spacing-lg; + width: $content-sm; } input, button { - padding: mp.$spacing-md; + padding: $spacing-md; } button { - border-radius: mp.$border-radius-sm; - border: 1px solid mp.$color-blue-50; - background-color: mp.$color-white; - color: mp.$color-blue-50; + border-radius: $border-radius-sm; + border: 1px solid $color-blue-50; + background-color: $color-white; + color: $color-blue-50; font-weight: 700; cursor: pointer; &:hover { - background-color: mp.$color-blue-50; - color: mp.$color-white; + background-color: $color-blue-50; + color: $color-white; } } h1 { - padding: mp.$spacing-sm 0; + padding: $spacing-sm 0; - @include mp.text-title-3xs; + @include text-title-3xs; } ul { display: flex; flex-direction: column; - gap: mp.$spacing-md; + gap: $spacing-md; list-style-type: none; } } diff --git a/frontend/src/pages/premium.module.scss b/frontend/src/pages/premium.module.scss index afe91c4fae..6286c0407f 100644 --- a/frontend/src/pages/premium.module.scss +++ b/frontend/src/pages/premium.module.scss @@ -1,22 +1,22 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../styles/tokens"; @use "../styles/typography" as styles-typography; .hero { display: flex; flex-direction: column; - gap: mp.$spacing-2xl; - width: mp.$content-max; + gap: $spacing-2xl; + width: $content-max; max-width: 100%; margin: 0 auto; - padding: mp.$spacing-lg; + padding: $spacing-lg; .hero-image { flex-basis: 0; flex-grow: 1; } - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; align-items: center; } @@ -30,76 +30,76 @@ display: flex; flex-direction: column; align-items: flex-start; - gap: mp.$spacing-lg; + gap: $spacing-lg; } h2 { @include styles-typography.text-title-md { - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; } } .social-proof { - border: 0 solid mp.$color-light-gray-20; + border: 0 solid $color-light-gray-20; border-top-width: 1px; border-bottom-width: 1px; - padding: mp.$spacing-lg 0; + padding: $spacing-lg 0; width: 100%; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { width: auto; } } .end-of-intro-pricing-hero { display: flex; - gap: mp.$spacing-lg; + gap: $spacing-lg; flex-wrap: wrap; & > div { - flex: 1 1 mp.$content-xs; + flex: 1 1 $content-xs; } } } .perks-wrapper { - padding: mp.$layout-xs; - width: mp.$content-xl; + padding: $layout-xs; + width: $content-xl; max-width: 100%; margin: 0 auto; - @media screen and #{mp.$mq-md} { - padding: mp.$layout-sm mp.$layout-xs; + @media screen and #{$mq-md} { + padding: $layout-sm $layout-xs; } } .perks { - width: mp.$content-xl; + width: $content-xl; max-width: 100%; margin: 0 auto; - padding: mp.$spacing-2xl mp.$spacing-xl; + padding: $spacing-2xl $spacing-xl; h2 { @include styles-typography.text-title-sm { - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; text-align: center; - padding: mp.$spacing-md 0; + padding: $spacing-md 0; } } .lead { - @include mp.text-body-md; + @include text-body-md; display: block; width: 75%; margin: 0 auto; - padding: mp.$spacing-md 0; + padding: $spacing-md 0; } .perk { - padding: mp.$spacing-lg 0; + padding: $spacing-lg 0; display: flex; flex-direction: column; - gap: mp.$spacing-2xl; + gap: $spacing-2xl; align-items: center; img { @@ -110,25 +110,25 @@ .pill { background-color: tokens.$color-violet-30; color: tokens.$color-white; - border-radius: mp.$border-radius-sm; - padding: mp.$spacing-xs mp.$spacing-sm; - font-family: mp.$font-stack-firefox; + border-radius: $border-radius-sm; + padding: $spacing-xs $spacing-sm; + font-family: $font-stack-firefox; font-weight: 600; text-transform: uppercase; } h3 { @include styles-typography.text-title-xs { - font-family: mp.$font-stack-firefox; - padding: mp.$spacing-sm 0; + font-family: $font-stack-firefox; + padding: $spacing-sm 0; } } p { - padding: mp.$spacing-sm 0; + padding: $spacing-sm 0; } - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; &:nth-child(even) { @@ -147,16 +147,16 @@ } .use-cases { - width: mp.$content-max; + width: $content-max; max-width: 100%; margin: 0 auto; - padding: mp.$spacing-xl; + padding: $spacing-xl; .headline { @include styles-typography.text-title-sm { - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; text-align: center; - padding: mp.$spacing-lg; + padding: $spacing-lg; } } } @@ -164,18 +164,18 @@ .plans-wrapper { background: linear-gradient( 180deg, - mp.$color-light-gray-20 0%, - mp.$color-light-gray-10 3% + $color-light-gray-20 0%, + $color-light-gray-10 3% ); } .plans { - width: mp.$content-max; + width: $content-max; max-width: 100%; margin: 0 auto; - padding: mp.$spacing-2xl; + padding: $spacing-2xl; display: flex; - gap: mp.$spacing-2xl; + gap: $spacing-2xl; flex-direction: column-reverse; align-items: center; @@ -190,11 +190,11 @@ flex-direction: column; align-items: flex-start; text-align: center; - gap: mp.$spacing-lg; + gap: $spacing-lg; h2 { @include styles-typography.text-title-md { - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; font-weight: 500; } } @@ -202,19 +202,19 @@ .end-of-intro-pricing-countdown-and-warning { display: flex; flex-direction: column; - gap: mp.$spacing-sm; + gap: $spacing-sm; } } - @media screen and #{mp.$mq-xl} { + @media screen and #{$mq-xl} { flex-direction: row; .plan-comparison { - padding: mp.$spacing-2xl; + padding: $spacing-2xl; } .callout { - padding: mp.$spacing-2xl; + padding: $spacing-2xl; text-align: start; } } @@ -223,11 +223,11 @@ .bundle-banner-section { width: 100%; margin: 0 auto; - padding: calc(mp.$spacing-2xl * 2) mp.$spacing-md; - margin-top: mp.$layout-lg; + padding: calc($spacing-2xl * 2) $spacing-md; + margin-top: $layout-lg; - @media screen and #{mp.$mq-md} { - width: mp.$content-max; + @media screen and #{$mq-md} { + width: $content-max; margin-top: 0; max-width: 100%; } diff --git a/frontend/src/pages/tracker-report.module.scss b/frontend/src/pages/tracker-report.module.scss index 93321d8c8f..f4ca015eb6 100644 --- a/frontend/src/pages/tracker-report.module.scss +++ b/frontend/src/pages/tracker-report.module.scss @@ -1,5 +1,5 @@ @use "../styles/tokens"; -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../styles/typography"; .wrapper { @@ -28,7 +28,7 @@ } .loading { - padding: mp.$spacing-xl; + padding: $spacing-xl; height: 100%; background-color: tokens.$color-grey-05; animation-name: fadein; @@ -36,7 +36,7 @@ } .load-error { - padding: mp.$spacing-xl; + padding: $spacing-xl; height: 100%; background-color: tokens.$color-grey-05; } @@ -49,18 +49,18 @@ .report { width: 100%; - max-width: mp.$content-xl; - padding: mp.$spacing-xl; + max-width: $content-xl; + padding: $spacing-xl; display: flex; flex-direction: column; - gap: mp.$spacing-md; + gap: $spacing-md; } .logo { display: flex; align-items: center; justify-content: center; - gap: mp.$spacing-xs; + gap: $spacing-xs; .logomark { max-height: 35px; @@ -72,8 +72,8 @@ h1 { @include typography.text-title-2xs { - font-family: mp.$font-stack-firefox; - padding: mp.$spacing-md 0; + font-family: $font-stack-firefox; + padding: $spacing-md 0; border-bottom: 1px solid tokens.$color-grey-20; } } @@ -81,13 +81,13 @@ .meta { display: flex; flex-direction: column; - gap: mp.$spacing-md; - padding: mp.$spacing-lg; + gap: $spacing-md; + padding: $spacing-lg; - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; - gap: mp.$spacing-2xl; - padding: mp.$spacing-lg mp.$spacing-2xl; + gap: $spacing-2xl; + padding: $spacing-lg $spacing-2xl; } dt { @@ -105,32 +105,32 @@ dd { text-overflow: ellipsis; overflow: hidden; - max-width: mp.$content-sm; + max-width: $content-sm; } } } .trackers { - background-color: mp.$color-white; - border-radius: mp.$border-radius-md; + background-color: $color-white; + border-radius: $border-radius-md; display: flex; flex-direction: column; - box-shadow: mp.$box-shadow-sm; + box-shadow: $box-shadow-sm; // We typically avoid margins because they affect the positioning of other elements, // but since box-shadow is visible below the element, the bottom margin lets // us pretend like it's part of the element: - margin-bottom: mp.$spacing-md; - padding: mp.$spacing-lg; - gap: mp.$spacing-md; + margin-bottom: $spacing-md; + padding: $spacing-lg; + gap: $spacing-md; - @media screen and #{mp.$mq-md} { - padding: mp.$spacing-lg mp.$spacing-2xl; - gap: mp.$spacing-xl; + @media screen and #{$mq-md} { + padding: $spacing-lg $spacing-2xl; + gap: $spacing-xl; } h2 { @include typography.text-title-xs { - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; font-weight: 500; } } @@ -154,9 +154,9 @@ "null count"; grid-template-columns: auto 1fr auto; align-items: center; - column-gap: mp.$spacing-md; - row-gap: mp.$spacing-xs; - padding: mp.$spacing-md 0; + column-gap: $spacing-md; + row-gap: $spacing-xs; + padding: $spacing-md 0; color: tokens.$color-grey-50; border-top: 1px solid tokens.$color-grey-10; @@ -179,7 +179,7 @@ width: 100%; } - @media screen and #{mp.$mq-sm} { + @media screen and #{$mq-sm} { grid-template-areas: "icon tracker-domain count"; .count { @@ -193,17 +193,17 @@ .confidentiality-notice { display: flex; align-items: center; - gap: mp.$spacing-md; + gap: $spacing-md; background-color: tokens.$color-grey-10; - padding: mp.$spacing-lg; - border-radius: mp.$border-radius-md; + padding: $spacing-lg; + border-radius: $border-radius-md; - @media screen and #{mp.$mq-md} { - padding: mp.$spacing-lg mp.$spacing-2xl; + @media screen and #{$mq-md} { + padding: $spacing-lg $spacing-2xl; } svg { - color: mp.$color-purple-70; + color: $color-purple-70; flex: 1 0 auto; } } @@ -211,11 +211,11 @@ .explainer { display: flex; flex-direction: column; - gap: mp.$spacing-md; - padding: mp.$spacing-lg; + gap: $spacing-md; + padding: $spacing-lg; - @media screen and #{mp.$mq-md} { - padding: mp.$spacing-lg mp.$spacing-2xl; + @media screen and #{$mq-md} { + padding: $spacing-lg $spacing-2xl; } hr { @@ -227,13 +227,13 @@ .breakage-warning { display: flex; align-items: center; - gap: mp.$spacing-md; - border-radius: mp.$border-radius-sm; - border: 2px solid mp.$color-yellow-50; - padding: mp.$spacing-lg; + gap: $spacing-md; + border-radius: $border-radius-sm; + border: 2px solid $color-yellow-50; + padding: $spacing-lg; svg { - color: mp.$color-yellow-50; + color: $color-yellow-50; flex: 1 0 auto; } } @@ -241,34 +241,34 @@ } .faq-wrapper { - background-color: mp.$color-white; + background-color: $color-white; } .faq { - width: mp.$content-max; + width: $content-max; max-width: 100%; margin: 0 auto; - padding: mp.$spacing-lg; + padding: $spacing-lg; display: flex; flex-direction: column; .lead { flex: 1 0 0; - @media screen and #{mp.$mq-md} { - padding: 0 mp.$spacing-2xl; + @media screen and #{$mq-md} { + padding: 0 $spacing-2xl; } .headline { @include typography.text-title-sm { - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; font-weight: 500; - padding: mp.$spacing-md 0; + padding: $spacing-md 0; } } .read-more { - color: mp.$color-blue-50; + color: $color-blue-50; font-weight: 500; text-decoration: underline; @@ -280,15 +280,15 @@ .entries { flex: 1 0 0; - padding-top: mp.$spacing-lg; + padding-top: $spacing-lg; - @media screen and #{mp.$mq-md} { - padding: 0 mp.$spacing-2xl; + @media screen and #{$mq-md} { + padding: 0 $spacing-2xl; } } - @media screen and #{mp.$mq-md} { + @media screen and #{$mq-md} { flex-direction: row; - gap: mp.$spacing-md; + gap: $spacing-md; } } diff --git a/frontend/src/pages/vpn-relay-welcome.module.scss b/frontend/src/pages/vpn-relay-welcome.module.scss index a3b6fbc12a..96897b65a6 100644 --- a/frontend/src/pages/vpn-relay-welcome.module.scss +++ b/frontend/src/pages/vpn-relay-welcome.module.scss @@ -1,4 +1,4 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../styles/tokens"; // TODO MPP-3946: Remove this legacy versioning comment @@ -11,15 +11,15 @@ .content-container { display: flex; flex-direction: column; - max-width: mp.$content-lg; + max-width: $content-lg; margin: 0 auto; } .content-head { display: flex; - max-width: mp.$content-lg; - gap: mp.$spacing-md; - padding: mp.$layout-xl mp.$spacing-md; + max-width: $content-lg; + gap: $spacing-md; + padding: $layout-xl $spacing-md; flex-direction: column; align-content: center; align-items: center; @@ -28,24 +28,24 @@ } .headline { - font-family: mp.$font-stack-base; + font-family: $font-stack-base; color: tokens.$color-grey-40; font-weight: 400; - @include mp.text-title-3xs; + @include text-title-3xs; } .subheadline { - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; color: tokens.$color-grey-60; font-weight: 700; - @include mp.text-title-md; + @include text-title-md; } .logo { display: flex; - gap: mp.$spacing-md; + gap: $spacing-md; justify-content: center; } @@ -54,21 +54,21 @@ flex-direction: column; justify-content: space-around; align-items: center; - gap: mp.$spacing-xl; - margin-bottom: mp.$spacing-2xl; + gap: $spacing-xl; + margin-bottom: $spacing-2xl; - @media #{mp.$mq-lg} { + @media #{$mq-lg} { flex-direction: row; background-color: tokens.$color-white; - padding: 0 mp.$spacing-2xl; - border-radius: mp.$border-radius-md; - box-shadow: mp.$box-shadow-sm; + padding: 0 $spacing-2xl; + border-radius: $border-radius-md; + box-shadow: $box-shadow-sm; } .panel-art { display: none; - @media #{mp.$mq-lg} { + @media #{$mq-lg} { display: block; } } @@ -78,29 +78,29 @@ display: flex; flex-direction: column; align-items: stretch; - gap: mp.$spacing-xl; - max-width: mp.$content-xs; - background-color: mp.$color-white; - padding: mp.$spacing-2xl; - border-radius: mp.$border-radius-md; - box-shadow: mp.$box-shadow-sm; - - @media #{mp.$mq-lg} { + gap: $spacing-xl; + max-width: $content-xs; + background-color: $color-white; + padding: $spacing-2xl; + border-radius: $border-radius-md; + box-shadow: $box-shadow-sm; + + @media #{$mq-lg} { padding: 0; border-radius: 0; box-shadow: none; } p { - max-width: mp.$content-xs; - font-family: mp.$font-stack-base; + max-width: $content-xs; + font-family: $font-stack-base; - @include mp.text-body-md; + @include text-body-md; } a { white-space: pre; font-weight: 500; - font-family: mp.$font-stack-firefox; + font-family: $font-stack-firefox; } } diff --git a/frontend/src/styles/typography.scss b/frontend/src/styles/typography.scss index 4972859a3c..cb3d5ccb5a 100644 --- a/frontend/src/styles/typography.scss +++ b/frontend/src/styles/typography.scss @@ -1,4 +1,4 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/lib" as mp; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; /* Re-declare mozilla-protocol typography: @@ -16,7 +16,7 @@ A typical mixin text-title-xs looks like: @include lib.font-size(lib.type-scale('title-2xs-size')); line-height: lib.type-scale('title-2xs-line-height'); - @media #{mp.$mq-md} { + @media #{$mq-md} { @include lib.font-size(lib.type-scale('title-xs-size')); line-height: lib.type-scale('title-xs-line-height'); } @@ -124,7 +124,7 @@ https://sass-lang.com/documentation/at-rules/mixin/#content-blocks line-height: lib.type-scale('title-2xs-line-height'); @content; - @media #{mp.$mq-md} { + @media #{$mq-md} { @include lib.font-size(lib.type-scale('title-xs-size')); line-height: lib.type-scale('title-xs-line-height'); } @@ -171,13 +171,13 @@ that they are using to override the base text-* mixin. $font-stack-mozilla; @mixin text-title-2xl { - @include mp.font-size(mp.type-scale("title-xl-size")); - line-height: mp.type-scale("title-xl-line-height"); + @include font-size(type-scale("title-xl-size")); + line-height: type-scale("title-xl-line-height"); @content; - @media #{mp.$mq-md} { - @include mp.font-size(mp.type-scale("title-2xl-size")); - line-height: mp.type-scale("title-2xl-line-height"); + @media #{$mq-md} { + @include font-size(type-scale("title-2xl-size")); + line-height: type-scale("title-2xl-line-height"); } } @@ -185,46 +185,46 @@ that they are using to override the base text-* mixin. // @mixin text-title-lg is not used by Relay @mixin text-title-md { - @include mp.font-size(mp.type-scale("title-sm-size")); - line-height: mp.type-scale("title-sm-line-height"); + @include font-size(type-scale("title-sm-size")); + line-height: type-scale("title-sm-line-height"); @content; - @media #{mp.$mq-md} { - @include mp.font-size(mp.type-scale("title-md-size")); - line-height: mp.type-scale("title-md-line-height"); + @media #{$mq-md} { + @include font-size(type-scale("title-md-size")); + line-height: type-scale("title-md-line-height"); } } @mixin text-title-sm { - @include mp.font-size(mp.type-scale("title-xs-size")); - line-height: mp.type-scale("title-xs-line-height"); + @include font-size(type-scale("title-xs-size")); + line-height: type-scale("title-xs-line-height"); @content; - @media #{mp.$mq-md} { - @include mp.font-size(mp.type-scale("title-sm-size")); - line-height: mp.type-scale("title-sm-line-height"); + @media #{$mq-md} { + @include font-size(type-scale("title-sm-size")); + line-height: type-scale("title-sm-line-height"); } } @mixin text-title-xs { - @include mp.font-size(mp.type-scale("title-2xs-size")); - line-height: mp.type-scale("title-2xs-line-height"); + @include font-size(type-scale("title-2xs-size")); + line-height: type-scale("title-2xs-line-height"); @content; - @media #{mp.$mq-md} { - @include mp.font-size(mp.type-scale("title-xs-size")); - line-height: mp.type-scale("title-xs-line-height"); + @media #{$mq-md} { + @include font-size(type-scale("title-xs-size")); + line-height: type-scale("title-xs-line-height"); } } @mixin text-title-2xs { - @include mp.font-size(mp.type-scale("title-3xs-size")); - line-height: mp.type-scale("title-3xs-line-height"); + @include font-size(type-scale("title-3xs-size")); + line-height: type-scale("title-3xs-line-height"); @content; - @media #{mp.$mq-md} { - @include mp.font-size(mp.type-scale("title-2xs-size")); - line-height: mp.type-scale("title-2xs-line-height"); + @media #{$mq-md} { + @include font-size(type-scale("title-2xs-size")); + line-height: type-scale("title-2xs-line-height"); } } From 711fcc2598718032a490635ef81f6eab45f7bfe4 Mon Sep 17 00:00:00 2001 From: John Whitlock Date: Tue, 5 Nov 2024 16:19:11 -0600 Subject: [PATCH 05/13] Use t for styles/typography --- .../dashboard/EmailForwardingModal.module.scss | 4 ++-- .../components/dashboard/FreeOnboarding.module.scss | 6 +++--- .../src/components/dashboard/Onboarding.module.scss | 4 ++-- .../dashboard/PremiumOnboarding.module.scss | 6 +++--- .../components/dashboard/SubdomainPicker.module.scss | 4 ++-- .../subdomain/ConfirmationModal.module.scss | 4 ++-- .../src/components/landing/BundleBanner.module.scss | 10 +++++----- .../landing/HighlightedFeatures.module.scss | 4 ++-- .../src/components/landing/PlanMatrix.module.scss | 6 +++--- frontend/src/components/landing/Reviews.module.scss | 6 +++--- .../layout/navigation/MobileNavigation.module.scss | 4 ++-- .../phones/dashboard/PhoneWelcomeView.module.scss | 4 ++-- .../phones/onboarding/PurchasePhonesPlan.module.scss | 6 +++--- .../phones/onboarding/RealPhoneSetup.module.scss | 6 +++--- .../phones/onboarding/RelayNumberPicker.module.scss | 6 +++--- .../src/components/waitlist/WaitlistPage.module.scss | 4 ++-- frontend/src/pages/faq.module.scss | 6 +++--- frontend/src/pages/index.module.scss | 10 +++++----- frontend/src/pages/premium.module.scss | 12 ++++++------ 19 files changed, 56 insertions(+), 56 deletions(-) diff --git a/frontend/src/components/dashboard/EmailForwardingModal.module.scss b/frontend/src/components/dashboard/EmailForwardingModal.module.scss index eae6e805bb..528f6e363a 100644 --- a/frontend/src/components/dashboard/EmailForwardingModal.module.scss +++ b/frontend/src/components/dashboard/EmailForwardingModal.module.scss @@ -1,6 +1,6 @@ @use "../../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../../styles/typography" as styles-typography; +@use "../../styles/typography" as t; .underlay { position: fixed; @@ -65,7 +65,7 @@ } .headline { - @include styles-typography.text-title-xs { + @include t.text-title-xs { display: flex; align-items: center; justify-content: center; diff --git a/frontend/src/components/dashboard/FreeOnboarding.module.scss b/frontend/src/components/dashboard/FreeOnboarding.module.scss index 9c40d65c15..05b9b41b4f 100644 --- a/frontend/src/components/dashboard/FreeOnboarding.module.scss +++ b/frontend/src/components/dashboard/FreeOnboarding.module.scss @@ -1,7 +1,7 @@ @use "../../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; -@use "../../styles/typography" as styles-typography; +@use "../../styles/typography" as t; .onboarding { display: flex; @@ -177,7 +177,7 @@ .domain-example { @include font-firefox; - @include styles-typography.text-title-2xs { + @include t.text-title-2xs { color: $color-light-gray-90; display: inline-block; padding: $spacing-md 0; @@ -275,7 +275,7 @@ gap: $spacing-xs; h1 { - @include styles-typography.text-title-sm { + @include t.text-title-sm { font-weight: 700; font-family: $font-stack-firefox; color: $color-purple-50; diff --git a/frontend/src/components/dashboard/Onboarding.module.scss b/frontend/src/components/dashboard/Onboarding.module.scss index a364608ddb..e4d34919dd 100644 --- a/frontend/src/components/dashboard/Onboarding.module.scss +++ b/frontend/src/components/dashboard/Onboarding.module.scss @@ -1,6 +1,6 @@ @use "../../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../../styles/typography" as styles-typography; +@use "../../styles/typography" as t; .wrapper { padding: $spacing-lg; @@ -8,7 +8,7 @@ border: 1px solid $color-light-gray-40; h2 { - @include styles-typography.text-title-2xs { + @include t.text-title-2xs { @include font-firefox; padding: $spacing-sm 0; } diff --git a/frontend/src/components/dashboard/PremiumOnboarding.module.scss b/frontend/src/components/dashboard/PremiumOnboarding.module.scss index 53f6ca66e3..f42058c503 100644 --- a/frontend/src/components/dashboard/PremiumOnboarding.module.scss +++ b/frontend/src/components/dashboard/PremiumOnboarding.module.scss @@ -1,7 +1,7 @@ @use "../../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; -@use "../../styles/typography" as styles-typography; +@use "../../styles/typography" as t; .onboarding { display: flex; @@ -45,7 +45,7 @@ } h2 { - @include styles-typography.text-title-sm { + @include t.text-title-sm { font-family: $font-stack-firefox; color: $color-purple-50; text-align: center; @@ -135,7 +135,7 @@ .domain-example { @include font-firefox; - @include styles-typography.text-title-2xs { + @include t.text-title-2xs { color: $color-light-gray-90; display: inline-block; padding: $spacing-md 0; diff --git a/frontend/src/components/dashboard/SubdomainPicker.module.scss b/frontend/src/components/dashboard/SubdomainPicker.module.scss index 45fe656a1d..1a8edbf27a 100644 --- a/frontend/src/components/dashboard/SubdomainPicker.module.scss +++ b/frontend/src/components/dashboard/SubdomainPicker.module.scss @@ -1,7 +1,7 @@ @use "../../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; -@use "../../styles/typography" as styles-typography; +@use "../../styles/typography" as t; .card { border-radius: $border-radius-md; @@ -63,7 +63,7 @@ } h2 { - @include styles-typography.text-title-2xs { + @include t.text-title-2xs { padding: $spacing-sm 0; } } diff --git a/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss b/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss index 5af725b57e..2246901252 100644 --- a/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss +++ b/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss @@ -1,6 +1,6 @@ @use "../../../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../../../styles/typography" as styles-typography; +@use "../../../styles/typography" as t; .underlay { position: fixed; @@ -52,7 +52,7 @@ font-weight: 400; .subdomain { - @include styles-typography.text-title-xs { + @include t.text-title-xs { display: block; font-weight: 700; margin-bottom: $spacing-sm; diff --git a/frontend/src/components/landing/BundleBanner.module.scss b/frontend/src/components/landing/BundleBanner.module.scss index 3c8eb618d7..b09df1abb1 100644 --- a/frontend/src/components/landing/BundleBanner.module.scss +++ b/frontend/src/components/landing/BundleBanner.module.scss @@ -1,6 +1,6 @@ @use "../../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../../styles/typography" as styles-typography; +@use "../../styles/typography" as t; .bundle-banner-wrapper { display: grid; @@ -195,24 +195,24 @@ } h2 { - @include styles-typography.text-title-sm { + @include t.text-title-sm { @include font-firefox; font-weight: 700; } @media #{$mq-lg} { - @include styles-typography.text-title-xs; + @include t.text-title-xs; } } h3 { - @include styles-typography.text-title-xs { + @include t.text-title-xs { @include font-firefox; font-weight: 500; } @media #{$mq-lg} { - @include styles-typography.text-title-2xs; + @include t.text-title-2xs; } } diff --git a/frontend/src/components/landing/HighlightedFeatures.module.scss b/frontend/src/components/landing/HighlightedFeatures.module.scss index 20edabc345..6dfcf2f5a8 100644 --- a/frontend/src/components/landing/HighlightedFeatures.module.scss +++ b/frontend/src/components/landing/HighlightedFeatures.module.scss @@ -1,6 +1,6 @@ @use "../../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../../styles/typography" as styles-typography; +@use "../../styles/typography" as t; .highlighted-feature-wrapper { display: flex; @@ -65,7 +65,7 @@ h2 { @include font-firefox; - @include styles-typography.text-title-sm { + @include t.text-title-sm { justify-content: center; width: 100%; } diff --git a/frontend/src/components/landing/PlanMatrix.module.scss b/frontend/src/components/landing/PlanMatrix.module.scss index eae4cf447b..4b7a5473fc 100644 --- a/frontend/src/components/landing/PlanMatrix.module.scss +++ b/frontend/src/components/landing/PlanMatrix.module.scss @@ -1,6 +1,6 @@ @use "../../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../../styles/typography" as styles-typography; +@use "../../styles/typography" as t; .wrapper { width: 100%; @@ -10,7 +10,7 @@ gap: $spacing-md; .bundle-offer-heading { - @include styles-typography.text-title-xs { + @include t.text-title-xs { background-image: linear-gradient( to right, $color-violet-30, @@ -258,7 +258,7 @@ table.desktop { padding: $spacing-md; h3 { - @include styles-typography.text-title-2xs { + @include t.text-title-2xs { font-weight: 600; text-align: center; } diff --git a/frontend/src/components/landing/Reviews.module.scss b/frontend/src/components/landing/Reviews.module.scss index 07967bd7c3..41dd73aaac 100644 --- a/frontend/src/components/landing/Reviews.module.scss +++ b/frontend/src/components/landing/Reviews.module.scss @@ -1,6 +1,6 @@ @use "../../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../../styles/typography" as styles-typography; +@use "../../styles/typography" as t; .reviews { display: flex; @@ -53,7 +53,7 @@ } .logo-text { - @include styles-typography.text-title-xs { + @include t.text-title-xs { font-weight: 600; text-transform: uppercase; } @@ -77,7 +77,7 @@ .rating { .title { - @include styles-typography.text-title-2xl { + @include t.text-title-2xl { font-family: $font-stack-firefox; font-weight: 600; } diff --git a/frontend/src/components/layout/navigation/MobileNavigation.module.scss b/frontend/src/components/layout/navigation/MobileNavigation.module.scss index a6d497ca95..726cb876d6 100644 --- a/frontend/src/components/layout/navigation/MobileNavigation.module.scss +++ b/frontend/src/components/layout/navigation/MobileNavigation.module.scss @@ -1,6 +1,6 @@ @use "../../../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../../../styles/typography" as styles-typography; +@use "../../../styles/typography" as t; .mobile-menu { width: 100%; @@ -82,7 +82,7 @@ .menu-item { display: flex; - @include styles-typography.text-display-xxs { + @include t.text-display-xxs { font-family: $font-stack-firefox; border-bottom: 2px solid $color-light-gray-20; } diff --git a/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss b/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss index 61e367b6fe..e0a62774da 100644 --- a/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss +++ b/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss @@ -1,6 +1,6 @@ @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../../styles/tokens"; -@use "../../../styles/typography" as styles-typography; +@use "../../../styles/typography" as t; .main-wrapper { display: flex; @@ -20,7 +20,7 @@ text-align: center; h1 { - @include styles-typography.text-title-xs { + @include t.text-title-xs { @include font-firefox; font-weight: 600; } diff --git a/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss b/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss index 667e670ced..acabf9318c 100644 --- a/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss +++ b/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss @@ -1,6 +1,6 @@ @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../../styles/tokens"; -@use "../../../styles/typography" as styles-typography; +@use "../../../styles/typography" as t; .wrapper { display: flex; @@ -14,7 +14,7 @@ overflow-x: hidden; h2 { - @include styles-typography.text-title-xs { + @include t.text-title-xs { font-family: $font-stack-firefox; text-align: center; } @@ -119,7 +119,7 @@ gap: $spacing-md; .price { - @include styles-typography.text-title-2xs { + @include t.text-title-2xs { padding-top: $spacing-sm; display: block; font-weight: 700; diff --git a/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss b/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss index 842cb92645..1f434bb6ec 100644 --- a/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss +++ b/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss @@ -1,7 +1,7 @@ @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; @use "../../../styles/tokens"; -@use "../../../styles/typography" as styles-typography; +@use "../../../styles/typography" as t; .step { flex: 1 0 auto; @@ -21,7 +21,7 @@ } h2 { - @include styles-typography.text-title-xs { + @include t.text-title-xs { font-family: $font-stack-firefox; text-align: center; } @@ -88,7 +88,7 @@ } span { - @include styles-typography.text-title-2xs { + @include t.text-title-2xs { padding-top: $spacing-sm; display: block; font-weight: 700; diff --git a/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss b/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss index 2afac72c80..7994c2f007 100644 --- a/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss +++ b/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss @@ -1,7 +1,7 @@ @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; @use "../../../styles/tokens"; -@use "../../../styles/typography" as styles-typography; +@use "../../../styles/typography" as t; .step, .controls { @@ -35,7 +35,7 @@ } h2 { - @include styles-typography.text-title-xs { + @include t.text-title-xs { font-family: $font-stack-firefox; text-align: center; } @@ -102,7 +102,7 @@ } span { - @include styles-typography.text-title-2xs { + @include t.text-title-2xs { padding-top: $spacing-sm; display: block; font-weight: 700; diff --git a/frontend/src/components/waitlist/WaitlistPage.module.scss b/frontend/src/components/waitlist/WaitlistPage.module.scss index bdce439326..8f538eb277 100644 --- a/frontend/src/components/waitlist/WaitlistPage.module.scss +++ b/frontend/src/components/waitlist/WaitlistPage.module.scss @@ -1,7 +1,7 @@ @use "~@mozilla-protocol/core/protocol/css/includes/tokens/dist/index" as dist; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; -@use "../../styles/typography" as styles-typography; +@use "../../styles/typography" as t; .wrapper { display: flex; @@ -79,7 +79,7 @@ } .heading { - @include styles-typography.text-title-sm { + @include t.text-title-sm { font-family: $font-stack-firefox; align-self: center; text-align: center; diff --git a/frontend/src/pages/faq.module.scss b/frontend/src/pages/faq.module.scss index c58f9b4aca..98f2a29f78 100644 --- a/frontend/src/pages/faq.module.scss +++ b/frontend/src/pages/faq.module.scss @@ -1,6 +1,6 @@ @use "../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../styles/typography" as styles-typography; +@use "../styles/typography" as t; .faq-page { background-color: $color-blue-90; @@ -28,7 +28,7 @@ } .headline { - @include styles-typography.text-title-sm { + @include t.text-title-sm { @include font-firefox; padding-bottom: $spacing-xl; } @@ -50,7 +50,7 @@ } .question { - @include styles-typography.text-title-2xs { + @include t.text-title-2xs { @include font-firefox; padding-bottom: $spacing-sm; } diff --git a/frontend/src/pages/index.module.scss b/frontend/src/pages/index.module.scss index a710bf6dbc..282bd7527b 100644 --- a/frontend/src/pages/index.module.scss +++ b/frontend/src/pages/index.module.scss @@ -1,6 +1,6 @@ @use "../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../styles/typography" as styles-typography; +@use "../styles/typography" as t; .hero { display: flex; @@ -29,7 +29,7 @@ } h2 { - @include styles-typography.text-title-md { + @include t.text-title-md { font-family: $font-stack-firefox; } } @@ -76,7 +76,7 @@ padding: $spacing-lg; h2 { - @include styles-typography.text-title-sm { + @include t.text-title-sm { font-family: $font-stack-firefox; text-align: center; margin-bottom: $layout-sm; @@ -199,7 +199,7 @@ margin-top: $layout-xl; h2 { - @include styles-typography.text-title-sm { + @include t.text-title-sm { font-family: $font-stack-firefox; font-weight: 500; } @@ -249,7 +249,7 @@ } .headline { - @include styles-typography.text-title-sm { + @include t.text-title-sm { font-family: $font-stack-firefox; font-weight: 500; padding: $spacing-md 0; diff --git a/frontend/src/pages/premium.module.scss b/frontend/src/pages/premium.module.scss index 6286c0407f..28facbfb66 100644 --- a/frontend/src/pages/premium.module.scss +++ b/frontend/src/pages/premium.module.scss @@ -1,6 +1,6 @@ @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../styles/tokens"; -@use "../styles/typography" as styles-typography; +@use "../styles/typography" as t; .hero { display: flex; @@ -34,7 +34,7 @@ } h2 { - @include styles-typography.text-title-md { + @include t.text-title-md { font-family: $font-stack-firefox; } } @@ -80,7 +80,7 @@ padding: $spacing-2xl $spacing-xl; h2 { - @include styles-typography.text-title-sm { + @include t.text-title-sm { font-family: $font-stack-firefox; text-align: center; padding: $spacing-md 0; @@ -118,7 +118,7 @@ } h3 { - @include styles-typography.text-title-xs { + @include t.text-title-xs { font-family: $font-stack-firefox; padding: $spacing-sm 0; } @@ -153,7 +153,7 @@ padding: $spacing-xl; .headline { - @include styles-typography.text-title-sm { + @include t.text-title-sm { font-family: $font-stack-firefox; text-align: center; padding: $spacing-lg; @@ -193,7 +193,7 @@ gap: $spacing-lg; h2 { - @include styles-typography.text-title-md { + @include t.text-title-md { font-family: $font-stack-firefox; font-weight: 500; } From 920bf6a29910c3b5bad6087790863ab0f32dfc7e Mon Sep 17 00:00:00 2001 From: John Whitlock Date: Tue, 5 Nov 2024 16:48:46 -0600 Subject: [PATCH 06/13] Standardize at-use urls --- .../dashboard/ProfileBanners.module.scss | 4 +-- .../aliases/AliasGenerationButton.module.scss | 26 +++++++++---------- .../aliases/BlockLevelSlider.module.scss | 1 - .../aliases/CategoryFilter.module.scss | 20 +++++++------- .../dashboard/aliases/LabelEditor.module.scss | 24 ++++++++--------- .../components/landing/DemoPhone.module.scss | 10 +++---- .../layout/navigation/Navigation.module.scss | 22 ++++++++-------- .../navigation/SignInButton.module.scss | 6 ++--- .../InterviewRecruitment.module.scss | 11 ++++---- .../layout/topmessage/PhoneSurvey.module.scss | 11 ++++---- .../waitlist/WaitlistPage.module.scss | 1 - frontend/src/hooks/mediaQuery.module.scss | 13 +++++----- .../src/pages/accounts/profile.module.scss | 2 -- frontend/src/styles/globals.scss | 6 ++--- frontend/src/styles/tokens.scss | 2 -- 15 files changed, 75 insertions(+), 84 deletions(-) diff --git a/frontend/src/components/dashboard/ProfileBanners.module.scss b/frontend/src/components/dashboard/ProfileBanners.module.scss index f5cb09d0cd..600e4f9909 100644 --- a/frontend/src/components/dashboard/ProfileBanners.module.scss +++ b/frontend/src/components/dashboard/ProfileBanners.module.scss @@ -1,10 +1,10 @@ @use "../../styles/tokens"; -@use "../../../../node_modules/@mozilla-protocol/core/protocol/css/includes/tokens/dist"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .profile-banners { display: flex; flex-direction: column; - gap: dist.$spacing-xl; + gap: $spacing-xl; } .bundle-logo { diff --git a/frontend/src/components/dashboard/aliases/AliasGenerationButton.module.scss b/frontend/src/components/dashboard/aliases/AliasGenerationButton.module.scss index cd96b6b964..4e6e5a1c12 100644 --- a/frontend/src/components/dashboard/aliases/AliasGenerationButton.module.scss +++ b/frontend/src/components/dashboard/aliases/AliasGenerationButton.module.scss @@ -1,5 +1,5 @@ @use "../../../styles/tokens"; -@use "../../../../../node_modules/@mozilla-protocol/core/protocol/css/includes/tokens/dist"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .button-wrapper { position: relative; @@ -7,36 +7,36 @@ .popup { position: absolute; - margin-top: dist.$spacing-sm; + margin-top: $spacing-sm; // Move to the left by the amount of horizontal padding in .menu-item-wrapper: - margin-left: -1 * dist.$spacing-md; + margin-left: -1 * $spacing-md; // Align the popup to the edge of the screen at narrow widths inset-inline-end: 0; background-color: tokens.$color-white; - border-radius: dist.$border-radius-md; - box-shadow: dist.$box-shadow-md; + border-radius: $border-radius-md; + box-shadow: $box-shadow-md; list-style-type: none; - min-width: dist.$content-xs; + min-width: $content-xs; // Overlap the stats with position: relative in the alias cards: z-index: 4; - @media screen and #{dist.$mq-xl} { + @media screen and #{$mq-xl} { inset-inline-end: auto; } .menu-item-wrapper { - font-family: dist.$font-stack-firefox; + font-family: $font-stack-firefox; color: tokens.$color-blue-50; - padding: dist.$spacing-md dist.$spacing-lg; + padding: $spacing-md $spacing-lg; &:first-child { - border-top-left-radius: dist.$border-radius-md; - border-top-right-radius: dist.$border-radius-md; + border-top-left-radius: $border-radius-md; + border-top-right-radius: $border-radius-md; } &:last-child { - border-bottom-left-radius: dist.$border-radius-md; - border-bottom-right-radius: dist.$border-radius-md; + border-bottom-left-radius: $border-radius-md; + border-bottom-right-radius: $border-radius-md; } &:hover { diff --git a/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss b/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss index 30b89ebecd..7b4825dbd6 100644 --- a/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss +++ b/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss @@ -1,4 +1,3 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/tokens/dist/index" as dist; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; $stopLabelHeight: 2rem; diff --git a/frontend/src/components/dashboard/aliases/CategoryFilter.module.scss b/frontend/src/components/dashboard/aliases/CategoryFilter.module.scss index 6a360fd42b..485fafbe36 100644 --- a/frontend/src/components/dashboard/aliases/CategoryFilter.module.scss +++ b/frontend/src/components/dashboard/aliases/CategoryFilter.module.scss @@ -1,16 +1,16 @@ @use "../../../styles/tokens"; -@use "../../../../../node_modules/@mozilla-protocol/core/protocol/css/includes/tokens/dist"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .filter-button { background-color: transparent; border-radius: 100%; border-style: none; - padding: dist.$spacing-sm; + padding: $spacing-sm; cursor: pointer; display: flex; align-items: center; justify-content: center; - color: dist.$color-dark-gray-50; + color: $color-dark-gray-50; &:hover { background-color: tokens.$color-white; @@ -19,10 +19,10 @@ } .filter-menu { - box-shadow: dist.$box-shadow-sm; + box-shadow: $box-shadow-sm; background-color: tokens.$color-white; - border-radius: dist.$border-radius-md; - font-family: dist.$font-stack-firefox; + border-radius: $border-radius-md; + font-family: $font-stack-firefox; overflow-y: auto; .filter-form { display: flex; @@ -30,21 +30,21 @@ label, .buttons { - padding: dist.$spacing-md; + padding: $spacing-md; } label { - border-bottom: 1px solid dist.$color-light-gray-20; + border-bottom: 1px solid $color-light-gray-20; input { - margin-right: dist.$spacing-sm; + margin-right: $spacing-sm; } } .buttons { display: flex; flex-direction: column-reverse; - gap: dist.$spacing-sm; + gap: $spacing-sm; } } } diff --git a/frontend/src/components/dashboard/aliases/LabelEditor.module.scss b/frontend/src/components/dashboard/aliases/LabelEditor.module.scss index 183e9a0fa6..b3cec47982 100644 --- a/frontend/src/components/dashboard/aliases/LabelEditor.module.scss +++ b/frontend/src/components/dashboard/aliases/LabelEditor.module.scss @@ -1,36 +1,36 @@ @use "../../../styles/tokens"; -@use "../../../../../node_modules/@mozilla-protocol/core/protocol/css/includes/tokens/dist"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .label-form { position: relative; } .label-input { - font-family: dist.$font-stack-firefox; + font-family: $font-stack-firefox; background-color: transparent; background-repeat: no-repeat; - background-position: calc(100% - dist.$spacing-xs); + background-position: calc(100% - $spacing-xs); border-color: transparent; - border-radius: dist.$border-radius-sm; - padding: dist.$spacing-xs dist.$spacing-sm; + border-radius: $border-radius-sm; + padding: $spacing-xs $spacing-sm; // The pencil icon is 16px wide - padding-inline-end: calc(dist.$spacing-sm + 16px); + padding-inline-end: calc($spacing-sm + 16px); @media screen and (pointer: coarse) { // On touch screens, the pencil is always visible and left-aligned, to be // flush with the placeholder, because the user can't discover that it's // editable through hovering: background-image: url("/icons/edit.svg"); - background-position: dist.$spacing-xs; - padding-inline-end: dist.$spacing-sm; + background-position: $spacing-xs; + padding-inline-end: $spacing-sm; // The pencil icon is 16px wide - padding-inline-start: calc(dist.$spacing-sm + 16px); + padding-inline-start: calc($spacing-sm + 16px); } &:hover, &:focus { background-image: url("/icons/edit.svg"); - background-color: dist.$color-light-gray-20; + background-color: $color-light-gray-20; } } @@ -41,9 +41,9 @@ opacity: 0; background-color: tokens.$color-green-60; color: tokens.$color-white; - border-radius: dist.$border-radius-sm; + border-radius: $border-radius-sm; transition: opacity 200ms; - padding: dist.$spacing-xs; + padding: $spacing-xs; // The .copy-button-wrapper is positioned as `relative` as well, // leading it to overlap this confirmation message. // Thus, this z-index makes this message overlap that. diff --git a/frontend/src/components/landing/DemoPhone.module.scss b/frontend/src/components/landing/DemoPhone.module.scss index 30468b719b..9d70f3ecdc 100644 --- a/frontend/src/components/landing/DemoPhone.module.scss +++ b/frontend/src/components/landing/DemoPhone.module.scss @@ -1,18 +1,18 @@ @use "../../styles/tokens"; -@use "../../../../node_modules/@mozilla-protocol/core/protocol/css/includes/tokens/dist"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .container { position: relative; - border-radius: dist.$border-radius-lg; + border-radius: $border-radius-lg; text-align: center; // This leaves some space below the phone on mobile, and is based on the rough // size of the phone image on small screens: height: 650px; - @media screen and #{dist.$mq-lg} { + @media screen and #{$mq-lg} { width: 400px; } - @media screen and #{dist.$mq-xl} { + @media screen and #{$mq-xl} { width: 550px; } @@ -32,7 +32,7 @@ &.foreground { display: none; - @media screen and #{dist.$mq-md} { + @media screen and #{$mq-md} { display: inline-block; } } diff --git a/frontend/src/components/layout/navigation/Navigation.module.scss b/frontend/src/components/layout/navigation/Navigation.module.scss index 3c5ef269c7..8fe1509625 100644 --- a/frontend/src/components/layout/navigation/Navigation.module.scss +++ b/frontend/src/components/layout/navigation/Navigation.module.scss @@ -1,17 +1,17 @@ @use "../../../styles/tokens"; -@use "../../../../../node_modules/@mozilla-protocol/core/protocol/css/includes/tokens/dist"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .site-nav { display: flex; align-items: center; justify-content: flex-end; width: 100%; - padding: 0 dist.$spacing-md; - gap: dist.$spacing-md; + padding: 0 $spacing-md; + gap: $spacing-md; - @media screen and (min-width: dist.$content-xl) { - padding: 0 dist.$spacing-xl; - gap: dist.$spacing-lg; + @media screen and (min-width: $content-xl) { + padding: 0 $spacing-xl; + gap: $spacing-lg; } } @@ -20,8 +20,8 @@ align-items: center; justify-content: center; position: relative; - font-family: dist.$font-stack-firefox; - min-width: dist.$spacing-2xl + dist.$spacing-lg; + font-family: $font-stack-firefox; + min-width: $spacing-2xl + $spacing-lg; color: inherit; &.is-active { @@ -49,19 +49,19 @@ // webkit adds a padding-right: 1em to button elements padding: 0; - @media screen and #{dist.$mq-md} { + @media screen and #{$mq-md} { display: none; } } .hidden-mobile { - @media screen and (max-width: dist.$screen-md) { + @media screen and (max-width: $screen-md) { display: none; } } .hidden-desktop { - @media screen and (min-width: dist.$screen-md) { + @media screen and (min-width: $screen-md) { display: none; } } diff --git a/frontend/src/components/layout/navigation/SignInButton.module.scss b/frontend/src/components/layout/navigation/SignInButton.module.scss index 5e79e0d573..3b49327e3a 100644 --- a/frontend/src/components/layout/navigation/SignInButton.module.scss +++ b/frontend/src/components/layout/navigation/SignInButton.module.scss @@ -1,12 +1,12 @@ @use "../../../styles/tokens"; -@use "../../../../../node_modules/@mozilla-protocol/core/protocol/css/includes/tokens/dist"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .sign-in-button { // We're using CSS's `currentColor` here because the colour // is different in the light (Premium) and dark (regular) themes: border: 2px solid currentColor; - border-radius: dist.$border-radius-sm; - padding: dist.$spacing-xs dist.$spacing-md; + border-radius: $border-radius-sm; + padding: $spacing-xs $spacing-md; &:focus { color: tokens.$color-blue-30; diff --git a/frontend/src/components/layout/topmessage/InterviewRecruitment.module.scss b/frontend/src/components/layout/topmessage/InterviewRecruitment.module.scss index a888a9dc2d..149c1e738e 100644 --- a/frontend/src/components/layout/topmessage/InterviewRecruitment.module.scss +++ b/frontend/src/components/layout/topmessage/InterviewRecruitment.module.scss @@ -1,5 +1,5 @@ @use "../../../styles/tokens"; -@use "../../../../../node_modules/@mozilla-protocol/core/protocol/css/includes/tokens/dist"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; $dismissButtonWidth: 30px; @@ -8,9 +8,8 @@ $dismissButtonWidth: 30px; flex-direction: column; align-items: center; justify-content: space-around; - gap: dist.$spacing-sm; - padding: dist.$spacing-md - (dist.$spacing-sm + $dismissButtonWidth + dist.$spacing-md); + gap: $spacing-sm; + padding: $spacing-md ($spacing-sm + $dismissButtonWidth + $spacing-md); background-color: tokens.$color-purple-90; color: tokens.$color-white; position: relative; @@ -20,7 +19,7 @@ $dismissButtonWidth: 30px; .dismiss-button { position: absolute; - right: dist.$spacing-md; + right: $spacing-md; background-color: transparent; border-style: none; color: tokens.$color-white; @@ -29,7 +28,7 @@ $dismissButtonWidth: 30px; display: flex; align-items: center; justify-content: center; - border-radius: dist.$border-radius-sm; + border-radius: $border-radius-sm; cursor: pointer; padding: 0; diff --git a/frontend/src/components/layout/topmessage/PhoneSurvey.module.scss b/frontend/src/components/layout/topmessage/PhoneSurvey.module.scss index a888a9dc2d..149c1e738e 100644 --- a/frontend/src/components/layout/topmessage/PhoneSurvey.module.scss +++ b/frontend/src/components/layout/topmessage/PhoneSurvey.module.scss @@ -1,5 +1,5 @@ @use "../../../styles/tokens"; -@use "../../../../../node_modules/@mozilla-protocol/core/protocol/css/includes/tokens/dist"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; $dismissButtonWidth: 30px; @@ -8,9 +8,8 @@ $dismissButtonWidth: 30px; flex-direction: column; align-items: center; justify-content: space-around; - gap: dist.$spacing-sm; - padding: dist.$spacing-md - (dist.$spacing-sm + $dismissButtonWidth + dist.$spacing-md); + gap: $spacing-sm; + padding: $spacing-md ($spacing-sm + $dismissButtonWidth + $spacing-md); background-color: tokens.$color-purple-90; color: tokens.$color-white; position: relative; @@ -20,7 +19,7 @@ $dismissButtonWidth: 30px; .dismiss-button { position: absolute; - right: dist.$spacing-md; + right: $spacing-md; background-color: transparent; border-style: none; color: tokens.$color-white; @@ -29,7 +28,7 @@ $dismissButtonWidth: 30px; display: flex; align-items: center; justify-content: center; - border-radius: dist.$border-radius-sm; + border-radius: $border-radius-sm; cursor: pointer; padding: 0; diff --git a/frontend/src/components/waitlist/WaitlistPage.module.scss b/frontend/src/components/waitlist/WaitlistPage.module.scss index 8f538eb277..94f1a07a1c 100644 --- a/frontend/src/components/waitlist/WaitlistPage.module.scss +++ b/frontend/src/components/waitlist/WaitlistPage.module.scss @@ -1,4 +1,3 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/tokens/dist/index" as dist; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; @use "../../styles/typography" as t; diff --git a/frontend/src/hooks/mediaQuery.module.scss b/frontend/src/hooks/mediaQuery.module.scss index c8ce6e84a1..70a699027e 100644 --- a/frontend/src/hooks/mediaQuery.module.scss +++ b/frontend/src/hooks/mediaQuery.module.scss @@ -1,11 +1,10 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/tokens/dist/index.scss" as - dist; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; // See https://nextjs.org/docs/basic-features/built-in-css-support#sass-variables :export { - mq_xs: dist.$mq-xs; - mq_sm: dist.$mq-sm; - mq_md: dist.$mq-md; - mq_lg: dist.$mq-lg; - mq_xl: dist.$mq-xl; + mq_xs: $mq-xs; + mq_sm: $mq-sm; + mq_md: $mq-md; + mq_lg: $mq-lg; + mq_xl: $mq-xl; } diff --git a/frontend/src/pages/accounts/profile.module.scss b/frontend/src/pages/accounts/profile.module.scss index 93e0e531fa..cfafcf8bcb 100644 --- a/frontend/src/pages/accounts/profile.module.scss +++ b/frontend/src/pages/accounts/profile.module.scss @@ -1,7 +1,5 @@ @use "../../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "~@mozilla-protocol/core/protocol/css/includes/mixins/typography" as - mixins-typography; @use "../../styles/typography"; .header { diff --git a/frontend/src/styles/globals.scss b/frontend/src/styles/globals.scss index a03190ddfb..198f310c8c 100644 --- a/frontend/src/styles/globals.scss +++ b/frontend/src/styles/globals.scss @@ -1,7 +1,7 @@ @use "fonts/inter-ui"; @use "fonts/metropolis"; @use "fonts/zilla-slab"; -@use "~@mozilla-protocol/core/protocol/css/includes/tokens/dist/index" as dist; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/base/elements/reset"; /* @@ -37,7 +37,7 @@ html, body, #__next, #overlayProvider { - font-family: dist.$font-stack-base; + font-family: $font-stack-base; height: 100%; } @@ -48,7 +48,7 @@ body, html { scroll-behavior: smooth; - scroll-padding-top: dist.$layout-xl; + scroll-padding-top: $layout-xl; @media (prefers-reduced-motion) { & { diff --git a/frontend/src/styles/tokens.scss b/frontend/src/styles/tokens.scss index cf64d7e806..3b0269a722 100644 --- a/frontend/src/styles/tokens.scss +++ b/frontend/src/styles/tokens.scss @@ -1,5 +1,3 @@ -@use "~@mozilla-protocol/core/protocol/css/includes/tokens/dist/" as index; - /* next.js will rename the file if any of the content changes (after processing and compression), which will invalidate the cache. Django makes further From 2b001986094d0d5dbb35104624dc04516a882916 Mon Sep 17 00:00:00 2001 From: John Whitlock Date: Tue, 5 Nov 2024 17:27:19 -0600 Subject: [PATCH 07/13] Rename to styles/text --- .../EmailForwardingModal.module.scss | 4 +- .../dashboard/FreeOnboarding.module.scss | 6 +- .../dashboard/Onboarding.module.scss | 4 +- .../dashboard/PremiumOnboarding.module.scss | 6 +- .../dashboard/SubdomainPicker.module.scss | 4 +- .../subdomain/ConfirmationModal.module.scss | 4 +- .../landing/BundleBanner.module.scss | 10 ++-- .../landing/HighlightedFeatures.module.scss | 4 +- .../components/landing/PlanMatrix.module.scss | 6 +- .../components/landing/Reviews.module.scss | 6 +- .../navigation/MobileNavigation.module.scss | 4 +- .../layout/navigation/UserMenu.module.scss | 4 +- .../whatsnew/WhatsNewContent.module.scss | 4 +- .../dashboard/PhoneWelcomeView.module.scss | 4 +- .../onboarding/PurchasePhonesPlan.module.scss | 6 +- .../onboarding/RealPhoneSetup.module.scss | 6 +- .../onboarding/RelayNumberPicker.module.scss | 6 +- .../waitlist/WaitlistPage.module.scss | 4 +- .../src/pages/accounts/profile.module.scss | 8 +-- .../contains-tracker-warning.module.scss | 6 +- frontend/src/pages/faq.module.scss | 6 +- frontend/src/pages/index.module.scss | 10 ++-- frontend/src/pages/premium.module.scss | 12 ++-- frontend/src/pages/tracker-report.module.scss | 8 +-- .../src/styles/{typography.scss => text.scss} | 58 +++++++++---------- 25 files changed, 100 insertions(+), 100 deletions(-) rename frontend/src/styles/{typography.scss => text.scss} (82%) diff --git a/frontend/src/components/dashboard/EmailForwardingModal.module.scss b/frontend/src/components/dashboard/EmailForwardingModal.module.scss index 528f6e363a..7c0062a16b 100644 --- a/frontend/src/components/dashboard/EmailForwardingModal.module.scss +++ b/frontend/src/components/dashboard/EmailForwardingModal.module.scss @@ -1,6 +1,6 @@ @use "../../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../../styles/typography" as t; +@use "../../styles/text"; .underlay { position: fixed; @@ -65,7 +65,7 @@ } .headline { - @include t.text-title-xs { + @include text.title-xs { display: flex; align-items: center; justify-content: center; diff --git a/frontend/src/components/dashboard/FreeOnboarding.module.scss b/frontend/src/components/dashboard/FreeOnboarding.module.scss index 05b9b41b4f..81d26713fc 100644 --- a/frontend/src/components/dashboard/FreeOnboarding.module.scss +++ b/frontend/src/components/dashboard/FreeOnboarding.module.scss @@ -1,7 +1,7 @@ @use "../../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; -@use "../../styles/typography" as t; +@use "../../styles/text"; .onboarding { display: flex; @@ -177,7 +177,7 @@ .domain-example { @include font-firefox; - @include t.text-title-2xs { + @include text.title-2xs { color: $color-light-gray-90; display: inline-block; padding: $spacing-md 0; @@ -275,7 +275,7 @@ gap: $spacing-xs; h1 { - @include t.text-title-sm { + @include text.title-sm { font-weight: 700; font-family: $font-stack-firefox; color: $color-purple-50; diff --git a/frontend/src/components/dashboard/Onboarding.module.scss b/frontend/src/components/dashboard/Onboarding.module.scss index e4d34919dd..c67849091b 100644 --- a/frontend/src/components/dashboard/Onboarding.module.scss +++ b/frontend/src/components/dashboard/Onboarding.module.scss @@ -1,6 +1,6 @@ @use "../../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../../styles/typography" as t; +@use "../../styles/text"; .wrapper { padding: $spacing-lg; @@ -8,7 +8,7 @@ border: 1px solid $color-light-gray-40; h2 { - @include t.text-title-2xs { + @include text.title-2xs { @include font-firefox; padding: $spacing-sm 0; } diff --git a/frontend/src/components/dashboard/PremiumOnboarding.module.scss b/frontend/src/components/dashboard/PremiumOnboarding.module.scss index f42058c503..83608a76cd 100644 --- a/frontend/src/components/dashboard/PremiumOnboarding.module.scss +++ b/frontend/src/components/dashboard/PremiumOnboarding.module.scss @@ -1,7 +1,7 @@ @use "../../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; -@use "../../styles/typography" as t; +@use "../../styles/text"; .onboarding { display: flex; @@ -45,7 +45,7 @@ } h2 { - @include t.text-title-sm { + @include text.title-sm { font-family: $font-stack-firefox; color: $color-purple-50; text-align: center; @@ -135,7 +135,7 @@ .domain-example { @include font-firefox; - @include t.text-title-2xs { + @include text.title-2xs { color: $color-light-gray-90; display: inline-block; padding: $spacing-md 0; diff --git a/frontend/src/components/dashboard/SubdomainPicker.module.scss b/frontend/src/components/dashboard/SubdomainPicker.module.scss index 1a8edbf27a..74ecf996d3 100644 --- a/frontend/src/components/dashboard/SubdomainPicker.module.scss +++ b/frontend/src/components/dashboard/SubdomainPicker.module.scss @@ -1,7 +1,7 @@ @use "../../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; -@use "../../styles/typography" as t; +@use "../../styles/text"; .card { border-radius: $border-radius-md; @@ -63,7 +63,7 @@ } h2 { - @include t.text-title-2xs { + @include text.title-2xs { padding: $spacing-sm 0; } } diff --git a/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss b/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss index 2246901252..39c66a7b41 100644 --- a/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss +++ b/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss @@ -1,6 +1,6 @@ @use "../../../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../../../styles/typography" as t; +@use "../../../styles/text"; .underlay { position: fixed; @@ -52,7 +52,7 @@ font-weight: 400; .subdomain { - @include t.text-title-xs { + @include text.title-xs { display: block; font-weight: 700; margin-bottom: $spacing-sm; diff --git a/frontend/src/components/landing/BundleBanner.module.scss b/frontend/src/components/landing/BundleBanner.module.scss index b09df1abb1..f825ada3fb 100644 --- a/frontend/src/components/landing/BundleBanner.module.scss +++ b/frontend/src/components/landing/BundleBanner.module.scss @@ -1,6 +1,6 @@ @use "../../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../../styles/typography" as t; +@use "../../styles/text"; .bundle-banner-wrapper { display: grid; @@ -195,24 +195,24 @@ } h2 { - @include t.text-title-sm { + @include text.title-sm { @include font-firefox; font-weight: 700; } @media #{$mq-lg} { - @include t.text-title-xs; + @include text.title-xs; } } h3 { - @include t.text-title-xs { + @include text.title-xs { @include font-firefox; font-weight: 500; } @media #{$mq-lg} { - @include t.text-title-2xs; + @include text.title-2xs; } } diff --git a/frontend/src/components/landing/HighlightedFeatures.module.scss b/frontend/src/components/landing/HighlightedFeatures.module.scss index 6dfcf2f5a8..648fca9792 100644 --- a/frontend/src/components/landing/HighlightedFeatures.module.scss +++ b/frontend/src/components/landing/HighlightedFeatures.module.scss @@ -1,6 +1,6 @@ @use "../../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../../styles/typography" as t; +@use "../../styles/text"; .highlighted-feature-wrapper { display: flex; @@ -65,7 +65,7 @@ h2 { @include font-firefox; - @include t.text-title-sm { + @include text.title-sm { justify-content: center; width: 100%; } diff --git a/frontend/src/components/landing/PlanMatrix.module.scss b/frontend/src/components/landing/PlanMatrix.module.scss index 4b7a5473fc..7ab2dc9c73 100644 --- a/frontend/src/components/landing/PlanMatrix.module.scss +++ b/frontend/src/components/landing/PlanMatrix.module.scss @@ -1,6 +1,6 @@ @use "../../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../../styles/typography" as t; +@use "../../styles/text"; .wrapper { width: 100%; @@ -10,7 +10,7 @@ gap: $spacing-md; .bundle-offer-heading { - @include t.text-title-xs { + @include text.title-xs { background-image: linear-gradient( to right, $color-violet-30, @@ -258,7 +258,7 @@ table.desktop { padding: $spacing-md; h3 { - @include t.text-title-2xs { + @include text.title-2xs { font-weight: 600; text-align: center; } diff --git a/frontend/src/components/landing/Reviews.module.scss b/frontend/src/components/landing/Reviews.module.scss index 41dd73aaac..05db76aaee 100644 --- a/frontend/src/components/landing/Reviews.module.scss +++ b/frontend/src/components/landing/Reviews.module.scss @@ -1,6 +1,6 @@ @use "../../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../../styles/typography" as t; +@use "../../styles/text"; .reviews { display: flex; @@ -53,7 +53,7 @@ } .logo-text { - @include t.text-title-xs { + @include text.title-xs { font-weight: 600; text-transform: uppercase; } @@ -77,7 +77,7 @@ .rating { .title { - @include t.text-title-2xl { + @include text.title-2xl { font-family: $font-stack-firefox; font-weight: 600; } diff --git a/frontend/src/components/layout/navigation/MobileNavigation.module.scss b/frontend/src/components/layout/navigation/MobileNavigation.module.scss index 726cb876d6..0b270c762e 100644 --- a/frontend/src/components/layout/navigation/MobileNavigation.module.scss +++ b/frontend/src/components/layout/navigation/MobileNavigation.module.scss @@ -1,6 +1,6 @@ @use "../../../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../../../styles/typography" as t; +@use "../../../styles/text"; .mobile-menu { width: 100%; @@ -82,7 +82,7 @@ .menu-item { display: flex; - @include t.text-display-xxs { + @include text.display-xxs { font-family: $font-stack-firefox; border-bottom: 2px solid $color-light-gray-20; } diff --git a/frontend/src/components/layout/navigation/UserMenu.module.scss b/frontend/src/components/layout/navigation/UserMenu.module.scss index 298b8aa4d2..fc7009b2a5 100644 --- a/frontend/src/components/layout/navigation/UserMenu.module.scss +++ b/frontend/src/components/layout/navigation/UserMenu.module.scss @@ -1,6 +1,6 @@ @use "../../../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../../../styles/typography"; +@use "../../../styles/text"; .wrapper { align-items: center; @@ -15,7 +15,7 @@ color: white; overflow: hidden; - @include typography.text-title-2xs { + @include text.title-2xs { padding: 0; border-style: none; } diff --git a/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss b/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss index c4910f8e82..15eef2187d 100644 --- a/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss +++ b/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss @@ -1,6 +1,6 @@ @use "../../../../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../../../../styles/typography"; +@use "../../../../styles/text"; .wrapper { display: flex; @@ -16,7 +16,7 @@ padding: $spacing-lg 0; h2 { - @include typography.text-title-2xs { + @include text.title-2xs { font-family: $font-stack-firefox; padding-bottom: $spacing-sm; } diff --git a/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss b/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss index e0a62774da..68815882d2 100644 --- a/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss +++ b/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss @@ -1,6 +1,6 @@ @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../../styles/tokens"; -@use "../../../styles/typography" as t; +@use "../../../styles/text"; .main-wrapper { display: flex; @@ -20,7 +20,7 @@ text-align: center; h1 { - @include t.text-title-xs { + @include text.title-xs { @include font-firefox; font-weight: 600; } diff --git a/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss b/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss index acabf9318c..7e4e64b34a 100644 --- a/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss +++ b/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss @@ -1,6 +1,6 @@ @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../../styles/tokens"; -@use "../../../styles/typography" as t; +@use "../../../styles/text"; .wrapper { display: flex; @@ -14,7 +14,7 @@ overflow-x: hidden; h2 { - @include t.text-title-xs { + @include text.title-xs { font-family: $font-stack-firefox; text-align: center; } @@ -119,7 +119,7 @@ gap: $spacing-md; .price { - @include t.text-title-2xs { + @include text.title-2xs { padding-top: $spacing-sm; display: block; font-weight: 700; diff --git a/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss b/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss index 1f434bb6ec..12026cda16 100644 --- a/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss +++ b/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss @@ -1,7 +1,7 @@ @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; @use "../../../styles/tokens"; -@use "../../../styles/typography" as t; +@use "../../../styles/text"; .step { flex: 1 0 auto; @@ -21,7 +21,7 @@ } h2 { - @include t.text-title-xs { + @include text.title-xs { font-family: $font-stack-firefox; text-align: center; } @@ -88,7 +88,7 @@ } span { - @include t.text-title-2xs { + @include text.title-2xs { padding-top: $spacing-sm; display: block; font-weight: 700; diff --git a/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss b/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss index 7994c2f007..cdaf2a8143 100644 --- a/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss +++ b/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss @@ -1,7 +1,7 @@ @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; @use "../../../styles/tokens"; -@use "../../../styles/typography" as t; +@use "../../../styles/text"; .step, .controls { @@ -35,7 +35,7 @@ } h2 { - @include t.text-title-xs { + @include text.title-xs { font-family: $font-stack-firefox; text-align: center; } @@ -102,7 +102,7 @@ } span { - @include t.text-title-2xs { + @include text.title-2xs { padding-top: $spacing-sm; display: block; font-weight: 700; diff --git a/frontend/src/components/waitlist/WaitlistPage.module.scss b/frontend/src/components/waitlist/WaitlistPage.module.scss index 94f1a07a1c..301d950fac 100644 --- a/frontend/src/components/waitlist/WaitlistPage.module.scss +++ b/frontend/src/components/waitlist/WaitlistPage.module.scss @@ -1,6 +1,6 @@ @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; -@use "../../styles/typography" as t; +@use "../../styles/text"; .wrapper { display: flex; @@ -78,7 +78,7 @@ } .heading { - @include t.text-title-sm { + @include text.title-sm { font-family: $font-stack-firefox; align-self: center; text-align: center; diff --git a/frontend/src/pages/accounts/profile.module.scss b/frontend/src/pages/accounts/profile.module.scss index cfafcf8bcb..644841f0a2 100644 --- a/frontend/src/pages/accounts/profile.module.scss +++ b/frontend/src/pages/accounts/profile.module.scss @@ -1,6 +1,6 @@ @use "../../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../../styles/typography"; +@use "../../styles/text"; .header { background-color: $color-light-gray-05; @@ -157,7 +157,7 @@ } .value { - @include typography.text-title-xs { + @include text.title-xs { font-family: $font-stack-firefox; font-weight: 700; padding: $spacing-xs 0; @@ -260,7 +260,7 @@ } .upsell-banner-header { - @include typography.text-title-md { + @include text.title-md { font-weight: 700; } } @@ -370,7 +370,7 @@ h3 { @include font-mozilla; - @include typography.text-title-xs { + @include text.title-xs { font-weight: 500; } diff --git a/frontend/src/pages/contains-tracker-warning.module.scss b/frontend/src/pages/contains-tracker-warning.module.scss index db6e29c103..10f8fd973e 100644 --- a/frontend/src/pages/contains-tracker-warning.module.scss +++ b/frontend/src/pages/contains-tracker-warning.module.scss @@ -1,6 +1,6 @@ @use "../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../styles/typography"; +@use "../styles/text"; .contains-tracker-container { margin: $layout-sm; @@ -106,7 +106,7 @@ } .headline { - @include typography.text-title-xs { + @include text.title-xs { font-family: $font-stack-firefox; font-weight: 700; padding: $spacing-md 0; @@ -114,7 +114,7 @@ } @media screen and #{$mq-md} { - @include typography.text-title-2xs; + @include text-title-2xs; } } diff --git a/frontend/src/pages/faq.module.scss b/frontend/src/pages/faq.module.scss index 98f2a29f78..7f25785e60 100644 --- a/frontend/src/pages/faq.module.scss +++ b/frontend/src/pages/faq.module.scss @@ -1,6 +1,6 @@ @use "../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../styles/typography" as t; +@use "../styles/text"; .faq-page { background-color: $color-blue-90; @@ -28,7 +28,7 @@ } .headline { - @include t.text-title-sm { + @include text.title-sm { @include font-firefox; padding-bottom: $spacing-xl; } @@ -50,7 +50,7 @@ } .question { - @include t.text-title-2xs { + @include text.title-2xs { @include font-firefox; padding-bottom: $spacing-sm; } diff --git a/frontend/src/pages/index.module.scss b/frontend/src/pages/index.module.scss index 282bd7527b..dfb2b62eb8 100644 --- a/frontend/src/pages/index.module.scss +++ b/frontend/src/pages/index.module.scss @@ -1,6 +1,6 @@ @use "../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../styles/typography" as t; +@use "../styles/text"; .hero { display: flex; @@ -29,7 +29,7 @@ } h2 { - @include t.text-title-md { + @include text.title-md { font-family: $font-stack-firefox; } } @@ -76,7 +76,7 @@ padding: $spacing-lg; h2 { - @include t.text-title-sm { + @include text.title-sm { font-family: $font-stack-firefox; text-align: center; margin-bottom: $layout-sm; @@ -199,7 +199,7 @@ margin-top: $layout-xl; h2 { - @include t.text-title-sm { + @include text.title-sm { font-family: $font-stack-firefox; font-weight: 500; } @@ -249,7 +249,7 @@ } .headline { - @include t.text-title-sm { + @include text.title-sm { font-family: $font-stack-firefox; font-weight: 500; padding: $spacing-md 0; diff --git a/frontend/src/pages/premium.module.scss b/frontend/src/pages/premium.module.scss index 28facbfb66..620a17aa9b 100644 --- a/frontend/src/pages/premium.module.scss +++ b/frontend/src/pages/premium.module.scss @@ -1,6 +1,6 @@ @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../styles/tokens"; -@use "../styles/typography" as t; +@use "../styles/text"; .hero { display: flex; @@ -34,7 +34,7 @@ } h2 { - @include t.text-title-md { + @include text.title-md { font-family: $font-stack-firefox; } } @@ -80,7 +80,7 @@ padding: $spacing-2xl $spacing-xl; h2 { - @include t.text-title-sm { + @include text.title-sm { font-family: $font-stack-firefox; text-align: center; padding: $spacing-md 0; @@ -118,7 +118,7 @@ } h3 { - @include t.text-title-xs { + @include text.title-xs { font-family: $font-stack-firefox; padding: $spacing-sm 0; } @@ -153,7 +153,7 @@ padding: $spacing-xl; .headline { - @include t.text-title-sm { + @include text.title-sm { font-family: $font-stack-firefox; text-align: center; padding: $spacing-lg; @@ -193,7 +193,7 @@ gap: $spacing-lg; h2 { - @include t.text-title-md { + @include text.title-md { font-family: $font-stack-firefox; font-weight: 500; } diff --git a/frontend/src/pages/tracker-report.module.scss b/frontend/src/pages/tracker-report.module.scss index f4ca015eb6..8a6242a2ed 100644 --- a/frontend/src/pages/tracker-report.module.scss +++ b/frontend/src/pages/tracker-report.module.scss @@ -1,6 +1,6 @@ @use "../styles/tokens"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../styles/typography"; +@use "../styles/text"; .wrapper { height: 100%; @@ -71,7 +71,7 @@ } h1 { - @include typography.text-title-2xs { + @include text.title-2xs { font-family: $font-stack-firefox; padding: $spacing-md 0; border-bottom: 1px solid tokens.$color-grey-20; @@ -129,7 +129,7 @@ } h2 { - @include typography.text-title-xs { + @include text.title-xs { font-family: $font-stack-firefox; font-weight: 500; } @@ -260,7 +260,7 @@ } .headline { - @include typography.text-title-sm { + @include text.title-sm { font-family: $font-stack-firefox; font-weight: 500; padding: $spacing-md 0; diff --git a/frontend/src/styles/typography.scss b/frontend/src/styles/text.scss similarity index 82% rename from frontend/src/styles/typography.scss rename to frontend/src/styles/text.scss index cb3d5ccb5a..081847ac77 100644 --- a/frontend/src/styles/typography.scss +++ b/frontend/src/styles/text.scss @@ -2,8 +2,8 @@ /* Re-declare mozilla-protocol typography: - * text-title-* mixins to take a content block - * replace lib.type-scale to return a numberremove + * text-title-* becomes title-* + * title-* mixins to take a content block TODO MPP-3946: Replace with mozilla-protocol v18.0.x overrides @@ -13,12 +13,12 @@ https://github.com/mozilla/protocol/blob/v17.0.1/assets/sass/protocol/includes/m A typical mixin text-title-xs looks like: @mixin text-title-xs { - @include lib.font-size(lib.type-scale('title-2xs-size')); - line-height: lib.type-scale('title-2xs-line-height'); + @include font-size(type-scale('title-2xs-size')); + line-height: type-scale('title-2xs-line-height'); @media #{$mq-md} { - @include lib.font-size(lib.type-scale('title-xs-size')); - line-height: lib.type-scale('title-xs-line-height'); + @include font-size(type-scale('title-xs-size')); + line-height: type-scale('title-xs-line-height'); } } @@ -38,8 +38,8 @@ components/dashboard/EmailForwardingModal.module.scss: This compiles to the CSS: .EmailForwardingModal_headline__VgCSC { - lib.font-size: 24px; - lib.font-size: 1.5rem; + font-size: 24px; + font-size: 1.5rem; line-height: 1.08; display: flex; align-items: center; @@ -51,8 +51,8 @@ This compiles to the CSS: @media(min-width:768px) { .EmailForwardingModal_headline__VgCSC { - lib.font-size: 28px; - lib.font-size: 1.75rem; + font-size: 28px; + font-size: 1.75rem; line-height: 1.07 } } @@ -95,20 +95,20 @@ Both result in this slightly different CSS: padding: 8px 0; gap: 8px; font-weight: 100 - lib.font-size: 24px; - lib.font-size: 1.5rem; + font-size: 24px; + font-size: 1.5rem; line-height: 1.08; } @media(min-width:768px) { .EmailForwardingModal_headline__VgCSC { - lib.font-size: 28px; - lib.font-size: 1.75rem; + font-size: 28px; + font-size: 1.75rem; line-height: 1.07 } } -The change is that the lib.font-size and line-height elements have moved +The change is that the font-size and line-height elements have moved from the top to the bottom of the ruleset. This can change the style due to browser difference and later properties overriding previous properties. See this Stack Overflow question for some of the subtleties: @@ -119,21 +119,21 @@ This file implements a third method, overriding the mozilla-protocol mixins to accept a content;. Documentation at: https://sass-lang.com/documentation/at-rules/mixin/#content-blocks -@mixin text-title-xs { - @include lib.font-size(lib.type-scale('title-2xs-size')); - line-height: lib.type-scale('title-2xs-line-height'); +@mixin title-xs { + @include font-size(type-scale('title-2xs-size')); + line-height: type-scale('title-2xs-line-height'); @content; @media #{$mq-md} { - @include lib.font-size(lib.type-scale('title-xs-size')); - line-height: lib.type-scale('title-xs-line-height'); + @include font-size(type-scale('title-xs-size')); + line-height: type-scale('title-xs-line-height'); } } The .headline declaration changes to: .headline { - @include text-title-xs { + @include text.title-xs { display: flex; align-items: center; justify-content: center; @@ -152,7 +152,7 @@ components/layout/navigation/MobileNavigation.module.scss .menu-item { display: flex; - @include text-display-xxs { + @include text.display-xxs { font-family: $font-stack-firefox; border-bottom: 2px solid $color-light-gray-20; } @@ -170,7 +170,7 @@ that they are using to override the base text-* mixin. @forward "~@mozilla-protocol/core/protocol/css/includes/mixins/typography" show $font-stack-mozilla; -@mixin text-title-2xl { +@mixin title-2xl { @include font-size(type-scale("title-xl-size")); line-height: type-scale("title-xl-line-height"); @content; @@ -184,7 +184,7 @@ that they are using to override the base text-* mixin. // @mixin text-title-xl is not used by Relay // @mixin text-title-lg is not used by Relay -@mixin text-title-md { +@mixin title-md { @include font-size(type-scale("title-sm-size")); line-height: type-scale("title-sm-line-height"); @content; @@ -195,7 +195,7 @@ that they are using to override the base text-* mixin. } } -@mixin text-title-sm { +@mixin title-sm { @include font-size(type-scale("title-xs-size")); line-height: type-scale("title-xs-line-height"); @content; @@ -206,7 +206,7 @@ that they are using to override the base text-* mixin. } } -@mixin text-title-xs { +@mixin title-xs { @include font-size(type-scale("title-2xs-size")); line-height: type-scale("title-2xs-line-height"); @content; @@ -217,7 +217,7 @@ that they are using to override the base text-* mixin. } } -@mixin text-title-2xs { +@mixin title-2xs { @include font-size(type-scale("title-3xs-size")); line-height: type-scale("title-3xs-line-height"); @content; @@ -235,8 +235,8 @@ that they are using to override the base text-* mixin. // @mixin text-display-sm is not used by Relay // @mixin text-display-xs is not used by Relay -@mixin text-display-xxs { - @include text-title-2xs { +@mixin display-xxs { + @include title-2xs { @content; } } From 4ce98320ffa2297b554c7acf5354876a8368c867 Mon Sep 17 00:00:00 2001 From: John Whitlock Date: Tue, 5 Nov 2024 17:33:34 -0600 Subject: [PATCH 08/13] Rename to styles/color --- frontend/src/components/Banner.module.scss | 32 ++-- frontend/src/components/Button.module.scss | 2 +- frontend/src/components/InfoModal.module.scss | 2 +- .../src/components/InfoTooltip.module.scss | 2 +- .../dashboard/CornerNotification.module.scss | 2 +- .../EmailForwardingModal.module.scss | 8 +- .../dashboard/FreeOnboarding.module.scss | 2 +- .../dashboard/Onboarding.module.scss | 2 +- .../dashboard/PremiumOnboarding.module.scss | 2 +- .../dashboard/ProfileBanners.module.scss | 2 +- .../dashboard/SubdomainPicker.module.scss | 4 +- .../aliases/AddressPickerModal.module.scss | 12 +- .../dashboard/aliases/Alias.module.scss | 4 +- .../aliases/AliasDeletionButton.module.scss | 2 +- .../AliasDeletionButtonPermanent.module.scss | 12 +- .../aliases/AliasGenerationButton.module.scss | 10 +- .../dashboard/aliases/AliasList.module.scss | 2 +- .../aliases/CategoryFilter.module.scss | 8 +- .../CustomAddressGenerationModal.module.scss | 56 +++--- .../dashboard/aliases/LabelEditor.module.scss | 8 +- .../dashboard/aliases/MaskCard.module.scss | 82 ++++----- .../subdomain/ConfirmationForm.module.scss | 2 +- .../subdomain/ConfirmationModal.module.scss | 2 +- .../SubdomainInfoTooltip.module.scss | 2 +- .../dashboard/tips/CustomAliasTip.module.scss | 2 +- .../dashboard/tips/GenericTip.module.scss | 2 +- .../dashboard/tips/Tips.module.scss | 2 +- .../landing/BundleBanner.module.scss | 2 +- .../components/landing/DemoPhone.module.scss | 2 +- .../landing/FaqAccordion.module.scss | 2 +- .../landing/HighlightedFeatures.module.scss | 2 +- .../components/landing/PlanMatrix.module.scss | 10 +- .../components/landing/Reviews.module.scss | 12 +- .../src/components/layout/Layout.module.scss | 12 +- .../layout/navigation/AppPicker.module.scss | 4 +- .../navigation/DashboardSwitcher.module.scss | 16 +- .../layout/navigation/MenuToggle.module.scss | 2 +- .../navigation/MobileNavigation.module.scss | 6 +- .../layout/navigation/Navigation.module.scss | 4 +- .../navigation/SignInButton.module.scss | 4 +- .../navigation/SignUpButton.module.scss | 2 +- .../navigation/UpgradeButton.module.scss | 2 +- .../layout/navigation/UserMenu.module.scss | 4 +- .../whatsnew/WhatsNewContent.module.scss | 2 +- .../whatsnew/WhatsNewDashboard.module.scss | 2 +- .../whatsnew/WhatsNewList.module.scss | 2 +- .../whatsnew/WhatsNewMenu.module.scss | 2 +- .../layout/topmessage/CsatSurvey.module.scss | 2 +- .../topmessage/HolidayPromoBanner.module.scss | 2 +- .../InterviewRecruitment.module.scss | 10 +- .../layout/topmessage/NpsSurvey.module.scss | 2 +- .../layout/topmessage/PhoneSurvey.module.scss | 10 +- .../dashboard/PhoneDashboard.module.scss | 48 +++--- .../dashboard/PhoneWelcomeView.module.scss | 10 +- .../onboarding/PurchasePhonesPlan.module.scss | 14 +- .../onboarding/RealPhoneSetup.module.scss | 30 ++-- .../RelayNumberConfirmationModal.module.scss | 4 +- .../onboarding/RelayNumberPicker.module.scss | 20 +-- .../src/pages/accounts/profile.module.scss | 6 +- .../src/pages/accounts/settings.module.scss | 20 +-- .../contains-tracker-warning.module.scss | 8 +- frontend/src/pages/faq.module.scss | 2 +- frontend/src/pages/flags.module.scss | 2 +- frontend/src/pages/index.module.scss | 2 +- .../src/pages/mock/mockSession.module.scss | 2 +- frontend/src/pages/premium.module.scss | 8 +- frontend/src/pages/tracker-report.module.scss | 24 +-- .../src/pages/vpn-relay-welcome.module.scss | 8 +- frontend/src/styles/color.scss | 163 ++++++++++++++++++ frontend/src/styles/globals.scss | 2 +- frontend/src/styles/tokens.scss | 163 ------------------ 71 files changed, 462 insertions(+), 462 deletions(-) create mode 100644 frontend/src/styles/color.scss delete mode 100644 frontend/src/styles/tokens.scss diff --git a/frontend/src/components/Banner.module.scss b/frontend/src/components/Banner.module.scss index 0d8cb6bfd3..62b58124c0 100644 --- a/frontend/src/components/Banner.module.scss +++ b/frontend/src/components/Banner.module.scss @@ -1,11 +1,11 @@ @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; -@use "../styles/tokens"; +@use "../styles/color"; .banner { border-radius: $border-radius-md; padding: $spacing-md; - background-color: tokens.$color-white; + background-color: color.$white; position: relative; box-shadow: $box-shadow-sm; @@ -13,7 +13,7 @@ // This is the gradient border width (which is implemented as a background image): padding: 2px; box-shadow: none; - background-image: tokens.$firefoxGradient; + background-image: color.$firefoxGradient; } &.warning { @@ -44,15 +44,15 @@ padding: 0; &:hover { - background-color: tokens.$color-blue-50; - color: tokens.$color-white; + background-color: color.$blue-50; + color: color.$white; } } } .highlight-wrapper { display: flex; - background-color: tokens.$color-white; + background-color: color.$white; flex-wrap: wrap; .banner.promo & { @@ -75,7 +75,7 @@ padding-left: $spacing-md; border-left-width: 4px; border-left-style: solid; - border-color: tokens.$color-yellow-50; + border-color: color.$yellow-50; } } } @@ -90,7 +90,7 @@ .info-icon { align-self: center; - color: tokens.$color-violet-30; + color: color.$violet-30; } } @@ -154,11 +154,11 @@ margin-right: $spacing-sm; .warning & { - color: tokens.$color-yellow-50; + color: color.$yellow-50; } .info & { - color: tokens.$color-violet-30; + color: color.$violet-30; margin-right: $spacing-xs; } } @@ -170,7 +170,7 @@ display: inline-block; padding-top: $spacing-md; font-weight: 700; - color: tokens.$color-blue-50; + color: color.$blue-50; cursor: pointer; background: none; border: none; @@ -182,7 +182,7 @@ } &:hover { - color: tokens.$color-blue-40; + color: color.$blue-40; } &:focus { @@ -207,13 +207,13 @@ display: block; padding: $spacing-sm $spacing-md; font-weight: 700; - border: 2px solid tokens.$color-blue-50; - color: tokens.$color-blue-50; + border: 2px solid color.$blue-50; + color: color.$blue-50; border-radius: $border-radius-sm; &:hover { - background-color: tokens.$color-blue-60; - color: tokens.$color-white; + background-color: color.$blue-60; + color: color.$white; } &:focus { diff --git a/frontend/src/components/Button.module.scss b/frontend/src/components/Button.module.scss index 6b791b494d..c5751c43ca 100644 --- a/frontend/src/components/Button.module.scss +++ b/frontend/src/components/Button.module.scss @@ -1,6 +1,6 @@ @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; -@use "../styles/tokens"; +@use "../styles/color"; .button { display: inline-flex; diff --git a/frontend/src/components/InfoModal.module.scss b/frontend/src/components/InfoModal.module.scss index d5c0eca0c2..0e326731a7 100644 --- a/frontend/src/components/InfoModal.module.scss +++ b/frontend/src/components/InfoModal.module.scss @@ -1,4 +1,4 @@ -@use "../styles/tokens"; +@use "../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .underlay { diff --git a/frontend/src/components/InfoTooltip.module.scss b/frontend/src/components/InfoTooltip.module.scss index 2d684568bf..43f0fe91ed 100644 --- a/frontend/src/components/InfoTooltip.module.scss +++ b/frontend/src/components/InfoTooltip.module.scss @@ -1,4 +1,4 @@ -@use "../styles/tokens"; +@use "../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .wrapper { diff --git a/frontend/src/components/dashboard/CornerNotification.module.scss b/frontend/src/components/dashboard/CornerNotification.module.scss index e98403dcf6..4c756f0240 100644 --- a/frontend/src/components/dashboard/CornerNotification.module.scss +++ b/frontend/src/components/dashboard/CornerNotification.module.scss @@ -1,4 +1,4 @@ -@use "../../styles/tokens"; +@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .wrapper { diff --git a/frontend/src/components/dashboard/EmailForwardingModal.module.scss b/frontend/src/components/dashboard/EmailForwardingModal.module.scss index 7c0062a16b..0c39527cfd 100644 --- a/frontend/src/components/dashboard/EmailForwardingModal.module.scss +++ b/frontend/src/components/dashboard/EmailForwardingModal.module.scss @@ -1,4 +1,4 @@ -@use "../../styles/tokens"; +@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../styles/text"; @@ -79,7 +79,7 @@ font-weight: 600; @include text-body-md; - color: tokens.$color-grey-50; + color: color.$grey-50; } .nevermind-link { @@ -97,14 +97,14 @@ .label-input { font-family: $font-stack-firefox; - border: 1px solid tokens.$color-grey-30; + border: 1px solid color.$grey-30; border-radius: $border-radius-sm; font-weight: 100; padding: $spacing-sm $spacing-md; // Inputs should be atleast 16px if we want to avoid iOS auto-zooming (MPP-3598) @include text-body-md; - color: tokens.$color-grey-40; + color: color.$grey-40; width: 100%; } diff --git a/frontend/src/components/dashboard/FreeOnboarding.module.scss b/frontend/src/components/dashboard/FreeOnboarding.module.scss index 81d26713fc..1ef18198b8 100644 --- a/frontend/src/components/dashboard/FreeOnboarding.module.scss +++ b/frontend/src/components/dashboard/FreeOnboarding.module.scss @@ -1,4 +1,4 @@ -@use "../../styles/tokens"; +@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; @use "../../styles/text"; diff --git a/frontend/src/components/dashboard/Onboarding.module.scss b/frontend/src/components/dashboard/Onboarding.module.scss index c67849091b..7a48d52f2b 100644 --- a/frontend/src/components/dashboard/Onboarding.module.scss +++ b/frontend/src/components/dashboard/Onboarding.module.scss @@ -1,4 +1,4 @@ -@use "../../styles/tokens"; +@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../styles/text"; diff --git a/frontend/src/components/dashboard/PremiumOnboarding.module.scss b/frontend/src/components/dashboard/PremiumOnboarding.module.scss index 83608a76cd..17dc20538f 100644 --- a/frontend/src/components/dashboard/PremiumOnboarding.module.scss +++ b/frontend/src/components/dashboard/PremiumOnboarding.module.scss @@ -1,4 +1,4 @@ -@use "../../styles/tokens"; +@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; @use "../../styles/text"; diff --git a/frontend/src/components/dashboard/ProfileBanners.module.scss b/frontend/src/components/dashboard/ProfileBanners.module.scss index 600e4f9909..a8dc092f70 100644 --- a/frontend/src/components/dashboard/ProfileBanners.module.scss +++ b/frontend/src/components/dashboard/ProfileBanners.module.scss @@ -1,4 +1,4 @@ -@use "../../styles/tokens"; +@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .profile-banners { diff --git a/frontend/src/components/dashboard/SubdomainPicker.module.scss b/frontend/src/components/dashboard/SubdomainPicker.module.scss index 74ecf996d3..f28264436c 100644 --- a/frontend/src/components/dashboard/SubdomainPicker.module.scss +++ b/frontend/src/components/dashboard/SubdomainPicker.module.scss @@ -1,4 +1,4 @@ -@use "../../styles/tokens"; +@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; @use "../../styles/text"; @@ -71,7 +71,7 @@ .lead { @include text-body-sm; padding: $spacing-md 0; - color: tokens.$color-grey-50; + color: color.$grey-50; display: flex; flex-direction: column; gap: $spacing-md; diff --git a/frontend/src/components/dashboard/aliases/AddressPickerModal.module.scss b/frontend/src/components/dashboard/aliases/AddressPickerModal.module.scss index e5c1548a21..9c6ce77086 100644 --- a/frontend/src/components/dashboard/aliases/AddressPickerModal.module.scss +++ b/frontend/src/components/dashboard/aliases/AddressPickerModal.module.scss @@ -1,4 +1,4 @@ -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; @@ -45,7 +45,7 @@ padding-left: $spacing-sm; font-family: $font-stack-base; font-weight: 400; - color: tokens.$color-grey-50; + color: color.$grey-50; @include text-body-sm; @@ -88,7 +88,7 @@ .prefix { font-family: $font-stack-firefox; - color: tokens.$color-grey-50; + color: color.$grey-50; width: 70%; margin: 0 auto; display: flex; @@ -107,7 +107,7 @@ margin: $spacing-sm 0 0 0; font-weight: 400; padding: $spacing-sm; - color: tokens.$color-grey-40; + color: color.$grey-40; font-family: $font-stack-base; @include text-body-md; @@ -128,7 +128,7 @@ gap: $spacing-sm; margin: $spacing-md $spacing-sm; font-family: $font-stack-firefox; - color: tokens.$color-grey-50; + color: color.$grey-50; font-weight: 600; @media screen and #{$mq-sm} { @@ -138,7 +138,7 @@ input[type="checkbox"] { width: 20px; height: 20px; - border: 2px solid tokens.$color-grey-20; + border: 2px solid color.$grey-20; border-radius: $border-radius-sm; -webkit-appearance: none; } diff --git a/frontend/src/components/dashboard/aliases/Alias.module.scss b/frontend/src/components/dashboard/aliases/Alias.module.scss index 51c948fa5b..abbf78d252 100644 --- a/frontend/src/components/dashboard/aliases/Alias.module.scss +++ b/frontend/src/components/dashboard/aliases/Alias.module.scss @@ -1,4 +1,4 @@ -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; $toggleTransitionDuration: 200ms; @@ -44,7 +44,7 @@ $trackerRemovalIndicatorWidth: 20px; button { border-style: none; background-color: transparent; - color: tokens.$color-grey-30; + color: color.$grey-30; display: flex; align-items: center; padding: 0 $spacing-xs; diff --git a/frontend/src/components/dashboard/aliases/AliasDeletionButton.module.scss b/frontend/src/components/dashboard/aliases/AliasDeletionButton.module.scss index 1de09c59b4..f23513ddba 100644 --- a/frontend/src/components/dashboard/aliases/AliasDeletionButton.module.scss +++ b/frontend/src/components/dashboard/aliases/AliasDeletionButton.module.scss @@ -1,4 +1,4 @@ -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; diff --git a/frontend/src/components/dashboard/aliases/AliasDeletionButtonPermanent.module.scss b/frontend/src/components/dashboard/aliases/AliasDeletionButtonPermanent.module.scss index 50e324cfdd..1d873c80f5 100644 --- a/frontend/src/components/dashboard/aliases/AliasDeletionButtonPermanent.module.scss +++ b/frontend/src/components/dashboard/aliases/AliasDeletionButtonPermanent.module.scss @@ -1,4 +1,4 @@ -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; @@ -46,7 +46,7 @@ overflow-wrap: break-word; hr { - border: 1px solid tokens.$color-grey-10; + border: 1px solid color.$grey-10; margin-top: $spacing-2xl; } @@ -67,7 +67,7 @@ display: block; text-align: center; padding: $spacing-lg $spacing-lg $spacing-sm; - color: tokens.$color-grey-50; + color: color.$grey-50; margin-bottom: $spacing-sm; user-select: auto; -webkit-user-select: auto; // Fixes overflow breaking in iOS devices (MPP-3686) @@ -78,7 +78,7 @@ font-weight: 600; text-align: center; padding: $spacing-sm $spacing-lg; - color: tokens.$color-grey-50; + color: color.$grey-50; margin: 0 auto $spacing-2xl auto; @media screen and #{$mq-md} { @@ -116,7 +116,7 @@ .warning-wrapper { position: relative; display: flex; - border-left: $border-radius-xs solid color tokens.$color-error; + border-left: $border-radius-xs solid color color.$error; align-items: center; padding-left: $spacing-sm; background-color: #fff; @@ -131,7 +131,7 @@ p { @include text-body-sm; - color: tokens.$color-grey-50; + color: color.$grey-50; } } diff --git a/frontend/src/components/dashboard/aliases/AliasGenerationButton.module.scss b/frontend/src/components/dashboard/aliases/AliasGenerationButton.module.scss index 4e6e5a1c12..a64dbc2470 100644 --- a/frontend/src/components/dashboard/aliases/AliasGenerationButton.module.scss +++ b/frontend/src/components/dashboard/aliases/AliasGenerationButton.module.scss @@ -1,4 +1,4 @@ -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .button-wrapper { @@ -12,7 +12,7 @@ margin-left: -1 * $spacing-md; // Align the popup to the edge of the screen at narrow widths inset-inline-end: 0; - background-color: tokens.$color-white; + background-color: color.$white; border-radius: $border-radius-md; box-shadow: $box-shadow-md; list-style-type: none; @@ -26,7 +26,7 @@ .menu-item-wrapper { font-family: $font-stack-firefox; - color: tokens.$color-blue-50; + color: color.$blue-50; padding: $spacing-md $spacing-lg; &:first-child { @@ -46,8 +46,8 @@ &:focus { outline: none; - background-color: tokens.$color-blue-50; - color: tokens.$color-white; + background-color: color.$blue-50; + color: color.$white; } } } diff --git a/frontend/src/components/dashboard/aliases/AliasList.module.scss b/frontend/src/components/dashboard/aliases/AliasList.module.scss index 4c5fda07b5..717ffe6daf 100644 --- a/frontend/src/components/dashboard/aliases/AliasList.module.scss +++ b/frontend/src/components/dashboard/aliases/AliasList.module.scss @@ -1,4 +1,4 @@ -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; diff --git a/frontend/src/components/dashboard/aliases/CategoryFilter.module.scss b/frontend/src/components/dashboard/aliases/CategoryFilter.module.scss index 485fafbe36..70a8b765ff 100644 --- a/frontend/src/components/dashboard/aliases/CategoryFilter.module.scss +++ b/frontend/src/components/dashboard/aliases/CategoryFilter.module.scss @@ -1,4 +1,4 @@ -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .filter-button { @@ -13,14 +13,14 @@ color: $color-dark-gray-50; &:hover { - background-color: tokens.$color-white; - color: tokens.$color-blue-50; + background-color: color.$white; + color: color.$blue-50; } } .filter-menu { box-shadow: $box-shadow-sm; - background-color: tokens.$color-white; + background-color: color.$white; border-radius: $border-radius-md; font-family: $font-stack-firefox; overflow-y: auto; diff --git a/frontend/src/components/dashboard/aliases/CustomAddressGenerationModal.module.scss b/frontend/src/components/dashboard/aliases/CustomAddressGenerationModal.module.scss index 69f5e27316..8ecbd6f153 100644 --- a/frontend/src/components/dashboard/aliases/CustomAddressGenerationModal.module.scss +++ b/frontend/src/components/dashboard/aliases/CustomAddressGenerationModal.module.scss @@ -1,10 +1,10 @@ @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; -@use "../../../styles/tokens"; +@use "../../../styles/color"; .underlay { position: fixed; - background-color: rgba(tokens.$color-black, 0.4); + background-color: rgba(color.$black, 0.4); top: 0; bottom: 0; left: 0; @@ -14,7 +14,7 @@ justify-content: center; .dialog-wrapper { - background: tokens.$color-white; + background: color.$white; width: calc((#{$content-sm} + #{$content-md}) / 2); // 560px max-width: 90%; border-radius: $border-radius-md; @@ -40,7 +40,7 @@ position: absolute; box-shadow: $box-shadow-sm; border-radius: $border-radius-sm; - border-left: $border-radius-md solid color tokens.$color-error; + border-left: $border-radius-md solid color color.$error; align-items: center; padding: $spacing-sm $spacing-md $spacing-sm $spacing-sm; background-color: #fff; @@ -61,10 +61,10 @@ border-style: none; border-radius: $border-radius-sm; cursor: pointer; - color: tokens.$color-grey-30; + color: color.$grey-30; &:hover { - color: tokens.$color-blue-50; + color: color.$blue-50; } } } @@ -88,13 +88,13 @@ display: flex; gap: $spacing-sm; word-break: break-word; - border-left: 2px solid tokens.$color-violet-30; + border-left: 2px solid color.$violet-30; margin: 0 auto; width: 85%; padding-left: $spacing-sm; font-family: $font-stack-base; font-weight: 400; - color: tokens.$color-grey-50; + color: color.$grey-50; @include text-body-sm; @@ -102,7 +102,7 @@ // There is limited space on the mask creation modal on mobile. // Hiding this icon until larger screens increases the available space for copy. display: none; - color: tokens.$color-pink-30; + color: color.$pink-30; @media screen and #{$mq-sm} { display: block; @@ -137,7 +137,7 @@ .prefix { font-family: $font-stack-firefox; - color: tokens.$color-grey-50; + color: color.$grey-50; width: 70%; margin: 0 auto; display: flex; @@ -151,7 +151,7 @@ } .profile-registered-domain-value { - color: tokens.$color-blue-50; + color: color.$blue-50; word-break: break-word; margin-top: $spacing-md; margin-bottom: $spacing-2xl; @@ -163,19 +163,19 @@ margin: $spacing-sm 0 0 0; font-weight: 400; padding: $spacing-sm; - color: tokens.$color-grey-40; + color: color.$grey-40; font-family: $font-stack-base; @include text-body-md; &.invalid-prefix:focus { - outline: 5px solid tokens.$color-red-10; - border: 2px solid tokens.$color-error; + outline: 5px solid color.$red-10; + border: 2px solid color.$error; } } input:focus { - outline: 5px solid rgba(tokens.$color-informational, 0.4); - border: 2px solid tokens.$color-blue-50; + outline: 5px solid rgba(color.$informational, 0.4); + border: 2px solid color.$blue-50; + .wrapper { display: initial; @@ -199,13 +199,13 @@ } .check-icon { - color: tokens.$color-green-80; + color: color.$green-80; width: calc($spacing-md - $spacing-xs); height: calc($spacing-md - $spacing-xs); } .close-icon { - color: tokens.$color-error; + color: color.$error; } } @@ -215,7 +215,7 @@ @include text-body-sm; $triangleWidth: 10px; position: absolute; - background-color: tokens.$color-white; + background-color: color.$white; box-shadow: $box-shadow-sm; border-radius: $border-radius-sm; padding: $spacing-md; @@ -226,7 +226,7 @@ z-index: 1; &:after { - background-color: tokens.$color-white; + background-color: color.$white; content: "\00a0"; // Empty space to render the pseudo element for the tooltip triangle pointer display: block; @@ -259,7 +259,7 @@ p { font-weight: 700; - color: tokens.$color-purple-60; + color: color.$purple-60; width: 100%; text-align: center; @@ -274,7 +274,7 @@ gap: $spacing-sm; margin: $spacing-md $spacing-sm; font-family: $font-stack-firefox; - color: tokens.$color-grey-50; + color: color.$grey-50; font-weight: 600; @media screen and #{$mq-sm} { @@ -284,21 +284,21 @@ input[type="checkbox"] { width: 20px; height: 20px; - border: 2px solid tokens.$color-grey-40; + border: 2px solid color.$grey-40; border-radius: $border-radius-sm; -webkit-appearance: none; } input[type="checkbox"]:checked { - background-color: tokens.$color-blue-50; - border-color: tokens.$color-blue-50; + background-color: color.$blue-50; + border-color: color.$blue-50; appearance: checkbox; } .promotionals-blocking-description { a { display: block; - color: tokens.$color-blue-50; + color: color.$blue-50; &:hover { text-decoration: underline; @@ -323,7 +323,7 @@ background-color: transparent; cursor: pointer; border-radius: $border-radius-sm; - color: tokens.$color-blue-50; + color: color.$blue-50; padding: $spacing-sm 0; &:hover { @@ -331,7 +331,7 @@ } &:focus { - color: tokens.$color-blue-50; + color: color.$blue-50; } } } diff --git a/frontend/src/components/dashboard/aliases/LabelEditor.module.scss b/frontend/src/components/dashboard/aliases/LabelEditor.module.scss index b3cec47982..4ee374bb77 100644 --- a/frontend/src/components/dashboard/aliases/LabelEditor.module.scss +++ b/frontend/src/components/dashboard/aliases/LabelEditor.module.scss @@ -1,4 +1,4 @@ -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .label-form { @@ -39,8 +39,8 @@ top: 40px; left: 0; opacity: 0; - background-color: tokens.$color-green-60; - color: tokens.$color-white; + background-color: color.$green-60; + color: color.$white; border-radius: $border-radius-sm; transition: opacity 200ms; padding: $spacing-xs; @@ -57,7 +57,7 @@ &::after { // This is the little arrow that attaches the message to the form $arrowEdgeLength: 4px; - background-color: tokens.$color-green-60; + background-color: color.$green-60; height: 2 * $arrowEdgeLength; width: 2 * $arrowEdgeLength; transform: rotate(45deg); diff --git a/frontend/src/components/dashboard/aliases/MaskCard.module.scss b/frontend/src/components/dashboard/aliases/MaskCard.module.scss index f5bd3ff71d..7c486b3715 100644 --- a/frontend/src/components/dashboard/aliases/MaskCard.module.scss +++ b/frontend/src/components/dashboard/aliases/MaskCard.module.scss @@ -1,8 +1,8 @@ @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../../../styles/tokens"; +@use "../../../styles/color"; .card { - background-color: tokens.$color-white; + background-color: color.$white; border-radius: $border-radius-md; transition: box-shadow 200ms ease-in-out, @@ -41,7 +41,7 @@ @media screen and #{$mq-md} { // Same as .summary's gap: padding-inline-end: $spacing-sm; - border-right: 1px solid tokens.$color-grey-10; + border-right: 1px solid color.$grey-10; } } @@ -63,7 +63,7 @@ align-items: center; gap: $spacing-xs; background-color: transparent; - color: tokens.$color-blue-50; + color: color.$blue-50; border-style: none; font-family: $font-stack-firefox; font-weight: 500; @@ -72,7 +72,7 @@ overflow: inherit; &:hover { - color: tokens.$color-green-70; + color: color.$green-70; } samp { @@ -90,7 +90,7 @@ } .copied-confirmation { - background-color: tokens.$color-green-50; + background-color: color.$green-50; padding: $spacing-xs $spacing-sm; border-radius: $border-radius-md; font-weight: 600; @@ -116,7 +116,7 @@ .block-level-label { flex: 1 0 auto; text-align: end; - color: tokens.$color-grey-50; + color: color.$grey-50; display: none; @media screen and #{$mq-lg} { @@ -133,7 +133,7 @@ background-color: transparent; border-style: none; cursor: pointer; - color: tokens.$color-grey-40; + color: color.$grey-40; border-radius: $border-radius-sm; width: $layout-sm; z-index: 3; // Ensures that the button gets placed above the copied label (needed for long custom domains at viewport width ~ 780px) @@ -143,8 +143,8 @@ } &:hover { - background-color: tokens.$color-grey-05; - color: tokens.$color-blue-50; + background-color: color.$grey-05; + color: color.$blue-50; } svg { @@ -175,7 +175,7 @@ grid-template-rows: 1fr; .details { - border-top: 1px solid tokens.$color-grey-10; + border-top: 1px solid color.$grey-10; @media screen and #{$mq-md} { padding: $spacing-md $spacing-lg; @@ -192,7 +192,7 @@ display: flex; flex-direction: column; padding-inline: $spacing-md; - border-bottom: 1px solid tokens.$color-grey-10; + border-bottom: 1px solid color.$grey-10; .stat { display: flex; @@ -200,7 +200,7 @@ padding-block: $spacing-sm; &:not(:last-child) { - border-bottom: 1px solid tokens.$color-grey-10; + border-bottom: 1px solid color.$grey-10; } // De-emphasise stats for: @@ -213,7 +213,7 @@ .is-disabled &.trackers-removed-stat, // - forwarded emails when a mask is not forwarding emails. .is-disabled &.forwarded-stat { - color: tokens.$color-grey-40; + color: color.$grey-40; } dt { @@ -237,7 +237,7 @@ display: flex; flex-direction: column-reverse; align-items: center; - background-color: tokens.$color-grey-05; + background-color: color.$grey-05; padding: $spacing-sm; border-radius: $border-radius-sm; @@ -251,7 +251,7 @@ .is-disabled &.trackers-removed-stat, // - forwarded emails when a mask is not forwarding emails. .is-disabled &.forwarded-stat { - color: tokens.$color-grey-30; + color: color.$grey-30; } dd { @@ -267,7 +267,7 @@ .block-level { a { - color: tokens.$color-blue-50; + color: color.$blue-50; font-weight: 500; &:hover { @@ -284,7 +284,7 @@ .block-level-setting-description { @include text-body-sm; - background-color: tokens.$color-grey-05; + background-color: color.$grey-05; padding: $spacing-lg; border-radius: $border-radius-md; position: relative; @@ -296,7 +296,7 @@ position: absolute; top: -1 * $arrowWidth; transform: rotate(45deg); - background-color: tokens.$color-grey-05; + background-color: color.$grey-05; } &.without-chevron::after { @@ -345,9 +345,9 @@ .block-level-segmented-control { $toggle-border-radius: 40px; - background-color: tokens.$color-grey-05; + background-color: color.$grey-05; border-radius: $toggle-border-radius; - border: $border-radius-xs solid tokens.$color-grey-10; + border: $border-radius-xs solid color.$grey-10; padding: $spacing-xs; display: flex; align-items: center; @@ -361,37 +361,37 @@ gap: $spacing-sm; align-items: center; justify-content: center; - background-color: tokens.$color-white; + background-color: color.$white; border-radius: $toggle-border-radius; font-weight: 500; - color: tokens.$color-grey-40; + color: color.$grey-40; cursor: pointer; &:not(.is-selected) { &:hover { - background-color: tokens.$color-violet-30; - color: tokens.$color-white; + background-color: color.$violet-30; + color: color.$white; } } .is-selected &.is-disabled { &:hover { - border: 1px solid tokens.$color-violet-70; + border: 1px solid color.$violet-70; } } &.is-selected { - background-color: tokens.$color-violet-70; - color: tokens.$color-white; + background-color: color.$violet-70; + color: color.$white; } &.is-focused { - outline: 3px solid tokens.$color-blue-50; + outline: 3px solid color.$blue-50; } &.is-disabled { padding-inline: $spacing-md; - color: tokens.$color-grey-30; + color: color.$grey-30; @media screen and #{$mq-md} { svg { @@ -402,7 +402,7 @@ &.promo-selected { outline-width: 2px; - outline-color: tokens.$color-violet-70; + outline-color: color.$violet-70; outline-style: solid; } } @@ -419,7 +419,7 @@ display: flex; flex-direction: column; gap: $spacing-md; - border-top: 1px solid tokens.$color-grey-10; + border-top: 1px solid color.$grey-10; padding: $spacing-lg; dd { @@ -435,14 +435,14 @@ .deletion-button-wrapper { display: flex; flex-direction: column; - border-top: 1px solid tokens.$color-grey-10; + border-top: 1px solid color.$grey-10; padding: $spacing-md; } } @media screen and #{$mq-md} { display: flex; padding-block: $spacing-lg $spacing-sm; - border-top: 1px solid tokens.$color-grey-10; + border-top: 1px solid color.$grey-10; dl { display: flex; @@ -451,14 +451,14 @@ dt { @include text-body-sm; - color: tokens.$color-grey-50; + color: color.$grey-50; } dd { display: flex; align-items: center; gap: $spacing-sm; - color: tokens.$color-grey-60; + color: color.$grey-60; } } @@ -471,7 +471,7 @@ .promotions-locked-description-wrapper { margin-top: $spacing-md; - background: tokens.$color-grey-05; + background: color.$grey-05; border-radius: $border-radius-md; padding: $spacing-md; display: flex; @@ -482,7 +482,7 @@ display: flex; align-items: center; gap: $spacing-sm; - color: tokens.$color-grey-50; + color: color.$grey-50; } } @@ -498,9 +498,9 @@ width: $content-xs; position: absolute; padding: $spacing-sm $spacing-md; - color: tokens.$color-black; - background: tokens.$color-white; - border: solid 4px tokens.$color-purple-50; + color: color.$black; + background: color.$white; + border: solid 4px color.$purple-50; border-radius: $border-radius-md; right: $spacing-xl; box-shadow: $box-shadow-md; diff --git a/frontend/src/components/dashboard/subdomain/ConfirmationForm.module.scss b/frontend/src/components/dashboard/subdomain/ConfirmationForm.module.scss index 1e754bb6be..ce346652ea 100644 --- a/frontend/src/components/dashboard/subdomain/ConfirmationForm.module.scss +++ b/frontend/src/components/dashboard/subdomain/ConfirmationForm.module.scss @@ -1,4 +1,4 @@ -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .permanence-warning { diff --git a/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss b/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss index 39c66a7b41..93b337487a 100644 --- a/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss +++ b/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss @@ -1,4 +1,4 @@ -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../../styles/text"; diff --git a/frontend/src/components/dashboard/subdomain/SubdomainInfoTooltip.module.scss b/frontend/src/components/dashboard/subdomain/SubdomainInfoTooltip.module.scss index 684af5c2e1..b050bd5d35 100644 --- a/frontend/src/components/dashboard/subdomain/SubdomainInfoTooltip.module.scss +++ b/frontend/src/components/dashboard/subdomain/SubdomainInfoTooltip.module.scss @@ -1,4 +1,4 @@ -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/mixins/typography"; diff --git a/frontend/src/components/dashboard/tips/CustomAliasTip.module.scss b/frontend/src/components/dashboard/tips/CustomAliasTip.module.scss index 27978343c4..8f2c773293 100644 --- a/frontend/src/components/dashboard/tips/CustomAliasTip.module.scss +++ b/frontend/src/components/dashboard/tips/CustomAliasTip.module.scss @@ -1,4 +1,4 @@ -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .custom-alias-tip { diff --git a/frontend/src/components/dashboard/tips/GenericTip.module.scss b/frontend/src/components/dashboard/tips/GenericTip.module.scss index 4625daf2ea..d73b9cb16b 100644 --- a/frontend/src/components/dashboard/tips/GenericTip.module.scss +++ b/frontend/src/components/dashboard/tips/GenericTip.module.scss @@ -1,4 +1,4 @@ -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .generic-tip { diff --git a/frontend/src/components/dashboard/tips/Tips.module.scss b/frontend/src/components/dashboard/tips/Tips.module.scss index 665ba74144..3e20f9437e 100644 --- a/frontend/src/components/dashboard/tips/Tips.module.scss +++ b/frontend/src/components/dashboard/tips/Tips.module.scss @@ -1,4 +1,4 @@ -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .wrapper { diff --git a/frontend/src/components/landing/BundleBanner.module.scss b/frontend/src/components/landing/BundleBanner.module.scss index f825ada3fb..e328687e54 100644 --- a/frontend/src/components/landing/BundleBanner.module.scss +++ b/frontend/src/components/landing/BundleBanner.module.scss @@ -1,4 +1,4 @@ -@use "../../styles/tokens"; +@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../styles/text"; diff --git a/frontend/src/components/landing/DemoPhone.module.scss b/frontend/src/components/landing/DemoPhone.module.scss index 9d70f3ecdc..a42e962698 100644 --- a/frontend/src/components/landing/DemoPhone.module.scss +++ b/frontend/src/components/landing/DemoPhone.module.scss @@ -1,4 +1,4 @@ -@use "../../styles/tokens"; +@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .container { diff --git a/frontend/src/components/landing/FaqAccordion.module.scss b/frontend/src/components/landing/FaqAccordion.module.scss index 3d4464f4ff..e79e8d39df 100644 --- a/frontend/src/components/landing/FaqAccordion.module.scss +++ b/frontend/src/components/landing/FaqAccordion.module.scss @@ -1,4 +1,4 @@ -@use "../../styles/tokens"; +@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .entry { diff --git a/frontend/src/components/landing/HighlightedFeatures.module.scss b/frontend/src/components/landing/HighlightedFeatures.module.scss index 648fca9792..e8010337b6 100644 --- a/frontend/src/components/landing/HighlightedFeatures.module.scss +++ b/frontend/src/components/landing/HighlightedFeatures.module.scss @@ -1,4 +1,4 @@ -@use "../../styles/tokens"; +@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../styles/text"; diff --git a/frontend/src/components/landing/PlanMatrix.module.scss b/frontend/src/components/landing/PlanMatrix.module.scss index 7ab2dc9c73..4c76b5bc77 100644 --- a/frontend/src/components/landing/PlanMatrix.module.scss +++ b/frontend/src/components/landing/PlanMatrix.module.scss @@ -1,4 +1,4 @@ -@use "../../styles/tokens"; +@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../styles/text"; @@ -75,7 +75,7 @@ table.desktop { thead tr, tbody tr, tfoot tr:not(:last-child) { - border-bottom: $row-spacing solid tokens.$color-grey-10; + border-bottom: $row-spacing solid color.$grey-10; } tr { @@ -108,7 +108,7 @@ table.desktop { thead { tr { th:first-child { - color: tokens.$color-grey-40; + color: color.$grey-40; } &:first-child th { @@ -368,7 +368,7 @@ table.desktop { .pricing-toggle { display: flex; - background-color: tokens.$color-grey-10; + background-color: color.$grey-10; padding: $spacing-xs; border-radius: $border-radius-lg; @@ -377,7 +377,7 @@ table.desktop { width: 50%; padding: $spacing-xs $spacing-sm; text-align: center; - color: tokens.$color-grey-40; + color: color.$grey-40; font-weight: 500; cursor: pointer; diff --git a/frontend/src/components/landing/Reviews.module.scss b/frontend/src/components/landing/Reviews.module.scss index 05db76aaee..05b57dbb60 100644 --- a/frontend/src/components/landing/Reviews.module.scss +++ b/frontend/src/components/landing/Reviews.module.scss @@ -1,4 +1,4 @@ -@use "../../styles/tokens"; +@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../styles/text"; @@ -85,7 +85,7 @@ .text { @include text-body-sm; - color: tokens.$color-grey-40; + color: color.$grey-40; font-family: $font-stack-base; font-weight: 500; } @@ -104,7 +104,7 @@ .empty-star { color: $color-white; - stroke: tokens.$color-grey-20; + stroke: color.$grey-20; stroke-width: 2px; } @@ -112,7 +112,7 @@ appearance: none; border: none; padding: 0; - color: tokens.$color-grey-30; + color: color.$grey-30; background: transparent; width: $layout-sm; align-self: center; @@ -209,7 +209,7 @@ .source { @include text-body-sm; - color: tokens.$color-grey-30; + color: color.$grey-30; } .star { @@ -286,7 +286,7 @@ padding: $spacing-md 0; &:hover { - background-color: tokens.$color-grey-10; + background-color: color.$grey-10; } svg { diff --git a/frontend/src/components/layout/Layout.module.scss b/frontend/src/components/layout/Layout.module.scss index a1e0071174..4e24ce2439 100644 --- a/frontend/src/components/layout/Layout.module.scss +++ b/frontend/src/components/layout/Layout.module.scss @@ -1,4 +1,4 @@ -@use "../../styles/tokens"; +@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .patch3701 { @@ -13,15 +13,15 @@ // See https://fkhadra.github.io/react-toastify/how-to-style#override-css-variables --toastify-toast-width: 95%; --toastify-color-light: #{$color-white}; - --toastify-color-dark: #{tokens.$color-grey-50}; + --toastify-color-dark: #{color.$grey-50}; --toastify-color-info: #{$color-blue-50}; --toastify-color-success: #{$color-green-50}; --toastify-color-warning: #{$color-yellow-50}; --toastify-color-error: #{$color-red-60}; --toastify-text-color-info: #{$color-white}; - --toastify-text-color-success: #{tokens.$color-grey-50}; - --toastify-text-color-warning: #{tokens.$color-grey-50}; + --toastify-text-color-success: #{color.$grey-50}; + --toastify-text-color-warning: #{color.$grey-50}; --toastify-text-color-error: #{$color-white}; --toastify-toast-min-height: $layout-md; @@ -67,7 +67,7 @@ $toastify-toast-close-button: var(--toast-close-button); &[class*="toast--success"], &[class*="toast--warning"] { [id*="close-toast-button-icon"] { - color: #{tokens.$color-grey-50}; + color: #{color.$grey-50}; } } @@ -252,7 +252,7 @@ $toastify-toast-close-button: var(--toast-close-button); &.is-light { background-color: $color-white; - color: tokens.$color-grey-40; + color: color.$grey-40; } &.is-grey { diff --git a/frontend/src/components/layout/navigation/AppPicker.module.scss b/frontend/src/components/layout/navigation/AppPicker.module.scss index bf6449ff74..c5c4af3517 100644 --- a/frontend/src/components/layout/navigation/AppPicker.module.scss +++ b/frontend/src/components/layout/navigation/AppPicker.module.scss @@ -1,4 +1,4 @@ -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .wrapper { @@ -21,7 +21,7 @@ color: $color-white; &.premium { - color: tokens.$color-grey-40; + color: color.$grey-40; } &:hover { color: $color-purple-20; diff --git a/frontend/src/components/layout/navigation/DashboardSwitcher.module.scss b/frontend/src/components/layout/navigation/DashboardSwitcher.module.scss index bf5c97d7b4..dcd24212ec 100644 --- a/frontend/src/components/layout/navigation/DashboardSwitcher.module.scss +++ b/frontend/src/components/layout/navigation/DashboardSwitcher.module.scss @@ -1,5 +1,5 @@ @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../../../styles/tokens"; +@use "../../../styles/color"; .nav-mask-phone { width: 100%; @@ -15,28 +15,28 @@ border-bottom: 5px solid transparent; &.is-active { - border-bottom: 5px solid tokens.$color-purple-40; + border-bottom: 5px solid color.$purple-40; } &:hover { - background-color: tokens.$color-purple-05; + background-color: color.$purple-05; } } .nav-mask-phone-icon { - color: tokens.$color-grey-40; - stroke: tokens.$color-grey-40; + color: color.$grey-40; + stroke: color.$grey-40; stroke-width: 0.5px; p, p.is-active { - color: tokens.$color-purple-70; + color: color.$purple-70; text-transform: uppercase; } &.is-active { - color: tokens.$color-purple-40; - stroke: tokens.$color-purple-40; + color: color.$purple-40; + stroke: color.$purple-40; } } diff --git a/frontend/src/components/layout/navigation/MenuToggle.module.scss b/frontend/src/components/layout/navigation/MenuToggle.module.scss index c501adc2af..56adb3d087 100644 --- a/frontend/src/components/layout/navigation/MenuToggle.module.scss +++ b/frontend/src/components/layout/navigation/MenuToggle.module.scss @@ -1 +1 @@ -@use "../../../styles/tokens"; +@use "../../../styles/color"; diff --git a/frontend/src/components/layout/navigation/MobileNavigation.module.scss b/frontend/src/components/layout/navigation/MobileNavigation.module.scss index 0b270c762e..0c3bd9c9f0 100644 --- a/frontend/src/components/layout/navigation/MobileNavigation.module.scss +++ b/frontend/src/components/layout/navigation/MobileNavigation.module.scss @@ -1,4 +1,4 @@ -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../../styles/text"; @@ -100,7 +100,7 @@ flex-direction: row; gap: $spacing-md; font-weight: 500; - color: tokens.$color-grey-40; + color: color.$grey-40; cursor: pointer; @media screen and (max-height: 700px) { @@ -170,7 +170,7 @@ flex-direction: row; display: flex; align-items: center; - color: tokens.$color-grey-40; + color: color.$grey-40; @include text-body-sm; gap: $spacing-sm; diff --git a/frontend/src/components/layout/navigation/Navigation.module.scss b/frontend/src/components/layout/navigation/Navigation.module.scss index 8fe1509625..f4d0823a2d 100644 --- a/frontend/src/components/layout/navigation/Navigation.module.scss +++ b/frontend/src/components/layout/navigation/Navigation.module.scss @@ -1,4 +1,4 @@ -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .site-nav { @@ -33,7 +33,7 @@ height: 4px; display: block; content: ""; - background: tokens.$firefoxGradient; + background: color.$firefoxGradient; position: absolute; bottom: 0; } diff --git a/frontend/src/components/layout/navigation/SignInButton.module.scss b/frontend/src/components/layout/navigation/SignInButton.module.scss index 3b49327e3a..bfc9350ee6 100644 --- a/frontend/src/components/layout/navigation/SignInButton.module.scss +++ b/frontend/src/components/layout/navigation/SignInButton.module.scss @@ -1,4 +1,4 @@ -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .sign-in-button { @@ -9,6 +9,6 @@ padding: $spacing-xs $spacing-md; &:focus { - color: tokens.$color-blue-30; + color: color.$blue-30; } } diff --git a/frontend/src/components/layout/navigation/SignUpButton.module.scss b/frontend/src/components/layout/navigation/SignUpButton.module.scss index 905541f67e..e03ac8229f 100644 --- a/frontend/src/components/layout/navigation/SignUpButton.module.scss +++ b/frontend/src/components/layout/navigation/SignUpButton.module.scss @@ -1,4 +1,4 @@ -@use "../../../styles/tokens"; +@use "../../../styles/color"; .sign-up-button { color: currentColor; diff --git a/frontend/src/components/layout/navigation/UpgradeButton.module.scss b/frontend/src/components/layout/navigation/UpgradeButton.module.scss index 462a14dff4..61e5863552 100644 --- a/frontend/src/components/layout/navigation/UpgradeButton.module.scss +++ b/frontend/src/components/layout/navigation/UpgradeButton.module.scss @@ -1,4 +1,4 @@ -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; #upgrade-button { diff --git a/frontend/src/components/layout/navigation/UserMenu.module.scss b/frontend/src/components/layout/navigation/UserMenu.module.scss index fc7009b2a5..01bc142fd2 100644 --- a/frontend/src/components/layout/navigation/UserMenu.module.scss +++ b/frontend/src/components/layout/navigation/UserMenu.module.scss @@ -1,4 +1,4 @@ -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../../styles/text"; @@ -59,7 +59,7 @@ $popupBackgroundColor calc(100% - $gradientWidth), rgba(0, 0, 0, 0) ), - tokens.$firefoxGradient; + color.$firefoxGradient; margin-bottom: $spacing-md; padding: $spacing-lg; // To avoid overlapping .popup's rounded corners, diff --git a/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss b/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss index 15eef2187d..0bdc35d2bf 100644 --- a/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss +++ b/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss @@ -1,4 +1,4 @@ -@use "../../../../styles/tokens"; +@use "../../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../../../styles/text"; diff --git a/frontend/src/components/layout/navigation/whatsnew/WhatsNewDashboard.module.scss b/frontend/src/components/layout/navigation/whatsnew/WhatsNewDashboard.module.scss index 327c4a3e02..e1519aef39 100644 --- a/frontend/src/components/layout/navigation/whatsnew/WhatsNewDashboard.module.scss +++ b/frontend/src/components/layout/navigation/whatsnew/WhatsNewDashboard.module.scss @@ -1,4 +1,4 @@ -@use "../../../../styles/tokens"; +@use "../../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .wrapper { diff --git a/frontend/src/components/layout/navigation/whatsnew/WhatsNewList.module.scss b/frontend/src/components/layout/navigation/whatsnew/WhatsNewList.module.scss index a95c10c119..1d05aef926 100644 --- a/frontend/src/components/layout/navigation/whatsnew/WhatsNewList.module.scss +++ b/frontend/src/components/layout/navigation/whatsnew/WhatsNewList.module.scss @@ -1,4 +1,4 @@ -@use "../../../../styles/tokens"; +@use "../../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .empty-message { diff --git a/frontend/src/components/layout/navigation/whatsnew/WhatsNewMenu.module.scss b/frontend/src/components/layout/navigation/whatsnew/WhatsNewMenu.module.scss index 1fa2346c3d..39ff831f36 100644 --- a/frontend/src/components/layout/navigation/whatsnew/WhatsNewMenu.module.scss +++ b/frontend/src/components/layout/navigation/whatsnew/WhatsNewMenu.module.scss @@ -1,4 +1,4 @@ -@use "../../../../styles/tokens"; +@use "../../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; diff --git a/frontend/src/components/layout/topmessage/CsatSurvey.module.scss b/frontend/src/components/layout/topmessage/CsatSurvey.module.scss index 6078e0b22a..18a8764e2f 100644 --- a/frontend/src/components/layout/topmessage/CsatSurvey.module.scss +++ b/frontend/src/components/layout/topmessage/CsatSurvey.module.scss @@ -1,4 +1,4 @@ -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .wrapper { diff --git a/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss b/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss index f23e1cb834..6963855091 100644 --- a/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss +++ b/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss @@ -1,4 +1,4 @@ -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; // Hardcoding #5015cd after talking with design, no token for this color exists yet in Nebula. diff --git a/frontend/src/components/layout/topmessage/InterviewRecruitment.module.scss b/frontend/src/components/layout/topmessage/InterviewRecruitment.module.scss index 149c1e738e..8334828f4b 100644 --- a/frontend/src/components/layout/topmessage/InterviewRecruitment.module.scss +++ b/frontend/src/components/layout/topmessage/InterviewRecruitment.module.scss @@ -1,4 +1,4 @@ -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; $dismissButtonWidth: 30px; @@ -10,8 +10,8 @@ $dismissButtonWidth: 30px; justify-content: space-around; gap: $spacing-sm; padding: $spacing-md ($spacing-sm + $dismissButtonWidth + $spacing-md); - background-color: tokens.$color-purple-90; - color: tokens.$color-white; + background-color: color.$purple-90; + color: color.$white; position: relative; // Overlap the collapsed mobile menu (#mobile-menu.not-active), // which itself has a z-index of 1 to overlap the content. @@ -22,7 +22,7 @@ $dismissButtonWidth: 30px; right: $spacing-md; background-color: transparent; border-style: none; - color: tokens.$color-white; + color: color.$white; width: $dismissButtonWidth; height: $dismissButtonWidth; display: flex; @@ -33,7 +33,7 @@ $dismissButtonWidth: 30px; padding: 0; &:hover { - background-color: tokens.$color-blue-50; + background-color: color.$blue-50; } } diff --git a/frontend/src/components/layout/topmessage/NpsSurvey.module.scss b/frontend/src/components/layout/topmessage/NpsSurvey.module.scss index 4ed8c7a0fb..b816a552ef 100644 --- a/frontend/src/components/layout/topmessage/NpsSurvey.module.scss +++ b/frontend/src/components/layout/topmessage/NpsSurvey.module.scss @@ -1,4 +1,4 @@ -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .wrapper { diff --git a/frontend/src/components/layout/topmessage/PhoneSurvey.module.scss b/frontend/src/components/layout/topmessage/PhoneSurvey.module.scss index 149c1e738e..8334828f4b 100644 --- a/frontend/src/components/layout/topmessage/PhoneSurvey.module.scss +++ b/frontend/src/components/layout/topmessage/PhoneSurvey.module.scss @@ -1,4 +1,4 @@ -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; $dismissButtonWidth: 30px; @@ -10,8 +10,8 @@ $dismissButtonWidth: 30px; justify-content: space-around; gap: $spacing-sm; padding: $spacing-md ($spacing-sm + $dismissButtonWidth + $spacing-md); - background-color: tokens.$color-purple-90; - color: tokens.$color-white; + background-color: color.$purple-90; + color: color.$white; position: relative; // Overlap the collapsed mobile menu (#mobile-menu.not-active), // which itself has a z-index of 1 to overlap the content. @@ -22,7 +22,7 @@ $dismissButtonWidth: 30px; right: $spacing-md; background-color: transparent; border-style: none; - color: tokens.$color-white; + color: color.$white; width: $dismissButtonWidth; height: $dismissButtonWidth; display: flex; @@ -33,7 +33,7 @@ $dismissButtonWidth: 30px; padding: 0; &:hover { - background-color: tokens.$color-blue-50; + background-color: color.$blue-50; } } diff --git a/frontend/src/components/phones/dashboard/PhoneDashboard.module.scss b/frontend/src/components/phones/dashboard/PhoneDashboard.module.scss index b866a54687..0ee3231f46 100644 --- a/frontend/src/components/phones/dashboard/PhoneDashboard.module.scss +++ b/frontend/src/components/phones/dashboard/PhoneDashboard.module.scss @@ -1,5 +1,5 @@ @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../../../styles/tokens"; +@use "../../../styles/color"; .main-phone-wrapper { height: 100%; @@ -27,7 +27,7 @@ stroke-width: 1px; &:hover { - color: tokens.$color-blue-50; + color: color.$blue-50; } } @@ -50,11 +50,11 @@ cursor: pointer; &:hover { - color: tokens.$color-blue-50; + color: color.$blue-50; .nav-icon { - color: tokens.$color-blue-50; - stroke: tokens.$color-blue-50; + color: color.$blue-50; + stroke: color.$blue-50; } } @@ -140,15 +140,15 @@ display: inline-block; padding: $spacing-md 0; font-weight: 700; - color: tokens.$color-blue-50; + color: color.$blue-50; &:hover { - color: tokens.$color-blue-80; + color: color.$blue-80; } } .warning-icon { - color: tokens.$color-yellow-50; + color: color.$yellow-50; min-width: 20px; } } @@ -249,21 +249,21 @@ } .block-btn { - color: tokens.$color-blue-50; + color: color.$blue-50; border: 0; padding: 0; background: transparent; cursor: pointer; &:hover { - color: tokens.$color-blue-80; + color: color.$blue-80; } } } .dashboard-card { box-shadow: $box-shadow-sm; - background-color: tokens.$color-white; + background-color: color.$white; border-radius: $border-radius-md; display: flex; flex-direction: column; @@ -380,7 +380,7 @@ border: 0; background-color: transparent; text-align: center; - color: tokens.$color-grey-20; + color: color.$grey-20; cursor: pointer; svg { @@ -388,7 +388,7 @@ } &:hover { - color: tokens.$color-grey-30; + color: color.$grey-30; } } @@ -399,8 +399,8 @@ justify-content: center; pointer-events: none; transition: opacity 2s; - background-color: tokens.$color-violet-30; - color: tokens.$color-white; + background-color: color.$violet-30; + color: color.$white; border-radius: $border-radius-md; right: 0; @@ -435,10 +435,10 @@ .forwarding-toggle { width: $content-sm; max-width: 100%; - background-color: tokens.$color-grey-05; + background-color: color.$grey-05; border-radius: $toggle-border-radius; - border: 6px solid tokens.$color-white; - outline: $border-radius-xs solid tokens.$color-grey-10; + border: 6px solid color.$white; + outline: $border-radius-xs solid color.$grey-10; display: flex; align-items: center; justify-content: center; @@ -450,7 +450,7 @@ &::before { content: ""; position: absolute; - background-color: tokens.$color-violet-70; + background-color: color.$violet-70; border-radius: $toggle-border-radius; width: 50%; height: 100%; @@ -484,24 +484,24 @@ &[aria-pressed="true"] .forward-state, &[aria-pressed="false"] .block-state { - color: tokens.$color-white; + color: color.$white; } &[aria-pressed="false"] .forward-state, &[aria-pressed="true"] .block-state { - color: tokens.$color-grey-30; + color: color.$grey-30; } &:hover { cursor: pointer; - background-color: tokens.$color-violet-05; + background-color: color.$violet-05; &[aria-pressed="true"] .block-state, &[aria-pressed="false"] .forward-state { - color: tokens.$color-blue-50; + color: color.$blue-50; } } &:focus-visible { - outline-color: tokens.$color-blue-50; + outline-color: color.$blue-50; } } } diff --git a/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss b/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss index 68815882d2..5f0a4c3610 100644 --- a/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss +++ b/frontend/src/components/phones/dashboard/PhoneWelcomeView.module.scss @@ -1,5 +1,5 @@ @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "../../../styles/text"; .main-wrapper { @@ -80,14 +80,14 @@ margin: 0; padding: 0; text-decoration: underline; - color: tokens.$color-blue-50; + color: color.$blue-50; cursor: pointer; font-weight: 500; background: none; border: none; &:hover { - color: tokens.$color-blue-80; + color: color.$blue-80; } } @@ -144,7 +144,7 @@ display: flex; flex-direction: column; padding: $spacing-sm; - background: tokens.$color-white; + background: color.$white; box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1); // Taken from Figma style to match it with the other svgs border-radius: $border-radius-md; list-style: none; @@ -171,7 +171,7 @@ } &:nth-child(2) { - color: tokens.$color-blue-50; + color: color.$blue-50; } } } diff --git a/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss b/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss index 7e4e64b34a..b64c86c879 100644 --- a/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss +++ b/frontend/src/components/phones/onboarding/PurchasePhonesPlan.module.scss @@ -1,5 +1,5 @@ @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "../../../styles/text"; .wrapper { @@ -58,7 +58,7 @@ padding: 0; ::marker { - color: tokens.$color-violet-60; + color: color.$violet-60; } } } @@ -72,7 +72,7 @@ justify-items: center; text-align: center; gap: $spacing-md; - background-color: tokens.$color-white; + background-color: color.$white; padding: $spacing-lg $spacing-2xl; border-radius: $border-radius-md; box-shadow: $box-shadow-sm; @@ -92,7 +92,7 @@ .pricing-toggle { display: flex; - background-color: tokens.$color-grey-10; + background-color: color.$grey-10; padding: $spacing-xs; border-radius: $border-radius-lg; @@ -101,14 +101,14 @@ width: 50%; padding: $spacing-xs $spacing-sm; text-align: center; - color: tokens.$color-grey-40; + color: color.$grey-40; font-weight: 500; cursor: pointer; &.is-selected { - background-color: tokens.$color-white; + background-color: color.$white; border-radius: $border-radius-lg; - color: tokens.$color-blue-50; + color: color.$blue-50; } } } diff --git a/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss b/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss index 12026cda16..3e891114e0 100644 --- a/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss +++ b/frontend/src/components/phones/onboarding/RealPhoneSetup.module.scss @@ -1,6 +1,6 @@ @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "../../../styles/text"; .step { @@ -75,7 +75,7 @@ justify-items: center; text-align: center; gap: $spacing-md; - background-color: tokens.$color-white; + background-color: color.$white; padding: $spacing-lg $spacing-2xl; border-radius: $border-radius-md; box-shadow: $box-shadow-sm; @@ -101,7 +101,7 @@ .step-verify-input .error { max-width: $content-sm; - background-color: tokens.$color-white; + background-color: color.$white; border-radius: $border-radius-md; box-shadow: $box-shadow-sm; padding: $spacing-md; @@ -109,7 +109,7 @@ margin: 0 auto; } .step-verify-sub-body { - background-color: tokens.$color-white; + background-color: color.$white; border-radius: $border-radius-md; padding: $spacing-lg; } @@ -151,7 +151,7 @@ display: block; } h2 { - color: tokens.$color-error; + color: color.$error; } } @@ -160,13 +160,13 @@ display: block; } h2 { - color: tokens.$color-success; + color: color.$success; } } } form { - background-color: tokens.$color-white; + background-color: color.$white; box-shadow: $box-shadow-sm; padding: $spacing-lg; border-radius: $border-radius-md; @@ -201,14 +201,14 @@ padding: $spacing-sm; box-shadow: none; border: 0; - background-color: tokens.$color-grey-10; + background-color: color.$grey-10; letter-spacing: 1rem; text-align: center; width: 100%; &.is-error { - border: 2px solid tokens.$color-error; - outline: 4px solid tokens.$color-error-focus; + border: 2px solid color.$error; + outline: 4px solid color.$error-focus; } @media screen and #{$mq-md} { @@ -220,7 +220,7 @@ } .step-input-verificiation-code-timeout { - background-color: tokens.$color-white; + background-color: color.$white; box-shadow: $box-shadow-sm; border-radius: $border-radius-md; padding: $spacing-lg $spacing-2xl; @@ -240,7 +240,7 @@ } .step-input-verificiation-code-success { - background-color: tokens.$color-white; + background-color: color.$white; box-shadow: $box-shadow-sm; border-radius: $border-radius-md; padding: $spacing-lg $spacing-2xl; @@ -279,14 +279,14 @@ padding: $spacing-md $spacing-sm $spacing-md $spacing-2xl; &.is-error { - border: 2px solid tokens.$color-red-60; - box-shadow: 0 0 4px 4px tokens.$color-red-30; + border: 2px solid color.$red-60; + box-shadow: 0 0 4px 4px color.$red-30; } } // static country code in the real phone number input "+1" .phone-input-country-code { - background-color: tokens.$color-grey-10; + background-color: color.$grey-10; border-radius: $border-radius-sm; position: absolute; padding: 0 $spacing-sm; diff --git a/frontend/src/components/phones/onboarding/RelayNumberConfirmationModal.module.scss b/frontend/src/components/phones/onboarding/RelayNumberConfirmationModal.module.scss index 1c36a096b5..6cec195a2a 100644 --- a/frontend/src/components/phones/onboarding/RelayNumberConfirmationModal.module.scss +++ b/frontend/src/components/phones/onboarding/RelayNumberConfirmationModal.module.scss @@ -1,4 +1,4 @@ -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; @@ -47,7 +47,7 @@ border-style: none; background-color: transparent; cursor: pointer; - color: tokens.$color-grey-40; + color: color.$grey-40; &:hover { color: $color-link-hover; diff --git a/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss b/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss index cdaf2a8143..75c07f35a7 100644 --- a/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss +++ b/frontend/src/components/phones/onboarding/RelayNumberPicker.module.scss @@ -1,6 +1,6 @@ @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; -@use "../../../styles/tokens"; +@use "../../../styles/color"; @use "../../../styles/text"; .step, @@ -89,7 +89,7 @@ justify-items: center; text-align: center; gap: $spacing-md; - background-color: tokens.$color-white; + background-color: color.$white; padding: $spacing-lg $spacing-2xl; border-radius: $border-radius-md; box-shadow: $box-shadow-sm; @@ -140,7 +140,7 @@ display: block; } h2 { - color: tokens.$color-error; + color: color.$error; } } @@ -149,13 +149,13 @@ display: block; } h2 { - color: tokens.$color-success; + color: color.$success; } } } form { - background-color: tokens.$color-white; + background-color: color.$white; box-shadow: $box-shadow-sm; padding: $spacing-lg; border-radius: $border-radius-md; @@ -190,14 +190,14 @@ padding: $spacing-sm; box-shadow: none; border: 0; - background-color: tokens.$color-grey-10; + background-color: color.$grey-10; letter-spacing: 1rem; text-align: center; width: 100%; &.is-error { - border: 2px solid tokens.$color-error; - outline: 4px solid tokens.$color-error-focus; + border: 2px solid color.$error; + outline: 4px solid color.$error-focus; } @media screen and #{$mq-md} { @@ -209,7 +209,7 @@ } .step-input-verificiation-code-success { - background-color: tokens.$color-white; + background-color: color.$white; box-shadow: $box-shadow-sm; border-radius: $border-radius-md; padding: $spacing-lg $spacing-2xl; @@ -235,7 +235,7 @@ } .step-select-phone-number-mask { - background-color: tokens.$color-white; + background-color: color.$white; box-shadow: $box-shadow-sm; border-radius: $border-radius-md; padding: $spacing-xl $spacing-lg; diff --git a/frontend/src/pages/accounts/profile.module.scss b/frontend/src/pages/accounts/profile.module.scss index 644841f0a2..b78eb94cad 100644 --- a/frontend/src/pages/accounts/profile.module.scss +++ b/frontend/src/pages/accounts/profile.module.scss @@ -1,4 +1,4 @@ -@use "../../styles/tokens"; +@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../../styles/text"; @@ -181,12 +181,12 @@ cursor: pointer; &:hover { - background-color: tokens.$color-grey-10; + background-color: color.$grey-10; } } &.is-open .open-button { - background-color: tokens.$color-grey-10; + background-color: color.$grey-10; } .close-button { diff --git a/frontend/src/pages/accounts/settings.module.scss b/frontend/src/pages/accounts/settings.module.scss index e2402420f1..9ebcc9277e 100644 --- a/frontend/src/pages/accounts/settings.module.scss +++ b/frontend/src/pages/accounts/settings.module.scss @@ -1,5 +1,5 @@ @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../../styles/tokens"; +@use "../../styles/color"; .settings-page { display: flex; @@ -37,7 +37,7 @@ svg.menu-icon { // The size of text-body-lg, i.e. the same size as the containing 's font: width: remify(type-scale("body-lg-size")); - color: tokens.$color-violet-40; + color: color.$violet-40; } } } @@ -63,7 +63,7 @@ $field-gap: $spacing-lg; display: flex; flex-direction: column; gap: $field-gap; - color: tokens.$color-grey-50; + color: color.$grey-50; } .field { @@ -129,7 +129,7 @@ $field-gap: $spacing-lg; border-radius: $border-radius-sm; svg { - color: tokens.$color-yellow-50; + color: color.$yellow-50; flex: 1 0 auto; } } @@ -149,9 +149,9 @@ $field-gap: $spacing-lg; .copy-api-key-display { padding: $spacing-sm $spacing-md; - background-color: tokens.$color-grey-05; + background-color: color.$grey-05; border: 0; - outline: 1px solid tokens.$color-grey-20; + outline: 1px solid color.$grey-20; border-radius: $border-radius-md; white-space: nowrap; overflow: hidden; @@ -192,7 +192,7 @@ $field-gap: $spacing-lg; border: 0; background-color: transparent; text-align: center; - color: tokens.$color-grey-20; + color: color.$grey-20; cursor: pointer; svg { @@ -200,7 +200,7 @@ $field-gap: $spacing-lg; } &:hover { - color: tokens.$color-grey-30; + color: color.$grey-30; } } @@ -208,8 +208,8 @@ $field-gap: $spacing-lg; opacity: 0; pointer-events: none; transition: opacity 2s; - background-color: tokens.$color-violet-30; - color: tokens.$color-white; + background-color: color.$violet-30; + color: color.$white; border-radius: $border-radius-md; padding: 0 $spacing-xs; // On small screens, there's not enough room for the "Copied!" diff --git a/frontend/src/pages/contains-tracker-warning.module.scss b/frontend/src/pages/contains-tracker-warning.module.scss index 10f8fd973e..9a2bbdf96a 100644 --- a/frontend/src/pages/contains-tracker-warning.module.scss +++ b/frontend/src/pages/contains-tracker-warning.module.scss @@ -1,4 +1,4 @@ -@use "../styles/tokens"; +@use "../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../styles/text"; @@ -28,7 +28,7 @@ font-family: $font-stack-firefox; color: $color-black; border: none; - background-color: tokens.$color-grey-10; + background-color: color.$grey-10; white-space: nowrap; align-self: center; margin: 0 0 0 auto; @@ -52,14 +52,14 @@ font-size: 18px; font-weight: 600; font-family: $font-stack-firefox; - color: tokens.$color-grey-50; + color: color.$grey-50; } p { font-size: 16px; font-weight: 400; font-family: $font-stack-base; - color: tokens.$color-grey-40; + color: color.$grey-40; } } diff --git a/frontend/src/pages/faq.module.scss b/frontend/src/pages/faq.module.scss index 7f25785e60..ddefb53be6 100644 --- a/frontend/src/pages/faq.module.scss +++ b/frontend/src/pages/faq.module.scss @@ -1,4 +1,4 @@ -@use "../styles/tokens"; +@use "../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../styles/text"; diff --git a/frontend/src/pages/flags.module.scss b/frontend/src/pages/flags.module.scss index 8f6f1977ac..eda35e123c 100644 --- a/frontend/src/pages/flags.module.scss +++ b/frontend/src/pages/flags.module.scss @@ -1,4 +1,4 @@ -@use "../styles/tokens"; +@use "../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .wrapper { diff --git a/frontend/src/pages/index.module.scss b/frontend/src/pages/index.module.scss index dfb2b62eb8..efec4738ab 100644 --- a/frontend/src/pages/index.module.scss +++ b/frontend/src/pages/index.module.scss @@ -1,4 +1,4 @@ -@use "../styles/tokens"; +@use "../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../styles/text"; diff --git a/frontend/src/pages/mock/mockSession.module.scss b/frontend/src/pages/mock/mockSession.module.scss index 4f924dfc22..c6e93f4cc7 100644 --- a/frontend/src/pages/mock/mockSession.module.scss +++ b/frontend/src/pages/mock/mockSession.module.scss @@ -1,4 +1,4 @@ -@use "../../styles/tokens"; +@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .mock-session { diff --git a/frontend/src/pages/premium.module.scss b/frontend/src/pages/premium.module.scss index 620a17aa9b..ec74f53a79 100644 --- a/frontend/src/pages/premium.module.scss +++ b/frontend/src/pages/premium.module.scss @@ -1,5 +1,5 @@ @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../styles/tokens"; +@use "../styles/color"; @use "../styles/text"; .hero { @@ -108,8 +108,8 @@ } .pill { - background-color: tokens.$color-violet-30; - color: tokens.$color-white; + background-color: color.$violet-30; + color: color.$white; border-radius: $border-radius-sm; padding: $spacing-xs $spacing-sm; font-family: $font-stack-firefox; @@ -143,7 +143,7 @@ } .use-cases-wrapper { - background-color: tokens.$color-white; + background-color: color.$white; } .use-cases { diff --git a/frontend/src/pages/tracker-report.module.scss b/frontend/src/pages/tracker-report.module.scss index 8a6242a2ed..d65844225e 100644 --- a/frontend/src/pages/tracker-report.module.scss +++ b/frontend/src/pages/tracker-report.module.scss @@ -1,4 +1,4 @@ -@use "../styles/tokens"; +@use "../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "../styles/text"; @@ -30,7 +30,7 @@ .loading { padding: $spacing-xl; height: 100%; - background-color: tokens.$color-grey-05; + background-color: color.$grey-05; animation-name: fadein; animation-duration: 400ms; } @@ -38,11 +38,11 @@ .load-error { padding: $spacing-xl; height: 100%; - background-color: tokens.$color-grey-05; + background-color: color.$grey-05; } .report-wrapper { - background-color: tokens.$color-grey-05; + background-color: color.$grey-05; flex: 1 0 auto; display: flex; justify-content: center; @@ -74,7 +74,7 @@ @include text.title-2xs { font-family: $font-stack-firefox; padding: $spacing-md 0; - border-bottom: 1px solid tokens.$color-grey-20; + border-bottom: 1px solid color.$grey-20; } } @@ -91,12 +91,12 @@ } dt { - color: tokens.$color-grey-40; + color: color.$grey-40; } dd { font-weight: 600; - color: tokens.$color-grey-50; + color: color.$grey-50; } .from { @@ -157,12 +157,12 @@ column-gap: $spacing-md; row-gap: $spacing-xs; padding: $spacing-md 0; - color: tokens.$color-grey-50; - border-top: 1px solid tokens.$color-grey-10; + color: color.$grey-50; + border-top: 1px solid color.$grey-10; .icon { grid-area: icon; - color: tokens.$color-grey-20; + color: color.$grey-20; } .tracker-domain { @@ -194,7 +194,7 @@ display: flex; align-items: center; gap: $spacing-md; - background-color: tokens.$color-grey-10; + background-color: color.$grey-10; padding: $spacing-lg; border-radius: $border-radius-md; @@ -219,7 +219,7 @@ } hr { - background-color: tokens.$color-grey-10; + background-color: color.$grey-10; height: 2px; border-style: none; } diff --git a/frontend/src/pages/vpn-relay-welcome.module.scss b/frontend/src/pages/vpn-relay-welcome.module.scss index 96897b65a6..9eeb8c9799 100644 --- a/frontend/src/pages/vpn-relay-welcome.module.scss +++ b/frontend/src/pages/vpn-relay-welcome.module.scss @@ -1,5 +1,5 @@ @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "../styles/tokens"; +@use "../styles/color"; // TODO MPP-3946: Remove this legacy versioning comment // When this used @import, this versioning comment was duplicated because @@ -29,7 +29,7 @@ .headline { font-family: $font-stack-base; - color: tokens.$color-grey-40; + color: color.$grey-40; font-weight: 400; @include text-title-3xs; @@ -37,7 +37,7 @@ .subheadline { font-family: $font-stack-firefox; - color: tokens.$color-grey-60; + color: color.$grey-60; font-weight: 700; @include text-title-md; @@ -59,7 +59,7 @@ @media #{$mq-lg} { flex-direction: row; - background-color: tokens.$color-white; + background-color: color.$white; padding: 0 $spacing-2xl; border-radius: $border-radius-md; box-shadow: $box-shadow-sm; diff --git a/frontend/src/styles/color.scss b/frontend/src/styles/color.scss new file mode 100644 index 0000000000..9625e60af9 --- /dev/null +++ b/frontend/src/styles/color.scss @@ -0,0 +1,163 @@ +/* + next.js will rename the file if any of the content changes (after processing + and compression), which will invalidate the cache. Django makes further + changes, such as fixing the sourcemap path. If an update to + django.contrib.staticfiles or RelayStaticFilesStorage changes the content, + increment the "cache version" comment below and in globals.scss to force a + content change and cache invalidation. +*/ +/*! v=1 */ + +$firefoxGradient: linear-gradient( + -90deg, + #ff9100 0%, + #f10366 50%, + #6173ff 100% +); + +// For use with box-shadow: +$buttonFocusOutline: + 0 0 0 1px #0a84ff, + 0 0 0 1px #0a84ff, + 0 0 0 4px rgba(10, 132, 255, 0.3); + +// Overwrite the Protocol colours with Nebula colours: +// Purple: +$purple-90: #321c64; +$purple-80: #45278d; +$purple-70: #592acb; +$purple-60: #7542e5; +$purple-50: #9059ff; +$purple-40: #ab71ff; +$purple-30: #c689ff; +$purple-20: #cb9eff; +$purple-10: #d9bfff; +$purple-05: #e7dfff; + +// Green: +$green-90: #00736c; +$green-80: #00a49a; +$green-70: #1cc4a0; +$green-60: #3ad4b3; +$green-50: #3fe1b0; +$green-40: #54ffbd; +$green-30: #88ffd1; +$green-20: #b3ffe3; +$green-10: #d1ffee; +$green-05: #e3fff3; + +// Neutral Colors +// Grays: +$black: #000000; +$grey-60: #0c0c0d; +$grey-50: #3d3d3d; +$grey-40: #6d6d6e; +$grey-30: #9e9e9e; +$grey-20: #cececf; +$grey-10: #e7e7e7; +$grey-05: #f9f9fa; + +// Whites: +$white: #ffffff; +$white-80: rgba($white, 0.8); +$white-60: rgba($white, 0.6); +$white-40: rgba($white, 0.4); +$white-20: rgba($white, 0.2); + +// Functional Colors +// Informational: +$informational: #0060df; +$informational-active: #054096; +$informational-hover: #0250bb; +$informational-focus: #99bff2; + +// Success: +$success: #3fe1b0; +$success-active: #1cc4a0; +$success-hover: #3ad4b3; +$success-focus: #b3ffe3; + +// Error +$error: #e22850; +$error-active: #810220; +$error-hover: #c50042; +$error-focus: #ffbdc5; + +// Warning +$warning: #ffa436; +$warning-active: #c45a27; +$warning-hover: #e27f2e; +$warning-focus: #ffd5b2; + +// Secondary Colors +// Violet +$violet-90: #2b1141; +$violet-80: #4e1a69; +$violet-70: #722291; +$violet-60: #952bb9; +$violet-50: #b833e1; +$violet-40: #d74cf0; +$violet-30: #f770ff; +$violet-20: #f68fff; +$violet-10: #f6b8ff; +$violet-05: #f7e2ff; + +// Blue +$blue-90: #09204d; +$blue-80: #073072; +$blue-70: #054096; +$blue-60: #0250bb; +$blue-50: #0060df; +$blue-40: #0090ed; +$blue-30: #00b3f4; +$blue-20: #00ddff; +$blue-10: #80ebff; +$blue-05: #aaf2ff; + +// Orange +$orange-90: #7c1504; +$orange-80: #9e280b; +$orange-70: #cc3d00; +$orange-60: #e25920; +$orange-50: #ff7139; +$orange-40: #ff8a50; +$orange-30: #ffa266; +$orange-20: #ffb587; +$orange-10: #ffd5b2; +$orange-05: #fff4de; + +// Yellow +$yellow-90: #960e18; +$yellow-80: #a7341f; +$yellow-70: #c45a27; +$yellow-60: #e27f2e; +$yellow-50: #ffa436; +$yellow-40: #ffbd4f; +$yellow-30: #ffd567; +$yellow-20: #ffea80; +$yellow-10: #ffff98; +$yellow-05: #ffffcc; + +// Red +$red-90: #440306; +$red-80: #810220; +$red-70: #c50042; +$red-60: #e22850; +$red-50: #ff4f5e; +$red-40: #ff6a75; +$red-30: #ff848b; +$red-20: #ff9aa2; +$red-10: #ffbdc5; +$red-05: #ffdfe7; + +// Pink +$pink-90: #50134b; +$pink-80: #7f145b; +$pink-70: #c60084; +$pink-60: #e31587; +$pink-50: #ff298a; +$pink-40: #ff4aa2; +$pink-30: #ff6bba; +$pink-20: #ff8ac5; +$pink-10: #ffb4db; +$pink-05: #ffdef0; diff --git a/frontend/src/styles/globals.scss b/frontend/src/styles/globals.scss index 198f310c8c..50d2a1d151 100644 --- a/frontend/src/styles/globals.scss +++ b/frontend/src/styles/globals.scss @@ -9,7 +9,7 @@ and compression), which will invalidate the cache. Django makes further changes, such as fixing the sourcemap path. If an update to django.contrib.staticfiles or RelayStaticFilesStorage changes the content, - increment the "cache version" comment below and in tokens.scss to force a + increment the "cache version" comment below and in color.scss to force a content change and cache invalidation. */ /*! gv=1 */ diff --git a/frontend/src/styles/tokens.scss b/frontend/src/styles/tokens.scss deleted file mode 100644 index 3b0269a722..0000000000 --- a/frontend/src/styles/tokens.scss +++ /dev/null @@ -1,163 +0,0 @@ -/* - next.js will rename the file if any of the content changes (after processing - and compression), which will invalidate the cache. Django makes further - changes, such as fixing the sourcemap path. If an update to - django.contrib.staticfiles or RelayStaticFilesStorage changes the content, - increment the "cache version" comment below and in globals.scss to force a - content change and cache invalidation. -*/ -/*! v=1 */ - -$firefoxGradient: linear-gradient( - -90deg, - #ff9100 0%, - #f10366 50%, - #6173ff 100% -); - -// For use with box-shadow: -$buttonFocusOutline: - 0 0 0 1px #0a84ff, - 0 0 0 1px #0a84ff, - 0 0 0 4px rgba(10, 132, 255, 0.3); - -// Overwrite the Protocol colours with Nebula colours: -// Purple: -$color-purple-90: #321c64; -$color-purple-80: #45278d; -$color-purple-70: #592acb; -$color-purple-60: #7542e5; -$color-purple-50: #9059ff; -$color-purple-40: #ab71ff; -$color-purple-30: #c689ff; -$color-purple-20: #cb9eff; -$color-purple-10: #d9bfff; -$color-purple-05: #e7dfff; - -// Green: -$color-green-90: #00736c; -$color-green-80: #00a49a; -$color-green-70: #1cc4a0; -$color-green-60: #3ad4b3; -$color-green-50: #3fe1b0; -$color-green-40: #54ffbd; -$color-green-30: #88ffd1; -$color-green-20: #b3ffe3; -$color-green-10: #d1ffee; -$color-green-05: #e3fff3; - -// Neutral Colors -// Grays: -$color-black: #000000; -$color-grey-60: #0c0c0d; -$color-grey-50: #3d3d3d; -$color-grey-40: #6d6d6e; -$color-grey-30: #9e9e9e; -$color-grey-20: #cececf; -$color-grey-10: #e7e7e7; -$color-grey-05: #f9f9fa; - -// Whites: -$color-white: #ffffff; -$color-white-80: rgba($color-white, 0.8); -$color-white-60: rgba($color-white, 0.6); -$color-white-40: rgba($color-white, 0.4); -$color-white-20: rgba($color-white, 0.2); - -// Functional Colors -// Informational: -$color-informational: #0060df; -$color-informational-active: #054096; -$color-informational-hover: #0250bb; -$color-informational-focus: #99bff2; - -// Success: -$color-success: #3fe1b0; -$color-success-active: #1cc4a0; -$color-success-hover: #3ad4b3; -$color-success-focus: #b3ffe3; - -// Error -$color-error: #e22850; -$color-error-active: #810220; -$color-error-hover: #c50042; -$color-error-focus: #ffbdc5; - -// Warning -$color-warning: #ffa436; -$color-warning-active: #c45a27; -$color-warning-hover: #e27f2e; -$color-warning-focus: #ffd5b2; - -// Secondary Colors -// Violet -$color-violet-90: #2b1141; -$color-violet-80: #4e1a69; -$color-violet-70: #722291; -$color-violet-60: #952bb9; -$color-violet-50: #b833e1; -$color-violet-40: #d74cf0; -$color-violet-30: #f770ff; -$color-violet-20: #f68fff; -$color-violet-10: #f6b8ff; -$color-violet-05: #f7e2ff; - -// Blue -$color-blue-90: #09204d; -$color-blue-80: #073072; -$color-blue-70: #054096; -$color-blue-60: #0250bb; -$color-blue-50: #0060df; -$color-blue-40: #0090ed; -$color-blue-30: #00b3f4; -$color-blue-20: #00ddff; -$color-blue-10: #80ebff; -$color-blue-05: #aaf2ff; - -// Orange -$color-orange-90: #7c1504; -$color-orange-80: #9e280b; -$color-orange-70: #cc3d00; -$color-orange-60: #e25920; -$color-orange-50: #ff7139; -$color-orange-40: #ff8a50; -$color-orange-30: #ffa266; -$color-orange-20: #ffb587; -$color-orange-10: #ffd5b2; -$color-orange-05: #fff4de; - -// Yellow -$color-yellow-90: #960e18; -$color-yellow-80: #a7341f; -$color-yellow-70: #c45a27; -$color-yellow-60: #e27f2e; -$color-yellow-50: #ffa436; -$color-yellow-40: #ffbd4f; -$color-yellow-30: #ffd567; -$color-yellow-20: #ffea80; -$color-yellow-10: #ffff98; -$color-yellow-05: #ffffcc; - -// Red -$color-red-90: #440306; -$color-red-80: #810220; -$color-red-70: #c50042; -$color-red-60: #e22850; -$color-red-50: #ff4f5e; -$color-red-40: #ff6a75; -$color-red-30: #ff848b; -$color-red-20: #ff9aa2; -$color-red-10: #ffbdc5; -$color-red-05: #ffdfe7; - -// Pink -$color-pink-90: #50134b; -$color-pink-80: #7f145b; -$color-pink-70: #c60084; -$color-pink-60: #e31587; -$color-pink-50: #ff298a; -$color-pink-40: #ff4aa2; -$color-pink-30: #ff6bba; -$color-pink-20: #ff8ac5; -$color-pink-10: #ffb4db; -$color-pink-05: #ffdef0; From 86647a3ba8cbce94d2ff96f0436cd8ac3da6b26a Mon Sep 17 00:00:00 2001 From: John Whitlock Date: Wed, 6 Nov 2024 11:47:45 -0600 Subject: [PATCH 09/13] Order at-use statements Order the at-use statements in a consistent way. --- frontend/src/components/InfoModal.module.scss | 2 +- frontend/src/components/InfoTooltip.module.scss | 2 +- .../src/components/dashboard/CornerNotification.module.scss | 2 +- .../components/dashboard/EmailForwardingModal.module.scss | 2 +- .../src/components/dashboard/FreeOnboarding.module.scss | 2 +- frontend/src/components/dashboard/Onboarding.module.scss | 2 +- .../src/components/dashboard/PremiumOnboarding.module.scss | 2 +- .../src/components/dashboard/ProfileBanners.module.scss | 2 +- .../src/components/dashboard/SubdomainPicker.module.scss | 2 +- .../dashboard/aliases/AddressPickerModal.module.scss | 2 +- frontend/src/components/dashboard/aliases/Alias.module.scss | 2 +- .../dashboard/aliases/AliasDeletionButton.module.scss | 2 +- .../aliases/AliasDeletionButtonPermanent.module.scss | 2 +- .../dashboard/aliases/AliasGenerationButton.module.scss | 2 +- .../src/components/dashboard/aliases/AliasList.module.scss | 2 +- .../components/dashboard/aliases/CategoryFilter.module.scss | 2 +- .../components/dashboard/aliases/LabelEditor.module.scss | 2 +- .../dashboard/subdomain/ConfirmationForm.module.scss | 2 +- .../dashboard/subdomain/ConfirmationModal.module.scss | 2 +- .../dashboard/subdomain/SubdomainInfoTooltip.module.scss | 3 +-- .../components/dashboard/tips/CustomAliasTip.module.scss | 2 +- .../src/components/dashboard/tips/GenericTip.module.scss | 6 +++--- frontend/src/components/dashboard/tips/Tips.module.scss | 2 +- frontend/src/components/landing/BundleBanner.module.scss | 2 +- frontend/src/components/landing/DemoPhone.module.scss | 2 +- frontend/src/components/landing/FaqAccordion.module.scss | 2 +- .../src/components/landing/HighlightedFeatures.module.scss | 2 +- frontend/src/components/landing/PlanMatrix.module.scss | 2 +- frontend/src/components/landing/Reviews.module.scss | 2 +- frontend/src/components/layout/Layout.module.scss | 2 +- .../src/components/layout/navigation/AppPicker.module.scss | 2 +- .../layout/navigation/MobileNavigation.module.scss | 2 +- .../src/components/layout/navigation/Navigation.module.scss | 2 +- .../components/layout/navigation/SignInButton.module.scss | 2 +- .../components/layout/navigation/UpgradeButton.module.scss | 2 +- .../src/components/layout/navigation/UserMenu.module.scss | 2 +- .../layout/navigation/whatsnew/WhatsNewContent.module.scss | 2 +- .../navigation/whatsnew/WhatsNewDashboard.module.scss | 2 +- .../layout/navigation/whatsnew/WhatsNewMenu.module.scss | 2 +- .../src/components/layout/topmessage/CsatSurvey.module.scss | 2 +- .../layout/topmessage/HolidayPromoBanner.module.scss | 2 +- .../layout/topmessage/InterviewRecruitment.module.scss | 2 +- .../src/components/layout/topmessage/NpsSurvey.module.scss | 2 +- .../components/layout/topmessage/PhoneSurvey.module.scss | 2 +- .../onboarding/RelayNumberConfirmationModal.module.scss | 2 +- frontend/src/pages/accounts/profile.module.scss | 2 +- frontend/src/pages/contains-tracker-warning.module.scss | 2 +- frontend/src/pages/faq.module.scss | 2 +- frontend/src/pages/flags.module.scss | 2 +- frontend/src/pages/index.module.scss | 2 +- frontend/src/pages/mock/mockSession.module.scss | 2 +- frontend/src/pages/tracker-report.module.scss | 2 +- 52 files changed, 54 insertions(+), 55 deletions(-) diff --git a/frontend/src/components/InfoModal.module.scss b/frontend/src/components/InfoModal.module.scss index 0e326731a7..57872d330e 100644 --- a/frontend/src/components/InfoModal.module.scss +++ b/frontend/src/components/InfoModal.module.scss @@ -1,5 +1,5 @@ -@use "../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../styles/color"; .underlay { align-items: center; diff --git a/frontend/src/components/InfoTooltip.module.scss b/frontend/src/components/InfoTooltip.module.scss index 43f0fe91ed..a96d0ebf47 100644 --- a/frontend/src/components/InfoTooltip.module.scss +++ b/frontend/src/components/InfoTooltip.module.scss @@ -1,5 +1,5 @@ -@use "../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../styles/color"; .wrapper { position: relative; diff --git a/frontend/src/components/dashboard/CornerNotification.module.scss b/frontend/src/components/dashboard/CornerNotification.module.scss index 4c756f0240..d9c39256b4 100644 --- a/frontend/src/components/dashboard/CornerNotification.module.scss +++ b/frontend/src/components/dashboard/CornerNotification.module.scss @@ -1,5 +1,5 @@ -@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../styles/color"; .wrapper { position: relative; diff --git a/frontend/src/components/dashboard/EmailForwardingModal.module.scss b/frontend/src/components/dashboard/EmailForwardingModal.module.scss index 0c39527cfd..d8d43ada47 100644 --- a/frontend/src/components/dashboard/EmailForwardingModal.module.scss +++ b/frontend/src/components/dashboard/EmailForwardingModal.module.scss @@ -1,5 +1,5 @@ -@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../styles/color"; @use "../../styles/text"; .underlay { diff --git a/frontend/src/components/dashboard/FreeOnboarding.module.scss b/frontend/src/components/dashboard/FreeOnboarding.module.scss index 1ef18198b8..ab60f65cd3 100644 --- a/frontend/src/components/dashboard/FreeOnboarding.module.scss +++ b/frontend/src/components/dashboard/FreeOnboarding.module.scss @@ -1,6 +1,6 @@ -@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; +@use "../../styles/color"; @use "../../styles/text"; .onboarding { diff --git a/frontend/src/components/dashboard/Onboarding.module.scss b/frontend/src/components/dashboard/Onboarding.module.scss index 7a48d52f2b..17d5dc414d 100644 --- a/frontend/src/components/dashboard/Onboarding.module.scss +++ b/frontend/src/components/dashboard/Onboarding.module.scss @@ -1,5 +1,5 @@ -@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../styles/color"; @use "../../styles/text"; .wrapper { diff --git a/frontend/src/components/dashboard/PremiumOnboarding.module.scss b/frontend/src/components/dashboard/PremiumOnboarding.module.scss index 17dc20538f..9b9335217a 100644 --- a/frontend/src/components/dashboard/PremiumOnboarding.module.scss +++ b/frontend/src/components/dashboard/PremiumOnboarding.module.scss @@ -1,6 +1,6 @@ -@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; +@use "../../styles/color"; @use "../../styles/text"; .onboarding { diff --git a/frontend/src/components/dashboard/ProfileBanners.module.scss b/frontend/src/components/dashboard/ProfileBanners.module.scss index a8dc092f70..fd52814823 100644 --- a/frontend/src/components/dashboard/ProfileBanners.module.scss +++ b/frontend/src/components/dashboard/ProfileBanners.module.scss @@ -1,5 +1,5 @@ -@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../styles/color"; .profile-banners { display: flex; diff --git a/frontend/src/components/dashboard/SubdomainPicker.module.scss b/frontend/src/components/dashboard/SubdomainPicker.module.scss index f28264436c..fffa27f113 100644 --- a/frontend/src/components/dashboard/SubdomainPicker.module.scss +++ b/frontend/src/components/dashboard/SubdomainPicker.module.scss @@ -1,6 +1,6 @@ -@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; +@use "../../styles/color"; @use "../../styles/text"; .card { diff --git a/frontend/src/components/dashboard/aliases/AddressPickerModal.module.scss b/frontend/src/components/dashboard/aliases/AddressPickerModal.module.scss index 9c6ce77086..75637ec77d 100644 --- a/frontend/src/components/dashboard/aliases/AddressPickerModal.module.scss +++ b/frontend/src/components/dashboard/aliases/AddressPickerModal.module.scss @@ -1,6 +1,6 @@ -@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; +@use "../../../styles/color"; .underlay { position: fixed; diff --git a/frontend/src/components/dashboard/aliases/Alias.module.scss b/frontend/src/components/dashboard/aliases/Alias.module.scss index abbf78d252..7efc7b276e 100644 --- a/frontend/src/components/dashboard/aliases/Alias.module.scss +++ b/frontend/src/components/dashboard/aliases/Alias.module.scss @@ -1,5 +1,5 @@ -@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; $toggleTransitionDuration: 200ms; diff --git a/frontend/src/components/dashboard/aliases/AliasDeletionButton.module.scss b/frontend/src/components/dashboard/aliases/AliasDeletionButton.module.scss index f23513ddba..05fa968126 100644 --- a/frontend/src/components/dashboard/aliases/AliasDeletionButton.module.scss +++ b/frontend/src/components/dashboard/aliases/AliasDeletionButton.module.scss @@ -1,6 +1,6 @@ -@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; +@use "../../../styles/color"; .deletion-button { display: inline-flex; diff --git a/frontend/src/components/dashboard/aliases/AliasDeletionButtonPermanent.module.scss b/frontend/src/components/dashboard/aliases/AliasDeletionButtonPermanent.module.scss index 1d873c80f5..d987e506ab 100644 --- a/frontend/src/components/dashboard/aliases/AliasDeletionButtonPermanent.module.scss +++ b/frontend/src/components/dashboard/aliases/AliasDeletionButtonPermanent.module.scss @@ -1,6 +1,6 @@ -@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; +@use "../../../styles/color"; .deletion-button { display: inline-flex; diff --git a/frontend/src/components/dashboard/aliases/AliasGenerationButton.module.scss b/frontend/src/components/dashboard/aliases/AliasGenerationButton.module.scss index a64dbc2470..63d38c906d 100644 --- a/frontend/src/components/dashboard/aliases/AliasGenerationButton.module.scss +++ b/frontend/src/components/dashboard/aliases/AliasGenerationButton.module.scss @@ -1,5 +1,5 @@ -@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; .button-wrapper { position: relative; diff --git a/frontend/src/components/dashboard/aliases/AliasList.module.scss b/frontend/src/components/dashboard/aliases/AliasList.module.scss index 717ffe6daf..221c74309d 100644 --- a/frontend/src/components/dashboard/aliases/AliasList.module.scss +++ b/frontend/src/components/dashboard/aliases/AliasList.module.scss @@ -1,6 +1,6 @@ -@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; +@use "../../../styles/color"; // Resolves mobile extra spacing issues for 2nd step of updated free onboarding (MPP-3597). .alias-list-container { diff --git a/frontend/src/components/dashboard/aliases/CategoryFilter.module.scss b/frontend/src/components/dashboard/aliases/CategoryFilter.module.scss index 70a8b765ff..e011f1e248 100644 --- a/frontend/src/components/dashboard/aliases/CategoryFilter.module.scss +++ b/frontend/src/components/dashboard/aliases/CategoryFilter.module.scss @@ -1,5 +1,5 @@ -@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; .filter-button { background-color: transparent; diff --git a/frontend/src/components/dashboard/aliases/LabelEditor.module.scss b/frontend/src/components/dashboard/aliases/LabelEditor.module.scss index 4ee374bb77..2755ec582b 100644 --- a/frontend/src/components/dashboard/aliases/LabelEditor.module.scss +++ b/frontend/src/components/dashboard/aliases/LabelEditor.module.scss @@ -1,5 +1,5 @@ -@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; .label-form { position: relative; diff --git a/frontend/src/components/dashboard/subdomain/ConfirmationForm.module.scss b/frontend/src/components/dashboard/subdomain/ConfirmationForm.module.scss index ce346652ea..63029fabbb 100644 --- a/frontend/src/components/dashboard/subdomain/ConfirmationForm.module.scss +++ b/frontend/src/components/dashboard/subdomain/ConfirmationForm.module.scss @@ -1,5 +1,5 @@ -@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; .permanence-warning { @include text-body-sm; diff --git a/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss b/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss index 93b337487a..ac64705e89 100644 --- a/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss +++ b/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss @@ -1,5 +1,5 @@ -@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; @use "../../../styles/text"; .underlay { diff --git a/frontend/src/components/dashboard/subdomain/SubdomainInfoTooltip.module.scss b/frontend/src/components/dashboard/subdomain/SubdomainInfoTooltip.module.scss index b050bd5d35..434f00eccb 100644 --- a/frontend/src/components/dashboard/subdomain/SubdomainInfoTooltip.module.scss +++ b/frontend/src/components/dashboard/subdomain/SubdomainInfoTooltip.module.scss @@ -1,6 +1,5 @@ -@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; -@use "~@mozilla-protocol/core/protocol/css/includes/mixins/typography"; +@use "../../../styles/color"; .info-icon { align-items: center; diff --git a/frontend/src/components/dashboard/tips/CustomAliasTip.module.scss b/frontend/src/components/dashboard/tips/CustomAliasTip.module.scss index 8f2c773293..3a04a9704a 100644 --- a/frontend/src/components/dashboard/tips/CustomAliasTip.module.scss +++ b/frontend/src/components/dashboard/tips/CustomAliasTip.module.scss @@ -1,5 +1,5 @@ -@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; .custom-alias-tip { display: flex; diff --git a/frontend/src/components/dashboard/tips/GenericTip.module.scss b/frontend/src/components/dashboard/tips/GenericTip.module.scss index d73b9cb16b..275dc9a5d0 100644 --- a/frontend/src/components/dashboard/tips/GenericTip.module.scss +++ b/frontend/src/components/dashboard/tips/GenericTip.module.scss @@ -1,5 +1,5 @@ -@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; .generic-tip { @include text-body-sm; @@ -19,7 +19,7 @@ // textual content, so for screen readers it makes more sense to read it // last. However, we want to visually show it first. // (This might create a disconnect for low-vision-but-not-blind users, but - // that's probably/hopefully managable.) + // that's probably/hopefully manageable.) order: -1; } @@ -30,7 +30,7 @@ // textual content, so for screen readers it makes more sense to read it // last. However, we want to visually show it first. // (This might create a disconnect for low-vision-but-not-blind users, but - // that's probably/hopefully managable.) + // that's probably/hopefully manageable.) order: -1; } diff --git a/frontend/src/components/dashboard/tips/Tips.module.scss b/frontend/src/components/dashboard/tips/Tips.module.scss index 3e20f9437e..200761b6b4 100644 --- a/frontend/src/components/dashboard/tips/Tips.module.scss +++ b/frontend/src/components/dashboard/tips/Tips.module.scss @@ -1,5 +1,5 @@ -@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; .wrapper { position: relative; diff --git a/frontend/src/components/landing/BundleBanner.module.scss b/frontend/src/components/landing/BundleBanner.module.scss index e328687e54..2ca7af6deb 100644 --- a/frontend/src/components/landing/BundleBanner.module.scss +++ b/frontend/src/components/landing/BundleBanner.module.scss @@ -1,5 +1,5 @@ -@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../styles/color"; @use "../../styles/text"; .bundle-banner-wrapper { diff --git a/frontend/src/components/landing/DemoPhone.module.scss b/frontend/src/components/landing/DemoPhone.module.scss index a42e962698..ec0cc76a78 100644 --- a/frontend/src/components/landing/DemoPhone.module.scss +++ b/frontend/src/components/landing/DemoPhone.module.scss @@ -1,5 +1,5 @@ -@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../styles/color"; .container { position: relative; diff --git a/frontend/src/components/landing/FaqAccordion.module.scss b/frontend/src/components/landing/FaqAccordion.module.scss index e79e8d39df..2868a27aca 100644 --- a/frontend/src/components/landing/FaqAccordion.module.scss +++ b/frontend/src/components/landing/FaqAccordion.module.scss @@ -1,5 +1,5 @@ -@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../styles/color"; .entry { button { diff --git a/frontend/src/components/landing/HighlightedFeatures.module.scss b/frontend/src/components/landing/HighlightedFeatures.module.scss index e8010337b6..af9fbc2aef 100644 --- a/frontend/src/components/landing/HighlightedFeatures.module.scss +++ b/frontend/src/components/landing/HighlightedFeatures.module.scss @@ -1,5 +1,5 @@ -@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../styles/color"; @use "../../styles/text"; .highlighted-feature-wrapper { diff --git a/frontend/src/components/landing/PlanMatrix.module.scss b/frontend/src/components/landing/PlanMatrix.module.scss index 4c76b5bc77..8f80379453 100644 --- a/frontend/src/components/landing/PlanMatrix.module.scss +++ b/frontend/src/components/landing/PlanMatrix.module.scss @@ -1,5 +1,5 @@ -@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../styles/color"; @use "../../styles/text"; .wrapper { diff --git a/frontend/src/components/landing/Reviews.module.scss b/frontend/src/components/landing/Reviews.module.scss index 05b57dbb60..a9c64c1d85 100644 --- a/frontend/src/components/landing/Reviews.module.scss +++ b/frontend/src/components/landing/Reviews.module.scss @@ -1,5 +1,5 @@ -@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../styles/color"; @use "../../styles/text"; .reviews { diff --git a/frontend/src/components/layout/Layout.module.scss b/frontend/src/components/layout/Layout.module.scss index 4e24ce2439..f5a18cbb9b 100644 --- a/frontend/src/components/layout/Layout.module.scss +++ b/frontend/src/components/layout/Layout.module.scss @@ -1,5 +1,5 @@ -@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../styles/color"; .patch3701 { pointer-events: none; diff --git a/frontend/src/components/layout/navigation/AppPicker.module.scss b/frontend/src/components/layout/navigation/AppPicker.module.scss index c5c4af3517..60a5e07f76 100644 --- a/frontend/src/components/layout/navigation/AppPicker.module.scss +++ b/frontend/src/components/layout/navigation/AppPicker.module.scss @@ -1,5 +1,5 @@ -@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; .wrapper { align-items: center; diff --git a/frontend/src/components/layout/navigation/MobileNavigation.module.scss b/frontend/src/components/layout/navigation/MobileNavigation.module.scss index 0c3bd9c9f0..a33545a5d0 100644 --- a/frontend/src/components/layout/navigation/MobileNavigation.module.scss +++ b/frontend/src/components/layout/navigation/MobileNavigation.module.scss @@ -1,5 +1,5 @@ -@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; @use "../../../styles/text"; .mobile-menu { diff --git a/frontend/src/components/layout/navigation/Navigation.module.scss b/frontend/src/components/layout/navigation/Navigation.module.scss index f4d0823a2d..c793eed4ce 100644 --- a/frontend/src/components/layout/navigation/Navigation.module.scss +++ b/frontend/src/components/layout/navigation/Navigation.module.scss @@ -1,5 +1,5 @@ -@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; .site-nav { display: flex; diff --git a/frontend/src/components/layout/navigation/SignInButton.module.scss b/frontend/src/components/layout/navigation/SignInButton.module.scss index bfc9350ee6..1d7ec6b659 100644 --- a/frontend/src/components/layout/navigation/SignInButton.module.scss +++ b/frontend/src/components/layout/navigation/SignInButton.module.scss @@ -1,5 +1,5 @@ -@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; .sign-in-button { // We're using CSS's `currentColor` here because the colour diff --git a/frontend/src/components/layout/navigation/UpgradeButton.module.scss b/frontend/src/components/layout/navigation/UpgradeButton.module.scss index 61e5863552..c3390c9261 100644 --- a/frontend/src/components/layout/navigation/UpgradeButton.module.scss +++ b/frontend/src/components/layout/navigation/UpgradeButton.module.scss @@ -1,5 +1,5 @@ -@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; #upgrade-button { appearance: none; diff --git a/frontend/src/components/layout/navigation/UserMenu.module.scss b/frontend/src/components/layout/navigation/UserMenu.module.scss index 01bc142fd2..14099998a5 100644 --- a/frontend/src/components/layout/navigation/UserMenu.module.scss +++ b/frontend/src/components/layout/navigation/UserMenu.module.scss @@ -1,5 +1,5 @@ -@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; @use "../../../styles/text"; .wrapper { diff --git a/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss b/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss index 0bdc35d2bf..11a0bb43b2 100644 --- a/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss +++ b/frontend/src/components/layout/navigation/whatsnew/WhatsNewContent.module.scss @@ -1,5 +1,5 @@ -@use "../../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../../styles/color"; @use "../../../../styles/text"; .wrapper { diff --git a/frontend/src/components/layout/navigation/whatsnew/WhatsNewDashboard.module.scss b/frontend/src/components/layout/navigation/whatsnew/WhatsNewDashboard.module.scss index e1519aef39..4a0e26cb77 100644 --- a/frontend/src/components/layout/navigation/whatsnew/WhatsNewDashboard.module.scss +++ b/frontend/src/components/layout/navigation/whatsnew/WhatsNewDashboard.module.scss @@ -1,5 +1,5 @@ -@use "../../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../../styles/color"; .wrapper { background-color: $color-white; diff --git a/frontend/src/components/layout/navigation/whatsnew/WhatsNewMenu.module.scss b/frontend/src/components/layout/navigation/whatsnew/WhatsNewMenu.module.scss index 39ff831f36..71b327204b 100644 --- a/frontend/src/components/layout/navigation/whatsnew/WhatsNewMenu.module.scss +++ b/frontend/src/components/layout/navigation/whatsnew/WhatsNewMenu.module.scss @@ -1,6 +1,6 @@ -@use "../../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; +@use "../../../../styles/color"; button.trigger { flex-shrink: 0; diff --git a/frontend/src/components/layout/topmessage/CsatSurvey.module.scss b/frontend/src/components/layout/topmessage/CsatSurvey.module.scss index 18a8764e2f..3e52945c78 100644 --- a/frontend/src/components/layout/topmessage/CsatSurvey.module.scss +++ b/frontend/src/components/layout/topmessage/CsatSurvey.module.scss @@ -1,5 +1,5 @@ -@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; .wrapper { display: none; diff --git a/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss b/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss index 6963855091..3121e91a4d 100644 --- a/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss +++ b/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss @@ -1,5 +1,5 @@ -@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; // Hardcoding #5015cd after talking with design, no token for this color exists yet in Nebula. $banner-gradient: linear-gradient( diff --git a/frontend/src/components/layout/topmessage/InterviewRecruitment.module.scss b/frontend/src/components/layout/topmessage/InterviewRecruitment.module.scss index 8334828f4b..b4ee5e17bc 100644 --- a/frontend/src/components/layout/topmessage/InterviewRecruitment.module.scss +++ b/frontend/src/components/layout/topmessage/InterviewRecruitment.module.scss @@ -1,5 +1,5 @@ -@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; $dismissButtonWidth: 30px; diff --git a/frontend/src/components/layout/topmessage/NpsSurvey.module.scss b/frontend/src/components/layout/topmessage/NpsSurvey.module.scss index b816a552ef..728804940d 100644 --- a/frontend/src/components/layout/topmessage/NpsSurvey.module.scss +++ b/frontend/src/components/layout/topmessage/NpsSurvey.module.scss @@ -1,5 +1,5 @@ -@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; .wrapper { display: none; diff --git a/frontend/src/components/layout/topmessage/PhoneSurvey.module.scss b/frontend/src/components/layout/topmessage/PhoneSurvey.module.scss index 8334828f4b..b4ee5e17bc 100644 --- a/frontend/src/components/layout/topmessage/PhoneSurvey.module.scss +++ b/frontend/src/components/layout/topmessage/PhoneSurvey.module.scss @@ -1,5 +1,5 @@ -@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; $dismissButtonWidth: 30px; diff --git a/frontend/src/components/phones/onboarding/RelayNumberConfirmationModal.module.scss b/frontend/src/components/phones/onboarding/RelayNumberConfirmationModal.module.scss index 6cec195a2a..874ec79be0 100644 --- a/frontend/src/components/phones/onboarding/RelayNumberConfirmationModal.module.scss +++ b/frontend/src/components/phones/onboarding/RelayNumberConfirmationModal.module.scss @@ -1,6 +1,6 @@ -@use "../../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; +@use "../../../styles/color"; .underlay { position: fixed; diff --git a/frontend/src/pages/accounts/profile.module.scss b/frontend/src/pages/accounts/profile.module.scss index b78eb94cad..7e2179b384 100644 --- a/frontend/src/pages/accounts/profile.module.scss +++ b/frontend/src/pages/accounts/profile.module.scss @@ -1,5 +1,5 @@ -@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../styles/color"; @use "../../styles/text"; .header { diff --git a/frontend/src/pages/contains-tracker-warning.module.scss b/frontend/src/pages/contains-tracker-warning.module.scss index 9a2bbdf96a..3b5106cfc5 100644 --- a/frontend/src/pages/contains-tracker-warning.module.scss +++ b/frontend/src/pages/contains-tracker-warning.module.scss @@ -1,5 +1,5 @@ -@use "../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../styles/color"; @use "../styles/text"; .contains-tracker-container { diff --git a/frontend/src/pages/faq.module.scss b/frontend/src/pages/faq.module.scss index ddefb53be6..a43d417c04 100644 --- a/frontend/src/pages/faq.module.scss +++ b/frontend/src/pages/faq.module.scss @@ -1,5 +1,5 @@ -@use "../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../styles/color"; @use "../styles/text"; .faq-page { diff --git a/frontend/src/pages/flags.module.scss b/frontend/src/pages/flags.module.scss index eda35e123c..c929af6a0c 100644 --- a/frontend/src/pages/flags.module.scss +++ b/frontend/src/pages/flags.module.scss @@ -1,5 +1,5 @@ -@use "../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../styles/color"; .wrapper { display: flex; diff --git a/frontend/src/pages/index.module.scss b/frontend/src/pages/index.module.scss index efec4738ab..339010de68 100644 --- a/frontend/src/pages/index.module.scss +++ b/frontend/src/pages/index.module.scss @@ -1,5 +1,5 @@ -@use "../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../styles/color"; @use "../styles/text"; .hero { diff --git a/frontend/src/pages/mock/mockSession.module.scss b/frontend/src/pages/mock/mockSession.module.scss index c6e93f4cc7..5d53b54b3c 100644 --- a/frontend/src/pages/mock/mockSession.module.scss +++ b/frontend/src/pages/mock/mockSession.module.scss @@ -1,5 +1,5 @@ -@use "../../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../styles/color"; .mock-session { padding: $spacing-lg; diff --git a/frontend/src/pages/tracker-report.module.scss b/frontend/src/pages/tracker-report.module.scss index d65844225e..63510f5e32 100644 --- a/frontend/src/pages/tracker-report.module.scss +++ b/frontend/src/pages/tracker-report.module.scss @@ -1,5 +1,5 @@ -@use "../styles/color"; @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../styles/color"; @use "../styles/text"; .wrapper { From 8c1bbca491d70bd552ccb1177926279ef5a097e5 Mon Sep 17 00:00:00 2001 From: John Whitlock Date: Wed, 6 Nov 2024 14:08:05 -0600 Subject: [PATCH 10/13] Add README, move long comment, update refs --- .github/pull_request_template.md | 9 +- frontend/src/styles/README.md | 175 +++++++++++++++++++++++++++++++ frontend/src/styles/globals.scss | 1 + frontend/src/styles/text.scss | 175 ++----------------------------- privaterelay/storage.py | 2 +- 5 files changed, 188 insertions(+), 174 deletions(-) create mode 100644 frontend/src/styles/README.md diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 1804c87004..2f1b689d69 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -9,30 +9,27 @@ How to test: - [ ] l10n changes have been submitted to the l10n repository, if any. - [ ] I've added a unit test to test for potential regressions of this bug. - [ ] I've added or updated relevant docs in the docs/ directory. -- [ ] All UI revisions follow the [coding standards](https://github.com/mozilla/fx-private-relay/blob/main/docs/coding-standards.md), and use Protocol tokens where applicable (see `/frontend/src/styles/tokens.scss`). +- [ ] All UI revisions follow the [coding standards](https://github.com/mozilla/fx-private-relay/blob/main/docs/coding-standards.md), and use Protocol / Nebula colors where applicable (see `/frontend/src/styles/colors.scss`). - [ ] Commits in this PR are minimal and [have descriptive commit messages](https://chris.beams.io/posts/git-commit/). # New feature description - - # Screenshot (if applicable) Not applicable. # How to test - - # Checklist (Definition of Done) + - [ ] Product Owner accepted the User Story (demo of functionality completed) or waived the privilege. - [ ] Customer Experience team has seen or waived a demo of functionality. - [ ] All acceptance criteria are met. - [ ] Jira ticket has been updated (if needed) to match changes made during the development process. - [ ] I've added or updated relevant docs in the docs/ directory - [ ] Jira ticket has been updated (if needed) with suggestions for QA when this PR is deployed to stage. -- [ ] All UI revisions follow the [coding standards](https://github.com/mozilla/fx-private-relay/blob/main/docs/coding-standards.md), and use Protocol tokens where applicable (see `/frontend/src/styles/tokens.scss`). +- [ ] All UI revisions follow the [coding standards](https://github.com/mozilla/fx-private-relay/blob/main/docs/coding-standards.md), and use Protocol / Nebula colors where applicable (see `/frontend/src/styles/colors.scss`). - [ ] Commits in this PR are minimal and [have descriptive commit messages](https://chris.beams.io/posts/git-commit/). - [ ] l10n changes have been submitted to the l10n repository, if any. diff --git a/frontend/src/styles/README.md b/frontend/src/styles/README.md new file mode 100644 index 0000000000..5e0a9bbe10 --- /dev/null +++ b/frontend/src/styles/README.md @@ -0,0 +1,175 @@ +# Relay Styles + +This folder contains style definitions used across the Relay dashboard: + +- `globals.scss` - Implements a [CSS Reset][], adds some top-level styles. +- `colors.scss` - Implements the colors for the [Nebula Design System][], + overriding the [Mozilla Protocol colors][]. +- `text.scss` - Implements typography mixins that extend [Mozilla Protocol typography][] to take a [content block][] to avoid [mixed declarations][]. + +[CSS Reset]: https://en.wikipedia.org/wiki/Reset_style_sheet +[Mozilla Protocol colors]: https://protocol.mozilla.org/docs/fundamentals/color +[Mozilla Protocol typography]: https://protocol.mozilla.org/docs/fundamentals/typography +[Nebula Design System]: https://www.peterbenvenuto.com/nebula +[content block]: https://sass-lang.com/documentation/at-rules/mixin/#content-blocks +[mixed declarations]: https://sass-lang.com/documentation/breaking-changes/mixed-decls/ + +## Colors + +The [Nebula Design System][] was launched in 2023 to implement a shared style across the Privacy and Security products ([Mozilla VPN][], [Mozilla Monitor][], and Firefox Relay). It defines a consistent typography and color scheme for applications, web pages, and marketing materials. + +The system is implemented by defining the colors in `colors.scss`, and adjusting other styles as needed. These colors are used with this pattern: + +```scss +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../styles/color"; + +.warning { + background-color: color.$white; + border-color: color.$yellow-50; +} +``` + +When using the [Mozilla Protocol colors][], the pattern is: + +```scss +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../styles/color"; + +.warning { + background-color: $color-white; + border-color: $color-yellow-50; +} +``` + +[Mozilla VPN]: https://www.mozilla.org/en-US/products/vpn/ +[Mozilla Monitor]: https://monitor.mozilla.org/ + +## Text + +[Mozilla Protocol typography][] defines [@mixins][] that are used to apply standard text styles to elements, as well as vary them for desktop-sized displays. For example, here is [text-title-xs][], for extra-small titles: + +```scss +@mixin text-title-xs { + @include font-size(type-scale("title-2xs-size")); + line-height: type-scale("title-2xs-line-height"); + + @media #{$mq-md} { + @include font-size(type-scale("title-xs-size")); + line-height: type-scale("title-xs-line-height"); + } +} +``` + +This is used with an `@include` statement, like: + +```scss +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; + +.headline { + @include text-title-xs; + display: flex; + align-items: center; + justify-content: center; + padding: $spacing-sm 0; + gap: $spacing-sm; + font-weight: 100; +} +``` + +This is complied to CSS such as: + +```css +.EmailForwardingModal_headline__VgCSC { + font-size: 24px; + font-size: 1.5rem; + line-height: 1.08; + display: flex; + align-items: center; + justify-content: center; + padding: 8px 0; + gap: 8px; + font-weight: 100; +} +@media (min-width: 768px) { + .EmailForwardingModal_headline__VgCSC { + font-size: 28px; + font-size: 1.75rem; + line-height: 1.07; + } +} +``` + +Dart Sass 1.77.7 deprecated [mixing declarations with nested rules][]. This +will allow Sass to adopt CSS rules for declaration order. After the change, this +would instead be compiled to: + +```css +.EmailForwardingModal_headline__VgCSC { + font-size: 24px; + font-size: 1.5rem; + line-height: 1.08; +} +@media (min-width: 768px) { + .EmailForwardingModal_headline__VgCSC { + font-size: 28px; + font-size: 1.75rem; + line-height: 1.07; + } +} +.EmailForwardingModal_headline__VgCSC { + display: flex; + align-items: center; + justify-content: center; + padding: 8px 0; + gap: 8px; + font-weight: 100; +} +``` + +Due to the change in [property order][], this may change the type display. For example, +`font-weight: 100` may no longer apply at desktop resolutions. The problem is tracked in [mozilla/protocol issue #998][]. + +Relay's local solution is in `text.scss`. It re-implements the `@mixin`s +to take a [content block][]: + +```scss +@mixin title-xs { + @include font-size(type-scale("title-2xs-size")); + line-height: type-scale("title-2xs-line-height"); + @content; + + @media #{$mq-md} { + @include font-size(type-scale("title-xs-size")); + line-height: type-scale("title-xs-line-height"); + } +} +``` + +This is used in a similar way to generate the same CSS as before: + +```scss +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../styles/text" .headline { + @include text.title-xs { + display: flex; + align-items: center; + justify-content: center; + padding: $spacing-sm 0; + gap: $spacing-sm; + font-weight: 100; + } +} +``` + +This also means that `text.scss` is tied to a specific version of `@mozilla-protocol`, +and must be updated when that package is updated. The work for the next update, +to [v18.0.0][], is tracked in [MPP-3946][]. + +[@mixins]: https://sass-lang.com/documentation/at-rules/mixin/ +[MPP-3946]: https://mozilla-hub.atlassian.net/browse/MPP-3946 +[mixing declarations with nested rules]: https://sass-lang.com/documentation/breaking-changes/mixed-decls/ +[mozilla/protocol issue #998]: https://github.com/mozilla/protocol/issues/998 +[property order]: https://stackoverflow.com/questions/13080220/how-important-is-css-property-order +[text-title-xs]: https://github.com/mozilla/protocol/blob/f318aafa0f3b5ff8815c4b859d5a2de9146657f4/assets/sass/protocol/includes/mixins/_typography.scss#L100-L108 +[v18.0.0]: https://github.com/mozilla/protocol/releases/tag/v18.0.0 diff --git a/frontend/src/styles/globals.scss b/frontend/src/styles/globals.scss index 50d2a1d151..16049106b5 100644 --- a/frontend/src/styles/globals.scss +++ b/frontend/src/styles/globals.scss @@ -22,6 +22,7 @@ a { /* Josh's Custom CSS Reset https://www.joshwcomeau.com/css/custom-css-reset/ + TODO: Try changes from June 2023 and later */ *, *::before, diff --git a/frontend/src/styles/text.scss b/frontend/src/styles/text.scss index 081847ac77..153bbd2430 100644 --- a/frontend/src/styles/text.scss +++ b/frontend/src/styles/text.scss @@ -1,170 +1,17 @@ @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; /* -Re-declare mozilla-protocol typography: - * text-title-* becomes title-* - * title-* mixins to take a content block +Re-declare mozilla-protocol v17.0.1 typography: + * text-title-* becomes title-*, text-display-xss becomes display-xss + * Mixins now take a @content block -TODO MPP-3946: Replace with mozilla-protocol v18.0.x overrides +TODO MPP-3946: Replace with mozilla-protocol v18.0.0 overrides The v17.0.1 typography mixins are at: https://github.com/mozilla/protocol/blob/v17.0.1/assets/sass/protocol/includes/mixins/_typography.scss -A typical mixin text-title-xs looks like: - -@mixin text-title-xs { - @include font-size(type-scale('title-2xs-size')); - line-height: type-scale('title-2xs-line-height'); - - @media #{$mq-md} { - @include font-size(type-scale('title-xs-size')); - line-height: type-scale('title-xs-line-height'); - } -} - -Here's a typical usage, such as in -components/dashboard/EmailForwardingModal.module.scss: - -.headline { - @include text-title-xs; - display: flex; - align-items: center; - justify-content: center; - padding: $spacing-sm 0; - gap: $spacing-sm; - font-weight: 100; -} - -This compiles to the CSS: - -.EmailForwardingModal_headline__VgCSC { - font-size: 24px; - font-size: 1.5rem; - line-height: 1.08; - display: flex; - align-items: center; - justify-content: center; - padding: 8px 0; - gap: 8px; - font-weight: 100 -} -@media(min-width:768px) -{ - .EmailForwardingModal_headline__VgCSC { - font-size: 28px; - font-size: 1.75rem; - line-height: 1.07 - } -} - -However, it also triggers the Sass deprecation warning about mixed declarations: -https://sass-lang.com/documentation/breaking-changes/mixed-decls/ - -There are three ways to eliminate the warning. The first two result in the same CSS that is different from the original. - -The first is to move the `@import` down in the original ruleset: - -.headline { - display: flex; - align-items: center; - justify-content: center; - padding: $spacing-sm 0; - gap: $spacing-sm; - font-weight: 100; - @include text-title-xs; -} - -The second is opt-in to the new CSS ordering behaviour with the `&` operator: - -.headline { - @{@include text-title-xs;} - display: flex; - align-items: center; - justify-content: center; - padding: $spacing-sm 0; - gap: $spacing-sm; - font-weight: 100; -} - -Both result in this slightly different CSS: - -.EmailForwardingModal_headline__VgCSC { - display: flex; - align-items: center; - justify-content: center; - padding: 8px 0; - gap: 8px; - font-weight: 100 - font-size: 24px; - font-size: 1.5rem; - line-height: 1.08; -} -@media(min-width:768px) -{ - .EmailForwardingModal_headline__VgCSC { - font-size: 28px; - font-size: 1.75rem; - line-height: 1.07 - } -} - -The change is that the font-size and line-height elements have moved -from the top to the bottom of the ruleset. This can change the style -due to browser difference and later properties overriding previous -properties. See this Stack Overflow question for some of the subtleties: - -https://stackoverflow.com/questions/13080220/how-important-is-css-property-order - -This file implements a third method, overriding the mozilla-protocol mixins to -accept a content;. Documentation at: -https://sass-lang.com/documentation/at-rules/mixin/#content-blocks - -@mixin title-xs { - @include font-size(type-scale('title-2xs-size')); - line-height: type-scale('title-2xs-line-height'); - @content; - - @media #{$mq-md} { - @include font-size(type-scale('title-xs-size')); - line-height: type-scale('title-xs-line-height'); - } -} - -The .headline declaration changes to: - -.headline { - @include text.title-xs { - display: flex; - align-items: center; - justify-content: center; - padding: $spacing-sm 0; - gap: $spacing-sm; - font-weight: 100; - } -} - -This results in identical output CSS but without the warning. - -These mixins an also be used to inject the protocol properties in the middle of -the ruleset, such as .menu-item in: -components/layout/navigation/MobileNavigation.module.scss - -.menu-item { - display: flex; - - @include text.display-xxs { - font-family: $font-stack-firefox; - border-bottom: 2px solid $color-light-gray-20; - } - - &.sign-up-menu-item { - padding: $spacing-md; - } - // ... -} - -An experienced CSS author may prefer this form, to only include the properties -that they are using to override the base text-* mixin. +The next v18.0.0 typography mixins are at: +https://github.com/mozilla/protocol/blob/v18.0.0/assets/sass/protocol/includes/mixins/_typography.scss */ @forward "~@mozilla-protocol/core/protocol/css/includes/mixins/typography" show @@ -181,8 +28,7 @@ that they are using to override the base text-* mixin. } } -// @mixin text-title-xl is not used by Relay -// @mixin text-title-lg is not used by Relay +// @mixins text-title-xl and text-title-lg are not used by Relay @mixin title-md { @include font-size(type-scale("title-sm-size")); @@ -228,12 +74,7 @@ that they are using to override the base text-* mixin. } } -// @mixin text-display-xxl is not used by Relay -// @mixin text-display-xl is not used by Relay -// @mixin text-display-lg is not used by Relay -// @mixin text-display-md is not used by Relay -// @mixin text-display-sm is not used by Relay -// @mixin text-display-xs is not used by Relay +// @mixins text-display-xxl through text-display-xs are not used by Relay @mixin display-xxs { @include title-2xs { diff --git a/privaterelay/storage.py b/privaterelay/storage.py index b8cf8861d9..e8cec10645 100644 --- a/privaterelay/storage.py +++ b/privaterelay/storage.py @@ -48,7 +48,7 @@ def url_converter( Convert Next.js source map URL to absolute URL. If this changes, or other django.contrib.staticfiles changes adjust CSS output, - then update the cache version in globals.scss and tokens.scss to bust the cache. + then update the cache version in globals.scss and colors.scss to bust the cache. """ if ( name.startswith("_next/static/css/") From 7cd7a0606a0bde1c38031251c3760af921c16a6e Mon Sep 17 00:00:00 2001 From: John Whitlock Date: Tue, 12 Nov 2024 11:40:22 -0600 Subject: [PATCH 11/13] Revert parens --- frontend/src/components/landing/BundleBanner.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/landing/BundleBanner.module.scss b/frontend/src/components/landing/BundleBanner.module.scss index 2ca7af6deb..d53f2b0a75 100644 --- a/frontend/src/components/landing/BundleBanner.module.scss +++ b/frontend/src/components/landing/BundleBanner.module.scss @@ -46,7 +46,7 @@ .main-img-wrapper { .main-image { - margin-top: -($layout-lg); // Leave space for image to bleed out of frame + margin-top: -$layout-lg; // Leave space for image to bleed out of frame @media #{$mq-lg} { position: absolute; From c1f42b6cfaa1e1e5bdfffa78919f44d0b8ed3390 Mon Sep 17 00:00:00 2001 From: John Whitlock Date: Tue, 12 Nov 2024 11:42:04 -0600 Subject: [PATCH 12/13] MPP-3958: Note that color audit is needed --- frontend/src/styles/README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/frontend/src/styles/README.md b/frontend/src/styles/README.md index 5e0a9bbe10..2850e473f9 100644 --- a/frontend/src/styles/README.md +++ b/frontend/src/styles/README.md @@ -42,8 +42,12 @@ When using the [Mozilla Protocol colors][], the pattern is: } ``` +It is possible that the code unintentionally is using the Mozilla Protocol colors. +Auditing color usage is tracked in [MPP-3958][]. + [Mozilla VPN]: https://www.mozilla.org/en-US/products/vpn/ [Mozilla Monitor]: https://monitor.mozilla.org/ +[MPP-3958]: https://mozilla-hub.atlassian.net/browse/MPP-3958 ## Text From cf181bafcd989dbeb09ff5a245bce552118fa78e Mon Sep 17 00:00:00 2001 From: John Whitlock Date: Tue, 12 Nov 2024 11:43:58 -0600 Subject: [PATCH 13/13] MPP-3959: Note that updates are available --- frontend/src/styles/globals.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/styles/globals.scss b/frontend/src/styles/globals.scss index 16049106b5..9a154c519a 100644 --- a/frontend/src/styles/globals.scss +++ b/frontend/src/styles/globals.scss @@ -22,7 +22,7 @@ a { /* Josh's Custom CSS Reset https://www.joshwcomeau.com/css/custom-css-reset/ - TODO: Try changes from June 2023 and later + TODO MPP-3959: Try changes from June 2023 and later */ *, *::before,