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
No response
Description
When using ng generate @angular/material:theme-color
schematic to generate a CSS theme and comparing this to my own color tools, I noticed that for high contrast onTertiary, there seems to be a mismatch.
Shortened for simplicity in the generated CSS. Notice these colors match which means they would blend together.
@media (prefers-contrast: more) {
--mat-sys-tertiary: light-dark(#56004f, #ffeaf6);
--mat-sys-on-tertiary: light-dark(#56004f, #ffeaf6);
}
I tracked this down to this section of the schematic:
css += createLightDarkVar(
leftSpacing,
'on-tertiary',
isHighContrast ? lightScheme.tertiary : lightScheme.tertiaryPalette.tone(100),
isHighContrast ? darkScheme.tertiary : darkScheme.tertiaryPalette.tone(20),
);
I believe that lightScheme.onTertiary
and darkScheme.onTertiary
should be used here? However I am honestly out of my depth.
Reproduction
Steps to reproduce:
- run
ng generate @angular/material:theme-color
- Use primary
#6002EE
with the rest at defaults, choose high-contrast and no to scss. - Consult high contrast section for tertiary
Expected Behavior
The content and surface should be highly contrasting.
Actual Behavior
The content and surface are the same color.
Environment
Angular CLI: 19.2.1
Node: 22.14.0
Package Manager: npm 10.9.2
OS: win32 x64
Angular: 19.2.1
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
@angular-devkit/architect 0.1902.1
@angular-devkit/build-angular 19.2.1
@angular-devkit/core 19.2.1
@angular-devkit/schematics 19.2.1
@angular/cdk 19.2.2
@angular/material 19.2.2
@schematics/angular 19.2.1
rxjs 7.8.1
typescript 5.7.3
zone.js 0.15.0