Переменные

Долой «захардкоженные» значения! Для ключевых параметров (цвета, размеры, границы, тени) мы используем переменные.

Переменные — основа модульного дизайна. Все элементы и компоненты интерфейса основаны на них. Изменение переменной (например, акцентный цвет) изменит все элементы и компоненты, использующие её.

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

Базовые цвета

Основа основ. Эти цвета используются повсеместно, вне зависимости от типа и области применения проекта.

Пример Название Значение Для чего
Текст $colorText ($colorBgContrast, $colorIcon) #333333 Основной чёрный цвет для текста, иконок и проч.
Подсказка $colorTextSecondary #999999 Цвет для текста аннотаций, сносок и атрибутов
$colorBg ($colorTextContrast, $colorIconContrast, $colorLinkContrast) #ffffff Фон, инверсный цвет для шрифта на тёмных фонах и иконок на цветном фоне

z-index: 0
$cologBgSecondary #f0f0f0 Дополнительный фоновый цвет для разграничения объектов, находящихся на одной плоскости. Заливка стандартных элементов управления

z-index: 0
$colorIconSecondary #c7c7c7 Второстепенная иконка
Ссылка $colorLink #0077cc Цвет для основных ссылок
Посещённая ссылка $colorLinkVisited #6ea4db Цвет посещённых ссылок
Успех $colorSuccess #28c75d Цвет положительных статусов
Ошибка $colorError #ff1100 Цвет ошибок и критичных предупреждений
$colorBgWarning #fffce0 Фоновый цвет для предупреждений. Может использоваться только что-то одно — либо цвет шрифта ($colorWarning), либо фон. Решение принимается на уровне продукта и не может варьироваться.
$colorRating ($colorWarning) #ffd400 Используется в рейтингах

Для предупреждений ($colorWarning) может использоваться только что-то одно — либо цвет шрифта, либо фон ($colorBgWarning). Решение принимается на уровне продукта и не может варьироваться.
$colorTrueBlack #000000 Абсолютно чёрный. Используется для получения вспомогательного цвета через прозрачность

Акцентные цвета проектов

У каждого проекта свой фирменный цвет, который транслирует его брендинг.
Используется в элементах управления и дополнительных акцентных элементах.

Акцентный цвет позволяет «отстроить» разные продукты Mail.Ru Group друг от друга.
Также через цвет в некоторой степени передается «настроение» проекта.

Важно не забывать, что у нас довольно насыщенные цвета и их не должно быть слишком много, чтобы интерфейс не «пестрил».

Следует соблюдать осторожность с цветами Авто и Леди, чтобы не ввести в заблуждение в том месте, где они могут быть приняты за предупреждение об ошибке.

Пример Название Значение Для чего
$colorAccentMail #168de2 Основной цвет Mail.Ru (Почта и productivity-сервисы, Новости, Спорт, Погода)
$colorAccentMailSecondary #ffa930 Второй акцентный цвет Mail.Ru
$colorAccentAuto #ff4f00 Авто Mail.Ru
$colorAccentDeti #ca9cf4 Дети Mail.Ru
$colorAccentDobro #ffd400 Добро Mail.Ru
$colorAccentHealthNew #3cd298 Здоровье Mail.Ru
$colorAccentHealth #008079 Здоровье Mail.Ru (текущий)
$colorAccentHealthSecondary #fde953 Здоровье Mail.Ru (текущий второстепенный)
$colorAccentKino #eaff00 Кино Mail.Ru
$colorAccentLady #ff2d54 Леди и Гороскопы Mail.Ru
$colorAccentRealty #4c8ebc Недвижимость Mail.Ru
$colorAccentHitech #5856d6 Hi-Tech Mail.Ru
$colorAccentMycom #fc2c38 My.com
$colorAccentMycomSecondary #00ABF2 My.com (второстепенный)

Цвета партнёрских сервисов

Для кнопок «поделиться в соц.сетях» и других отсылок к партнёрским сервисам используется механизм, аналогичный акцентным цветам (кнопка закрашивается этим цветом).

Пример Название Значение Для чего
$colorSocialVk #4d75a2 ВКонтакте
$colorSocialOk #ee8208 Одноклассники
$colorSocialMir #117eda Мой Мир
$colorSocialFb #0561af Facebook
$colorSocialTwitter #00bff3 Twitter

Состояния элементов

