Что мы собрали

Итоговая форма собрана из значений одного файла tokens/tokens.json.

Структура компонентов за девять частей почти не менялась:

• появились вторая кнопка, переключатель темы и две строки с UI-китами;
• цветовые решения переехали в токены.

Ребрендинг, с которого всё началось, свёлся к правке ролей и палитры.

Курс завершён

Вы прошли все девять частей и собрали рабочую систему токенов для Northstar. Передайте этот чек-лист команде и попробуйте применить те же уровни в своём проекте. Если хотите пройти материал ещё раз, вернитесь к первому уроку.

Схема уровней

 
tokens/tokens.json
 
├── палитра   color.blue.*, color.purple.*, color.teal.*
 
│             color.neutral.*, color.plum.*, color.mist.*
 
├── размеры   space.*, radius.*
 
├── роли      action.bg → {color.purple.600}
 
│             control.inset-y → {space.2}
 
├── темы      theme.action-bg         → {action.bg}
 
│             theme-dark.action-bg    → {color.purple.300}
 
│             theme-partner.action-bg → {color.teal.600}
 
└── сборка
 
    ├── terrazzo.config.mjs         → src/tokens.css, src/tokens.js
 
    └── src/theme.js                → createKitThemes: темы Mantine и Ant Design для каждого режима

{
  "color": {
    "purple": {
      "300": "#cbb6ff",
      "600": "#6d28d9"
    },
    "teal": {
      "600": "#0f766e"
    }
  },
  "action": {
    "bg": "{color.purple.600}"
  },
  "theme": {
    "action-bg": "{action.bg}"
  },
  "theme-dark": {
    "action-bg": "{color.purple.300}"
  },
  "theme-partner": {
    "action-bg": "{color.teal.600}"
  }
}

.actions button {
  --button-bg: var(--action-bg);
  --button-text: var(--action-text);
  background: var(--button-bg);
  color: var(--button-text);
}
.actions .button-secondary {
  --button-text: var(--action-bg);
  --button-border: 1px solid var(--action-bg);
}

• Токен компонента (--button-bg) — локальная переменная поверх роли: у элемента своя точка настройки, а роль остаётся общей.
• Состояние — тоже решение: наведение, фокус и отключение получают отдельные роли и меняются вместе с темой.

Чек-лист для своего проекта

1. Найдите hex-коды, которые повторяются больше одного раза, и вынесите оттенки в палитру.
2. Дайте роль каждому месту, где цвет решает свою задачу: действию, ссылке, рамке, тексту, аватару.
3. Заведите шкалу размеров и роли для отступов и радиусов.
4. Для разновидностей компонента заведите компонентные токены поверх ролей.
5. Опишите состояния — наведение, фокус, отключение — отдельными ролями.
6. Добавляйте темы как другие значения тех же ролей, а не как новые правила для компонентов.
7. Перенесите токены в tokens/tokens.json, подключите сборку к dev и build, а UI-библиотеки — через адаптеры, которые читают src/tokens.js.
8. Перед правкой перечислите потребителей роли и сверьте результат с прогнозом.
9. Передавайте UI-библиотекам роли каждой темы и общие размеры, а не одно базовое значение.
10. Переименовывайте и удаляйте токены по шагам: новое имя, перевод потребителей, удаление старого.

Чего мы не делали

• Не меняли тему условными конструкциями в CSS: только атрибут на корне.
• Не копировали hex-код в потребителей: библиотеки получают значение роли.
• Не редактировали сгенерированные src/tokens.css и src/tokens.js — это результат сборки.
• Не заводили токен ради каждого числа: служебные отступы переключателя остались локальным CSS.
• Не удаляли токен, пока у него оставались потребители.
• Не подключали экспорт Figma к сборке напрямую: его проверяют и переносят в tokens/tokens.json по таблице соответствия.

Материалы для чтения

• Формат Design Tokens Community Group — структура токенов, типы и ссылки между значениями.
• Style Dictionary — сборка токенов в CSS, JavaScript и другие форматы.
• Terrazzo — работа с DTCG-токенами и генерация файлов для разных платформ.
• Tokens Studio — если изменения токенов приходят из Figma, а не из кода.
• Simple Design System — открытая дизайн-система Figma с экспортом переменных и React-кодом.
• Темы Mantine — настройка цветов, размеров и других параметров через MantineProvider.
• Настройка темы Ant Design — глобальные и компонентные токены, алгоритмы тем.