border radiuses

components/AccountNav/AccountNavLink.tsx

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

components/Page/Page.tsx

@@ -19,7 +19,7 @@ const Page = ({ children }: Props) => {
         alignItems="stretch"
       >
         <AccountNav/>
-        <Box borderRadius="10px" w="100%" overflow="hidden" bgColor="white">{ children }</Box>
+        <Box borderRadius="base" w="100%" overflow="hidden" bgColor="white">{ children }</Box>
       </HStack>
     </LightMode>
   );

theme/fonts.ts

-import { theme } from '@chakra-ui/react';
-
-const fonts = {
-  heading: `Inter, ${ theme.fonts.heading }`,
-  body: `Inter, ${ theme.fonts.body }`,
-}
-
-export default fonts;

theme/foundations/borders.ts

+const borders = {
+  radii: {
+    none: '0',
+    sm: '4px',
+    base: '10px',
+    lg: '30px',
+    full: '9999px',
+  },
+}
+
+export default borders;

theme/foundations/typography.ts

+import { theme } from '@chakra-ui/react';
+
+const typography = {
+  fonts: {
+    heading: `Inter, ${ theme.fonts.heading }`,
+    body: `Inter, ${ theme.fonts.body }`,
+  },
+}
+
+export default typography;

theme/index.ts

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