Dark mode: colors obj UI, GREY, WHITE (#14118)

* Removing all COLORS.UI 1,2,3,4 from codebase

* Removing all unused versions of COLORS.GREY, COLORS.WHITE and some left over UI1,UI2,UI3,UI4 in docs

ui/components/app/connected-status-indicator/connected-status-indicator.js

@@ -37,7 +37,7 @@ export default function ConnectedStatusIndicator({ onClick }) {
   }
 
   let indicatorType = ColorIndicator.TYPES.OUTLINE;
-  let indicatorColor = COLORS.INFO_DEFAULT;
+  let indicatorColor = COLORS.ICON_DEFAULT;
 
   if (status === STATUS_CONNECTED) {
     indicatorColor = COLORS.SUCCESS_DEFAULT;

ui/components/app/metamask-template-renderer/metamask-template-renderer.stories.js

@@ -22,7 +22,7 @@ const SECTIONS = {
       key: 'A Test String',
       children: 'A Test String',
       props: {
-        color: COLORS.UI3,
+        color: COLORS.TEXT_MUTED,
         variant: TYPOGRAPHY.H2,
       },
     },
@@ -31,7 +31,7 @@ const SECTIONS = {
       key: 'Some more text',
       children: 'Some more text as a paragraph',
       props: {
-        color: COLORS.UI4,
+        color: COLORS.TEXT_ALTERNATIVE,
         variant: TYPOGRAPHY.Paragraph,
       },
     },

ui/components/app/network-display/network-display.js

@@ -40,7 +40,7 @@ export default function NetworkDisplay({
 
   return (
     <Chip
-      borderColor={outline ? COLORS.UI3 : COLORS.TRANSPARENT}
+      borderColor={outline ? COLORS.BORDER_MUTED : COLORS.TRANSPARENT}
       onClick={onClick}
       leftIcon={
         <LoadingIndicator
@@ -49,7 +49,11 @@ export default function NetworkDisplay({
           isLoading={networkIsLoading}
         >
           <ColorIndicator
-            color={networkType === NETWORK_TYPE_RPC ? COLORS.UI4 : networkType}
+            color={
+              networkType === NETWORK_TYPE_RPC
+                ? COLORS.ICON_DEFAULT
+                : networkType
+            }
             size={indicatorSize}
             type={ColorIndicator.TYPES.FILLED}
             iconClassName={

ui/components/ui/box/README.mdx

@@ -98,13 +98,6 @@ List of deprecated background and border color props that are not theme compatib
 
 ```js
 /** !!! DEPRECATED DO NOT USE!!! */
-UI1: 'ui-1',
-UI2: 'ui-2',
-UI3: 'ui-3',
-UI4: 'ui-4',
-GREY: 'grey',
-NEUTRAL_GREY: 'neutral-grey',
-WHITE: 'white',
 PRIMARY1: 'primary-1',
 PRIMARY3: 'primary-3',
 SECONDARY1: 'secondary-1',

ui/components/ui/card/card.js

@@ -48,7 +48,7 @@ Card.propTypes = {
   padding: Box.propTypes.padding,
   /**
    * The background color of the card
-   * Defaults to COLORS.WHITE
+   * Defaults to COLORS.BACKGROUND_DEFAULT
    */
   backgroundColor: Box.propTypes.backgroundColor,
   /**

ui/components/ui/card/card.stories.js

@@ -162,8 +162,8 @@ DefaultStory.args = {
   padding: 4,
   border: true,
   borderWidth: 1,
-  borderColor: COLORS.UI2,
+  borderColor: COLORS.BORDER_DEFAULT,
   borderStyle: BORDER_STYLE.SOLID,
-  backgroundColor: COLORS.WHITE,
+  backgroundColor: COLORS.BACKGROUND_DEFAULT,
   display: DISPLAY.BLOCK,
 };

ui/components/ui/color-indicator/color-indicator.js

@@ -6,7 +6,7 @@ import { COLORS, SIZES } from '../../../helpers/constants/design-system';
 export default function ColorIndicator({
   size = SIZES.SM,
   type = 'outlined',
-  color = COLORS.UI4,
+  color = COLORS.ICON_DEFAULT,
   borderColor,
   iconClassName,
 }) {

ui/components/ui/textarea/textarea.stories.js

@@ -73,7 +73,7 @@ DefaultStory.args = {
   resize: RESIZE.BOTH,
   scrollable: false,
   boxProps: {
-    borderColor: COLORS.UI3,
+    borderColor: COLORS.BORDER_MUTED,
     borderRadius: SIZES.SM,
     borderStyle: BORDER_STYLE.SOLID,
     padding: [2, 4],

ui/components/ui/textarea/textarea.test.js

@@ -20,7 +20,7 @@ describe('TextArea', () => {
       resize: RESIZE.BOTH,
       scrollable: false,
       boxProps: {
-        borderColor: COLORS.UI3,
+        borderColor: COLORS.BORDER_MUTED,
         borderRadius: SIZES.SM,
         borderStyle: BORDER_STYLE.SOLID,
         padding: [2, 4],

ui/components/ui/typography/README.mdx

@@ -114,13 +114,6 @@ List of deprecated color props that are not theme compatible and should not be u
 
 ```js
 /** !!! DEPRECATED DO NOT USE!!! */
-UI1: 'ui-1',
-UI2: 'ui-2',
-UI3: 'ui-3',
-UI4: 'ui-4',
-GREY: 'grey',
-NEUTRAL_GREY: 'neutral-grey',
-WHITE: 'white',
 PRIMARY1: 'primary-1',
 PRIMARY3: 'primary-3',
 SECONDARY1: 'secondary-1',

ui/components/ui/typography/typography.js

@@ -32,13 +32,6 @@ export const ValidColors = [
   /**
    * COLORS BELOW HAVE BEEN DEPRECATED
    */
-  COLORS.UI1,
-  COLORS.UI2,
-  COLORS.UI3,
-  COLORS.UI4,
-  COLORS.GREY,
-  COLORS.NEUTRAL_GREY,
-  COLORS.WHITE,
   COLORS.PRIMARY1,
   COLORS.PRIMARY3,
   COLORS.SECONDARY1,

ui/helpers/constants/design-system.js

@@ -56,13 +56,6 @@ export const COLORS = {
   /**
    * !!! DEPRECATED DO NOT USE!!!
    */
-  UI1: 'ui-1',
-  UI2: 'ui-2',
-  UI3: 'ui-3',
-  UI4: 'ui-4',
-  GREY: 'grey',
-  NEUTRAL_GREY: 'neutral-grey',
-  WHITE: 'white',
   PRIMARY1: 'primary-1',
   PRIMARY3: 'primary-3',
   SECONDARY1: 'secondary-1',