Ole Ersoy

Oct 26, 2020

2 min read

The Meaning of Hue in the Angular Palette Context

Image by David Zydd from Pixabay

Question

Answer

$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,
)
);
@function mat-contrast(
$palette,
$hue) {
@return map-get(
map-get($palette, contrast),
$hue);
}

Brought to You By