Description
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
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