setup color palette from design system

src/theme/foundations/colors.ts

@@ -8,7 +8,18 @@ export const colors = {
   },
   green: {
     50: '#d7f5ef',
-    200: '#06fece'
+    100: '#98FFEB',
+    200: '#06fece',
+    300: '#23EDC5',
+    400: '#1FD3B0',
+    500: '#2EBDA1',
+    600: '#11866f',
+    700: '#08715C',
+    800: '#25453f',
+    900: '#02211B'
+  },
+  gray: {
+    800: '#1d242c'
   },
   yellow: {
     50: '#f0f2e2'

src/theme/index.ts

@@ -14,11 +14,22 @@ const overrides = {
   styles: {
     global: () => ({
       body: {
-        bg: 'yellow.50'
+        bg: 'bg'
       }
     })
   },
-  textStyles
+  textStyles,
+  semanticTokens: {
+    colors: {
+      primary: { _light: 'green.600', _dark: 'green.200' },
+      secondary: { _light: 'green.800', _dark: 'green.600' },
+      'button-bg': { _light: 'green.50', _dark: 'green.900' },
+      body: { _light: 'gray.800', _dark: 'yellow.50' },
+      'code-bg': { _light: 'gray.200', _dark: 'gray.700' },
+      'code-bg-contrast': { _light: 'gray.800', _dark: 'gray.900' },
+      bg: { _light: 'yellow.50', _dark: 'gray.800' }
+    }
+  }
 };
 
 export default extendTheme(overrides);