angular / angular/components

feat(theming): Mixins for reading component style tokens

Aperta
#30,083 0 commenti 8 reazioni 0 assegnatari Vedi su GitHub
area: material/core feature P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

### 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.

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

La issue non indica file o test. Inizia leggendo i mixin `mat.-overrides` esistenti e confrontando i relativi token con l’API `mat.-get` proposta. Il lavoro sarà completo quando saranno definiti l’ambito desiderato del mixin e la relativa denominazione, e gli utenti potranno leggere i valori dei token del tema dei componenti per gli stili personalizzati.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, sass, typescript
Ambito
design, frontend
Tipo di issue
Funzionalità
Difficoltà
5/5
Tempo stimato
Più di una settimana
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
30/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.