search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.24k stars 6.7k forks source link

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

Open iKrishnaSahu opened 1 year ago

iKrishnaSahu commented 1 year ago

Is this a regression?

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:

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 commented 1 year ago

Can you post what your custom palette looks like?

anisabboud commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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. ```dart ./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 commented 1 year ago

@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 commented 1 year ago

We are having the same issues after upgrading to v15.

alorle commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

Same here

russcarver commented 1 year ago

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
alorle commented 1 year ago

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

russcarver commented 1 year ago

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

alorle commented 1 year ago

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.

mpo-dev commented 1 year ago

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),
  ));
}
vpetrusevici commented 1 year ago

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!

russcarver commented 1 year ago

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.

yusijs commented 1 year ago

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.

NechiK commented 1 year ago

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

russcarver commented 1 year ago

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

crisbeto commented 1 year ago

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.

yusijs commented 1 year ago

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.

tkutcher commented 1 year ago

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:

michaelfaith commented 1 year ago

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

richardsengers commented 1 year ago

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

richardsengers commented 1 year ago

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.

LayZeeDK commented 1 year ago

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:

  1. Use legacy Angular Material declarables and styles when both a legacy variant and an MDC-based variant exists.
  2. Adress the style issues described in the section Datepicker.
  3. 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

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

  1. 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.
  2. 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).

anisabboud commented 1 year ago

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 ```dart ./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 ```dart ./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 ```
tkutcher commented 1 year ago

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

renatoaraujoc commented 1 year ago

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

GeorgeKnap commented 1 year ago

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);
LayZeeDK commented 1 year ago

@GeorgeKnap See the Datepicker section in https://github.com/angular/components/issues/25981#issuecomment-1331902121.

Enngage commented 1 year ago

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 ~28 warnings

Yes please, this would help so much.. If it's just one Error, I'm hoping you guys can add a legacy fallback to at least partially support using dynamic themes.. We can always override styles if we need to until you are able to officially support it.

danielbater247 commented 1 year ago

Also having this issue using css vars. I can't see an official note if this is going to be resolved? I got the issue loading only the legacy component themes after doing a ng update @angular/material@15

@include mat.all-legacy-component-themes($app-theme);
SassError: $color: HSLA(var(--primary), 1) is not a color.
  ╷
9 │   --mat-mdc-button-ripple-color: #{rgba($color, 0.1)};
  │                                    ^^^^^^^^^^^^^^^^^
  ╵
  node_modules\@angular\material\button\_button-theme-private.scss 9:36         -ripple-color()
AdrianM commented 1 year ago

Same here, would be nice if the error in "_progress-bar-theme.scss" could be changed to a warning or fixed.

richardsengers commented 1 year ago

Any news about this issue would be really appreciated, because we are unable to upgrade to Angular 15 and like all previous Angular releases we would like to stay updated (from Angular 2 till Angular 14 we had no problems updating, this is the first Angular release which we cannot update)

aalbericio commented 1 year ago

We are using this theme initialization since, I think, the very first Angular Material version.

We really need this fixed and supported since our applications make intensive use of dynamic, multi-theme features.

Thanks!

ricardojbertolin commented 1 year ago

Hello community, I'm using CSS variables in a large Angular app and unfortunately I'm stuck on the upgrade to A15 (sadly, it's the first time that cannot upgrade).

I'm getting the "...is not a color. Falling back to "dark" tone." warning all the time. However, the app works and it's properly styled! But the warning appears all the time and makes unpleasant to work with it.

I appreciate that you're designing a new theming system based on CSS vars. Nevertheless, on the meantime we need a workaround to skip those warnings, because the app works fine updated to A15.

Can you please help?

crisbeto commented 1 year ago

I've merged in #26260 for the 15.0.3 release that should resolve most of the issues. It fixes all the compilation errors when passing in a CSS-variable-based theme both into the MDC and legacy components. Also all the warnings should be gone for the legacy components while there are ~4 warnings left for the MDC ones that we can't do much about at the moment. When we switch the select, menu, list and autocomplete to the new token-based theming API, the warnings will go away.

ricardojbertolin commented 1 year ago

I've installed Material 15.0.3 and worked like a charm! No more warnings. Many many thanks @crisbeto for your support.

vpetrusevici commented 1 year ago

Hi guys! I spent hours to update this awesome library angular-material-css-vars(link to PR) to Angular15 but i got this error from @include mat.all-component-themes($theme); and from @include mat.all-component-colors($dark-theme);

SassError: $map: null is not a map.
  ╷
8 │   $foreground: map.get($config, foreground);
  │                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules\@angular\material\core\ripple\_ripple-theme.scss 8:16  color()
  node_modules\@angular\material\core\_core-theme.scss 14: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()
  projects\material-css-vars\src\lib\_main.scss 66:7                  init-mat-theme()
  projects\material-css-vars\src\lib\_main.scss 85:3                  init-material-css-vars()
  src\styles.scss 8:1

I tried to reproduce the error by copying this code from _ripple-theme.scss and using my theme as variable, but it works without errors

  $config: theming.get-color-config($config-or-theme);
  $foreground: map.get($config, foreground);

I will be grateful for any help

crisbeto commented 1 year ago

@vpetrusevici I've seen that error happen if one of the theme palettes isn't wrapped in mat.define-palette.

vpetrusevici commented 1 year ago

@crisbeto this is how it looks like

@mixin init-mat-theme($dark-theme-selector, $typography-config: mat.define-typography-config()) {
  @include mat.core();

  $primary: mat.define-palette($mat-css-palette-primary);
  $accent: mat.define-palette($mat-css-palette-accent);
  $warn: mat.define-palette($mat-css-palette-warn);

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

  $tmp1: map-remove($theme, color, foreground, background);
  $tmp1: map-merge($tmp1, foreground, $mat-css-palette-foreground);
  $tmp1: map-merge($tmp1, background, $mat-css-palette-background);
  $tmp2: map-merge((), color, $tmp1);
  $theme: map-merge($tmp2, $tmp1);

  $dark-theme: mat.define-dark-theme((
    color: (
      primary: $primary,
      accent: $accent,
      warn: $warn
    ),
    typography: $typography-config
  ));

  $tmp1: map-remove($dark-theme, color, foreground, background);
  $tmp1: map-merge($tmp1, foreground, $mat-css-palette-foreground-dark);
  $tmp1: map-merge($tmp1, background, $mat-css-palette-background-dark);
  $tmp2: map-merge((), color, $tmp1);
  $dark-theme: map-merge($tmp2, $tmp1);
  // set global variable so passed-in content can use the theme
  $mat-css-theme: $theme !global;
  // NOTE: light theme is the default theme
  @include mat.all-component-themes($theme);
  @include mat.typography-hierarchy($theme);

  @content;

  @if $dark-theme-selector {
    $mat-css-theme: $dark-theme !global;
    #{$dark-theme-selector} {

      @include mat.all-component-colors($dark-theme);
      // add content passed in, which can use the $theme variable to apply the dark theme to
      // other theme mixins needed by the app
      @content;
    }
  }

  @include mat-css-other-overwrites;

  $mat-css-theme: null !global;
}

