bug(tabs): customizable tokens background-color and foreground-color have no effect

[ivibe]

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 trying to override tabs background and foreground colors

  @include mat.tabs-overrides(
    (
      background-color: red,
      foreground-color: white,
    )
  );

nothing happens.

Overridden colors take effect only when apply backgroundColor directive on tabs component.

Moreover after applying backgroundColor directive customizable tokens active-label-text-color and active-indicator-color aren't being applied anymore.

  @include mat.tabs-overrides(
    (
      background-color: red,
      foreground-color: white,
      active-label-text-color: green,
      active-indicator-color: green,
    )
  );

In this case using directive color on tabs component solve the problem.

Reproduction

StackBlitz link: https://stackblitz.com/edit/2xvcvpsg
Steps to reproduce:
It's self-explanatory

Expected Behavior

Customizable tokens should apply regardless directives backgroundColor and color

Actual Behavior

Customizable tokens are applied only when directives backgroundColor and color are used on tab component.

Environment

Angular CLI: 19.0.4
Node: 22.11.0
Package Manager: pnpm 9.13.2
OS: linux x64

Angular: 19.0.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package Version

@angular-devkit/architect 0.1900.4 (cli-only)
@angular-devkit/build-angular 19.0.4
@angular-devkit/core 19.0.4
@angular-devkit/schematics 19.0.4
@angular/cdk 19.0.2
@angular/cli 19.0.4
@angular/material 19.0.2
@angular/material-luxon-adapter 19.0.2
@angular/ssr 19.0.4
@schematics/angular 19.0.4
rxjs 7.8.1
typescript 5.6.3
webpack 5.97.1
zone.js 0.15.0

[amysorto]

Verified this is issue is occuring for the tab style override mixin

[karmasakshi]

Overrides work if you add backgroundColor="primary" | "accent" | "warn" to the element.

[dark0ni]

I have the same problem, materials overrides my styling for example with:

:root {
    @include mat.tabs-overrides((
        active-indicator-color: orange,
        divider-color: red,
        background-color: red,
        foreground-color: red
    ));
}

it shows in browser debugger but overwritten by material itself.
over the var also dont work:

document.documentElement.style.setProperty(--mat-tab-header-active-label-text-color, this.theme.themeColors.primaryColor);
--mat-tab-header-active-label-text-color material overwrites my change. For button everything works fine.

There also other components affected like this:

i think its a css order problem that override has no effect

[AnkitaSood]

.mat-mdc-tab .mdc-tab__ripple::before has opacity:0 which is why values of token active-ripple-color is not reflecting.

[Anlanther]

Overrides work if you add backgroundColor="primary" | "accent" | "warn" to the element.

However backgroundColor on MatTabGroup has been labelled as deprecated according to docs, so it should not be used as the official solution.