FR(Theming):Typography override in theme-overrides
- 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 using `mat.theme-overrides((` I notice that the css variables created for typography require a one line definition but also each property has to be defined separately.
### Reproduction
```
@include mat.theme-overrides((
body-small: 400 1.125rem/1.6875rem Inter,
))
```
results in css variables
as you can see the one line definition gets replaced by my override but I have to do a one by one property replacement so that other components using body-small are not using the theme's default values.
```
@include mat.theme-overrides((
body-small: 400 1.125rem/1.6875rem Inter,
body-small-size: 1.125rem,
body-small-font: 'Inter Tight',
body-small-line-height: 1.6875rem,
body-small-weight: 400,
))
```
### Expected Behavior
It would be nice if we can just use `body-small: 400 1.125rem/1.6875rem Inter,` and that would also update the separate properties internally in the theme if is possible to extract those values (which I think it is).
### Actual Behavior
I feel like we have to over-define the same properties:
```
@include mat.theme-overrides((
body-small: 400 1.125rem/1.6875rem Inter,
body-small-size: 1.125rem,
body-small-font: 'Inter Tight',
body-small-line-height: 1.6875rem,
body-small-weight: 400,
))
```
### Environment
- Angular: 20.3.2
- CDK/Material: 20.2.4
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): MacOS
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par retracer l’implémentation de mat.theme-overrides et la génération des variables de typographie décrite dans la reproduction. Utilisez l’exemple body-small pour vérifier si un override abrégé peut mettre à jour ses propriétés séparées sans duplication manuelle. Le travail est terminé lorsque la forme abrégée produit les variables de typographie attendues et que les composants existants qui les utilisent prennent en compte les valeurs remplacées.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- angular, scss
- Domaine
- design, frontend
- Type d'issue
- Fonctionnalité
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 45/100