Repository: material-ui
Issue: [RFC] color prop API
Labels: new feature,design: material,discussion,breaking change,RFC

Currently our type declarations contain the following definition for color props:
```ts
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](https://material.io/design/color/the-color-system.html#)
  - 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