bug(Button): Ripple color is not automatically calculated

[danielalexis]

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 mat.button-overrides() when changing the filled-ripple-color property the ripple becames the full color instead of having an opacity of 12%

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-starter-heyt9c
Steps to reproduce:

1. Press on button
2. Wrong opacity is displayed

in the SCSS file theres the right way to do it

Expected Behavior

Ripple have a subtle color, opacity 12%
Expected Color:

Actual Behavior

Ripple has full color
Actual behavior:

Environment

• Angular: 19.0.0
• CDK/Material: 19.0.0
• Browser(s): Firefox 132
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[msrumon]

This overrides mixins are killin' me TBH. The Angular Material team needs to work on this. Make the process simpler, give us a way to provide primary / secondary / tertiary / error values for mat.theme users. 🙏

[danielalexis]

You can generate a theme using ng generate @angular/material:theme-color this gives you a primary and tertiary palettes which you can use on mat.theme

[msrumon]

No, that's not what I'm talking about. Before mat.theme, we used to have mat.define-theme (which still is supported BTW) where we would create separate themes for light and dark modes. Then we could easily generate alternate-colored components using mat.<component>-theme mixins. For example,

[m3-tertiary-button] {
  @include mat.button-color(
    $light-theme,
    $color-variant: tertiary
  );

  @media (prefers-color-scheme: dark) {
    @include mat.button-color(
      $dark-theme,
      $color-variant: tertiary
    );
  }
}

We needed to be able to do the same for mat.theme as well, since we don't "define" any additional "theme"s in this case and light-dark does most of those works for us automagically. Something like:

@mixin theme-overrides($variant: primary) {
  // ...
}

Here, default is "primary" palette, but we can generate themes for other palettes ("secondary"/"tertiary"/"error") as well.

[msrumon]

A more extensive demo: https://stackblitz.com/edit/stackblitz-starters-allvh4