add button variant & fix variant style
This commit is contained in:
nflnkr
parent
23d41d5ff0
commit
a72b951202
@ -28,16 +28,16 @@ export const penaMuiTheme = createTheme({
|
||||
},
|
||||
purple: {
|
||||
main: "#7E2AEA",
|
||||
dark: "#581CA7",
|
||||
light: "#944FEE",
|
||||
dark: "#581CA7",
|
||||
light: "#944FEE",
|
||||
},
|
||||
bg: {
|
||||
main: "#333647",
|
||||
dark: "#252734",
|
||||
main: "#333647",
|
||||
dark: "#252734",
|
||||
},
|
||||
gray: {
|
||||
main: "#9A9AAF",
|
||||
dark: "#4D4D4D",
|
||||
main: "#9A9AAF",
|
||||
dark: "#4D4D4D",
|
||||
},
|
||||
orange: {
|
||||
main: "#FB5607",
|
||||
@ -50,8 +50,6 @@ export const penaMuiTheme = createTheme({
|
||||
{
|
||||
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",
|
||||
@ -62,21 +60,23 @@ export const penaMuiTheme = createTheme({
|
||||
fontWeight: 400,
|
||||
textTransform: "none",
|
||||
color: "white",
|
||||
backgroundColor: theme.palette.purple.main,
|
||||
border: `1px solid ${theme.palette.purple.main}`,
|
||||
"&:hover": {
|
||||
color: "white",
|
||||
backgroundColor: theme.palette.purple.light,
|
||||
border: `1px solid ${theme.palette.purple.light}`,
|
||||
},
|
||||
"&:active": {
|
||||
backgroundColor: "#FFFFFF",
|
||||
color: theme.palette.purple.main,
|
||||
backgroundColor: "white",
|
||||
border: `1px solid ${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",
|
||||
@ -87,20 +87,23 @@ export const penaMuiTheme = createTheme({
|
||||
fontWeight: 400,
|
||||
textTransform: "none",
|
||||
color: "white",
|
||||
backgroundColor: "rgb(0 0 0 / 0)",
|
||||
border: `1px solid white`,
|
||||
"&:hover": {
|
||||
color: "white",
|
||||
backgroundColor: theme.palette.bg.dark,
|
||||
border: `1px solid white`,
|
||||
},
|
||||
"&:active": {
|
||||
color: "white",
|
||||
backgroundColor: theme.palette.purple.main,
|
||||
borderColor: theme.palette.purple.main,
|
||||
border: `1px solid ${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",
|
||||
@ -111,13 +114,16 @@ export const penaMuiTheme = createTheme({
|
||||
fontWeight: 400,
|
||||
textTransform: "none",
|
||||
color: theme.palette.bg.dark,
|
||||
backgroundColor: "white",
|
||||
border: `1px solid white`,
|
||||
"&:hover": {
|
||||
color: theme.palette.bg.dark,
|
||||
backgroundColor: theme.palette.background.default,
|
||||
border: `1px solid ${theme.palette.background.default}`,
|
||||
},
|
||||
"&:active": {
|
||||
backgroundColor: "black",
|
||||
color: "white",
|
||||
backgroundColor: "black",
|
||||
border: `1px solid black`,
|
||||
}
|
||||
}),
|
||||
@ -125,8 +131,6 @@ export const penaMuiTheme = createTheme({
|
||||
{
|
||||
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",
|
||||
@ -137,20 +141,23 @@ export const penaMuiTheme = createTheme({
|
||||
fontWeight: 400,
|
||||
textTransform: "none",
|
||||
color: "white",
|
||||
backgroundColor: "rgb(0 0 0 / 0)",
|
||||
border: `1px solid white`,
|
||||
"&:hover": {
|
||||
color: "white",
|
||||
backgroundColor: "#581CA7",
|
||||
border: `1px solid white`,
|
||||
},
|
||||
"&:active": {
|
||||
color: "white",
|
||||
backgroundColor: "black",
|
||||
borderColor: "black",
|
||||
border: `1px solid 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",
|
||||
@ -161,20 +168,23 @@ export const penaMuiTheme = createTheme({
|
||||
fontWeight: 400,
|
||||
textTransform: "none",
|
||||
color: theme.palette.purple.main,
|
||||
backgroundColor: "rgb(0 0 0 / 0)",
|
||||
border: `1px solid ${theme.palette.purple.main}`,
|
||||
"&:hover": {
|
||||
color: theme.palette.purple.main,
|
||||
backgroundColor: theme.palette.background.default,
|
||||
border: `1px solid ${theme.palette.purple.main}`,
|
||||
},
|
||||
"&:active": {
|
||||
backgroundColor: "#581CA7",
|
||||
borderColor: "#581CA7",
|
||||
color: "white",
|
||||
backgroundColor: theme.palette.purple.dark,
|
||||
border: `1px solid ${theme.palette.purple.dark}`,
|
||||
}
|
||||
}),
|
||||
},
|
||||
{
|
||||
props: { variant: "pena-navitem-dark" },
|
||||
style: ({ theme }) => theme.unstable_sx({
|
||||
backgroundColor: "rgb(0 0 0 / 0)",
|
||||
p: 0,
|
||||
boxShadow: "none",
|
||||
fontSize: "16px",
|
||||
@ -182,19 +192,20 @@ export const penaMuiTheme = createTheme({
|
||||
fontWeight: 500,
|
||||
textTransform: "none",
|
||||
color: "white",
|
||||
backgroundColor: "rgb(0 0 0 / 0)",
|
||||
"&:hover": {
|
||||
color: theme.palette.purple.light,
|
||||
backgroundColor: "rgb(0 0 0 / 0)",
|
||||
},
|
||||
"&:active": {
|
||||
color: theme.palette.purple.light,
|
||||
backgroundColor: "rgb(0 0 0 / 0)",
|
||||
}
|
||||
}),
|
||||
},
|
||||
{
|
||||
props: { variant: "pena-navitem-light" },
|
||||
style: ({ theme }) => theme.unstable_sx({
|
||||
backgroundColor: "rgb(0 0 0 / 0)",
|
||||
p: 0,
|
||||
boxShadow: "none",
|
||||
fontSize: "16px",
|
||||
@ -202,12 +213,41 @@ export const penaMuiTheme = createTheme({
|
||||
fontWeight: 500,
|
||||
textTransform: "none",
|
||||
color: "black",
|
||||
backgroundColor: "rgb(0 0 0 / 0)",
|
||||
"&:hover": {
|
||||
color: theme.palette.purple.main,
|
||||
backgroundColor: "rgb(0 0 0 / 0)",
|
||||
},
|
||||
"&:active": {
|
||||
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-navitem-light": true;
|
||||
"pena-navitem-dark": true;
|
||||
"pena-contained-gray": true;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@frontend/kitui",
|
||||
"version": "1.0.37",
|
||||
"version": "1.0.38",
|
||||
"description": "test",
|
||||
"main": "./dist/index.js",
|
||||
"module": "./dist/index.js",
|
||||
|
||||
@ -49,6 +49,10 @@ export function App() {
|
||||
code={`<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
|
||||
code={`<Button variant="pena-navitem-dark">Подробнее</Button>`}
|
||||
element={<Button variant="pena-navitem-dark">Подробнее</Button>}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user