feat(colors): add color values from UI kit

Author: leemunroe

packages/badge/style.ts

@@ -1,16 +1,15 @@
 import { css } from "emotion";
-import { coreColors, customColors } from "../shared/styles/color";
+import { coreColors } from "../shared/styles/color";
 import { coreFonts } from "../shared/styles/typography";
 
 const { greyDark, greyLight, green, purple, red, white, yellow } = coreColors();
-const { ebonyClay } = customColors();
 const { fontFamilySansSerif } = coreFonts();
 
 const badgeAppearance = {
   default: css`
     background-color: ${greyLight};
     border-color: ${greyLight};
-    color: ${ebonyClay};
+    color: ${greyDark};
   `,
   success: css`
     background-color: ${green};

packages/badge/tests/__snapshots__/badge.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Badge accept jsx as children 1`] = `
 <span
-  className="css-i4ctwy"
+  className="css-1rtlwt4"
 >
   <span>
     string
@@ -12,47 +12,47 @@ exports[`Badge accept jsx as children 1`] = `
 
 exports[`Badge danger 1`] = `
 <span
-  className="css-o307zd"
+  className="css-1r81zrl"
 >
   danger
 </span>
 `;
 
 exports[`Badge default 1`] = `
 <span
-  className="css-i4ctwy"
+  className="css-1rtlwt4"
 >
   default
 </span>
 `;
 
 exports[`Badge outline 1`] = `
 <span
-  className="css-ml4yrq"
+  className="css-1s4jj7m"
 >
   outline
 </span>
 `;
 
 exports[`Badge primary 1`] = `
 <span
-  className="css-361qnz"
+  className="css-1s6ggg6"
 >
   primary
 </span>
 `;
 
 exports[`Badge success 1`] = `
 <span
-  className="css-xr9z4s"
+  className="css-7otxiv"
 >
   success
 </span>
 `;
 
 exports[`Badge warning 1`] = `
 <span
-  className="css-19otvs4"
+  className="css-jogxwy"
 >
   warning
 </span>

packages/badge/tests/__snapshots__/badgeButton.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`BadgeButton accept jsx as children 1`] = `
 <span
-  className="css-y5qucr"
+  className="css-1mdx3w6"
   onClick={[Function]}
   role="button"
   tabIndex={-1}
@@ -15,7 +15,7 @@ exports[`BadgeButton accept jsx as children 1`] = `
 
 exports[`BadgeButton danger 1`] = `
 <span
-  className="css-aqlru0"
+  className="css-bfxoiv"
   onClick={[Function]}
   role="button"
   tabIndex={-1}
@@ -26,7 +26,7 @@ exports[`BadgeButton danger 1`] = `
 
 exports[`BadgeButton default 1`] = `
 <span
-  className="css-y5qucr"
+  className="css-1mdx3w6"
   onClick={[Function]}
   role="button"
   tabIndex={-1}
@@ -37,7 +37,7 @@ exports[`BadgeButton default 1`] = `
 
 exports[`BadgeButton outline 1`] = `
 <span
-  className="css-j343ve"
+  className="css-3uom90"
   onClick={[Function]}
   role="button"
   tabIndex={-1}
@@ -48,7 +48,7 @@ exports[`BadgeButton outline 1`] = `
 
 exports[`BadgeButton primary 1`] = `
 <span
-  className="css-q2731u"
+  className="css-slxp3r"
   onClick={[Function]}
   role="button"
   tabIndex={-1}
@@ -59,7 +59,7 @@ exports[`BadgeButton primary 1`] = `
 
 exports[`BadgeButton success 1`] = `
 <span
-  className="css-10v0ttp"
+  className="css-4fz2cu"
   onClick={[Function]}
   role="button"
   tabIndex={-1}
@@ -70,7 +70,7 @@ exports[`BadgeButton success 1`] = `
 
 exports[`BadgeButton warning 1`] = `
 <span
-  className="css-1qzzy6w"
+  className="css-snof5e"
   onClick={[Function]}
   role="button"
   tabIndex={-1}

packages/shared/styles/color.ts

