angular / angular/components

feat(theming): Mixins for reading component style tokens

Ouverte
#30,083 0 commentaires 8 réactions 0 personnes assignées Voir sur GitHub
area: material/core feature P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

L’issue ne nomme ni fichiers ni tests. Commencez par lire les mixins `mat.-overrides` existants et comparez leurs tokens avec l’API `mat.-get` proposée. La tâche sera terminée lorsque la portée souhaitée du mixin et sa nomenclature seront définies, et que les utilisateurs pourront lire les valeurs des tokens de thème des composants pour des styles personnalisés.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, sass, typescript
Domaine
design, frontend
Type d'issue
Fonctionnalité
Difficulté
5/5
Temps estimé
Plus d'une semaine
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
30/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.