Оттенки в угловых материалах

Question

При определении палитры, что на самом деле влияет на оттенки?

hpsapf-primary: mat-palette($mat-light-blue, 400, 50, 900);

• Первое значение (400) - это оттенок по умолчанию.
• Второе значение (50) - более светлый оттенок.
• Третье значение (900) - более темный оттенок.

Цветовой тон по умолчанию используется при установке color = "primary" на компоненте

// The button gets the color #29B6F6 as can be looked up here: https://material.io/design/color/#tools-for-picking-colors
<button mat-button color="primary">Primary</button>

Так как же светлые (50) и темные (900) оттенки используются в Angular Material или как я могу их использовать? Для чего они хороши?

Answer 1

Как они используются, можно увидеть в исходном коде Angular Material. Более конкретно, рассмотрим некоторые из смешанных файлов тем. Пример из индикатор выполнения :

@mixin mat-progress-bar-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);

  .mat-progress-bar-background {
    fill: mat-color($primary, lighter);
  }

  .mat-progress-bar-buffer {
    background-color: mat-color($primary, lighter);
  }

  .mat-progress-bar-fill::after {
    background-color: mat-color($primary);
  }
  ...
}

Вы можете использовать их таким же образом, используя миксины и функции утилиты тематики, а также клавиши карты палитры по умолчанию, светлее, темнее, по умолчанию, светлее и более контрастно, и темнее. Это объясняется в руководстве по темам: https://material.angular.io/guide/theming-your-components#note-using-the-code-mat-color-code-function-to-extract-colors-from-a-palette.