FR(Theming):Typography override in theme-overrides
- Vorherrschende Sprache
- TypeScript
- Sterne
- 25k
- Forks
- 6.8k
- Ø Merge
- 1 T. 8 Std.
- Gemergte PRs (30 T.)
- 91
Beschreibung
### 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
Beitragsleitfaden
Rechercherichtung
Beginne damit, die Implementierung von mat.theme-overrides und die in der Reproduktion beschriebene Generierung der Typografievariablen nachzuverfolgen. Verwende das Beispiel body-small, um zu prüfen, ob ein Override in Kurzschreibweise seine separaten Eigenschaften ohne manuelle Duplizierung aktualisieren kann. Fertig ist die Aufgabe, wenn die Kurzschreibweise die erwarteten Typografievariablen erzeugt und bestehende Komponentennutzer die überschriebenen Werte verwenden.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, scss
- Bereich
- design, frontend
- Issue-Typ
- Feature
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 45/100