Телеграмм чат группы bem

2019 April 07

MK

# Работа с Темами

## Тематизация
Фундаментально Тематизация отвечает тому подходу, которого мы с дизайнерами придерживаемся: «При проработке визуала человек описывает смысл блока (смысловые модификаторы), ничего не зная про Тему, а при проработке Темы человек может ничего не знать про блоки, которые будут в ней отрисовываться»

## Разделение внутри темы
Для каждого Мерча/Лейбла/Компании есть три Темы:
- Дефолтная — светлая с яркими акцентными контролами;
- Брэндовая — с ярким фоном и светлыми акцентными контролами;
- Инвёрсная — тёмная с монохромными или яркими акцентными контролами;

## Математика цвета
Внутри каждой Темы, цветовые переменные разделены на группы.

### Base
Базовые переменные, которые формируют основную палитру (они не используются в интерфейсе, нужны только для образования интерфейсных пременных (наследования)). Они имеют префикс color-base-*. Пример:
$color-base-base $color-base-system

| имя base переменной | что наследуется |
|-----------------------|-------------------------|
| $color-base-base | типографика |
| $color-base-essential | фоны |
| $color-base-project | акцентные цвета |
| $color-base-phantom | бордеры, оверлеи, тени |
| $color-base-path | ссылки |

### Background
Цвета фонов, которые формируются с учётом состояний блоков. Значения наследуются от цвета переменной $color-base-essential. Они имеют префикс color-bg-*. Пример:
$color-bg-brand, $color-control-bg-default-affect

### Typo
Цвета типографики, которые формируются с учётом визуальной иерархии и так же наследуются от цвета переменной $color-base-base. Они имеют префикс color-typo-*. Пример:
$color-typo-primary, $color-typo-warning

### Вычисление цвета в файле темы
Каждый цвет темы вычисляется на основе изменения параметров hue(h) — тон, saturation(s) — насыщенность, lightness(l) — яркость и alpha(a) — полупрозрачность у base переменных.

Например цвет для основного текста вычисляется на основе цвета переменной $color-base-base с уменьшением альфы (полупрозрачности) до 95%:
$color-typo-primary: color($color-base-base a(95%))
Другой пример, для бордеров: $color-bg-border: color($color-base-phantom l(100%) a(20%));

Стоит помнить, что параметры переменных можно не менять. Если с точки зрения визуала цвет подходит, то base переменную допускается использовать as is. В этом случае color(...) не указывается, т.к. идет прямое наследование(?)присвоение:

$color-typo-alert: $color-base-alert;

### Синтаксис математики
Альфа-канал задается всегда в %: $color-typo-primary: color($color-base-base a(95%));

Как сказано выше, для формирования нового цвета переменной, необходимо изменить один из параметров h, s, l, a. Допускается два вида записи:
- h(50%) ↔ h(50)
новыйПараметр = 0.5(текущийПараметр).
При HUE = 20, новый HUE = 0.5(20) = 10

- h(+50%) (работает для + и -)
новыйПараметр = текущийПараметр + 0.5(текущийПараметр).
При HUE = 30, новый HUE = 30 + 0.5(30) = 45

Если параметр указан h(-X) и [текущийПараметр - X(текущийПараметр)]<0, то результирующее значение будет рассчитано как 0.
Пример: h(-125%), при HUE = 30, новый HUE = 30 - 1.25(30) = 30 - 37.5 = -7.5 → 0

### Вложенность тем
Тема всегда должна быть примиксована как минимум на один самый верхний узел. Она задается правила как будут отрисовываться все сущности внутри одного интерфейса/экрана.

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

## Темы в контролах
Контролы реагируют на уровень общей Темы так же как и все остальные интерфейсные сущности.

При этом их цветовые переменные наследуются от тех же основных переменных, что и цвета состояний блоков и типографики, вычисляются через математику (путем изменения HSL).

БЭМ