johannesjo / angular-material-css-vars Goto Github PK

When I first used mat-css-color-and-contrast I assumed it might take a secondary property for the palette (e.g. warn, accent). Looking at the code there's mixins for each.

To follow with the existing naming convention it might be nice if primary was added.
mat-css-color-and-contrast => mat-css-color-and-contrast-primary

Thank you for your great work, I adopted it and I found a small bug.

Sometimes when Material applies colors (primary, accent or warn) sets the opacity value.
You can check this behavior with SlideToggle, when checked the class .mat-slide-toggle-bar uses accent-500 with 0.54 of opacity.

To fix the problem, when your version of mat-color returns the variable:

@return rgba($color, _mat-css-str-replace($color, ')', '-alpha, 1'));

I replaced the default value with the Material expected value:

$default-opacity: if($opacity == null, 1, $opacity);
@return rgba($color, _mat-css-str-replace($color, ')', "-alpha, #{$default-opacity})"));

Nothing more and this seems to solve all the problems I've found.
I hope this will help you.

I'm using angular-material-css-vars in a project, where I'm not able to use the new SASS module system (@use rule). Since v2 of this library, I cannot import variables.scss anymore, because it's first line is the following:

@use '~@angular/material'as mat;

Is it possible to revert this change and switch back to the old SASS module system?

Hi! I'm new with this library. I wan't to know how I can initialize a fallback or custom style by default, and give for example to the $mat-blue-grey, the value 900 as the selected primary color?

@import '../projects/material-css-vars/src/lib/public-util';
@import '../projects/material-css-vars/src/lib/main';

@include init-material-css-vars();

@include mat-css-set-palette-defaults($mat-blue-grey, 'primary');
@include mat-css-set-palette-defaults($mat-pink, 'accent');
@include mat-css-set-palette-defaults($mat-red, 'warn');

This idea is to get the same color when doing this with Material:

$primary-color: mat-palette($mat-blue-grey, 900);

Hi,

just wanted to tryout but it doesn't add rgba() to the styles, I used the tutorial from the README.md.

Trying to figure it out, I tried the demo of this repo:
Example App CSS:

.isDarkTheme .mat-toolbar.mat-primary {
    background: rgba(var(--palette-primary-500), 1);
    color: rgba(var(--palette-primary-contrast-500), 1);
}

in my app:

.isDarkTheme .mat-toolbar.mat-primary {
    background: var(--palette-primary-500);
    color: var(--palette-primary-contrast-500);
}

is the release out of date or did I miss something?

Hello there, I have a problem with mixins. I've checked extraction of primary color and it works well, but 'background' and 'foreground' properties are not.
Here's an example. Text in the center should have 'card' background, but generated styles are invalid.
Generated: .custom{background-color:var(--palette-background-card)}
But --palette-background-card is 255,255,255 instead of rgba(255,255,255).
In the default generated files this variable, like many others, called with rgba function: background-color: rgba(var(--palette-background-card)), but not in mixins.

In this case it's not fully supports ready theme mixins.

The message is pretty self explanatory. Let's check comparability and bump version or just don't limit version to 9.999.9.
Package "angular-material-css-vars" has an incompatible peer dependency to "@angular/material" (requires ">=8.1.3 <=9.999.9", would install "10.0.0").

🗣️ Foreword

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

👻 Brief Description

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

🥞 Action version

latest

🎩 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

🚓 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.

➕ Additional context

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

My vars show up but they are missing rgba in front of them?

Hi,

• Do we have any option to apply the font-styles dynamically similar to apply theme color dynamically ?

       const hex = '#3f51b5';
       this.materialCssVarsService.setDarkTheme(true);
       this.materialCssVarsService.setPrimaryColor(hex);
       this.materialCssVarsService.setVariable(MaterialCssVariables.BackgroundCard,hex);
       this.materialCssVarsService.setAccentColor('#333');

