From 9d1818df1b14db8e4d825cb6ca8f2cb4a1b36926 Mon Sep 17 00:00:00 2001
From: George Marshall <george.marshall@consensys.net>
Date: Mon, 21 Mar 2022 06:58:27 -0700
Subject: [PATCH] Dark Mode: updating COLORS.BLACK to COLORS.TEXT_DEFAULT
 (#14063)

---
 .../app/gas-details-item/gas-details-item-title/index.scss    | 2 +-
 ui/components/app/gas-details-item/gas-details-item.js        | 2 +-
 ui/components/ui/box/README.mdx                               | 1 -
 ui/components/ui/definition-list/definition-list.stories.js   | 4 ++--
 ui/components/ui/typography/README.mdx                        | 1 -
 ui/components/ui/typography/typography.js                     | 1 -
 ui/helpers/constants/design-system.js                         | 1 -
 .../confirm-transaction-base.component.js                     | 1 -
 ui/pages/confirmation/confirmation.js                         | 2 +-
 9 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/ui/components/app/gas-details-item/gas-details-item-title/index.scss b/ui/components/app/gas-details-item/gas-details-item-title/index.scss
index 341732627..8c8e4a7ad 100644
--- a/ui/components/app/gas-details-item/gas-details-item-title/index.scss
+++ b/ui/components/app/gas-details-item/gas-details-item-title/index.scss
@@ -3,7 +3,7 @@
     font-weight: 400;
     font-style: italic;
     font-size: 12px;
-    color: var(--color-text-alternative);
+    color: var(--color-text-muted);
     line-height: inherit;
   }
 }
diff --git a/ui/components/app/gas-details-item/gas-details-item.js b/ui/components/app/gas-details-item/gas-details-item.js
index 8c3977f19..bb90fbe4a 100644
--- a/ui/components/app/gas-details-item/gas-details-item.js
+++ b/ui/components/app/gas-details-item/gas-details-item.js
@@ -36,7 +36,7 @@ const GasDetailsItem = ({ userAcknowledgedGasMissing = false }) => {
     <TransactionDetailItem
       key="gas-item"
       detailTitle={<GasDetailsItemTitle />}
-      detailTitleColor={COLORS.BLACK}
+      detailTitleColor={COLORS.TEXT_DEFAULT}
       detailText={
         <div className="gas-details-item__currency-container">
           <LoadingHeartBeat estimateUsed={estimateUsed} />
diff --git a/ui/components/ui/box/README.mdx b/ui/components/ui/box/README.mdx
index 71f7dd42a..295281204 100644
--- a/ui/components/ui/box/README.mdx
+++ b/ui/components/ui/box/README.mdx
@@ -102,7 +102,6 @@ UI1: 'ui-1',
 UI2: 'ui-2',
 UI3: 'ui-3',
 UI4: 'ui-4',
-BLACK: 'black',
 GREY: 'grey',
 NEUTRAL_GREY: 'neutral-grey',
 WHITE: 'white',
diff --git a/ui/components/ui/definition-list/definition-list.stories.js b/ui/components/ui/definition-list/definition-list.stories.js
index 68f6a91f9..e2d351b01 100644
--- a/ui/components/ui/definition-list/definition-list.stories.js
+++ b/ui/components/ui/definition-list/definition-list.stories.js
@@ -58,7 +58,7 @@ export const WithTypographyControl = () => (
     gapSize={select('gapSize', SIZES, SIZES.SM)}
     termTypography={{
       variant: select('termTypography.variant', TYPOGRAPHY, TYPOGRAPHY.H6),
-      color: select('termTypography.color', COLORS, COLORS.BLACK),
+      color: select('termTypography.color', COLORS, COLORS.TEXT_DEFAULT),
     }}
     definitionTypography={{
       variant: select(
@@ -66,7 +66,7 @@ export const WithTypographyControl = () => (
         TYPOGRAPHY,
         TYPOGRAPHY.H6,
       ),
-      color: select('definitionTypography.color', COLORS, COLORS.BLACK),
+      color: select('definitionTypography.color', COLORS, COLORS.TEXT_DEFAULT),
     }}
   />
 );
diff --git a/ui/components/ui/typography/README.mdx b/ui/components/ui/typography/README.mdx
index 552b26573..a8677c48b 100644
--- a/ui/components/ui/typography/README.mdx
+++ b/ui/components/ui/typography/README.mdx
@@ -118,7 +118,6 @@ UI1: 'ui-1',
 UI2: 'ui-2',
 UI3: 'ui-3',
 UI4: 'ui-4',
-BLACK: 'black',
 GREY: 'grey',
 NEUTRAL_GREY: 'neutral-grey',
 WHITE: 'white',
diff --git a/ui/components/ui/typography/typography.js b/ui/components/ui/typography/typography.js
index 166ad4ac1..346f064ff 100644
--- a/ui/components/ui/typography/typography.js
+++ b/ui/components/ui/typography/typography.js
@@ -36,7 +36,6 @@ export const ValidColors = [
   COLORS.UI2,
   COLORS.UI3,
   COLORS.UI4,
-  COLORS.BLACK,
   COLORS.GREY,
   COLORS.NEUTRAL_GREY,
   COLORS.WHITE,
diff --git a/ui/helpers/constants/design-system.js b/ui/helpers/constants/design-system.js
index d27c43d1f..9219b861e 100644
--- a/ui/helpers/constants/design-system.js
+++ b/ui/helpers/constants/design-system.js
@@ -60,7 +60,6 @@ export const COLORS = {
   UI2: 'ui-2',
   UI3: 'ui-3',
   UI4: 'ui-4',
-  BLACK: 'black',
   GREY: 'grey',
   NEUTRAL_GREY: 'neutral-grey',
   WHITE: 'white',
diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
index adbb684c7..e5703aeb6 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -490,7 +490,6 @@ export default class ConfirmTransactionBase extends Component {
               </>
             )
           }
-          detailTitleColor={COLORS.BLACK}
           detailText={
             !isMultiLayerFeeNetwork && (
               <div className="confirm-page-container-content__currency-container">
diff --git a/ui/pages/confirmation/confirmation.js b/ui/pages/confirmation/confirmation.js
index 44768c633..b8c74a127 100644
--- a/ui/pages/confirmation/confirmation.js
+++ b/ui/pages/confirmation/confirmation.js
@@ -188,7 +188,7 @@ export default function ConfirmationPage() {
             <NetworkDisplay
               colored={false}
               indicatorSize={SIZES.XS}
-              labelProps={{ color: COLORS.BLACK }}
+              labelProps={{ color: COLORS.TEXT_DEFAULT }}
             />
           </Box>
         ) : null}