From 548a7e21e44fe33756db3026c837d9886a51afc2 Mon Sep 17 00:00:00 2001
From: George Marshall <george.marshall@consensys.net>
Date: Wed, 23 Mar 2022 11:54:01 -0700
Subject: [PATCH] Removing all unused versions of PRIMARY and SECONDARY colors
 in codebase (#14121)

Co-authored-by: David Walsh <davidwalsh83@gmail.com>
---
 .../ledger-instruction-field.js                      |  8 ++++++--
 .../metamask-template-renderer.stories.js            |  2 +-
 ui/components/ui/box/README.mdx                      | 12 ------------
 .../ui/color-indicator/color-indicator.stories.js    |  2 +-
 ui/components/ui/typography/README.mdx               | 12 ------------
 ui/components/ui/typography/typography.js            |  7 -------
 ui/helpers/constants/design-system.js                |  7 -------
 7 files changed, 8 insertions(+), 42 deletions(-)

diff --git a/ui/components/app/ledger-instruction-field/ledger-instruction-field.js b/ui/components/app/ledger-instruction-field/ledger-instruction-field.js
index 287db2c8e..09ffafe32 100644
--- a/ui/components/app/ledger-instruction-field/ledger-instruction-field.js
+++ b/ui/components/app/ledger-instruction-field/ledger-instruction-field.js
@@ -35,7 +35,11 @@ import {
 import { getLedgerTransportType } from '../../../ducks/metamask/metamask';
 import { attemptLedgerTransportCreation } from '../../../store/actions';
 
-const renderInstructionStep = (text, show = true, color = COLORS.PRIMARY3) => {
+const renderInstructionStep = (
+  text,
+  show = true,
+  color = COLORS.PRIMARY_DEFAULT,
+) => {
   return (
     show && (
       <Typography
@@ -198,7 +202,7 @@ export default function LedgerInstructionField({ showDataInstruction }) {
               usingWebHID &&
                 webHidConnectedStatus ===
                   WEBHID_CONNECTED_STATUSES.NOT_CONNECTED,
-              COLORS.SECONDARY1,
+              COLORS.SECONDARY_DEFAULT,
             )}
           </div>
         </Dialog>
diff --git a/ui/components/app/metamask-template-renderer/metamask-template-renderer.stories.js b/ui/components/app/metamask-template-renderer/metamask-template-renderer.stories.js
index 9e1aec0b0..511a6bb56 100644
--- a/ui/components/app/metamask-template-renderer/metamask-template-renderer.stories.js
+++ b/ui/components/app/metamask-template-renderer/metamask-template-renderer.stories.js
@@ -13,7 +13,7 @@ const SECTIONS = {
   props: {
     margin: 4,
     padding: 8,
-    borderColor: COLORS.PRIMARY1,
+    borderColor: COLORS.PRIMARY_DEFAULT,
     borderWidth: 2,
   },
   children: [
diff --git a/ui/components/ui/box/README.mdx b/ui/components/ui/box/README.mdx
index b1ab0543c..fe43d2380 100644
--- a/ui/components/ui/box/README.mdx
+++ b/ui/components/ui/box/README.mdx
@@ -91,15 +91,3 @@ import Box from '../ui/box';
   <Typography color={COLORS.TEXT_DEFAULT}>COLORS.BORDER_DEFAULT</Typography>
 </Box>;
 ```
-
-## Deprecated Colors
-
-List of deprecated background and border color props that are not theme compatible and should not be used.
-
-```js
-/** !!! DEPRECATED DO NOT USE!!! */
-PRIMARY1: 'primary-1',
-PRIMARY3: 'primary-3',
-SECONDARY1: 'secondary-1',
-SECONDARY3: 'secondary-3',
-```
diff --git a/ui/components/ui/color-indicator/color-indicator.stories.js b/ui/components/ui/color-indicator/color-indicator.stories.js
index a458afcd7..a0f87c535 100644
--- a/ui/components/ui/color-indicator/color-indicator.stories.js
+++ b/ui/components/ui/color-indicator/color-indicator.stories.js
@@ -25,7 +25,7 @@ export default {
         type: 'select',
       },
       options: COLORS,
-      defaultValue: COLORS.PRIMARY1,
+      defaultValue: COLORS.PRIMARY_DEFAULT,
     },
     borderColor: {
       control: {
diff --git a/ui/components/ui/typography/README.mdx b/ui/components/ui/typography/README.mdx
index a05e7c6be..c9e0dee7e 100644
--- a/ui/components/ui/typography/README.mdx
+++ b/ui/components/ui/typography/README.mdx
@@ -108,18 +108,6 @@ import { COLORS} from '../../../helpers/constants/design-system';
 </Typography>
 ```
 
-## Deprecated Colors
-
-List of deprecated color props that are not theme compatible and should not be used.
-
-```js
-/** !!! DEPRECATED DO NOT USE!!! */
-PRIMARY1: 'primary-1',
-PRIMARY3: 'primary-3',
-SECONDARY1: 'secondary-1',
-SECONDARY3: 'secondary-3',
-```
-
 ### Font Weight
 
 Use the `fontWeight` prop and the `FONT_WEIGHT` object from `./ui/helpers/constants/design-system.js` to change the font weight of the Typography component. There are 2 font weights:
diff --git a/ui/components/ui/typography/typography.js b/ui/components/ui/typography/typography.js
index 564dcc1e2..55224a295 100644
--- a/ui/components/ui/typography/typography.js
+++ b/ui/components/ui/typography/typography.js
@@ -29,13 +29,6 @@ export const ValidColors = [
   COLORS.WARNING_INVERSE,
   COLORS.INFO_DEFAULT,
   COLORS.INFO_INVERSE,
-  /**
-   * COLORS BELOW HAVE BEEN DEPRECATED
-   */
-  COLORS.PRIMARY1,
-  COLORS.PRIMARY3,
-  COLORS.SECONDARY1,
-  COLORS.SECONDARY3,
 ];
 
 export const ValidTags = [
diff --git a/ui/helpers/constants/design-system.js b/ui/helpers/constants/design-system.js
index edcda87bb..1809ea31c 100644
--- a/ui/helpers/constants/design-system.js
+++ b/ui/helpers/constants/design-system.js
@@ -53,13 +53,6 @@ export const COLORS = {
   GOERLI: 'goerli',
   TRANSPARENT: 'transparent',
   LOCALHOST: 'localhost',
-  /**
-   * !!! DEPRECATED DO NOT USE!!!
-   */
-  PRIMARY1: 'primary-1',
-  PRIMARY3: 'primary-3',
-  SECONDARY1: 'secondary-1',
-  SECONDARY3: 'secondary-3',
 };
 
 export const TYPOGRAPHY = {