Update chakra/core to chakra/react and cleanup theme setup (#281)

packages/design-system/README.md

@@ -48,8 +48,7 @@ Jest tests are set up to run with `npm test` or `yarn test`. This runs the test
   foo.test.tsx
 /src
   index.tsx       # Entry Point
-  theme.ts        # Default Theme
-  GlobalStyle.ts  # CSS Reset and Emotion Global Styles
+  theme/index.ts        # Default Theme
 /stories          # Storybook files
   Foo.stories.tsx
 package.json

packages/design-system/package.json

@@ -24,9 +24,11 @@
     "react": ">=16"
   },
   "dependencies": {
-    "@chakra-ui/core": "next",
-    "@chakra-ui/icons": "next",
-    "@chakra-ui/theme": "next",
+    "@chakra-ui/icons": "1.0.3",
+    "@chakra-ui/theme-tools": "1.0.3",
+    "@chakra-ui/react": "1.1.5",
+    "@emotion/react": "11.1.4",
+    "@emotion/styled": "11.0.0",
     "react-select": "^3.1.0",
     "react-timezone-select": "^0.9.7"
   },

packages/design-system/src/LoadingState.tsx

@@ -1,4 +1,4 @@
-import { Flex, Spinner } from '@chakra-ui/core';
+import { Flex, Spinner } from '@chakra-ui/react';
 import React from 'react';
 
 export const LoadingState: React.FC = () => (

packages/design-system/src/MetaBox.tsx

@@ -1,4 +1,4 @@
-import { Box, Text } from '@chakra-ui/core';
+import { Box, Text } from '@chakra-ui/react';
 import React from 'react';
 
 export type MetaBoxProps = {

packages/design-system/src/MetaButton.tsx

@@ -1,4 +1,4 @@
-import { Button, ButtonProps } from '@chakra-ui/core';
+import { Button, ButtonProps } from '@chakra-ui/react';
 import React from 'react';
 
 type LinkProps = { href?: string; target?: '_blank' };

packages/design-system/src/MetaHeading.tsx

@@ -1,4 +1,4 @@
-import { Heading, HeadingProps } from '@chakra-ui/core';
+import { Heading, HeadingProps } from '@chakra-ui/react';
 import React from 'react';
 
 export const MetaHeading: React.FC<HeadingProps> = ({ children, ...props }) => (

packages/design-system/src/MetaTag.tsx

@@ -1,4 +1,4 @@
-import { Tag, TagProps } from '@chakra-ui/core';
+import { Tag, TagProps } from '@chakra-ui/react';
 import React from 'react';
 
 export const MetaTag: React.FC<TagProps> = ({ children, ...props }) => (

packages/design-system/src/ResponsiveText.tsx

@@ -1,4 +1,4 @@
-import { Text, TextProps, useBreakpointValue } from '@chakra-ui/core';
+import { Text, TextProps, useBreakpointValue } from '@chakra-ui/react';
 import React from 'react';
 
 interface Content {

packages/design-system/src/index.ts

@@ -40,7 +40,7 @@ export {
   ModalCloseButton,
   ModalOverlay,
   useDisclosure,
-} from '@chakra-ui/core';
+} from '@chakra-ui/react';
 
 export { theme as MetaTheme } from './theme';
 export { Icon3box } from './icons';

packages/design-system/src/theme.ts

@@ -1,104 +0,0 @@
-import chakraTheme, { Theme as ChakraTheme } from '@chakra-ui/theme';
-
-interface MetaColors {
-  offwhite: string;
-  blue20: string;
-  dark: string;
-  purpleBoxDark: string;
-  purpleBoxLight: string;
-  purpleTag: string;
-  blueLight: string;
-  cyanText: string;
-  diamond: string;
-  platinum: string;
-  gold: string;
-  silver: string;
-  discord: string;
-  discordDark: string;
-  bronze: string;
-  purple80: string;
-}
-
-interface MetaTheme {
-  colors: ChakraTheme['colors'] & MetaColors;
-}
-
-type Theme = ChakraTheme & MetaTheme;
-
-export const theme: Theme = {
-  ...chakraTheme,
-  styles: {
-    ...chakraTheme.styles,
-    global: {
-      ...chakraTheme.styles.global,
-      '#__next': {
-        background: 'dark',
-        color: 'white',
-        minHeight: '100vh',
-      },
-    },
-  },
-  radii: {
-    ...chakraTheme.radii,
-    none: '0',
-    sm: '0.125rem',
-    md: '0.25rem',
-    lg: '0.5rem',
-    full: '9999px',
-  },
-  sizes: {
-    ...chakraTheme.sizes,
-    container: {
-      ...chakraTheme.sizes.container,
-      xl: '85rem',
-    },
-  },
-  colors: {
-    ...chakraTheme.colors,
-    cyan: {
-      50: '#dbffff',
-      100: '#b1fcfe',
-      200: '#83f9fb',
-      300: '#57f6fa',
-      400: '#34f2f7',
-      500: '#26d9de',
-      600: '#15a9ad',
-      700: '#04797c',
-      800: '#00494b',
-      900: '#001a1b',
-    },
-    purple: {
-      50: '#eee7ff',
-      100: '#c8bafc',
-      200: '#a48df3',
-      300: '#7f60ed',
-      400: '#5a32e6',
-      500: '#4119cd',
-      600: '#3112a0',
-      700: '#230d74',
-      800: '#150747',
-      900: '#07021d',
-    },
-    diamond: '#40e8ec',
-    platinum: '#81b6e3',
-    gold: '#d0a757',
-    silver: '#b0b0b0',
-    bronze: '#a97142',
-    offwhite: '#F6F8F9',
-    blue20: 'rgba(79, 105, 205, 0.2)',
-    purple80: 'rgba(70, 20, 100, 0.8)',
-    dark: '#1B0D2A',
-    purpleBoxDark: '#261943',
-    purpleBoxLight: '#392373',
-    purpleTag: '#40347C',
-    blueLight: '#A5B9F6',
-    cyanText: '#79F8FB',
-    discord: '#7289da',
-    discordDark: '#5d6eb3',
-  },
-  fonts: {
-    body: '"IBM Plex Sans", sans-serif',
-    mono: '"IBM Plex Mono", monospace',
-    heading: '"Press Start 2P", sans-serif',
-  },
-};

packages/design-system/src/theme/colors.ts

@@ -0,0 +1,64 @@
+import { Theme as ChakraTheme, theme as baseTheme } from '@chakra-ui/react';
+
+export type MetaColors = ChakraTheme['colors'] & {
+  offwhite: string;
+  blue20: string;
+  dark: string;
+  purpleBoxDark: string;
+  purpleBoxLight: string;
+  purpleTag: string;
+  blueLight: string;
+  cyanText: string;
+  diamond: string;
+  platinum: string;
+  gold: string;
+  silver: string;
+  discord: string;
+  discordDark: string;
+  bronze: string;
+  purple80: string;
+};
+
+export const colors: MetaColors = {
+  ...baseTheme.colors,
+  diamond: '#40e8ec',
+  platinum: '#81b6e3',
+  gold: '#d0a757',
+  silver: '#b0b0b0',
+  bronze: '#a97142',
+  offwhite: '#F6F8F9',
+  blue20: 'rgba(79, 105, 205, 0.2)',
+  purple80: 'rgba(70, 20, 100, 0.8)',
+  dark: '#1B0D2A',
+  purpleBoxDark: '#261943',
+  purpleBoxLight: '#392373',
+  purpleTag: '#40347C',
+  blueLight: '#A5B9F6',
+  cyanText: '#79F8FB',
+  discord: '#7289da',
+  discordDark: '#5d6eb3',
+  cyan: {
+    50: '#dbffff',
+    100: '#b1fcfe',
+    200: '#83f9fb',
+    300: '#57f6fa',
+    400: '#34f2f7',
+    500: '#26d9de',
+    600: '#15a9ad',
+    700: '#04797c',
+    800: '#00494b',
+    900: '#001a1b',
+  },
+  purple: {
+    50: '#eee7ff',
+    100: '#c8bafc',
+    200: '#a48df3',
+    300: '#7f60ed',
+    400: '#5a32e6',
+    500: '#4119cd',
+    600: '#3112a0',
+    700: '#230d74',
+    800: '#150747',
+    900: '#07021d',
+  },
+};

packages/design-system/src/theme/index.ts

@@ -0,0 +1,30 @@
+import { extendTheme, Theme as ChakraTheme } from '@chakra-ui/react';
+
+import { colors, MetaColors } from './colors';
+
+type Theme = ChakraTheme & {
+  colors: MetaColors;
+};
+
+export const theme: Theme = extendTheme({
+  styles: {
+    global: {
+      '#__next': {
+        background: 'dark',
+        color: 'white',
+        minHeight: '100vh',
+      },
+    },
+  },
+  sizes: {
+    container: {
+      xl: '85rem',
+    },
+  },
+  colors,
+  fonts: {
+    body: '"IBM Plex Sans", sans-serif',
+    mono: '"IBM Plex Mono", monospace',
+    heading: '"Press Start 2P", sans-serif',
+  },
+});

packages/design-system/src/typography.tsx

@@ -1,4 +1,4 @@
-import { Text } from '@chakra-ui/core';
+import { Text } from '@chakra-ui/react';
 import React from 'react';
 
 export type TextProps = {