Is it possible to change mat-font-size, mat-font-family using the same principle? Is it something you guys would consider adding?

https://material.angular.io/guide/typography#material-typography-in-your-custom-css

Why did you remove initialization for $default-theme?

@include _mat-css-root($default-theme);

this.materialCssVarsService(MaterialCssVariables.BackgroundAppBar, 'green');

this doesn't work anymore in Angular v.12

'BackgroundStatusBar' = '--palette-background-status-bar',
'BackgroundAppBar' = '--palette-background-app-bar',
'BackgroundBackground' = '--palette-background-background',
'BackgroundHover' = '--palette-background-hover',
'BackgroundHoverAlpha' = '--palette-background-hover-alpha',
'BackgroundCard' = '--palette-background-card',
'BackgroundDialog' = '--palette-background-dialog',
'BackgroundDisabledButton' = '--palette-background-disabled-button',
'BackgroundDisabledButtonAlpha' = '--palette-background-disabled-button-alpha',
'BackgroundRaisedButton' = '--palette-background-raised-button',
'BackgroundFocusedButton' = '--palette-background-focused-button',
'BackgroundSelectedButton' = '--palette-background-selected-button',
'BackgroundSelectedDisabledButton' = '--palette-background-selected-disabled-button',
'BackgroundDisabledButtonToggle' = '--palette-background-disabled-button-toggle',
'BackgroundUnselectedChip' = '--palette-background-unselected-chip',
'BackgroundDisabledListOption' = '--palette-background-disabled-list-option',

I'm wondering if I have messed something up.

The only way I can import the material-css-vars main file is by using this import
@import 'angular-material-css-vars/src/lib/_main';

Has something changed and the documentation is out of date with the latest version of angular?

👻 Brief Description

The input fields don't have proper colors for mat-form-field-underline.

Look at these images and notice the underline color. (I am not interacting with the input)

Before

After

🥞 Action version

After updating 1.1.1 to 1.2.0

🎩 workflow configuration

Don't know what workflow configuration would mean.

Steps To Reproduce

Use any input field inside a mat form field.

🚓 Expected behavior

Expected

See Angular Material Input

➕ Additional context

This was okay before I updated to 1.2.0

@mixin mat-form-field-legacy-color($config-or-theme) {
    .mat-form-field-underline {
      background-color: $underline-color;
    }
}

background-color: rgba(var(--palette-foreground-divider-dark), var(--palette-foreground-divider-dark-alpha, 0.7));

I receive the following error with a brand new Angular CLI app:

ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/dist/cjs.js??ref--15-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $string: null is not a string.

If I import the public-utils in the styles.scss it seems to compile

👻 Brief Description

Alpha variable is missing on disabled-text

🥞 Action version

Disabled inputs are not graded out

Steps To Reproduce

Just disable some input fields

🚓 Expected behavior

Expecting to have graded out input field when is disabled

➕ Additional context

I will create PR in order to fix this issue. please merge it when is possible. Thanks

Observation. A single Angular Material theme is roughly half the size as this package.

My guess is the dark and light both are getting built which doubles the size. Are both of these actually necessary?

Currently the peer dependencies are defined as followed.

"peerDependencies": {
    "@angular/common": ">=8.1.3 <=10.999.9",
    "@angular/core": ">=8.1.3 <=10.999.9",
    "@angular/material": ">=8.1.3 <=10.999.9"
},

If you are using current version of angular and angular material, this leads to the error message Package "angular-material-css-vars" has an incompatible peer dependency to "@angular/material" (requires ">=8.1.3 <=10.999.9", would install "11.1.0").

We are using angular and angular material in version 11.1.0 and have no problems with the angular-material-css-vars package. Therefore it should be updated to support angular 11 😀

Currently this library does not provide a changelog (as far as I can see). This makes it hard to find out if there are breaking changes.
For example, I don't know if I need to change anything with the update from version 0.3.9 to 1.1.0.

