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"];
    ownPlaceholder: 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"];
    ownPlaceholder?: 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;
  }
}