colors config

components/AccountNav/AccountNavLink.tsx

@@ -20,7 +20,7 @@ const AccountNavLink = ({ text, pathname, icon }: Props) => {
         w="220px"
         p="15px 20px"
         color={ isActive ? 'white' : 'black' }
-        bgColor={ isActive ? 'green.700' : 'transparent' }
+        bgColor={ isActive ? 'brand.700' : 'transparent' }
         borderRadius="base"
       >
         <HStack spacing="4">

components/Page/Page.tsx

@@ -14,7 +14,7 @@ const Page = ({ children }: Props) => {
         w="100%"
         minH="100vh"
         padding="140px 48px 48px 48px"
-        bgColor="gray.200"
+        bgColor="gray.50"
         spacing="12"
         alignItems="stretch"
       >

components/WatchlistTable/WatchlistTable.tsx

@@ -45,7 +45,7 @@ const WatchlistTable = ({ data }: Props) => {
                 <Td>
                   <HStack spacing="30px">
                     <Icon as={ FaEdit } w="20px" h="20px" cursor="pointer" color="blue.500"/>
-                    <Icon as={ FaTrash } w="20px" h="20px" cursor="pointer" color="red.500"/>
+                    <Icon as={ FaTrash } w="20px" h="20px" cursor="pointer" color="red.200"/>
                   </HStack>
                 </Td>
               </Tr>

theme/foundations/colors.ts

+const colors = {
+// standard colors
+  green: {
+    '50': '#dcfff0',
+    '100': '#b1feda',
+    '200': '#84fbc8',
+    '300': '#56f9b8',
+    '400': '#30f7ae',
+    '500': '#1fdd9b',
+    '600': '#11ad7d',
+    '700': '#047b5d', // <-
+    '800': '#004a33',
+    '900': '#001b0f',
+  },
+  blue: {
+    '50': '#e7f0ff',
+    '100': '#c2d2f1',
+    '200': '#9db3e3',
+    '300': '#7895d4',
+    '400': '#5277c6',
+    '500': '#395ead', // <-
+    '600': '#2b4987',
+    '700': '#1e3462',
+    '800': '#0f1f3e',
+    '900': '#010a1b',
+  },
+  red: {
+    '50': '#ffe4ef',
+    '100': '#feb7cc',
+    '200': '#f689aa',
+    '300': '#f15a88',
+    '400': '#ec2d66', // <-
+    '500': '#d2134c',
+    '600': '#a50c3b',
+    '700': '#77062a',
+    '800': '#490118',
+    '900': '#1e0008',
+  },
+  gray: {
+    '50': '#f0f2f4', // <-
+    '100': '#d7d8d9',
+    '200': '#bcbec0',
+    '300': '#a0a5aa',
+    '400': '#848b93',
+    '500': '#6a727a',
+    '600': '#53585e',
+    '700': '#3c3f43',
+    '800': '#242628',
+    '900': '#0b0d0f',
+  },
+  // main colors
+  brand: {
+    '50': '#dcfff0',
+    '100': '#b1feda',
+    '200': '#84fbc8',
+    '300': '#56f9b8',
+    '400': '#30f7ae',
+    '500': '#1fdd9b',
+    '600': '#11ad7d',
+    '700': '#047b5d',
+    '800': '#004a33',
+    '900': '#001b0f',
+  },
+}
+
+export default colors;

theme/index.ts

@@ -2,10 +2,12 @@ import { extendTheme } from '@chakra-ui/react';
 
 import typography from './foundations/typography';
 import borders from './foundations/borders';
+import colors from './foundations/colors';
 
 const overrides = {
   ...typography,
   ...borders,
+  colors,
 }
 
 export default extendTheme(overrides);