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

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

We are getting error in below code -

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

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

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

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

Reproduction

Steps to reproduce: 1. 2.

Expected Behavior

NA

Actual Behavior

NA

Environment

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

[crisbeto]

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.

[yusijs]

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.