Angular M3 custom thema apply wrong contrast - Material 18

[kemotx90]

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

17.* with m-2 custom palette contrast definition

Description

With M-3 custom theme and custom palette (generated with suggested material schema) the contrast applied it's lower than expected.

my related stackoverflow

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-st8e6a?file=src%2Fstyles%2Fpalette%2Fpalette.scss Steps to reproduce: run application

Expected Behavior

contrast applyed by the following rules M3 roles

Actual Behavior

low contrast applied and text unreadable (black text on blue content)

Environment

• Angular: 18.0.0
• CDK/Material: 18.0.2
• Browser(s): chrome
• Operating System (e.g. Windows, macOS, Ubuntu): windows

[amysorto]

Can you take a look at your StackBlitz? A a quick glance theres some errors for me related to the theming.

Is there a specifc component you are seeing these incorrect contrast? Can you provide a screenshot of what you are seeing?

[kemotx90]

Sure.

primary

secondary

another primary palette

this is the code that I use to apply bg-color

@use "@angular/material" as mat;

@import "../palette/palette";

@mixin theme($theme) {
  .sidenav-scroll-wrapper {
    background-color: mat.get-theme-color($theme, primary);
  }
}

you can find full scss code: here