80 lines
1.7 KiB
TypeScript
80 lines
1.7 KiB
TypeScript
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>
|
|
)
|
|
|