Цвета

§Двухслойная цветовая система

В основе библиотеки лежат 2 палитры — приватная и семантическая. Они различаются по структуре и назначению. В приватной палитре задаются RGBA-значения для всех тонов и оттенков всех цветов во всех темах, а семантическая палитра использует приватные цвета в качестве значений и применяется к конкретным элементам интерфейса.

§Приватные цвета

Это базовый слой цветов в дизайн-системе. Они не предназначены для использования внутри компонентов напрямую и выполняют роль значений для семантических переменных, которые уже используются в компонентах. Значениями приватных переменных выступают RGBA/RGB-цвета.

В этой палитре для каждой темы перечислены все тона всех цветов, с альфа-каналом и без, с припиской Solid.

§Цвета с альфа-каналом

Цвета с альфа-каналом существуют только для индексов начиная с 500 и ниже. Они смешиваются с цветом фона, что позволяет не потерять читаемость и сохранить контраст. Рекомендуется использовать:

1. для светлых оттенков (от 50 до 300);
2. для проектов, связанных с типографикой, где тексты могут выводиться поверх фонов любых цветов (использование альфа-канала поможет избежать неприятных ситуаций с потерей контраста).

§Solid-цвета

Solid-цвета нужны там, где может появиться наложение одного объекта на другой и смешение цветов на месте перекрытия не допускается. Они строятся с учетом основного фона для темы. Учитывая, что solid-цвета могут выводиться и поверх подложек произвольного цвета, их стоит использовать осмотрительно.

При изменении цвета основного или контрастного фона рекомендуется сгенерировать оттенки заново, чтобы синхронизировать по виду solid-цвета и цвета с альфа-каналом.

§Как строить тона

Тона строятся от середины шкалы, в нашем случае это цвет с индексом 550. Это основной цвет, из которого генерируются менее насыщенные и более насыщенные тона. Исключениями являются черный и белый, которые находятся с краю шкалы и допускают создание большего числа тонов и значений с альфа-каналом.

Цвета с индексом от 50 до 500 строятся за счет уменьшения Opacity основного цвета (550). Цвета с альфа-каналом существуют только в этом диапазоне, в отличие от solid-цветов, могущих иметь значения на всей шкале.

Цвета с индексом от 600 до 1000 строятся подмешиванием фона, контрастного основному для выбранной темы. Например, в светлой теме основной фон белый, а контрастный ему — фон темной темы. Он и добавляется к цвету для создания более темных тонов.

В темной теме все наоборот: основной фон темный, а контрастный ему — фон светлой темы, т.е., в нашем случае, белый. Он и добавляется к цвету для формирования тонов с высоким индексом.

Есть скрипт, который позволяет построить шкалу цветов сразу в пригодном для передачи в разработку виде.

§Семантические цвета

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

§Категории по типам

В фигме для более простой навигации переменные разделены на группы, перечисленные ниже. При этом в коде структура более прямолинейная. Там в отдельную категорию не выделяется Branding, и группа переменных Basе тоже одна. По названиям, составу и значению переменных Figma и код эквивалентны, за исключением случаев, где название оптимизировано для лучшей читаемости или понимания.

1. Branding

   Коллекция бренд-переменных, собранная из всех категорий. Это базовые цвета, которые позволяют быстро применить стиль и посмотреть результат. Группа выделена только в Figma. В коде этой группы не существует, а цвета распределены по своим группам.

2. Text

   Группа переменных для цвета текста и иконок. Поскольку тексты и иконки часто отображаются вместе, важно поддерживать их визуальное соответствие.

3. Base

   Группа цветов для всевозможных подложек, заливок и фонов.

4. Base Semantic

   Цвета подложек с окрасом Info, Positive, Warning, Danger, Misc. Предусмотрены значения как для Normal, так и для Hover-стейтов. Могут подойти для некоторых типов инфографики, но не для всех. Группа выделена только в Figma. В коде это часть группы Base.

5. Base Float

   Цвета подложек элементов, парящих над основным фоном страницы. Группа выделена только в Figma. В коде это часть группы Base.

6. Line

   Цвета обводок, линий, разделителей, рамок и любых других тонких элементов.

7. Effects

   Цвета для затемнения текста, создания теней и т.д.

8. Misc

   Группа с разными техническими цветами — скроллбары, оси для графиков, фон тултипа в чарте.

Подробнее о назначении каждой переменной можно прочитать в описании колорстилей в Figma или в сторибуке.

§Категории по смыслу

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

Среди значений, общих для разных категорий, стоит выделить следующие:

• успех (success);
• опасность (dangerous);
• предупреждение (warning);
• нейтральное значение (neutral);
• и т.д.

§Вэриаблы и colorstyles

Работа со значениями цветов происходит в интерфейсе Local Variables в Figma. Чтобы туда попасть, нужно открыть файл с библиотекой, убедиться, что на странице ничего не выбрано (для этого можно кликнуть в пустой фон канваса) и нажать на Local Variables в правой панели.

Пока variables не остаются в статусе бета-версии, в дизайн-системе продолжают использоваться colorstyles для непосредственного определения цвета у объекта. При этом внутри colorstyle значением выступает соответствующая переменная. Это означает следующее:

1. Чтобы поменять цвет colorstyle, нужно поменять цвет соответствующей переменной.

2. Colorstyles наследуют свойства переменных, в частности, поддержку цветовых тем. Таким образом, объект с примененным colorstyle сможет менять тему, используя только функционал Figma.

   

§Темы

Библиотека Gravity-UI поддерживает 4 темы: светлую, темную и их контрастные версии. На текущий момент стандарт в индустрии — поддерживать как минимум две: светлую и темную. Тяжело выбрать одну идеальную, учитывая, насколько разными могут быть предпочтения у пользователей.

Темы с повышенной контрастностью были созданы как решение для тех, кому не хватает контрастности в обычных темах, что может быть вызвано как особенностями оборудования, например, калибровкой монитора, установленной яркостью, типом матрицы и ее цветопередачей (особенно у ТВ), так и освещенностью помещения. Эти темы на текущий момент нельзя назвать решением задачи по обеспечению accessibility.