import {Canvas, Meta, Story} from '@storybook/addon-docs';
import { StyledEngineProvider, ThemeProvider } from "@mui/material";

<Meta title="mui-utils / Utils / CSS Vars"/>

# CSS Vars
This util provides some CSS variables defined in the MUI Theme config.

## Install

```tsx
import {MuiCssVars} from '@dreipol/t3-mui-utils'

return <ThemeProvider theme={ getTheme() }>
    <StyledEngineProvider injectFirst>
        <MuiCssVars/>
        { children }
    </StyledEngineProvider/
</ThemeProvider>
```

## Variabes

### Misc
CSS Var Name | Value | Description
---|---|---
`--theme-spacing` | `theme.spacing(1)` | A single spacing unit of the themes


### Z-Index
CSS Var Name | Value | Description
---|---|---
`--theme-zIndex-tooltip` | `theme.zIndex.tooltip` |
`--theme-zIndex-appbar` | `theme.zIndex.appbar` |
`--theme-zIndex-mobile-stepper` | `theme.zIndex.mobileStepper` |
`--theme-zIndex-modal` | `theme.zIndex.modal` |
`--theme-zIndex-drawer` | `theme.zIndex.drawer` |
`--theme-zIndex-snackbar` | `theme.zIndex.snackbar` |
`--theme-zIndex-speed-dial` | `theme.zIndex.speedDial` |

### Elevations
CSS Var Name | Value | Description
---|---|---
`--theme-shadows-[1...23]` | `theme.shadows[1...23]` | Elevations

### Colors
CSS Var Name | Value | Description
---|---|---
`--theme-palette-primary-main` | `theme.palette.primary.main` |
`--theme-palette-primary-light` | `theme.palette.primary.light` |
`--theme-palette-primary-contrast-text` | `theme.palette.primary.contrastText` |
`--theme-palette-primary-dark` | `theme.palette.primary.dark` |
`--theme-palette-secondary-main` | `theme.palette.secondary.main` |
`--theme-palette-secondary-light` | `theme.palette.secondary.light` |
`--theme-palette-secondary-contrast-text` | `theme.palette.secondary.contrastText` |
`--theme-palette-secondary-dark` | `theme.palette.secondary.dark` |
`--theme-palette-text-primary` | ` theme.palette.text.primary` |
`--theme-palette-text-secondary` | ` theme.palette.text.secondary` |
`--theme-palette-text-disabled` | ` theme.palette.text.disabled` |
`--theme-palette-common-black` | ` theme.palette.common.black` |
`--theme-palette-common-white` | ` theme.palette.common.white` |
`--theme-palette-divider` | `theme.palette.divider` |
`--theme-palette-background-paper` | `theme.palette.background.paper` |
`--theme-palette-background-default` | `theme.palette.background.default` |