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.

Respuestas a la pregunta(3)

Su respuesta a la pregunta