Rename to styles/color

mozilla · Nov 5, 2024 · 75daca6 · 75daca6
1 parent 19e0218
commit 75daca6
Show file tree

Hide file tree

Showing 71 changed files with 462 additions and 462 deletions.
diff --git a/frontend/src/components/Banner.module.scss b/frontend/src/components/Banner.module.scss
@@ -1,19 +1,19 @@
 @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *;
 @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms;
-@use "../styles/tokens";
+@use "../styles/color";
 
 .banner {
   border-radius: $border-radius-md;
   padding: $spacing-md;
-  background-color: tokens.$color-white;
+  background-color: color.$white;
   position: relative;
   box-shadow: $box-shadow-sm;
 
   &.promo {
     // This is the gradient border width (which is implemented as a background image):
     padding: 2px;
     box-shadow: none;
-    background-image: tokens.$firefoxGradient;
+    background-image: color.$firefoxGradient;
   }
 
   &.warning {
@@ -44,15 +44,15 @@
     padding: 0;
 
     &:hover {
-      background-color: tokens.$color-blue-50;
-      color: tokens.$color-white;
+      background-color: color.$blue-50;
+      color: color.$white;
     }
   }
 }
 
 .highlight-wrapper {
   display: flex;
-  background-color: tokens.$color-white;
+  background-color: color.$white;
   flex-wrap: wrap;
 
   .banner.promo & {
@@ -75,7 +75,7 @@
           padding-left: $spacing-md;
           border-left-width: 4px;
           border-left-style: solid;
-          border-color: tokens.$color-yellow-50;
+          border-color: color.$yellow-50;
         }
       }
     }
@@ -90,7 +90,7 @@
 
   .info-icon {
     align-self: center;
-    color: tokens.$color-violet-30;
+    color: color.$violet-30;
   }
 }
 
@@ -154,11 +154,11 @@
     margin-right: $spacing-sm;
 
     .warning & {
-      color: tokens.$color-yellow-50;
+      color: color.$yellow-50;
     }
 
     .info & {
-      color: tokens.$color-violet-30;
+      color: color.$violet-30;
       margin-right: $spacing-xs;
     }
   }
@@ -170,7 +170,7 @@
     display: inline-block;
     padding-top: $spacing-md;
     font-weight: 700;
-    color: tokens.$color-blue-50;
+    color: color.$blue-50;
     cursor: pointer;
     background: none;
     border: none;
