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

[iKrishnaSahu]

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

NA

Actual Behavior

NA

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

[crisbeto]

Can you post what your custom palette looks like?

[anisabboud]

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

[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

[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.)

[iKrishnaSahu]

@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))

[Enngage]

We are having the same issues after upgrading to v15.

[alorle]

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.

[mpo-dev]

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,
    ...
  ),
);

[squelix]

Same here

[russcarver]

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