UIKit/lib/components/theme.ts

import { createTheme } from "@mui/material";


export const penaMuiTheme = createTheme({
    breakpoints: {
        values: {
            xs: 300,
            sm: 560,
            md: 900,
            lg: 1200,
            xl: 1536,
        },
    },
    palette: {
        mode: "light",
        primary: {
            main: "#000000",
        },
        secondary: {
            main: "#252734",
        },
        text: {
            primary: "#000000",
            secondary: "#7E2AEA",
        },
        background: {
            default: "#F2F3F7",
        },
        purple: {
            main: "#7E2AEA",
            dark: "#581CA7",
            light: "#944FEE",
        },
        bg: {
            main: "#333647",
            dark: "#252734",
        },
        gray: {
            main: "#9A9AAF",
            dark: "#4D4D4D",
        },
        orange: {
            main: "#FB5607",
            light: "#FC712F",
        },
    },
    components: {
        MuiButton: {
            variants: [
                {
                    props: { variant: "pena-contained-dark" },
                    style: ({ theme }) => theme.unstable_sx({
                        minWidth: "180px",
                        py: "9px",
                        px: "43px",
                        borderRadius: "8px",
                        boxShadow: "none",
                        fontSize: "18px",
                        lineHeight: "24px",
                        fontWeight: 400,
                        textTransform: "none",
                        color: "white",
                        backgroundColor: theme.palette.purple.main,
                        border: `1px solid ${theme.palette.purple.main}`,
                        "&:hover": {
                            color: "white",
                            backgroundColor: theme.palette.purple.light,
                            border: `1px solid ${theme.palette.purple.light}`,
                        },
                        "&:active": {
                            color: theme.palette.purple.main,
                            backgroundColor: "white",
                            border: `1px solid ${theme.palette.purple.main}`,
                        }
                    }),
                },
                {
                    props: { variant: "pena-outlined-dark" },
                    style: ({ theme }) => theme.unstable_sx({
                        minWidth: "180px",
                        py: "9px",
                        px: "43px",
                        borderRadius: "8px",
                        boxShadow: "none",
                        fontSize: "18px",
                        lineHeight: "24px",
                        fontWeight: 400,
                        textTransform: "none",
                        color: "white",
                        backgroundColor: "rgb(0 0 0 / 0)",
                        border: `1px solid white`,
                        "&:hover": {
                            color: "white",
                            backgroundColor: theme.palette.bg.dark,
                            border: `1px solid white`,
                        },
                        "&:active": {
                            color: "white",
                            backgroundColor: theme.palette.purple.main,
                            border: `1px solid ${theme.palette.purple.main}`,
                        }
                    }),
                },
                {
                    props: { variant: "pena-contained-light" },
                    style: ({ theme }) => theme.unstable_sx({
                        minWidth: "180px",
                        py: "9px",
                        px: "43px",
                        borderRadius: "8px",
                        boxShadow: "none",
                        fontSize: "18px",
                        lineHeight: "24px",
                        fontWeight: 400,
                        textTransform: "none",
                        color: theme.palette.bg.dark,
                        backgroundColor: "white",
                        border: `1px solid white`,
                        "&:hover": {
                            color: theme.palette.bg.dark,
                            backgroundColor: theme.palette.background.default,
                            border: `1px solid ${theme.palette.background.default}`,
                        },
                        "&:active": {
                            color: "white",
                            backgroundColor: "black",
                            border: `1px solid black`,
                        }
                    }),
                },
                {
                    props: { variant: "pena-outlined-light" },
                    style: ({ theme }) => theme.unstable_sx({
                        minWidth: "180px",
                        py: "9px",
                        px: "43px",
                        borderRadius: "8px",
                        boxShadow: "none",
                        fontSize: "18px",
                        lineHeight: "24px",
                        fontWeight: 400,
                        textTransform: "none",
                        color: "white",
                        backgroundColor: "rgb(0 0 0 / 0)",
                        border: `1px solid white`,
                        "&:hover": {
                            color: "white",
                            backgroundColor: "#581CA7",
                            border: `1px solid white`,
                        },
                        "&:active": {
                            color: "white",
                            backgroundColor: "black",
                            border: `1px solid black`,
                        }
                    }),
                },
                {
                    props: { variant: "pena-outlined-purple" },
                    style: ({ theme }) => theme.unstable_sx({
                        minWidth: "180px",
                        py: "9px",
                        px: "43px",
                        borderRadius: "8px",
                        boxShadow: "none",
                        fontSize: "18px",
                        lineHeight: "24px",
                        fontWeight: 400,
                        textTransform: "none",
                        color: theme.palette.purple.main,
                        backgroundColor: "rgb(0 0 0 / 0)",
                        border: `1px solid ${theme.palette.purple.main}`,
                        "&:hover": {
                            color: theme.palette.purple.main,
                            backgroundColor: theme.palette.background.default,
                            border: `1px solid ${theme.palette.purple.main}`,
                        },
                        "&:active": {
                            color: "white",
                            backgroundColor: theme.palette.purple.dark,
                            border: `1px solid ${theme.palette.purple.dark}`,
                        }
                    }),
                },
                {
                    props: { variant: "pena-navitem-dark" },
                    style: ({ theme }) => theme.unstable_sx({
                        p: 0,
                        boxShadow: "none",
                        fontSize: "16px",
                        lineHeight: "20px",
                        fontWeight: 500,
                        textTransform: "none",
                        whiteSpace: "nowrap",
                        color: "white",
                        backgroundColor: "rgb(0 0 0 / 0)",
                        "&:hover": {
                            color: theme.palette.purple.light,
                            backgroundColor: "rgb(0 0 0 / 0)",
                        },
                        "&:active": {
                            color: theme.palette.purple.light,
                            backgroundColor: "rgb(0 0 0 / 0)",
                        }
                    }),
                },
                {
                    props: { variant: "pena-navitem-light" },
                    style: ({ theme }) => theme.unstable_sx({
                        p: 0,
                        boxShadow: "none",
                        fontSize: "16px",
                        lineHeight: "20px",
                        fontWeight: 500,
                        textTransform: "none",
                        whiteSpace: "nowrap",
                        color: "black",
                        backgroundColor: "rgb(0 0 0 / 0)",
                        "&:hover": {
                            color: theme.palette.purple.main,
                            backgroundColor: "rgb(0 0 0 / 0)",
                        },
                        "&:active": {
                            color: theme.palette.purple.main,
                            backgroundColor: "rgb(0 0 0 / 0)",
                        }
                    }),
                },
                {
                    props: { variant: "pena-contained-white1" },
                    style: ({ theme }) => theme.unstable_sx({
                        minWidth: "180px",
                        py: "9px",
                        px: "43px",
                        borderRadius: "8px",
                        boxShadow: "none",
                        fontSize: "18px",
                        lineHeight: "24px",
                        fontWeight: 400,
                        textTransform: "none",
                        color: theme.palette.purple.main,
                        backgroundColor: theme.palette.background.default,
                        border: `1px solid ${theme.palette.gray.main}`,
                        "&:hover": {
                            color: "white",
                            backgroundColor: theme.palette.purple.main,
                            border: `1px solid ${theme.palette.purple.main}`,
                        },
                        "&:active": {
                            color: "white",
                            backgroundColor: "black",
                            border: `1px solid black`,
                        }
                    }),
                },
                {
                    props: { variant: "pena-contained-white2" },
                    style: ({ theme }) => theme.unstable_sx({
                        minWidth: "180px",
                        py: "9px",
                        px: "43px",
                        borderRadius: "8px",
                        boxShadow: "none",
                        fontSize: "18px",
                        lineHeight: "24px",
                        fontWeight: 400,
                        textTransform: "none",
                        color: "black",
                        backgroundColor: theme.palette.background.default,
                        border: `1px solid ${theme.palette.background.default}`,
                        "&:hover": {
                            color: "white",
                            backgroundColor: theme.palette.purple.light,
                            border: `1px solid white`,
                        },
                        "&:active": {
                            color: theme.palette.purple.main,
                            backgroundColor: "white",
                            border: `1px solid ${theme.palette.purple.light}`,
                        }
                    }),
                },
                {
                    props: {
                        variant: "pena-text",
                    },
                    style: ({ theme }) => ({
                        color: theme.palette.purple.main,
                        padding: 0,
                        textTransform: "none",
                        textDecoration: "underline",
                        textUnderlineOffset: "7px",
                        fontSize: "16px",
                        fontWeight: 500,
                        lineHeight: "20px",
                    }),
                },
            ],
            defaultProps: {
                disableTouchRipple: true,
            },
        },
        MuiIconButton: {
            defaultProps: {
                disableTouchRipple: true,
            },
        },
        MuiTypography: {
            defaultProps: {
                variantMapping: {
                    p1: "p",
                    t1: "p",
                    "pena-h1": "h1",
                    "pena-card-header1": "h5",
                }
            },
        },
        MuiAlert: {
            styleOverrides: {
                filledError: {
                    backgroundColor: "#FB5607",
                },
                root: {
                    borderRadius: "8px",
                }
            }
        },
        MuiPagination: {
            variants: [
                {
                    props: { variant: "pena-pagination" },
                    style: {
                        marginRight: "-15px",
                        marginLeft: "-15px",
                        "& .MuiPaginationItem-root": {
                            height: "30px",
                            width: "30px",
                            minWidth: "30px",
                            marginLeft: "5px",
                            marginRight: "5px",
                            backgroundColor: "white",
                            color: "black",
                            fontSize: "16px",
                            lineHeight: "20px",
                            fontWeight: 400,
                            borderRadius: "5px",
                            "&.Mui-selected": {
                                backgroundColor: "white",
                                color: "#7E2AEA",
                                fontWeight: 500,
                            },
                            "&:hover": {
                                backgroundColor: "#ffffff55",
                            },
                            "&:active": {
                                backgroundColor: "#7F2CEA",
                                color: "white",
                            },
                            boxShadow: `
                                      0px 77.2727px 238.773px rgba(210, 208, 225, 0.24), 
                                      0px 32.2827px 99.7535px rgba(210, 208, 225, 0.172525), 
                                      0px 17.2599px 53.333px rgba(210, 208, 225, 0.143066), 
                                      0px 9.67574px 29.8981px rgba(210, 208, 225, 0.12), 
                                      0px 5.13872px 15.8786px rgba(210, 208, 225, 0.0969343), 
                                      0px 2.13833px 6.60745px rgba(210, 208, 225, 0.0674749)
                                  `,
                        },
                        "& .MuiPaginationItem-previousNext": {
                            backgroundColor: "#7E2AEA",
                            color: "white",
                            marginLeft: "15px",
                            marginRight: "15px",
                            "&:hover": {
                                backgroundColor: "#995DED",
                            },
                        },
                    }
                }
            ],
        },
        MuiSwitch: {
            styleOverrides: {
                root: {
                    color: "#7E2AEA",
                    height: "50px",
                    width: "69px",
                    "& .MuiSwitch-switchBase.Mui-checked+.MuiSwitch-track": {
                        backgroundColor: "#7E2AEA",
                        opacity: 1,
                    },
                },
                track: {
                    height: "12px",
                    alignSelf: "center",
                    backgroundColor: "#00000000",
                    opacity: 1,
                    border: "1px solid #9A9AAF",
                },
                thumb: {
                    height: "32px",
                    width: "32px",
                    border: `6px solid #7E2AEA`,
                    backgroundColor: "white",
                    boxShadow: `0px 0px 0px 3px white,
                                0px 4px 4px 3px #C3C8DD
                    `,
                    "&:focus, &:hover, &.Mui-active, &.Mui-focusVisible": {
                        boxShadow: `0px 0px 0px 3px white,
                                    0px 4px 4px 3px #C3C8DD
                        `,
                    },
                },
            },
        },
    },
    typography: palette => ({
        h5: {
            fontSize: "24px",
            lineHeight: "28.44px",
            fontWeight: 500,
        },
        button: {
            fontSize: "18px",
            lineHeight: "24px",
            fontWeight: 400,
            textTransform: "none",
        },
        body1: {
            fontSize: "18px",
            lineHeight: "21.33px",
            fontWeight: 400,
        },
        body2: {
            fontSize: "16px",
            lineHeight: "20px",
            fontWeight: 500,
        },
        p1: {
            fontSize: "20px",
            lineHeight: "24px",
            fontWeight: 500,
        },
        price: {
            fontWeight: 500,
            fontSize: "20px",
            lineHeight: "24px",
            color: palette.gray.dark,
        },
        oldPrice: {
            fontWeight: 400,
            fontSize: "18px",
            lineHeight: "21px",
            textDecorationLine: "line-through",
            color: palette.orange.main,
        },
        t1: {
            display: "block",
            fontWeight: 400,
            fontSize: "18px",
            lineHeight: "21.33px",
        },
        fontFamily: [
            "Rubik",
            "-apple-system",
            "BlinkMacSystemFont",
            '"Segoe UI"',
            '"Helvetica Neue"',
            "Arial",
            "sans-serif",
            '"Apple Color Emoji"',
            '"Segoe UI Emoji"',
            '"Segoe UI Symbol"',
        ].join(","),
    }),
});

