chore: update theme

src/theme/foundations/breakpoints.ts

@@ -1,9 +0,0 @@
-export const breakpoints = {
-  xs: '320px',
-  sm: '360px',
-  md: '768px',
-  lg: '1096px',
-  xl: '1200px',
-  '2xl': '1600px',
-  '3xl': '2000px'
-};

src/theme/foundations/colors.ts

@@ -0,0 +1,15 @@
+export const colors = {
+  brand: {
+    light: {
+      primary: '#11866f',
+      secondary: '#25453f',
+      body: '#1d242c'
+    }
+  },
+  green: {
+    200: '#06fece'
+  },
+  yellow: {
+    50: '#f0f2e2'
+  }
+};

src/theme/foundations/index.ts

@@ -1,2 +1,2 @@
-export * from './breakpoints';
+export * from './colors';
 export * from './sizes';

src/theme/foundations/sizes.ts

@@ -1,7 +1,8 @@
 export const sizes = {
   container: {
-    sm: '448px',
+    sm: '480px',
     lg: '1096px',
-    xl: '1200px'
+    xl: '1200px',
+    '2xl': '1536px'
   }
 };

src/theme/index.ts

@@ -1,10 +1,32 @@
 import { extendTheme } from '@chakra-ui/react';
 
-import { breakpoints, sizes } from './foundations';
+import { colors, sizes } from './foundations';
 
 const overrides = {
-  breakpoints,
+  colors,
-  sizes
+  components: {},
+  sizes,
+  styles: {
+    global: () => ({
+      body: {
+        // TODO: move color to theme colors
+        bg: '#f0f2e2'
+      }
+    })
+  },
+  // TODO: fix textStyles
+  textStyles: {
+    h1: {},
+    h2: {},
+    'hero-text-small': {
+      fontSize: '13px',
+      fontFamily: '"Inter", sans-serif'
+    },
+    // TODO: refactor w/ semantic tokens for light/dark mode
+    'link-light': {},
+    // TODO: refactor w/ semantic tokens for light/dark mode
+    'text-light': {}
+  }
 };
 
 export default extendTheme(overrides);