bug(tabs): customizable tokens background-color and foreground-color have no effect
- Langage dominant
- TypeScript
- Étoiles
- 25k
- Forks
- 6.8k
- Merge moyen
- 1 j 8 h
- PR mergées (30 j)
- 91
Description
### 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
```typescript
@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.
```typescript
@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
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par la reproduction StackBlitz liée et comparez les tokens tabs-overrides avec les directives backgroundColor et color. Suivez l’effet de ces directives sur le style des tabs, puis vérifiez que background-color, foreground-color, active-label-text-color et active-indicator-color s’appliquent sans aucune des deux directives.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- angular, typescript
- Domaine
- frontend
- Type d'issue
- Bug
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Activité
- Calme
- Clarté
- Plutôt claire
- Accessibilité débutants
- 50/100