import { createTheme, ThemeProvider } from "@mui/material";
import { StyColors } from "./sty-colors";
import { StyTypos } from "./sty-typos";
import { StyElevations } from "./sty-elevations";

export default {
    title: 'mui-utils/Components/Styleguide',
}

export const Colors = () => {
    const theme = createTheme();
    return <ThemeProvider theme={ theme }>
        <StyColors/>
    </ThemeProvider>
}

export const Typography = () => {
    const theme = createTheme();
    return <ThemeProvider theme={ theme }>
        <StyTypos/>
    </ThemeProvider>
}

export const Shadows = () => {
    const theme = createTheme();
    return <ThemeProvider theme={ theme }>
        <StyElevations/>
    </ThemeProvider>
}