# Стилизация

Этот раздел описывает глобальную модель стилизации VegaUI. Прочитайте его перед страницей «Стилизация» отдельного компонента.

## Охват

- [Токены](https://vega-ui.dev/ru/docs/styling/tokens/): глобальные дизайн-токены из `@vega-ui/tokens-core`
- [Темы](https://vega-ui.dev/ru/docs/styling/themes/): слои светлой и тёмной темы из `@vega-ui/theme-core`
- [CSS-переменные](https://vega-ui.dev/ru/docs/styling/css-variables/): как глобальные переменные и переменные компонентов сочетаются в реальных приложениях

## Источник истины

- `packages/tokens/src/*.css`: исходные определения токенов
- `packages/theme/src/*.css`: семантические слои темы
- `packages/ui/src/**/style.module.css`: точки переопределения на уровне компонентов

## Ментальная модель

Используйте систему стилизации в таком порядке:

1. импортируйте глобальные токены
2. примените класс темы, например `.light` или `.dark`
3. используйте семантические переменные в компонентах
4. применяйте локальные переменные компонента `--component-*` только для точечных переопределений