chore: fix lint errors by using design system tokens instead

MetaMask · Feb 14, 2025 · 38c290d · 38c290d
1 parent 41e6c24
commit 38c290d
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 14 deletions.
diff --git a/ui/components/app/assets/nfts/nft-details/index.scss b/ui/components/app/assets/nfts/nft-details/index.scss
@@ -123,6 +123,6 @@ $spacer-break-small: 16px;
     padding-top: 8px;
     padding-bottom: 8px;
     border-radius: var(--Spacing-sm, 8px);
-    border: 1px solid var(--border-muted, #d6d9dc);
+    border: 1px solid var(--border-muted, var(--color-border-muted));
   }
 }
diff --git a/ui/pages/bridge/index.scss b/ui/pages/bridge/index.scss
@@ -15,16 +15,16 @@
 
 [data-theme='light'],
 .light {
-  --color-background-alternative-soft: #f9fafb;
-  --color-text-alternative-soft: #6a737d;
-  --color-icon-alternative-soft: #6a737d;
+  --color-background-alternative-soft: var(--color-background-alternative);
+  --color-text-alternative-soft: var(--color-text-alternative);
+  --color-icon-alternative-soft: var(--color-icon-alternative);
 }
 
 [data-theme='dark'],
 .dark {
-  --color-background-alternative-soft: #1f2124;
-  --color-text-alternative-soft: #848c96;
-  --color-icon-alternative-soft: #848c96;
+  --color-background-alternative-soft: var(--color-background-alternative);
+  --color-text-alternative-soft: var(--color-text-alternative);
+  --color-icon-alternative-soft: var(--color-icon-alternative);
 }
 
 .mm-box--color-text-alternative-soft {

diff --git a/ui/pages/bridge/prepare/components/index.scss b/ui/pages/bridge/prepare/components/index.scss
@@ -1,9 +1,9 @@
 [data-theme='light'],
 .light {
-  --shadow-bridge-picker: 0 0 2px 0 #e2e4e9, 0 0 16px 0 rgba(226, 228, 233, 0.16);
+  --shadow-bridge-picker: 0 0 2px 0 var(--color-border-muted), 0 0 16px 0 rgba(226, 228, 233, 0.16);
 }
 
 [data-theme='dark'],
 .dark {
-  --shadow-bridge-picker: 0 0 2px 0 #e2e4e9, 0 0 16px 0 rgba(226, 228, 233, 0.16);
-}
+  --shadow-bridge-picker: 0 0 2px 0 var(--color-border-muted), 0 0 16px 0 rgba(226, 228, 233, 0.16);
+}
diff --git a/ui/pages/bridge/prepare/index.scss b/ui/pages/bridge/prepare/index.scss
@@ -80,12 +80,12 @@
 
     [data-theme='light'],
     .light {
-      box-shadow: 0 0 2px 0 #e2e4e9, 0 0 16px 0 rgba(226, 228, 233, 0.16);
+      box-shadow: 0 0 2px 0 var(--color-border-muted), 0 0 16px 0 rgba(226, 228, 233, 0.16);
     }
 
     [data-theme='dark'],
     .dark {
-      box-shadow: 0 0 2px 0 #18191b, 0 0 16px 0 #18191b;
+      box-shadow: 0 0 2px 0 var(--color-border-default), 0 0 16px 0 var(--color-border-default);
     }
   }
 }

diff --git a/ui/pages/confirmations/components/confirm/nav/nav.scss b/ui/pages/confirmations/components/confirm/nav/nav.scss
@@ -1,7 +1,7 @@
 .confirm_nav {
   &__reject_all {
     background-color: var(--color-error-muted);
-    color: #d73847;
+    color: var(--color-error-default);
     font-size: 12px;
     height: 20px;
     padding-left: 8px !important;
@@ -10,7 +10,7 @@
     &:hover {
       background-color: var(--color-error-muted) !important;
       box-shadow: none !important;
-      color: #d73847 !important;
+      color: var(--color-error-default) !important;
     }
 
     > span {