angular / angular/components

FR(Theming):Typography override in theme-overrides

Offen
#31,920 0 Kommentare 3 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: theming feature P3
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

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

Beitragsleitfaden

Beitragsleitfaden öffnen

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

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.