From 3d80cf1ea9797dbe931ce06158bcff6c53a02443 Mon Sep 17 00:00:00 2001
From: nflnkr <105123049+nflnkr@users.noreply.github.com>
Date: Fri, 1 Sep 2023 13:18:57 +0300
Subject: [PATCH] add button variant

---
 lib/components/theme.ts | 32 ++++++++++++++++++++++++++++++--
 package.json            |  2 +-
 src/App.tsx             |  8 ++++++--
 3 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/lib/components/theme.ts b/lib/components/theme.ts
index 4d0ac7a..03f1561 100644
--- a/lib/components/theme.ts
+++ b/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;
     }
 }
 
diff --git a/package.json b/package.json
index 5fabbd3..380bcf0 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.tsx b/src/App.tsx
index 94a5a39..a4207fe 100644
--- a/src/App.tsx
+++ b/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>`}