From 974491a3cf4ef7e4fe1e0c7b98d68ff2a96c8957 Mon Sep 17 00:00:00 2001
From: Guillaume Roux <guillaumeroux123@gmail.com>
Date: Thu, 24 Mar 2022 21:27:41 +0100
Subject: [PATCH] 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>
---
 .../app/flask/snap-remove-warning/index.scss          |  2 +-
 ui/components/ui/color-indicator/color-indicator.scss |  2 +-
 ui/components/ui/url-icon/index.scss                  |  2 +-
 ui/css/utilities/colors.scss                          |  4 ----
 .../seed-phrase/reveal-seed-phrase/index.scss         |  2 +-
 .../reveal-seed-phrase.component.js                   |  6 +++++-
 .../reveal-seed-phrase/reveal-seed-phrase.stories.js  | 11 +++++++++++
 ui/pages/keychains/index.scss                         |  2 +-
 8 files changed, 21 insertions(+), 10 deletions(-)
 create mode 100644 ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.stories.js

diff --git a/ui/components/app/flask/snap-remove-warning/index.scss b/ui/components/app/flask/snap-remove-warning/index.scss
index cd7a17016..c2a561dad 100644
--- a/ui/components/app/flask/snap-remove-warning/index.scss
+++ b/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;
diff --git a/ui/components/ui/color-indicator/color-indicator.scss b/ui/components/ui/color-indicator/color-indicator.scss
index ebd1b4668..b8bc064a9 100644
--- a/ui/components/ui/color-indicator/color-indicator.scss
+++ b/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);
       }
     }
   }
diff --git a/ui/components/ui/url-icon/index.scss b/ui/components/ui/url-icon/index.scss
index 4f173304d..7753d667e 100644
--- a/ui/components/ui/url-icon/index.scss
+++ b/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;
diff --git a/ui/css/utilities/colors.scss b/ui/css/utilities/colors.scss
index 3cb73e56f..039c436ef 100644
--- a/ui/css/utilities/colors.scss
+++ b/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
diff --git a/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss b/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss
index 6ecf96d4d..f000930cc 100644
--- a/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss
+++ b/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;
diff --git a/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js b/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js
index 1d9a47b8d..31a2f80ff 100644
--- a/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js
+++ b/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>
diff --git a/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.stories.js b/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.stories.js
new file mode 100644
index 000000000..32c7f4136
--- /dev/null
+++ b/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';
diff --git a/ui/pages/keychains/index.scss b/ui/pages/keychains/index.scss
index ca59acaf4..1c081b686 100644
--- a/ui/pages/keychains/index.scss
+++ b/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;
   }