Skip to content

bug(core-theming): get-theme-color($theme, $role-color) returns incorrect shades for 4 colors #29577

@vulture9

Description

@vulture9

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

For the given function get-theme-color($theme, $role-color) four of the shades are incorrectly mapped:
Light mode:

  • surface . Current implementation is using n-98 , where should be mapped to n-99.

dark mode:

  • surface . Currently using n-10, where should be mapped to n-6.
  • on-surface-variant Currently using nv-80 , where should be mapped to nv-90
  • surface-container-highest Currently using n-22, where should be mapped to n-24.

reference to comparison material theme builder:
https://material-foundation.github.io/material-theme-builder/
image
image

Tested version:
"@angular/material": "18.1.0",

Reproduction

Steps to reproduce:

  1. call get-theme-color($theme, role-color) for role colors 'surface', 'on-surface-variant', 'surface-container-highest'
  2. compare shades of colors from the pallet that are returned. wrong shades are used according to spec

Expected Behavior

correct shades are returned based on the specification. reproduction steps are very clear.

Actual Behavior

slightly wrong color shades are returned than on specification. just compare whatever is here for given mode light/dark mode and you can clearly see that wrong shades are used

Environment

  • Angular: 18.1.0
  • CDK/Material: 18.1.0
  • Browser(s): all, browser independent
  • Operating System (e.g. Windows, macOS, Ubuntu): Mac and Windows

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: theming

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions