angular / angular/components

feat(theming): Add a typesafe like API to get theming tokens CSS var names

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

Description

### Feature Description

Currently there are Sass mixings that allow to, in a typesafe safe way, override theming tokens:

```
mat.snack-bar-overrides(....)
```

When saying typesafe, I mean that if a token is renamed or removed, the compiler will trigger an error. There are no equivalent to generating the CSS custom properties associated with these tokens.

### Use Case

Why this could help?

I have a component to show temporary messages, much like an snack-bar, but it isn't a snack bar, but it uses the same snack bar theming, same colors, for example. So this uses currently `--mat-snack-bar-` prefixed CSS variables. The problem is that migrating from version 19 up to 21, many of these variables names were renamed from `--mdc`- to `--mat`- prefixes thankfully automatically but it missed that for snack bars, the prefixes changed from snackbar to snack-bar.

If instead of using the var named directly we had some kind of:

```
mat.token-var(snack-bar, container-color, white)
```

to generate `var(--mat-snack-bar-container-color, white)` in a typesafe way, triggering an error if a bad component or token name is used, this could have avoided the missed rename.

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Aucun fichier ni point d’entrée de test n’est nommé. Commencez par examiner les mixins d’override Sass existants, notamment mat.snack-bar-overrides, ainsi que le nommage des CSS custom properties de la snack-bar décrit ici. Le travail serait considéré comme terminé lorsqu’une API typesafe convenue pour générer les noms de variables de tokens et une couverture des noms de composants ou de tokens non valides seraient disponibles.

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

Évaluation

Stack technique
angular, sass
Domaine
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.