penaMuiTheme.typography["pena-h1"] = {
    fontSize: "70px",
    fontWeight: 500,
    lineHeight: "100%",
    [penaMuiTheme.breakpoints.down("md")]: {
        fontSize: "36px",
        lineHeight: "100%",
    },
};

penaMuiTheme.typography["pena-h3"] = {
    color: "#000000",
    fontWeight: 500,
    fontSize: "36px",
    lineHeight: "100%",
    [penaMuiTheme.breakpoints.down("md")]: {
        fontSize: "30px",
        lineHeight: "100%",
    },
};

penaMuiTheme.typography["pena-card-header1"] = {
    fontWeight: 500,
    fontSize: "24px",
    lineHeight: "100%",
    [penaMuiTheme.breakpoints.down("md")]: {
        fontSize: "21px",
        lineHeight: "100%",
    },
};

penaMuiTheme.typography.h2 = {
    fontSize: "70px",
    lineHeight: "70px",
    fontWeight: 500,
    [penaMuiTheme.breakpoints.down("md")]: {
        fontSize: "42px",
        lineHeight: "50px",
    }
};

penaMuiTheme.typography.h4 = {
    fontSize: "36px",
    lineHeight: "42.66px",
    fontWeight: 500,
    [penaMuiTheme.breakpoints.down("md")]: {
        fontSize: "24px",
        lineHeight: "28.44px",
    }
};