and here how palettes look Did we miss smth else?

vpetrusevici commented 1 year ago

Ok. I just removed all map-merge and map-remove rows and got old error

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: rgb(var(--palette-primary-500)) is not a color.
   ╷
75 │   @return rgba(mdc-theme-color.prop-value($palette), 0.87);
   │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules\@angular\material\form-field\_form-field-native-select.scss 75:11              -get-focused-arrow-color()
  node_modules\@angular\material\form-field\_form-field-native-select.scss 110:20             @content
  node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 192:5                     @content
  node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 232:3                     disable-mdc-fallback-declarations()
  node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 191:3                     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 56: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 192:5                     @content
  node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 232:3                     disable-mdc-fallback-declarations()
  node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 191: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()
  projects\material-css-vars\src\lib\_main.scss 43:3                                          init-mat-theme()
  projects\material-css-vars\src\lib\_main.scss 70:3                                          init-material-css-vars()
  src\styles.scss 8:1                                                                         root stylesheet
vpetrusevici commented 1 year ago

I understood this part. I don't need rgb() anymore in my pallets

vpetrusevici commented 1 year ago

Now it compiles without remove/merge logic, but with warning and still colors are not applied

var(--palette-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 192:5  @content
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 232:3  disable-mdc-fallback-declarations()
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 191: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()
projects\material-css-vars\src\lib\_main.scss 44:3                       init-mat-theme()
projects\material-css-vars\src\lib\_main.scss 72:3                       init-material-css-vars()
src\styles.scss 8:1                                                      root stylesheet
vpetrusevici commented 1 year ago

@crisbeto it looks like a bug in theming.get-color-config function. It returns color only in @return map.get($theme, color), but other code tries to use it as theme config like

$config: theming.get-color-config($config-or-theme);
 $foreground: map.get($config, foreground);

I changed it to

$config: $config-or-theme;
 $foreground: map.get($config, foreground);

and avoided the error. Mb i missed smth, but it strange why code tries to use foreground from color object and not from actual theme

michaelfaith commented 1 year ago

@vpetrusevici: notice the variable name is $config-or-theme. At the point where it's coming in, it's uncertain whether that's an old version of the theme object, or the new version that uses separate configs for color, typography, etc (they changed the structure of the theme object several versions ago). For backwards compatibility, some of the functions accept both, and then figure out which type of object it is. This all seems a bit off topic from the original issue, though, tbh.

vpetrusevici commented 1 year ago

@michaelfaith yes, i noticed it. and function get-color-config($theme, $default: null) tries to return config object, but actualy it returns color field only here

@if map.has-key($theme, color) {
    @return map.get($theme, color);
  }

after this code tries to use foreground from this 'color' config. Should it be here?

vpetrusevici commented 1 year ago

Ok. I just changed my themes definition to this 

  $theme: (
    primary: $primary,
    accent: $accent,
    warn: $warn,
    is-dark: false,
    foreground: $mat-css-palette-foreground,
    background:  $mat-css-palette-background
  );

  $dark-theme: (
    primary: $primary,
    accent: $accent,
    warn: $warn,
    is-dark: true,
    foreground: $mat-css-palette-foreground-dark,
    background:  $mat-css-palette-background-dark
  );

and now i have only warning var(--palette-primary-500) is not a color. Falling back to "dark" tone and colors still don't work :(

michaelfaith commented 1 year ago

and function get-color-config($theme, $default: null) tries to return config object, but actualy it returns color field only here

@if map.has-key($theme, color) {
    @return map.get($theme, color);
  }

Color is not just a "field" here. color is a map/config that has the foreground, background maps along with the primary, accent, and warn palettes you passed in via the define function. That's part of the new theme config structure. What you have in your last post is the old theme structure. But nonetheless, malformed theme configs isn't really the topic of this issue. I'd suggest opening another issue if you continue having problems with the structure of the theme object.