add button variant

lib/components/theme.ts

@@ -225,7 +225,7 @@ export const penaMuiTheme = createTheme({
                     }),
                 },
                 {
-                    props: { variant: "pena-contained-gray" },
+                    props: { variant: "pena-contained-white1" },
                     style: ({ theme }) => theme.unstable_sx({
                         minWidth: "180px",
                         py: "9px",
@@ -251,6 +251,33 @@ export const penaMuiTheme = createTheme({
                         }
                     }),
                 },
+                {
+                    props: { variant: "pena-contained-white2" },
+                    style: ({ theme }) => theme.unstable_sx({
+                        minWidth: "180px",
+                        py: "9px",
+                        px: "43px",
+                        borderRadius: "8px",
+                        boxShadow: "none",
+                        fontSize: "18px",
+                        lineHeight: "24px",
+                        fontWeight: 400,
+                        textTransform: "none",
+                        color: "black",
+                        backgroundColor: theme.palette.background.default,
+                        border: `1px solid ${theme.palette.background.default}`,
+                        "&:hover": {
+                            color: "white",
+                            backgroundColor: theme.palette.purple.light,
+                            border: `1px solid white`,
+                        },
+                        "&:active": {
+                            color: theme.palette.purple.main,
+                            backgroundColor: "white",
+                            border: `1px solid ${theme.palette.purple.light}`,
+                        }
+                    }),
+                },
             ],
             defaultProps: {
                 disableTouchRipple: true,
@@ -427,7 +454,8 @@ declare module '@mui/material/Button' {
         "pena-outlined-purple": true;
         "pena-navitem-light": true;
         "pena-navitem-dark": true;
-        "pena-contained-gray": true;
+        "pena-contained-white1": true;
+        "pena-contained-white2": true;
     }
 }
 

package.json

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

src/App.tsx

@@ -50,8 +50,12 @@ export function App() {
                     element={<Button variant="pena-outlined-purple">Перейти</Button>}
                 />
                 <ComponentWithCode
-                    code={`<Button variant="pena-contained-gray">Купить</Button>`}
-                    element={<Button variant="pena-contained-gray">Купить</Button>}
+                    code={`<Button variant="pena-contained-white1">Купить</Button>`}
+                    element={<Button variant="pena-contained-white1">Купить</Button>}
+                />
+                <ComponentWithCode
+                    code={`<Button variant="pena-contained-white2">Купить</Button>`}
+                    element={<Button variant="pena-contained-white2">Выбрать</Button>}
                 />
                 <ComponentWithCode
                     code={`<Button variant="pena-navitem-dark">Подробнее</Button>`}