feat(colors): test out new brand colors

BREAKING CHANGE: The colors have changed.

Author: connor-baer

src/__snapshots__/index.spec.ts.snap

@@ -26,60 +26,60 @@ Object {
     "untilMega": "(max-width: 767px)",
   },
   "colors": Object {
-    "b100": "#EDF4FC",
+    "b100": "#F0F6FF",
     "b200": "#DAEAFF",
     "b300": "#AFD0FE",
     "b400": "#7FB5FF",
-    "b500": "#3388FF",
-    "b700": "#1760CE",
-    "b900": "#003C8B",
-    "black": "#0F131A",
+    "b500": "#3063E9",
+    "b700": "#234BC3",
+    "b900": "#1A368E",
+    "black": "#000",
     "bodyBg": "#FAFBFC",
-    "bodyColor": "#0F131A",
-    "danger": "#DB4D4D",
+    "bodyColor": "#000",
+    "danger": "#D23F47",
     "g100": "#E4EABB",
     "g200": "#D4DB8F",
     "g300": "#BED630",
     "g500": "#8CC13F",
     "g700": "#47995A",
     "g900": "#356560",
     "n100": "#FAFBFC",
-    "n200": "#EEF0F2",
-    "n300": "#D8DDE1",
-    "n500": "#9DA7B1",
-    "n700": "#5C656F",
-    "n800": "#323E49",
-    "n900": "#212933",
+    "n200": "#F5F5F5",
+    "n300": "#E6E6E6",
+    "n500": "#999999",
+    "n700": "#333333",
+    "n800": "#1A1A1A",
+    "n900": "#000000",
     "o100": "#EFD0BB",
     "o200": "#F7B97C",
     "o300": "#F7941D",
     "o500": "#CE6C0B",
     "o700": "#8E4503",
     "o900": "#66391B",
     "overlay": "rgba(12, 15, 20, 0.21)",
-    "p100": "#EDF4FC",
+    "p100": "#F0F6FF",
     "p200": "#DAEAFF",
     "p300": "#AFD0FE",
     "p400": "#7FB5FF",
-    "p500": "#3388FF",
-    "p700": "#1760CE",
-    "p900": "#003C8B",
+    "p500": "#3063E9",
+    "p700": "#234BC3",
+    "p900": "#1A368E",
     "r100": "#F4CBCB",
     "r200": "#EDA2A2",
     "r300": "#EA7A7A",
-    "r500": "#DB4D4D",
-    "r700": "#B22828",
-    "r900": "#7F1818",
+    "r500": "#D23F47",
+    "r700": "#B22426",
+    "r900": "#941618",
     "shadow": "rgba(12, 15, 20, 0.07)",
-    "success": "#47995A",
+    "success": "#138849",
     "v100": "#E9CFF2",
     "v200": "#D7A9DC",
     "v300": "#C781C9",
     "v500": "#B54DB3",
     "v700": "#8928A2",
     "v900": "#5F1D6B",
-    "warning": "#D8A413",
-    "white": "#FFFFFF",
+    "warning": "#F5C625",
+    "white": "#FFF",
     "y100": "#F2E9C7",
     "y200": "#EDDD8E",
     "y300": "#F6CC1B",

src/themes/light.ts

@@ -17,29 +17,29 @@ import { Colors } from '../types';
 
 export const type = 'light';
 
-const white = '#FFFFFF';
-const black = '#0F131A';
+const white = '#FFF';
+const black = '#000';
 
 // NOTE: The neutral color names & values don't match up with what's in Figma.
 // Fixing this would be a big breaking change, so we're leaving it as is.
 const neutrals = {
   n100: '#FAFBFC',
-  n200: '#EEF0F2',
-  n300: '#D8DDE1',
-  n500: '#9DA7B1', // n400 in Figma
-  n700: '#5C656F', // n500 in Figma
-  n800: '#323E49', // n700 in Figma
-  n900: '#212933',
+  n200: '#F5F5F5',
+  n300: '#E6E6E6',
+  n500: '#999999',
+  n700: '#333333',
+  n800: '#1A1A1A',
+  n900: '#000000',
 };
 
 const blues = {
-  b100: '#EDF4FC',
+  b100: '#F0F6FF',
   b200: '#DAEAFF',
   b300: '#AFD0FE',
   b400: '#7FB5FF',
-  b500: '#3388FF',
-  b700: '#1760CE',
-  b900: '#003C8B',
+  b500: '#3063E9',
+  b700: '#234BC3',
+  b900: '#1A368E',
 };
 
 const greens = {
@@ -82,9 +82,9 @@ const reds = {
   r100: '#F4CBCB',
   r200: '#EDA2A2',
   r300: '#EA7A7A',
-  r500: '#DB4D4D',
-  r700: '#B22828',
-  r900: '#7F1818',
+  r500: '#D23F47',
+  r700: '#B22426',
+  r900: '#941618',
 };
 
 const primary = {
@@ -102,9 +102,9 @@ const misc = {
   overlay: 'rgba(12, 15, 20, 0.21)',
   bodyBg: neutrals.n100,
   bodyColor: black,
-  danger: reds.r500,
-  success: greens.g700,
-  warning: yellows.y500,
+  danger: '#D23F47',
+  success: '#138849',
+  warning: '#F5C625',
 };
 
 export const colors: Colors = {