angular / angular/components

feat(theming): Mixins for reading component style tokens

Offen
#30,083 0 Kommentare 8 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/core feature P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### Feature Description

Mixins to get values from a component theme that takes a token as parameter, for example:
```
p {
color: @include mat.button-get(text-label-text-color);
}
```
it would generate:
```
p {
color: var(--mdc-outlined-button-label-text-color, var(--mat-sys-primary)); // <== Actual value used for text-button
}
```

Ideally, we would have as many mixins as there are components (+core) and we could use the same tokens as the `mat.-overrides` mixins.

> The `mat.-get` mixin name is a proposal, open to suggestions.

### Use Case

I have a custom component and I want to apply the same style as a material component. I also want to make sure that they are always in sync when I change my theme.

For example, I want to have a text `

` with the same font color as my `mat-button` next to it.

For now, I need to rely on private CSS variables to do that, which is not ideal for maintainability.

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Das Issue nennt keine Dateien oder Tests. Beginne damit, die vorhandenen `mat.-overrides`-Mixins zu lesen und ihre Tokens mit der vorgeschlagenen `mat.-get`-API zu vergleichen. Die Aufgabe wäre abgeschlossen, wenn der gewünschte Mixin-Umfang und die Benennung definiert sind und Benutzer die Theme-Token-Werte von Komponenten für benutzerdefinierte Styles lesen können.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, sass, typescript
Bereich
design, frontend
Issue-Typ
Feature
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
30/100

Neue Issues direkt in Ihr Postfach

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