Add accent-color usage from design system. (#9009)

ui/app/components/app/alerts/unconnected-account-alert/unconnected-account-alert.scss

@@ -29,7 +29,7 @@
     margin-bottom: 16px;
     padding: 16px;
     font-size: 14px;
-    border: 1px solid #d73a49;
+    border: 1px solid $accent-red;
     background: #f8eae8;
     border-radius: 3px;
   }

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

@@ -49,8 +49,8 @@
     border-top: 1px solid $geyser;
 
     &--highlight {
-      background-color: $warning-light-yellow;
+      background-color: $Yellow-000;
-      border: 1px solid $warning-yellow;
+      border: 1px solid $accent-yellow;
       box-sizing: border-box;
       padding: 16px;
       margin-bottom: 16px;

ui/app/components/ui/alert-circle-icon/index.scss

@@ -1,13 +1,13 @@
 .alert-circle-icon {
   &--danger {
-    border-color: $danger-red;
+    border-color: $accent-red;
-    color: $danger-red;
+    color: $accent-red;
-    background: $danger-light-red;
+    background: $Red-000;
   }
 
   &--warning {
-    border-color: $warning-yellow;
+    border-color: $accent-yellow;
-    color: $warning-yellow;
+    color: $accent-yellow;
-    background: $warning-light-yellow;
+    background: $Yellow-000;
   }
 }

ui/app/components/ui/button/buttons.scss

@@ -8,7 +8,6 @@ $hover-confirm: #0372c3;
 $hover-red: #feb6bf;
 $hover-red-primary: #c72837;
 $hover-orange: #ffd3b5;
-$danger-light-red: #ea7e77;
 $warning-light-orange: #f8b588;
 
 %button {
@@ -297,7 +296,7 @@ button.primary {
     &--disabled,
     &[disabled] {
       border-color: $Red-100;
-      color: $danger-light-red;
+      color: $Red-300;
     }
 
     &:active {
@@ -337,7 +336,7 @@ button.primary {
 
     &--disabled,
     &[disabled] {
-      background-color: $danger-light-red;
+      background-color: $Red-300;
     }
 
     &:active {

ui/app/components/ui/icon/index.scss

@@ -2,7 +2,7 @@
   margin: 0 4px;
 
   &--success {
-    fill: $success-green;
+    fill: $accent-green;
   }
 
   &--info {
@@ -10,10 +10,10 @@
   }
 
   &--warning {
-    fill: $warning-yellow;
+    fill: $accent-yellow;
   }
 
   &--danger {
-    fill: $danger-red;
+    fill: $accent-red;
   }
 }

ui/app/css/itcss/settings/variables.scss

@@ -46,18 +46,6 @@ $mischka: #dddee9;
 $web-orange: #f2a202;
 $mercury: #e5e5e5;
 
-/*
-  notification and error message colors
-  */
-$success-green: #28a745;
-$success-light-green: #e8f9f1;
-$danger-red: #d73a49;
-$danger-light-red: #f8eae8;
-$info-blue: #037dd6;
-$info-light-blue: #e8f4fd;
-$warning-yellow: #ffd33d;
-$warning-light-yellow: #fefae8;
-
 /*
   Z-Indicies
  */

ui/app/css/variables/colors.scss

@@ -56,6 +56,7 @@ $Orange-700: #954005;
 $Orange-800: #632b04;
 $Orange-900: #321602;
 
+$Yellow-000: #fefae8; // Temporary placeholder
 $Yellow-100: #fefcde;
 $Yellow-500: #ffd33d;
 

ui/app/pages/settings/contact-list-tab/index.scss

@@ -48,7 +48,7 @@
 
     .button {
       justify-content: flex-end;
-      color: #d73a49;
+      color: $accent-red;
       font-size: 14px;
     }
   }