Observando a documentação do material angular, eles recomendam o uso de um-theme arquivo por componente para gerenciar a aplicação de qualquer estilo relacionado ao tema a uma classe específica.

Na minha perspectiva, algumas desvantagens dessa abordagem são:

bastante detalhadodivide o estilo em dois locais diferentestodos os seus desenvolvedores de front-end precisam entender como as cores do material angular funcionamdificulta a alteração de valores (por exemplo, poderíamos estar usandomat-color($primary, 200) para cores de borda e agora deseja alterá-lo paramat-color($primary, 300). Isso terá sido repetido por toda a base de código.

Dada uma linguagem de design consistente, haverá apenas um subconjunto de cores que serão usadas (por exemplo, 4 cores da paleta principal, 3 da paleta de acentos, algumas cores diferentes de primeiro plano / plano de fundo, etc.).

Diante do exposto, não faz mais sentido ter um_colors.scss que define as cores exatas usando o tema em vez de esperar que os desenvolvedores extraiam o valor correto do tema a cada vez?

por exemplo. talvez 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

Em vez de criar um arquivo separado-theme arquivo para cada componente que requer cores específicas, posso simplesmente importar ocolors.scss arquivo e use as variáveis diretamente no*.component.scss Arquivo.

Apenas querendo confirmar que o que foi dito acima é bom e que não estou perdendo nada óbvio que cause dor no caminho?

A outra parte complicada é como realmente defini-los em um separadocolors arquivo com eficiência, pois o arquivo precisará acessar os dados do tema.