UI lib - new theme colors

src/@chakra-ui/gatsby-plugin/foundations/colors.ts

@@ -1,5 +1,34 @@
 export type Colors = typeof colors
 
-const colors = {}
+const colors = {
+  grey: {
+    100: "#f7f7f7",
+    300: "#d4d4d4",
+    500: "#646464",
+    700: "#222222",
+    900: "#141414",
+  },
+  blue: {
+    100: "#e8e8ff",
+    300: "#8d8dff",
+    500: "#1c1cff",
+    700: "#0b0b66",
+  },
+  orange: {
+    100: "#ffe3d3",
+    300: "#ffb991",
+    500: "#ff7324",
+    800: "#451900",
+  },
+  red: {
+    600: "#b80000",
+  },
+  green: {
+    500: "#109e62",
+  },
+  yellow: {
+    200: "#fff8df",
+  },
+}
 
 export default colors

src/@chakra-ui/gatsby-plugin/semanticTokens.ts

@@ -0,0 +1,47 @@
+import {
+  lightTheme as oldLightTheme,
+  darkTheme as oldDarkTheme,
+} from "../../theme"
+
+const oldLightThemeColors = oldLightTheme.colors
+const oldDarkThemeColors = oldDarkTheme.colors
+
+// define each of the old colors as a `semanticToken`:
+// `name: { _light: lightColor, _dark: darkColor }`
+const oldColors = Object.keys(oldLightThemeColors).reduce((colors, color) => {
+  const lightColor = oldLightThemeColors[color]
+  const darkColor = oldDarkThemeColors[color]
+
+  if (typeof lightColor !== "string" || typeof darkColor !== "string") {
+    return colors
+  }
+
+  return {
+    ...colors,
+    [color]: { _light: lightColor, _dark: darkColor },
+  }
+}, {})
+
+const semanticTokens = {
+  colors: {
+    // define old colors from the old theme as semanticTokens to transition
+    // from emotion components to chakra
+    // TODO: remove these colors as we migrate away from them
+    ...oldColors,
+
+    // Design System colors
+    primary: { _light: "blue.500", _dark: "orange.500" },
+    primaryDark: { _light: "blue.700", _dark: "orange.800" },
+    primaryHover: { _light: "blue.300", _dark: "orange.300" },
+    primaryLight: { _light: "blue.100", _dark: "orange.100"},
+    body: { _light: "grey.700", _dark: "grey.100" },
+    bodyLight: { _light: "grey.500", _dark: "grey.100" },
+    disabled: { _light: "grey.300", _dark: "grey.500" },
+    background: { _light: "white", _dark: "grey.700" },
+    success: "green.500",
+    error: "red.600",
+    attention: "yellow.200",
+  },
+}
+
+export default semanticTokens

src/@chakra-ui/gatsby-plugin/theme.ts

@@ -10,6 +10,8 @@ import styles from "./styles"
 // Foundational style overrides
 import foundations from "./foundations"
 
+import semanticTokens from "./semanticTokens"
+
 const config: ThemeConfig = {
   cssVarPrefix: "eth",
   initialColorMode: "light",
@@ -20,6 +22,7 @@ const theme: ThemeOverride = {
   config,
   styles,
   ...foundations,
+  semanticTokens,
 }
 
 export default extendTheme(theme)