Dark Mode: Remove ui colors (#14184)

ui/components/app/cancel-speedup-popover/index.scss

@@ -21,7 +21,7 @@
   }
 
   &__separator {
-    border-bottom: 1px solid var(--ui-grey);
+    border-bottom: 1px solid var(--color-border-default);
     width: 100%;
   }
 }

ui/components/app/collectible-details/index.scss

@@ -66,7 +66,7 @@ $spacer-break-small: 16px;
     justify-content: center;
     background-color: transparent;
     cursor: pointer;
-    color: var(--ui-4);
+    color: var(--color-text-alternative);
     border: 0;
 
     &:active {

ui/components/app/flask/experimental-area/index.scss

@@ -52,7 +52,7 @@
   button {
     background-color: var(--flask-purple) !important;
     border: 0 !important;
-    color: var(--ui-1);
+    color: var(--color-primary-inverse); //@TODO: We don't have a generic inverse color, using this one for now
     width: 200px;
   }
 }

ui/components/app/transaction-detail-item/index.scss

@@ -1,7 +1,7 @@
 .transaction-detail-item {
-  color: var(--ui-4);
+  color: var(--color-text-alternative);
   padding: 20px 0;
-  border-bottom: 1px solid var(--ui-3);
+  border-bottom: 1px solid var(--color-border-default);
 
   &__row {
     display: flex;
@@ -34,7 +34,7 @@
     margin-inline-start: 4px;
 
     path {
-      fill: var(--ui-3);
+      fill: var(--color-icon-default);
     }
   }
 

ui/components/ui/definition-list/definition-list.scss

@@ -6,7 +6,7 @@
     align-items: center;
 
     & i {
-      color: var(--ui-3);
+      color: var(--color-icon-default);
       margin-left: 6px;
       font-size: $font-size-h8;
     }

ui/css/design-system/colors.scss

@@ -51,12 +51,6 @@ $color-map: (
   /**
   * !!! DEPRECATED DO NOT USE!!!
   */
-  'ui-1': --ui-1,
-  'ui-2': --ui-2,
-  'ui-3': --ui-3,
-  'ui-4': --ui-4,
-  'ui-5': --ui-5,
-  'grey': --ui-grey,
   'neutral-grey': --neutral-grey,
   'primary-3': --primary-3,
   'alert-1': --alert-1,

ui/css/utilities/colors.scss

@@ -4,12 +4,6 @@
   --alert-1: #ffd33d;
   --success-1: #4cd964;
   --success-3: #219e37;
-  --ui-grey: #d6d9dc;
-  --ui-1: #f2f3f4;
-  --ui-2: #d6d9dc;
-  --ui-3: #bbc0c5;
-  --ui-4: #6a737d;
-  --ui-5: #c4c4c4;
   --mainnet: #29b6af;
   --ropsten: #ff4a8d;
   --kovan: #9064ff;

ui/pages/permissions-connect/flask/snap-install/index.scss

@@ -13,7 +13,7 @@
     @include H7;
 
     display: flex;
-    color: var(--ui-4);
+    color: var(--color-text-alternative);
 
     .link {
       color: var(--color-primary-default);

ui/pages/settings/flask/view-snap/index.scss

@@ -83,7 +83,7 @@
 
     .connected-sites-list__content-row {
       border-top: none;
-      border-bottom: 1px solid var(--ui-2);
+      border-bottom: 1px solid var(--color-border-muted);
 
       &:last-child {
         border-bottom: none;

ui/pages/swaps/loading-swaps-quotes/loading-swap-quotes.stories.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import LoadingSwapsQuotes from './loading-swaps-quotes';
+import { storiesMetadata } from './loading-swaps-quotes-stories-metadata';
+
+export default {
+  title: 'Pages/Swaps/LoadingSwapQuotes',
+  id: __filename,
+};
+
+export const DefaultStory = () => (
+  <div className="swaps">
+    <div className="swaps__container">
+      <LoadingSwapsQuotes
+        loadingComplete={false}
+        onDone={action('Loading done')}
+        aggregatorMetadata={storiesMetadata.totle}
+      />
+    </div>
+  </div>
+);

ui/pages/swaps/smart-transaction-status/index.scss

@@ -73,8 +73,8 @@
 
   &__swaps-footer {
     .btn-secondary {
-      color: var(--ui-4);
-      border: 1px solid var(--ui-4);
+      color: var(--color-text-alternative);
+      border: 1px solid var(--color-border-default);
     }
   }