Angular 12 - Colors not correctly applied to components

[json-derulo]

:speaking_head: Foreword

Angular 12 was released yesterday. It does seem to cause issues with this package.

:ghost: Brief Description

The values for various foreground and background colors don't seem to be applied correctly to the Angular Material components anymore:

:pancakes: Action version

latest

:tophat: workflow configuration

Configuration like described in the README

Steps To Reproduce

Steps to reproduce the behavior:

1. Update to Angular 12
2. Serve the project

I've also set up a repo for demonstration:

https://github.com/json-derulo/angular-material-css-vars-angular12

:police_car: Expected behavior

The components look like they did in Angular 11, with the primary / accent / warn color and the border / background colors being applied correctly.

:heavy_plus_sign: Additional context

It might have to do either with Ivy, or the new Sass module system, which Angular both mentioned in their blog

[json-derulo]

I forked this project and performed the Angular update. The same issue is happening in the demo application:

https://github.com/json-derulo/angular-material-css-vars/tree/angular-12

[johannesjo]

Thank you very much for opening this up. I suspect that this is due to the changes in the sass module loading and/or the new changes in angular material. Ivy should be already in use.

[json-derulo]

I did a little research, and the root cause is indeed the Sass refactoring. They renamed lots of their functions, mixins and variables. For example, mat-color is now get-color-from-palette. Sadly I was not able to get it running yet.

[json-derulo]

Now I understand how it worked til now. Angular Material defined a mat-color function, and this library overrides that function with an own implementation, using the CSS variables.

But since Angular 12, they explicitly use the get-color-from-palette function from Angular Material. Have a look at this implementation in their button component as an example:

@use '../core/theming/theming';

@mixin _focus-overlay-color($config-or-theme) {
  $config: theming.get-color-config($config-or-theme);
  $primary: map.get($config, primary);
  background-color: theming.get-color-from-palette($primary);
}

I'm not sure if there is a way how override the theming.get-color-from-palette function in this example, because the core/theming/theming.scss file from Angular Material is directly referenced.

[johannesjo]

I spent a little time with this. It seems to be possible to change the colors: https://github.com/johannesjo/angular-material-css-vars/tree/feat/update-to-ng12

Not sure if it is possible to map all the colors which had an rgba value before including an opacity value. But there seems to be a road.

For my personal needs I stick with angular material 11 for now, but I might revisit this, as soon as that is not an option any more. In the meantime PRs are welcome.

[austenstone]

I also spent some time trying to get it to work.

The file _mat-lib-overwrites.scss is broken because you can't overwrite functions from the sass @use like we could when they were using @include.

Maybe we can duplicate the file that is doing the @forwards (node_modules\@angular\material\_index.scss) and overwrite everything there. Then we forward our own stuff.

[olsonjj]

Just checking if anyone is still looking at this. I'd be happy to put up some funds to incentivize a fix. 😄

[johannesjo]

@olsonjj @astone2014 is currently working on this with the help of @pedrojrivera so funds should go to them ;)

[Memoyr]

Hello! @astone2014 @pedrojrivera Do you think you still need few more weeks to complete the fix ? Or you're close to done ? Thx

[json-derulo]

Fixed with v2.0.0 which was released today!