moex-vibe/apps/docs/docs/design-system/foundations.md

Фундаментальные токены

Архитектура

Система токенов состоит из трёх уровней:

Primitives ──► Semantic ──► Component
  (сырые        (алиасы       (алиасы для
   значения)     назначения)   компонентов)

Primitives

Хранят абсолютные значения: конкретные цвета, размеры, шрифты. Не несут семантической нагрузки.

Пример: color.neutral.900 → #1a1a1a, space.4 → 32px.

Semantic

Алиасы, ссылающиеся на примитивы и описывающие назначение. Используются в приложении и компонентах.

Пример: color.text.primary → {color.neutral.900} → #1a1a1a.

Component

Алиасы для конкретных компонентов. Позволяют переопределять токены на уровне компонента без изменения семантических токенов.

Пример: button.bg → {color.action.primary} → {color.green.700}.

Резолвер

Используется DTCG-подобный резолвер (Design Tokens Community Group):

• Цепочная резолюция: component → semantic → primitive
• Проверка циклов
• Проверка типов ($type должен совпадать)
• Кэширование результатов

Токены v1

В версии 1 все токены светлые (light-only). Ключевые группы:

• color — цвета (canvas, surface, text, border, action, feedback, finance)
• typography — шрифты (family, weight)
• spacing — отступы (inset, stack, inline)
• shape — скругления (в примитивах)
• shadow — тени (в примитивах)
• duration — длительности анимаций (в примитивах)
• easing — функции сглаживания (в примитивах)

Полный список семантических токенов — Токены.