S CSS / SASS итерация по цветовой палитре - PullRequest
Новая
       20

S CSS / SASS итерация по цветовой палитре

0 голосов
/ 12 февраля 2020

Я пытаюсь перебрать цветовые палитры, используя S CSS. Вот примеры цветов темы, которые я использую. 

$black-opacity: rgba(#000, 0.87);
$white-opacity: rgba(#fff, 0.87);

$contrast: (
  50: $black-opacity,
  100: $black-opacity,
  200: $black-opacity,
  300: $black-opacity,
  400: $black-opacity,
  500: #fff
);

$palettes: add-contrasts(
  (
    blues: (
      50: #ccecf8,
      100: #c2deea,
      200: #5eb6e4,
      300: #1cc1ff,
      400: #00b7fd,
      500: #00a1de
    ),
    green: (
      50: #deedd1,
      100: #bbee8c,
      200: #9de75b,
      300: #78db20,
      400: #6ac11c,
      500: #58a618
    ) ) );

$primary: mat-palette($palettes);

Здесь add-контраст - это функция, где она будет автоматически добавлять контраст всякий раз, когда я собираю цвета из $ palettes. 

 $primary-palette: mat-palette($primary);
 @debug $primary-palette;
  $primary-color: mat-color($primary-palette);
  @debug $primary-color;
  @each $color-theme, $color-brand in $primary-color {
    background-color: $color-theme;
  }

Я использовал @each для go по картам, при этом я смог получить все значения. 

output for @debug $primary-palette 

(50: #ccecf8, 100: #c2deea, 200: #5eb6e4, 300: #1cc1ff, 400: #00b7fd, 500: #00a1de,contrast: (50: rgba(0, 0, 0, 0.87), 100: rgba(0, 0, 0, 0.87), 200: rgba(0, 0, 0, 0.87), 300: rgba(0, 0, 0, 0.87), 400: rgba(0, 0, 0, 0.87), 500: #fff, default: #00a1de, lighter: #c2deea, darker: #0075a1, default-contrast: #fff, lighter-contrast: rgba(0, 0, 0, 0.87), darker-contrast: #fff, "50-contrast": rgba(0, 0, 0, 0.87), "100-contrast": rgba(0, 0, 0, 0.87), "200-contrast": rgba(0, 0, 0, 0.87), "300-contrast": rgba(0, 0, 0, 0.87), "400-contrast": rgba(0, 0, 0, 0.87), "500-contrast": #fff)

Когда я пытался отладить $primary-color: mat-color($primary-palette);, я получил только значение по умолчанию как default: #00a1de Вместо этого я хотел бы взять все первичные значения без контраста. Ожидаемый результат: 50: #ccecf8, 100: #c2deea, 200: #5eb6e4, 300: #1cc1ff, 400: #00b7fd, 500: #00a1de Также есть ли способ передать значения непосредственно в файл машинописи или html разметки

...