@ubie/chakra-ui-theme

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

Usage

1. Install the package

npm i @ubie/chakra-ui-theme

2. Register to Chakra UI

import { ChakraProvider, extendTheme } from "@chakra-ui/react";
import ubieTheme from "@ubie/chakra-ui-theme";

const theme = extendTheme(
  {
    /** Define your theme here so it will override ubie theme. */
  },
  ubieTheme
);

const App = () => {
  return <ChakraProvider theme={theme}>{/** ... */}</ChakraProvider>;
};

3. Now you can use ubie colors

// Primitive colors
<Box textColor="blue.500">Ubie blue</Box>
// Semantic colors
<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.

{
  "compilerOptions": {
    ...
    "resolveJsonModule": true
  }
}