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;