Dark Mode: Remove Unused Colors (#14088)

ui/components/ui/box/README.mdx

@@ -106,18 +106,11 @@ GREY: 'grey',
 NEUTRAL_GREY: 'neutral-grey',
 WHITE: 'white',
 PRIMARY1: 'primary-1',
-PRIMARY2: 'primary-2',
 PRIMARY3: 'primary-3',
 SECONDARY1: 'secondary-1',
-SECONDARY2: 'secondary-2',
 SECONDARY3: 'secondary-3',
 SUCCESS1: 'success-1',
-SUCCESS2: 'success-2',
 SUCCESS3: 'success-3',
 ERROR1: 'error-1',
-ERROR2: 'error-2',
-ERROR3: 'error-3',
 ALERT1: 'alert-1',
-ALERT2: 'alert-2',
-ALERT3: 'alert-3',
 ```

ui/components/ui/typography/README.mdx

@@ -122,20 +122,13 @@ GREY: 'grey',
 NEUTRAL_GREY: 'neutral-grey',
 WHITE: 'white',
 PRIMARY1: 'primary-1',
-PRIMARY2: 'primary-2',
 PRIMARY3: 'primary-3',
 SECONDARY1: 'secondary-1',
-SECONDARY2: 'secondary-2',
 SECONDARY3: 'secondary-3',
 SUCCESS1: 'success-1',
-SUCCESS2: 'success-2',
 SUCCESS3: 'success-3',
 ERROR1: 'error-1',
-ERROR2: 'error-2',
-ERROR3: 'error-3',
 ALERT1: 'alert-1',
-ALERT2: 'alert-2',
-ALERT3: 'alert-3',
 ```
 
 ### Font Weight

ui/components/ui/typography/typography.js

@@ -40,20 +40,13 @@ export const ValidColors = [
   COLORS.NEUTRAL_GREY,
   COLORS.WHITE,
   COLORS.PRIMARY1,
-  COLORS.PRIMARY2,
   COLORS.PRIMARY3,
   COLORS.SECONDARY1,
-  COLORS.SECONDARY2,
   COLORS.SECONDARY3,
   COLORS.SUCCESS1,
-  COLORS.SUCCESS2,
   COLORS.SUCCESS3,
   COLORS.ERROR1,
-  COLORS.ERROR2,
-  COLORS.ERROR3,
   COLORS.ALERT1,
-  COLORS.ALERT2,
-  COLORS.ALERT3,
 ];
 
 export const ValidTags = [

ui/css/design-system/colors.scss

@@ -61,18 +61,11 @@ $color-map: (
   'grey': --ui-grey,
   'neutral-grey': --neutral-grey,
   'primary-1': --primary-1,
-  'primary-2': --primary-2,
   'primary-3': --primary-3,
   'secondary-1': --secondary-1,
-  'secondary-2': --secondary-2,
   'secondary-3': --secondary-3,
   'alert-1': --alert-1,
-  'alert-2': --alert-2,
-  'alert-3': --alert-3,
   'error-1': --error-1,
-  'error-2': --error-2,
-  'error-3': --error-3,
   'success-1': --success-1,
-  'success-2': --success-2,
   'success-3': --success-3
 );

ui/css/utilities/colors.scss

@@ -8,28 +8,15 @@
   --Grey-000: #f2f3f4;
   --Grey-100: #d6d9dc;
   --Grey-200: #bbc0c5;
-  --Grey-300: #9fa6ae;
   --Grey-400: #848c96;
   --Grey-500: #6a737d;
-  --Grey-600: #535a61;
-  --Grey-700: #3b4046;
-  --Grey-800: #24272a;
-  // Greens
-  --Green-500: #28a745;
   // Reds
   --Red-000: #fcf2f3;
   --Red-300: #e88f97;
-  --Red-400: #e06470;
   --Red-500: #d73a49;
-  --Red-600: #b92534;
   // Orange
-  --Orange-000: #fef5ef;
-  --Orange-300: #faa66c;
-  --Orange-400: #f8883b;
   --Orange-500: #f66a0a;
-  --Orange-600: #c65507;
   // Yellow
-  --Yellow-000: #fefae8; // Temporary placeholder
   --Yellow-100: #fefcde;
   --Yellow-500: #ffd33d;
   // Black
@@ -37,26 +24,14 @@
   // Primary colors
   --primary-blue: var(--Blue-500);
   // Accents
-  --accent-yellow: var(--Yellow-500);
   --accent-red: var(--Red-500);
-  // Neutrals
-  --neutral-black: var(--Black-100);
-  --neutral-grey: var(--Grey-500);
   // Everything below this line is part of the new color system
   --primary-1: #037dd6;
-  --primary-2: #eaf6ff;
-  --primary-3: #0260a4;
   --secondary-1: #f66a0a;
-  --secondary-2: #fef5ef;
   --secondary-3: #c65507;
   --error-1: #d73a49;
-  --error-2: #fcf2f3;
-  --error-3: #b92534;
   --alert-1: #ffd33d;
-  --alert-2: #fefcde;
-  --alert-3: #f8c000;
   --success-1: #4cd964;
-  --success-2: #caf4d1;
   --success-3: #219e37;
   --ui-black: #24292e;
   --ui-grey: #d6d9dc;
@@ -93,7 +68,6 @@
   --alabaster: #fafafa;
   --silver-chalice: #aeaeae;
   --tundora: #4d4d4d;
-  --nile-blue: #1b344d;
   --scorpion: #5d5d5d;
   --silver: #cdcdcd;
   --monzo: #d0021b;

ui/helpers/constants/design-system.js

@@ -64,20 +64,13 @@ export const COLORS = {
   NEUTRAL_GREY: 'neutral-grey',
   WHITE: 'white',
   PRIMARY1: 'primary-1',
-  PRIMARY2: 'primary-2',
   PRIMARY3: 'primary-3',
   SECONDARY1: 'secondary-1',
-  SECONDARY2: 'secondary-2',
   SECONDARY3: 'secondary-3',
   SUCCESS1: 'success-1',
-  SUCCESS2: 'success-2',
   SUCCESS3: 'success-3',
   ERROR1: 'error-1',
-  ERROR2: 'error-2',
-  ERROR3: 'error-3',
   ALERT1: 'alert-1',
-  ALERT2: 'alert-2',
-  ALERT3: 'alert-3',
 };
 
 export const TYPOGRAPHY = {

ui/pages/onboarding-flow/privacy-settings/index.scss

@@ -22,7 +22,7 @@
     margin-bottom: 20px;
 
     a {
-      color: var(--Blue-500);
+      color: var(--color-primary-default);
 
       &:hover {
         cursor: pointer;