search

johannesjo / angular-material-css-vars

Little library to use css variables with @angular/material
https://johannesjo.github.io/angular-material-css-vars/
MIT License
193 stars 32 forks source link

var(--palette-primary-500-rgb) is not a color. Falling back to "dark" tone. #113

Closed Bullsized closed 1 year ago

Bullsized commented 1 year ago

I recently migrated my project from Angular 14.1.1 to Angular 15.1.0 and angular-material-css-vars from 3.0.0 to 4.0.2, yet when I serve it I get this nasty warning in the terminal:

./src/styles.scss - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
var(--palette-primary-500-rgb) is not a color. Falling back to "dark" tone.

@material\theme\_theme-color.scss 67:5                                   tone()
@material\ripple\_ripple-theme.scss 535:5                                states-opacity()
node_modules\@angular\material\list\_interactive-list-theme.scss 36:18   private-interactive-list-item-state-colors()
node_modules\@angular\material\list\_list-theme.scss 20:5                @content
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 193:5  @content
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 233:3  disable-mdc-fallback-declarations()
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 192:3  using-mdc-theme()
node_modules\@angular\material\list\_list-theme.scss 17:3                color()
node_modules\@angular\material\list\_list-theme.scss 74:7                @content
node_modules\@angular\material\core\theming\_theming.scss 402:3          private-check-duplicate-theme-styles()
node_modules\@angular\material\list\_list-theme.scss 68:3                theme()
node_modules\@angular\material\core\theming\_all-theme.scss 59:5         @content
node_modules\@angular\material\core\theming\_theming.scss 402:3          private-check-duplicate-theme-styles()
node_modules\@angular\material\core\theming\_all-theme.scss 44:3         all-component-themes()
node_modules\@angular\material\core\color\_all-color.scss 15:3           all-component-colors()
angular-material-css-vars\_main.scss 72:9                                init-mat-theme()
angular-material-css-vars\_main.scss 97:3                                init-material-css-vars()
src\styles.scss 9:1                                                      root stylesheet

my styles.scss:

@import 'angular-material-css-vars/main';

// Fonts
@import 'src/styles/roboto';
@import 'src/styles/material-icons';

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

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

html,
body {
  height: 100vh;
  width: 100vw;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Roboto, 'Helvetica Neue', sans-serif;
}

@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/grid';
@import 'bootstrap/scss/tables';
@import 'bootstrap/scss/utilities';