@@ -182,7 +182,7 @@
     }
 
     &:hover {
-      color: tokens.$color-blue-40;
+      color: color.$blue-40;
     }
 
     &:focus {
@@ -207,13 +207,13 @@
     display: block;
     padding: $spacing-sm $spacing-md;
     font-weight: 700;
-    border: 2px solid tokens.$color-blue-50;
-    color: tokens.$color-blue-50;
+    border: 2px solid color.$blue-50;
+    color: color.$blue-50;
     border-radius: $border-radius-sm;
 
     &:hover {
-      background-color: tokens.$color-blue-60;
-      color: tokens.$color-white;
+      background-color: color.$blue-60;
+      color: color.$white;
     }
 
     &:focus {

diff --git a/frontend/src/components/Button.module.scss b/frontend/src/components/Button.module.scss
@@ -1,6 +1,6 @@
 @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *;
 @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms;
-@use "../styles/tokens";
+@use "../styles/color";
 
 .button {
   display: inline-flex;

diff --git a/frontend/src/components/InfoModal.module.scss b/frontend/src/components/InfoModal.module.scss
@@ -1,4 +1,4 @@
-@use "../styles/tokens";
+@use "../styles/color";
 @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *;
 
 .underlay {

diff --git a/frontend/src/components/InfoTooltip.module.scss b/frontend/src/components/InfoTooltip.module.scss
@@ -1,4 +1,4 @@
-@use "../styles/tokens";
+@use "../styles/color";
 @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *;
 
 .wrapper {

diff --git a/frontend/src/components/dashboard/CornerNotification.module.scss b/frontend/src/components/dashboard/CornerNotification.module.scss
@@ -1,4 +1,4 @@
-@use "../../styles/tokens";
+@use "../../styles/color";
 @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *;
 
 .wrapper {

diff --git a/frontend/src/components/dashboard/EmailForwardingModal.module.scss b/frontend/src/components/dashboard/EmailForwardingModal.module.scss
@@ -1,4 +1,4 @@
-@use "../../styles/tokens";
+@use "../../styles/color";
 @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *;
 @use "../../styles/text";
 
@@ -79,7 +79,7 @@
   font-weight: 600;
 
   @include text-body-md;
-  color: tokens.$color-grey-50;
+  color: color.$grey-50;
 }
 
 .nevermind-link {
@@ -97,14 +97,14 @@
 
 .label-input {
   font-family: $font-stack-firefox;
-  border: 1px solid tokens.$color-grey-30;
+  border: 1px solid color.$grey-30;
   border-radius: $border-radius-sm;
   font-weight: 100;
   padding: $spacing-sm $spacing-md;
 
   // Inputs should be atleast 16px if we want to avoid iOS auto-zooming (MPP-3598)
   @include text-body-md;
-  color: tokens.$color-grey-40;
+  color: color.$grey-40;
   width: 100%;
 }
 

diff --git a/frontend/src/components/dashboard/FreeOnboarding.module.scss b/frontend/src/components/dashboard/FreeOnboarding.module.scss
@@ -1,4 +1,4 @@
-@use "../../styles/tokens";
+@use "../../styles/color";
 @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *;
 @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms;
 @use "../../styles/text";

diff --git a/frontend/src/components/dashboard/Onboarding.module.scss b/frontend/src/components/dashboard/Onboarding.module.scss
@@ -1,4 +1,4 @@
-@use "../../styles/tokens";
+@use "../../styles/color";
 @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *;
 @use "../../styles/text";
 

diff --git a/frontend/src/components/dashboard/PremiumOnboarding.module.scss b/frontend/src/components/dashboard/PremiumOnboarding.module.scss
@@ -1,4 +1,4 @@
-@use "../../styles/tokens";
+@use "../../styles/color";
 @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *;
 @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms;
 @use "../../styles/text";

diff --git a/frontend/src/components/dashboard/ProfileBanners.module.scss b/frontend/src/components/dashboard/ProfileBanners.module.scss
@@ -1,4 +1,4 @@
-@use "../../styles/tokens";
+@use "../../styles/color";
 @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *;
 
 .profile-banners {

diff --git a/frontend/src/components/dashboard/SubdomainPicker.module.scss b/frontend/src/components/dashboard/SubdomainPicker.module.scss
@@ -1,4 +1,4 @@
-@use "../../styles/tokens";
+@use "../../styles/color";
 @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *;
 @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms;
 @use "../../styles/text";
@@ -71,7 +71,7 @@
     .lead {
       @include text-body-sm;
       padding: $spacing-md 0;
-      color: tokens.$color-grey-50;
+      color: color.$grey-50;
       display: flex;
       flex-direction: column;
       gap: $spacing-md;

diff --git a/frontend/src/components/dashboard/aliases/AddressPickerModal.module.scss b/frontend/src/components/dashboard/aliases/AddressPickerModal.module.scss
@@ -1,4 +1,4 @@
-@use "../../../styles/tokens";
+@use "../../../styles/color";
 @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *;
 @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms;
 
@@ -45,7 +45,7 @@
       padding-left: $spacing-sm;
       font-family: $font-stack-base;
       font-weight: 400;
-      color: tokens.$color-grey-50;
+      color: color.$grey-50;
 
       @include text-body-sm;
 
@@ -88,7 +88,7 @@
 
       .prefix {
         font-family: $font-stack-firefox;
-        color: tokens.$color-grey-50;
+        color: color.$grey-50;
         width: 70%;
         margin: 0 auto;
         display: flex;
@@ -107,7 +107,7 @@
           margin: $spacing-sm 0 0 0;
           font-weight: 400;
           padding: $spacing-sm;
-          color: tokens.$color-grey-40;
+          color: color.$grey-40;
           font-family: $font-stack-base;
 
           @include text-body-md;
@@ -128,7 +128,7 @@
       gap: $spacing-sm;
       margin: $spacing-md $spacing-sm;
       font-family: $font-stack-firefox;
-      color: tokens.$color-grey-50;
+      color: color.$grey-50;
       font-weight: 600;
 
       @media screen and #{$mq-sm} {
@@ -138,7 +138,7 @@
       input[type="checkbox"] {
         width: 20px;
         height: 20px;
-        border: 2px solid tokens.$color-grey-20;
+        border: 2px solid color.$grey-20;
         border-radius: $border-radius-sm;
         -webkit-appearance: none;
       }

diff --git a/frontend/src/components/dashboard/aliases/Alias.module.scss b/frontend/src/components/dashboard/aliases/Alias.module.scss
@@ -1,4 +1,4 @@
-@use "../../../styles/tokens";
+@use "../../../styles/color";
 @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *;
 
 $toggleTransitionDuration: 200ms;
@@ -44,7 +44,7 @@ $trackerRemovalIndicatorWidth: 20px;
   button {
     border-style: none;
     background-color: transparent;
-    color: tokens.$color-grey-30;
+    color: color.$grey-30;
     display: flex;
     align-items: center;
     padding: 0 $spacing-xs;

diff --git a/frontend/src/components/dashboard/aliases/AliasDeletionButton.module.scss b/frontend/src/components/dashboard/aliases/AliasDeletionButton.module.scss
@@ -1,4 +1,4 @@
-@use "../../../styles/tokens";
+@use "../../../styles/color";
 @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *;
 @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms;
 

diff --git a/frontend/src/components/dashboard/aliases/AliasDeletionButtonPermanent.module.scss b/frontend/src/components/dashboard/aliases/AliasDeletionButtonPermanent.module.scss
@@ -1,4 +1,4 @@
-@use "../../../styles/tokens";
+@use "../../../styles/color";
 @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *;
 @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms;
 
@@ -46,7 +46,7 @@
     overflow-wrap: break-word;
 
     hr {
-      border: 1px solid tokens.$color-grey-10;
+      border: 1px solid color.$grey-10;
       margin-top: $spacing-2xl;
     }
 
@@ -67,7 +67,7 @@
       display: block;
       text-align: center;
       padding: $spacing-lg $spacing-lg $spacing-sm;
-      color: tokens.$color-grey-50;
+      color: color.$grey-50;
       margin-bottom: $spacing-sm;
       user-select: auto;
       -webkit-user-select: auto; // Fixes overflow breaking in iOS devices (MPP-3686)
@@ -78,7 +78,7 @@
       font-weight: 600;
       text-align: center;
       padding: $spacing-sm $spacing-lg;
-      color: tokens.$color-grey-50;
+      color: color.$grey-50;
       margin: 0 auto $spacing-2xl auto;
 
       @media screen and #{$mq-md} {
@@ -116,7 +116,7 @@
     .warning-wrapper {
       position: relative;
       display: flex;
-      border-left: $border-radius-xs solid color tokens.$color-error;
+      border-left: $border-radius-xs solid color color.$error;
       align-items: center;
       padding-left: $spacing-sm;
       background-color: #fff;
@@ -131,7 +131,7 @@
 
         p {
           @include text-body-sm;
-          color: tokens.$color-grey-50;
+          color: color.$grey-50;
         }
       }
 

diff --git a/frontend/src/components/dashboard/aliases/AliasGenerationButton.module.scss b/frontend/src/components/dashboard/aliases/AliasGenerationButton.module.scss
@@ -1,4 +1,4 @@
-@use "../../../styles/tokens";
+@use "../../../styles/color";
 @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *;
 
 .button-wrapper {
@@ -12,7 +12,7 @@
   margin-left: -1 * $spacing-md;
   // Align the popup to the edge of the screen at narrow widths
   inset-inline-end: 0;
-  background-color: tokens.$color-white;
+  background-color: color.$white;
   border-radius: $border-radius-md;
   box-shadow: $box-shadow-md;
   list-style-type: none;
@@ -26,7 +26,7 @@
 
   .menu-item-wrapper {
     font-family: $font-stack-firefox;
-    color: tokens.$color-blue-50;
+    color: color.$blue-50;
     padding: $spacing-md $spacing-lg;
 
     &:first-child {
@@ -46,8 +46,8 @@
 
     &:focus {
       outline: none;
-      background-color: tokens.$color-blue-50;
-      color: tokens.$color-white;
+      background-color: color.$blue-50;
+      color: color.$white;
     }
   }
 }
diff --git a/frontend/src/components/dashboard/aliases/AliasList.module.scss b/frontend/src/components/dashboard/aliases/AliasList.module.scss
@@ -1,4 +1,4 @@
-@use "../../../styles/tokens";
+@use "../../../styles/color";
 @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *;
 @use "~@mozilla-protocol/core/protocol/css/includes/forms/lib" as mp_forms;
 

diff --git a/frontend/src/components/dashboard/aliases/CategoryFilter.module.scss b/frontend/src/components/dashboard/aliases/CategoryFilter.module.scss
@@ -1,4 +1,4 @@
-@use "../../../styles/tokens";
+@use "../../../styles/color";
 @use "~@mozilla-protocol/core/protocol/css/includes/lib" as *;
 
 .filter-button {
@@ -13,14 +13,14 @@
   color: $color-dark-gray-50;
 
   &:hover {
-    background-color: tokens.$color-white;
-    color: tokens.$color-blue-50;
+    background-color: color.$white;
+    color: color.$blue-50;
   }
 }
 
 .filter-menu {
   box-shadow: $box-shadow-sm;
-  background-color: tokens.$color-white;
+  background-color: color.$white;
   border-radius: $border-radius-md;
   font-family: $font-stack-firefox;
   overflow-y: auto;