It would be great if you could add a changelog to clarify this.

You could use this format: https://keepachangelog.com/en/1.0.0/

Problem Statement

Currently it is not possible to render an application that uses MaterialCssVarsService on the server.

Possible Solution

It should be possible to use MaterialCssVarsService in an SSR application, without the need to wrap the calls in a platform check call.
It seems like #39 would solve this issue. Is it planned to merge that PR? Otherwise, I could create a new PR for this issue.

Hi. I'm getting the following error:

`ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

  background: mix($app-background, rgba($badge-color, 1), (1 - $badge-opacity) * 100%);
                                  ^
  Argument `$color` of `rgba($color, $alpha)` must be a color
  in /Users/git/project/node_modules/@angular/material/_theming.scss (line 1899, column 40)`

I have a feeling it has to do with my angular/angular material version (7.2) - I've tried using an earlier version of the library (0.2.1) and still had no luck. Am I correct in my assumption? Any ideas?

Thanks!

I forked your code and added a new color algorithm and fixed a bunch of bugs that we found when we were implementing it in our existing project. You can see our changes here:

https://github.com/pedrojrivera/angular-material-css-vars/tree/feature/googlePaletteColors

Thanks!

For reasons I don't understand, sometimes the material team doesn't uses mat-color.
I found the following uses:

• @mixin mat-ripple-theme($theme)
• @mixin mat-button-theme($theme) -> .mat-button-focus-overlay
• @mixin mat-chips-theme($theme) -> .mat-chip.mat-standard-chip > &::after
• @mixin mat-radio-theme($theme) -> .mat-ripple-element
• @mixin mat-checkbox-theme($theme) -> .mat-checkbox .mat-ripple-element

I have no idea how to fix these, temporarily I created the next fix:

.mat-button-focus-overlay,
.mat-checkbox .mat-ripple-element,
.mat-chip.mat-standard-chip::after,
.mat-radio-button .mat-ripple-element {
  $foregroundTheme: map-get($mat-css-default-theme, foreground);
  $foregroundBaseColor: mat-color($foregroundTheme, base);
  background-color: $foregroundBaseColor;
}

and overwrite mat-ripple-theme

