[RFC] color prop API (original) (raw)
Currently our type declarations contain the following definition for color props:
type Color = 'inherit' | 'primary' | 'secondary' | 'default';
indicating that there is a library wide understanding what these color represent and that every component that has a color prop should implement each variant.
However only primary and secondary are implemented for every component with a color prop. inherit and default are not implemented in every component. default doesn't even have a consistent style.
Implementation overview
| Component | primary | secondary | inherit | default |
|---|---|---|---|---|
| AppBar | x | x | x | x |
| Badge | x | x | x | |
| Button | x | x | x | x |
| Chip | x | x | x | |
| Icon | x | x | x | |
| IconButton | x | x | x | x |
| SvgIcon | x | x | x | |
| Typography | x | x | x | x |
default variant
Implementation
| Component | color | background-color |
|---|---|---|
| AppBar | theme.palette.getContrastText(backgroundColorDefault) | theme.palette.type === 'light' ? theme.palette.grey[100 ] : theme.palette.grey[900 ] |
| Badge | theme.palette.textColor (which is undefined) | theme.palette.color (also undefined) |
| Button | theme.typography.button | global stylesheet |
| Chip | theme.palette.getContrastText(backgroundColor) | theme.palette.type === 'light' ? theme.palette.grey[300 ] : theme.palette.grey[700 ] |
| IconButton | theme.palette.action.active | fade(theme.palette.action.active, theme.palette.action.hoverOpacity) if :hover |
| Typography | global stylesheet | global stylesheet |
Proposal
Remove it because:
- not even the actual default value for the components
- not mentioned in the material spec
- broken for
Badgewith no report (I was not able to determine when this actually broke but I guess this happened a few months ago; Edit: passed undefined even in 1.0.0-alpha.2)
People can always set the color prop to undefined which will result in no applied css rules concerning color which is a proper default in my opinion.
inherit variant
Implementation
| Component | color | backgroundColor |
|---|---|---|
| AppBar | global stylesheet | global stylesheet |
| Button | inherit | global stylesheet |
| Icon | global stylesheet | global stylesheet |
| IconButton | inherit | global stylesheet |
| SvgIcon | global stylesheet | global stylesheet |
| Typography | inherit | global stylesheet |
Funny enough in Icon fontSize="inherit" color="inherit" causes font-size: inherit; but no defined color in css.
Also the default for fontSize in those components is default and applies always no css rules but the default for color is inherit which applies sometimes no css rules. This might as well be removed. There is no value in a named default value in my opinion but this is should be discussed separately.
Proposal
No strong opinion about that one. Either repurpose this as a default replacement which means color and background-color are not set or actually set inherit which is the most obvious. AppBar for example does not do anything with inherit which might be confusing.
/cc @mui-org/core-contributors