[RFC] color prop API

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 Badge with 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

[eps1lon]

@oliviertassinari This is something I’d like to revisit once @material-ui/styles is stable. Styles as a function of props will save as quite a bit of logic and a consistent color API simply emerges from styles as a function of props. I’m not a big fan of string paths since typings support is not as trivial as simple string literals. I’d need to take a closer look to see how this works with builtin themes and custom themes.

I’d like to have a look at the color palette first since the concept is not very close to the material color system anyway. There is no such thing as text.primary but rather “on”-colors. So you would use onPrimary rather than text.primary. There is a distinction because “on”-colors are also used for icons and other elements and not just text. Using text.primary for an icon wouldn’t make sense from a semantics standpoint.

I’d really like for designers that are familiar with material design to “just” pick up our theming and build new ones without having to study our API docs to see what color corresponds to what in the components. If we state that we implement material design then we should make every effort to make the transition as smooth as possible and wherever we deviate we should have a strong argument for it and at least an adapter for it.

[oliviertassinari]

@eps1lon I gave this issue a second read. I have changed my mind. I do no longer have a strong opinion in any direction. I agree, it would help to replace the default value with the actual value used.

• AppBar: default -> grey
• Badge: default -> inherit
• Button: default -> textPrimary
• IconButton: default -> actionActive
• Typography: default -> textPrimary
• Switch: default -> grey

Now, with the introduction of the system package. I think that we should work in the direction of integrating the package with the core components. Meaning having all the scope of the colors available, like <Paper color="text.secondary" />. In this logic, I think that it would be more consitant to rename textPrimary -> text.primary, actionActive -> action.active, textSecondary -> text.secondary, etc.