chameleon-mui v1.0.4

🧙‍♂️ Chameleon MUI

A thin layer of styling to make Material-UI look like the Chameleon design system!

How to install

npm i chameleon-mui

How to use

Create a theme/index.ts file in your Material-UI project and add the following:

import { createMuiTheme } from '@material-ui/core/styles'
import { ThemeOptions } from '@material-ui/core/styles/createMuiTheme'

import { lightPalette, darkPalette, Chameleon, chameleon, typography, overrides } from 'chameleon-mui'

interface ExtendedThemeOptions extends ThemeOptions {
  chameleon: Chameleon
}

const myCustomTheme: ExtendedThemeOptions = {
  ...createMuiTheme({
    palette: lightPalette,
    typography,
    overrides,
  }),
  chameleon,
}

export { myCustomTheme }

Now provide this theme to your application

// ThemeProvider.tsx
import React from 'react'
import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles'

export const ThemeProvider = ({ children }) => {
  return <MuiThemeProvider theme={lightTheme}>{children}</MuiThemeProvider>
}

How to override the base config

If you need to override certain things, it's super easy! Just extend the object using the spread operator.

Example: I want to override the h2 styling:

const myCustomTheme: ExtendedThemeOptions = {
  ...createMuiTheme({
    [...]
    typography: {
      ...typography,
      h2: {
        fontSize: 24,
        fontWeight: 700,
      },
    }
    [...]
  })
}