142 lines
3.7 KiB
TypeScript
142 lines
3.7 KiB
TypeScript
import { createTheme } from "@mui/material";
|
|
|
|
|
|
export const penaMuiTheme = createTheme({
|
|
breakpoints: {
|
|
values: {
|
|
xs: 300,
|
|
sm: 560,
|
|
md: 900,
|
|
lg: 1200,
|
|
xl: 1536,
|
|
},
|
|
},
|
|
palette: {
|
|
mode: "light",
|
|
primary: {
|
|
main: "#000000",
|
|
},
|
|
secondary: {
|
|
main: "#252734"
|
|
},
|
|
text: {
|
|
primary: "#000000",
|
|
secondary: "#7E2AEA",
|
|
},
|
|
background: {
|
|
default: "#F2F3F7",
|
|
},
|
|
lightPurple: {
|
|
main: "#333647",
|
|
},
|
|
darkPurple: {
|
|
main: "#252734",
|
|
},
|
|
brightPurple: {
|
|
main: "#7E2AEA",
|
|
},
|
|
fadePurple: {
|
|
main: "#C19AF5",
|
|
},
|
|
grey1: {
|
|
main: "#434657",
|
|
},
|
|
grey2: {
|
|
main: "#9A9AAF",
|
|
},
|
|
grey3: {
|
|
main: "#4D4D4D",
|
|
},
|
|
orange: {
|
|
main: "#FB5607",
|
|
},
|
|
navbarbg: {
|
|
main: "#FFFFFF",
|
|
},
|
|
},
|
|
components: {
|
|
MuiButton: {
|
|
variants: [
|
|
{
|
|
props: { variant: "pena-contained" },
|
|
style: ({ theme }) => theme.unstable_sx({
|
|
borderColor: theme.palette.brightPurple.main,
|
|
backgroundColor: theme.palette.brightPurple.main,
|
|
width: "180px",
|
|
paddingTop: "10px",
|
|
paddingBottom: "10px",
|
|
borderRadius: "8px",
|
|
boxShadow: "none",
|
|
// стили текста кнопки - нужны ли?
|
|
fontSize: "18px",
|
|
lineHeight: "24px",
|
|
fontWeight: 400,
|
|
textTransform: "none",
|
|
//
|
|
})
|
|
}
|
|
]
|
|
},
|
|
MuiTypography: {
|
|
defaultProps: {
|
|
variantMapping: {
|
|
p1: "p",
|
|
}
|
|
},
|
|
},
|
|
}
|
|
});
|
|
|
|
declare module '@mui/material/Button' {
|
|
interface ButtonPropsVariantOverrides {
|
|
"pena-contained": true;
|
|
}
|
|
}
|
|
|
|
|
|
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"],
|
|
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"],
|
|
orange?: PaletteOptions["primary"],
|
|
navbarbg?: PaletteOptions["primary"],
|
|
}
|
|
interface TypographyVariants {
|
|
infographic: React.CSSProperties;
|
|
p1: React.CSSProperties;
|
|
price: React.CSSProperties;
|
|
oldPrice: React.CSSProperties;
|
|
}
|
|
interface TypographyVariantsOptions {
|
|
infographic?: React.CSSProperties;
|
|
p1?: React.CSSProperties;
|
|
price?: React.CSSProperties;
|
|
oldPrice?: React.CSSProperties;
|
|
}
|
|
}
|
|
|
|
declare module "@mui/material/Typography" {
|
|
interface TypographyPropsVariantOverrides {
|
|
infographic: true;
|
|
p1: true;
|
|
price: true;
|
|
oldPrice: true;
|
|
}
|
|
}
|