## What am I looking at? 🤔

A Material-UI theme for Suk'a Design System

## Getting the theme

```bash
npm i suka-material-ui-theme --save
```

or

```bash
yarn add suka-material-ui-theme
```

Your have to also install the IBM Plex Sans typography:

```bash
npm i fontsource-ibm-plex-sans
```

After installing [@kushki/suka-material-ui-theme](https://www.npmjs.com/package/@kushki/suka-material-ui-theme),
import it:

```js
import { sukaTheme } from "@kushki/suka-material-ui-theme";
```

Don't forget to also import the font within your app entry file or site component:

```js
import "fontsource-ibm-plex-sans"
```

## Using the theme

The theme exports an named export `sukaTheme` that
calls [`createMuiTheme`](https://material-ui.com/customization/themes/#createmuitheme-options-theme) under the hood.

To use this theme, you need to pass it as the `theme` prop to
[`muiThemeProvider`](https://material-ui.com/customization/themes/#muithemeprovider):

```js
<MuiThemeProvider theme={sukaTheme}>
  // ... your app here
</MuiThemeProvider>
```

See [the Material-UI docs on themes](https://material-ui.com/customization/themes/) for more details.

It also exports different variables for us, like `pallete`, `borderRadius`, `typography` for use inside your code like:

```js
import { pallete } from '@kushki/suka-material-ui-theme'

const CustomBox = ({ children }) => <div styles={{ background: pallete.secondary.main }}>{ children }</div>
```