@ubie/chakra-ui-theme

Chakra UI custom theme generated from @ubie/design-tokens

Usage

1. Install the package

1npm i @ubie/chakra-ui-theme

2. Register to Chakra UI

1import { ChakraProvider, extendTheme } from "@chakra-ui/react";
2import ubieTheme from "@ubie/chakra-ui-theme";
3
4const theme = extendTheme(
5  {
6    /** Define your theme here so it will override ubie theme. */
7  },
8  ubieTheme
9);
10
11const App = () => {
12  return <ChakraProvider theme={theme}>{/** ... */}</ChakraProvider>;
13};

3. Now you can use ubie colors

1// Primitive colors
2<Box textColor="blue.500">Ubie blue</Box>
3// Semantic colors
4<Box textColor="accent">Accent color, same to pink.500</Box>

FAQ

Got Cannot find module its corresponding type error on TypeScript

Enable resolveJsonModule option in your tsconfig.

1{
2  "compilerOptions": {
3    ...
4    "resolveJsonModule": true
5  }
6}
7