Merge pull request #5176 from mozilla/sass-1-80-imports-mpp-3946

MPP-3946: Fix warnings for mixed_decls, imports
mozilla · Nov 12, 2024 · 2e286b9 · 2e286b9
2 parents aa586e5 + cf181ba
commit 2e286b9
Show file tree

Hide file tree

Showing 80 changed files with 1,085 additions and 754 deletions.
diff --git 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/).
 
 <!-- When adding a new feature: -->
 
 # 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
@@ -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
@@ -1,19 +1,19 @@
-@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;
 
   &.promo {
     // 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,15 +1,17 @@
-@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;
   border-radius: $border-radius-md;
   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 {