Material angular: variables de color globales
Mirando la documentación del material angular, recomiendan usar un-theme
archivo por componente para administrar la aplicación de cualquier estilo relacionado con el tema a una clase específica.
Desde mi perspectiva, algunos inconvenientes de este enfoque son:
bastante detalladodivide el estilo en dos ubicaciones diferentesTodos los desarrolladores frontend necesitan comprender cómo funcionan los colores de material angularhace que sea más difícil cambiar los valores (por ejemplo, podríamos haber estado usandomat-color($primary, 200)
para colores de borde y ahora quiero cambiarlo amat-color($primary, 300)
. Esto se habrá repetido en todo el código base.Dado un lenguaje de diseño consistente, solo se usará un subconjunto de colores (por ejemplo, 4 colores de la paleta primaria, 3 de la paleta de acento, algunos colores diferentes de primer plano / fondo, etc.).
Dado lo anterior, ¿no tiene más sentido tener un_colors.scss
que define los colores exactos usando el tema en lugar de esperar que los desarrolladores extraigan el valor correcto del tema cada vez?
p.ej. tal vez algo como:
$clr-primary-default: mat-color($primary);
$clr-primary-contrast: mat-color($primary, default-contrast);
$clr-primary-light: mat-color($primary, lighter);
$clr-primary-dark: mat-color($primary, darker);
$clr-accent-default: mat-color($accent);
$clr-accent-light: mat-color($accent, lighter);
$clr-accent-dark: mat-color($accent, darker);
$clr-default-text: mat-color($foreground);
$clr-secondary-text: mat-color($foreground, secondary-text);
//etc
Entonces, en lugar de crear un separado-theme
archivo para cada componente que requiere colores específicos, simplemente puedo importar elcolors.scss
archivar y usar las variables directamente en el*.component.scss
archivo.
¿Solo quiero validar que lo anterior es sólido y que no me estoy perdiendo nada obvio que pueda causar dolor en el camino?
La otra parte difícil es cómo definirlos realmente en uncolors
archivo eficiente dado que el archivo necesitará acceso a los datos del tema.