my package json's dependencies:

  "dependencies": {
    "@angular-builders/jest": "^15.0.0",
    "@angular/animations": "^15.1.0",
    "@angular/cdk": "^15.1.0",
    "@angular/common": "^15.1.0",
    "@angular/compiler": "^15.1.0",
    "@angular/core": "^15.1.0",
    "@angular/forms": "^15.1.0",
    "@angular/material": "^15.1.0",
    "@angular/material-luxon-adapter": "^15.1.0",
    "@angular/platform-browser": "^15.1.0",
    "@angular/platform-browser-dynamic": "^15.1.0",
    "@angular/router": "^15.1.0",
    "@ngx-translate/core": "^14.0.0",
    "@ngx-translate/http-loader": "^7.0.0",
    "angular-material-css-vars": "^4.0.2",
    "bootstrap": "^4.6.0",
    "dompurify": "^2.3.10",
    "expr-eval": "^2.0.2",
    "ibantools": "^3.3.1",
    "keycloak-angular": "^13.0.0",
    "keycloak-js": "^20.0.2",
    "libphonenumber-js": "^1.9.42",
    "lodash-es": "^4.17.21",
    "luxon": "^3.2.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },

the error also appears in the console: image

I can see that @vpetrusevici has described this error in this issue and he said that it was fixed - am I missing something?

Let me know if further info is required.

I also tried to include init-material-css-vars with both components set to true, but I have the same result.

Bullsized commented 1 year ago

Entire build log:

Build at: 2023-01-16T14:38:38.094Z - Hash: a056bea4cbf4fff3 - Time: 64382ms

./src/styles.scss - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
var(--palette-primary-500-rgb) is not a color. Falling back to "dark" tone.

@material\theme\_theme-color.scss 67:5                                   tone()
@material\ripple\_ripple-theme.scss 535:5                                states-opacity()
node_modules\@angular\material\list\_interactive-list-theme.scss 28:18   private-interactive-list-item-state-colors()
node_modules\@angular\material\list\_list-theme.scss 20:5                @content
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 193:5  @content                                    
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 233:3  disable-mdc-fallback-declarations()         
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 192:3  using-mdc-theme()                           
node_modules\@angular\material\list\_list-theme.scss 17:3                color()                                     
node_modules\@angular\material\list\_list-theme.scss 74:7                @content                                    
node_modules\@angular\material\core\theming\_theming.scss 402:3          private-check-duplicate-theme-styles()      
node_modules\@angular\material\list\_list-theme.scss 68:3                theme()                                     
node_modules\@angular\material\core\theming\_all-theme.scss 59:5         @content
node_modules\@angular\material\core\theming\_theming.scss 402:3          private-check-duplicate-theme-styles()
node_modules\@angular\material\core\theming\_all-theme.scss 44:3         all-component-themes()
angular-material-css-vars\_main.scss 57:5                                init-mat-theme()
angular-material-css-vars\_main.scss 97:3                                init-material-css-vars()
src\styles.scss 8:1                                                      root stylesheet

./src/styles.scss - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
var(--palette-primary-500-rgb) is not a color. Falling back to "dark" tone.

@material\theme\_theme-color.scss 67:5                                   tone()
@material\ripple\_ripple-theme.scss 535:5                                states-opacity()
node_modules\@angular\material\list\_interactive-list-theme.scss 28:18   private-interactive-list-item-state-colors()
node_modules\@angular\material\list\_list-theme.scss 20:5                @content
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 193:5  @content
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 233:3  disable-mdc-fallback-declarations()
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 192:3  using-mdc-theme()
node_modules\@angular\material\list\_list-theme.scss 17:3                color()
node_modules\@angular\material\list\_list-theme.scss 74:7                @content
node_modules\@angular\material\core\theming\_theming.scss 402:3          private-check-duplicate-theme-styles()
node_modules\@angular\material\list\_list-theme.scss 68:3                theme()
node_modules\@angular\material\core\theming\_all-theme.scss 59:5         @content
node_modules\@angular\material\core\theming\_theming.scss 402:3          private-check-duplicate-theme-styles()
node_modules\@angular\material\core\theming\_all-theme.scss 44:3         all-component-themes()
node_modules\@angular\material\core\color\_all-color.scss 15:3           all-component-colors()
angular-material-css-vars\_main.scss 72:9                                init-mat-theme()
angular-material-css-vars\_main.scss 97:3                                init-material-css-vars()
src\styles.scss 8:1                                                      root stylesheet

./src/styles.scss - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
var(--palette-primary-500-rgb) is not a color. Falling back to "dark" tone.

@material\theme\_theme-color.scss 67:5                                   tone()
@material\ripple\_ripple-theme.scss 535:5                                states-opacity()
node_modules\@angular\material\list\_interactive-list-theme.scss 35:18   private-interactive-list-item-state-colors()
node_modules\@angular\material\list\_list-theme.scss 20:5                @content
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 193:5  @content
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 233:3  disable-mdc-fallback-declarations()
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 192:3  using-mdc-theme()
node_modules\@angular\material\list\_list-theme.scss 17:3                color()
node_modules\@angular\material\list\_list-theme.scss 74:7                @content
node_modules\@angular\material\core\theming\_theming.scss 402:3          private-check-duplicate-theme-styles()
node_modules\@angular\material\list\_list-theme.scss 68:3                theme()
node_modules\@angular\material\core\theming\_all-theme.scss 59:5         @content
node_modules\@angular\material\core\theming\_theming.scss 402:3          private-check-duplicate-theme-styles()
node_modules\@angular\material\core\theming\_all-theme.scss 44:3         all-component-themes()
angular-material-css-vars\_main.scss 57:5                                init-mat-theme()
angular-material-css-vars\_main.scss 97:3                                init-material-css-vars()
src\styles.scss 8:1                                                      root stylesheet

./src/styles.scss - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
var(--palette-primary-500-rgb) is not a color. Falling back to "dark" tone.

@material\theme\_theme-color.scss 67:5                                   tone()
@material\ripple\_ripple-theme.scss 535:5                                states-opacity()
node_modules\@angular\material\list\_interactive-list-theme.scss 35:18   private-interactive-list-item-state-colors()
node_modules\@angular\material\list\_list-theme.scss 20:5                @content
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 193:5  @content
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 233:3  disable-mdc-fallback-declarations()
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 192:3  using-mdc-theme()
node_modules\@angular\material\list\_list-theme.scss 17:3                color()
node_modules\@angular\material\list\_list-theme.scss 74:7                @content
node_modules\@angular\material\core\theming\_theming.scss 402:3          private-check-duplicate-theme-styles()
node_modules\@angular\material\list\_list-theme.scss 68:3                theme()
node_modules\@angular\material\core\theming\_all-theme.scss 59:5         @content
node_modules\@angular\material\core\theming\_theming.scss 402:3          private-check-duplicate-theme-styles()
node_modules\@angular\material\core\theming\_all-theme.scss 44:3         all-component-themes()
node_modules\@angular\material\core\color\_all-color.scss 15:3           all-component-colors()
angular-material-css-vars\_main.scss 72:9                                init-mat-theme()
angular-material-css-vars\_main.scss 97:3                                init-material-css-vars()
src\styles.scss 8:1                                                      root stylesheet

./src/styles.scss - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
var(--palette-primary-500-rgb) is not a color. Falling back to "dark" tone.

@material\theme\_theme-color.scss 67:5                                   tone()
@material\ripple\_ripple-theme.scss 535:5                                states-opacity()
node_modules\@angular\material\list\_interactive-list-theme.scss 36:18   private-interactive-list-item-state-colors()
node_modules\@angular\material\list\_list-theme.scss 20:5                @content
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 193:5  @content
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 233:3  disable-mdc-fallback-declarations()
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 192:3  using-mdc-theme()
node_modules\@angular\material\list\_list-theme.scss 17:3                color()
node_modules\@angular\material\list\_list-theme.scss 74:7                @content
node_modules\@angular\material\core\theming\_theming.scss 402:3          private-check-duplicate-theme-styles()
node_modules\@angular\material\list\_list-theme.scss 68:3                theme()
node_modules\@angular\material\core\theming\_all-theme.scss 59:5         @content
node_modules\@angular\material\core\theming\_theming.scss 402:3          private-check-duplicate-theme-styles()
node_modules\@angular\material\core\theming\_all-theme.scss 44:3         all-component-themes()
angular-material-css-vars\_main.scss 57:5                                init-mat-theme()
angular-material-css-vars\_main.scss 97:3                                init-material-css-vars()
src\styles.scss 8:1                                                      root stylesheet

./src/styles.scss - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
var(--palette-primary-500-rgb) is not a color. Falling back to "dark" tone.

@material\theme\_theme-color.scss 67:5                                   tone()
@material\ripple\_ripple-theme.scss 535:5                                states-opacity()
node_modules\@angular\material\list\_interactive-list-theme.scss 36:18   private-interactive-list-item-state-colors()
node_modules\@angular\material\list\_list-theme.scss 20:5                @content
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 193:5  @content
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 233:3  disable-mdc-fallback-declarations()
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 192:3  using-mdc-theme()
node_modules\@angular\material\list\_list-theme.scss 17:3                color()
node_modules\@angular\material\list\_list-theme.scss 74:7                @content
node_modules\@angular\material\core\theming\_theming.scss 402:3          private-check-duplicate-theme-styles()
node_modules\@angular\material\list\_list-theme.scss 68:3                theme()
node_modules\@angular\material\core\theming\_all-theme.scss 59:5         @content
node_modules\@angular\material\core\theming\_theming.scss 402:3          private-check-duplicate-theme-styles()
node_modules\@angular\material\core\theming\_all-theme.scss 44:3         all-component-themes()
node_modules\@angular\material\core\color\_all-color.scss 15:3           all-component-colors()
angular-material-css-vars\_main.scss 72:9                                init-mat-theme()
angular-material-css-vars\_main.scss 97:3                                init-material-css-vars()
src\styles.scss 8:1                                                      root stylesheet

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Bullsized commented 1 year ago

The problem still persists in v4.2.1, even though I've followed the instructions from the npm's site step by step and configured everything as it is in the tutorial. The funny part is that it actually shows the warning 6 times on initial serve and after rebuilding (project change), it does not show the warning anymore. Any insights on this?

Pertempto commented 1 year ago

Having the same problem.

nekkon commented 1 year ago

Same here

nekkon commented 1 year ago

Seems there is an issue about this on the material repo https://github.com/angular/components/issues/25981

Bullsized commented 1 year ago

The problem persists in "angular-material-css-vars": "^4.2.2".

json-derulo commented 1 year ago

I just released version 5.0.0-next.0, which resolves the warning for me. Could you check if the warning is also gone for you?

Please note that this version contains some breaking changes, and the stable version will contain the update to Angular v16, which is expected next week.

Bullsized commented 1 year ago

I can safely confirm that with the following dependencies:

    "@angular/animations": "^15.1.1",
    "@angular/cdk": "^15.1.1",
    "@angular/common": "^15.1.1",
    "@angular/compiler": "^15.1.1",
    "@angular/core": "^15.1.1",
    "@angular/forms": "^15.1.1",
    "@angular/material": "^15.1.1",
    "@angular/material-luxon-adapter": "^15.1.1",
    "@angular/platform-browser": "^15.1.1",
    "@angular/platform-browser-dynamic": "^15.1.1",
    "@angular/router": "^15.1.1",
    "angular-material-css-vars": "^4.2.2",

Angular 15.1.1 and AngularMaterialCSSVars 4.2.2 the warnings are no longer present 🎉 🙌 . I am closing this issue and happy coding to everyone else!