Skip to content

Commit

Permalink
Tweak button design
Browse files Browse the repository at this point in the history
  • Loading branch information
@zanivan
zanivan committed Sep 18, 2023
1 parent 46d8c66 commit 9369e14
Show file tree
Hide file tree
Showing 20 changed files with 412 additions and 232 deletions.
3 changes: 2 additions & 1 deletion docs/data/base/components/button/UnstyledButtonCustom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@ const blue = {
200: '#99CCF3',
400: '#3399FF',
500: '#007FFF',
600: '#0072E5',
600: '#0072E6',
700: '#0059B3',
800: '#004C99',
900: '#003A75',
};
Expand Down
3 changes: 2 additions & 1 deletion docs/data/base/components/button/UnstyledButtonCustom.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@ const blue = {
200: '#99CCF3',
400: '#3399FF',
500: '#007FFF',
600: '#0072E5',
600: '#0072E6',
700: '#0059B3',
800: '#004C99',
900: '#003A75',
};
Expand Down
15 changes: 14 additions & 1 deletion docs/data/base/components/button/UnstyledButtonIntroduction/css/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from 'react';
import { Button, buttonClasses } from '@mui/base/Button';
import { useTheme } from '@mui/system';
import Stack from '@mui/material/Stack';

export default function UnstyledButtonsIntroduction() {
Expand Down Expand Up @@ -29,7 +30,15 @@ const cyan = {
900: '#022127',
};

function useIsDarkMode() {
const theme = useTheme();
return theme.palette.mode === 'dark';
}

function Styles() {
// Replace this with your app logic for determining dark mode
const isDarkMode = useIsDarkMode();

return (
<style>{`
.CustomButton {
Expand All @@ -42,7 +51,11 @@ function Styles() {
border-radius: 8px;
color: white;
cursor: pointer;
border: none;
border: 1px solid ${cyan[600]};
box-shadow: 0px 2px 6px ${
isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.2)'
}, inset 0px 1px 1px ${cyan[400]}, inset 0px -1px 1px ${cyan[700]} ;
}
.CustomButton:hover {
background-color: ${cyan[600]};
Expand Down
15 changes: 14 additions & 1 deletion docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from 'react';
import { Button, buttonClasses } from '@mui/base/Button';
import { useTheme } from '@mui/system';
import Stack from '@mui/material/Stack';

export default function UnstyledButtonsIntroduction() {
Expand Down Expand Up @@ -29,7 +30,15 @@ const cyan = {
900: '#022127',
};

function useIsDarkMode() {
const theme = useTheme();
return theme.palette.mode === 'dark';
}

function Styles() {
// Replace this with your app logic for determining dark mode
const isDarkMode = useIsDarkMode();

return (
<style>{`
.CustomButton {
Expand All @@ -42,7 +51,11 @@ function Styles() {
border-radius: 8px;
color: white;
cursor: pointer;
border: none;
border: 1px solid ${cyan[600]};
box-shadow: 0px 2px 6px ${
isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.2)'
}, inset 0px 1px 1px ${cyan[400]}, inset 0px -1px 1px ${cyan[700]} ;
}
.CustomButton:hover {
background-color: ${cyan[600]};
Expand Down
28 changes: 15 additions & 13 deletions docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,10 @@ export default function UnstyledButtonsIntroduction() {
}

const blue = {
400: '#3399FF',
500: '#007FFF',
600: '#0072E5',
700: '#0059B2',
};

const grey = {
100: '#eaeef2',
300: '#afb8c1',
900: '#24292f',
600: '#0072E6',
700: '#0059B3',
};

const CustomButton = styled(Button)(
Expand All @@ -30,21 +25,24 @@ const CustomButton = styled(Button)(
font-weight: 600;
font-size: 0.875rem;
line-height: 1.5;
background-color: ${blue[500]};
background-color: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
padding: 8px 16px;
border-radius: 8px;
color: white;
transition: all 150ms ease;
cursor: pointer;
border: none;
box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
border: 1px solid ${blue[600]};
box-shadow: 0px 4px 8px ${
theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.35)' : 'rgba(0, 0, 0, 0.15)'
}, inset 0px 2px 1px ${blue[400]}, inset 0px -2px 1px ${blue[700]} ;
&:hover {
background-color: ${blue[600]};
background-color: ${theme.palette.mode === 'dark' ? blue[500] : blue[600]};
}
&.${buttonClasses.active} {
background-color: ${blue[700]};
box-shadow: none;
}
&.${buttonClasses.focusVisible} {
Expand All @@ -53,8 +51,12 @@ const CustomButton = styled(Button)(
}
&.${buttonClasses.disabled} {
opacity: 0.5;
opacity: 0.4;
cursor: not-allowed;
box-shadow: none;
&:hover {
background-color: ${blue[500]};
}
}
`,
);
28 changes: 15 additions & 13 deletions docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,10 @@ export default function UnstyledButtonsIntroduction() {
}

const blue = {
400: '#3399FF',
500: '#007FFF',
600: '#0072E5',
700: '#0059B2',
};

const grey = {
100: '#eaeef2',
300: '#afb8c1',
900: '#24292f',
600: '#0072E6',
700: '#0059B3',
};

const CustomButton = styled(Button)(
Expand All @@ -30,21 +25,24 @@ const CustomButton = styled(Button)(
font-weight: 600;
font-size: 0.875rem;
line-height: 1.5;
background-color: ${blue[500]};
background-color: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
padding: 8px 16px;
border-radius: 8px;
color: white;
transition: all 150ms ease;
cursor: pointer;
border: none;
box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
border: 1px solid ${blue[600]};
box-shadow: 0px 4px 8px ${
theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.35)' : 'rgba(0, 0, 0, 0.15)'
}, inset 0px 2px 1px ${blue[400]}, inset 0px -2px 1px ${blue[700]} ;
&:hover {
background-color: ${blue[600]};
background-color: ${theme.palette.mode === 'dark' ? blue[500] : blue[600]};
}
&.${buttonClasses.active} {
background-color: ${blue[700]};
box-shadow: none;
}
&.${buttonClasses.focusVisible} {
Expand All @@ -53,8 +51,12 @@ const CustomButton = styled(Button)(
}
&.${buttonClasses.disabled} {
opacity: 0.5;
opacity: 0.4;
cursor: not-allowed;
box-shadow: none;
&:hover {
background-color: ${blue[500]};
}
}
`,
);
39 changes: 25 additions & 14 deletions docs/data/base/components/button/UnstyledButtonsDisabledFocus.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,39 +15,50 @@ export default function UnstyledButtonsDisabledFocus() {
}

const blue = {
400: '#3399FF',
500: '#007FFF',
600: '#0072E5',
700: '#0059B2',
600: '#0072E6',
700: '#0059B3',
};

const CustomButton = styled(Button)`
font-family: 'IBM Plex Sans', sans-serif;
const CustomButton = styled(Button)(
({ theme }) => `
font-family: IBM Plex Sans, sans-serif;
font-weight: 600;
font-size: 0.875rem;
line-height: 1.5;
background-color: ${blue[500]};
color: white;
border-radius: 8px;
font-weight: 600;
background-color: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
padding: 8px 16px;
cursor: pointer;
border-radius: 8px;
color: white;
transition: all 150ms ease;
border: none;
cursor: pointer;
border: 1px solid ${blue[600]};
box-shadow: 0px 4px 8px ${
theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.35)' : 'rgba(0, 0, 0, 0.15)'
}, inset 0px 2px 1px ${blue[400]}, inset 0px -2px 1px ${blue[700]} ;
&:hover {
background-color: ${blue[600]};
background-color: ${theme.palette.mode === 'dark' ? blue[500] : blue[600]};
}
&.${buttonClasses.active} {
background-color: ${blue[700]};
box-shadow: none;
}
&.${buttonClasses.focusVisible} {
box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
outline: none;
}
&.${buttonClasses.disabled} {
opacity: 0.5;
opacity: 0.4;
cursor: not-allowed;
box-shadow: none;
&:hover {
background-color: ${blue[500]};
}
}
`;
`,
);
39 changes: 25 additions & 14 deletions docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,39 +15,50 @@ export default function UnstyledButtonsDisabledFocus() {
}

const blue = {
400: '#3399FF',
500: '#007FFF',
600: '#0072E5',
700: '#0059B2',
600: '#0072E6',
700: '#0059B3',
};

const CustomButton = styled(Button)`
font-family: 'IBM Plex Sans', sans-serif;
const CustomButton = styled(Button)(
({ theme }) => `
font-family: IBM Plex Sans, sans-serif;
font-weight: 600;
font-size: 0.875rem;
line-height: 1.5;
background-color: ${blue[500]};
color: white;
border-radius: 8px;
font-weight: 600;
background-color: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
padding: 8px 16px;
cursor: pointer;
border-radius: 8px;
color: white;
transition: all 150ms ease;
border: none;
cursor: pointer;
border: 1px solid ${blue[600]};
box-shadow: 0px 4px 8px ${
theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.35)' : 'rgba(0, 0, 0, 0.15)'
}, inset 0px 2px 1px ${blue[400]}, inset 0px -2px 1px ${blue[700]} ;
&:hover {
background-color: ${blue[600]};
background-color: ${theme.palette.mode === 'dark' ? blue[500] : blue[600]};
}
&.${buttonClasses.active} {
background-color: ${blue[700]};
box-shadow: none;
}
&.${buttonClasses.focusVisible} {
box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
outline: none;
}
&.${buttonClasses.disabled} {
opacity: 0.5;
opacity: 0.4;
cursor: not-allowed;
box-shadow: none;
&:hover {
background-color: ${blue[500]};
}
}
`;
`,
);
Loading

0 comments on commit 9369e14

Please sign in to comment.