352 lines
11 KiB
TypeScript
352 lines
11 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",
|
|
light: "#FC712F",
|
|
},
|
|
navbarbg: {
|
|
main: "#FFFFFF",
|
|
},
|
|
},
|
|
components: {
|
|
MuiButton: {
|
|
variants: [
|
|
{
|
|
props: { variant: "pena-contained-dark" },
|
|
style: ({ theme }) => theme.unstable_sx({
|
|
border: `1px solid ${theme.palette.brightPurple.main}`,
|
|
backgroundColor: theme.palette.brightPurple.main,
|
|
minWidth: "180px",
|
|
py: "9px",
|
|
px: "43px",
|
|
borderRadius: "8px",
|
|
boxShadow: "none",
|
|
fontSize: "18px",
|
|
lineHeight: "24px",
|
|
fontWeight: 400,
|
|
textTransform: "none",
|
|
color: "white",
|
|
"&:hover": {
|
|
backgroundColor: "#944FEE",
|
|
border: `1px solid #944FEE`,
|
|
},
|
|
"&:active": {
|
|
backgroundColor: "#FFFFFF",
|
|
color: theme.palette.brightPurple.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.darkPurple.main,
|
|
},
|
|
"&:active": {
|
|
backgroundColor: theme.palette.brightPurple.main,
|
|
borderColor: theme.palette.brightPurple.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.darkPurple.main,
|
|
"&:hover": {
|
|
backgroundColor: 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.brightPurple.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.brightPurple.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: "#944FEE",
|
|
},
|
|
"&:active": {
|
|
color: "#944FEE",
|
|
}
|
|
}),
|
|
},
|
|
{
|
|
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.brightPurple.main,
|
|
},
|
|
"&:active": {
|
|
color: theme.palette.brightPurple.main,
|
|
}
|
|
}),
|
|
},
|
|
],
|
|
defaultProps: {
|
|
disableTouchRipple: true,
|
|
},
|
|
},
|
|
MuiIconButton: {
|
|
defaultProps: {
|
|
disableTouchRipple: true,
|
|
},
|
|
},
|
|
MuiTypography: {
|
|
defaultProps: {
|
|
variantMapping: {
|
|
p1: "p",
|
|
}
|
|
},
|
|
},
|
|
},
|
|
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.grey3.main,
|
|
},
|
|
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(","),
|
|
}),
|
|
});
|
|
|
|
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 {
|
|
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;
|
|
}
|
|
}
|