375 lines
12 KiB
TypeScript
375 lines
12 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",
|
|
},
|
|
purple: {
|
|
main: "#7E2AEA",
|
|
dark: "#581CA7",
|
|
light: "#944FEE",
|
|
},
|
|
bg: {
|
|
main: "#333647",
|
|
dark: "#252734",
|
|
},
|
|
gray: {
|
|
main: "#9A9AAF",
|
|
dark: "#4D4D4D",
|
|
},
|
|
orange: {
|
|
main: "#FB5607",
|
|
light: "#FC712F",
|
|
},
|
|
},
|
|
components: {
|
|
MuiButton: {
|
|
variants: [
|
|
{
|
|
props: { variant: "pena-contained-dark" },
|
|
style: ({ theme }) => theme.unstable_sx({
|
|
border: `1px solid ${theme.palette.purple.main}`,
|
|
backgroundColor: theme.palette.purple.main,
|
|
minWidth: "180px",
|
|
py: "9px",
|
|
px: "43px",
|
|
borderRadius: "8px",
|
|
boxShadow: "none",
|
|
fontSize: "18px",
|
|
lineHeight: "24px",
|
|
fontWeight: 400,
|
|
textTransform: "none",
|
|
color: "white",
|
|
"&:hover": {
|
|
backgroundColor: theme.palette.purple.light,
|
|
border: `1px solid ${theme.palette.purple.light}`,
|
|
},
|
|
"&:active": {
|
|
backgroundColor: "#FFFFFF",
|
|
color: theme.palette.purple.main,
|
|
}
|
|
}),
|
|
},
|
|
{
|
|
props: { variant: "pena-outlined-dark" },
|
|
style: ({ theme }) => theme.unstable_sx({
|
|
border: `1px solid white`,
|
|
backgroundColor: "rgb(0 0 0 / 0)",
|
|
minWidth: "180px",
|
|
py: "9px",
|
|
px: "43px",
|
|
borderRadius: "8px",
|
|
boxShadow: "none",
|
|
fontSize: "18px",
|
|
lineHeight: "24px",
|
|
fontWeight: 400,
|
|
textTransform: "none",
|
|
color: "white",
|
|
"&:hover": {
|
|
backgroundColor: theme.palette.bg.dark,
|
|
},
|
|
"&:active": {
|
|
backgroundColor: theme.palette.purple.main,
|
|
borderColor: theme.palette.purple.main,
|
|
}
|
|
}),
|
|
},
|
|
{
|
|
props: { variant: "pena-contained-light" },
|
|
style: ({ theme }) => theme.unstable_sx({
|
|
border: `1px solid white`,
|
|
backgroundColor: "white",
|
|
minWidth: "180px",
|
|
py: "9px",
|
|
px: "43px",
|
|
borderRadius: "8px",
|
|
boxShadow: "none",
|
|
fontSize: "18px",
|
|
lineHeight: "24px",
|
|
fontWeight: 400,
|
|
textTransform: "none",
|
|
color: theme.palette.bg.dark,
|
|
"&:hover": {
|
|
backgroundColor: theme.palette.background.default,
|
|
border: `1px solid ${theme.palette.background.default}`,
|
|
},
|
|
"&:active": {
|
|
backgroundColor: "black",
|
|
color: "white",
|
|
border: `1px solid black`,
|
|
}
|
|
}),
|
|
},
|
|
{
|
|
props: { variant: "pena-outlined-light" },
|
|
style: ({ theme }) => theme.unstable_sx({
|
|
border: `1px solid white`,
|
|
backgroundColor: "rgb(0 0 0 / 0)",
|
|
minWidth: "180px",
|
|
py: "9px",
|
|
px: "43px",
|
|
borderRadius: "8px",
|
|
boxShadow: "none",
|
|
fontSize: "18px",
|
|
lineHeight: "24px",
|
|
fontWeight: 400,
|
|
textTransform: "none",
|
|
color: "white",
|
|
"&:hover": {
|
|
backgroundColor: "#581CA7",
|
|
},
|
|
"&:active": {
|
|
backgroundColor: "black",
|
|
borderColor: "black",
|
|
}
|
|
}),
|
|
},
|
|
{
|
|
props: { variant: "pena-outlined-purple" },
|
|
style: ({ theme }) => theme.unstable_sx({
|
|
border: `1px solid ${theme.palette.purple.main}`,
|
|
backgroundColor: "rgb(0 0 0 / 0)",
|
|
minWidth: "180px",
|
|
py: "9px",
|
|
px: "43px",
|
|
borderRadius: "8px",
|
|
boxShadow: "none",
|
|
fontSize: "18px",
|
|
lineHeight: "24px",
|
|
fontWeight: 400,
|
|
textTransform: "none",
|
|
color: theme.palette.purple.main,
|
|
"&:hover": {
|
|
backgroundColor: theme.palette.background.default,
|
|
},
|
|
"&:active": {
|
|
backgroundColor: "#581CA7",
|
|
borderColor: "#581CA7",
|
|
color: "white",
|
|
}
|
|
}),
|
|
},
|
|
{
|
|
props: { variant: "pena-navitem-dark" },
|
|
style: ({ theme }) => theme.unstable_sx({
|
|
backgroundColor: "rgb(0 0 0 / 0)",
|
|
p: 0,
|
|
boxShadow: "none",
|
|
fontSize: "16px",
|
|
lineHeight: "20px",
|
|
fontWeight: 500,
|
|
textTransform: "none",
|
|
color: "white",
|
|
"&:hover": {
|
|
color: theme.palette.purple.light,
|
|
backgroundColor: "rgb(0 0 0 / 0)",
|
|
},
|
|
"&:active": {
|
|
color: theme.palette.purple.light,
|
|
}
|
|
}),
|
|
},
|
|
{
|
|
props: { variant: "pena-navitem-light" },
|
|
style: ({ theme }) => theme.unstable_sx({
|
|
backgroundColor: "rgb(0 0 0 / 0)",
|
|
p: 0,
|
|
boxShadow: "none",
|
|
fontSize: "16px",
|
|
lineHeight: "20px",
|
|
fontWeight: 500,
|
|
textTransform: "none",
|
|
color: "black",
|
|
"&:hover": {
|
|
color: theme.palette.purple.main,
|
|
backgroundColor: "rgb(0 0 0 / 0)",
|
|
},
|
|
"&:active": {
|
|
color: theme.palette.purple.main,
|
|
}
|
|
}),
|
|
},
|
|
],
|
|
defaultProps: {
|
|
disableTouchRipple: true,
|
|
},
|
|
},
|
|
MuiIconButton: {
|
|
defaultProps: {
|
|
disableTouchRipple: true,
|
|
},
|
|
},
|
|
MuiTypography: {
|
|
defaultProps: {
|
|
variantMapping: {
|
|
p1: "p",
|
|
}
|
|
},
|
|
},
|
|
MuiAlert: {
|
|
styleOverrides: {
|
|
filledError: {
|
|
backgroundColor: "#FB5607",
|
|
},
|
|
root: {
|
|
borderRadius: "8px",
|
|
}
|
|
}
|
|
},
|
|
},
|
|
typography: palette => ({
|
|
h5: {
|
|
fontSize: "24px",
|
|
lineHeight: "28.44px",
|
|
fontWeight: 500,
|
|
},
|
|
button: {
|
|
fontSize: "18px",
|
|
lineHeight: "24px",
|
|
fontWeight: 400,
|
|
textTransform: "none",
|
|
},
|
|
body1: {
|
|
fontSize: "18px",
|
|
lineHeight: "21.33px",
|
|
fontWeight: 400,
|
|
},
|
|
body2: {
|
|
fontSize: "16px",
|
|
lineHeight: "20px",
|
|
fontWeight: 500,
|
|
},
|
|
p1: {
|
|
fontSize: "20px",
|
|
lineHeight: "24px",
|
|
fontWeight: 500,
|
|
},
|
|
price: {
|
|
fontWeight: 500,
|
|
fontSize: "20px",
|
|
lineHeight: "24px",
|
|
color: palette.gray.dark,
|
|
},
|
|
oldPrice: {
|
|
fontWeight: 400,
|
|
fontSize: "18px",
|
|
lineHeight: "21px",
|
|
textDecorationLine: "line-through",
|
|
color: palette.orange.main,
|
|
},
|
|
fontFamily: [
|
|
"Rubik",
|
|
"-apple-system",
|
|
"BlinkMacSystemFont",
|
|
'"Segoe UI"',
|
|
'"Helvetica Neue"',
|
|
"Arial",
|
|
"sans-serif",
|
|
'"Apple Color Emoji"',
|
|
'"Segoe UI Emoji"',
|
|
'"Segoe UI Symbol"',
|
|
].join(","),
|
|
}),
|
|
});
|
|
|
|
penaMuiTheme.typography.h2 = {
|
|
fontSize: "70px",
|
|
lineHeight: "70px",
|
|
fontWeight: 500,
|
|
[penaMuiTheme.breakpoints.down("md")]: {
|
|
fontSize: "42px",
|
|
lineHeight: "50px",
|
|
}
|
|
};
|
|
|
|
penaMuiTheme.typography.h4 = {
|
|
fontSize: "36px",
|
|
lineHeight: "42.66px",
|
|
fontWeight: 500,
|
|
[penaMuiTheme.breakpoints.down("md")]: {
|
|
fontSize: "24px",
|
|
lineHeight: "28.44px",
|
|
}
|
|
};
|
|
|
|
penaMuiTheme.typography.infographic = {
|
|
fontSize: "80px",
|
|
lineHeight: "94.8px",
|
|
fontWeight: 400,
|
|
[penaMuiTheme.breakpoints.down("md")]: {
|
|
fontSize: "50px",
|
|
lineHeight: "59px",
|
|
fontWeight: 400,
|
|
}
|
|
};
|
|
|
|
declare module '@mui/material/Button' {
|
|
interface ButtonPropsVariantOverrides {
|
|
"pena-contained-light": true;
|
|
"pena-outlined-light": true;
|
|
"pena-contained-dark": true;
|
|
"pena-outlined-dark": true;
|
|
"pena-outlined-purple": true;
|
|
"pena-navitem-light": true;
|
|
"pena-navitem-dark": true;
|
|
}
|
|
}
|
|
|
|
declare module "@mui/material/styles" {
|
|
interface Palette {
|
|
purple: Palette["primary"],
|
|
bg: Palette["primary"],
|
|
gray: Palette["primary"],
|
|
orange: Palette["primary"],
|
|
}
|
|
interface PaletteOptions {
|
|
purple?: PaletteOptions["primary"],
|
|
bg?: PaletteOptions["primary"],
|
|
gray?: PaletteOptions["primary"],
|
|
orange?: 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;
|
|
}
|
|
}
|