Web Chakra Theme

This is for internal use only.

Usage

install

yarn add @blocto/web-chakra-theme

Since this package only export bundled blocto theme object, you need to combined it with default theme of chakra using extendTheme provided by chakra.

import { ChakraProvider, extendTheme } from '@chakra-ui/react'
import boTheme from '@blocto/web-chakra-theme'

In ChakraProvider:

<ChakraProvider theme={extendTheme(boTheme)}>
  <App />
</ChakraProvider>

Setup autocomplete:

yarn add @chakra-ui/styled-system
npx @chakra-ui/cli tokens /node_modules/@blocto/web-chakra-theme --out ./node_modules/@chakra-ui/system/node_modules/@chakra-ui/styled-system/dist/declarations/src/theming.types.d.ts

Note: Above commend might failed since theming.types.d.ts could located in different folder with various chakra versions. If autocomplete not working, please check where theming.types.d.ts places and replace the --out param. Typically will located in/node_modules/@chakra-ui/system/node_modules/@chakra-ui/styled-system/

Commands

dev

yarn dev

build

yarn build

update from design token repo

git submodule update --remote

publish package

npm publish --access public