Using primary/accent colors at different levels

[pelotom]

Several components have a color prop on them, which can be 'inherit' | 'primary' | 'accent' | 'default'. This works fine out of the box most of the time, but when dealing with primary or accent there's also the possibility of wanting to use a particular level (50, 100, 200, etc.) As I understand it, the standard way to do this currently is something like

const colorIndex = 200;

const MyComponent = withStyles(theme => ({
  colorAccent: {
    backgroundColor: theme.palette.secondary[colorIndex],
    color: theme.palette.getContrastText(theme.palette.secondary[colorIndex]),
  },
})(({ classes }) =>
  <AppBar position="static" color="accent" classes={classes}>
    ...
  </AppBar>
);

This obviously offers unlimited power, but for something I find myself wanting to do with some regularity it's not very convenient. It'd be nice if this could be accomplished by something as simple as

const MyComponent = () => (
  <AppBar position="static" color="accent" colorIndex={200}>
    ...
  </AppBar>
);

It seems like this might require #7633 to implement practically.

[oliviertassinari]

It's also related to #8717.

[yzorg]

@pelotom Was this resolved by #9794?

[pelotom]

@yzorg yep, I’d say so