NORTHSTAR · КУРС-ПРАКТИКУМ
Вы — фронтенд-разработчик Northstar, и вам предстоит ребрендинг. Фирменный цвет зашит в CSS в пяти местах. За 82 уроков вы превратите его в дизайн-токены, и в финале одна правка перекрасит форму и кнопки Mantine и Ant Design. Код запускается прямо в браузере.
«Выносим повторяющийся hex в палитру, а кнопке даём роль, а не оттенок»
Палитра хранит оттенки, роли называют назначение, компоненты читают роли. При смене темы или ребрендинге роль переключают на другой оттенок, а код компонентов не меняется. Выберите тему и посмотрите, что произойдёт.
Карточка и кнопка читают роли --surface, --text и --action-bg, а не hex-коды. Тема поменяла значения ролей, и всё перекрасилось без правок в стилях.
ПЕРЕД СТАРТОМ
Фронтенд-разработчикам, дизайнерам и командам, которые собирают дизайн-систему. Знать токены заранее не нужно.
01 · Роль
Задачи приходят в рабочий чат, и у каждого в команде свой интерес:
Илья продакт-менеджер
«Успеем к показу и ничего не сломаем?»
Марина дизайнер
«Цвета в коде должны совпадать с макетом.»
Василий ведущий разработчик
«Только без копий hex-кодов по проекту.»
Олег тимлид команды админки
«Админке на Ant Design нужен тот же бренд.»
02 · Знания
useStateНаучитесь в курсе:
03 · Окружение
Только браузер
Код запускается прямо в нём, устанавливать Node.js не нужно.
ЧАСТИ
Части продолжают одна другую, но любую можно открыть отдельно.
Знакомимся с формой и выясняем, сколько мест в CSS зависит от одного hex-кода.
Цель: Увидеть, почему смена фирменного цвета — не одна правка.
Выносим оттенки в файл токенов и подключаем его к стилям формы.
Цель: Заменить повторяющиеся hex-коды переменными палитры.
Разводим цвета по ролям, заводим шкалу размеров и токены компонента.
Цель: Отделить оттенок от назначения и дать кнопке собственную точку настройки.
Светлая, тёмная и партнёрская темы и состояния кнопки без копирования компонентов.
Цель: Переключать темы одним атрибутом на корне документа.
Описываем токены в формате DTCG и собираем из них CSS и JS.
Цель: Сделать JSON единым источником для формы и UI-библиотек.
Передаём роль из сгенерированного tokens.js в тему Mantine.
Цель: Покрасить кнопку библиотеки тем же токеном, что и форму.
Второй UI-кит получает тот же токен через свой адаптер.
Цель: Убедиться, что одна роль доходит до двух библиотек.
Предсказываем последствия, меняем одну роль и собираем новую палитру, подтягиваем UI-киты и наводим порядок в каталоге, сверяем код с Figma.
Цель: Провести ребрендинг, не переписывая компоненты.
Схема уровней, чек-лист и материалы для своего проекта.
Цель: Собрать выводы курса в практический план.