Читаем роль в JavaScript

Northstarвитрина
Илья, продакт-менеджер
Ильяпродакт-менеджер
Каталог для клиентской витрины собираем на Mantine: писать каждый компонент с нуля некогда. Но витрина должна выглядеть частью Northstar, а не шаблонным сайтом.
Марина, дизайнер
Маринадизайнер
Главное, чтобы кнопка действия получила наш фирменный цвет. Остальные стили пусть пока живут по правилам библиотеки.
Василий, ведущий разработчик
Василийведущий разработчик
Mantine ждёт тему объектом в JavaScript. Возьми значение роли из сгенерированного tokens.js, а не копируй hex: тогда цвет обновится вместе с JSON.

Сгенерированный CSS считывают компоненты формы, а Mantine настраивается через JavaScript: наши CSS-переменные она автоматически не подхватывает. Передадим ей значение из собранного модуля src/tokens.js.

Что делаем: обновляем src/theme.js: импортируем tokens из src/tokens.js и сохраняем значение роли tokens.action.bg в константу actionColor.

Почему: файл src/tokens.js — артефакт сборщика токенов: все алиасы уже раскрыты, а объект повторяет структуру JSON.

Роль читается по имени, поэтому hex-код не копируется руками. После изменения tokens/tokens.json и повторной сборки новое значение автоматически попадает и в tokens.js, и в tokens.css.

Редактор · src/theme.js

Предпросмотр

Подготовка окружения…

Ожидание запуска Vite…
Терминал