Skip to content

Commit

Permalink
[Button] Fix contained with inherit prop not adapting on dark mode (#…
Browse files Browse the repository at this point in the history 
…34508)

Co-authored-by: felipe.richter <felipe.richter@codeminer42.com>
Co-authored-by: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
  • Loading branch information
@jesrodri @ZeeshanTamboli
3 people committed Apr 17, 2023
1 parent 8e10e39 commit 1bedbbc
Show file tree
Hide file tree
Showing 5 changed files with 220 additions and 138 deletions.
5 changes: 5 additions & 0 deletions packages/mui-material-next/src/styles/extendTheme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,7 @@ export default function extendTheme(options: CssVarsThemeOptions = {}, ...args:
'Alert',
'AppBar',
'Avatar',
'Button',
'Chip',
'FilledInput',
'LinearProgress',
Expand Down Expand Up @@ -250,6 +251,8 @@ export default function extendTheme(options: CssVarsThemeOptions = {}, ...args:
setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-light'));
setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-100'));
setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-400'));
setColor(palette.Button, 'inheritContainedBg', getCssVar('palette-grey-300'));
setColor(palette.Button, 'inheritContainedHoverBg', getCssVar('palette-grey-A100'));
setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-400'));
setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-700'));
setColor(palette.Chip, 'defaultIconColor', getCssVar('palette-grey-700'));
Expand Down Expand Up @@ -322,6 +325,8 @@ export default function extendTheme(options: CssVarsThemeOptions = {}, ...args:
setColor(palette.AppBar, 'darkBg', getCssVar('palette-background-paper')); // specific for dark mode
setColor(palette.AppBar, 'darkColor', getCssVar('palette-text-primary')); // specific for dark mode
setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-600'));
setColor(palette.Button, 'inheritContainedBg', getCssVar('palette-grey-800'));
setColor(palette.Button, 'inheritContainedHoverBg', getCssVar('palette-grey-700'));
setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-700'));
setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-300'));
setColor(palette.Chip, 'defaultIconColor', getCssVar('palette-grey-300'));
Expand Down
288 changes: 150 additions & 138 deletions packages/mui-material/src/Button/Button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,159 +75,171 @@ const ButtonRoot = styled(ButtonBase, {
];
},
})(
({ theme, ownerState }) => ({
...theme.typography.button,
minWidth: 64,
padding: '6px 16px',
borderRadius: (theme.vars || theme).shape.borderRadius,
transition: theme.transitions.create(
['background-color', 'box-shadow', 'border-color', 'color'],
{
duration: theme.transitions.duration.short,
},
),
'&:hover': {
textDecoration: 'none',
backgroundColor: theme.vars
? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})`
: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: 'transparent',
},
...(ownerState.variant === 'text' &&
ownerState.color !== 'inherit' && {
({ theme, ownerState }) => {
const inheritContainedBackgroundColor =
theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800];

const inheritContainedHoverBackgroundColor =
theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700];

return {
...theme.typography.button,
minWidth: 64,
padding: '6px 16px',
borderRadius: (theme.vars || theme).shape.borderRadius,
transition: theme.transitions.create(
['background-color', 'box-shadow', 'border-color', 'color'],
{
duration: theme.transitions.duration.short,
},
),
'&:hover': {
textDecoration: 'none',
backgroundColor: theme.vars
? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})`
: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: 'transparent',
},
...(ownerState.variant === 'text' &&
ownerState.color !== 'inherit' && {
backgroundColor: theme.vars
? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${
theme.vars.palette.action.hoverOpacity
})`
: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: 'transparent',
},
}),
...(ownerState.variant === 'outlined' &&
ownerState.color !== 'inherit' && {
border: `1px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
backgroundColor: theme.vars
? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${
theme.vars.palette.action.hoverOpacity
})`
: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: 'transparent',
},
}),
...(ownerState.variant === 'contained' && {
backgroundColor: theme.vars
? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${
theme.vars.palette.action.hoverOpacity
})`
: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
? theme.vars.palette.Button.inheritContainedHoverBg
: inheritContainedHoverBackgroundColor,
boxShadow: (theme.vars || theme).shadows[4],
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: 'transparent',
boxShadow: (theme.vars || theme).shadows[2],
backgroundColor: (theme.vars || theme).palette.grey[300],
},
}),
...(ownerState.variant === 'outlined' &&
ownerState.color !== 'inherit' && {
border: `1px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
backgroundColor: theme.vars
? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${
theme.vars.palette.action.hoverOpacity
})`
: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: 'transparent',
},
...(ownerState.variant === 'contained' &&
ownerState.color !== 'inherit' && {
backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
},
}),
},
'&:active': {
...(ownerState.variant === 'contained' && {
boxShadow: (theme.vars || theme).shadows[8],
}),
...(ownerState.variant === 'contained' && {
backgroundColor: (theme.vars || theme).palette.grey.A100,
boxShadow: (theme.vars || theme).shadows[4],
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
boxShadow: (theme.vars || theme).shadows[2],
backgroundColor: (theme.vars || theme).palette.grey[300],
},
},
[`&.${buttonClasses.focusVisible}`]: {
...(ownerState.variant === 'contained' && {
boxShadow: (theme.vars || theme).shadows[6],
}),
},
[`&.${buttonClasses.disabled}`]: {
color: (theme.vars || theme).palette.action.disabled,
...(ownerState.variant === 'outlined' && {
border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`,
}),
...(ownerState.variant === 'contained' && {
color: (theme.vars || theme).palette.action.disabled,
boxShadow: (theme.vars || theme).shadows[0],
backgroundColor: (theme.vars || theme).palette.action.disabledBackground,
}),
},
...(ownerState.variant === 'text' && {
padding: '6px 8px',
}),
...(ownerState.variant === 'contained' &&
...(ownerState.variant === 'text' &&
ownerState.color !== 'inherit' && {
backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
},
color: (theme.vars || theme).palette[ownerState.color].main,
}),
},
'&:active': {
...(ownerState.variant === 'contained' && {
boxShadow: (theme.vars || theme).shadows[8],
}),
},
[`&.${buttonClasses.focusVisible}`]: {
...(ownerState.variant === 'contained' && {
boxShadow: (theme.vars || theme).shadows[6],
}),
},
[`&.${buttonClasses.disabled}`]: {
color: (theme.vars || theme).palette.action.disabled,
...(ownerState.variant === 'outlined' && {
border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`,
padding: '5px 15px',
border: '1px solid currentColor',
}),
...(ownerState.variant === 'outlined' &&
ownerState.color !== 'inherit' && {
color: (theme.vars || theme).palette[ownerState.color].main,
border: theme.vars
? `1px solid rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)`
: `1px solid ${alpha(theme.palette[ownerState.color].main, 0.5)}`,
}),
...(ownerState.variant === 'contained' && {
color: (theme.vars || theme).palette.action.disabled,
boxShadow: (theme.vars || theme).shadows[0],
backgroundColor: (theme.vars || theme).palette.action.disabledBackground,
}),
},
...(ownerState.variant === 'text' && {
padding: '6px 8px',
}),
...(ownerState.variant === 'text' &&
ownerState.color !== 'inherit' && {
color: (theme.vars || theme).palette[ownerState.color].main,
}),
...(ownerState.variant === 'outlined' && {
padding: '5px 15px',
border: '1px solid currentColor',
}),
...(ownerState.variant === 'outlined' &&
ownerState.color !== 'inherit' && {
color: (theme.vars || theme).palette[ownerState.color].main,
border: theme.vars
? `1px solid rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)`
: `1px solid ${alpha(theme.palette[ownerState.color].main, 0.5)}`,
color: theme.vars
? // this is safe because grey does not change between default light/dark mode
theme.vars.palette.text.primary
: theme.palette.getContrastText?.(theme.palette.grey[300]),
backgroundColor: theme.vars
? theme.vars.palette.Button.inheritContainedBg
: inheritContainedBackgroundColor,
boxShadow: (theme.vars || theme).shadows[2],
}),
...(ownerState.variant === 'contained' && {
color: theme.vars
? // this is safe because grey does not change between default light/dark mode
theme.vars.palette.text.primary
: theme.palette.getContrastText?.(theme.palette.grey[300]),
backgroundColor: (theme.vars || theme).palette.grey[300],
boxShadow: (theme.vars || theme).shadows[2],
}),
...(ownerState.variant === 'contained' &&
ownerState.color !== 'inherit' && {
color: (theme.vars || theme).palette[ownerState.color].contrastText,
backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
}),
...(ownerState.color === 'inherit' && {
color: 'inherit',
borderColor: 'currentColor',
}),
...(ownerState.size === 'small' &&
ownerState.variant === 'text' && {
padding: '4px 5px',
fontSize: theme.typography.pxToRem(13),
}),
...(ownerState.size === 'large' &&
ownerState.variant === 'text' && {
padding: '8px 11px',
fontSize: theme.typography.pxToRem(15),
}),
...(ownerState.size === 'small' &&
ownerState.variant === 'outlined' && {
padding: '3px 9px',
fontSize: theme.typography.pxToRem(13),
}),
...(ownerState.size === 'large' &&
ownerState.variant === 'outlined' && {
padding: '7px 21px',
fontSize: theme.typography.pxToRem(15),
}),
...(ownerState.size === 'small' &&
ownerState.variant === 'contained' && {
padding: '4px 10px',
fontSize: theme.typography.pxToRem(13),
...(ownerState.variant === 'contained' &&
ownerState.color !== 'inherit' && {
color: (theme.vars || theme).palette[ownerState.color].contrastText,
backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
}),
...(ownerState.color === 'inherit' && {
color: 'inherit',
borderColor: 'currentColor',
}),
...(ownerState.size === 'large' &&
ownerState.variant === 'contained' && {
padding: '8px 22px',
fontSize: theme.typography.pxToRem(15),
...(ownerState.size === 'small' &&
ownerState.variant === 'text' && {
padding: '4px 5px',
fontSize: theme.typography.pxToRem(13),
}),
...(ownerState.size === 'large' &&
ownerState.variant === 'text' && {
padding: '8px 11px',
fontSize: theme.typography.pxToRem(15),
}),
...(ownerState.size === 'small' &&
ownerState.variant === 'outlined' && {
padding: '3px 9px',
fontSize: theme.typography.pxToRem(13),
}),
...(ownerState.size === 'large' &&
ownerState.variant === 'outlined' && {
padding: '7px 21px',
fontSize: theme.typography.pxToRem(15),
}),
...(ownerState.size === 'small' &&
ownerState.variant === 'contained' && {
padding: '4px 10px',
fontSize: theme.typography.pxToRem(13),
}),
...(ownerState.size === 'large' &&
ownerState.variant === 'contained' && {
padding: '8px 22px',
fontSize: theme.typography.pxToRem(15),
}),
...(ownerState.fullWidth && {
width: '100%',
}),
...(ownerState.fullWidth && {
width: '100%',
}),
}),
};
},
({ ownerState }) =>
ownerState.disableElevation && {
boxShadow: 'none',
Expand Down
7 changes: 7 additions & 0 deletions packages/mui-material/src/styles/experimental_extendTheme.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,11 @@ export interface PaletteAvatar {
defaultBg: string;
}

export interface PaletteButton {
inheritContainedBg: string;
inheritContainedHoverBg: string;
}

export interface PaletteChip {
defaultBorder: string;
defaultAvatarColor: string;
Expand Down Expand Up @@ -214,6 +219,7 @@ export interface ColorSystemOptions {
Alert?: Partial<PaletteAlert>;
AppBar?: Partial<PaletteAppBar>;
Avatar?: Partial<PaletteAvatar>;
Button?: Partial<PaletteButton>;
Chip?: Partial<PaletteChip>;
FilledInput?: Partial<PaletteFilledInput>;
LinearProgress?: Partial<PaletteLinearProgress>;
Expand Down Expand Up @@ -247,6 +253,7 @@ export interface CssVarsPalette {
Alert: PaletteAlert;
AppBar: PaletteAppBar;
Avatar: PaletteAvatar;
Button: PaletteButton;
Chip: PaletteChip;
FilledInput: PaletteFilledInput;
LinearProgress: PaletteLinearProgress;
Expand Down
5 changes: 5 additions & 0 deletions packages/mui-material/src/styles/experimental_extendTheme.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,7 @@ export default function extendTheme(options = {}, ...args) {
'Alert',
'AppBar',
'Avatar',
'Button',
'Chip',
'FilledInput',
'LinearProgress',
Expand Down Expand Up @@ -186,6 +187,8 @@ export default function extendTheme(options = {}, ...args) {
setColor(palette.Alert, 'warningIconColor', setCssVarColor('palette-warning-main'));
setColor(palette.AppBar, 'defaultBg', setCssVarColor('palette-grey-100'));
setColor(palette.Avatar, 'defaultBg', setCssVarColor('palette-grey-400'));
setColor(palette.Button, 'inheritContainedBg', setCssVarColor('palette-grey-300'));
setColor(palette.Button, 'inheritContainedHoverBg', setCssVarColor('palette-grey-A100'));
setColor(palette.Chip, 'defaultBorder', setCssVarColor('palette-grey-400'));
setColor(palette.Chip, 'defaultAvatarColor', setCssVarColor('palette-grey-700'));
setColor(palette.Chip, 'defaultIconColor', setCssVarColor('palette-grey-700'));
Expand Down Expand Up @@ -274,6 +277,8 @@ export default function extendTheme(options = {}, ...args) {
setColor(palette.AppBar, 'darkBg', setCssVarColor('palette-background-paper')); // specific for dark mode
setColor(palette.AppBar, 'darkColor', setCssVarColor('palette-text-primary')); // specific for dark mode
setColor(palette.Avatar, 'defaultBg', setCssVarColor('palette-grey-600'));
setColor(palette.Button, 'inheritContainedBg', setCssVarColor('palette-grey-800'));
setColor(palette.Button, 'inheritContainedHoverBg', setCssVarColor('palette-grey-700'));
setColor(palette.Chip, 'defaultBorder', setCssVarColor('palette-grey-700'));
setColor(palette.Chip, 'defaultAvatarColor', setCssVarColor('palette-grey-300'));
setColor(palette.Chip, 'defaultIconColor', setCssVarColor('palette-grey-300'));
Expand Down

0 comments on commit 1bedbbc

Please sign in to comment.