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

add button variant & fix variant style

Browse Source
This commit is contained in:
nflnkr 2023-08-28 15:57:28 +03:00
parent 23d41d5ff0
commit a72b951202
3 changed files with 70 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
lib/components/theme.ts
View File

@ -28,16 +28,16 @@ export const penaMuiTheme = createTheme({
}, },
purple: { purple: {
main: "#7E2AEA", main: "#7E2AEA",
dark: "#581CA7", dark: "#581CA7",
light: "#944FEE", light: "#944FEE",
}, },
bg: { bg: {
main: "#333647", main: "#333647",
dark: "#252734", dark: "#252734",
}, },
gray: { gray: {
main: "#9A9AAF", main: "#9A9AAF",
dark: "#4D4D4D", dark: "#4D4D4D",
}, },
orange: { orange: {
main: "#FB5607", main: "#FB5607",
@ -50,8 +50,6 @@ export const penaMuiTheme = createTheme({
{ {
props: { variant: "pena-contained-dark" }, props: { variant: "pena-contained-dark" },
style: ({ theme }) => theme.unstable_sx({ style: ({ theme }) => theme.unstable_sx({
border: `1px solid ${theme.palette.purple.main}`,
backgroundColor: theme.palette.purple.main,
minWidth: "180px", minWidth: "180px",
py: "9px", py: "9px",
px: "43px", px: "43px",
@ -62,21 +60,23 @@ export const penaMuiTheme = createTheme({
fontWeight: 400, fontWeight: 400,
textTransform: "none", textTransform: "none",
color: "white", color: "white",
backgroundColor: theme.palette.purple.main,
border: `1px solid ${theme.palette.purple.main}`,
"&:hover": { "&:hover": {
color: "white",
backgroundColor: theme.palette.purple.light, backgroundColor: theme.palette.purple.light,
border: `1px solid ${theme.palette.purple.light}`, border: `1px solid ${theme.palette.purple.light}`,
}, },
"&:active": { "&:active": {
backgroundColor: "#FFFFFF",
color: theme.palette.purple.main, color: theme.palette.purple.main,
backgroundColor: "white",
border: `1px solid ${theme.palette.purple.main}`,
} }
}), }),
}, },
{ {
props: { variant: "pena-outlined-dark" }, props: { variant: "pena-outlined-dark" },
style: ({ theme }) => theme.unstable_sx({ style: ({ theme }) => theme.unstable_sx({
border: `1px solid white`,
backgroundColor: "rgb(0 0 0 / 0)",
minWidth: "180px", minWidth: "180px",
py: "9px", py: "9px",
px: "43px", px: "43px",
@ -87,20 +87,23 @@ export const penaMuiTheme = createTheme({
fontWeight: 400, fontWeight: 400,
textTransform: "none", textTransform: "none",
color: "white", color: "white",
backgroundColor: "rgb(0 0 0 / 0)",
border: `1px solid white`,
"&:hover": { "&:hover": {
color: "white",
backgroundColor: theme.palette.bg.dark, backgroundColor: theme.palette.bg.dark,
border: `1px solid white`,
}, },
"&:active": { "&:active": {
color: "white",
backgroundColor: theme.palette.purple.main, backgroundColor: theme.palette.purple.main,
borderColor: theme.palette.purple.main, border: `1px solid ${theme.palette.purple.main}`,
} }
}), }),
}, },
{ {
props: { variant: "pena-contained-light" }, props: { variant: "pena-contained-light" },
style: ({ theme }) => theme.unstable_sx({ style: ({ theme }) => theme.unstable_sx({
border: `1px solid white`,
backgroundColor: "white",
minWidth: "180px", minWidth: "180px",
py: "9px", py: "9px",
px: "43px", px: "43px",
@ -111,13 +114,16 @@ export const penaMuiTheme = createTheme({
fontWeight: 400, fontWeight: 400,
textTransform: "none", textTransform: "none",
color: theme.palette.bg.dark, color: theme.palette.bg.dark,
backgroundColor: "white",
border: `1px solid white`,
"&:hover": { "&:hover": {
color: theme.palette.bg.dark,
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
border: `1px solid ${theme.palette.background.default}`, border: `1px solid ${theme.palette.background.default}`,
}, },
"&:active": { "&:active": {
backgroundColor: "black",
color: "white", color: "white",
backgroundColor: "black",
border: `1px solid black`, border: `1px solid black`,
} }
}), }),
@ -125,8 +131,6 @@ export const penaMuiTheme = createTheme({
{ {
props: { variant: "pena-outlined-light" }, props: { variant: "pena-outlined-light" },
style: ({ theme }) => theme.unstable_sx({ style: ({ theme }) => theme.unstable_sx({
border: `1px solid white`,
backgroundColor: "rgb(0 0 0 / 0)",
minWidth: "180px", minWidth: "180px",
py: "9px", py: "9px",
px: "43px", px: "43px",
@ -137,20 +141,23 @@ export const penaMuiTheme = createTheme({
fontWeight: 400, fontWeight: 400,
textTransform: "none", textTransform: "none",
color: "white", color: "white",
backgroundColor: "rgb(0 0 0 / 0)",
border: `1px solid white`,
"&:hover": { "&:hover": {
color: "white",
backgroundColor: "#581CA7", backgroundColor: "#581CA7",
border: `1px solid white`,
}, },
"&:active": { "&:active": {
color: "white",
backgroundColor: "black", backgroundColor: "black",
borderColor: "black", border: `1px solid black`,
} }
}), }),
}, },
{ {
props: { variant: "pena-outlined-purple" }, props: { variant: "pena-outlined-purple" },
style: ({ theme }) => theme.unstable_sx({ style: ({ theme }) => theme.unstable_sx({
border: `1px solid ${theme.palette.purple.main}`,
backgroundColor: "rgb(0 0 0 / 0)",
minWidth: "180px", minWidth: "180px",
py: "9px", py: "9px",
px: "43px", px: "43px",
@ -161,20 +168,23 @@ export const penaMuiTheme = createTheme({
fontWeight: 400, fontWeight: 400,
textTransform: "none", textTransform: "none",
color: theme.palette.purple.main, color: theme.palette.purple.main,
backgroundColor: "rgb(0 0 0 / 0)",
border: `1px solid ${theme.palette.purple.main}`,
"&:hover": { "&:hover": {
color: theme.palette.purple.main,
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
border: `1px solid ${theme.palette.purple.main}`,
}, },
"&:active": { "&:active": {
backgroundColor: "#581CA7",
borderColor: "#581CA7",
color: "white", color: "white",
backgroundColor: theme.palette.purple.dark,
border: `1px solid ${theme.palette.purple.dark}`,
} }
}), }),
}, },
{ {
props: { variant: "pena-navitem-dark" }, props: { variant: "pena-navitem-dark" },
style: ({ theme }) => theme.unstable_sx({ style: ({ theme }) => theme.unstable_sx({
backgroundColor: "rgb(0 0 0 / 0)",
p: 0, p: 0,
boxShadow: "none", boxShadow: "none",
fontSize: "16px", fontSize: "16px",
@ -182,19 +192,20 @@ export const penaMuiTheme = createTheme({
fontWeight: 500, fontWeight: 500,
textTransform: "none", textTransform: "none",
color: "white", color: "white",
backgroundColor: "rgb(0 0 0 / 0)",
"&:hover": { "&:hover": {
color: theme.palette.purple.light, color: theme.palette.purple.light,
backgroundColor: "rgb(0 0 0 / 0)", backgroundColor: "rgb(0 0 0 / 0)",
}, },
"&:active": { "&:active": {
color: theme.palette.purple.light, color: theme.palette.purple.light,
backgroundColor: "rgb(0 0 0 / 0)",
} }
}), }),
}, },
{ {
props: { variant: "pena-navitem-light" }, props: { variant: "pena-navitem-light" },
style: ({ theme }) => theme.unstable_sx({ style: ({ theme }) => theme.unstable_sx({
backgroundColor: "rgb(0 0 0 / 0)",
p: 0, p: 0,
boxShadow: "none", boxShadow: "none",
fontSize: "16px", fontSize: "16px",
@ -202,12 +213,41 @@ export const penaMuiTheme = createTheme({
fontWeight: 500, fontWeight: 500,
textTransform: "none", textTransform: "none",
color: "black", color: "black",
backgroundColor: "rgb(0 0 0 / 0)",
"&:hover": { "&:hover": {
color: theme.palette.purple.main, color: theme.palette.purple.main,
backgroundColor: "rgb(0 0 0 / 0)", backgroundColor: "rgb(0 0 0 / 0)",
}, },
"&:active": { "&:active": {
color: theme.palette.purple.main, color: theme.palette.purple.main,
backgroundColor: "rgb(0 0 0 / 0)",
}
}),
},
{
props: { variant: "pena-contained-gray" },
style: ({ theme }) => theme.unstable_sx({
minWidth: "180px",
py: "9px",
px: "43px",
borderRadius: "8px",
boxShadow: "none",
fontSize: "18px",
lineHeight: "24px",
fontWeight: 400,
textTransform: "none",
color: theme.palette.purple.main,
backgroundColor: theme.palette.background.default,
border: `1px solid ${theme.palette.gray.main}`,
"&:hover": {
color: "white",
backgroundColor: theme.palette.purple.main,
border: `1px solid ${theme.palette.purple.main}`,
},
"&:active": {
color: "white",
backgroundColor: "black",
border: `1px solid black`,
} }
}), }),
}, },
@ -334,6 +374,7 @@ declare module '@mui/material/Button' {
"pena-outlined-purple": true; "pena-outlined-purple": true;
"pena-navitem-light": true; "pena-navitem-light": true;
"pena-navitem-dark": true; "pena-navitem-dark": true;
"pena-contained-gray": true;
} }
} }

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@frontend/kitui", "name": "@frontend/kitui",
"version": "1.0.37", "version": "1.0.38",
"description": "test", "description": "test",
"main": "./dist/index.js", "main": "./dist/index.js",
"module": "./dist/index.js", "module": "./dist/index.js",

4
src/App.tsx
View File

@ -49,6 +49,10 @@ export function App() {
code={`<Button variant="pena-outlined-purple">Перейти</Button>`} code={`<Button variant="pena-outlined-purple">Перейти</Button>`}
element={<Button variant="pena-outlined-purple">Перейти</Button>} element={<Button variant="pena-outlined-purple">Перейти</Button>}
/> />
<ComponentWithCode
code={`<Button variant="pena-contained-gray">Купить</Button>`}
element={<Button variant="pena-contained-gray">Купить</Button>}
/>
<ComponentWithCode <ComponentWithCode
code={`<Button variant="pena-navitem-dark">Подробнее</Button>`} code={`<Button variant="pena-navitem-dark">Подробнее</Button>`}
element={<Button variant="pena-navitem-dark">Подробнее</Button>} element={<Button variant="pena-navitem-dark">Подробнее</Button>}