What am I looking at? 🤔

A Material-UI theme for Suk'a Design System

Getting the theme

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

or

yarn add suka-material-ui-theme

Your have to also install the IBM Plex Sans typography:

npm i fontsource-ibm-plex-sans

After installing @kushki/suka-material-ui-theme, import it:

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

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

import "fontsource-ibm-plex-sans"

Using the theme

The theme exports an named export sukaTheme that calls createMuiTheme under the hood.

To use this theme, you need to pass it as the theme prop to muiThemeProvider:

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

See the Material-UI docs on themes for more details.

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

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

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