Dark Mode: Remove white, black and gray color tokens (#14186)

* remove white, black and gray color tokens

* Update ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Add RevealSeedPhrase story

Co-authored-by: George Marshall <george.marshall@consensys.net>

ui/components/app/flask/snap-remove-warning/index.scss

@@ -1,5 +1,5 @@
 .snap-remove-warning {
-  color: var(--black);
+  color: var(--color-text-default);
 
   &__footer-button {
     height: 40px;

ui/components/ui/color-indicator/color-indicator.scss

@@ -49,7 +49,7 @@ $sizes: (
         background-color: var($color);
       }
       & #{$self}__icon {
-        color: var(--black);
+        color: var(--color-icon-default);
       }
     }
   }

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

@@ -3,7 +3,7 @@
   height: 24px;
   background-position: center;
   border-radius: 50%;
-  background-color: var(--white);
+  background-color: var(--color-background-default);
   box-shadow: 0 2px 4px 0 rgba($black, 0.24);
   flex: 0 0 auto;
   -moz-animation: fadein 1s;

ui/css/utilities/colors.scss

@@ -21,10 +21,6 @@
 
 /* Deprecated colors */
 :root {
-  --white: #fff;
-  --black: #000;
-  --gray: #808080;
-
   /*
     Colors
     http://chir.ag/projects/name-that-color

ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss

@@ -48,7 +48,7 @@
   &__reveal-button {
     @include H7;
 
-    color: var(--white);
+    color: var(--color-overlay-inverse);
     font-weight: 500;
     text-transform: uppercase;
     margin-top: 8px;

ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js

@@ -112,7 +112,11 @@ export default class RevealSeedPhrase extends PureComponent {
               this.setState({ isShowingSeedPhrase: true });
             }}
           >
-            <LockIcon width="28px" height="35px" fill="#FFFFFF" />
+            <LockIcon
+              width="28px"
+              height="35px"
+              fill="var(--color-overlay-inverse)"
+            />
             <div className="reveal-seed-phrase__reveal-button">
               {t('clickToRevealSeed')}
             </div>

ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.stories.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import RevealSeedPhrase from '.';
+
+export default {
+  title: 'Components/Pages/FirstTimeFlow/RevealSeedPhrase',
+  id: __filename,
+};
+
+export const DefaultStory = () => <RevealSeedPhrase />;
+
+DefaultStory.storyName = 'Default';

ui/pages/keychains/index.scss

@@ -61,7 +61,7 @@
     @include Paragraph;
 
     margin-bottom: 18px;
-    color: var(--black);
+    color: var(--color-text-default);
     position: absolute;
     top: -25px;
   }