# Токены

Глобальные токены находятся в @vega-ui/tokens-core: сырые шкалы цвета, типографики, скруглений, отступов, анимаций, теней и слоёв, на которых строятся темы.

Точка входа пакета [packages/tokens/src/index.css](https://github.com/vega-ui/ui/blob/main/packages/tokens/src/index.css) импортирует группы токенов, используемые во всём VegaUI:

- `colors.css`
- `typography.css`
- `radiuses.css`
- `spacings.css`
- `animations.css`
- `shadows.css`
- `layers.css`

## Категории токенов

Пакет токенов даёт исходные строительные блоки, а не поведение компонентов.

- colors: шкалы палитры, например `--color-blue-500`
- typography: токены шрифта, размера, межстрочного интервала и оформления текста
- radiuses: шкалы радиусов скругления
- spacings: шкалы отступов раскладки и размеров элементов управления
- animations: токены таймингов анимации и переходов
- shadows: токены теней для приподнятости и поверхностей
- layers: токены z-index и порядка слоёв

## Рекомендации по цвету

Главное правило из [packages/tokens/README.md](https://github.com/vega-ui/ui/blob/main/packages/tokens/README.md):

- используйте исходные токены палитры только для определения семантики
- внутри компонентов используйте семантические акцентные токены

## Не используйте исходные токены в компонентах

Считайте это жёстким правилом для обычных стилей компонентов.

Используйте исходные токены палитры, такие как `--color-blue-500` или `--color-gray-300`, только когда:

- вы определяете семантическую переменную темы
- вы работаете в самом слое токенов или темы
- документация компонента явно описывает хук на исходный токен как публичный API

В обычном CSS компонентов предпочитайте семантические переменные, например:

- `--text-color`
- `--label-primary`
- `--border-color`
- `--color-blue-accent-500`
- `--color-gray-accent-300`
- `--fills-primary`

Хорошо:

```css
color: var(--color-primary-500);
border-color: var(--color-gray-accent-300);
```

Избегайте в стилях компонентов:

```css
color: var(--color-blue-500);
border-color: var(--color-gray-300);
```

## Почему токены и темы разделены

Токены задают шкалы. Темы решают, как эти шкалы превращаются в семантические переменные приложения. Компоненты обычно должны использовать семантику темы, а не исходные значения токенов, если только контракт компонента явно не описывает хук на исходный токен.