penaMuiTheme.typography.infographic = {
    fontSize: "80px",
    lineHeight: "94.8px",
    fontWeight: 400,
    [penaMuiTheme.breakpoints.down("md")]: {
        fontSize: "50px",
        lineHeight: "59px",
        fontWeight: 400,
    }
};

declare module '@mui/material/Button' {
    interface ButtonPropsVariantOverrides {
        "pena-contained-light": true;
        "pena-outlined-light": true;
        "pena-contained-dark": true;
        "pena-outlined-dark": true;
        "pena-outlined-purple": true;
        "pena-navitem-light": true;
        "pena-navitem-dark": true;
        "pena-contained-white1": true;
        "pena-contained-white2": true;
        "pena-text": true;
    }
}

declare module '@mui/material/Pagination' {
    interface PaginationPropsVariantOverrides {
        "pena-pagination": true;
    }
}

declare module "@mui/material/styles" {
    interface Palette {
        purple: Palette["primary"],
        bg: Palette["primary"],
        gray: Palette["primary"],
        orange: Palette["primary"],
    }
    interface PaletteOptions {
        purple?: PaletteOptions["primary"],
        bg?: PaletteOptions["primary"],
        gray?: PaletteOptions["primary"],
        orange?: PaletteOptions["primary"],
    }
    interface TypographyVariants {
        infographic: React.CSSProperties;
        p1: React.CSSProperties;
        price: React.CSSProperties;
        oldPrice: React.CSSProperties;
        t1: React.CSSProperties;
        "pena-card-header1": React.CSSProperties;
        "pena-h1": React.CSSProperties;
        "pena-h3": React.CSSProperties;
    }
    interface TypographyVariantsOptions {
        infographic?: React.CSSProperties;
        p1?: React.CSSProperties;
        price?: React.CSSProperties;
        oldPrice?: React.CSSProperties;
        t1?: React.CSSProperties;
        "pena-card-header1"?: React.CSSProperties;
        "pena-h1"?: React.CSSProperties;
        "pena-h3"?: React.CSSProperties;
    }
}

declare module "@mui/material/Typography" {
    interface TypographyPropsVariantOverrides {
        infographic: true;
        p1: true;
        price: true;
        oldPrice: true;
        t1: true;
        "pena-card-header1": true;
        "pena-h1": true;
        "pena-h3": true;
    }
}

declare module "@mui/material/Switch" {
    interface SwitchPropsVariantOverrides {
        "pena-switch": true;
    }
}