angular / angular/components

FR(Theming):Typography override in theme-overrides

Ouverte
#31,920 0 commentaires 3 réactions 0 personnes assignées Voir sur GitHub
area: theming feature P3
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

Image

Image

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

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.