[Button] Remove default color, use primary by default #17530
Description
It'd be useful to be able to override the 'default' palette value and it actually take effect.
e.g.
const theme = createMuiTheme({
palette: {
...
default: {
dark: '#000000',
light: '#111111',
main: '#100008',
contrastText: '#ffffff',
},
...
},
typography: {
useNextVariants: true
},
});At the moment some components (like Button) use specific colours (like theme.palette.grey[300]) instead of theme.palette.default. Switching this round would allow us to make use of the default them in the palette.
e.g.
diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js
index 4e1304ff1..cbfef3994 100644
--- a/packages/material-ui/src/Button/Button.js
+++ b/packages/material-ui/src/Button/Button.js
@@ -107,8 +107,8 @@ export const styles = theme => ({
},
/* Styles applied to the root element if `variant="contained"`. */
contained: {
- color: theme.palette.getContrastText(theme.palette.grey[300]),
- backgroundColor: theme.palette.grey[300],
+ color: theme.palette.default.contrastText,
+ backgroundColor: theme.palette.default.main,
boxShadow: theme.shadows[2],
'&$focusVisible': {
boxShadow: theme.shadows[6],
@@ -122,10 +122,10 @@ export const styles = theme => ({
backgroundColor: theme.palette.action.disabledBackground,
},
'&:hover': {
- backgroundColor: theme.palette.grey.A100,
+ backgroundColor: theme.palette.default.dark,
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
- backgroundColor: theme.palette.grey[300],
+ backgroundColor: theme.palette.default.main,
},
'&$disabled': {
backgroundColor: theme.palette.action.disabledBackground,