css.tsx

import * as React from 'react'
import { createConfig, TCss } from '@stitches/css'

const config = createConfig({
  tokens: {
    colors: {
      RED: 'tomato',
    },
  },
})

const context = React.createContext<TCss<typeof config>>(null)

const Provider: React.FC<{ css: TCss<typeof config>}> = ({ children, css }) => {
  return <context.Provider value={css}>{children}</context.Provider>
}

const useCss = () => React.useContext(context)

export { config, Provider, useCss }