components bug(theming): WARNING: var(--primary, #4bcd3e) is not a color. Falling back to "dark" tone.

bug(theming): WARNING: var(--primary, #4bcd3e) is not a color. Falling back to "dark" tone.

Open iKrishnaSahu opened this issue 1 year ago • 86 comments

Is this a regression?

[ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

We are getting error in below code -

@include mat.all-legacy-component-themes($theme);

$theme contains custom color palettes configuration which used to work properly in v14 without any warnings.

After migrating angular v14 to v15rc, we are getting following error (adding only one error as other errors are similar but with different css var color) -

[build:demothemes] WARNING: var(--primary, #4bcd3e) is not a color. Falling back to "dark" tone.
[build:demothemes]     node_modules\@material\theme\_theme-color.scss 67:5                           tone()
    node_modules\@material\theme\_theme-color.scss 86:14                          contrast-tone()
    node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 123:10      using-mdc-theme()
    node_modules\@angular\material\button\_icon-button-theme.scss 13:3            color()
    node_modules\@angular\material\button\_icon-button-theme.scss 68:7            @content
    node_modules\@angular\material\core\theming\_theming.scss 402:3               private-check-duplicate-theme-styles()
    node_modules\@angular\material\button\_icon-button-theme.scss 62:3            theme()
    node_modules\@angular\material\datepicker\_datepicker-legacy-compat.scss 7:5  legacy-button-compat-theme()
    node_modules\@angular\material\legacy-button\_button-theme.scss 168:3         color()
    node_modules\@angular\material\legacy-button\_button-theme.scss 214:7         @content
    node_modules\@angular\material\core\theming\_theming.scss 402:3               private-check-duplicate-theme-styles()
    node_modules\@angular\material\legacy-button\_button-theme.scss 208:3         theme()
    node_modules\@angular\material\legacy-core\theming\_all-theme.scss 45:5       @content
    node_modules\@angular\material\core\theming\_theming.scss 402:3               private-check-duplicate-theme-styles()
    node_modules\@angular\material\legacy-core\theming\_all-theme.scss 43:3       all-legacy-component-themes()
    libs\prebuilt-themes\default.scss 125:1                                   @use
    libs\prebuilt-themes\default-css-vars.scss 5:1                            @use
    apps\ruf-app\src\app\custom-themes\default.scss 3:1                       root stylesheet

Reproduction

Steps to reproduce: 1. 2.

Expected Behavior

Actual Behavior

Environment

Angular: 15.0.0-rc.4 CDK/Material: 15.0.0-rc.3 Browser(s): Chrome Operating System (e.g. Windows, macOS, Ubuntu): Windows

Nov 15 '22 14:11 iKrishnaSahu

Can you post what your custom palette looks like?

Nov 17 '22 08:11 crisbeto

I'm getting error var(--theme-primary-500) is not a color. It seems like we can't use CSS variables anymore with Material themes?

Dynamic theme is inspired by https://stackblitz.com/edit/angular-material-theming-playground?file=src%2Fstyles%2F_var.scss

$dynamic-theme-primary: (
  50 : var(--theme-primary-50),
  100 : var(--theme-primary-100),
  200 : var(--theme-primary-200),
  300 : var(--theme-primary-300),
  400 : var(--theme-primary-400),
  500 : var(--theme-primary-500),
  600 : var(--theme-primary-600),
  700 : var(--theme-primary-700),
  800 : var(--theme-primary-800),
  900 : var(--theme-primary-900),
  A100 : var(--theme-primary-A100),
  A200 : var(--theme-primary-A200),
  A400 : var(--theme-primary-A400),
  A700 : var(--theme-primary-A700),
  contrast: (
    50: var(--theme-primary-contrast-50),
    100: var(--theme-primary-contrast-100),
    200: var(--theme-primary-contrast-200),
    300: var(--theme-primary-contrast-300),
    400: var(--theme-primary-contrast-400),
    500: var(--theme-primary-contrast-500),
    600: var(--theme-primary-contrast-600),
    700: var(--theme-primary-contrast-700),
    800: var(--theme-primary-contrast-800),
    900: var(--theme-primary-contrast-900),
    A100: var(--theme-primary-contrast-A100),
    A200: var(--theme-primary-contrast-A200),
    A400: var(--theme-primary-contrast-A400),
    A700: var(--theme-primary-contrast-A700),
  )
);

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

@material/theme/_theme-color.scss 67:5                                     
tone()
@material/theme/_theme-color.scss 86:14                                    
contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10   using-mdc-theme()
node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 26:3  color()
node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 53:7  @content
node_modules/@angular/material/core/theming/_theming.scss 402:3            
private-check-duplicate-theme-styles()
node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 47:3  theme()
node_modules/@angular/material/core/theming/_all-theme.scss 47: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()
@import
src/scss/styles.scs

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

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10  using-mdc-theme()
node_modules/@angular/material/card/_card-theme.scss 16:3                 color()
node_modules/@angular/material/card/_card-theme.scss 70:7                 @content
node_modules/@angular/material/core/theming/_theming.scss 402:3           private-check-duplicate-theme-styles()
node_modules/@angular/material/card/_card-theme.scss 64:3                 theme()
node_modules/@angular/material/core/theming/_all-theme.scss 46: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()
src/scss/styles.scss                                                      root stylesheet

Nov 17 '22 09:11 anisabboud

Progress-bar tries to do: track-color: color.adjust(mdc-theme-color.prop-value($color), $alpha: -0.75), which produces error var(--theme-primary-500) is not a color (since CSS variables are not static colors).

./src/scss/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: var(--theme-primary-500) is not a color.
   ╷
16 │     track-color: color.adjust(mdc-theme-color.prop-value($color), $alpha: -0.75),
   │                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 16:18  -palette-styles()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 28:7   @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 176:5     @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 216:3     disable-mdc-fallback-declarations()
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 175:3     using-mdc-theme()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 26:3   color()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 53:7   @content
  node_modules/@angular/material/core/theming/_theming.scss 402:3          
   private-check-duplicate-theme-styles()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 47:3   theme()
  node_modules/@angular/material/core/theming/_all-theme.scss 47: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()
  src/scss/my-theme.scss 88:1                                                 @import
  src/scss/styles.scss 2:9                                                    root stylesheet

./src/scss/styles.scss?ngGlobalStyle - 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: $color: var(--theme-primary-500) is not a color.
   ╷
16 │     track-color: color.adjust(mdc-theme-color.prop-value($color), $alpha: -0.75),
   │                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 16:18  -palette-styles()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 28:7   @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 176:5     @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 216:3     disable-mdc-fallback-declarations()
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 175:3     using-mdc-theme()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 26:3   color()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 53:7   @content
  node_modules/@angular/material/core/theming/_theming.scss 402:3             private-check-duplicate-theme-styles()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 47:3   theme()
  node_modules/@angular/material/core/theming/_all-theme.scss 47: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()
  src/scss/my-theme.scss 88:1                                                 @import
  src/scss/styles.scss 2:9                                                    root stylesheet

Nov 17 '22 09:11 anisabboud

If I temporarily replace the var(--theme-primary-500) with a static color such as #ff0000, the app compiles, but that breaks the dynamic theming feature, and a warning remains in the console.

Console warning: Deprecation $weight: Passing a number without unit % (60) is deprecated.

./src/scss/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/scss/styles.scss?ngGlobalStyle - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
Deprecation $weight: Passing a number without unit % (60) is deprecated.   

To preserve current behavior: $weight * 1%

More info: https://sass-lang.com/d/function-units

@material/slider/_slider-theme.scss 77:5                                   
 @use
node_modules/@angular/material/slider/_slider-theme.scss 3:1               
 @use
node_modules/@angular/material/core/density/private/_all-density.scss 25:1  @forward
@angular/_index.scss 18:1                                                  
 @use
src/scss/my-theme.scss 3:1                                            
 @import
src/scss/styles.scss 2:9                                                   
 root stylesheet

Update: This warning is now gone (in 15.0.1).

So basically only the var(--theme-primary-500) is causing an error in progress-bar... (Using CSS variables for the other values 50-900 doesn't cause any issues.)

Nov 17 '22 09:11 anisabboud

@crisbeto

Below is my color palette -

(color: (primary: (50: var(--primary-50, #e9f9e8), 100: var(--primary-100, #c9f0c5), 200: var(--primary-200, #a5e69f), 300: var(--primary-300, #81dc78), 400: var(--primary-400, #66d55b), 500: 
var(--primary, #4bcd3e), 600: var(--primary-600, #41b236), 700: var(--primary-700, #308628), 800: var(--primary-800, #225c1c), 900: var(--primary-900, #1a4816), A100: var(--primary-A100, #ff5bb4), A200: var(--primary-A200, #ff289d), A400: var(--primary-A400, #db0077), A700: var(--primary-A700, #a8005b), contrast: (50: var(--primary-50-contrast, #012834), 100: var(--primary-100-contrast, #012834), 200: var(--primary-200-contrast, #012834), 300: var(--primary-300-contrast, #012834), 400: var(--primary-400-contrast, #012834), 500: var(--primary-contrast, #012834), 600: var(--primary-600-contrast, #ffffff), 700: var(--primary-700-contrast, #ffffff), 800: var(--primary-800-contrast, #ffffff), 900: var(--primary-900-contrast, #ffffff), A100: var(--primary-A100-contrast, #012834), A200: var(--primary-A200-contrast, #012834), A400: var(--primary-A400-contrast, #ffffff), A700: var(--primary-A700-contrast, #ffffff)), rgba: (500: rgba(var(--primary-rgb, 75, 205, 62), 1), default: rgba(var(--primary-rgb, 75, 205, 62), 1)), default: var(--primary, #4bcd3e), lighter: var(--primary-100, #c9f0c5), darker: var(--primary-700, #308628), text: var(--primary, #4bcd3e), default-contrast: var(--primary-contrast, #012834), lighter-contrast: var(--primary-100-contrast, #012834), darker-contrast: var(--primary-700-contrast, #ffffff), "50-contrast": var(--primary-50-contrast, #012834), "100-contrast": var(--primary-100-contrast, #012834), "200-contrast": var(--primary-200-contrast, #012834), "300-contrast": var(--primary-300-contrast, #012834), "400-contrast": var(--primary-400-contrast, #012834), "500-contrast": var(--primary-contrast, #012834), "600-contrast": var(--primary-600-contrast, #ffffff), "700-contrast": var(--primary-700-contrast, #ffffff), "800-contrast": var(--primary-800-contrast, #ffffff), "900-contrast": var(--primary-900-contrast, #ffffff), "A100-contrast": var(--primary-A100-contrast, #012834), "A200-contrast": var(--primary-A200-contrast, #012834), "A400-contrast": var(--primary-A400-contrast, #ffffff), "A700-contrast": var(--primary-A700-contrast, #ffffff), "contrast-contrast": null, "rgba-contrast": null), accent: (50: var(--accent-50, #e0f3ee), 100: var(--accent-100, #b3e0d6), 200: var(--accent-200, #80cbba), 300: var(--accent-300, #4db69e), 400: var(--accent-400, #26a78a), 500: var(--accent, #009775), 600: var(--accent-600, 
#008366), 700: var(--accent-700, #006a52), 800: var(--accent-800, #00523f), 900: var(--accent-900, #003529), A100: var(--accent-A100, #ff4ad8), A200: var(--accent-A200, #ff17cd), A400: var(--accent-A400, #ca009e), A700: var(--accent-A700, #970076), contrast: (50: var(--accent-50-contrast, #012834), 100: var(--accent-100-contrast, #012834), 200: var(--accent-200-contrast, #012834), 300: var(--accent-300-contrast, #012834), 400: var(--accent-400-contrast, #ffffff), 500: var(--accent-contrast, #ffffff), 600: var(--accent-600-contrast, #ffffff), 700: var(--accent-700-contrast, #ffffff), 800: var(--accent-800-contrast, #ffffff), 900: var(--accent-900-contrast, #ffffff), A100: var(--accent-A100-contrast, #012834), A200: var(--accent-A200-contrast, #012834), A400: var(--accent-A400-contrast, #ffffff), A700: var(--accent-A700-contrast, #ffffff)), rgba: (500: rgba(var(--accent-rgb, 0, 151, 117), 1), default: rgba(var(--accent-rgb, 0, 151, 117), 1)), default: var(--accent, #009775), lighter: var(--accent-100, #b3e0d6), darker: var(--accent-700, #006a52), text: var(--accent, #009775), default-contrast: var(--accent-contrast, #ffffff), lighter-contrast: var(--accent-100-contrast, #012834), darker-contrast: var(--accent-700-contrast, #ffffff), 
"50-contrast": var(--accent-50-contrast, #012834), "100-contrast": var(--accent-100-contrast, #012834), "200-contrast": var(--accent-200-contrast, #012834), "300-contrast": var(--accent-300-contrast, #012834), "400-contrast": var(--accent-400-contrast, #ffffff), "500-contrast": var(--accent-contrast, #ffffff), "600-contrast": var(--accent-600-contrast, #ffffff), "700-contrast": var(--accent-700-contrast, #ffffff), "800-contrast": var(--accent-800-contrast, #ffffff), "900-contrast": var(--accent-900-contrast, #ffffff), "A100-contrast": var(--accent-A100-contrast, #012834), "A200-contrast": var(--accent-A200-contrast, #012834), "A400-contrast": var(--accent-A400-contrast, #ffffff), "A700-contrast": var(--accent-A700-contrast, #ffffff), "contrast-contrast": null, "rgba-contrast": null), emphasis: (50: var(--emphasis-50, #fff9e0), 100: var(--emphasis-100, #fff0b3), 200: var(--emphasis-200, #ffe680), 300: var(--emphasis-300, #ffdc4d), 400: var(--emphasis-400, #ffd526), 500: var(--emphasis, #ffcd00), 600: var(--emphasis-600, #deb200), 700: var(--emphasis-700, #b39000), 800: var(--emphasis-800, #8a6f00), 900: var(--emphasis-900, #594800), A100: var(--emphasis-A100, #f6ff59), A200: var(--emphasis-A200, #f4ff26), A400: var(--emphasis-A400, 
#cdd900), A700: var(--emphasis-A700, #9da600), contrast: (50: var(--emphasis-50-contrast, #012834), 100: var(--emphasis-100-contrast, #012834), 200: var(--emphasis-200-contrast, #012834), 300: var(--emphasis-300-contrast, #012834), 400: var(--emphasis-400-contrast, #012834), 500: var(--emphasis-contrast, #ffffff), 600: var(--emphasis-600-contrast, #ffffff), 700: var(--emphasis-700-contrast, #ffffff), 800: var(--emphasis-800-contrast, #ffffff), 900: var(--emphasis-900-contrast, #ffffff), A100: var(--emphasis-A100-contrast, #012834), A200: var(--emphasis-A200-contrast, #012834), A400: var(--emphasis-A400-contrast, #ffffff), A700: var(--emphasis-A700-contrast, #ffffff)), rgba: (500: rgba(var(--emphasis-rgb, 255, 205, 0), 1), default: rgba(var(--emphasis-rgb, 255, 205, 0), 1)), default: var(--emphasis, #ffcd00), lighter: var(--emphasis-100, #fff0b3), darker: var(--emphasis-700, #b39000), text: var(--emphasis, #ffcd00), default-contrast: var(--emphasis-contrast, #ffffff), lighter-contrast: var(--emphasis-100-contrast, #012834), darker-contrast: var(--emphasis-700-contrast, #ffffff), "50-contrast": var(--emphasis-50-contrast, #012834), "100-contrast": var(--emphasis-100-contrast, #012834), "200-contrast": var(--emphasis-200-contrast, #012834), "300-contrast": var(--emphasis-300-contrast, #012834), "400-contrast": var(--emphasis-400-contrast, #012834), "500-contrast": var(--emphasis-contrast, #ffffff), "600-contrast": var(--emphasis-600-contrast, #ffffff), "700-contrast": var(--emphasis-700-contrast, #ffffff), 
"800-contrast": var(--emphasis-800-contrast, #ffffff), "900-contrast": var(--emphasis-900-contrast, #ffffff), "A100-contrast": var(--emphasis-A100-contrast, #012834), "A200-contrast": var(--emphasis-A200-contrast, #012834), "A400-contrast": var(--emphasis-A400-contrast, #ffffff), "A700-contrast": var(--emphasis-A700-contrast, #ffffff), "contrast-contrast": null, "rgba-contrast": null), warn: (50: var(--warn-50, #fff1ec), 100: var(--warn-100, #feddd0), 200: var(--warn-200, #fec6b1), 300: var(--warn-300, #feaf91), 400: var(--warn-400, #fd9e7a), 500: var(--warn, #fd8d62), 600: var(--warn-600, #dc7b55), 700: var(--warn-700, #ad6143), 800: var(--warn-800, #713f2c), 900: var(--warn-900, #593122), A100: var(--warn-A100, #68fff2), A200: var(--warn-A200, #35ffed), A400: var(--warn-A400, #00e8d3), A700: var(--warn-A700, #00b5a5), contrast: (50: var(--warn-50-contrast, #012834), 100: var(--warn-100-contrast, #012834), 200: var(--warn-200-contrast, #012834), 300: var(--warn-300-contrast, #012834), 400: var(--warn-400-contrast, #012834), 500: var(--warn-contrast, #012834), 600: var(--warn-600-contrast, #012834), 700: var(--warn-700-contrast, #ffffff), 800: var(--warn-800-contrast, #ffffff), 900: var(--warn-900-contrast, #ffffff), A100: var(--warn-A100-contrast, #012834), A200: var(--warn-A200-contrast, #012834), A400: var(--warn-A400-contrast, #ffffff), A700: var(--warn-A700-contrast, #ffffff)), rgba: (500: rgba(var(--warn-rgb, 253, 141, 98), 1), default: rgba(var(--warn-rgb, 253, 141, 98), 1)), default: var(--warn, 
#fd8d62), lighter: var(--warn-100, #feddd0), darker: var(--warn-700, #ad6143), text: var(--warn, #fd8d62), default-contrast: var(--warn-contrast, #012834), lighter-contrast: var(--warn-100-contrast, #012834), darker-contrast: var(--warn-700-contrast, #ffffff), "50-contrast": var(--warn-50-contrast, #012834), "100-contrast": var(--warn-100-contrast, #012834), "200-contrast": var(--warn-200-contrast, #012834), "300-contrast": var(--warn-300-contrast, #012834), "400-contrast": var(--warn-400-contrast, #012834), "500-contrast": var(--warn-contrast, #012834), "600-contrast": var(--warn-600-contrast, #012834), "700-contrast": var(--warn-700-contrast, #ffffff), "800-contrast": var(--warn-800-contrast, #ffffff), "900-contrast": var(--warn-900-contrast, #ffffff), "A100-contrast": var(--warn-A100-contrast, #012834), "A200-contrast": var(--warn-A200-contrast, #012834), "A400-contrast": var(--warn-A400-contrast, #ffffff), "A700-contrast": var(--warn-A700-contrast, #ffffff), "contrast-contrast": null, "rgba-contrast": null), is-dark: false, foreground: (chart-label: var(--ruf-foreground-chart-label, #b6b6b6), input-border: var(--ruf-foreground-input-border, #dfdfdf), soft-link: var(--ruf-foreground-soft-link, dimgray), link-visited: var(--ruf-foreground-link-visited, #3888bc), border: var(--ruf-foreground-border, #dfdfdf), input-value: var(--ruf-foreground-input-value, #012834), shadow: var(--ruf-foreground-shadow, rgba(0, 0, 0, 0.25)), subtle-divider: var(--ruf-foreground-subtle-divider, lightgray), link: var(--ruf-foreground-link, #285bc5), slider-off-active: var(--ruf-foreground-slider-off-active, rgba(0, 0, 0, 0.38)), slider-off: var(--ruf-foreground-slider-off, rgba(0, 0, 0, 0.38)), slider-min: var(--ruf-foreground-slider-min, rgba(0, 0, 0, 0.87)), darker-text: var(--ruf-foreground-darker-text, #012834), lighter-text: var(--ruf-foreground-lighter-text, white), text: var(--ruf-foreground-text, #012834), icons: var(--ruf-foreground-icons, #01232d), icon: var(--ruf-foreground-icon, #01232d), secondary-text: var(--ruf-foreground-secondary-text, #012834), hint-text: var(--ruf-foreground-hint-text, #012834), disabled-text: var(--ruf-foreground-disabled-text, #b3bfc2), disabled-button: var(--ruf-foreground-disabled-button, #b3bfc2), disabled: var(--ruf-foreground-disabled, #b3bfc2), dividers: var(--ruf-foreground-dividers, #b4b4b4), divider: var(--ruf-foreground-divider, #c1c1c1), base: var(--ruf-foreground-base, black), rgba: (base: rgba(var(--ruf-foreground-base-rgb, 0, 
0, 0), 1), text: rgba(var(--ruf-foreground-text-rgb, 1, 40, 52), 1), link: rgba(var(--ruf-foreground-link-rgb, 40, 91, 197), 1))), background: (highlight: var(--ruf-background-highlight, rgba(40, 91, 197, 0.12)), selected-row: var(--ruf-background-selected-row, rgba(0, 0, 0, 0.08)), hover-row: var(--ruf-background-hover-row, lightgray), scrollbar-thumb: var(--ruf-background-scrollbar-thumb, #a7a7a7), scrollbar-track: var(--ruf-background-scrollbar-track, #f4f4f4), contrast: var(--ruf-background-contrast, #012834), info: var(--ruf-background-info, #3bcff0), success: var(--ruf-background-success, #4bcd3e), error: var(--ruf-background-error, #ff1f3e), secondary: var(--ruf-background-secondary, #b3bfc2), tooltip: var(--ruf-background-tooltip, #5a5a5a), disabled-list-option: var(--ruf-background-disabled-list-option, #b3b3b3), 
unselected-chip: var(--ruf-background-unselected-chip, #949494), disabled-button-toggle: var(--ruf-background-disabled-button-toggle, #e1e5e7), selected-button-toggle: var(--ruf-background-selected-button-toggle, #b3bfc2), selected-disabled-button: var(--ruf-background-selected-disabled-button, #7d7d7d), selected-button: var(--ruf-background-selected-button, rgba(0, 0, 0, 0.53)), focused-button: var(--ruf-background-focused-button, rgba(0, 0, 0, 0.06)), raised-button: var(--ruf-background-raised-button, white), disabled-button: var(--ruf-background-disabled-button, rgba(0, 0, 0, 0.15)), status-bar: var(--ruf-background-status-bar, #dddddd), sidemenu-focus: var(--ruf-background-sidemenu-focus, #e5e5e5), page-header: var(--ruf-background-page-header, whitesmoke), icon: var(--ruf-background-icon, rgba(0, 0, 0, 0.3)), side-megamenu: var(--ruf-background-side-megamenu, #dddddd), header-row: var(--ruf-background-header-row, #e5e5e5), alternate-row: var(--ruf-background-alternate-row, #f4f4f4), row: var(--ruf-background-row, white), nav-bar: var(--ruf-background-nav-bar, white), footer: var(--ruf-background-footer, white), disabled: var(--ruf-background-disabled, #e1e5e7), card-canvas: var(--ruf-background-card-canvas, #e5e5e5), card: var(--ruf-background-card, white), backdrop-overlay: var(--ruf-background-backdrop-overlay, rgba(0, 0, 0, 0.2)), contrast-overlay-2: var(--ruf-background-contrast-overlay-2, #015b7e), contrast-overlay-1: var(--ruf-background-contrast-overlay-1, rgba(0, 0, 0, 0.3)), dialog: var(--ruf-background-dialog, white), selected-state: var(--ruf-background-selected-state, rgba(0, 0, 0, 0.08)), halo-dark: var(--ruf-background-halo-dark, #34535d), halo: var(--ruf-background-halo, rgba(1, 40, 52, 0.12)), hover-dark: var(--ruf-background-hover-dark, rgba(0, 0, 0, 0.16)), hover: var(--ruf-background-hover, rgba(0, 0, 0, 0.04)), background: var(--ruf-background-background, #f4f4f4), app-canvas: var(--ruf-background-app-canvas, #f4f4f4), app-bar: var(--ruf-background-app-bar, white), side: var(--ruf-background-side, lightgray), panel: var(--ruf-background-panel, white), base: var(--ruf-background-base, white), rgba: (success: rgba(var(--ruf-background-success-rgb, 75, 205, 62), 1), error: rgba(var(--ruf-background-error-rgb, 255, 31, 62), 1), info: rgba(var(--ruf-background-info-rgb, 59, 207, 240), 1), backdrop-overlay: rgba(var(--ruf-background-backdrop-overlay-rgb, 0, 0, 0), 0.2), contrast: rgba(var(--ruf-background-contrast-rgb, 1, 40, 52), 1))), success: (50: var(--success-50, #e9f9e8), 100: var(--success-100, #c9f0c5), 200: var(--success-200, #a5e69f), 300: var(--success-300, #81dc78), 400: var(--success-400, #66d55b), 500: var(--success, #4bcd3e), 600: var(--success-600, #41b236), 700: var(--success-700, #308628), 800: var(--success-800, #225c1c), 900: var(--success-900, #1a4816), A100: var(--success-A100, #ff5bb4), A200: var(--success-A200, #ff289d), A400: var(--success-A400, #db0077), A700: var(--success-A700, #a8005b), contrast: (50: var(--success-50-contrast, #012834), 100: var(--success-100-contrast, #012834), 200: var(--success-200-contrast, #012834), 300: var(--success-300-contrast, #012834), 400: var(--success-400-contrast, #012834), 500: var(--success-contrast, #012834), 600: var(--success-600-contrast, #ffffff), 700: var(--success-700-contrast, #ffffff), 800: var(--success-800-contrast, #ffffff), 900: var(--success-900-contrast, #ffffff), A100: var(--success-A100-contrast, #012834), A200: var(--success-A200-contrast, #012834), A400: var(--success-A400-contrast, #ffffff), A700: var(--success-A700-contrast, #ffffff)), rgba: (500: rgba(var(--success-rgb, 75, 205, 62), 1), default: rgba(var(--success-rgb, 75, 205, 62), 1)), default: var(--success, #4bcd3e), lighter: 
var(--success-100, #c9f0c5), darker: var(--success-700, #308628), text: var(--success, #4bcd3e), default-contrast: var(--success-contrast, 
#012834), lighter-contrast: var(--success-100-contrast, #012834), darker-contrast: var(--success-700-contrast, #ffffff), "50-contrast": var(--success-50-contrast, #012834), "100-contrast": var(--success-100-contrast, #012834), "200-contrast": var(--success-200-contrast, #012834), "300-contrast": var(--success-300-contrast, #012834), "400-contrast": var(--success-400-contrast, #012834), "500-contrast": var(--success-contrast, #012834), "600-contrast": var(--success-600-contrast, #ffffff), "700-contrast": var(--success-700-contrast, #ffffff), "800-contrast": var(--success-800-contrast, #ffffff), "900-contrast": var(--success-900-contrast, #ffffff), "A100-contrast": var(--success-A100-contrast, #012834), "A200-contrast": var(--success-A200-contrast, #012834), "A400-contrast": var(--success-A400-contrast, #ffffff), "A700-contrast": var(--success-A700-contrast, #ffffff), "contrast-contrast": null, "rgba-contrast": null), error: (50: var(--error-50, #ffe4e8), 100: 
var(--error-100, #ffbcc5), 200: var(--error-200, #ff8f9f), 300: var(--error-300, #ff6278), 400: var(--error-400, #ff415b), 500: var(--error, #ff1f3e), 600: var(--error-600, #de1b36), 700: var(--error-700, #b3162b), 800: var(--error-800, #720e1c), 900: var(--error-900, #590b16), A100: var(--error-A100, #c45eff), A200: var(--error-A200, #b22bff), A400: var(--error-A400, #8d00de), A700: var(--error-A700, #6d00ab), contrast: (50: var(--error-50-contrast, #012834), 100: var(--error-100-contrast, #012834), 200: var(--error-200-contrast, #012834), 300: var(--error-300-contrast, #012834), 400: var(--error-400-contrast, #012834), 500: var(--error-contrast, #012834), 600: var(--error-600-contrast, #ffffff), 700: var(--error-700-contrast, #ffffff), 800: var(--error-800-contrast, #ffffff), 900: var(--error-900-contrast, #ffffff), A100: var(--error-A100-contrast, #012834), A200: var(--error-A200-contrast, #012834), A400: var(--error-A400-contrast, #ffffff), A700: var(--error-A700-contrast, #ffffff)), rgba: (500: rgba(var(--error-rgb, 255, 31, 62), 1), default: rgba(var(--error-rgb, 255, 31, 62), 1)), default: var(--error, #ff1f3e), lighter: var(--error-100, #ffbcc5), darker: var(--error-700, #b3162b), text: var(--error, #ff1f3e), default-contrast: var(--error-contrast, #012834), lighter-contrast: var(--error-100-contrast, #012834), darker-contrast: var(--error-700-contrast, #ffffff), "50-contrast": var(--error-50-contrast, #012834), "100-contrast": var(--error-100-contrast, #012834), "200-contrast": var(--error-200-contrast, #012834), "300-contrast": var(--error-300-contrast, #012834), "400-contrast": var(--error-400-contrast, #012834), "500-contrast": 
var(--error-contrast, #012834), "600-contrast": var(--error-600-contrast, #ffffff), "700-contrast": var(--error-700-contrast, #ffffff), "800-contrast": var(--error-800-contrast, #ffffff), "900-contrast": var(--error-900-contrast, #ffffff), "A100-contrast": var(--error-A100-contrast, #012834), "A200-contrast": var(--error-A200-contrast, #012834), "A400-contrast": var(--error-A400-contrast, #ffffff), "A700-contrast": var(--error-A700-contrast, #ffffff), "contrast-contrast": null, "rgba-contrast": null), info: (50: var(--info-50, #e7f9fd), 100: var(--info-100, #c4f1fb), 200: var(--info-200, #9de7f8), 300: var(--info-300, #76ddf5), 400: var(--info-400, #58d6f2), 500: var(--info, #3bcff0), 600: var(--info-600, #33b4d1), 700: var(--info-700, #247f94), 800: var(--info-800, #1a5c6b), 900: var(--info-900, #154854), A100: var(--info-A100, #dcff60), A200: var(--info-A200, #d0ff2d), A400: var(--info-A400, #aee000), A700: var(--info-A700, #86ad00), contrast: (50: var(--info-50-contrast, #012834), 100: var(--info-100-contrast, #012834), 200: var(--info-200-contrast, #012834), 300: var(--info-300-contrast, #012834), 400: var(--info-400-contrast, #012834), 500: var(--info-contrast, #012834), 600: var(--info-600-contrast, #012834), 700: var(--info-700-contrast, #ffffff), 800: var(--info-800-contrast, #ffffff), 900: var(--info-900-contrast, #ffffff), A100: var(--info-A100-contrast, #012834), A200: var(--info-A200-contrast, #012834), A400: var(--info-A400-contrast, #ffffff), A700: var(--info-A700-contrast, #ffffff)), rgba: (500: rgba(var(--info-rgb, 59, 207, 240), 1), default: rgba(var(--info-rgb, 59, 207, 240), 1)), default: var(--info, #3bcff0), lighter: var(--info-100, #c4f1fb), darker: var(--info-700, #247f94), text: var(--info, #3bcff0), default-contrast: var(--info-contrast, #012834), lighter-contrast: var(--info-100-contrast, #012834), darker-contrast: var(--info-700-contrast, #ffffff), "50-contrast": var(--info-50-contrast, #012834), "100-contrast": var(--info-100-contrast, #012834), "200-contrast": var(--info-200-contrast, #012834), "300-contrast": var(--info-300-contrast, #012834), "400-contrast": var(--info-400-contrast, #012834), "500-contrast": var(--info-contrast, #012834), "600-contrast": 
var(--info-600-contrast, #012834), "700-contrast": var(--info-700-contrast, #ffffff), "800-contrast": var(--info-800-contrast, #ffffff), "900-contrast": var(--info-900-contrast, #ffffff), "A100-contrast": var(--info-A100-contrast, #012834), "A200-contrast": var(--info-A200-contrast, #012834), "A400-contrast": var(--info-A400-contrast, #ffffff), "A700-contrast": var(--info-A700-contrast, #ffffff), "contrast-contrast": null, "rgba-contrast": null)), density: 0, primary: (50: var(--primary-50, #e9f9e8), 100: var(--primary-100, #c9f0c5), 200: var(--primary-200, #a5e69f), 300: var(--primary-300, #81dc78), 400: var(--primary-400, #66d55b), 500: var(--primary, #4bcd3e), 600: var(--primary-600, #41b236), 700: var(--primary-700, #308628), 800: var(--primary-800, #225c1c), 900: var(--primary-900, #1a4816), A100: var(--primary-A100, 
#ff5bb4), A200: var(--primary-A200, #ff289d), A400: var(--primary-A400, #db0077), A700: var(--primary-A700, #a8005b), contrast: (50: var(--primary-50-contrast, #012834), 100: var(--primary-100-contrast, #012834), 200: var(--primary-200-contrast, #012834), 300: var(--primary-300-contrast, #012834), 400: var(--primary-400-contrast, #012834), 500: var(--primary-contrast, #012834), 600: var(--primary-600-contrast, #ffffff), 700: var(--primary-700-contrast, #ffffff), 800: var(--primary-800-contrast, #ffffff), 900: var(--primary-900-contrast, #ffffff), A100: var(--primary-A100-contrast, #012834), A200: var(--primary-A200-contrast, #012834), A400: var(--primary-A400-contrast, #ffffff), A700: var(--primary-A700-contrast, #ffffff)), rgba: (500: rgba(var(--primary-rgb, 75, 205, 62), 1), default: rgba(var(--primary-rgb, 75, 205, 62), 1)), default: var(--primary, #4bcd3e), lighter: var(--primary-100, #c9f0c5), darker: var(--primary-700, #308628), text: var(--primary, #4bcd3e), default-contrast: var(--primary-contrast, #012834), lighter-contrast: var(--primary-100-contrast, #012834), darker-contrast: var(--primary-700-contrast, #ffffff), "50-contrast": var(--primary-50-contrast, #012834), "100-contrast": var(--primary-100-contrast, #012834), "200-contrast": var(--primary-200-contrast, #012834), "300-contrast": var(--primary-300-contrast, #012834), "400-contrast": var(--primary-400-contrast, #012834), "500-contrast": var(--primary-contrast, #012834), "600-contrast": var(--primary-600-contrast, #ffffff), "700-contrast": var(--primary-700-contrast, #ffffff), "800-contrast": var(--primary-800-contrast, #ffffff), "900-contrast": var(--primary-900-contrast, #ffffff), "A100-contrast": var(--primary-A100-contrast, #012834), "A200-contrast": var(--primary-A200-contrast, #012834), "A400-contrast": var(--primary-A400-contrast, #ffffff), "A700-contrast": var(--primary-A700-contrast, #ffffff), "contrast-contrast": null, "rgba-contrast": null), accent: (50: var(--accent-50, #e0f3ee), 100: var(--accent-100, #b3e0d6), 200: var(--accent-200, #80cbba), 300: var(--accent-300, #4db69e), 400: var(--accent-400, #26a78a), 500: var(--accent, #009775), 600: var(--accent-600, #008366), 700: var(--accent-700, #006a52), 800: 
var(--accent-800, #00523f), 900: var(--accent-900, #003529), A100: var(--accent-A100, #ff4ad8), A200: var(--accent-A200, #ff17cd), A400: var(--accent-A400, #ca009e), A700: var(--accent-A700, #970076), contrast: (50: var(--accent-50-contrast, #012834), 100: var(--accent-100-contrast, #012834), 200: var(--accent-200-contrast, #012834), 300: var(--accent-300-contrast, #012834), 400: var(--accent-400-contrast, #ffffff), 500: var(--accent-contrast, #ffffff), 600: var(--accent-600-contrast, #ffffff), 700: var(--accent-700-contrast, #ffffff), 800: var(--accent-800-contrast, #ffffff), 900: var(--accent-900-contrast, #ffffff), A100: var(--accent-A100-contrast, #012834), A200: var(--accent-A200-contrast, #012834), A400: var(--accent-A400-contrast, #ffffff), A700: var(--accent-A700-contrast, #ffffff)), rgba: (500: rgba(var(--accent-rgb, 0, 151, 117), 1), default: rgba(var(--accent-rgb, 0, 151, 117), 1)), default: var(--accent, #009775), lighter: var(--accent-100, #b3e0d6), darker: var(--accent-700, #006a52), text: var(--accent, #009775), default-contrast: var(--accent-contrast, #ffffff), lighter-contrast: 
var(--accent-100-contrast, #012834), darker-contrast: var(--accent-700-contrast, #ffffff), "50-contrast": var(--accent-50-contrast, #012834), "100-contrast": var(--accent-100-contrast, #012834), "200-contrast": var(--accent-200-contrast, #012834), "300-contrast": var(--accent-300-contrast, #012834), "400-contrast": var(--accent-400-contrast, #ffffff), "500-contrast": var(--accent-contrast, #ffffff), "600-contrast": var(--accent-600-contrast, #ffffff), "700-contrast": var(--accent-700-contrast, #ffffff), "800-contrast": var(--accent-800-contrast, #ffffff), "900-contrast": var(--accent-900-contrast, #ffffff), "A100-contrast": var(--accent-A100-contrast, #012834), "A200-contrast": var(--accent-A200-contrast, #012834), "A400-contrast": var(--accent-A400-contrast, #ffffff), "A700-contrast": var(--accent-A700-contrast, #ffffff), "contrast-contrast": null, "rgba-contrast": null), emphasis: (50: var(--emphasis-50, #fff9e0), 100: var(--emphasis-100, #fff0b3), 200: var(--emphasis-200, #ffe680), 300: var(--emphasis-300, #ffdc4d), 400: var(--emphasis-400, #ffd526), 500: var(--emphasis, #ffcd00), 600: var(--emphasis-600, #deb200), 700: var(--emphasis-700, #b39000), 800: var(--emphasis-800, #8a6f00), 900: var(--emphasis-900, #594800), A100: var(--emphasis-A100, #f6ff59), A200: var(--emphasis-A200, #f4ff26), A400: var(--emphasis-A400, #cdd900), A700: var(--emphasis-A700, #9da600), contrast: (50: var(--emphasis-50-contrast, #012834), 100: var(--emphasis-100-contrast, #012834), 200: var(--emphasis-200-contrast, #012834), 300: var(--emphasis-300-contrast, #012834), 400: var(--emphasis-400-contrast, #012834), 500: var(--emphasis-contrast, #ffffff), 600: var(--emphasis-600-contrast, #ffffff), 700: var(--emphasis-700-contrast, #ffffff), 800: var(--emphasis-800-contrast, #ffffff), 900: var(--emphasis-900-contrast, #ffffff), A100: var(--emphasis-A100-contrast, #012834), A200: var(--emphasis-A200-contrast, #012834), A400: var(--emphasis-A400-contrast, #ffffff), A700: var(--emphasis-A700-contrast, #ffffff)), rgba: (500: rgba(var(--emphasis-rgb, 255, 205, 0), 1), default: rgba(var(--emphasis-rgb, 255, 205, 0), 1)), default: var(--emphasis, #ffcd00), lighter: var(--emphasis-100, #fff0b3), darker: var(--emphasis-700, #b39000), text: var(--emphasis, #ffcd00), default-contrast: var(--emphasis-contrast, #ffffff), lighter-contrast: var(--emphasis-100-contrast, #012834), darker-contrast: var(--emphasis-700-contrast, #ffffff), "50-contrast": var(--emphasis-50-contrast, #012834), "100-contrast": var(--emphasis-100-contrast, #012834), "200-contrast": var(--emphasis-200-contrast, #012834), "300-contrast": var(--emphasis-300-contrast, #012834), "400-contrast": var(--emphasis-400-contrast, #012834), "500-contrast": var(--emphasis-contrast, #ffffff), "600-contrast": var(--emphasis-600-contrast, #ffffff), "700-contrast": var(--emphasis-700-contrast, #ffffff), "800-contrast": var(--emphasis-800-contrast, #ffffff), "900-contrast": var(--emphasis-900-contrast, #ffffff), "A100-contrast": var(--emphasis-A100-contrast, #012834), "A200-contrast": var(--emphasis-A200-contrast, #012834), "A400-contrast": var(--emphasis-A400-contrast, #ffffff), "A700-contrast": var(--emphasis-A700-contrast, #ffffff), "contrast-contrast": null, "rgba-contrast": null), warn: (50: var(--warn-50, #fff1ec), 100: var(--warn-100, #feddd0), 200: var(--warn-200, #fec6b1), 300: var(--warn-300, #feaf91), 400: var(--warn-400, #fd9e7a), 500: var(--warn, #fd8d62), 600: var(--warn-600, #dc7b55), 700: var(--warn-700, #ad6143), 800: var(--warn-800, #713f2c), 900: var(--warn-900, #593122), A100: var(--warn-A100, #68fff2), A200: var(--warn-A200, #35ffed), A400: var(--warn-A400, #00e8d3), A700: var(--warn-A700, #00b5a5), contrast: (50: var(--warn-50-contrast, #012834), 100: var(--warn-100-contrast, #012834), 200: var(--warn-200-contrast, #012834), 300: var(--warn-300-contrast, #012834), 400: var(--warn-400-contrast, #012834), 500: var(--warn-contrast, #012834), 600: var(--warn-600-contrast, #012834), 700: var(--warn-700-contrast, #ffffff), 800: var(--warn-800-contrast, #ffffff), 900: var(--warn-900-contrast, #ffffff), A100: var(--warn-A100-contrast, #012834), A200: var(--warn-A200-contrast, #012834), A400: var(--warn-A400-contrast, #ffffff), A700: var(--warn-A700-contrast, #ffffff)), rgba: (500: rgba(var(--warn-rgb, 253, 141, 98), 1), default: rgba(var(--warn-rgb, 253, 141, 98), 1)), default: var(--warn, #fd8d62), lighter: var(--warn-100, #feddd0), darker: var(--warn-700, #ad6143), text: var(--warn, #fd8d62), default-contrast: var(--warn-contrast, #012834), lighter-contrast: var(--warn-100-contrast, #012834), darker-contrast: var(--warn-700-contrast, #ffffff), "50-contrast": var(--warn-50-contrast, #012834), "100-contrast": 
var(--warn-100-contrast, #012834), "200-contrast": var(--warn-200-contrast, #012834), "300-contrast": var(--warn-300-contrast, #012834), "400-contrast": var(--warn-400-contrast, #012834), "500-contrast": var(--warn-contrast, #012834), "600-contrast": var(--warn-600-contrast, #012834), "700-contrast": var(--warn-700-contrast, #ffffff), "800-contrast": var(--warn-800-contrast, #ffffff), "900-contrast": var(--warn-900-contrast, #ffffff), "A100-contrast": var(--warn-A100-contrast, #012834), "A200-contrast": var(--warn-A200-contrast, #012834), "A400-contrast": var(--warn-A400-contrast, #ffffff), "A700-contrast": var(--warn-A700-contrast, #ffffff), "contrast-contrast": null, "rgba-contrast": 
null), is-dark: false, foreground: (chart-label: var(--ruf-foreground-chart-label, #b6b6b6), input-border: var(--ruf-foreground-input-border, #dfdfdf), soft-link: var(--ruf-foreground-soft-link, dimgray), link-visited: var(--ruf-foreground-link-visited, #3888bc), border: var(--ruf-foreground-border, #dfdfdf), input-value: var(--ruf-foreground-input-value, #012834), shadow: var(--ruf-foreground-shadow, rgba(0, 0, 0, 0.25)), subtle-divider: var(--ruf-foreground-subtle-divider, lightgray), link: var(--ruf-foreground-link, #285bc5), slider-off-active: var(--ruf-foreground-slider-off-active, rgba(0, 0, 0, 0.38)), slider-off: var(--ruf-foreground-slider-off, rgba(0, 0, 0, 0.38)), slider-min: 
var(--ruf-foreground-slider-min, rgba(0, 0, 0, 0.87)), darker-text: var(--ruf-foreground-darker-text, #012834), lighter-text: var(--ruf-foreground-lighter-text, white), text: var(--ruf-foreground-text, #012834), icons: var(--ruf-foreground-icons, #01232d), icon: var(--ruf-foreground-icon, #01232d), secondary-text: var(--ruf-foreground-secondary-text, #012834), hint-text: var(--ruf-foreground-hint-text, #012834), disabled-text: var(--ruf-foreground-disabled-text, #b3bfc2), disabled-button: var(--ruf-foreground-disabled-button, #b3bfc2), disabled: var(--ruf-foreground-disabled, #b3bfc2), dividers: var(--ruf-foreground-dividers, #b4b4b4), divider: var(--ruf-foreground-divider, #c1c1c1), base: var(--ruf-foreground-base, black), rgba: (base: rgba(var(--ruf-foreground-base-rgb, 0, 0, 0), 1), text: rgba(var(--ruf-foreground-text-rgb, 1, 40, 52), 1), link: rgba(var(--ruf-foreground-link-rgb, 40, 91, 197), 1))), background: (highlight: var(--ruf-background-highlight, 
rgba(40, 91, 197, 0.12)), selected-row: var(--ruf-background-selected-row, rgba(0, 0, 0, 0.08)), hover-row: var(--ruf-background-hover-row, lightgray), scrollbar-thumb: var(--ruf-background-scrollbar-thumb, #a7a7a7), scrollbar-track: var(--ruf-background-scrollbar-track, #f4f4f4), contrast: var(--ruf-background-contrast, #012834), info: var(--ruf-background-info, #3bcff0), success: var(--ruf-background-success, #4bcd3e), error: var(--ruf-background-error, #ff1f3e), secondary: var(--ruf-background-secondary, #b3bfc2), tooltip: var(--ruf-background-tooltip, #5a5a5a), disabled-list-option: var(--ruf-background-disabled-list-option, #b3b3b3), unselected-chip: var(--ruf-background-unselected-chip, #949494), disabled-button-toggle: var(--ruf-background-disabled-button-toggle, #e1e5e7), selected-button-toggle: var(--ruf-background-selected-button-toggle, #b3bfc2), selected-disabled-button: var(--ruf-background-selected-disabled-button, #7d7d7d), selected-button: var(--ruf-background-selected-button, rgba(0, 0, 0, 0.53)), focused-button: var(--ruf-background-focused-button, rgba(0, 0, 0, 0.06)), raised-button: var(--ruf-background-raised-button, white), disabled-button: var(--ruf-background-disabled-button, rgba(0, 0, 0, 0.15)), status-bar: var(--ruf-background-status-bar, #dddddd), sidemenu-focus: var(--ruf-background-sidemenu-focus, #e5e5e5), page-header: var(--ruf-background-page-header, whitesmoke), icon: var(--ruf-background-icon, rgba(0, 0, 0, 0.3)), side-megamenu: var(--ruf-background-side-megamenu, #dddddd), header-row: var(--ruf-background-header-row, #e5e5e5), alternate-row: var(--ruf-background-alternate-row, #f4f4f4), row: var(--ruf-background-row, white), nav-bar: var(--ruf-background-nav-bar, white), footer: var(--ruf-background-footer, white), disabled: var(--ruf-background-disabled, #e1e5e7), card-canvas: var(--ruf-background-card-canvas, #e5e5e5), card: var(--ruf-background-card, white), backdrop-overlay: var(--ruf-background-backdrop-overlay, rgba(0, 0, 0, 0.2)), contrast-overlay-2: var(--ruf-background-contrast-overlay-2, #015b7e), contrast-overlay-1: var(--ruf-background-contrast-overlay-1, rgba(0, 0, 0, 0.3)), dialog: var(--ruf-background-dialog, white), selected-state: var(--ruf-background-selected-state, rgba(0, 0, 0, 0.08)), halo-dark: var(--ruf-background-halo-dark, #34535d), halo: var(--ruf-background-halo, rgba(1, 40, 52, 0.12)), hover-dark: var(--ruf-background-hover-dark, rgba(0, 0, 0, 0.16)), hover: var(--ruf-background-hover, rgba(0, 0, 0, 0.04)), background: var(--ruf-background-background, #f4f4f4), app-canvas: var(--ruf-background-app-canvas, #f4f4f4), app-bar: var(--ruf-background-app-bar, white), side: var(--ruf-background-side, lightgray), panel: var(--ruf-background-panel, white), base: var(--ruf-background-base, white), rgba: (success: rgba(var(--ruf-background-success-rgb, 75, 205, 62), 1), error: rgba(var(--ruf-background-error-rgb, 255, 31, 62), 1), info: rgba(var(--ruf-background-info-rgb, 59, 207, 240), 1), backdrop-overlay: rgba(var(--ruf-background-backdrop-overlay-rgb, 0, 0, 0), 0.2), contrast: rgba(var(--ruf-background-contrast-rgb, 1, 40, 52), 1))), success: (50: var(--success-50, #e9f9e8), 100: var(--success-100, #c9f0c5), 200: var(--success-200, #a5e69f), 300: var(--success-300, #81dc78), 400: var(--success-400, #66d55b), 500: var(--success, #4bcd3e), 600: var(--success-600, #41b236), 700: var(--success-700, #308628), 800: var(--success-800, #225c1c), 900: var(--success-900, #1a4816), A100: var(--success-A100, #ff5bb4), A200: var(--success-A200, #ff289d), A400: var(--success-A400, #db0077), A700: var(--success-A700, #a8005b), contrast: (50: var(--success-50-contrast, #012834), 100: var(--success-100-contrast, #012834), 200: var(--success-200-contrast, #012834), 300: var(--success-300-contrast, #012834), 400: var(--success-400-contrast, #012834), 500: var(--success-contrast, #012834), 600: var(--success-600-contrast, #ffffff), 700: var(--success-700-contrast, #ffffff), 800: var(--success-800-contrast, #ffffff), 900: var(--success-900-contrast, #ffffff), A100: var(--success-A100-contrast, #012834), A200: var(--success-A200-contrast, #012834), A400: var(--success-A400-contrast, #ffffff), A700: var(--success-A700-contrast, #ffffff)), rgba: (500: rgba(var(--success-rgb, 75, 205, 62), 1), default: rgba(var(--success-rgb, 75, 205, 62), 1)), default: var(--success, #4bcd3e), lighter: var(--success-100, #c9f0c5), darker: var(--success-700, #308628), text: var(--success, #4bcd3e), default-contrast: var(--success-contrast, #012834), lighter-contrast: var(--success-100-contrast, #012834), darker-contrast: var(--success-700-contrast, #ffffff), "50-contrast": var(--success-50-contrast, #012834), "100-contrast": var(--success-100-contrast, #012834), "200-contrast": var(--success-200-contrast, #012834), "300-contrast": var(--success-300-contrast, #012834), "400-contrast": var(--success-400-contrast, #012834), "500-contrast": var(--success-contrast, #012834), "600-contrast": var(--success-600-contrast, #ffffff), "700-contrast": var(--success-700-contrast, #ffffff), "800-contrast": var(--success-800-contrast, #ffffff), "900-contrast": var(--success-900-contrast, #ffffff), "A100-contrast": var(--success-A100-contrast, #012834), "A200-contrast": var(--success-A200-contrast, #012834), "A400-contrast": var(--success-A400-contrast, #ffffff), "A700-contrast": var(--success-A700-contrast, #ffffff), "contrast-contrast": null, "rgba-contrast": null), error: (50: var(--error-50, #ffe4e8), 100: var(--error-100, #ffbcc5), 200: var(--error-200, #ff8f9f), 300: var(--error-300, #ff6278), 400: var(--error-400, #ff415b), 500: var(--error, #ff1f3e), 600: var(--error-600, #de1b36), 700: var(--error-700, #b3162b), 800: var(--error-800, #720e1c), 900: var(--error-900, #590b16), A100: var(--error-A100, #c45eff), A200: var(--error-A200, #b22bff), A400: var(--error-A400, #8d00de), A700: var(--error-A700, #6d00ab), contrast: (50: var(--error-50-contrast, #012834), 
100: var(--error-100-contrast, #012834), 200: var(--error-200-contrast, #012834), 300: var(--error-300-contrast, #012834), 400: var(--error-400-contrast, #012834), 500: var(--error-contrast, #012834), 600: var(--error-600-contrast, #ffffff), 700: var(--error-700-contrast, #ffffff), 800: var(--error-800-contrast, #ffffff), 900: var(--error-900-contrast, #ffffff), A100: var(--error-A100-contrast, #012834), A200: var(--error-A200-contrast, #012834), A400: var(--error-A400-contrast, #ffffff), A700: var(--error-A700-contrast, #ffffff)), rgba: (500: rgba(var(--error-rgb, 255, 31, 62), 1), default: rgba(var(--error-rgb, 255, 31, 62), 1)), default: var(--error, #ff1f3e), lighter: var(--error-100, #ffbcc5), darker: var(--error-700, #b3162b), text: var(--error, #ff1f3e), default-contrast: var(--error-contrast, #012834), lighter-contrast: var(--error-100-contrast, #012834), darker-contrast: var(--error-700-contrast, #ffffff), "50-contrast": var(--error-50-contrast, #012834), "100-contrast": var(--error-100-contrast, #012834), "200-contrast": var(--error-200-contrast, #012834), "300-contrast": var(--error-300-contrast, #012834), "400-contrast": var(--error-400-contrast, #012834), "500-contrast": var(--error-contrast, #012834), "600-contrast": 
var(--error-600-contrast, #ffffff), "700-contrast": var(--error-700-contrast, #ffffff), "800-contrast": var(--error-800-contrast, #ffffff), "900-contrast": var(--error-900-contrast, #ffffff), "A100-contrast": var(--error-A100-contrast, #012834), "A200-contrast": var(--error-A200-contrast, #012834), "A400-contrast": var(--error-A400-contrast, #ffffff), "A700-contrast": var(--error-A700-contrast, #ffffff), "contrast-contrast": null, "rgba-contrast": null), info: (50: var(--info-50, #e7f9fd), 100: var(--info-100, #c4f1fb), 200: var(--info-200, #9de7f8), 300: var(--info-300, #76ddf5), 400: var(--info-400, #58d6f2), 500: var(--info, #3bcff0), 600: var(--info-600, #33b4d1), 700: var(--info-700, #247f94), 800: var(--info-800, #1a5c6b), 900: var(--info-900, #154854), A100: var(--info-A100, #dcff60), A200: var(--info-A200, #d0ff2d), A400: var(--info-A400, #aee000), A700: var(--info-A700, #86ad00), contrast: (50: var(--info-50-contrast, #012834), 100: var(--info-100-contrast, #012834), 200: var(--info-200-contrast, #012834), 300: var(--info-300-contrast, #012834), 400: var(--info-400-contrast, #012834), 500: var(--info-contrast, #012834), 600: var(--info-600-contrast, #012834), 700: var(--info-700-contrast, #ffffff), 800: var(--info-800-contrast, #ffffff), 900: var(--info-900-contrast, #ffffff), A100: var(--info-A100-contrast, #012834), A200: var(--info-A200-contrast, #012834), A400: var(--info-A400-contrast, #ffffff), A700: var(--info-A700-contrast, #ffffff)), rgba: (500: rgba(var(--info-rgb, 59, 207, 240), 1), default: rgba(var(--info-rgb, 59, 207, 240), 1)), default: var(--info, #3bcff0), lighter: var(--info-100, #c4f1fb), darker: var(--info-700, 
#247f94), text: var(--info, #3bcff0), default-contrast: var(--info-contrast, #012834), lighter-contrast: var(--info-100-contrast, #012834), darker-contrast: var(--info-700-contrast, #ffffff), "50-contrast": var(--info-50-contrast, #012834), "100-contrast": var(--info-100-contrast, #012834), "200-contrast": var(--info-200-contrast, #012834), "300-contrast": var(--info-300-contrast, #012834), "400-contrast": var(--info-400-contrast, #012834), "500-contrast": var(--info-contrast, #012834), "600-contrast": var(--info-600-contrast, #012834), "700-contrast": var(--info-700-contrast, #ffffff), "800-contrast": var(--info-800-contrast, #ffffff), "900-contrast": var(--info-900-contrast, #ffffff), "A100-contrast": var(--info-A100-contrast, #012834), "A200-contrast": var(--info-A200-contrast, #012834), "A400-contrast": var(--info-A400-contrast, #ffffff), "A700-contrast": var(--info-A700-contrast, #ffffff), "contrast-contrast": null, "rgba-contrast": null))

Nov 17 '22 10:11 iKrishnaSahu

We are having the same issues after upgrading to v15.

Nov 17 '22 10:11 Enngage

Same behaviour here with following styles.scss:

@use '@angular/material' as mat;
@use "sass:map";

// Include the core Angular Material styles
@include mat.core();

// Create a base theme without color.
// This will globally set the density and typography for all future color themes.
@include mat.all-component-themes((
  color: null,
  density: -2,
  typography: mat.define-typography-config(
    $font-family: theme('fontFamily.sans'),
  )
));

:root {
  --primary: #3f51b5;
  --primary-50: #fefeff;
  --primary-100: #c6cbeb;
  --primary-200: #9ca6dd;
  --primary-300: #6776ca;
  --primary-400: #5062c2;
  --primary-500: #3f51b5;
  --primary-600: #37479e;
  --primary-700: #2f3d88;
  --primary-800: #273371;
  --primary-900: #1f285a;
  --primary-A100: #f7f8fc;
  --primary-A200: #abb4e2;
  --primary-A400: #606fc7;
  --primary-A700: #4d5ec1;
  --on-primary: #ffffff;
  --on-primary-50: #000000;
  --on-primary-100: #000000;
  --on-primary-200: #000000;
  --on-primary-300: #000000;
  --on-primary-400: #ffffff;
  --on-primary-500: #ffffff;
  --on-primary-600: #ffffff;
  --on-primary-700: #ffffff;
  --on-primary-800: #ffffff;
  --on-primary-900: #ffffff;
  --on-primary-A100: #000000;
  --on-primary-A200: #000000;
  --on-primary-A400: #000000;
  --on-primary-A700: #ffffff;

  --accent: #e91e63;
  --accent-50: #ffffff;
  --accent-100: #facada;
  --accent-200: #f597b7;
  --accent-300: #ee568a;
  --accent-400: #ec3a76;
  --accent-500: #e91e63;
  --accent-600: #d41556;
  --accent-700: #b8124a;
  --accent-800: #9c0f3f;
  --accent-900: #800d34;
  --accent-A100: #ffffff;
  --accent-A200: #f7a9c4;
  --accent-A400: #ee4c83;
  --accent-A700: #eb3573;
  --on-accent: #000000;
  --on-accent-50: #000000;
  --on-accent-100: #000000;
  --on-accent-200: #000000;
  --on-accent-300: #000000;
  --on-accent-400: #000000;
  --on-accent-500: #000000;
  --on-accent-600: #ffffff;
  --on-accent-700: #ffffff;
  --on-accent-800: #ffffff;
  --on-accent-900: #ffffff;
  --on-accent-A100: #000000;
  --on-accent-A200: #000000;
  --on-accent-A400: #000000;
  --on-accent-A700: #000000;

  --warn: #e91e63;
  --warn-50: #ffffff;
  --warn-100: #facada;
  --warn-200: #f597b7;
  --warn-300: #ee568a;
  --warn-400: #ec3a76;
  --warn-500: #e91e63;
  --warn-600: #d41556;
  --warn-700: #b8124a;
  --warn-800: #9c0f3f;
  --warn-900: #800d34;
  --warn-A100: #ffffff;
  --warn-A200: #f7a9c4;
  --warn-A400: #ee4c83;
  --warn-A700: #eb3573;
  --on-warn: #000000;
  --on-warn-50: #000000;
  --on-warn-100: #000000;
  --on-warn-200: #000000;
  --on-warn-300: #000000;
  --on-warn-400: #000000;
  --on-warn-500: #000000;
  --on-warn-600: #ffffff;
  --on-warn-700: #ffffff;
  --on-warn-800: #ffffff;
  --on-warn-900: #ffffff;
  --on-warn-A100: #000000;
  --on-warn-A200: #000000;
  --on-warn-A400: #000000;
  --on-warn-A700: #000000;
}

// Generate Primary, Accent and Warn palettes
$palettes: ();
@each $name in (primary, accent, warn) {
  $palettes: map.merge($palettes, (#{$name}: (
    50: var(--#{$name}-50),
    100: var(--#{$name}-100),
    200: var(--#{$name}-200),
    300: var(--#{$name}-300),
    400: var(--#{$name}-400),
    500: var(--#{$name}-500),
    600: var(--#{$name}-600),
    700: var(--#{$name}-700),
    800: var(--#{$name}-800),
    900: var(--#{$name}-900),
    contrast: (
      50: var(--on-#{$name}-50),
      100: var(--on-#{$name}-100),
      200: var(--on-#{$name}-200),
      300: var(--on-#{$name}-300),
      400: var(--on-#{$name}-400),
      500: var(--on-#{$name}-500),
      600: var(--on-#{$name}-600),
      700: var(--on-#{$name}-700),
      800: var(--on-#{$name}-800),
      900: var(--on-#{$name}-900)
    ),
    default: var(--#{$name}),
    lighter: var(--#{$name}-100),
    darker: var(--#{$name}-700),
    text: var(--#{$name}),
    default-contrast: var(--on-#{$name}),
    lighter-contrast: var(--on-#{$name}-100),
    darker-contrast: var(--on-#{$name}-700)
  )));
}

// ...

// Generate Angular Material themes. Since we are using CSS Custom Properties,
// we don't have to generate a separate Angular Material theme for each color
// set. We can just create one light and one dark theme and then switch the
// CSS Custom Properties to dynamically switch the colors.
body.light,
body .light {
  $light-theme: mat.define-light-theme((color: ($palettes)));

  // Use all-component-colors to only generate the colors
  @include mat.all-component-colors($light-theme);
}

body.dark,
body .dark {
  $dark-theme: mat.define-dark-theme((color: ($palettes)));

  // Use all-component-colors to only generate the colors
  @include mat.all-component-colors($dark-theme);
}

// ...

When running ng serve i got some errors:


Initial Chunk Files | Names         |  Raw Size
vendor.js           | vendor        |   2.57 MB | 
polyfills.js        | polyfills     | 314.19 kB | 
styles.js           | styles        | 227.55 kB | 
main.js             | main          |  42.52 kB | 
runtime.js          | runtime       |   6.52 kB | 

                    | Initial Total |   3.15 MB

Build at: 2022-11-17T13:17:58.208Z - Hash: 9f56a71cc5f42a34 - Time: 10093ms

./examples/playground/src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./examples/playground/src/styles.scss?ngGlobalStyle - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
Deprecation $weight: Passing a number without unit % (60) is deprecated.

To preserve current behavior: $weight * 1%

More info: https://sass-lang.com/d/function-units

@material/slider/_slider-theme.scss 77:5                                    @use
node_modules/@angular/material/slider/_slider-theme.scss 3:1                @use
node_modules/@angular/material/core/density/private/_all-density.scss 25:1  @forward
@angular/_index.scss 18:1                                                   @use
src/styles/core/_theming.scss 1:1                                           @use
src/styles.scss 1:1                                                         root stylesheet


./examples/playground/src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./examples/playground/src/styles.scss?ngGlobalStyle - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
var(--accent) is not a color. Falling back to "dark" tone.

@material/theme/_theme-color.scss 67:5                                     tone()
@material/theme/_theme-color.scss 86:14                                    contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 126:10   using-mdc-theme()
node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 26:3  color()
node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 53:7  @content
node_modules/@angular/material/core/theming/_theming.scss 402:3            private-check-duplicate-theme-styles()
node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 47:3  theme()
node_modules/@angular/material/core/theming/_all-theme.scss 47: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()
src/styles/core/_theming.scss 171:3                                        @use
src/styles.scss 1:1                                                        root stylesheet


./examples/playground/src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./examples/playground/src/styles.scss?ngGlobalStyle - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
var(--accent) is not a color. Falling back to "dark" tone.

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 126:10  using-mdc-theme()
node_modules/@angular/material/card/_card-theme.scss 16:3                 color()
node_modules/@angular/material/card/_card-theme.scss 70:7                 @content
node_modules/@angular/material/core/theming/_theming.scss 402:3           private-check-duplicate-theme-styles()
node_modules/@angular/material/card/_card-theme.scss 64:3                 theme()
node_modules/@angular/material/core/theming/_all-theme.scss 46: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()
src/styles/core/_theming.scss 171:3                                       @use
src/styles.scss 1:1                                                       root stylesheet


./examples/playground/src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./examples/playground/src/styles.scss?ngGlobalStyle - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
var(--accent) is not a color. Falling back to "dark" tone.

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 126:10  using-mdc-theme()
node_modules/@angular/material/core/option/_optgroup-theme.scss 10:3      color()
node_modules/@angular/material/core/_core-theme.scss 16:3                 color()
node_modules/@angular/material/core/_core-theme.scss 83:7                 @content
node_modules/@angular/material/core/theming/_theming.scss 402:3           private-check-duplicate-theme-styles()
node_modules/@angular/material/core/_core-theme.scss 77:3                 theme()
node_modules/@angular/material/core/theming/_all-theme.scss 45: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()
src/styles/core/_theming.scss 171:3                                       @use
src/styles.scss 1:1                                                       root stylesheet


./examples/playground/src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./examples/playground/src/styles.scss?ngGlobalStyle - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
var(--accent) is not a color. Falling back to "dark" tone.

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 126:10  using-mdc-theme()
node_modules/@angular/material/core/option/_option-theme.scss 14:3        color()
node_modules/@angular/material/core/_core-theme.scss 15:3                 color()
node_modules/@angular/material/core/_core-theme.scss 83:7                 @content
node_modules/@angular/material/core/theming/_theming.scss 402:3           private-check-duplicate-theme-styles()
node_modules/@angular/material/core/_core-theme.scss 77:3                 theme()
node_modules/@angular/material/core/theming/_all-theme.scss 45: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()
src/styles/core/_theming.scss 171:3                                       @use
src/styles.scss 1:1                                                       root stylesheet


./examples/playground/src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./examples/playground/src/styles.scss?ngGlobalStyle - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
var(--primary) is not a color. Falling back to "dark" tone.

@material/theme/_theme-color.scss 67:5                                     tone()
@material/theme/_theme-color.scss 86:14                                    contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10   using-mdc-theme()
node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 26:3  color()
node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 53:7  @content
node_modules/@angular/material/core/theming/_theming.scss 402:3            private-check-duplicate-theme-styles()
node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 47:3  theme()
node_modules/@angular/material/core/theming/_all-theme.scss 47: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()
src/styles/core/_theming.scss 171:3                                        @use
src/styles.scss 1:1                                                       root stylesheet


./examples/playground/src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./examples/playground/src/styles.scss?ngGlobalStyle - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
var(--primary) is not a color. Falling back to "dark" tone.

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10  using-mdc-theme()
node_modules/@angular/material/card/_card-theme.scss 16:3                 color()
node_modules/@angular/material/card/_card-theme.scss 70:7                 @content
node_modules/@angular/material/core/theming/_theming.scss 402:3           private-check-duplicate-theme-styles()
node_modules/@angular/material/card/_card-theme.scss 64:3                 theme()
node_modules/@angular/material/core/theming/_all-theme.scss 46: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()
src/styles/core/_theming.scss 171:3                                       @use
src/styles.scss 1:1                                                       root stylesheet


./examples/playground/src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./examples/playground/src/styles.scss?ngGlobalStyle - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
var(--primary) is not a color. Falling back to "dark" tone.

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10  using-mdc-theme()
node_modules/@angular/material/core/option/_optgroup-theme.scss 10:3      color()
node_modules/@angular/material/core/_core-theme.scss 16:3                 color()
node_modules/@angular/material/core/_core-theme.scss 83:7                 @content
node_modules/@angular/material/core/theming/_theming.scss 402:3           private-check-duplicate-theme-styles()
node_modules/@angular/material/core/_core-theme.scss 77:3                 theme()
node_modules/@angular/material/core/theming/_all-theme.scss 45: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()
src/styles/core/_theming.scss 171:3                                       @use
src/styles.scss 1:1                                                       root stylesheet


./examples/playground/src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./examples/playground/src/styles.scss?ngGlobalStyle - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
var(--primary) is not a color. Falling back to "dark" tone.

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10  using-mdc-theme()
node_modules/@angular/material/core/option/_option-theme.scss 14:3        color()
node_modules/@angular/material/core/_core-theme.scss 15:3                 color()
node_modules/@angular/material/core/_core-theme.scss 83:7                 @content
node_modules/@angular/material/core/theming/_theming.scss 402:3           private-check-duplicate-theme-styles()
node_modules/@angular/material/core/_core-theme.scss 77:3                 theme()
node_modules/@angular/material/core/theming/_all-theme.scss 45: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()
src/styles/core/_theming.scss 171:3                                       @use
src/styles.scss 1:1                                                       root stylesheet


./examples/playground/src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./examples/playground/src/styles.scss?ngGlobalStyle - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
var(--warn) is not a color. Falling back to "dark" tone.

@material/theme/_theme-color.scss 67:5                                     tone()
@material/theme/_theme-color.scss 86:14                                    contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 133:10   using-mdc-theme()
node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 26:3  color()
node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 53:7  @content
node_modules/@angular/material/core/theming/_theming.scss 402:3            private-check-duplicate-theme-styles()
node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 47:3  theme()
node_modules/@angular/material/core/theming/_all-theme.scss 47: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()
src/styles/core/_theming.scss 171:3                                        @use
src/styles.scss 1:1                                                       root stylesheet


./examples/playground/src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./examples/playground/src/styles.scss?ngGlobalStyle - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
var(--warn) is not a color. Falling back to "dark" tone.

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 133:10  using-mdc-theme()
node_modules/@angular/material/card/_card-theme.scss 16:3                 color()
node_modules/@angular/material/card/_card-theme.scss 70:7                 @content
node_modules/@angular/material/core/theming/_theming.scss 402:3           private-check-duplicate-theme-styles()
node_modules/@angular/material/card/_card-theme.scss 64:3                 theme()
node_modules/@angular/material/core/theming/_all-theme.scss 46: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()
src/styles/core/_theming.scss 171:3                                       @use
src/styles.scss 1:1                                                       root stylesheet


./examples/playground/src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./examples/playground/src/styles.scss?ngGlobalStyle - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
var(--warn) is not a color. Falling back to "dark" tone.

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 133:10  using-mdc-theme()
node_modules/@angular/material/core/option/_optgroup-theme.scss 10:3      color()
node_modules/@angular/material/core/_core-theme.scss 16:3                 color()
node_modules/@angular/material/core/_core-theme.scss 83:7                 @content
node_modules/@angular/material/core/theming/_theming.scss 402:3           private-check-duplicate-theme-styles()
node_modules/@angular/material/core/_core-theme.scss 77:3                 theme()
node_modules/@angular/material/core/theming/_all-theme.scss 45: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()
src/styles/core/_theming.scss 171:3                                       @use
src/styles.scss 1:1                                                       root stylesheet


./examples/playground/src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./examples/playground/src/styles.scss?ngGlobalStyle - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
var(--warn) is not a color. Falling back to "dark" tone.

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 133:10  using-mdc-theme()
node_modules/@angular/material/core/option/_option-theme.scss 14:3        color()
node_modules/@angular/material/core/_core-theme.scss 15:3                 color()
node_modules/@angular/material/core/_core-theme.scss 83:7                 @content
node_modules/@angular/material/core/theming/_theming.scss 402:3           private-check-duplicate-theme-styles()
node_modules/@angular/material/core/_core-theme.scss 77:3                 theme()
node_modules/@angular/material/core/theming/_all-theme.scss 45: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()
src/styles/core/_theming.scss 171:3                                       @use
src/styles.scss 1:1                                                       root stylesheet




./examples/playground/src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: var(--primary) is not a color.
   ╷
16 │     track-color: color.adjust(mdc-theme-color.prop-value($color), $alpha: -0.75),
   │                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 16:18  -palette-styles()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 28:7   @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 176:5     @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 216:3     disable-mdc-fallback-declarations()
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 175:3     using-mdc-theme()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 26:3   color()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 53:7   @content
  node_modules/@angular/material/core/theming/_theming.scss 402:3             private-check-duplicate-theme-styles()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 47:3   theme()
  node_modules/@angular/material/core/theming/_all-theme.scss 47: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()
  src/styles/core/_theming.scss 171:3                                         @use
  src/styles.scss 1:1                                                         root stylesheet

./examples/playground/src/styles.scss?ngGlobalStyle - 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: $color: var(--primary) is not a color.
   ╷
16 │     track-color: color.adjust(mdc-theme-color.prop-value($color), $alpha: -0.75),
   │                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 16:18  -palette-styles()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 28:7   @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 176:5     @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 216:3     disable-mdc-fallback-declarations()
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 175:3     using-mdc-theme()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 26:3   color()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 53:7   @content
  node_modules/@angular/material/core/theming/_theming.scss 402:3             private-check-duplicate-theme-styles()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 47:3   theme()
  node_modules/@angular/material/core/theming/_all-theme.scss 47: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()
  src/styles/core/_theming.scss 171:3                                         @use
  src/styles.scss 1:1                                                         root stylesheet



** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✖ Failed to compile.

I can perform a simpler test later to simplify the example.

Nov 17 '22 13:11 alorle

Same issue here after updating to Angular Material 15, I'm using CSS variables as well to allow for a dynamic theme.

$primary-color: var(--primary-color);
$primary-contrast-color: var(--primary-contrast-color);

$mpo-primary-palette: (
  ...
  500: $primary-color,
 ...
  contrast: (
    ...
    500: $primary-contrast-color,
    ...
  ),
);

Nov 17 '22 14:11 mpo-dev

Same here

Nov 18 '22 09:11 squelix

Same issue for me after upgrading to Angular 15.0.0 (with Angular Material 15.0.0).

My app's color theme is customizable by a configuration loaded at runtime. As such, I set the theme to be based on CSS4 variables - eg:

:root {
  --theme-primary-50: #EEF6F5;
  --theme-primary-100: #D4EAE7;
  --theme-primary-200: #B8DCD7;
  --theme-primary-300: #9CCDC7;
  --theme-primary-400: #86C3BB;
  --theme-primary-500: #71B8AF;
  --theme-primary-600: #69B1A8;
  --theme-primary-700: #5EA89F;
  --theme-primary-800: #54A096;
  --theme-primary-900: #429186;
  --theme-primary-A100: #E7FFFC;
  --theme-primary-A200: #B4FFF4;
  --theme-primary-A400: #81FFED;
  --theme-primary-A700: #68FFE9;
}

$primaryPalette: (
  50 : var(--theme-primary-50),
  100 : var(--theme-primary-100),
  200 : var(--theme-primary-200),
  300 : var(--theme-primary-300),
  400 : var(--theme-primary-400),
  500 : var(--theme-primary-500),
  600 : var(--theme-primary-600),
  700 : var(--theme-primary-700),
  800 : var(--theme-primary-800),
  900 : var(--theme-primary-900),
  A100 : var(--theme-primary-A100),
  A200 : var(--theme-primary-A200),
  A400 : var(--theme-primary-A400),
  A700 : var(--theme-primary-A700),
  contrast: (
    50: var(--color__text),
    100: var(--color__text),
    200: var(--color__text),
    300: var(--color__text),
    400: var(--color__text),
    500: var(--color__text--light),
    600: var(--color__text--light),
    700: var(--color__text--light),
    800: var(--color__text--light),
    900: var(--color__text--light),
    A100: var(--color__text),
    A200: var(--color__text--light),
    A400: var(--color__text--light),
    A700: var(--color__text--light),
  )
);

...

// Define the primary, accent and warn palettes
$default-primary-palette: mat.define-palette($primaryPalette);
$default-accent-palette: mat.define-palette($accentPalette);
$default-warn-palette: mat.define-palette($warnPalette);

// Create the Material theme object
$theme: mat.define-light-theme($default-primary-palette, $default-accent-palette, $default-warn-palette);

@include mat.all-component-themes($theme);

// Apply the theme to the user components
@include components-theme($theme);

I then alter those variables at runtime. This used to work just fine, but now, Angular Material complains (at compile time) with this:

HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: var(--theme-primary-500) is not a color.
   ╷
16 │     track-color: color.adjust(mdc-theme-color.prop-value($color), $alpha: -0.75),
   │                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 16:18  -palette-styles()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 28:7   @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 176:5     @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 216:3     disable-mdc-fallback-declarations()
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 175:3     using-mdc-theme()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 26:3   color()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 53:7   @content
  node_modules/@angular/material/core/theming/_theming.scss 402:3             private-check-duplicate-theme-styles()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 47:3   theme()
  node_modules/@angular/material/core/theming/_all-theme.scss 47: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()
  src/app/scss/theme/_theme.scss 146:1

Nov 19 '22 23:11 russcarver

I think this can only be resolved when https://github.com/material-components/material-components-web/issues/4709 is resolved.

Nov 21 '22 18:11 alorle

I don't know about that. The referenced issue is 3.5 years old. And this just stopped working with Angular Material 15.0.0

Nov 21 '22 18:11 russcarver

You're right @russcarver, themes defined with CSS variables stopped working with the latest version.

But also the latest version of @anuglar/material introduced migration of almost all components to MDC, in which https://github.com/material-components/material-components-web comes into play.

Nov 21 '22 18:11 alorle

FWIW, there is a comment in the Angular Material source at the specific theme for the progress bar that causes this error, explicitly stating that it isn't possible to use CSS variables.

src/material/progress-bar/_progress-bar-theme.scss:8-22

@mixin _palette-styles($color) {
  // We can't set the `track-color` using `theme`, because it isn't possible for it to use a CSS
  // variable since MDC's buffer animation works by constructing an SVG string from this color.
  @include mdc-linear-progress-theme.theme-styles((
    // TODO(crisbeto): the buffer color should come from somewhere in MDC, however at the time of
    // writing, their buffer color is hardcoded to #e6e6e6 which both doesn't account for theming
    // and doesn't match the Material design spec. For now we approximate the buffer background by
    // applying an opacity to the color of the bar.
    track-color: color.adjust(mdc-theme-color.prop-value($color), $alpha: -0.75),
  ));

  @include mdc-linear-progress-theme.theme((
    active-indicator-color: mdc-theme-color.prop-value($color),
  ));
}

Nov 22 '22 07:11 mpo-dev

Does Angular team plan any workaround or fix for this and we should wait or we should remove features with css vars? I really need answer to plan project future. Thanks!

Nov 22 '22 14:11 vpetrusevici

The CSS dynamic theming is not specific to the progress bar. So I guess this means I can't upgrade to Angular Material 15 until someone figures out another way. The dynamic theming is pretty generic so I don't see a way to "exclude" the progress bar.

Nov 22 '22 15:11 russcarver

Just wanted to pop in here and say that we're seeing the same problem. I'm seeing it elsewhere as well (e.g card-theme, or wherever sass' color-functions are used). We're using the themes we build for 15-20 apps, so we're kinda forced into remaining on angular 14 for now which kinda sucks..

I'm curious why the mdc-components were not rolled out either experimentally, or in a separate package (i.e @angular/mdc) instead of pushing out a pretty big breaking change with no clear migration path.

Nov 23 '22 13:11 yusijs

I've found only one solution at this moment. If you don't use progress-bar, then configure each component separately like this:

@include mat.core-theme($theme);
@include mat.radio-theme($theme);
...

But you still need to rewrite some styles, which can take some time. And I'm wondering if anyone tried to use material migration tool ng generate @angular/material:mdc-migration

Nov 23 '22 14:11 NechiK

@NechiK I did try to run the migration script ng update @angular/material@15 (shown here: https://update.angular.io/?l=3&v=14.0-15.0) but it failed miserably.

Nov 23 '22 16:11 russcarver

To clarify: we never officially supported CSS variables as palette values, primarily because the theming system was written during the time when we had to support IE 11. Before the switch to MDC there were only 2-3 places that broke when provided with a CSS variable which were easy to fix so we fixed them. After the switch to MDC that's no longer the case since a lot of the CSS comes from outside of our project.

That being said, we're in the process of designing a new theming system that will be based on CSS variables.

Nov 23 '22 16:11 crisbeto

To clarify: we never officially supported CSS variables as palette values, primarily because the theming system was written during the time when we had to support IE 11. Before the switch to MDC there were only 2-3 places that broke when provided with a CSS variable which were easy to fix so we fixed them. After the switch to MDC that's no longer the case since a lot of the CSS comes from outside of our project.

It's not just the palette values - I'm seeing breakage in regular colors as well (e.g card background). I would also have thought that given there is an open issue to support css variables you would work towards supporting it, and not make active changes to break it. The breaking happens primarily in your usage of sass' color mixins (e.g _card-theme.scss, outline-color: color.mix(mdc-theme-color.prop-value(on-surface),), which I think it's odd to "blame" on the styling from MDC.

That being said, we're in the process of designing a new theming system that will be based on CSS variables.

That's good to know, but can this be expected in this major, or would it need to wait several more majors? The issue I linked above talking about it is 5 years old, and for myself and my projects this is blocking our migration to angular 15.

Nov 23 '22 16:11 yusijs

From my tracing / understanding, a good chunk of warnings are coming from trying to calculate things like contrast colors at scss compile time, even though the contrasting colors should also be available in the palette color config (which presumably those of us using dynamic CSS vars have those as variables as well as the color). But those are just warnings that don't prevent it from building, I just fear there may be places the wrong contrasting colors are ending up.

For things that actually are breaking, as a workaround I am either using the legacy component/mixin or attempting to emit overriding styles without calling the material mixin. In essence:

@include mat.badge-theme($theme);
@include mat.button-theme($theme);
@include mat.form-field-theme($theme); // aside - IDE complains but this compiles?
@include mat.legacy-progress-bar-theme($theme);

which seems to be ok for now with the caveat the associated (deprecated) legacy module is imported:

import { MatLegacyProgressBarModule as MatProgressBarModule } from "@angular/material/legacy-progress-bar";

The other component I found so far that isn't playing nicely is the slide-toggle. No compilation errors but renders using whatever the presumed initial colors/styles are.

Anyways, understood that using CSS vars in our theme configs was not officially supported by the angular material API (and the difficulties with integrating with the mdc sass). However, for those of us who had requirements of a dynamic theme where it was important enough to use CSS vars in our theme configs, I think we are looking for some advising on how to manage planning apps and upgrading to Angular 15. My initial thoughts/questions:

If we upgrade to Angular 15 and do patchwork / legacy imports as necessary...
- Is there potential for significantly more breakages during v15 that this maintenance on our end becomes a hassle?
- Will support for dynamic runtime themes (or at least support for us to use CSS vars in configs) be available before legacy component modules are dropped from the API (looks like v17 it disappears)?
- How bad is it in general to be relying on a few legacy component module imports?
- Is there any comprehensive list of what components need to go through legacy in order to function/style properly with CSS vars for the colors?
If we stay on Angular 14...
- Any idea for what major release the CSS vars / dynamic theme features could work with material out of the box? Don't want to fall behind, especially with other third party libraries that may not have the same level of support for older versions that angular would

Nov 28 '22 21:11 tkutcher

It looks like this setup is working (still testing, but wanted to share already)

The "legacy" mixins aren't using mdc and shouldn't be affected by this bug. But, as @tkutcher mentioned, they're also deprecated and being removed in v17

Nov 30 '22 09:11 michaelfaith

I did manage to fix the sass error with this setup

$light-theme: mat.define-light-theme((
    color: (
        primary: $primary,
        accent: $accent,
    ),
    typography: $typography
));


@include mat.all-legacy-component-typographies($light-theme);
@include mat.all-legacy-component-themes($light-theme);
@include mat.all-legacy-component-colors($light-theme);

But WARNING: var(--primary, #4bcd3e) is not a color. Falling back to "dark" tone. still exists

Nov 30 '22 09:11 richardsengers

It looks like this setup is working (still testing, but wanted to share already)

The "legacy" mixins aren't using mdc and shouldn't be affected by this bug. But, as @tkutcher mentioned, they're also deprecated and being removed in v17

You are right, I've changed my comment a bit.

Nov 30 '22 09:11 richardsengers

Hi Angular community,

These are my observations regarding the use of CSS Custom Properties with Angular Material 15.0 palettes.

If our Angular Material palettes use CSS Custom Properties, the easiest path for migrating to Angular Material 15 is the following:

Use legacy Angular Material declarables and styles when both a legacy variant and an MDC-based variant exists.
Adress the style issues described in the section Datepicker.
Wait for MDC-based Angular Material components to support CSS Custom Properties theming.

Overview of Angular Material 15 components

Component	Legacy variant	MDC-based variant	Shared variant*
Autocomplete	x	x
Button	x	x
Card	x	x
Checkbox	x	x
Chips	x	x
Dialog	x	x
Form field	x	x
Input	x	x
List	x	x
Menu	x	x
Paginator	x	x
Progress bar	x	x
Progress spinner	x	x
Radio button	x	x
Ripples	x	x
Select	x	x
Slide toggle	x	x
Slider	x	x
Snackbar	x	x
Table	x	x
Tabs	x	x
Tooltip	x	x
Badge			x
Bottom sheet			x
Button toggle			x
Core			x
Datepicker**			x
Divider			x
Expansion panel			x
Grid list			x
Icon			x
Sidenav			x
Sort header			x
Stepper			x
Toolbar			x
Tree			x

* Shared variant means that we will use the same variant for both legacy and MDC-based Angular Material setups as MDC for Web has no equivalent component. ** The Datepicker uses MDC-based Button and Icon button components and styles as described in the section Datepicker.

Datepicker

Datepicker uses MDC-based Button and Icon button components and styles. The toggle button as well as the previous and next period buttons in the calendar popup are MDC-based Icon buttons. The period selector buttons in the calendar popup are MDC-based Buttons. Some of their styles fail to detect dark/light text when our palette uses CSS Custom Properties which causes warnings.

MDC-based Angular Material components

All MDC-based Angular Material components except for Paginator have styles that fail to detect dark/light text when our palette uses CSS Custom Properties, causing build warnings when serving our application.
Paginator styles fail to compile when our palette uses CSS Custom Properties, causing our application's serve and build to break.

To use CSS Custom Properties with MDC-based Angular Material components, we must address style issues caused by (1) when our palette includes dark background colors.

We cannot use CSS Custom Properties with the MDC-based Paginator as described by (2).

Nov 30 '22 09:11 LayZeeDK

Just to sum up, using a CSS variable for the 500 color in the color palette causes 1 error (in progress-bar) and ~28 warnings. Like @mpo-dev mentioned above, the error is caused by this line: https://github.com/angular/components/blob/e0cccc7fc5454eb7317c201f6f8f92bc058a933a/src/material/progress-bar/_progress-bar-theme.scss#L16

Is it possible to add some fallback to turn this error into a warning, so that v15 apps could compile?

(The custom theming won't work perfectly as explained by @LayZeeDK above, and the console will be full of warnings, but at least this will mitigate the issue until a proper solution is found.)

1 error

./src/scss/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: var(--theme-primary-500) is not a color.
   ╷
16 │     track-color: color.adjust(mdc-theme-color.prop-value($color), $alpha: -0.75),
   │                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 16:18  -palette-styles()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 28:7   @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 176:5     @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 216:3     disable-mdc-fallback-declarations()
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 175:3     using-mdc-theme()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 26:3   color()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 53:7   @content
  node_modules/@angular/material/core/theming/_theming.scss 402:3             private-check-duplicate-theme-styles()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 47:3   theme()
  node_modules/@angular/material/core/theming/_all-theme.scss 47: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()
  src/scss/my-theme.scss 88:1                                                 @import
  src/scss/styles.scss 2:9                                                    root stylesheet

./src/scss/styles.scss?ngGlobalStyle - 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: $color: var(--theme-primary-500) is not a color.
   ╷
16 │     track-color: color.adjust(mdc-theme-color.prop-value($color), $alpha: -0.75),
   │                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 16:18  -palette-styles()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 28:7   @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 176:5     @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 216:3     disable-mdc-fallback-declarations()
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 175:3     using-mdc-theme()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 26:3   color()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 53:7   @content
  node_modules/@angular/material/core/theming/_theming.scss 402:3             private-check-duplicate-theme-styles()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 47:3   theme()
  node_modules/@angular/material/core/theming/_all-theme.scss 47: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()
  src/scss/my-theme.scss 88:1                                                 @import
  src/scss/styles.scss 2:9                                                    root stylesheet

~28 warnings

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

@material/theme/_theme-color.scss 67:5                                                      tone()
@material/theme/_theme-color.scss 86:14                                                     contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10                    using-mdc-theme()
node_modules/@angular/material/form-field/_form-field-native-select.scss 79:3               private-form-field-native-select-color()
node_modules/@angular/material/form-field/_form-field-theme.scss 53:7                       @content
node_modules/@angular/material/form-field/_mdc-text-field-theme-variable-refresh.scss 45:3  private-text-field-refresh-theme-variables()
node_modules/@angular/material/form-field/_form-field-theme.scss 46:5                       @content
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 176:5                     @content
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 216:3                     disable-mdc-fallback-declarations()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 175:3                     using-mdc-theme()
node_modules/@angular/material/form-field/_form-field-theme.scss 45:3                       color()
node_modules/@angular/material/form-field/_form-field-theme.scss 140:7                      @content
node_modules/@angular/material/core/theming/_theming.scss 402:3                             private-check-duplicate-theme-styles()
node_modules/@angular/material/form-field/_form-field-theme.scss 134:3                      theme()
node_modules/@angular/material/core/theming/_all-theme.scss 49: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()
src/scss/my-theme.scss 88:1                                                                 @import
src/scss/styles.scss 2:9                                                                    root stylesheet  


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

@material/theme/_theme-color.scss 67:5                                             tone()
@material/theme/_theme-color.scss 86:14                                            contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10           using-mdc-theme()
node_modules/@angular/material/progress-spinner/_progress-spinner-theme.scss 14:3  color()
node_modules/@angular/material/progress-spinner/_progress-spinner-theme.scss 41:7  @content
node_modules/@angular/material/core/theming/_theming.scss 402:3                    private-check-duplicate-theme-styles()
node_modules/@angular/material/progress-spinner/_progress-spinner-theme.scss 35:3  theme()
node_modules/@angular/material/core/theming/_all-theme.scss 68: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()    
src/scss/my-theme.scss 88:1                                                        @import
src/scss/styles.scss 2:9                                                           root stylesheet


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

@material/theme/_theme-color.scss 67:5                                      tone()
@material/theme/_theme-color.scss 86:14                                     contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10    using-mdc-theme()
node_modules/@angular/material/slide-toggle/_slide-toggle-theme.scss 80:3   color()
node_modules/@angular/material/slide-toggle/_slide-toggle-theme.scss 131:7  @content
node_modules/@angular/material/core/theming/_theming.scss 402:3             private-check-duplicate-theme-styles()
node_modules/@angular/material/slide-toggle/_slide-toggle-theme.scss 125:3  theme()
node_modules/@angular/material/core/theming/_all-theme.scss 55: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()
src/scss/my-theme.scss 88:1                                                 @import
src/scss/styles.scss 2:9                                                    root stylesheet


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

@material/theme/_theme-color.scss 67:5                                     tone()
@material/theme/_theme-color.scss 86:14                                    contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10   using-mdc-theme()
node_modules/@angular/material/autocomplete/_autocomplete-theme.scss 9:3   color()
node_modules/@angular/material/autocomplete/_autocomplete-theme.scss 39:7  @content
node_modules/@angular/material/core/theming/_theming.scss 402:3            private-check-duplicate-theme-styles()
node_modules/@angular/material/autocomplete/_autocomplete-theme.scss 33:3  theme()
node_modules/@angular/material/core/theming/_all-theme.scss 52: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()
src/scss/my-theme.scss 88:1                                                @import
src/scss/styles.scss 2:9                                                   root stylesheet


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

@material/theme/_theme-color.scss 67:5                                     tone()
@material/theme/_theme-color.scss 86:14                                    contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10   using-mdc-theme()
node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 26:3  color()
node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 53:7  @content
node_modules/@angular/material/core/theming/_theming.scss 402:3            private-check-duplicate-theme-styles()
node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 47:3  theme()
node_modules/@angular/material/core/theming/_all-theme.scss 47: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()
src/scss/my-theme.scss 88:1                                                @import
src/scss/styles.scss 2:9                                                   root stylesheet


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

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10  using-mdc-theme()
node_modules/@angular/material/button/_button-theme.scss 43:3             color()
node_modules/@angular/material/button/_button-theme.scss 216:7            @content
node_modules/@angular/material/core/theming/_theming.scss 402:3           private-check-duplicate-theme-styles()
node_modules/@angular/material/button/_button-theme.scss 210:3            theme()
node_modules/@angular/material/core/theming/_all-theme.scss 63: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()
src/scss/my-theme.scss 88:1                                               @import
src/scss/styles.scss 2:9                                                  root stylesheet


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

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10  using-mdc-theme()
node_modules/@angular/material/button/_fab-theme.scss 22:3                color()
node_modules/@angular/material/button/_fab-theme.scss 82:7                @content
node_modules/@angular/material/core/theming/_theming.scss 402:3           private-check-duplicate-theme-styles()
node_modules/@angular/material/button/_fab-theme.scss 76:3                theme()
node_modules/@angular/material/core/theming/_all-theme.scss 65: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()
src/scss/my-theme.scss 88:1                                               @import
src/scss/styles.scss 2:9                                                  root stylesheet


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

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10  using-mdc-theme()
node_modules/@angular/material/button/_icon-button-theme.scss 13:3        color()
node_modules/@angular/material/button/_icon-button-theme.scss 68:7        @content
node_modules/@angular/material/core/theming/_theming.scss 402:3           private-check-duplicate-theme-styles()
node_modules/@angular/material/button/_icon-button-theme.scss 62:3        theme()
node_modules/@angular/material/core/theming/_all-theme.scss 64: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()
src/scss/my-theme.scss 88:1                                               @import
src/scss/styles.scss 2:9                                                  root stylesheet


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

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10  using-mdc-theme()
node_modules/@angular/material/card/_card-theme.scss 16:3                 color()
node_modules/@angular/material/card/_card-theme.scss 70:7                 @content
node_modules/@angular/material/core/theming/_theming.scss 402:3           private-check-duplicate-theme-styles()
node_modules/@angular/material/card/_card-theme.scss 64:3                 theme()
node_modules/@angular/material/core/theming/_all-theme.scss 46: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()
src/scss/my-theme.scss 88:1                                               @import
src/scss/styles.scss 2:9                                                  root stylesheet


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

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10  using-mdc-theme()
node_modules/@angular/material/checkbox/_checkbox-theme.scss 39:3         color()
node_modules/@angular/material/checkbox/_checkbox-theme.scss 114:7        @content
node_modules/@angular/material/core/theming/_theming.scss 402:3           private-check-duplicate-theme-styles()
node_modules/@angular/material/checkbox/_checkbox-theme.scss 108:3        theme()
node_modules/@angular/material/core/theming/_all-theme.scss 62: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()
src/scss/my-theme.scss 88:1                                               @import
src/scss/styles.scss 2:9                                                  root stylesheet


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

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10  using-mdc-theme()
node_modules/@angular/material/chips/_chips-theme.scss 44:3               color()
node_modules/@angular/material/chips/_chips-theme.scss 99:7               @content
node_modules/@angular/material/core/theming/_theming.scss 402:3           private-check-duplicate-theme-styles()
node_modules/@angular/material/chips/_chips-theme.scss 93:3               theme()
node_modules/@angular/material/core/theming/_all-theme.scss 54: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()
src/scss/my-theme.scss 88:1                                               @import
src/scss/styles.scss 2:9                                                  root stylesheet


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

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10  using-mdc-theme()
node_modules/@angular/material/core/option/_optgroup-theme.scss 10:3      color()
node_modules/@angular/material/core/_core-theme.scss 16:3                 color()
node_modules/@angular/material/core/_core-theme.scss 83:7                 @content
node_modules/@angular/material/core/theming/_theming.scss 402:3           private-check-duplicate-theme-styles()
node_modules/@angular/material/core/_core-theme.scss 77:3                 theme()
node_modules/@angular/material/core/theming/_all-theme.scss 45: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()
src/scss/my-theme.scss 88:1                                               @import
src/scss/styles.scss 2:9                                                  root stylesheet


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

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10  using-mdc-theme()
node_modules/@angular/material/core/option/_option-theme.scss 14:3        color()
node_modules/@angular/material/core/_core-theme.scss 15:3                 color()
node_modules/@angular/material/core/_core-theme.scss 83:7                 @content
node_modules/@angular/material/core/theming/_theming.scss 402:3           private-check-duplicate-theme-styles()
node_modules/@angular/material/core/_core-theme.scss 77:3                 theme()
node_modules/@angular/material/core/theming/_all-theme.scss 45: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()
src/scss/my-theme.scss 88:1                                               @import
src/scss/styles.scss 2:9                                                  root stylesheet


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

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10  using-mdc-theme()
node_modules/@angular/material/dialog/_dialog-theme.scss 13:3             color()
node_modules/@angular/material/dialog/_dialog-theme.scss 67:7             @content
node_modules/@angular/material/core/theming/_theming.scss 402:3           private-check-duplicate-theme-styles()
node_modules/@angular/material/dialog/_dialog-theme.scss 61:3             theme()
node_modules/@angular/material/core/theming/_all-theme.scss 53: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()
src/scss/my-theme.scss 88:1                                               @import
src/scss/styles.scss 2:9                                                  root stylesheet


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

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10  using-mdc-theme()
node_modules/@angular/material/form-field/_form-field-theme.scss 45:3     color()
node_modules/@angular/material/form-field/_form-field-theme.scss 140:7    @content
node_modules/@angular/material/core/theming/_theming.scss 402:3           private-check-duplicate-theme-styles()
node_modules/@angular/material/form-field/_form-field-theme.scss 134:3    theme()
node_modules/@angular/material/core/theming/_all-theme.scss 49: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()
src/scss/my-theme.scss 88:1                                               @import
src/scss/styles.scss 2:9                                                  root stylesheet


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

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10  using-mdc-theme()
node_modules/@angular/material/input/_input-theme.scss 7:3                color()
node_modules/@angular/material/input/_input-theme.scss 26:7               @content
node_modules/@angular/material/core/theming/_theming.scss 402:3           private-check-duplicate-theme-styles()
node_modules/@angular/material/input/_input-theme.scss 20:3               theme()
node_modules/@angular/material/core/theming/_all-theme.scss 50: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()
src/scss/my-theme.scss 88:1                                               @import
src/scss/styles.scss 2:9                                                  root stylesheet


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

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10  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()
src/scss/my-theme.scss 88:1                                               @import
src/scss/styles.scss 2:9                                                  root stylesheet


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

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10  using-mdc-theme()
node_modules/@angular/material/menu/_menu-theme.scss 14:3                 color()
node_modules/@angular/material/menu/_menu-theme.scss 79:7                 @content
node_modules/@angular/material/core/theming/_theming.scss 402:3           private-check-duplicate-theme-styles()
node_modules/@angular/material/menu/_menu-theme.scss 73:3                 theme()
node_modules/@angular/material/core/theming/_all-theme.scss 58: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()
src/scss/my-theme.scss 88:1                                               @import
src/scss/styles.scss 2:9                                                  root stylesheet


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

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10  using-mdc-theme()
node_modules/@angular/material/radio/_radio-theme.scss 29:3               color()
node_modules/@angular/material/radio/_radio-theme.scss 103:7              @content
node_modules/@angular/material/core/theming/_theming.scss 402:3           private-check-duplicate-theme-styles()
node_modules/@angular/material/radio/_radio-theme.scss 97:3               theme()
node_modules/@angular/material/core/theming/_all-theme.scss 56: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()
src/scss/my-theme.scss 88:1                                               @import
src/scss/styles.scss 2:9                                                  root stylesheet


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

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10  using-mdc-theme()
node_modules/@angular/material/select/_select-theme.scss 19:3             color()
node_modules/@angular/material/select/_select-theme.scss 92:7             @content
node_modules/@angular/material/core/theming/_theming.scss 402:3           private-check-duplicate-theme-styles()
node_modules/@angular/material/select/_select-theme.scss 86:3             theme()
node_modules/@angular/material/core/theming/_all-theme.scss 51: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()
src/scss/my-theme.scss 88:1                                               @import
src/scss/styles.scss 2:9                                                  root stylesheet


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

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10  using-mdc-theme()
node_modules/@angular/material/slider/_slider-theme.scss 15:3             color()
node_modules/@angular/material/slider/_slider-theme.scss 75:7             @content
node_modules/@angular/material/core/theming/_theming.scss 402:3           private-check-duplicate-theme-styles()
node_modules/@angular/material/slider/_slider-theme.scss 69:3             theme()
node_modules/@angular/material/core/theming/_all-theme.scss 57: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()
src/scss/my-theme.scss 88:1                                               @import
src/scss/styles.scss 2:9                                                  root stylesheet


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

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10  using-mdc-theme()
node_modules/@angular/material/snack-bar/_snack-bar-theme.scss 16:3       color()
node_modules/@angular/material/snack-bar/_snack-bar-theme.scss 64:7       @content
node_modules/@angular/material/core/theming/_theming.scss 402:3           private-check-duplicate-theme-styles()
node_modules/@angular/material/snack-bar/_snack-bar-theme.scss 58:3       theme()
node_modules/@angular/material/core/theming/_all-theme.scss 66: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()
src/scss/my-theme.scss 88:1                                               @import
src/scss/styles.scss 2:9                                                  root stylesheet


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

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10  using-mdc-theme()
node_modules/@angular/material/table/_table-theme.scss 20:3               color()
node_modules/@angular/material/table/_table-theme.scss 69:7               @content
node_modules/@angular/material/core/theming/_theming.scss 402:3           private-check-duplicate-theme-styles()
node_modules/@angular/material/table/_table-theme.scss 63:3               theme()
node_modules/@angular/material/core/theming/_all-theme.scss 67: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()
src/scss/my-theme.scss 88:1                                               @import
src/scss/styles.scss 2:9                                                  root stylesheet


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

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10  using-mdc-theme()
node_modules/@angular/material/tabs/_tabs-theme.scss 20:3                 color()
node_modules/@angular/material/tabs/_tabs-theme.scss 137:7                @content
node_modules/@angular/material/core/theming/_theming.scss 402:3           private-check-duplicate-theme-styles()
node_modules/@angular/material/tabs/_tabs-theme.scss 131:3                theme()
node_modules/@angular/material/core/theming/_all-theme.scss 61: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()
src/scss/my-theme.scss 88:1                                               @import
src/scss/styles.scss 2:9                                                  root stylesheet


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

@material/theme/_theme-color.scss 67:5                                    tone()
@material/theme/_theme-color.scss 86:14                                   contrast-tone()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 123:10  using-mdc-theme()
node_modules/@angular/material/tooltip/_tooltip-theme.scss 12:3           color()
node_modules/@angular/material/tooltip/_tooltip-theme.scss 49:7           @content
node_modules/@angular/material/core/theming/_theming.scss 402:3           private-check-duplicate-theme-styles()
node_modules/@angular/material/tooltip/_tooltip-theme.scss 43:3           theme()
node_modules/@angular/material/core/theming/_all-theme.scss 48: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()
src/scss/my-theme.scss 88:1                                               @import
src/scss/styles.scss 2:9                                                  root stylesheet


./src/scss/styles.scss - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
var(--theme-primary-500) 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 24: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 176:5  @content
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 216:3  disable-mdc-fallback-declarations() 
node_modules/@angular/material/core/theming/_all-theme.scss 44:3         all-component-themes()
src/scss/my-theme.scss 88:1                                              @import
src/scss/styles.scss 2:9                                                 root stylesheet


./src/scss/styles.scss - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
var(--theme-primary-500) 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 31: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 176:5  @content
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 216:3  disable-mdc-fallback-declarations()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 175: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()
src/scss/my-theme.scss 88:1                                              @import
src/scss/styles.scss 2:9                                                 root stylesheet


./src/scss/styles.scss - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
var(--theme-primary-500) 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 32: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 176:5  @content
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 216:3  disable-mdc-fallback-declarations()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 175: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()
src/scss/my-theme.scss 88:1                                              @import
src/scss/styles.scss 2:9                                                 root stylesheet

Dec 01 '22 15:12 anisabboud

@LayZeeDK thanks for that analysis, helpful in pinpointing some things!

As far as addressing the contrasting color issue, elaborating on my initial comment I suppose the patch I am proposing would be in _mdc-helpers.scss. As an example, when getting the contrasting color for primary, instead of just doing https://github.com/angular/components/blob/2e5fab612b0aa53dd2c373425a6ee5cd874371db/src/material/core/mdc-helpers/_mdc-helpers.scss#L122-L123

it would be nice to be able to default or fallback to something like:

$on-primary: theming.get-contrast-color-from-palette(map.get($config, primary), 500);

(which is how I believe it used to behave). When I did this locally things seemed to work fine and it addressed most of the issues with contrasting colors. I am not sure if the idea is to move entirely towards sass derivations for colors/contrasts (i.e. no more need for storing contrasting colors in the palette map) but that would be very limiting imo for dynamic themes with CSS vars. Anyways, not sure exactly how it should be implemented (if priority should be given to what is in the palette or if mdc functions are able to derive it) but I think something like this could help buy time for existing dynamic theme features to continue to work on Angular 15 and minimize needs for legacy components (other patches would be needed as mentioned above for things like paginator/progress-bar).

Dec 01 '22 17:12 tkutcher

Hello,

I downgraded to version 14.2.7, I use CSS variables as well and this broke my app. Been for more than 3 hours trying to figure out the issue and then I found @LayZeeDK mastodon post on google search (seems like he quit twitter for good) which pointed to this issue.

Hoping for a fix :D

Dec 01 '22 23:12 renatoaraujoc

Even if I use legacy mixins the warning is still there....var(--palette-primary-500) is not a color. Falling back to "dark" tone.

these are mixins that I use, some components have the shared variant but as far as I understand I don't use any MDC version:

@include mat.legacy-core();
@include mat.legacy-autocomplete-theme(dark.$theme);
@include mat.legacy-button-theme(dark.$theme);
@include mat.bottom-sheet-theme(dark.$theme);
@include mat.legacy-card-theme(dark.$theme);
@include mat.legacy-checkbox-theme(dark.$theme);
@include mat.legacy-chips-theme(dark.$theme);
@include mat.datepicker-theme(dark.$theme);
@include mat.legacy-dialog-theme(dark.$theme);
@include mat.divider-theme(dark.$theme);
@include mat.expansion-theme(dark.$theme);
@include mat.legacy-form-field-theme(dark.$theme);
@include mat.grid-list-theme(dark.$theme);
@include mat.icon-theme(dark.$theme);
@include mat.legacy-input-theme(dark.$theme);
@include mat.legacy-list-theme(dark.$theme);
@include mat.legacy-menu-theme(dark.$theme);
@include mat.legacy-progress-bar-theme(dark.$theme);
@include mat.legacy-progress-spinner-theme(dark.$theme);
@include mat.legacy-radio-theme(dark.$theme);
@include mat.legacy-select-theme(dark.$theme);
@include mat.legacy-slide-toggle-theme(dark.$theme);
@include mat.legacy-slider-theme(dark.$theme);
@include mat.legacy-snack-bar-theme(dark.$theme);
@include mat.legacy-table-theme(dark.$theme);
@include mat.legacy-tabs-theme(dark.$theme);
@include mat.tree-theme(dark.$theme);
@include mat.sidenav-theme(dark.$theme);
@include mat.stepper-theme(dark.$theme);
@include mat.toolbar-theme(dark.$theme);
@include mat.button-toggle-theme(dark.$theme);

Dec 02 '22 09:12 GeorgeKnap

components components copied to clipboard

bug(theming): WARNING: var(--primary, #4bcd3e) is not a color. Falling back to "dark" tone.

Is this a regression?

The previous version in which this bug was not present was

Description

Reproduction

Expected Behavior

Actual Behavior

Environment

Overview of Angular Material 15 components

Datepicker

MDC-based Angular Material components

components
components copied to clipboard