Раздел 05

Токены

tokens/tokens.source.json — единый источник правды в формате W3C Design Tokens. Скрипт tokens/sync.js генерирует CSS-переменные для сайта. AI-агенты читают JSON напрямую.

Формат W3C

Каждый токен — объект с полями $type, $value и опциональным $description.

{
  "color": {
    "amber": {
      "500": {
        "$type": "color",
        "$value": "#F59E0B",
        "$description": "Базовый акцент. CTA, активные состояния."
      }
    }
  }
}

Структура

base — тема-независимые токены: янтарь, статусы, шрифты, размеры.
dark — токены тёмной темы (canvas, surface, text и т.д.).
light — токены светлой темы.

Как генерируется CSS

Скрипт tokens/sync.js читает JSON и пишет src/styles/tokens.css:

:root {
  --amber-500: #F59E0B;
  --status-success: #10B981;
  --font-sans: 'Golos Text', sans-serif;
}

[data-theme="dark"] {
  --canvas: #0A0A0B;
  --text: #F4F4F5;
}

[data-theme="light"] {
  --canvas: #FAFAF9;
  --text: #1C1917;
}

Для дизайнеров

Подключите tokens.css и используйте переменные: var(--amber-500), var(--canvas).

Для AI-агентов

Читайте tokens/tokens.source.json напрямую. Поле $description объясняет назначение каждого значения. См. также AGENTS.md в корне репозитория.

Команды

npm run dev — запуск с автогенерацией токенов (predev hook).
npm run build — сборка (prebuild регенерирует токены).
npm test — тесты sync-скрипта.