frontAnswerer/lib/utils/themes/generic.ts

import { createTheme } from "@mui/material";
import { fontFaces } from "./fontFace";

declare module "@mui/material/Button" {
  interface ButtonPropsVariantOverrides {
    main: true;
    outmain: true;
  }
}

const theme = createTheme({
  breakpoints: {
    values: {
      xs: 0,
      sm: 560,
      md: 900,
      lg: 1200,
      xl: 1536,
    },
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: fontFaces,
    },
    MuiScopedCssBaseline: {
      styleOverrides: {
        root: fontFaces,
      },
    },
    MuiTypography: {
      defaultProps: {
        variantMapping: {
          p1: "p",
        },
      },
    },
    MuiButton: {
      variants: [
        {
          props: {
            variant: "contained",
          },
          style: {
            backgroundColor: "#7E2AEA",
            padding: "13px 20px",
            borderRadius: "8px",
            color: "#ffffff",
            boxShadow: "none",
            "&:hover": {
              backgroundColor: "#581CA7",
            },
          },
        },
        {
          props: {
            variant: "outlined",
          },
          style: {
            backgroundColor: "#F2F3F7",
            padding: "10px 20px",
            borderRadius: "8px",
            border: "1px solid #7E2AEA",
            color: "#9A9AAF",
            "&:hover": {
              backgroundColor: "#581CA7",
              border: "1px solid #581CA7",
            },
          },
        },
      ],
    },
  },
  typography: {
    h5: {
      // H2 в макете
      fontSize: "24px",
      lineHeight: "28.44px",
      fontWeight: 501,
    },
    button: {
      fontSize: "18px",
      lineHeight: "24px",
      fontWeight: 400,
      textTransform: "none",
    },
    body1: {
      // T1 в макете
      fontSize: "18px",
      lineHeight: "21.33px",
      fontWeight: 400,
    },
    body2: {
      // M1 в макете
      fontSize: "16px",
      lineHeight: "20px",
      fontWeight: 500,
    },
    p1: {
      // P1 в макете
      fontSize: "20px",
      lineHeight: "24px",
      fontWeight: 500,
    },
    fontFamily: [
      '"Lato"',
      "Twemoji Country Flags",
      "-apple-system",
      "BlinkMacSystemFont",
      "Arial",
      "sans-serif",
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Segoe UI Symbol"',
    ].join(","),
  },
});

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

theme.typography.h4 = {
  // H1 в макете
  fontSize: "36px",
  lineHeight: "42.66px",
  fontWeight: 500,
  [theme.breakpoints.down("md")]: {
    fontSize: "24px",
    lineHeight: "28.44px",
  },
};

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

export default theme;