Components: Ability to set different foreground colors for "on primary", "on secondary" and "on background"

[mischkl]

Bug, feature request, or proposal:

Feature

What is the expected behavior?

It should be possible to specify different foreground colors depending on whether text or icons are being displayed on top of the primary, secondary, or background colors. This is in alignment with the newest Material Design guidelines, see https://material.io/design/color/#color-theme-creation

What is the current behavior?

There is just one set of colors, with no differentiation as to which color they are "on top of". This is in particular a problem when using a light theme with relatively dark primary or accent colors, or a dark theme with relatively light primary or accent colors, because the text/icons don't contrast enough with the colors they are on top of.

What are the steps to reproduce?

Create a light theme with relatively dark -- but not too dark! -- primary/accent colors. There is no possibility to improve the contrast of text on top of these colors, because there are no variables to cover these cases.

What is the use-case or motivation for changing an existing behavior?

To allow better/more customization of text colors in order to improve contrast and avoid the necessity of CSS hacks.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.0.1, Angular Material 6.0.0

Is there anything else we should know?

Here is an example of a bad pairing of colors that can't be fixed without manually hacking the CSS:

[levitatejay]

If you are looking for a workaround you can create your own palette and set the contrast colours.

Guide, Palette tool, Stackblitz

$my-custom-palette: (
  50 : #edebfc,
  100 : #d3cef8,
  200 : #b6aef3,
  300 : #988dee,
  400 : #8274eb,
  500 : #6c5ce7,
  600 : #6454e4,
  700 : #594ae0,
  800 : #4f41dd,
  900 : #3d30d7,
  A100 : #ffffff,
  A200 : #e9e7ff,
  A400 : #b9b4ff,
  A700 : #a29bff,
  contrast: (
    50 : #000000,
    100 : #000000,
    200 : #000000,
    300 : #000000,
    400 : #000000,
    500 : #ffffff,
    600 : #ffffff,
    700 : #ffffff,
    800 : #ffffff,
    900 : #ffffff,
    A100 : #000000,
    A200 : #000000,
    A400 : #000000,
    A700 : #000000,
  )
);