init + api use

src/theme.tsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import { ChakraProvider as ChacraProv, createSystem, defaultConfig } from '@chakra-ui/react'
+import type { PropsWithChildren } from 'react'
+
+const ChacraProvider: React.ElementType = ChacraProv
+
+const system = createSystem(defaultConfig, {
+  globalCss: {
+    body: {
+      colorPalette: 'teal',
+    },
+    '.markdown-preview': {
+      '& h1': {
+        fontSize: '2xl',
+        fontWeight: 'bold',
+        marginTop: '4',
+        marginBottom: '2',
+      },
+      '& h2': {
+        fontSize: 'xl',
+        fontWeight: 'bold',
+        marginTop: '3',
+        marginBottom: '2',
+      },
+      '& h3': {
+        fontSize: 'lg',
+        fontWeight: 'semibold',
+        marginTop: '2',
+        marginBottom: '1',
+      },
+      '& p': {
+        marginBottom: '2',
+      },
+      '& ul, & ol': {
+        marginLeft: '4',
+        marginBottom: '2',
+      },
+      '& code': {
+        backgroundColor: 'gray.100',
+        padding: '0.125rem 0.25rem',
+        borderRadius: 'sm',
+        fontSize: 'sm',
+        fontFamily: 'monospace',
+      },
+      '& pre': {
+        backgroundColor: 'gray.100',
+        padding: '3',
+        borderRadius: 'md',
+        marginBottom: '2',
+        overflowX: 'auto',
+      },
+      '& pre code': {
+        backgroundColor: 'transparent',
+        padding: '0',
+      },
+    },
+  },
+  theme: {
+    tokens: {
+      fonts: {
+        body: { value: 'var(--font-outfit)' },
+      },
+    },
+    semanticTokens: {
+      radii: {
+        l1: { value: '0.5rem' },
+        l2: { value: '0.75rem' },
+        l3: { value: '1rem' },
+      },
+    },
+  },
+})
+
+export const Provider = (props: PropsWithChildren) => (
+  <ChacraProvider value={system}>
+    {props.children}
+  </ChacraProvider>
+)
+