Add @content to mozilla protocol text mixins

Copy some of the text-* mixins to a new file /frontend/src/styles/typography.scss Modify the mixins to accept a @content parameter. Use these new mixins to generate the same CSS without the SCSS deprecation warning for mixed declarations: https://sass-lang.com/documentation/breaking-changes/mixed-decls/
mozilla · Nov 4, 2024 · 44d8790 · 44d8790
1 parent 43607a9
commit 44d8790
Show file tree

Hide file tree

Showing 27 changed files with 481 additions and 176 deletions.
diff --git a/frontend/next.config.js b/frontend/next.config.js
@@ -120,7 +120,6 @@ module.exports = {
     silenceDeprecations: [
       // Issues we can fix in our code
       "import", // https://sass-lang.com/documentation/breaking-changes/import/
-      "mixed-decls", // https://sass-lang.com/d/mixed-decls
 
       // Upstream issues
       "legacy-js-api", // vercel/next.js issue #71638

diff --git a/frontend/src/components/dashboard/EmailForwardingModal.module.scss b/frontend/src/components/dashboard/EmailForwardingModal.module.scss
@@ -1,5 +1,6 @@
 @import "../../styles/tokens";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "../../styles/typography";
 
 .underlay {
   position: fixed;
@@ -64,13 +65,14 @@
 }
 
 .headline {
-  @include text-title-xs;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: $spacing-sm 0;
-  gap: $spacing-sm;
-  font-weight: 100;
+  @include text-title-xs {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: $spacing-sm 0;
+    gap: $spacing-sm;
+    font-weight: 100;
+  }
 }
 
 .modal-title {

diff --git a/frontend/src/components/dashboard/FreeOnboarding.module.scss b/frontend/src/components/dashboard/FreeOnboarding.module.scss
@@ -1,6 +1,7 @@
 @import "../../styles/tokens";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
 @import "~@mozilla-protocol/core/protocol/css/includes/forms/lib";
+@import "../../styles/typography";
 
 .onboarding {
   display: flex;
@@ -176,14 +177,15 @@
 
     .domain-example {
       @include font-firefox;
-      @include text-title-2xs;
-      color: $color-light-gray-90;
-      display: inline-block;
-      padding: $spacing-md 0;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow-x: hidden;
-      max-width: $content-xs;
+      @include text-title-2xs {
+        color: $color-light-gray-90;
+        display: inline-block;
+        padding: $spacing-md 0;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow-x: hidden;
+        max-width: $content-xs;
+      }
 
       @media screen and #{$mq-md} {
         max-width: 100%;
@@ -273,10 +275,11 @@
     gap: $spacing-xs;
 
     h1 {
-      @include text-title-sm;
-      font-weight: 700;
-      font-family: $font-stack-firefox;
-      color: $color-purple-50;
+      @include text-title-sm {
+        font-weight: 700;
+        font-family: $font-stack-firefox;
+        color: $color-purple-50;
+      }
     }
 
     p {

diff --git a/frontend/src/components/dashboard/Onboarding.module.scss b/frontend/src/components/dashboard/Onboarding.module.scss
@@ -1,15 +1,17 @@
 @import "../../styles/tokens";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "../../styles/typography";
 
 .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 {

diff --git a/frontend/src/components/dashboard/PremiumOnboarding.module.scss b/frontend/src/components/dashboard/PremiumOnboarding.module.scss
@@ -1,6 +1,7 @@
 @import "../../styles/tokens";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
 @import "~@mozilla-protocol/core/protocol/css/includes/forms/lib";
+@import "../../styles/typography";
 
 .onboarding {
   display: flex;
@@ -44,10 +45,11 @@
   }
 
   h2 {
-    @include text-title-sm;
-    font-family: $font-stack-firefox;
-    color: $color-purple-50;
-    text-align: center;
+    @include text-title-sm {
+      font-family: $font-stack-firefox;
+      color: $color-purple-50;
+      text-align: center;
+    }
   }
 
   .lead {
@@ -133,14 +135,15 @@
 
     .domain-example {
       @include font-firefox;
-      @include text-title-2xs;
-      color: $color-light-gray-90;
-      display: inline-block;
-      padding: $spacing-md 0;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow-x: hidden;
-      max-width: $content-xs;
+      @include text-title-2xs {
+        color: $color-light-gray-90;
+        display: inline-block;
+        padding: $spacing-md 0;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow-x: hidden;
+        max-width: $content-xs;
+      }
 
       @media screen and #{$mq-md} {
         max-width: 100%;

diff --git a/frontend/src/components/dashboard/SubdomainPicker.module.scss b/frontend/src/components/dashboard/SubdomainPicker.module.scss
@@ -1,6 +1,7 @@
 @import "../../styles/tokens";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
 @import "~@mozilla-protocol/core/protocol/css/includes/forms/lib";
+@import "../../styles/typography";
 
 .card {
   border-radius: $border-radius-md;
@@ -62,8 +63,9 @@
     }
 
     h2 {
-      @include text-title-2xs;
-      padding: $spacing-sm 0;
+      @include text-title-2xs {
+        padding: $spacing-sm 0;
+      }
     }
 
     .lead {

diff --git a/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss b/frontend/src/components/dashboard/aliases/BlockLevelSlider.module.scss
@@ -9,17 +9,17 @@ $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;
   touch-action: none;
   padding: 0 $spacing-md;
   width: 100%;
 
+  @media screen and #{$mq-md} {
+    --thumbDiameter: 24px;
+  }
+
   @media screen and #{$mq-md} {
     flex-direction: row;
     gap: $spacing-xl;

diff --git a/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss b/frontend/src/components/dashboard/subdomain/ConfirmationModal.module.scss
@@ -1,5 +1,6 @@
 @import "../../../styles/tokens";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "../../../styles/typography";
 
 .underlay {
   position: fixed;
@@ -51,11 +52,12 @@
         font-weight: 400;
 
         .subdomain {
-          @include text-title-xs;
-          display: block;
-          font-weight: 700;
-          margin-bottom: $spacing-sm;
-          padding: $spacing-sm 0;
+          @include text-title-xs {
+            display: block;
+            font-weight: 700;
+            margin-bottom: $spacing-sm;
+            padding: $spacing-sm 0;
+          }
 
           &::before {
             content: "@";

diff --git a/frontend/src/components/landing/BundleBanner.module.scss b/frontend/src/components/landing/BundleBanner.module.scss
@@ -1,5 +1,6 @@
 @import "../../styles/tokens";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "../../styles/typography";
 
 .bundle-banner-wrapper {
   display: grid;
@@ -194,19 +195,21 @@
       }
 
       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;
         }
       }
 
       h3 {
-        @include text-title-xs;
-        @include font-firefox;
-        font-weight: 500;
+        @include text-title-xs {
+          @include font-firefox;
+          font-weight: 500;
+        }
 
         @media #{$mq-lg} {
           @include text-title-2xs;

diff --git a/frontend/src/components/landing/HighlightedFeatures.module.scss b/frontend/src/components/landing/HighlightedFeatures.module.scss
@@ -1,5 +1,6 @@
 @import "../../styles/tokens";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "../../styles/typography";
 
 .highlighted-feature-wrapper {
   display: flex;
@@ -64,9 +65,10 @@
 
   h2 {
     @include font-firefox;
-    @include text-title-sm;
-    justify-content: center;
-    width: 100%;
+    @include text-title-sm {
+      justify-content: center;
+      width: 100%;
+    }
   }
 
   .cta {

diff --git a/frontend/src/components/landing/PlanMatrix.module.scss b/frontend/src/components/landing/PlanMatrix.module.scss
@@ -1,5 +1,6 @@
 @import "../../styles/tokens";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "../../styles/typography";
 
 .wrapper {
   width: 100%;
@@ -9,17 +10,18 @@
   gap: $spacing-md;
 
   .bundle-offer-heading {
-    @include text-title-xs;
-    background-image: linear-gradient(
-      to right,
-      $color-violet-30,
-      $color-violet-80 20%,
-      $color-violet-30 80%
-    );
-    background-clip: text;
-    color: transparent;
-    text-align: center;
-    font-weight: 700;
+    @include text-title-xs {
+      background-image: linear-gradient(
+        to right,
+        $color-violet-30,
+        $color-violet-80 20%,
+        $color-violet-30 80%
+      );
+      background-clip: text;
+      color: transparent;
+      text-align: center;
+      font-weight: 700;
+    }
   }
   .bundle-offer-content {
     max-width: $content-md;
@@ -256,9 +258,10 @@ table.desktop {
       padding: $spacing-md;
 
       h3 {
-        @include text-title-2xs;
-        font-weight: 600;
-        text-align: center;
+        @include text-title-2xs {
+          font-weight: 600;
+          text-align: center;
+        }
       }
 
       &.recommended h3 {

diff --git a/frontend/src/components/landing/Reviews.module.scss b/frontend/src/components/landing/Reviews.module.scss
@@ -1,5 +1,6 @@
 @import "../../styles/tokens";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "../../styles/typography";
 
 .reviews {
   display: flex;
@@ -52,9 +53,10 @@
   }
 
   .logo-text {
-    @include text-title-xs;
-    font-weight: 600;
-    text-transform: uppercase;
+    @include text-title-xs {
+      font-weight: 600;
+      text-transform: uppercase;
+    }
   }
 }
 
@@ -75,9 +77,10 @@
 
   .rating {
     .title {
-      @include text-title-2xl;
-      font-family: $font-stack-firefox;
-      font-weight: 600;
+      @include text-title-2xl {
+        font-family: $font-stack-firefox;
+        font-weight: 600;
+      }
     }
 
     .text {

diff --git a/frontend/src/components/layout/navigation/MobileNavigation.module.scss b/frontend/src/components/layout/navigation/MobileNavigation.module.scss
@@ -1,5 +1,6 @@
 @import "../../../styles/tokens";
 @import "~@mozilla-protocol/core/protocol/css/includes/lib";
+@import "../../../styles/typography";
 
 .mobile-menu {
   width: 100%;
@@ -81,9 +82,10 @@
 .menu-item {
   display: flex;
 
-  @include text-display-xxs;
-  font-family: $font-stack-firefox;
-  border-bottom: 2px solid $color-light-gray-20;
+  @include text-display-xxs {
+    font-family: $font-stack-firefox;
+    border-bottom: 2px solid $color-light-gray-20;
+  }
 
   &.sign-up-menu-item {
     padding: $spacing-md;