move text styles out of Code.tsx into textStyles

src/components/UI/docs/Code.tsx

@@ -13,11 +13,7 @@ export const Code: FC<Props> = ({ code }) => {
         <Text
           as='span'
           background='code-bg'
-          fontFamily='"JetBrains Mono", monospace'
-          fontWeight={400}
-          fontSize='md'
-          lineHeight={4}
-          letterSpacing='1%'
+          textStyle='inline-code-snippet'
           pb={2}
           mb={-2}
         >
@@ -28,15 +24,11 @@ export const Code: FC<Props> = ({ code }) => {
       (
         <Stack>
           <ChakraCode
-            overflow='hidden'
+            overflow='auto'
             p={6}
             background='code-bg-contrast'
-            color='green.50'
-            fontFamily='"JetBrains Mono", monospace'
-            fontWeight={400}
-            fontSize='md'
-            lineHeight='21.12px'
-            letterSpacing='1%'
+            textStyle='code-block'
+            color='code-text'
           >
             {code.children[0]}
           </ChakraCode>

src/theme/foundations/textStyles.ts

@@ -90,6 +90,20 @@ export const textStyles = {
     textAlign: 'center',
     fontSize: 'sm'
   },
+  'inline-code-snippet': {
+    fontFamily: '"JetBrains Mono", monospace',
+    fontWeight: 400,
+    fontSize: 'md',
+    lineHeight: 4,
+    letterSpacing: '1%'
+  },
+  'code-block': {
+    fontFamily: '"JetBrains Mono", monospace',
+    fontWeight: 400,
+    fontSize: 'md',
+    lineHeight: '21.12px',
+    letterSpacing: '1%'
+  },
   // TODO: refactor w/ semantic tokens for light/dark mode
   'link-light': {},
   // TODO: refactor w/ semantic tokens for light/dark mode

src/theme/index.ts

@@ -29,7 +29,8 @@ const overrides = {
       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' }
+      'code-text': { _light: 'green.50', _dark: 'green.50' },
+      bg: { _light: 'yellow.50', _dark: 'gray.800' },
     }
   }
 };