diff --git a/lib/components/theme.ts b/lib/components/theme.ts index 03f1561..d2c904c 100644 --- a/lib/components/theme.ts +++ b/lib/components/theme.ts @@ -292,6 +292,9 @@ export const penaMuiTheme = createTheme({ defaultProps: { variantMapping: { p1: "p", + t1: "p", + "pena-h1": "h1", + "pena-card-header1": "h5", } }, }, @@ -358,6 +361,40 @@ export const penaMuiTheme = createTheme({ } ], }, + MuiSwitch: { + styleOverrides: { + root: { + color: "#7E2AEA", + height: "50px", + width: "69px", + "& .MuiSwitch-switchBase.Mui-checked+.MuiSwitch-track": { + backgroundColor: "#7E2AEA", + opacity: 1, + }, + }, + track: { + height: "12px", + alignSelf: "center", + backgroundColor: "#00000000", + opacity: 1, + border: "1px solid #9A9AAF", + }, + thumb: { + height: "32px", + width: "32px", + border: `6px solid #7E2AEA`, + backgroundColor: "white", + boxShadow: `0px 0px 0px 3px white, + 0px 4px 4px 3px #C3C8DD + `, + "&:focus, &:hover, &.Mui-active, &.Mui-focusVisible": { + boxShadow: `0px 0px 0px 3px white, + 0px 4px 4px 3px #C3C8DD + `, + }, + }, + }, + }, }, typography: palette => ({ h5: { @@ -399,6 +436,12 @@ export const penaMuiTheme = createTheme({ textDecorationLine: "line-through", color: palette.orange.main, }, + t1: { + display: "block", + fontWeight: 400, + fontSize: "18px", + lineHeight: "21.33px", + }, fontFamily: [ "Rubik", "-apple-system", @@ -414,6 +457,37 @@ export const penaMuiTheme = createTheme({ }), }); +penaMuiTheme.typography["pena-h1"] = { + fontSize: "70px", + fontWeight: 500, + lineHeight: "100%", + [penaMuiTheme.breakpoints.down("md")]: { + fontSize: "36px", + lineHeight: "100%", + }, +}; + +penaMuiTheme.typography["pena-h3"] = { + color: "#000000", + fontWeight: 500, + fontSize: "36px", + lineHeight: "100%", + [penaMuiTheme.breakpoints.down("md")]: { + fontSize: "30px", + lineHeight: "100%", + }, +}; + +penaMuiTheme.typography["pena-card-header1"] = { + fontWeight: 500, + fontSize: "24px", + lineHeight: "100%", + [penaMuiTheme.breakpoints.down("md")]: { + fontSize: "21px", + lineHeight: "100%", + }, +}; + penaMuiTheme.typography.h2 = { fontSize: "70px", lineHeight: "70px", @@ -483,12 +557,18 @@ declare module "@mui/material/styles" { p1: React.CSSProperties; price: React.CSSProperties; oldPrice: React.CSSProperties; + "pena-card-header1": React.CSSProperties; + "pena-h1": React.CSSProperties; + "pena-h3": React.CSSProperties; } interface TypographyVariantsOptions { infographic?: React.CSSProperties; p1?: React.CSSProperties; price?: React.CSSProperties; oldPrice?: React.CSSProperties; + "pena-card-header1"?: React.CSSProperties; + "pena-h1"?: React.CSSProperties; + "pena-h3"?: React.CSSProperties; } } @@ -498,5 +578,15 @@ declare module "@mui/material/Typography" { p1: true; price: true; oldPrice: true; + t1: true; + "pena-card-header1": true; + "pena-h1": true; + "pena-h3": true; + } +} + +declare module "@mui/material/Switch" { + interface SwitchPropsVariantOverrides { + "pena-switch": true; } } diff --git a/package.json b/package.json index 380bcf0..3358ab7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@frontend/kitui", - "version": "1.0.47", + "version": "1.0.48", "description": "test", "main": "./dist/index.js", "module": "./dist/index.js", @@ -14,8 +14,7 @@ ], "exports": { ".": { - "import": "./dist/index.js", - "require": "./dist/index.umd.cjs" + "import": "./dist/index.js" } }, "scripts": { diff --git a/src/App.tsx b/src/App.tsx index a4207fe..7c47fb6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -109,6 +109,10 @@ export function App() { page={1} />} /> + Some text`} + element={Lorem ipsum dolor sit amet} + /> Colors Click text to copy