angular / angular/components

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

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

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Non è indicato alcun file né alcun punto di ingresso dei test. Inizia esaminando i mixin di override Sass esistenti, incluso mat.snack-bar-overrides, e la denominazione delle CSS custom properties della snack-bar descritta qui. Il lavoro sarebbe considerato completato con un’API typesafe concordata per generare i nomi delle variabili dei token e una copertura per i nomi di componenti o token non validi.

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

Valutazione

Stack tecnologico
angular, sass
Ambito
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.