"contrast" color is overridden by "primary" color runway

[nrathi]

When you set the primary color runway in ThemeOptions, the contrast color stops working.

Expected Behavior

contrast should stay white.

Current Behavior

contrast becomes rgba(0, 0, 0, 0.87).

Steps to Reproduce (for bugs)

const theme: ThemeOptions = {
  palette: {
    primary: green,
  },
};

1. Set primary to any color runway.

Context

The color system in material-ui-next is already very confusing... ThemeOptions.primary => color="primary", ThemeOptions.secondary => color="accent" (you should really consider renaming that), ThemeOptions.text.secondary => color="secondary", and I'm still lost as to how default and inherit work. Please fix this!

Your Environment

Tech	Version
Material-UI	npm:material-ui@next
React	^15.4.2
browser	Chrome

[kgregory]

The problem is that the foreground color is based on the primary color for flat and raised contrast buttons:
https://github.com/mui-org/material-ui/blob/1a19bb7bffca4f10dd7e2dc60b6184c5414d944f/src/Button/Button.js#L67-L76

For contrast, flat buttons have a transparent background until they are hovered. Raised buttons are gray until hovered.

raisedContrast should have its color based on ‘theme.palette.grey[300]’ instead.

Not sure about flatContrast.

[oliviertassinari]

The color system in material-ui-next is already very confusing...

@nrathi I'm in favor of renaming accent -> secondary and secondary -> textSecondary. This would remove one indirection, making things simpler 👍 .

@kgregory You raise an important point. We have just updated the getContrastText implementation in #9063. The argument of getContrastText() is the color of the background and output the color of the text.

I'm far from convinced that color="contrast" a useful value. It's here to contrast the text when the button is over a primary color background.
For instance:
https://github.com/mui-org/material-ui/blob/d7013d633514654d20eaaedc347063ed236a5ce1/docs/src/pages/demos/app-bar/ButtonAppBar.js#L36
But I find it a niche use case. This example would be much better with color="inherit".
I'm in favor of removing color="contrast" and implementing a more generic Color component.

[mbrookes]

I'm in favor of renaming accent -> secondary and secondary -> textSecondary

There is a certain logic to the naming, and it does strictly speaking follow the spec, but it is confusing, so I"d agree with changing "Accent" to "secondary. MCW have already done so (even if they haven't updated the image 😄) .

Secondary: the secondary color used in your application, applies to a number of UI elements. (Previously called “accent”.)[1]

[1] https://material.io/components/web/catalog/theme/

I've also never been convinced by color="contrast" (especially for raised), but "inherit" doesn't quite sound right, in that the other options are applying theme intents, while "inherit" is a CSS attribute.

[oliviertassinari]

while "inherit" is a CSS attribute

@mbrookes inherit is an escape hatch from the other options that are applying theme intents. Does it sound good?