feat: добавлен генератор дизайн-токенов

[fabulous-unicorn]

Добавлен генератор, преобразующий единый экспорт токенов из Figma в токены проекта

Входной файл: design-tokens/input/tokens.json
Существующие стили компонентов в рамках этой задачи не заменялись

Результат генерации

src/theme/tokens
├── fonts.json
├── semantic
│   ├── colorScheme
│   │   ├── light.json
│   │   └── dark.json
│   ├── dimensions.json
│   └── effects.json
└── components
    ├── light.json
    └── dark.json

• semantic.colorScheme разделяется на светлую и тёмную темы.
• semantic.dimension и semantic.effects не зависят от темы и генерируются один раз
• В ThemeType.semantic подключается только выбранный colorScheme
• Общие semantic-токены доступны через статический semanticTokens
• Component-токены предназначены только для внутреннего использования UI Kit и не входят в темы или публичные экспорты
• primitive.fonts преобразуется в общий fonts.json
• Остальная часть primitive используется только для разрешения ссылок и не попадает в результат
• Вложенные light и dark удаляются из выходных токенов

Генератор: Преобразование значений

• разрешает ссылки между primitive, semantic и components;
• преобразует rem, px, ms и числовые строки в числа;
• раскрывает shorthand для padding, margin и borderWidth;
• сворачивает одинаковые значения borderRadius в одно число;
• сохраняет разные значения borderRadius в объекте { left, top, right, bottom };
• сохраняет boxShadow строкой, преобразуя вложенные rem в px;
• преобразует easing в коэффициенты для Easing.bezier;
• нормализует focusRing, сохраняя его исходную структуру;
• проверяет одинаковую структуру light- и dark-токенов;
• проверяет, что общие semantic-токены не зависят от цветовой схемы;
• отклоняет циклические и неразрешённые ссылки, неподдерживаемые значения и непреобразованные CSS-единицы.

Весь результат сначала собирается, валидируется и форматируется в памяти. При ошибке сгенерированные файлы не изменяются. После успешной проверки генератор удаляет лишние JSON и записывает результат.

Команды

• yarn tokens:generate - валидирует, генерирует и форматирует токены
• yarn tokens:check - без изменений файлов проверяет их актуальность и каноническое форматирование
• yarn tokens:typecheck - проверяет TypeScript-код генератора.

tokens:typecheck и tokens:check запускаются при сборке, в CI typecheck и pre-push hook.

[sashansk3]

По результатам обсуждения:

• Изменить семантику цветов. Поднять на уровень выше
• Обсудить необходимость отрицательных отступов с дизайнерами
• Выделить константы анимаций в экспоритируемый класс Easing из дизайн системы, который будет применять toEasing автоматически
• Выделить константы времени в экспортируемый класс Timings
• Выделить неизменяемые части dimension, effects из объекта темы
• Исправить генерацию токенов none: "none". Заместо "none" использовать undefined

[fabulous-unicorn]

Изменить семантику цветов. Поднять на уровень выше

разделю на три файла, но структуру все же менять не буду

Обсудить необходимость отрицательных отступов с дизайнерами

👌

Выделить константы анимаций в экспоритируемый класс Easing из дизайн системы, который будет применять toEasing автоматически
Выделить константы времени в экспортируемый класс Timings

может лучше оставить экспорт констант (могу удалить адаптер), а сделать доработку по необходимости, тогда когда уже увижу в использовании?
структуру менять не буду, но на вид адаптеров и использование хотелось бы чуть подробнее позже посмотреть

Выделить неизменяемые части dimension, effects из объекта темы

то же что и в самом первом пуункте

Исправить генерацию токенов none: "none". Заместо "none" использовать undefined

undefined - не получиться поставить, я там JSON.stringify использую
сломать это ничего не сломает, максимум будет просто мертвым кодом висеть