Заводим JSON-файл токенов
Northstar
После показа к дизайн-системе подключаются ещё два продукта: клиентская витрина на Mantine и админка на Ant Design. Цвета у всех должны совпадать.
Я веду команду админки. Ant Design настраивается объектом в JavaScript, CSS-переменные он не читает. Скопировать ваши hex-коды в наш конфиг — пять минут.
А через месяц копии разойдутся. Пусть значения живут в одном JSON, а CSS для формы и JS для библиотек собираются из него автоматически.
Мне так тоже проще: по структуре JSON близок к переменным Figma. Экспорт из Figma пока не настраиваем, значения переносим руками.
Источник правды переезжает из CSS в JSON. Из него генератор соберёт:
- CSS-переменные для формы;
- JS-объект для тем Mantine и Ant Design.
Значения из Figma по-прежнему переносим вручную: автоматический экспорт в рамки курса не входит.
Сайт партнёра передан его команде, поэтому в src/App.jsx снова одна форма Northstar с переключателем светлой и тёмной темы. Партнёрская тема остаётся в токенах.
Что делаем: добавляем tokens/tokens.json — объект с разделом color и его описанием, пока без конкретных значений.
Почему: используем JSON-формат DTCG 2025.10, опубликованный Design Tokens Community Group.
- Обычные ключи образуют группы и иерархический путь к токену:
color.blue.500— оттенок 500 синей палитры. - Служебные свойства
$description,$typeи$valueзадают метаданные формата. $valueхранит само значение. Тип токена можно объявить у конкретного листа или унаследовать от группы.
Пока файл содержит только структуру групп цветов; значения добавим в следующих уроках.