Экспорт дизайн-токенов

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

Открыть конвертер цветов

Именуйте по роли, а не по оттенку

`--color-primary` останется верным, когда бренд уедет из синего в зелёный; `--color-blue-500` станет ловушкой, которую никто не решится переименовать. Буквальные названия цветов оставьте для сырой шкалы, а сверху положите смысловые токены.

Два слоя лучше одного

Держите примитивный слой (сырая шкала) и смысловой, который на него ссылается: `--surface: var(--grey-50)`. Тогда тема — это перенаправление смыслового слоя, а тёмный режим перестаёт быть заменой по всем компонентам.

Выбор формата

CSS-переменные — наименьшее трение для веба и поддержка тем в рантайме. JSON уместен, когда токены идут на несколько платформ или в сборку. Расширение темы Tailwind — лучший вариант, если проект уже на Tailwind и цвета нужны утилитарными классами.

По шагам

Сначала доведите палитру: экспорт незаконченного набора просто переносит переделку в код.
Определите имена токенов до экспорта — переименование потом самое дорогое.
Выгрузите CSS-переменные для веба, JSON для других платформ или сниппет Tailwind.
Вставьте примитивы и смысловые псевдонимы двумя отдельными блоками.
Замените зашитые hex-значения в компонентах на имена токенов.

Частые вопросы

CSS-переменные или конфиг Tailwind?

Если проект на Tailwind — расширяйте тему, тогда цвета приходят утилитами и остаются в дизайн-системе. Иначе берите CSS-переменные: они не требуют сборки и меняются в рантайме для тем.

Сколько токенов нужно небольшому проекту?

Меньше, чем подсказывает интуиция. Шесть смысловых ролей плюс нейтральная шкала покрывают большинство интерфейсов. Добавляйте токен, когда имя нужно реальному решению, а не про запас.

Как быть с тёмной темой?

Оставьте смысловые имена теми же и переопределите их под тёмным селектором или медиавыражением. Компонентам тогда не нужно знать о теме — ради этого смысловой слой и существует.