@mixin mat-ripple-theme($theme) {
  $foreground: map_get($theme, foreground);
  $foreground-base: map_get($foreground, base);

  .mat-ripple-element {
    // If the ripple color is resolves to a color *type*, we can use it directly, otherwise
    // (e.g. it resolves to a CSS variable) we fall back to using the color and setting an opacity.
    @if (type-of($foreground-base) == color) {
      background-color: rgba($foreground-base, $mat-ripple-color-opacity);
    }
    @else {
      background-color: mat-color($foreground, base);
      opacity: $mat-ripple-color-opacity;
    }
  }
}```

tinycolor2 needs to be added as a dev dependency to the root project's package.json in order to run a npm run lib.build

The mat select options that are listed as disabled are not grayed out.
https://i.imgur.com/otDUWoQ.png
https://i.imgur.com/CuqiseH.png

rendered css variables
.mat-option.mat-option-disabled {
color: rgba(var(--palette-foreground-hint-text), 1);
}

in scss
&.mat-option-disabled {
color: mat-color($foreground, hint-text);
}

Why is the mat-color($foreground, hint-text) = rgb(0, 0, 0)?
I don't think I modified the foreground color. Do I need to set it?

I have followed the instructions as linked on the readme, and all works wonderfully in development with ng serve. However, when ng serve --prod is running I receive an error saying, "StaticInjectorError(AppModule)[DynamicColorsModule -> MaterialCssVarsService_1]:
StaticInjectorError(Platform: core)[DynamicColorsModule -> MaterialCssVarsService_1]:
NullInjectorError: No provider for MaterialCssVarsService_1!"

I am using Angular 8

Hi!

Could you update npm package in order to have available the last changes?

Thanks!

Hello,

I realy would like to understand the project better, and would love to hear from your feedback.

Can I use this lib to integrate custom material themes for my custom components in my project?
https://material.angular.io/guide/theming-your-components

The problem with the "official" approach is that it breaks the encapsulation, and I think css vars are much easier, so I could just do something like:

@include variables
color: var(PrimaryColor);

Also I think the first sentence is not very clear :D Im not hear to learn about rainbows :O

Feedback? :)

The documentation encourages to use the @import rule to load the necessary SCSS files from the library. A while ago, the Sass team introduced a new module system with the new @use rule.

I am able to use this new module system to initialize the library with the following code:

@use "~angular-material-css-vars/main";

@include main.init-material-css-vars();

So far, so good. But see what happens if I need the $mat-css-theme variable:

@use "~angular-material-css-vars/main";

@include main.init-material-css-vars() {
  @include init($mat-css-theme);
}

I'm now getting a SassError: Undefined variable during build. It seems like the $mat-css-theme variable like it is declared, is not available in the new module system.

As at some time @import will be deprecated, this library should be updated to work well with the @use rule.

Hi,

I updated your library in my project from v1.1.x to v2.1.2 today and unfortunately the mat-css-set-palette-defaults mixin doesn't work anymore (angular material was updated from v11 to v12, too). I delved into the code to figure out what goes wrong and I found out, that Pedro removed a crucial line of code in his commit: _public-util.scss#136 @include _mat-css-root($new-map)

I'm not a SCSS expert so I don't know if there is some other magic in place, but as far as I can see, this function is basically dead right now.

After "fixing" the function locally I can see now, that the contrast isn't working correctly, which was addressed in Pedros commit, too (e.g. black font on dark blue background). So the solution isn't that easy.

Any idea how to solve this problem?

Some background information:
My app loads the primary and accent color from an API, after the user logs in. So on the login screen I'd like to use the default angular material palettes. After I set the colors with setPrimaryColor() everything works as expected. My theme.scss:

@use '~@angular/material' as mat;
@import '~angular-material-css-vars/public-util';
@import '~angular-material-css-vars/main';

$mat-css-dark-theme-selector: '.isDarkTheme';
$mat-css-light-theme-selector: '.isLightTheme';

@include init-material-css-vars();

@include mat-css-set-palette-defaults(mat.$indigo-palette, 'primary');
@include mat-css-set-palette-defaults(mat.$pink-palette, 'accent');
@include mat-css-set-palette-defaults(mat.$red-palette, 'warn');

Hey, not sure if this is a new feature you want to add, or just something I'm doing the wrong way but I want my app to have more than just 2 themes (dark & light) and some of them I'd like to set a custom background colour for.
This is fine using setVariable() when on a light theme, but if I use a dark theme then all the CSS rules get overriden by the dark-theme selector set which are more specific. I know that I could do something like this inside my style.css (or some theme sheet included therein):

&.dark-theme .background {
    background-color: <value>
}

But that still means that all themes that are set to "Dark" are using the same background colour, just not the material default of #202020. Do you have any suggestions?

I was looking at using a work around by having some themes set as light themes and using setVariable to update the background/card/dialog colours to be what I want them to, but this then means that your amazing auto-contrasting code doesn't evaluate it properly and I still get the dark text on the dark background.

Any help would be appreciated, I'd prefer a more programmatic solution than having to put in a bunch of CSS fixes/supporting sheets, etc; but just getting a better understanding of how to implement this would be great :)

We discovered that the mat-ripple background color on light theme is not displaying correctly.
We discovered the following in the generated styles:

.mat-checkbox .mat-ripple-element {
    background-color: var(--palette-foreground-base);
}

We had to override the style to include the rgb() function.

.isLightTheme .mat-checkbox .mat-ripple-element {
  background-color: rgb(var(--palette-foreground-base));
}

First of all, this project is amazing! Thank you.

I have a question. Is it possible to use a custom mat-dark-theme and mat-light-theme.
Before using your project, I was applying material colors the classic Angular way. Because the default Angular Material dark and light themes didn't fit my needs, I created my color themes using a custom mat-dark-theme and mat-light-theme, which had some colors slightly changed.

Can I, using this project, change the colors which are used in mat-dark-theme and mat-light-theme of plug in new dark and light themes?

Thank you.

I like your tool a lot, I was long time searching for something like that!
But when I want to import it to my module, I get this error:

angular-material-css-vars.js:633 Uncaught TypeError: Object(...) is not a function
    at angular-material-css-vars.js:633
    at Module../node_modules/angular-material-css-vars/fesm5/angular-material-css-vars.js (angular-material-css-vars.js:635)
    at __webpack_require__ (bootstrap:83)
    at Module../src/app/app.module.ts (app.component.ts:9)
    at __webpack_require__ (bootstrap:83)
    at Module../src/main.ts (main.ts:1)
    at __webpack_require__ (bootstrap:83)
    at Object.0 (main.ts:15)
    at __webpack_require__ (bootstrap:83)
    at checkDeferredModules (bootstrap:45)

I use Angular 7, is it compatible with it?

Currently, as it stands, this library does not support IE11 as IE11 does not support CSS Variables.

A polyfill should fix this, and it may be more ideal to supply that polyfill with this library.

For testing i'm using karma and jasmine, and i'm using the MaterialCssVarsService on the app.component.ts. When i run ng test i get this error:

NullInjectorError: StaticInjectorError(DynamicTestModule)[MaterialCssVarsService -> InjectionToken Mat Css Config]:
StaticInjectorError(Platform: core)[MaterialCssVarsService -> InjectionToken Mat Css Config]:
NullInjectorError: No provider for InjectionToken Mat Css Config!
NullInjectorError: StaticInjectorError(DynamicTestModule)[MaterialCssVarsService -> InjectionToken Mat Css Config]:
StaticInjectorError(Platform: core)[MaterialCssVarsService -> InjectionToken Mat Css Config]:
NullInjectorError: No provider for InjectionToken Mat Css Config!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:725:1)
at resolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11918:1)
at tryResolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11862:1)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11764:1)
at resolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11918:1)
at tryResolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11862:1)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11764:1)
at resolveNgModuleDep (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:20234:1)
at _createClass (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:20281:1)
at _createProviderInstance (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:20251:1)

I've already added MaterialCssVarsService to the providers but i keep getting this error. What should I do? What is this mat css config?

It looks like the variable name was repeated instead of using the alpha variable for foreground disabled buttons.

This results in compiled code like this:

    color: rgba(0, 0, 0, 0, 0, 0);
    color: rgba(var(--palette-foreground-disabled-button), var(--palette-foreground-disabled-button));

It is not uncommon for applications to have multiple theme mixins, following this guide. Currently, this library doesn't allow you to access the theme generated and pass it into your own mixins.

One way to handle this would be to use the @content feature of sass similar to what's suggested in this stackoverflow and what Material does for MDC mixins.

I'm thinking it would look something like:

initMatTheme(){
    // $theme gets created by the mixin so we can use it here
    // content we pass in this block will get applied  both at the root and within the dark theme selector
    my-mixin($theme);
}

Let me know if you think it's a good idea. I may be able to contribute.

After upgrade ng material to 13, material css vars failed to compile. The issue seems related to how angular css is imported without "~".

I'm successfully using angular-material-css-vars in one of my Anuglar 9 projects and noticed that the package.json still defines

"peerDependencies": {
    "@angular/common": "^8.1.3",
    "@angular/core": "^8.1.3",
    "@angular/material": "^8.1.3"
}

which leads to warnings during npm install:

npm WARN [email protected] requires a peer of @angular/common@^8.1.3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@^8.1.3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/material@^8.1.3 but none is installed. You must install peer dependencies yourself.

Thanks!

To make effective the elevation configuration, I rewrite the mat-elevation mixin in this way:

@mixin mat-elevation($zValue, $color: $mat-elevation-color, $opacity: $mat-elevation-opacity) {
  @if type-of($zValue) != number or not unitless($zValue) {
    @error '$zValue must be a unitless number';
  }
  @if $zValue < 0 or $zValue > 24 {
    @error '$zValue must be between 0 and 24';
  }

  $color-umbra: $color;
  $color-penumbra: $color;
  $color-ambient: $color;
  @if type-of($color) != color {
    $color-umbra: rgba($color, $opacity * 0.2);
    $color-penumbra: rgba($color, $opacity * 0.14);
    $color-ambient: rgba($color, $opacity * 0.12);
  }

  box-shadow: #{map-get(_get-umbra-map($color-umbra, $opacity), $zValue)},
  #{map-get(_get-penumbra-map($color-penumbra, $opacity), $zValue)},
  #{map-get(_get-ambient-map($color-ambient, $opacity), $zValue)};
}

In this way you can change elevation: black into variables file.

Is there a way to use a set material style as a "fallback"?

i.e. @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

there already seems to be some kind of fallback because there is a light blue color that shows before my themeService has time to change it to the correct color. Didn't know if there was a way to override that with default theme

In my constructor I want to set the Background of a Dialog:

this.materialCssVarsService.setVariable(MaterialCssVariables.BackgroundDialog, '#AA222255');

But now my Dialog is transparent. F12 gives me:

.mat-dialog-container {
    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
    background: rgba(var(--palette-background-dialog), 1);
    color: rgba(var(--palette-foreground-text), var(--palette-foreground-text-alpha, 1));
}

Other functions works as it is in documentation described.

Hi there,
After installing and adding the code as per the documentation page, I tried building the app to make sure the base framework was good before implementing the themes in the components.
Initially I was hit by a Null Injector issue, but it seems that adding "postinstall": "ngcc" and doing an npm install has rid me of this, but I am still seeing an issue where the compiler complains that the mixin app-theme doesn't exist.
Checking the repo I can see it does exist here, but in the node_module compiled library on my machine I can't find it.

👻 Brief Description

The same variable is used for card background and drawer backdrop: --palette-background-card.
Changing this variable also leads to changing drawer bg color (see .mat-drawer-backdrop class)

Steps To Reproduce

Steps to reproduce the behavior:

1. Add mat-card and mat-sidenav components
2. Open drawer
3. Change --palette-background-card variable
4. Observe card and drawer bg

🚓 Expected behavior

Drawer bg color should not change

Hi, is there an update coming for Angular 9?

I tried to update to Angular 9/Material 9 but got problems with the str-slice method for example.

🗣️ Foreword

The text of a snack bar is not visible in dark mode, because it is not resolved correctly.

👻 Brief Description

The CSS is as follows

.is-dark-theme .mat-snack-bar-container {
  color: 0, 0, 0, 0.87;
}  

instead of

.is-dark-theme .mat-snack-bar-container {
  color: rgba(0, 0, 0, 0.87)
}

🥞 Action version

angular-material-css-vars: 2.1.0

🚓 Expected behavior

The text of the snack bar is displayed in dark color (in dark mode).

Updating to Angular 13 breaks sass compilation with the following errors:

Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @use '~@angular/material'as mat;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/angular-material-css-vars/_main.scss 1:1  @import
  apps/dashboard/src/styles.scss 1:9                     root stylesheet

./apps/dashboard/src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @use '~@angular/material'as mat;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/angular-material-css-vars/_main.scss 1:1  @import
  apps/dashboard/src/styles.scss 1:9                     root stylesheet
    at tryRunOrWebpackError (/Users/max/Demonz/Projects/my-app-name/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/Users/max/Demonz/Projects/my-app-name/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4963:12)
    at __webpack_require__ (/Users/max/Demonz/Projects/my-app-name/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4920:18)
    at /Users/max/Demonz/Projects/my-app-name/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4991:20
    at symbolIterator (/Users/max/Demonz/Projects/my-app-name/node_modules/neo-async/async.js:3485:9)
    at done (/Users/max/Demonz/Projects/my-app-name/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/Users/max/Demonz/Projects/my-app-name/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/max/Demonz/Projects/my-app-name/node_modules/tapable/lib/Hook.js:18:14)
    at /Users/max/Demonz/Projects/my-app-name/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4898:43
    at symbolIterator (/Users/max/Demonz/Projects/my-app-name/node_modules/neo-async/async.js:3482:9)
    at timesSync (/Users/max/Demonz/Projects/my-app-name/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/Users/max/Demonz/Projects/my-app-name/node_modules/neo-async/async.js:3463:5)
    at /Users/max/Demonz/Projects/my-app-name/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4863:16
    at symbolIterator (/Users/max/Demonz/Projects/my-app-name/node_modules/neo-async/async.js:3485:9)
    at timesSync (/Users/max/Demonz/Projects/my-app-name/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/Users/max/Demonz/Projects/my-app-name/node_modules/neo-async/async.js:3463:5)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @use '~@angular/material'as mat;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/angular-material-css-vars/_main.scss 1:1  @import
  apps/dashboard/src/styles.scss 1:9                     root stylesheet
    at Object.<anonymous> (/Users/max/Demonz/Projects/my-app-name/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[1].use[1]!/Users/max/Demonz/Projects/my-app-name/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[1].use[2]!/Users/max/Demonz/Projects/my-app-name/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[4].rules[1].use[0]!/Users/max/Demonz/Projects/my-app-name/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].rules[1].use[1]!/Users/max/Demonz/Projects/my-app-name/apps/dashboard/src/styles.scss:1:7)
    at /Users/max/Demonz/Projects/my-app-name/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:432:11
    at Hook.eval [as call] (eval at create (/Users/max/Demonz/Projects/my-app-name/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (/Users/max/Demonz/Projects/my-app-name/node_modules/tapable/lib/Hook.js:14:14)
    at /Users/max/Demonz/Projects/my-app-name/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4965:39
    at tryRunOrWebpackError (/Users/max/Demonz/Projects/my-app-name/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/Users/max/Demonz/Projects/my-app-name/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4963:12)
    at __webpack_require__ (/Users/max/Demonz/Projects/my-app-name/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4920:18)
    at /Users/max/Demonz/Projects/my-app-name/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4991:20
    at symbolIterator (/Users/max/Demonz/Projects/my-app-name/node_modules/neo-async/async.js:3485:9)
    at done (/Users/max/Demonz/Projects/my-app-name/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/Users/max/Demonz/Projects/my-app-name/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/max/Demonz/Projects/my-app-name/node_modules/tapable/lib/Hook.js:18:14)
    at /Users/max/Demonz/Projects/my-app-name/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:4898:43
    at symbolIterator (/Users/max/Demonz/Projects/my-app-name/node_modules/neo-async/async.js:3482:9)
    at timesSync (/Users/max/Demonz/Projects/my-app-name/node_modules/neo-async/async.js:2297:7)

Generated code for /Users/max/Demonz/Projects/my-app-name/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[1].use[1]!/Users/max/Demonz/Projects/my-app-name/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[1].use[2]!/Users/max/Demonz/Projects/my-app-name/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[4].rules[1].use[0]!/Users/max/Demonz/Projects/my-app-name/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].rules[1].use[1]!/Users/max/Demonz/Projects/my-app-name/apps/dashboard/src/styles.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n  ╷\n1 │ @use '~@angular/material'as mat;\n  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n  ╵\n  node_modules/angular-material-css-vars/_main.scss 1:1  @import\n  apps/dashboard/src/styles.scss 1:9                     root stylesheet");

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! 👍