import "@material-ui/styles";

declare module "@mui/material/styles" {
    interface Palette {
        lightPurple: Palette["primary"],
        darkPurple: Palette["primary"],
        brightPurple: Palette["primary"],
        fadePurple: Palette["primary"],
        grey1: Palette["primary"],
        grey2: Palette["primary"],
        grey3: Palette["primary"],
        grey4: Palette["primary"],
        orange: Palette["primary"],
        navbarbg: Palette["primary"],
    }
    interface PaletteOptions {
        lightPurple?: PaletteOptions["primary"],
        darkPurple?: PaletteOptions["primary"],
        brightPurple?: PaletteOptions["primary"],
        fadePurple?: PaletteOptions["primary"],
        grey1?: PaletteOptions["primary"],
        grey2?: PaletteOptions["primary"],
        grey3?: PaletteOptions["primary"],
        grey4?: PaletteOptions["primary"],
        orange?: PaletteOptions["primary"],
        navbarbg?: PaletteOptions["primary"],
    }
    interface TypographyVariants {
        infographic: React.CSSProperties;
        p1: React.CSSProperties;
    }
    interface TypographyVariantsOptions {
        infographic?: React.CSSProperties;
        p1?: React.CSSProperties;
    }
}

declare module "@mui/material/Typography" {
    interface TypographyPropsVariantOverrides {
        infographic: true;
        p1: true;
    }
}

type DataAttributeKey = `data-${string}`;
declare module 'react' {
    interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
        [dataAttribute: DataAttributeKey]: unknown;
    }
}
