# Styling

This section documents the global styling model behind VegaUI. Read it before the Styling page of a component.

## Scope

- [Tokens](https://vega-ui.dev/docs/styling/tokens/): global design tokens from `@vega-ui/tokens-core`
- [Themes](https://vega-ui.dev/docs/styling/themes/): light and dark theme layers from `@vega-ui/theme-core`
- [CSS variables](https://vega-ui.dev/docs/styling/css-variables/): how global and component variables are composed in real apps

## Source Of Truth

- `packages/tokens/src/*.css`: raw token definitions
- `packages/theme/src/*.css`: semantic theme layers
- `packages/ui/src/**/style.module.css`: component-level override points

## Mental Model

Use the styling system in this order:

1. import global tokens
2. apply a theme class such as `.light` or `.dark`
3. consume semantic variables in components
4. use component-local `--component-*` variables only for targeted overrides