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/next.config.js b/frontend/next.config.js index e35c796529..4ca1dcfa7f 100644 --- a/frontend/next.config.js +++ b/frontend/next.config.js @@ -118,10 +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/ - "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/Banner.module.scss b/frontend/src/components/Banner.module.scss index ee0856ab33..62b58124c0 100644 --- a/frontend/src/components/Banner.module.scss +++ b/frontend/src/components/Banner.module.scss @@ -1,11 +1,11 @@ -@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 *; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; +@use "../styles/color"; .banner { border-radius: $border-radius-md; padding: $spacing-md; - background-color: $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: $firefoxGradient; + background-image: color.$firefoxGradient; } &.warning { @@ -44,15 +44,15 @@ padding: 0; &:hover { - background-color: $color-blue-50; - color: $color-white; + background-color: color.$blue-50; + color: color.$white; } } } .highlight-wrapper { display: flex; - background-color: $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: $color-yellow-50; + border-color: color.$yellow-50; } } } @@ -90,7 +90,7 @@ .info-icon { align-self: center; - color: $color-violet-30; + color: color.$violet-30; } } @@ -154,11 +154,11 @@ margin-right: $spacing-sm; .warning & { - color: $color-yellow-50; + color: color.$yellow-50; } .info & { - color: $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: $color-blue-50; + color: color.$blue-50; cursor: pointer; background: none; border: none; @@ -182,7 +182,7 @@ } &:hover { - color: $color-blue-40; + color: color.$blue-40; } &:focus { @@ -207,18 +207,18 @@ display: block; padding: $spacing-sm $spacing-md; font-weight: 700; - border: 2px solid $color-blue-50; - color: $color-blue-50; + border: 2px solid color.$blue-50; + color: color.$blue-50; border-radius: $border-radius-sm; &:hover { - background-color: $color-blue-60; - color: $color-white; + background-color: color.$blue-60; + color: color.$white; } &:focus { - border-color: $button-border-color-focus; - box-shadow: $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 357d6bea4d..c5751c43ca 100644 --- a/frontend/src/components/Button.module.scss +++ b/frontend/src/components/Button.module.scss @@ -1,6 +1,6 @@ -@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" as *; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; +@use "../styles/color"; .button { display: inline-flex; @@ -24,8 +24,8 @@ } &:focus { - border-color: $button-border-color-focus; - box-shadow: $field-focus-ring; + border-color: mp_forms.$button-border-color-focus; + box-shadow: mp_forms.$field-focus-ring; color: $color-white; outline: none; } diff --git a/frontend/src/components/InfoModal.module.scss b/frontend/src/components/InfoModal.module.scss index a07385747d..57872d330e 100644 --- a/frontend/src/components/InfoModal.module.scss +++ b/frontend/src/components/InfoModal.module.scss @@ -1,5 +1,5 @@ -@import "../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@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 b34970cff5..a96d0ebf47 100644 --- a/frontend/src/components/InfoTooltip.module.scss +++ b/frontend/src/components/InfoTooltip.module.scss @@ -1,5 +1,5 @@ -@import "../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@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 5cb1685589..d9c39256b4 100644 --- a/frontend/src/components/dashboard/CornerNotification.module.scss +++ b/frontend/src/components/dashboard/CornerNotification.module.scss @@ -1,5 +1,5 @@ -@import "../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@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 086bc1e8cd..d8d43ada47 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"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../styles/color"; +@use "../../styles/text"; .underlay { position: fixed; @@ -64,20 +65,21 @@ } .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 { font-weight: 600; @include text-body-md; - color: $color-grey-50; + color: color.$grey-50; } .nevermind-link { @@ -95,14 +97,14 @@ .label-input { font-family: $font-stack-firefox; - border: 1px solid $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: $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 234d2ec4aa..ab60f65cd3 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"; +@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 { 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%; @@ -208,7 +210,7 @@ } input { - @include form-input; + @include mp_forms.form-input; flex-grow: 2; margin: 0; margin-bottom: $spacing-md; @@ -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..17d5dc414d 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"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../styles/color"; +@use "../../styles/text"; .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..9b9335217a 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"; +@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 { 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%; @@ -165,7 +168,7 @@ } input { - @include form-input; + @include mp_forms.form-input; flex-grow: 2; margin: 0; margin-bottom: $spacing-md; diff --git a/frontend/src/components/dashboard/ProfileBanners.module.scss b/frontend/src/components/dashboard/ProfileBanners.module.scss index 5c423c5feb..fd52814823 100644 --- a/frontend/src/components/dashboard/ProfileBanners.module.scss +++ b/frontend/src/components/dashboard/ProfileBanners.module.scss @@ -1,4 +1,5 @@ -@import "../../styles/tokens"; +@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 d3bd1346a5..fffa27f113 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"; +@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 { border-radius: $border-radius-md; @@ -62,14 +63,15 @@ } h2 { - @include text-title-2xs; - padding: $spacing-sm 0; + @include text.title-2xs { + padding: $spacing-sm 0; + } } .lead { @include text-body-sm; padding: $spacing-md 0; - color: $color-grey-50; + color: color.$grey-50; display: flex; flex-direction: column; gap: $spacing-md; @@ -124,7 +126,7 @@ } input { - @include form-input; + @include mp_forms.form-input; flex-grow: 2; margin: 0; margin-bottom: $spacing-md; diff --git a/frontend/src/components/dashboard/aliases/AddressPickerModal.module.scss b/frontend/src/components/dashboard/aliases/AddressPickerModal.module.scss index f7c25456dc..75637ec77d 100644 --- a/frontend/src/components/dashboard/aliases/AddressPickerModal.module.scss +++ b/frontend/src/components/dashboard/aliases/AddressPickerModal.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 "~@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; @@ -45,7 +45,7 @@ padding-left: $spacing-sm; font-family: $font-stack-base; font-weight: 400; - color: $color-grey-50; + color: color.$grey-50; @include text-body-sm; @@ -88,7 +88,7 @@ .prefix { font-family: $font-stack-firefox; - color: $color-grey-50; + color: color.$grey-50; width: 70%; margin: 0 auto; display: flex; @@ -102,12 +102,12 @@ } input { - @include form-input; + @include mp_forms.form-input; // Override form-input's margin: margin: $spacing-sm 0 0 0; font-weight: 400; padding: $spacing-sm; - color: $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: $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 $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 48db779548..7efc7b276e 100644 --- a/frontend/src/components/dashboard/aliases/Alias.module.scss +++ b/frontend/src/components/dashboard/aliases/Alias.module.scss @@ -1,5 +1,5 @@ -@import "../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; $toggleTransitionDuration: 200ms; @@ -44,7 +44,7 @@ $trackerRemovalIndicatorWidth: 20px; button { border-style: none; background-color: transparent; - color: $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 f6711f31c7..05fa968126 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 "~@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 474c9e53ae..d987e506ab 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 "~@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; @@ -46,7 +46,7 @@ overflow-wrap: break-word; hr { - border: 1px solid $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: $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: $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 $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: $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 d61644427b..63d38c906d 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 "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; .button-wrapper { position: relative; @@ -11,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: $color-white; + background-color: color.$white; border-radius: $border-radius-md; box-shadow: $box-shadow-md; list-style-type: none; @@ -25,7 +26,7 @@ .menu-item-wrapper { font-family: $font-stack-firefox; - color: $color-blue-50; + color: color.$blue-50; padding: $spacing-md $spacing-lg; &:first-child { @@ -45,8 +46,8 @@ &:focus { outline: none; - background-color: $color-blue-50; - color: $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 d4d06413f2..221c74309d 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 "~@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 { @@ -92,7 +92,7 @@ } input { - @include form-input; + @include mp_forms.form-input; margin: 0; background-image: url("/icons/search-blue.svg"); background-repeat: no-repeat; @@ -123,7 +123,7 @@ // Make sure input in the input field isn't shown in the background background-color: $color-white; // Then give it the same borders as the input it's covering... - @include form-input; + @include mp_forms.form-input; // ...except where it intersects with the input: border-left: 0 solid transparent; border-top-left-radius: 0; diff --git a/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss b/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss index 09c909618f..7b4825dbd6 100644 --- a/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss +++ b/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss @@ -1,5 +1,4 @@ -@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/lib" as *; $stopLabelHeight: 2rem; $iconHeight: 50px; @@ -9,10 +8,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 +15,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/aliases/CategoryFilter.module.scss b/frontend/src/components/dashboard/aliases/CategoryFilter.module.scss index 120fd2a7f6..e011f1e248 100644 --- a/frontend/src/components/dashboard/aliases/CategoryFilter.module.scss +++ b/frontend/src/components/dashboard/aliases/CategoryFilter.module.scss @@ -1,4 +1,5 @@ -@import "../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; .filter-button { background-color: transparent; @@ -12,14 +13,14 @@ color: $color-dark-gray-50; &:hover { - background-color: $color-white; - color: $color-blue-50; + background-color: color.$white; + color: color.$blue-50; } } .filter-menu { box-shadow: $box-shadow-sm; - background-color: $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 843b722508..8ecbd6f153 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 *; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; +@use "../../../styles/color"; .underlay { position: fixed; - background-color: rgba($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: $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 $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: $color-grey-30; + color: color.$grey-30; &:hover { - color: $color-blue-50; + color: color.$blue-50; } } } @@ -88,13 +88,13 @@ display: flex; gap: $spacing-sm; word-break: break-word; - border-left: 2px solid $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: $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: $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: $color-grey-50; + color: color.$grey-50; width: 70%; margin: 0 auto; display: flex; @@ -151,31 +151,31 @@ } .profile-registered-domain-value { - color: $color-blue-50; + color: color.$blue-50; word-break: break-word; margin-top: $spacing-md; margin-bottom: $spacing-2xl; } input { - @include form-input; + @include mp_forms.form-input; // Override form-input's margin: margin: $spacing-sm 0 0 0; font-weight: 400; padding: $spacing-sm; - color: $color-grey-40; + color: color.$grey-40; font-family: $font-stack-base; @include text-body-md; &.invalid-prefix:focus { - outline: 5px solid $color-red-10; - border: 2px solid $color-error; + outline: 5px solid color.$red-10; + border: 2px solid color.$error; } } input:focus { - outline: 5px solid rgba($color-informational, 0.4); - border: 2px solid $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: $color-green-80; + color: color.$green-80; width: calc($spacing-md - $spacing-xs); height: calc($spacing-md - $spacing-xs); } .close-icon { - color: $color-error; + color: color.$error; } } @@ -215,7 +215,7 @@ @include text-body-sm; $triangleWidth: 10px; position: absolute; - background-color: $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: $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: $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: $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 $color-grey-40; + border: 2px solid color.$grey-40; border-radius: $border-radius-sm; -webkit-appearance: none; } input[type="checkbox"]:checked { - background-color: $color-blue-50; - border-color: $color-blue-50; + background-color: color.$blue-50; + border-color: color.$blue-50; appearance: checkbox; } .promotionals-blocking-description { a { display: block; - color: $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: $color-blue-50; + color: color.$blue-50; padding: $spacing-sm 0; &:hover { @@ -331,7 +331,7 @@ } &:focus { - color: $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 eb8de8efa3..2755ec582b 100644 --- a/frontend/src/components/dashboard/aliases/LabelEditor.module.scss +++ b/frontend/src/components/dashboard/aliases/LabelEditor.module.scss @@ -1,4 +1,5 @@ -@import "../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; .label-form { position: relative; @@ -38,8 +39,8 @@ top: 40px; left: 0; opacity: 0; - background-color: $color-green-60; - color: $color-white; + background-color: color.$green-60; + color: color.$white; border-radius: $border-radius-sm; transition: opacity 200ms; padding: $spacing-xs; @@ -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: 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..7c486b3715 100644 --- a/frontend/src/components/dashboard/aliases/MaskCard.module.scss +++ b/frontend/src/components/dashboard/aliases/MaskCard.module.scss @@ -1,8 +1,8 @@ -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; .card { - background-color: $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 $color-grey-10; + border-right: 1px solid color.$grey-10; } } @@ -63,7 +63,7 @@ align-items: center; gap: $spacing-xs; background-color: transparent; - color: $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: $color-green-70; + color: color.$green-70; } samp { @@ -90,7 +90,7 @@ } .copied-confirmation { - background-color: $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: $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: $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: $color-grey-05; - color: $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 $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 $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 $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: $color-grey-40; + color: color.$grey-40; } dt { @@ -237,7 +237,7 @@ display: flex; flex-direction: column-reverse; align-items: center; - background-color: $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: $color-grey-30; + color: color.$grey-30; } dd { @@ -267,7 +267,7 @@ .block-level { a { - color: $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: $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: $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: $color-grey-05; + background-color: color.$grey-05; border-radius: $toggle-border-radius; - border: $border-radius-xs solid $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: $color-white; + background-color: color.$white; border-radius: $toggle-border-radius; font-weight: 500; - color: $color-grey-40; + color: color.$grey-40; cursor: pointer; &:not(.is-selected) { &:hover { - background-color: $color-violet-30; - color: $color-white; + background-color: color.$violet-30; + color: color.$white; } } .is-selected &.is-disabled { &:hover { - border: 1px solid $color-violet-70; + border: 1px solid color.$violet-70; } } &.is-selected { - background-color: $color-violet-70; - color: $color-white; + background-color: color.$violet-70; + color: color.$white; } &.is-focused { - outline: 3px solid $color-blue-50; + outline: 3px solid color.$blue-50; } &.is-disabled { padding-inline: $spacing-md; - color: $color-grey-30; + color: color.$grey-30; @media screen and #{$mq-md} { svg { @@ -402,7 +402,7 @@ &.promo-selected { outline-width: 2px; - outline-color: $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 $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 $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 $color-grey-10; + border-top: 1px solid color.$grey-10; dl { display: flex; @@ -451,14 +451,14 @@ dt { @include text-body-sm; - color: $color-grey-50; + color: color.$grey-50; } dd { display: flex; align-items: center; gap: $spacing-sm; - color: $color-grey-60; + color: color.$grey-60; } } @@ -471,7 +471,7 @@ .promotions-locked-description-wrapper { margin-top: $spacing-md; - background: $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: $color-grey-50; + color: color.$grey-50; } } @@ -498,9 +498,9 @@ width: $content-xs; position: absolute; padding: $spacing-sm $spacing-md; - color: $color-black; - background: $color-white; - border: solid 4px $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 0b0dd64aac..63029fabbb 100644 --- a/frontend/src/components/dashboard/subdomain/ConfirmationForm.module.scss +++ b/frontend/src/components/dashboard/subdomain/ConfirmationForm.module.scss @@ -1,5 +1,5 @@ -@import "../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@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 d87a4a51cd..ac64705e89 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"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; +@use "../../../styles/text"; .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/dashboard/subdomain/SubdomainInfoTooltip.module.scss b/frontend/src/components/dashboard/subdomain/SubdomainInfoTooltip.module.scss index d975c17246..434f00eccb 100644 --- a/frontend/src/components/dashboard/subdomain/SubdomainInfoTooltip.module.scss +++ b/frontend/src/components/dashboard/subdomain/SubdomainInfoTooltip.module.scss @@ -1,6 +1,5 @@ -@import "../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "~@mozilla-protocol/core/protocol/css/includes/mixins/typography"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@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 c31074a7ab..3a04a9704a 100644 --- a/frontend/src/components/dashboard/tips/CustomAliasTip.module.scss +++ b/frontend/src/components/dashboard/tips/CustomAliasTip.module.scss @@ -1,5 +1,5 @@ -@import "../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@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 938f9401f9..275dc9a5d0 100644 --- a/frontend/src/components/dashboard/tips/GenericTip.module.scss +++ b/frontend/src/components/dashboard/tips/GenericTip.module.scss @@ -1,5 +1,5 @@ -@import "../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@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 c09340d00c..200761b6b4 100644 --- a/frontend/src/components/dashboard/tips/Tips.module.scss +++ b/frontend/src/components/dashboard/tips/Tips.module.scss @@ -1,5 +1,5 @@ -@import "../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@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 6e33464597..d53f2b0a75 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"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../styles/color"; +@use "../../styles/text"; .bundle-banner-wrapper { display: grid; @@ -194,22 +195,24 @@ } 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; + @include text.title-xs; } } 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; + @include text.title-2xs; } } diff --git a/frontend/src/components/landing/DemoPhone.module.scss b/frontend/src/components/landing/DemoPhone.module.scss index 141ef2e0c7..ec0cc76a78 100644 --- a/frontend/src/components/landing/DemoPhone.module.scss +++ b/frontend/src/components/landing/DemoPhone.module.scss @@ -1,4 +1,5 @@ -@import "../../styles/tokens"; +@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 7a354c14b4..2868a27aca 100644 --- a/frontend/src/components/landing/FaqAccordion.module.scss +++ b/frontend/src/components/landing/FaqAccordion.module.scss @@ -1,5 +1,5 @@ -@import "../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@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 13f700a7d4..af9fbc2aef 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"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../styles/color"; +@use "../../styles/text"; .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..8f80379453 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"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../styles/color"; +@use "../../styles/text"; .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; @@ -73,7 +75,7 @@ table.desktop { thead tr, tbody tr, tfoot tr:not(:last-child) { - border-bottom: $row-spacing solid $color-grey-10; + border-bottom: $row-spacing solid color.$grey-10; } tr { @@ -106,7 +108,7 @@ table.desktop { thead { tr { th:first-child { - color: $color-grey-40; + color: color.$grey-40; } &:first-child th { @@ -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 { @@ -365,7 +368,7 @@ table.desktop { .pricing-toggle { display: flex; - background-color: $color-grey-10; + background-color: color.$grey-10; padding: $spacing-xs; border-radius: $border-radius-lg; @@ -374,7 +377,7 @@ table.desktop { width: 50%; padding: $spacing-xs $spacing-sm; text-align: center; - color: $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 02679fa87a..a9c64c1d85 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"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../styles/color"; +@use "../../styles/text"; .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,14 +77,15 @@ .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 { @include text-body-sm; - color: $color-grey-40; + color: color.$grey-40; font-family: $font-stack-base; font-weight: 500; } @@ -101,7 +104,7 @@ .empty-star { color: $color-white; - stroke: $color-grey-20; + stroke: color.$grey-20; stroke-width: 2px; } @@ -109,7 +112,7 @@ appearance: none; border: none; padding: 0; - color: $color-grey-30; + color: color.$grey-30; background: transparent; width: $layout-sm; align-self: center; @@ -206,7 +209,7 @@ .source { @include text-body-sm; - color: $color-grey-30; + color: color.$grey-30; } .star { @@ -283,7 +286,7 @@ padding: $spacing-md 0; &:hover { - background-color: $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 566085bef1..f5a18cbb9b 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 "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../styles/color"; .patch3701 { pointer-events: none; @@ -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: #{$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: #{$color-grey-50}; - --toastify-text-color-warning: #{$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: #{$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: $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 27270e5515..60a5e07f76 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 "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; .wrapper { align-items: center; @@ -21,7 +21,7 @@ color: $color-white; &.premium { - color: $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 7ef2e65398..dcd24212ec 100644 --- a/frontend/src/components/layout/navigation/DashboardSwitcher.module.scss +++ b/frontend/src/components/layout/navigation/DashboardSwitcher.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" as *; +@use "../../../styles/color"; .nav-mask-phone { width: 100%; @@ -15,28 +15,28 @@ border-bottom: 5px solid transparent; &.is-active { - border-bottom: 5px solid $color-purple-40; + border-bottom: 5px solid color.$purple-40; } &:hover { - background-color: $color-purple-05; + background-color: color.$purple-05; } } .nav-mask-phone-icon { - color: $color-grey-40; - stroke: $color-grey-40; + color: color.$grey-40; + stroke: color.$grey-40; stroke-width: 0.5px; p, p.is-active { - color: $color-purple-70; + color: color.$purple-70; text-transform: uppercase; } &.is-active { - color: $color-purple-40; - stroke: $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 21ed32ab8b..56adb3d087 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/color"; diff --git a/frontend/src/components/layout/navigation/MobileNavigation.module.scss b/frontend/src/components/layout/navigation/MobileNavigation.module.scss index b3c0ec5c13..a33545a5d0 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"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; +@use "../../../styles/text"; .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; @@ -98,7 +100,7 @@ flex-direction: row; gap: $spacing-md; font-weight: 500; - color: $color-grey-40; + color: color.$grey-40; cursor: pointer; @media screen and (max-height: 700px) { @@ -168,7 +170,7 @@ flex-direction: row; display: flex; align-items: center; - color: $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 f5cde0e051..c793eed4ce 100644 --- a/frontend/src/components/layout/navigation/Navigation.module.scss +++ b/frontend/src/components/layout/navigation/Navigation.module.scss @@ -1,4 +1,5 @@ -@import "../../../styles/tokens"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; .site-nav { display: flex; @@ -32,7 +33,7 @@ height: 4px; display: block; content: ""; - background: $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 30e79e6c0a..1d7ec6b659 100644 --- a/frontend/src/components/layout/navigation/SignInButton.module.scss +++ b/frontend/src/components/layout/navigation/SignInButton.module.scss @@ -1,4 +1,5 @@ -@import "../../../styles/tokens"; +@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 @@ -8,6 +9,6 @@ padding: $spacing-xs $spacing-md; &:focus { - color: $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 8ed58ca2d8..e03ac8229f 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/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 f8260eff19..c3390c9261 100644 --- a/frontend/src/components/layout/navigation/UpgradeButton.module.scss +++ b/frontend/src/components/layout/navigation/UpgradeButton.module.scss @@ -1,5 +1,5 @@ -@import "../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@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 6a40c6806c..14099998a5 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"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; +@use "../../../styles/text"; .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 { @@ -57,7 +59,7 @@ $popupBackgroundColor calc(100% - $gradientWidth), rgba(0, 0, 0, 0) ), - $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 cb9c03fc77..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,6 @@ -@import "../../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../../styles/color"; +@use "../../../../styles/text"; .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/layout/navigation/whatsnew/WhatsNewDashboard.module.scss b/frontend/src/components/layout/navigation/whatsnew/WhatsNewDashboard.module.scss index 3dc216f9d0..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 @@ -@import "../../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@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/WhatsNewList.module.scss b/frontend/src/components/layout/navigation/whatsnew/WhatsNewList.module.scss index 5de0d20a86..1d05aef926 100644 --- a/frontend/src/components/layout/navigation/whatsnew/WhatsNewList.module.scss +++ b/frontend/src/components/layout/navigation/whatsnew/WhatsNewList.module.scss @@ -1,5 +1,5 @@ -@import "../../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "../../../../styles/color"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .empty-message { display: flex; diff --git a/frontend/src/components/layout/navigation/whatsnew/WhatsNewMenu.module.scss b/frontend/src/components/layout/navigation/whatsnew/WhatsNewMenu.module.scss index cbce3e8b15..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 @@ -@import "../../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "~@mozilla-protocol/core/protocol/css/includes/forms/lib"; +@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 c3c098f233..3e52945c78 100644 --- a/frontend/src/components/layout/topmessage/CsatSurvey.module.scss +++ b/frontend/src/components/layout/topmessage/CsatSurvey.module.scss @@ -1,5 +1,5 @@ -@import "../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@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 b553c54580..3121e91a4d 100644 --- a/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss +++ b/frontend/src/components/layout/topmessage/HolidayPromoBanner.module.scss @@ -1,5 +1,5 @@ -@import "../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@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 03338de1f7..b4ee5e17bc 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 "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; $dismissButtonWidth: 30px; @@ -9,8 +10,8 @@ $dismissButtonWidth: 30px; justify-content: space-around; gap: $spacing-sm; padding: $spacing-md ($spacing-sm + $dismissButtonWidth + $spacing-md); - background-color: $color-purple-90; - color: $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. @@ -21,7 +22,7 @@ $dismissButtonWidth: 30px; right: $spacing-md; background-color: transparent; border-style: none; - color: $color-white; + color: color.$white; width: $dismissButtonWidth; height: $dismissButtonWidth; display: flex; @@ -32,7 +33,7 @@ $dismissButtonWidth: 30px; padding: 0; &:hover { - background-color: $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 569a9cc0d9..728804940d 100644 --- a/frontend/src/components/layout/topmessage/NpsSurvey.module.scss +++ b/frontend/src/components/layout/topmessage/NpsSurvey.module.scss @@ -1,5 +1,5 @@ -@import "../../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@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 03338de1f7..b4ee5e17bc 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 "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; $dismissButtonWidth: 30px; @@ -9,8 +10,8 @@ $dismissButtonWidth: 30px; justify-content: space-around; gap: $spacing-sm; padding: $spacing-md ($spacing-sm + $dismissButtonWidth + $spacing-md); - background-color: $color-purple-90; - color: $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. @@ -21,7 +22,7 @@ $dismissButtonWidth: 30px; right: $spacing-md; background-color: transparent; border-style: none; - color: $color-white; + color: color.$white; width: $dismissButtonWidth; height: $dismissButtonWidth; display: flex; @@ -32,7 +33,7 @@ $dismissButtonWidth: 30px; padding: 0; &:hover { - background-color: $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 4448de053d..0ee3231f46 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" as *; +@use "../../../styles/color"; .main-phone-wrapper { height: 100%; @@ -27,7 +27,7 @@ stroke-width: 1px; &:hover { - color: $color-blue-50; + color: color.$blue-50; } } @@ -50,11 +50,11 @@ cursor: pointer; &:hover { - color: $color-blue-50; + color: color.$blue-50; .nav-icon { - color: $color-blue-50; - stroke: $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: $color-blue-50; + color: color.$blue-50; &:hover { - color: $color-blue-80; + color: color.$blue-80; } } .warning-icon { - color: $color-yellow-50; + color: color.$yellow-50; min-width: 20px; } } @@ -249,21 +249,21 @@ } .block-btn { - color: $color-blue-50; + color: color.$blue-50; border: 0; padding: 0; background: transparent; cursor: pointer; &:hover { - color: $color-blue-80; + color: color.$blue-80; } } } .dashboard-card { box-shadow: $box-shadow-sm; - background-color: $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: $color-grey-20; + color: color.$grey-20; cursor: pointer; svg { @@ -388,7 +388,7 @@ } &:hover { - color: $color-grey-30; + color: color.$grey-30; } } @@ -399,8 +399,8 @@ justify-content: center; pointer-events: none; transition: opacity 2s; - background-color: $color-violet-30; - color: $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: $color-grey-05; + background-color: color.$grey-05; border-radius: $toggle-border-radius; - border: 6px solid $color-white; - outline: $border-radius-xs solid $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: $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: $color-white; + color: color.$white; } &[aria-pressed="false"] .forward-state, &[aria-pressed="true"] .block-state { - color: $color-grey-30; + color: color.$grey-30; } &:hover { cursor: pointer; - background-color: $color-violet-05; + background-color: color.$violet-05; &[aria-pressed="true"] .block-state, &[aria-pressed="false"] .forward-state { - color: $color-blue-50; + color: color.$blue-50; } } &:focus-visible { - outline-color: $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 9591174877..5f0a4c3610 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"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; +@use "../../../styles/text"; .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; + } } } @@ -78,14 +80,14 @@ margin: 0; padding: 0; text-decoration: underline; - color: $color-blue-50; + color: color.$blue-50; cursor: pointer; font-weight: 500; background: none; border: none; &:hover { - color: $color-blue-80; + color: color.$blue-80; } } @@ -142,7 +144,7 @@ display: flex; flex-direction: column; padding: $spacing-sm; - background: $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; @@ -169,7 +171,7 @@ } &:nth-child(2) { - color: $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 a8de81b40e..b64c86c879 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"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../../styles/color"; +@use "../../../styles/text"; .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 { @@ -56,7 +58,7 @@ padding: 0; ::marker { - color: $color-violet-60; + color: color.$violet-60; } } } @@ -70,7 +72,7 @@ justify-items: center; text-align: center; gap: $spacing-md; - background-color: $color-white; + background-color: color.$white; padding: $spacing-lg $spacing-2xl; border-radius: $border-radius-md; box-shadow: $box-shadow-sm; @@ -90,7 +92,7 @@ .pricing-toggle { display: flex; - background-color: $color-grey-10; + background-color: color.$grey-10; padding: $spacing-xs; border-radius: $border-radius-lg; @@ -99,14 +101,14 @@ width: 50%; padding: $spacing-xs $spacing-sm; text-align: center; - color: $color-grey-40; + color: color.$grey-40; font-weight: 500; cursor: pointer; &.is-selected { - background-color: $color-white; + background-color: color.$white; border-radius: $border-radius-lg; - color: $color-blue-50; + color: color.$blue-50; } } } @@ -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..3e891114e0 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"; +@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"; .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 { @@ -73,7 +75,7 @@ justify-items: center; text-align: center; gap: $spacing-md; - background-color: $color-white; + background-color: color.$white; padding: $spacing-lg $spacing-2xl; border-radius: $border-radius-md; box-shadow: $box-shadow-sm; @@ -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; + } } } } @@ -98,7 +101,7 @@ .step-verify-input .error { max-width: $content-sm; - background-color: $color-white; + background-color: color.$white; border-radius: $border-radius-md; box-shadow: $box-shadow-sm; padding: $spacing-md; @@ -106,7 +109,7 @@ margin: 0 auto; } .step-verify-sub-body { - background-color: $color-white; + background-color: color.$white; border-radius: $border-radius-md; padding: $spacing-lg; } @@ -148,7 +151,7 @@ display: block; } h2 { - color: $color-error; + color: color.$error; } } @@ -157,13 +160,13 @@ display: block; } h2 { - color: $color-success; + color: color.$success; } } } form { - background-color: $color-white; + background-color: color.$white; box-shadow: $box-shadow-sm; padding: $spacing-lg; border-radius: $border-radius-md; @@ -198,14 +201,14 @@ padding: $spacing-sm; box-shadow: none; border: 0; - background-color: $color-grey-10; + background-color: 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 color.$error; + outline: 4px solid color.$error-focus; } @media screen and #{$mq-md} { @@ -217,7 +220,7 @@ } .step-input-verificiation-code-timeout { - background-color: $color-white; + background-color: color.$white; box-shadow: $box-shadow-sm; border-radius: $border-radius-md; padding: $spacing-lg $spacing-2xl; @@ -237,7 +240,7 @@ } .step-input-verificiation-code-success { - background-color: $color-white; + background-color: color.$white; box-shadow: $box-shadow-sm; border-radius: $border-radius-md; padding: $spacing-lg $spacing-2xl; @@ -276,14 +279,14 @@ padding: $spacing-md $spacing-sm $spacing-md $spacing-2xl; &.is-error { - border: 2px solid $color-red-60; - box-shadow: 0 0 4px 4px $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: $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 318e0575e7..874ec79be0 100644 --- a/frontend/src/components/phones/onboarding/RelayNumberConfirmationModal.module.scss +++ b/frontend/src/components/phones/onboarding/RelayNumberConfirmationModal.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 "~@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; @@ -47,7 +47,7 @@ border-style: none; background-color: transparent; cursor: pointer; - color: $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 ca5951668c..75c07f35a7 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"; +@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"; .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 { @@ -87,7 +89,7 @@ justify-items: center; text-align: center; gap: $spacing-md; - background-color: $color-white; + background-color: color.$white; padding: $spacing-lg $spacing-2xl; border-radius: $border-radius-md; box-shadow: $box-shadow-sm; @@ -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; + } } } @@ -137,7 +140,7 @@ display: block; } h2 { - color: $color-error; + color: color.$error; } } @@ -146,13 +149,13 @@ display: block; } h2 { - color: $color-success; + color: color.$success; } } } form { - background-color: $color-white; + background-color: color.$white; box-shadow: $box-shadow-sm; padding: $spacing-lg; border-radius: $border-radius-md; @@ -187,14 +190,14 @@ padding: $spacing-sm; box-shadow: none; border: 0; - background-color: $color-grey-10; + background-color: 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 color.$error; + outline: 4px solid color.$error-focus; } @media screen and #{$mq-md} { @@ -206,7 +209,7 @@ } .step-input-verificiation-code-success { - background-color: $color-white; + background-color: color.$white; box-shadow: $box-shadow-sm; border-radius: $border-radius-md; padding: $spacing-lg $spacing-2xl; @@ -232,7 +235,7 @@ } .step-select-phone-number-mask { - background-color: $color-white; + background-color: color.$white; box-shadow: $box-shadow-sm; border-radius: $border-radius-md; padding: $spacing-xl $spacing-lg; @@ -274,7 +277,7 @@ } .search { - @include form-input; + @include mp_forms.form-input; position: relative; padding-left: $layout-md; background: $spacing-sm center transparent no-repeat; diff --git a/frontend/src/components/waitlist/WaitlistPage.module.scss b/frontend/src/components/waitlist/WaitlistPage.module.scss index abb1796bc1..301d950fac 100644 --- a/frontend/src/components/waitlist/WaitlistPage.module.scss +++ b/frontend/src/components/waitlist/WaitlistPage.module.scss @@ -1,6 +1,6 @@ -@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"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms; +@use "../../styles/text"; .wrapper { display: flex; @@ -32,7 +32,7 @@ width: 100%; label { - @include field-label; + @include mp_forms.field-label; @include text-body-md; padding: 0; } @@ -42,12 +42,12 @@ } input { - @include form-input; + @include mp_forms.form-input; width: 100%; } select { - @include form-input; + @include mp_forms.form-input; width: 100%; } } @@ -78,10 +78,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/hooks/mediaQuery.module.scss b/frontend/src/hooks/mediaQuery.module.scss index e8ae5fd391..70a699027e 100644 --- a/frontend/src/hooks/mediaQuery.module.scss +++ b/frontend/src/hooks/mediaQuery.module.scss @@ -1,4 +1,4 @@ -@import "~@mozilla-protocol/core/protocol/css/includes/tokens/dist/index.scss"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; // See https://nextjs.org/docs/basic-features/built-in-css-support#sass-variables :export { diff --git a/frontend/src/pages/accounts/account_inactive.module.scss b/frontend/src/pages/accounts/account_inactive.module.scss index 4346c56bed..47e94b7d16 100644 --- a/frontend/src/pages/accounts/account_inactive.module.scss +++ b/frontend/src/pages/accounts/account_inactive.module.scss @@ -1,4 +1,4 @@ -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; .error { background-color: $color-red-60; diff --git a/frontend/src/pages/accounts/profile.module.scss b/frontend/src/pages/accounts/profile.module.scss index eea9419873..7e2179b384 100644 --- a/frontend/src/pages/accounts/profile.module.scss +++ b/frontend/src/pages/accounts/profile.module.scss @@ -1,6 +1,6 @@ -@import "../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "~@mozilla-protocol/core/protocol/css/includes/mixins/typography"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../styles/color"; +@use "../../styles/text"; .header { background-color: $color-light-gray-05; @@ -157,13 +157,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; @@ -180,12 +181,12 @@ cursor: pointer; &:hover { - background-color: $color-grey-10; + background-color: color.$grey-10; } } &.is-open .open-button { - background-color: $color-grey-10; + background-color: color.$grey-10; } .close-button { @@ -259,8 +260,9 @@ } .upsell-banner-header { - @include text-title-md; - font-weight: 700; + @include text.title-md { + font-weight: 700; + } } .upsell-banner-description { @@ -368,8 +370,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/accounts/settings.module.scss b/frontend/src/pages/accounts/settings.module.scss index 342d4d2bfd..9ebcc9277e 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" as *; +@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: $color-violet-40; + color: color.$violet-40; } } } @@ -63,7 +63,7 @@ $field-gap: $spacing-lg; display: flex; flex-direction: column; gap: $field-gap; - color: $color-grey-50; + color: color.$grey-50; } .field { @@ -129,7 +129,7 @@ $field-gap: $spacing-lg; border-radius: $border-radius-sm; svg { - color: $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: $color-grey-05; + background-color: color.$grey-05; border: 0; - outline: 1px solid $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: $color-grey-20; + color: color.$grey-20; cursor: pointer; svg { @@ -200,7 +200,7 @@ $field-gap: $spacing-lg; } &:hover { - color: $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: $color-violet-30; - color: $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 6346a9670a..3b5106cfc5 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"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../styles/color"; +@use "../styles/text"; .contains-tracker-container { margin: $layout-sm; @@ -27,7 +28,7 @@ font-family: $font-stack-firefox; color: $color-black; border: none; - background-color: $color-grey-10; + background-color: color.$grey-10; white-space: nowrap; align-self: center; margin: 0 0 0 auto; @@ -51,14 +52,14 @@ font-size: 18px; font-weight: 600; font-family: $font-stack-firefox; - color: $color-grey-50; + color: color.$grey-50; } p { font-size: 16px; font-weight: 400; font-family: $font-stack-base; - color: $color-grey-40; + color: color.$grey-40; } } @@ -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..a43d417c04 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"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../styles/color"; +@use "../styles/text"; .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/flags.module.scss b/frontend/src/pages/flags.module.scss index 728a3e59ea..c929af6a0c 100644 --- a/frontend/src/pages/flags.module.scss +++ b/frontend/src/pages/flags.module.scss @@ -1,5 +1,5 @@ -@import "../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@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 cd80426535..339010de68 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"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../styles/color"; +@use "../styles/text"; .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/mock/mockSession.module.scss b/frontend/src/pages/mock/mockSession.module.scss index 80bbc80214..5d53b54b3c 100644 --- a/frontend/src/pages/mock/mockSession.module.scss +++ b/frontend/src/pages/mock/mockSession.module.scss @@ -1,5 +1,5 @@ -@import "../../styles/tokens"; -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../../styles/color"; .mock-session { padding: $spacing-lg; diff --git a/frontend/src/pages/premium.module.scss b/frontend/src/pages/premium.module.scss index f4b457ee36..ec74f53a79 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"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../styles/color"; +@use "../styles/text"; .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 { @@ -105,8 +108,8 @@ } .pill { - background-color: $color-violet-30; - color: $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; @@ -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 { @@ -139,7 +143,7 @@ } .use-cases-wrapper { - background-color: $color-white; + background-color: color.$white; } .use-cases { @@ -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..63510f5e32 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"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../styles/color"; +@use "../styles/text"; .wrapper { height: 100%; @@ -29,7 +30,7 @@ .loading { padding: $spacing-xl; height: 100%; - background-color: $color-grey-05; + background-color: color.$grey-05; animation-name: fadein; animation-duration: 400ms; } @@ -37,11 +38,11 @@ .load-error { padding: $spacing-xl; height: 100%; - background-color: $color-grey-05; + background-color: color.$grey-05; } .report-wrapper { - background-color: $color-grey-05; + background-color: color.$grey-05; flex: 1 0 auto; display: flex; justify-content: center; @@ -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 { @@ -89,12 +91,12 @@ } dt { - color: $color-grey-40; + color: color.$grey-40; } dd { font-weight: 600; - color: $color-grey-50; + color: color.$grey-50; } .from { @@ -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 { @@ -154,12 +157,12 @@ column-gap: $spacing-md; row-gap: $spacing-xs; padding: $spacing-md 0; - color: $color-grey-50; - border-top: 1px solid $color-grey-10; + color: color.$grey-50; + border-top: 1px solid color.$grey-10; .icon { grid-area: icon; - color: $color-grey-20; + color: color.$grey-20; } .tracker-domain { @@ -191,7 +194,7 @@ display: flex; align-items: center; gap: $spacing-md; - background-color: $color-grey-10; + background-color: color.$grey-10; padding: $spacing-lg; border-radius: $border-radius-md; @@ -216,7 +219,7 @@ } hr { - background-color: $color-grey-10; + background-color: color.$grey-10; height: 2px; border-style: none; } @@ -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/pages/vpn-relay-welcome.module.scss b/frontend/src/pages/vpn-relay-welcome.module.scss index 3ef25159c7..9eeb8c9799 100644 --- a/frontend/src/pages/vpn-relay-welcome.module.scss +++ b/frontend/src/pages/vpn-relay-welcome.module.scss @@ -1,6 +1,12 @@ -@import "~@mozilla-protocol/core/protocol/css/includes/lib"; -@import "../styles/tokens"; -@import "../../src/components/Button.module"; +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; +@use "../styles/color"; + +// 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; @@ -23,7 +29,7 @@ .headline { font-family: $font-stack-base; - color: $color-grey-40; + color: color.$grey-40; font-weight: 400; @include text-title-3xs; @@ -31,7 +37,7 @@ .subheadline { font-family: $font-stack-firefox; - color: $color-grey-60; + color: color.$grey-60; font-weight: 700; @include text-title-md; @@ -53,7 +59,7 @@ @media #{$mq-lg} { flex-direction: row; - background-color: $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/README.md b/frontend/src/styles/README.md new file mode 100644 index 0000000000..2850e473f9 --- /dev/null +++ b/frontend/src/styles/README.md @@ -0,0 +1,179 @@ +# 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; +} +``` + +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 + +[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/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 f3bbd4cf0d..9a154c519a 100644 --- a/frontend/src/styles/globals.scss +++ b/frontend/src/styles/globals.scss @@ -1,15 +1,15 @@ -@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/lib" as *; +@use "~@mozilla-protocol/core/protocol/css/base/elements/reset"; /* 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 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 */ @@ -22,6 +22,7 @@ a { /* Josh's Custom CSS Reset https://www.joshwcomeau.com/css/custom-css-reset/ + TODO MPP-3959: Try changes from June 2023 and later */ *, *::before, diff --git a/frontend/src/styles/text.scss b/frontend/src/styles/text.scss new file mode 100644 index 0000000000..153bbd2430 --- /dev/null +++ b/frontend/src/styles/text.scss @@ -0,0 +1,83 @@ +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *; + +/* +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.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 + +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 + $font-stack-mozilla; + +@mixin 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"); + } +} + +// @mixins text-title-xl and text-title-lg are not used by Relay + +@mixin 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 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 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 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"); + } +} + +// @mixins text-display-xxl through text-display-xs are not used by Relay + +@mixin display-xxs { + @include title-2xs { + @content; + } +} diff --git a/frontend/src/styles/tokens.scss b/frontend/src/styles/tokens.scss deleted file mode 100644 index 9e6a419c9b..0000000000 --- a/frontend/src/styles/tokens.scss +++ /dev/null @@ -1,165 +0,0 @@ -@import "~@mozilla-protocol/core/protocol/css/includes/tokens/dist/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 - 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; 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/")