angular / angular/components

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

Abierto
#32,800 0 comentarios 0 reacciones 0 asignados Ver en GitHub
area: material/core feature P4
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

No se nombra ningún archivo ni punto de entrada de pruebas. Empieza examinando los mixins de override de Sass existentes, incluido mat.snack-bar-overrides, y la nomenclatura de las CSS custom properties de la snack-bar descrita aquí. Se consideraría completado contar con una API typesafe acordada para generar nombres de variables de tokens y cobertura para nombres de componentes o tokens no válidos.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, sass
Área
frontend
Tipo de issue
Nueva funcionalidad
Dificultad
5/5
Tiempo estimado
Más de una semana
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
30/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.