material 2 paletta contrast color

Question

In the paletta, I can see contrast. How can I choose a contrast color?

works:

scss
mat-color($button-primary);

Not working

scss 
mat-color($button-primary, contrast(900));

See on the bottom it says contrast.

scss
$mat-red: (
  50: #ffebee,
  100: #ffcdd2,
  200: #ef9a9a,
  300: #e57373,
  400: #ef5350,
  500: #f44336,
  600: #e53935,
  700: #d32f2f,
  800: #c62828,
  900: #b71c1c,
  A100: #ff8a80,
  A200: #ff5252,
  A400: #ff1744,
  A700: #d50000,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: white,
    600: white,
    700: white,
    800: $white-87-opacity,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: white,
    A400: white,
    A700: white,
  )
);

How can I use the contrast?

Answer 1

color: mat-contrast($mat-red, 900);

Link for reference: https://github.com/angular/material2/blob/2.0.0-beta.8/src/lib/core/theming/_theming.scss#L4

Answer 2

If you use custom themes, sometimes it is useful to get the contrast for the default, lighter or darker presets. For example, in your styles.scss you can set the following custom theme:

$default-primary: mat-palette($mat-blue, 500, 300, 700);
$default-accent: mat-palette($mat-red, 500, 50, 900);
$default-warn: mat-palette($mat-deep-orange);        

$default-theme: mat-light-theme($default-primary, $default-accent, $default-warn);

@include my-component-theme($default-theme);

Then, in your component theme you can do the following:

@mixin my-component-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  .test {
      color: mat-color($primary, default-contrast); // or 'lighter-contrast' or 'darker-contrast'
  }
}

Answer 3

The solution is:

.test {
  color: mat-color($button-primary, 900-contrast)
}