Dermis

# Цвет

tone - Библиотека работы с цветом в проекте. Это набор утилит и базовая тема для работы.

Генерация темы достаточно ресурсоемкая для препроцессора, поэтому ее можно отменить с помощью флага: $TONE_GENERATE_THEME. По умолчанию тема ганерируется. Основную нагрузку несет в себе генерация цветовой палитры. Этот флаг это поведение отключит $TONE_GENERATE_PALETTES, но тема генерируется из предоставленной палитры. Поэтому, если хотите оставить генерацию темы - нужно будет вручную описать базовую палитру.

На основе базовой темы будут строится множество других компонентов.

# Миксины

# +tone-theme-apply($theme-map)

Заменяет переменные var(--theme-{name}) на существующие в $theme-map значения.

# +tone-color-palette-fill-gaps($colors-map, $specs: $TONE_GAPS_FILLER_SPECS)

  • $colors-map - Существующая у вас неполная палитра. На основании ее, и дополнительных настроек - пустые места точек палитры($TONE_PALETTE_MARKS) будут заполнены сгенерированными цветами.
  • $specs - Это map настроек генерации палитры.

Из этой, неполной, палитры:

$some-palette: tone-color-palette-fill-gaps((
  10: #d0e2ff,
  50: #1976e1,
));

В итоге получится:

$some-palette: : (
  0: #fdfeff,
  5: #e7f0ff,
  10: #d0e2ff,
  20: #a2c7f8,
  30: #75acf0,
  40: #4791e9,
  50: #1976e1,
  60: #1665c2,
  70: #1255a2,
  80: #0f4483,
  90: #0b3463
  100: #082344,
);

# +tone-color-palette-range($marks, $specs: $TONE_DEFAULT_SPECS)

Генерирует палитру в рамках установленных в $specs диапазонов значений hue, brightness, saturation.

  • $marks - Это точки интенсивности цветов в порядке следования от самого незаметного - до самого темного. Передавайте переменную $TONE_PALETTE_MARKS - это стандартный набор "точек".
  • $specs - Это map настроек генерации палитры. Он будет "слит" с базовыми($TONE_DEFAULT_SPECS) для получения новой палитры цветов.

Для генерации различных цветов по большому счету достаточно указать hue-range:

// Эта-же настройка генератора используется
// в стандартной палитре для генерации
// голубого цвета.
$some-palette: tone-color-palette-range(
  $TONE_PALETTE_MARKS,
  (hue-range: 220 212)
);

И выйдет:

$some-palette: (
  0: #f2f8ff,
  5: #d6e9ff,
  10: #bbdafe,
  20: #88befa,
  30: #5ca3f4
  40: #378bec,
  50: #1976e1,
  60: #0264d4,
  70: #0055b7,
  80: #00499c,
  90: #003e85
  100: #003470
);

# Тема

С помощью использования темы в работе - мы поддерживаем интерфейс консистентным. Поведение пользователя более предсказуемо, визуальное отображение элементов идентично друг другу, поддержка/переработка элементов визуально становиться значительно легче при использовании общего стиля.

Первичная проработка элементов дольше. Поддержка и переиспользование - значительно легче.

По умолчанию тема включает только базовые цвета: Рельефа и Текста. Остальные - на ваше рассуждение.

# Цветовая палитра

← Типографика →