@@ -13,17 +13,113 @@ export const coreColors = (): IColors => {
   return {
     white: "#fff",
     black: "#000",
-    greyDark: "#1c212a",
-    greyLight: "#dadde2",
-    purple: "#7d57ff",
-    red: "#ec2a3b",
-    yellow: "#f9a328",
-    green: "#14c683"
+
+    // Purple
+    purple: "#7D58FF",
+    purpleLighten1: "#8360FF",
+    purpleLighten2: "#8A69FF",
+    purpleLighten3: "#9779FF",
+    purpleLighten4: "#E5DDFF",
+    purpleLighten5: "#F8F6FF",
+    purpleDarken1: "#704FE5",
+    purpleDarken2: "#6446CC",
+    purpleDarken3: "#4B3499",
+    purpleDarken4: "#322366",
+    purpleDarken5: "#191133",
+
+    // Grey Light
+    greyLight: "#DADDE2",
+    greyLightLighten1: "#DDE0E4",
+    greyLightLighten2: "#E1E3E7",
+    greyLightLighten3: "#E8EAED",
+    greyLightLighten4: "#F0F1F3",
+    greyLightLighten5: "#F7F8F9",
+    greyLightDarken1: "#C3C6CA",
+    greyLightDarken2: "#AEB0B4",
+    greyLightDarken3: "#828487",
+    greyLightDarken4: "#57585A",
+    greyLightDarken5: "#2B2C2D",
+
+    // Grey Dark
+    greyDark: "#1B2029",
+    greyDarkLighten1: "#262B33",
+    greyDarkLighten2: "#32363E",
+    greyDarkLighten3: "#484C53",
+    greyDarkLighten4: "#76797E",
+    greyDarkLighten5: "#A3A5A9",
+    greyDarkDarken1: "#181C24",
+    greyDarkDarken2: "#151920",
+    greyDarkDarken3: "#101318",
+    greyDarkDarken4: "#0A0C10",
+    greyDarkDarken5: "#050608",
+
+    // Red
+    red: "#EB293A",
+    redLighten1: "#ED3E4E",
+    redLighten2: "#EF5361",
+    redLighten3: "#F37E88",
+    redLighten4: "#FBD4D7",
+    redLighten5: "#FDF4F4",
+    redDarken1: "#D32434",
+    redDarken2: "#BC202E",
+    redDarken3: "#8D1822",
+    redDarken4: "#5E1017",
+    redDarken5: "#2F080B",
+
+    // Yellow
+    yellow: "#F9A328",
+    yellowLighten1: "#F9AC3D",
+    yellowLighten2: "#FAB553",
+    yellowLighten3: "#FBC77E",
+    yellowLighten4: "#FDECD4",
+    yellowLighten5: "#FEFAF4",
+    yellowDarken1: "#DF9223",
+    yellowDarken2: "#C78220",
+    yellowDarken3: "#956118",
+    yellowDarken4: "#634110",
+    yellowDarken5: "#312008",
+
+    // Green
+    green: "#14C684",
+    greenLighten1: "#2BCB90",
+    greenLighten2: "#43D19C",
+    greenLighten3: "#72DCB6",
+    greenLighten4: "#D0F3E6",
+    greenLighten5: "#F3FCF8",
+    greenDarken1: "#11B176",
+    greenDarken2: "#109E69",
+    greenDarken3: "#0C764F",
+    greenDarken4: "#084F34",
+    greenDarken5: "#04271A",
+
+    // Blue
+    blue: "#157FF2",
+    blueLighten1: "#2C8CF3",
+    blueLighten2: "#4398F4",
+    blueLighten3: "#72B2F7",
+    blueLighten4: "#D0E5FC",
+    blueLighten5: "#F3F8FE",
+    blueDarken1: "#1272D9",
+    blueDarken2: "#1065C1",
+    blueDarken3: "#0C4C91",
+    blueDarken4: "#083260",
+    blueDarken5: "#041930",
+
+    // Pink
+    pink: "#FF007D",
+    pinkLighten1: "#FF1A8A",
+    pinkLighten2: "#FF3397",
+    pinkLighten3: "#FF66B1",
+    pinkLighten4: "#FF99CB",
+    pinkLighten5: "#FFF2F8",
+    pinkDarken1: "#E50070",
+    pinkDarken2: "#CC0064",
+    pinkDarken3: "#99004B",
+    pinkDarken4: "#660032",
+    pinkDarken5: "#330019"
   };
 };
 
 export const customColors = (): IColors => {
-  return {
-    ebonyClay: "#1b2029"
-  };
+  return {};
 };