Enhance background and foreground palettes on generated themes to include
all properties that a palette is featuring usually.
The foreground and background palettes are complete, e.g.
$mat-grey: (
0: #ffffff,
50: #fafafa,
100: #f5f5f5,
200: #eeeeee,
300: #e0e0e0,
400: #bdbdbd,
500: #9e9e9e,
600: #757575,
700: #616161,
800: #424242,
900: #212121,
1000: #000000,
A100: #ffffff,
A200: #eeeeee,
A400: #bdbdbd,
A700: #616161,
contrast: (
0: $black-87-opacity,
50: $black-87-opacity,
100: $black-87-opacity,
200: $black-87-opacity,
300: $black-87-opacity,
400: $black-87-opacity,
500: $black-87-opacity,
600: $white-87-opacity,
700: $white-87-opacity,
800: $white-87-opacity,
900: $white-87-opacity,
1000: $white-87-opacity,
A100: $black-87-opacity,
A200: $black-87-opacity,
A400: $black-87-opacity,
A700: $white-87-opacity,
)
);
The scss will not compile because the foreground and background palettes feature only
some magic constant values like background, raised-button, card among others.
Define and include a scss file that uses mat-color, e.g.
@import '~@angular/material/theming';
@mixin my-custom-component-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
my-custom-component {
background-color: mat-color($background, 300, 0.3);
color: mat-color($foreground, A400, 0.9);
}
}
Expectation that foreground and background are a full palettes on a theme and available when applying custom theming to custom material components. Otherwise its hard to find out what is available, especially since all the other palettes primary, accent and warn are fully available.
beta.5
Foreground and background palettes are a different format from the primary/accent/warn palettes because the Material Design spec is more specific on those colors. Neither is just "grey" or similar; they're their own thing.
https://material.io/guidelines/style/color.html#color-themes
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
_This action has been performed automatically by a bot._