PenaSide/UIKit
3
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

mix theme with reducer theme

Browse Source
This commit is contained in:
nflnkr 2023-09-01 15:27:35 +03:00
parent 3d80cf1ea9
commit 7af34954c9
3 changed files with 96 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
lib/components/theme.ts
View File

@ -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;
}
}

5
package.json
View File

@ -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": {

4
src/App.tsx
View File

@ -109,6 +109,10 @@ export function App() {
page={1}
/>}
/>
<ComponentWithCode
code={`<Typography variant="pena-h1">Some text</Typography>`}
element={<Typography variant="pena-h1">Lorem ipsum dolor sit amet</Typography>}
/>
<Typography variant="h4">Colors</Typography>
<Typography variant="body2">Click text to copy</Typography>
<Box sx={{