Run sass-migrator

This fixes Sass deprecation warnings by running npx sass-migrator division **/*.scss and npx sass-migrator module **/*.scss The only manual change after that was replacing `math.div` with `list.slash` in the `$text-title-*` and `$text-body-*` variables in tokens.scss, as the `/` there wasn't part of a division.
mozilla · Jan 9, 2025 · 1e9cf4a · 1e9cf4a
1 parent d8fffd2
commit 1e9cf4a
Show file tree

Hide file tree

Showing 80 changed files with 1,637 additions and 1,612 deletions.
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/admin/dev/UserAdmin.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/admin/dev/UserAdmin.module.scss
@@ -1,20 +1,20 @@
-@import "../../../../../tokens";
+@use "../../../../../tokens";
 
 .wrapper {
   display: flex;
   flex-direction: column;
-  gap: $spacing-2xl;
-  background-color: $color-grey-05;
+  gap: tokens.$spacing-2xl;
+  background-color: tokens.$color-grey-05;
   height: 100%;
-  padding: $layout-lg $layout-2xl;
+  padding: tokens.$layout-lg tokens.$layout-2xl;
 
-  @media screen and (max-width: $screen-lg) {
-    padding: $spacing-lg;
+  @media screen and (max-width: tokens.$screen-lg) {
+    padding: tokens.$spacing-lg;
   }
 }
 
 .header {
-  font: $text-title-xs;
+  font: tokens.$text-title-xs;
   font-weight: normal;
 
   b {
@@ -25,33 +25,33 @@
 .form {
   display: flex;
   flex-direction: column;
-  gap: $spacing-2xl;
+  gap: tokens.$spacing-2xl;
 
   .userPicker {
     flex: 1 0 auto;
     align-items: center;
     display: flex;
     flex-wrap: wrap;
-    gap: $spacing-2xl;
-    min-height: $layout-2xl;
+    gap: tokens.$spacing-2xl;
+    min-height: tokens.$layout-2xl;
 
     label {
       display: flex;
       flex-direction: column;
-      gap: $spacing-sm;
+      gap: tokens.$spacing-sm;
       min-width: 50%;
     }
 
     input {
-      padding: $spacing-sm;
-      font: $text-body-md;
+      padding: tokens.$spacing-sm;
+      font: tokens.$text-body-md;
     }
   }
 
   .actions {
     display: flex;
     flex-wrap: wrap;
-    gap: $spacing-xl;
+    gap: tokens.$spacing-xl;
 
     button {
       flex: 1 1 25%;
@@ -60,9 +60,9 @@
 }
 
 .status {
-  background-color: $color-yellow-05;
-  border: 2px solid $color-yellow-20;
-  border-radius: $border-radius-sm;
-  padding: $spacing-md $spacing-lg;
-  font: $text-body-md;
+  background-color: tokens.$color-yellow-05;
+  border: 2px solid tokens.$color-yellow-20;
+  border-radius: tokens.$border-radius-sm;
+  padding: tokens.$spacing-md tokens.$spacing-lg;
+  font: tokens.$text-body-md;
 }
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/admin/emails/EmailTrigger.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/admin/emails/EmailTrigger.module.scss
@@ -1,41 +1,41 @@
-@import "../../../../../tokens";
+@use "../../../../../tokens";
 
 .wrapper {
   display: flex;
   flex-direction: column;
-  gap: $spacing-2xl;
-  background-color: $color-grey-05;
+  gap: tokens.$spacing-2xl;
+  background-color: tokens.$color-grey-05;
   height: 100%;
-  padding: $layout-lg $layout-2xl;
+  padding: tokens.$layout-lg tokens.$layout-2xl;
 
-  @media screen and (max-width: $screen-lg) {
-    padding: $spacing-lg;
+  @media screen and (max-width: tokens.$screen-lg) {
+    padding: tokens.$spacing-lg;
   }
 }
 
 .addressSection {
   display: flex;
   flex-direction: column;
-  gap: $spacing-sm;
+  gap: tokens.$spacing-sm;
 
   .addressPicker {
     display: flex;
     align-items: center;
-    gap: $spacing-md;
+    gap: tokens.$spacing-md;
 
     label {
-      font: $text-body-lg;
+      font: tokens.$text-body-lg;
       font-weight: 700;
     }
 
     select {
-      padding: $spacing-sm;
+      padding: tokens.$spacing-sm;
     }
   }
 }
 
 .triggers {
   display: flex;
   flex-wrap: wrap;
-  gap: $spacing-lg;
+  gap: tokens.$spacing-lg;
 }
diff --git a/...r_react)/(redesign)/(authenticated)/admin/feature-flags/components/FlagEditor.module.scss b/...r_react)/(redesign)/(authenticated)/admin/feature-flags/components/FlagEditor.module.scss
@@ -1,32 +1,32 @@
-@import "../../../../../../tokens";
+@use "../../../../../../tokens";
 
 .flagWrapper {
   display: flex;
   flex-direction: column;
-  gap: $spacing-lg;
-  background-color: $color-white;
-  padding: $spacing-lg;
-  border-radius: $border-radius-md;
-  max-width: $content-sm;
+  gap: tokens.$spacing-lg;
+  background-color: tokens.$color-white;
+  padding: tokens.$spacing-lg;
+  border-radius: tokens.$border-radius-md;
+  max-width: tokens.$content-sm;
 }
 
 .flagName {
-  font: $text-title-3xs;
+  font: tokens.$text-title-3xs;
 }
 
 .enabledControl {
   display: flex;
-  gap: $spacing-xs;
-  font: $text-body-lg;
+  gap: tokens.$spacing-xs;
+  font: tokens.$text-body-lg;
 }
 
 .allowListWrapper {
   display: flex;
   flex-direction: column;
-  gap: $spacing-md;
+  gap: tokens.$spacing-md;
 
   h4 {
-    font: $text-body-md;
+    font: tokens.$text-body-md;
     font-weight: bold;
   }
 }
@@ -35,16 +35,16 @@
   flex-grow: 1;
   display: flex;
   flex-direction: column;
-  gap: $spacing-xs;
+  gap: tokens.$spacing-xs;
   padding: 0;
   list-style-type: none;
 }
 
 .addressListing {
   display: flex;
   align-items: center;
-  gap: $spacing-xs;
-  font: $text-body-md;
+  gap: tokens.$spacing-xs;
+  font: tokens.$text-body-md;
   font-family: monospace;
 
   :first-child {
@@ -54,25 +54,25 @@
   button {
     background-color: transparent;
     border: none;
-    border-radius: $border-radius-xl;
+    border-radius: tokens.$border-radius-xl;
     aspect-ratio: 1;
 
     &:hover {
       cursor: pointer;
-      background-color: $color-red-70;
-      color: $color-white;
+      background-color: tokens.$color-red-70;
+      color: tokens.$color-white;
     }
   }
 
   &:has(button:hover) {
-    color: $color-red-70;
+    color: tokens.$color-red-70;
   }
 }
 
 .addressAdder {
   display: flex;
   align-items: center;
-  gap: $spacing-sm;
+  gap: tokens.$spacing-sm;
 
   input[type="email"] {
     flex-grow: 1;
@@ -87,15 +87,15 @@
     align-items: center;
     height: 100%;
     background-color: transparent;
-    color: $color-blue-50;
+    color: tokens.$color-blue-50;
     border: none;
-    border-radius: $border-radius-sm;
-    padding: $spacing-sm;
+    border-radius: tokens.$border-radius-sm;
+    padding: tokens.$spacing-sm;
 
     &:hover {
       cursor: pointer;
-      background-color: $color-blue-50;
-      color: $color-white;
+      background-color: tokens.$color-blue-50;
+      color: tokens.$color-white;
     }
   }
   /* stylelint-enable no-descending-specificity */

diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/admin/feature-flags/page.module.scss b/src/app/(proper_react)/(redesign)/(authenticated)/admin/feature-flags/page.module.scss
@@ -1,29 +1,29 @@
-@import "../../../../../tokens";
+@use "../../../../../tokens";
 
 .wrapper {
   width: 100%;
   height: 100%;
-  background-color: $color-grey-05;
+  background-color: tokens.$color-grey-05;
   overflow: auto;
 
   .tabBar {
-    height: $tab-bar-height;
-    border-bottom: 1px solid $color-grey-20;
+    height: tokens.$tab-bar-height;
+    border-bottom: 1px solid tokens.$color-grey-20;
     display: flex;
     align-items: center;
 
     .start {
       flex: 1 0 auto;
       display: flex;
       align-items: center;
-      padding-inline: $spacing-2xl;
+      padding-inline: tokens.$spacing-2xl;
     }
 
     .end {
-      padding-inline: $spacing-xl;
+      padding-inline: tokens.$spacing-xl;
     }
 
-    @media screen and (max-width: $screen-md) {
+    @media screen and (max-width: tokens.$screen-md) {
       .start {
         justify-content: center;
       }
@@ -35,7 +35,7 @@
   }
 
   .main {
-    padding: $spacing-lg 0;
+    padding: tokens.$spacing-lg 0;
   }
 
   th,
@@ -45,15 +45,15 @@
   }
 
   h3 {
-    padding: 0 $spacing-2xl;
-    font: $text-title-2xs;
+    padding: 0 tokens.$spacing-2xl;
+    font: tokens.$text-title-2xs;
   }
 }
 
 .flagList {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax($content-xs, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(tokens.$content-xs, 1fr));
   justify-content: flex-start;
-  gap: $spacing-lg;
-  padding: $spacing-2xl;
+  gap: tokens.$spacing-lg;
+  padding: tokens.$spacing-2xl;
 }