feat(theming): Mixins for reading component style tokens
- 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
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