Мы не используем «захардкоженные» значения цветов для создания эффекта наведения и активных состояний. За нас это делает SASS-функция.
Эта функция смешивает заданный нами цвет (акцентный цвет проекта или другой) с чёрным в определённой пропорции.
А чтобы было ещё удобнее, мы загоняем эту функцию в семантически названный миксин. Теперь нам остается лишь передать в него название цвета и всё работает.

Пример Название Значение Для чего
stateHover @mixin stateHover ($colorAccent){ background: mix($colorTrueBlack, $colorAccent, 4%); } Наведение для кнопок и производных от них.

Используется функция, смешивающая заданный цвет с чёрным в определённой пропорции.

ВАЖНО: вместо $colorAccent используется $colorBgSecondary для серой кнопки или переменная цвета проекта для акцентных.
stateActive @mixin stateActive ($colorAccent){ background: mix($colorTrueBlack, $colorAccent, 8%);
box-shadow: $depthInset; }
Активное / нажатое состояние для кнопок и производных от них.

Используется функция, смешивающая заданный цвет с чёрным в определённой пропорции.

ВАЖНО: вместо $colorAccent используется $colorBgSecondary для серой кнопки или переменная цвета проекта для акцентных.

Также стоит обратить внимание, что у нажатого/активного элемента появляется внутренняя тень
stateDisabled @mixin stateDisabled  { opacity: $color-bg-disabled;
cursor: default;
pointer-events: none; }
Недоступное состояние для элементов.

Границы и разделители

1. Следует различать внешние границы и разделители, которые разделяют контент внутри блоков

2. Разделители внутри блоков, в свою очередь, делятся на два типа:
— Разделяющие группы схожих элементов — они делаются короткими, с отступами от краёв блока
— Разделяющие элементы разных типов — такие разделители идут во всю ширину блока

Пример Название Значение Для чего
$colorBorder 1px solid rgba(0,0,0,0.12) Основной цвет границ элементов.
$colorBorderHover 1px solid rgba(0,0,0,0.24) Стандартное наведение на границу (для интерактивных элементов)
$colorBorderActive 1px solid rgba(0,0,0,0.48) Активное состояние границы (для полей ввода, кнопок с множественными действиями)
$colorDivider 1px solid rgba(0,0,0,0.08) Цвет разделителей внутри блоков
$sizeBorderWidth 1px Толщина границы элемента управления и карточки
$sizeBorderWidthTab 2px Толщина границы вкладки
$sizeBorderWidthBar 4px Толщина границы для индикаторов загрузки
$sizeBorderWidthAccent 8px Толщина основной акцентной полосы
$sizeBorderWidthAccentSecondary 4px Толщина основной акцентной полосы у элементов внутри страницы (например, заголовок таблицы)
$sizeBorderRadiusProductivity, $sizeBorderRadiusTouch 2px Радиус скругления (Productivity, Touch)
$sizeBorderRadiusMedia, $sizeBorderRadiusMycom 4px Радиус скругления (Медиапроекты, My.com)
$sizeBorderRadiusPromo 8px Радиус скругления (промо-сайты)

Тени

Пример Название Значение Для чего
$depth2 0 4px 20px 0 rgba(0,0,0,.16) Стандартная тень всех «висящих в воздухе» элементов (например, попапы)

z-index: 2
$depth-inset 0 2px 0 0 rgba(0,0,0,0.04) Стандартная тень для «приподнятых» объектов (кнопка, ползунок слайдера, кнопка тумблера и т.п.)

z-index: 1
$depth0 0 Элемент на основном «полотне», без тени (иллюстрация, таблица и т.п.)

z-index: 0
$depthInset inset 0 2px 0 0 rgba(0,0,0,0.04) Внутренняя тень для «вдавленных» объектов (нажатая кнопка, фон тумблера и т.п.)

z-index: -1

Тонирование

Тонирование позволяет выводить элементы интерфейса «слоями», друг над другом. В результате видны оба «слоя».

Пример Название Значение Для чего
$toneValueBase 0.48 Стандартное тонирование (попап, наложение на картинку)
Недоступный элемент управления
$toneValueViewer 0.88 Просмотрщик фото и документов
$toneValueToolbar 0.24 Заблокированная иконка в панели управления

Базовые размеры шрифтов

Пример Название Значение Для чего
Кнопка
$fontBodyProductivity 15px Базовый размер шрифта для productivity-сервисов
Кнопка
$fontBodyMedia 17px Базовый размер шрифта для медиапроектов