angular / angular/components

feat(all): Mixins for changing component color

Abierto
#30,241 0 comentarios 11 reacciones 0 asignados Ver en GitHub
area: theming 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

## What I want
To easily change the color of a material component.

## Context
It is a very common use case to change a material component default color, and migrating from v18 to v19 this was a pain point for me.

Before in v18, I could change the component color to one in my theme palette like this:
```
@include mat.chips-color(theme.$theme, $color-variant: tertiary);
```

And now in v19, I need to specify every tokens:
```
@include mat.chips-overrides((
elevated-selected-container-color: map.get(theme.$palettes, tertiary, 90),
selected-label-text-color: map.get(theme.$palettes, tertiary, 10),
selected-trailing-icon-color: map.get(theme.$palettes, tertiary, 10),
selected-hover-state-layer-color: map.get(theme.$palettes, tertiary, 10),
selected-trailing-action-state-layer-color: map.get(theme.$palettes, tertiary, 10),
selected-focus-state-layer-color: map.get(theme.$palettes, tertiary, 10),
with-icon-selected-icon-color: map.get(theme.$palettes, tertiary, 10)
));
```
It's much more complicated now, and if we want to keep the same level of contrast (here tones 10 and 90) we have to inspect the generated code and find the equivalent in the new color.

## Proposed solution
In v18 we had to pick a color from our theme, which wasn't very flexible. An ideal solution would be:
```
@include mat.chips-color(#FF0000); // <== We could pass any color here and the mixin would compute the tones
```

If not doable, then the same behavior as v18 would be good enough:
```
@include mat.chips-color(theme.$palettes, tertiary);
// or
$tertiary-palette: map.get(theme.$palettes, tertiary);
@include mat.chips-color($tertiary-palette);
```

There should be one `mat.-color` mixin for each material component.

### Use Case

_No response_

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza localizando la API `mat.chips-overrides` de v19 y comparándola con el comportamiento de `mat.chips-color` de v18 descrito aquí. Decide si los mixins de color de los componentes deben aceptar una paleta o un color arbitrario, y define el alcance para proporcionar mixins equivalentes en los componentes de Material. El issue no menciona archivos ni tests, por lo que aún es necesario determinar los puntos de entrada de la implementación.

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
25/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.