Dark mode: Updating all left over static hex values in scss (#14167)

ui/components/app/connected-sites-list/index.scss

@@ -11,7 +11,7 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    border-top: 1px solid #d2d8dd;
+    border-top: 1px solid var(--color-border-muted);
     padding: 16px 24px;
 
     & &-link-button {

ui/components/app/edit-gas-fee-popover/network-statistics/status-slider/index.scss

@@ -5,7 +5,7 @@
   width: 56px;
 
   &__line {
-    background-image: linear-gradient(to right, #037dd6, #d73a49);
+    background-image: linear-gradient(to right, var(--color-primary-default), var(--color-error-default));
     height: 4px;
     width: 100%;
     border-radius: 100px;

ui/components/app/gas-customization/advanced-gas-inputs/index.scss

@@ -13,7 +13,7 @@
     &__label {
       @include H7;
 
-      color: var(--color-text-muted);
+      color: var(--color-text-alternative);
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -82,11 +82,11 @@
       right: 0;
       width: 17px;
       height: 24px;
-      border: 1px solid var(--color-border-default);
+      border: 1px solid var(--color-border-muted);
       border-top-right-radius: 4px;
       display: flex;
       flex-direction: column;
-      color: var(--color-icon-default);
+      color: var(--color-icon-muted);
       border-bottom-right-radius: 4px;
       cursor: pointer;
 

ui/components/app/gas-customization/gas-modal-page-container/basic-tab-content/index.scss

@@ -4,8 +4,8 @@
   align-items: flex-start;
   padding-left: 21px;
   height: 324px;
-  background: #f5f7f8;
-  border-bottom: 1px solid #d2d8dd;
+  background: var(--color-background-alternative);
+  border-bottom: 1px solid var(--color-border-default);
 
   &__title {
     @include Paragraph;

ui/components/app/multiple-notifications/index.scss

@@ -22,14 +22,12 @@
       position: absolute;
       bottom: 14px;
       left: 16px;
-      color: white;
+      color: var(--color-icon-muted);
       cursor: pointer;
       visibility: visible;
 
       &:hover {
         @include H4;
-
-        color: #b0d7f2;
       }
     }
   }

ui/components/app/multiple-notifications/multiple-notifications.component.js

@@ -40,7 +40,7 @@ export default class MultipleNotifications extends PureComponent {
         >
           {childrenToRender.length > 1 ? (
             <i
-              className={classnames('fa fa-sm fa-sort-amount-asc', {
+              className={classnames('fa fa-sm fa-sort-amount', {
                 flipped: !showAll,
               })}
             />

ui/components/app/selected-account/index.scss

@@ -25,7 +25,7 @@
   &__address {
     @include H7;
 
-    color: #989a9b;
+    color: var(--color-text-muted);
     display: flex;
     align-items: center;
   }

ui/components/app/signature-request/index.scss

@@ -79,7 +79,7 @@
   p {
     @include H6;
 
-    color: #999;
+    color: var(--color-text-muted);
   }
 
   .identicon {}

ui/components/app/signature-request/signature-request-footer/index.scss

@@ -1,6 +1,6 @@
 .signature-request-footer {
   display: flex;
-  border-top: 1px solid #d2d8dd;
+  border-top: 1px solid var(--color-border-muted);
 
   button {
     text-transform: uppercase;

ui/components/app/transaction-activity-log/index.scss

@@ -1,6 +1,6 @@
 .transaction-activity-log {
   &__title {
-    border-bottom: 1px solid #d8d8d8;
+    border-bottom: 1px solid var(--color-border-muted);
     padding-bottom: 4px;
     text-transform: capitalize;
   }
@@ -23,7 +23,7 @@
       top: 0;
       height: 100%;
       width: 7px;
-      border-right: 1px solid #909090;
+      border-right: 1px solid var(--color-border-muted);
     }
 
     &:first-child::after {
@@ -45,7 +45,7 @@
     height: 15px;
     margin-right: 6px;
     border-radius: 50%;
-    background: #909090;
+    background: var(--color-icon-default);
     flex: 0 0 auto;
     display: flex;
     justify-content: center;

ui/components/app/transaction-decoding/components/ui/copy-raw-data/index.scss

@@ -25,6 +25,6 @@
   }
 
   &__label {
-    color: #6a737d;
+    color: var(--color-text-alternative);
   }
 }

ui/components/app/transaction-decoding/index.scss

@@ -130,7 +130,7 @@
       }
 
       .solidity-value {
-        color: #6a737d;
+        color: var(--color-text-alternative);
         overflow-x: hidden;
         padding-bottom: 5px;
 
@@ -152,18 +152,18 @@
       }
 
       .eth-tx-params details > summary {
-        color: black;
+        color: var(--color-text-default);
         font-family: sans-serif;
       }
 
       .eth-tx-params footer {
         text-align: center;
-        color: #8d959e;
+        color: var(--color-text-muted);
       }
 
       .eth-tx-params footer a {
         text-align: center;
-        color: #8d959e;
+        color: var(--color-text-muted);
       }
     }
   }

ui/components/ui/alert/index.scss

@@ -1,14 +1,14 @@
 .global-alert {
   position: relative;
   width: 100%;
-  background-color: #33a4e7;
+  background-color: var(--color-primary-default);
 
   .msg {
     @include H7;
 
     width: 100%;
     display: block;
-    color: white;
+    color: var(--color-primary-inverse);
     text-align: center;
   }
 }

ui/components/ui/breadcrumbs/index.scss

@@ -6,7 +6,7 @@
 .breadcrumb {
   height: 10px;
   width: 10px;
-  border: 1px solid #979797;
+  border: 1px solid var(--color-border-default);
   border-radius: 50%;
 }
 

ui/components/ui/icon-button/icon-button.scss

@@ -17,7 +17,7 @@
     align-items: center;
     height: 36px;
     width: 36px;
-    background: #037dd6;
+    background: var(--color-primary-default);
     border-radius: 18px;
     margin-top: 6px;
     margin-bottom: 5px;

ui/components/ui/page-container/index.scss

@@ -95,7 +95,7 @@
   &__back-button {
     @include Paragraph;
 
-    color: #2f9ae0;
+    color: var(--color-primary-default);
     cursor: pointer;
   }
 

ui/components/ui/popover/index.scss

@@ -67,7 +67,7 @@
   &-bg {
     width: 100%;
     height: 100%;
-    background: var(--color-text-default);
+    background: var(--color-overlay-alternative);
     opacity: 0.2;
   }
 

ui/components/ui/url-icon/index.scss

@@ -18,7 +18,7 @@
     width: 24px;
     height: 24px;
     border-radius: 50%;
-    background: #bbc0c5;
+    background: var(--color-background-alternative);
     flex: 0 1 auto;
     display: flex;
     justify-content: center;

ui/css/base-styles.scss

@@ -38,7 +38,7 @@ html {
   /ui/pages/keychains/restore-vault.js
 */
 .error {
-  color: #f7861c;
+  color: var(--color-error-default);
   margin-top: 3px;
   margin-bottom: 9px;
 }

ui/pages/confirm-approve/confirm-approve-content/index.scss

@@ -258,7 +258,7 @@
       @include H6;
 
       font-weight: normal;
-      color: var(--color-text-alternative);
+      color: var(--color-text-muted);
     }
 
     &__labelled-fee {
@@ -301,7 +301,7 @@
     flex-flow: row;
     padding-top: 15px;
     padding-bottom: 30px;
-    border-bottom: 1px solid var(--color-border-default);
+    border-bottom: 1px solid var(--color-border-muted);
     width: 100%;
     justify-content: center;
     padding-left: 24px;
@@ -393,7 +393,7 @@
     margin-top: 5px;
     margin-bottom: 6px;
     padding: 12px 12px 14px 12px;
-    border: 1px solid var(--color-border-default);
+    border: 1px solid var(--color-border-muted);
     box-sizing: border-box;
     border-radius: 6px;
     align-items: center;

ui/pages/send/send.scss

@@ -149,7 +149,7 @@
     }
 
     &__group-item--selected {
-      border: 2px solid #2b7cd6;
+      border: 2px solid var(--color-primary-default);
       border-radius: 8px;
     }
   }

ui/pages/settings/index.scss

@@ -165,7 +165,7 @@
 
   &__sub-header {
     height: 72px;
-    border-bottom: 1px solid #d8d8d8;
+    border-bottom: 1px solid var(--color-border-muted);
     display: flex;
     justify-content: space-between;
     align-items: center;

ui/pages/swaps/fee-card/index.scss

@@ -56,8 +56,8 @@
 
   &__main {
     .transaction-detail {
-      border-top: 1px solid #bbc0c5;
-      border-bottom: 1px solid #bbc0c5;
+      border-top: 1px solid var(--color-border-muted);
+      border-bottom: 1px solid var(--color-border-muted);
       margin-bottom: 12px;
     }
   }
@@ -106,7 +106,7 @@
   }
 
   &__top-bordered-row {
-    border-top: 1px solid #bbc0c5;
+    border-top: 1px solid var(--color-border-muted);
     padding-top: 12px;
   }
 

ui/pages/swaps/select-quote-popover/quote-details/index.scss

@@ -48,7 +48,7 @@
   }
 
   &__light-grey {
-    color: #bbc0c5;
+    color: var(--color-border-muted);
   }
 
   &__row {

ui/pages/swaps/swaps-footer/index.scss

@@ -12,7 +12,7 @@
   @media screen and (max-width: $break-small) {
     &--border {
       .swaps-footer__custom-page-container-footer-class {
-        border-top: 1px solid #d2d8dd;
+        border-top: 1px solid var(--color-border-muted);
       }
     }
   }