front-hub/src/utils/muiTheme.ts

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


export const theme = createTheme({
    palette: {
        mode: "dark",
        primary: {
            main: "#ffffff",
        },
        secondary: {
            main: "#252734"
        },
        text: {
            primary: "#ffffff",
            secondary: "#7E2AEA",
        },
        custom: {
            divider: {
                main: "#E3E3E3",
            },
            lightPurple: {
                main: "#333647",
            },
            darkPurple: {
                main: "#252734",
            },
            brightPurple: {
                main: "#7E2AEA",
            },
            grey: {
                main: "#434657",
            }
        }
    },
    breakpoints: {
        values: {
            xs: 0,
            sm: 600,
            md: 900,
            lg: 1200,
            xl: 1536,
        },
    },
    typography: {
        h5: { // H2 в макете
            fontSize: "24px",
            lineHeight: "28.44px",
            fontWeight: 500,
        },
        button: {
            fontSize: "18px",
            lineHeight: "24px",
            fontWeight: 400,
            textTransform: "none",
        },
        body1: { // T1 в макете
            fontSize: "18px",
            lineHeight: "21.33px",
        },
        medium: { // M1 в макете
            fontSize: "16px",
            lineHeight: "20px",
            fontWeight: 500,
        },
        fontFamily: [
            "Rubik",
            "-apple-system",
            "BlinkMacSystemFont",
            '"Segoe UI"',
            '"Helvetica Neue"',
            "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,
    }
};