Bug: css variables mapping doesn't work for additional properties (default, lighter, darker) #52
Description
Summary
I've noticed the mapping of css variables is incorrect for the following properties: default, lighter, darker, text, default-contrast, lighter-contrast, darker-contrast. The reason is that the mat-palette() calls used in init-mat-theme produces a hue specific variable (--palette-primary-500) instead of the original named one (--palette-primary-default for default).
In detail
I've got a product which uses material extensively, but we're trying to shift towards css variables. This is how our material theme was configured:
$app-primary: mat-palette($page-primary, 700, 200, 900);
$app-accent: mat-palette($page-accent, 500, 200, 900);
$app-warn: mat-palette($page-error);
$app-material-theme: mat-light-theme($app-primary, $app-accent, $app-warn);Shifting to css variables using your awesome library was actually really easy.
@include init-material-css-vars() {}
$app-primary: mat-palette($page-primary, 700, 200, 900);
$app-accent: mat-palette($page-accent, 500, 200, 900);
$app-warn: mat-palette($page-error);
@include mat-css-set-palette-defaults($app-primary, 'primary');
@include mat-css-set-palette-defaults($app-accent, 'accent');
@include mat-css-set-palette-defaults($app-warn, 'warn');Done, except for one issue.
For $app-primary, the material components now take 500 as default color, instead of the 700 specified in the mat-pallete(). This is because the actual style in material color: map-get($primary) is rendered as color: rgb(var(--palette-primary-500)). This should be color: rgb(var(--palette-primary-default)).
The reason this happens is how init-mat-theme makes its themes. It calls mat-palette(), which executes the following code:
@function mat-palette($base-palette, $default: 500, $lighter: 100, $darker: 700, $text: $default) {
$result: map_merge($base-palette, (
default: map-get($base-palette, $default),
lighter: map-get($base-palette, $lighter),
darker: map-get($base-palette, $darker),
text: map-get($base-palette, $text),
default-contrast: mat-contrast($base-palette, $default),
lighter-contrast: mat-contrast($base-palette, $lighter),
darker-contrast: mat-contrast($base-palette, $darker)
));
...
}Here, default is assigned map-get($base-palette, $default), which fetches the --palette-primary-500 css variable for primary. This should be --palette-primary-default.
Because of this bug, any palette with non-default hues will unfortunately not work with your library.
To end on a good note, thanks for making this awesome library. It made my work a hell of a lot easier. You rock! 👍