Создание дизайн-системы. Часть 3. Цвета

Создание дизайн-системы. Часть 3. Цвета

Перевод статьи Create your design system, part 3: Colors

Переменные цветов

В отличие от других глобальных значений CSS, создание цветовой системы состоит на 10% из кодирования и на 90% из семантики. Файл _colors.scss должен соответствовать следующим параметрам:

  • Переменные должны легко запоминаться, чтобы не приходилось лезть в файл каждый раз при выборе цвета.
  • Простое обновление: добавлять, удалять и переименовывать цвета должно быть легко.
  • Только основные цвета! Необходимо удалить все лишнее, оставив только базовые переменные.

Семантика vs Декларативность

Существует два основных подхода: семантический и декларативный.

Семантический выглядит так:

А вот пример декларативного:

Они оба хороши. Вы должны выбрать тот, который больше соответствует именно вашему проекту.

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

Первый шаг — выбор минимального количества цветов, необходимых для создания компонентов. В общем случае цветовая палитра выглядит так:

  1. Основной (primary) цвет — для ссылок, фона кнопок и т. п. Призывает к действию.
  2. Акцент — для выделения чего-то важного на странице. Не должен быть вариацией основного цвета.
  3. Шкала нейтральных цветов — обычно шкала серого тона для шрифтов, рамок, теней и т. п.
  4. Цвета для обратной связи с пользователем: успех, ошибка, предупреждение.

Некоторые из этих цветов требуются в разных версиях (более темных/светлых) для обозначения интерактивности элементов, например, при наведении курсора (hover).

Примечание: для перевода цветовых функций в кроссбраузерный RGBA-формат используется плагин postcss-color-mod-function.

Вариации основного и акцентного цветов генерируются с помощью цветовых функций. Оттенки (или нейтральные) цвета генерируются с помощью chroma.js. Функции здесь не подходят, так как шкала значений генерируется на основе двух противоположных цветов.

Добавление семантических цветов

После того, как цветовая палитра готова, мы можем добавить семантические ссылки. Количество цветов при этом не увеличивается.

Чем хороша эта система?

Прежде всего, она опирается всего на два основных цвета: основной и акцентный (и при необходимости дополнительный), которые просто запомнить.

Оттенки серого именуются в зависимости от насыщенности — чем темнее, тем больше число. Если gray-2 выглядит слишком светлым, можно попробовать gray-3. Возможно, вы заметили, что некоторые оттенки отсутствуют (например, gray-5). Они не используются ни в одном компоненте, поэтому их можно просто удалить.

Семантические цвета добавлены по трем основным причинам:

  • Файл _colors.scss становится центральным пунктом управления всеми цветами. Если вы решили, что заголовки должны быть темнее, просто откройте его и измените переменную color-text-heading.
  • Если вы устанавливаете цвет рамки, то вам не нужно искать, какой оттенок серого использовался для рамки других компонентов. Аналогично и со всем остальными цветовыми свойствами.
  • Для простого создания и управления разными цветовыми темами.

Темизация

Как только появится возможность использовать переменные CSS без плагинов и полифиллов*, создание цветовых тем станет очень простым! Значит ли это, что сейчас мы не можем создавать темы? Не значит. У нас есть два варианта.

*авторы статьи используют плагин postcss-css-variables для компиляции CSS переменных. В настоящее время он не поддерживает обновление переменных в CSS-классах.

Вариант 1 — обновлять переменные в любом случае.

Браузеры, которые не поддерживают переменные, будут показывать цветовую тему «по умолчанию». Это не проблема, пока контент доступен.

Например, дефолтная тема — черный шрифт на белом фоне, а темная тема (.theme-dark) — белый шрифт на черном фоне.

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

Вариант 2 ориентирован на все элементы, внешний вид которых зависит от темы.

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

 

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *