add button variant

This commit is contained in:
nflnkr 2023-09-04 16:00:45 +03:00
parent cdf7bc4ed4
commit 664a0cfb31
3 changed files with 22 additions and 2 deletions

@ -278,6 +278,21 @@ export const penaMuiTheme = createTheme({
} }
}), }),
}, },
{
props: {
variant: "pena-text",
},
style: ({ theme }) => ({
color: theme.palette.purple.main,
padding: 0,
textTransform: "none",
textDecoration: "underline",
textUnderlineOffset: "7px",
fontSize: "16px",
fontWeight: 500,
lineHeight: "20px",
}),
},
], ],
defaultProps: { defaultProps: {
disableTouchRipple: true, disableTouchRipple: true,
@ -441,7 +456,7 @@ export const penaMuiTheme = createTheme({
fontWeight: 400, fontWeight: 400,
fontSize: "18px", fontSize: "18px",
lineHeight: "21.33px", lineHeight: "21.33px",
}, },
fontFamily: [ fontFamily: [
"Rubik", "Rubik",
"-apple-system", "-apple-system",
@ -530,6 +545,7 @@ declare module '@mui/material/Button' {
"pena-navitem-dark": true; "pena-navitem-dark": true;
"pena-contained-white1": true; "pena-contained-white1": true;
"pena-contained-white2": true; "pena-contained-white2": true;
"pena-text": true;
} }
} }

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

@ -65,6 +65,10 @@ export function App() {
code={`<Button variant="pena-navitem-light">Подробнее</Button>`} code={`<Button variant="pena-navitem-light">Подробнее</Button>`}
element={<Button variant="pena-navitem-light">Подробнее</Button>} element={<Button variant="pena-navitem-light">Подробнее</Button>}
/> />
<ComponentWithCode
code={`<Button variant="pena-text">Подробнее</Button>`}
element={<Button variant="pena-text">Подробнее</Button>}
/>
<ComponentWithCode <ComponentWithCode
code={`<PenaLink>Подробнее</PenaLink>`} code={`<PenaLink>Подробнее</PenaLink>`}
element={<PenaLink href="/">Подробнее</PenaLink>} element={<PenaLink href="/">Подробнее</PenaLink>}