на документацию угловых материалов, они рекомендуют использовать-theme файл для компонента, чтобы управлять применением любых связанных с темой стилей к определенному классу.

С моей точки зрения, некоторые недостатки этого подхода:

довольно многословныйразбивает стиль на две разные локациивсе ваши разработчики должны понимать, как работают цвета Angular Materialзатрудняет изменение значений (например, мы могли использоватьmat-color($primary, 200) для границ цветов и теперь хочу изменить его наmat-color($primary, 300), Это будет повторяться на протяжении всей кодовой базы.

При наличии согласованного языка дизайна будет использоваться только подмножество цветов (например, 4 цвета из основной палитры, 3 из акцентной палитры, несколько разных цветов переднего плана / фона и т. Д.).

Учитывая вышесказанное, не имеет ли смысла иметь_colors.scss который определяет точные цвета, используя тему, а не надеется, что разработчики извлекают правильное значение из темы каждый раз?

например может быть что-то вроде:

  $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

Тогда вместо создания отдельного-theme файл для каждого компонента, который требует определенных цветов, я могу просто импортироватьcolors.scss файл и использовать переменные непосредственно в*.component.scss файл.

Просто хотите подтвердить, что вышесказанное звучит правильно и что я не упускаю ничего очевидного, что может причинить боль в будущем?

Другая сложная часть заключается в том, как на самом деле определить их в отдельномcolors Файл эффективно, учитывая, файл будет иметь доступ к данным темы.