bug(THEME): Unable to use 'var' for defining theme colors

Enngage commented 1 year ago

Is this a regression?

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

The previous version in which this bug was not present was

14.x.y

Description

We have customizable theming and define theme such as:

 $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)
        )
    );

And this worked perfectly fine in previous material versions, but in v15 we are getting exception such as:

HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: var(--theme-accent-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 31:9   @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\theming\_all-theme.scss 87:3            angular-material-theme()
  web\theme\trainer-app-theme.scss 567:5                                      app-theme()
  web\theme\trainer-theme.scss 24:5                                           root stylesheet

The problem is that you are currently now using color.adjust which doesn't seem to work in combination with var. Sure enough, if we replace var(--theme-accent-500) with any specific color ('red', '#FF0000') the error goes away.

Is this intended? Can this be fixed in some way?

Reproduction

Use 'var' to define theme colors

Expected Behavior

Same as in version 14.x.y

Actual Behavior

Project cannot be compiled with error such as HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: $color: var(--theme-accent-500) is not a color.

Environment

Angular CLI: 15.0.0 Node: 16.18.0 Package Manager: npm 8.19.2 OS: win32 x64

Angular: 15.0.0 ... animations, cdk, cli, common, compiler, compiler-cli, core ... forms, google-maps, language-service, material ... material-luxon-adapter, platform-browser ... platform-browser-dynamic, platform-server, router ... service-worker

Package Version

@angular-devkit/architect 0.1500.0 @angular-devkit/build-angular 15.0.0 @angular-devkit/core 15.0.0 @angular-devkit/schematics 15.0.0 @schematics/angular 15.0.0 rxjs 7.5.7 typescript 4.9.3

Enngage commented 1 year ago

Oh, just noticed this was also reported in https://github.com/angular/components/issues/25981