# PDFTron Global Chakra Theme

A shared [Chakra UI](https://chakra-ui.com/) theme to be shared across various PDFTron projects.

## Basic usage

First install the package:

```
yarn add @pdftron/chakra-theme
```

Now import the theme and pass to the ChakraProvider:

```tsx
import createTheme from '@pdftron/chakra-theme';
import { ChakraProvider } from "@chakra-ui/react"

const theme = createTheme();

export default function App() {

  return (
    <ChakraProvider theme={theme}>
      <App />
    </ChakraProvider>
  )
}
```

## Options

Things like fonts and breakpoints can be configured via options.

The `createTheme` accepts an object with the following properties (all optional):

- `primaryFont` (string) the name of your primary font. Defaults to `proxima-nova`
- `secondaryFont` (string) the name of your secondary font. Defaults to `proxima-nova`
- `backupFont` (string) the font to use if the main fonts cannot be loaded. Also used for font swapping. Should be set to a system font. Defaults to `arial`
- `breakpoints` (object) Chakra breakpoints to use. Defaults to `{sm: '600px', lg: '900px'}`

## Extending the theme

The theme can be extended using the `extendTheme` function provided by Chakra.

```tsx
import { extendTheme } from "@chakra-ui/react";
import createTheme from '@pdftron/chakra-theme';

const baseTheme = createTheme();

const theme = extendTheme({
  {
    // you custom theme here
  },
  baseTheme
})
```

## Local installation / development

To run the project locally, first clone the repo:

```
git clone git@github.com:XodoDocs/pdftron-chakra-theme.git
cd pdftron-chakra-theme
```

Install dependencies:

```
yarn
```

Run the storybook:

```
yarn storybook
```