angular / angular/components

feat(theming): Mixins for reading component style tokens

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

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

El issue no especifica archivos ni tests. Empieza leyendo los mixins `mat.-overrides` existentes y comparando sus tokens con la API `mat.-get` propuesta. El trabajo estaría terminado cuando estén definidos el alcance deseado del mixin y su nomenclatura, y los usuarios puedan leer los valores de los tokens del tema de los componentes para estilos personalizados.

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

Evaluación

Stack tecnológico
angular, sass, typescript
Área
design, 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.