Вы уже освоили базовые переменные для цветов, шрифтов, отступов, радиусов и теней. Это отличный старт! Но чтобы дизайн-система стала по-настоящему гибкой и масштабируемой, нужны семантические токены.
Что такое семантические токены и зачем они нужны?
Представьте, что вы строите дом. Базовые переменные — это кирпичи, доски, краска. А семантические токены — это уже готовые элементы с назначением: «стена», «дверь», «окно». Они описывают роль элемента, а не его физические свойства.
В дизайн-системе семантические токены — это переменные, которые описывают цель или функцию элемента в интерфейсе, а не его конкретное значение. Например, вместо прямого использования переменной #FF0000 (красный цвет), мы создадим семантический токен color-danger (цвет опасности), который будет ссылаться на этот красный.
Преимущества семантических токенов:
- Гибкие темы. Нужно создать тёмную тему? Просто измените значения базовых токенов, на которые ссылаются семантические. Например,
color-primary-textв светлой теме может быть тёмным, а в тёмной — светлым. Не придётся перебирать каждый элемент интерфейса. - Легкие изменения. Если дизайнер решит, что все предупреждающие сообщения должны быть оранжевыми, а не красными, вы меняете значение всего одного семантического токена
color-warning. Изменение применится ко всем элементам, использующим этот токен. - Понятность. Семантические токены делают дизайн-систему прозрачной для всей команды.
color-primary-buttonгораздо информативнее, чемcolor-blue-500. - Масштабируемость. Проект растёт, элементов становится больше. Семантические токены помогают поддерживать порядок и консистентность, избегая дублирования стилей.
Как создавать семантические токены
Создание эффективных семантических токенов требует продуманного подхода. Вот ключевые принципы:
1. Фокус на назначении, а не на значении
Главное правило: имя токена должно описывать его роль в интерфейсе, а не его визуальное свойство.
- Плохо:
color-red,font-size-16px - Хорошо:
color-text-error,font-size-body-medium
2. Уровни абстракции
Семантические токены часто строятся поверх базовых, создавая уровни абстракции.
- Базовый токен (Global Token): Самый низкий уровень, конкретное значение. Например,
color-red-500: #EF4444. - Семантический токен (Alias Token): Ссылается на базовый токен и описывает его назначение. Например,
color-danger: {color-red-500}. - Компонентный токен (Component Token): Используется для конкретного компонента и может ссылаться на семантический токен. Например,
button-primary-background: {color-brand-primary}.
Совет: Не стремитесь сразу создать все возможные уровни. Начните с базовых и семантических. Компонентные токены добавляйте по мере необходимости, когда увидите повторяющиеся паттерны стилизации внутри компонентов.
3. Консистентность именования
Используйте единую систему именования для всех семантических токенов. Это критически важно для их поиска и понимания. Подробнее об этом поговорим на следующей странице, но вот несколько примеров:
- По категориям:
color-text-primary,color-background-secondary,spacing-stack-medium. - По состояниям:
color-button-primary-hover,color-input-border-error.
4. Ограниченное количество
Не создавайте слишком много семантических токенов. Если для каждого уникального случая будет свой токен, система станет громоздкой и сложной в управлении. Стремитесь к переиспользованию.
5. Документация (в уме)
Хотя мы не будем создавать полноценную документацию на этом этапе, всегда держите в уме, как тот или иной токен будет описан. Это помогает придумывать понятные имена и определять их назначение.
Пример: От базовых к семантическим цветам
Давайте посмотрим, как это работает на практике.
Базовые цветовые переменные (в коллекции Global Colors):
red-500:#EF4444blue-600:#2563EBgray-100:#F3F4F6gray-900:#111827white:#FFFFFFblack:#000000
Семантические цветовые переменные (в коллекции Semantic Colors):
color-text-primary:{gray-900}(для светлой темы)color-text-secondary:{gray-600}color-text-inverse:{white}color-background-default:{white}color-background-light:{gray-100}color-button-primary-background:{blue-600}color-button-primary-text:{white}color-danger:{red-500}color-success:{green-500}
Теперь, если нам понадобится изменить основной цвет текста для тёмной темы, мы просто создадим режим "Dark" для коллекции Semantic Colors. В нём color-text-primary будет ссылаться на {white}, а color-text-inverse на {black}. Все элементы, использующие color-text-primary, автоматически подхватят новый цвет.
На следующей странице мы углубимся в то, как эффективно организовывать и именовать эти токены, чтобы ваша дизайн-система оставалась чистой и масштабируемой даже при росте проекта.