Skip to content

bug(Theme): The M3 Theme Generator schematic selects an incorrect value for high-contrast onTertiary #30603

Closed
@clark-stevenson

Description

@clark-stevenson

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:

  1. run ng generate @angular/material:theme-color
  2. Use primary #6002EE with the rest at defaults, choose high-contrast and no to scss.
  3. 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

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: ng-generateSchematics that generate code in user projects

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions