# DayPicker: Стилизация

## Обзор

`DayPicker` не определяет большой локальной CSS-поверхности. Большая часть внешнего вида наследуется от `DataGridPicker`, `CalendarBase` и экспортируемых примитивов элементов и раскладки, из которых он составлен.

## Публичные CSS-переменные

В текущей реализации нет значимых публичных CSS-переменных, специфичных для DayPicker.

Цвета и поверхности на уровне темы должны приходить из [Тем](https://vega-ui.dev/ru/docs/styling/themes/) и [Токенов](https://vega-ui.dev/ru/docs/styling/tokens/), а не из собственных переменных `--day-picker-*`.

## Переменные уровня частей

### Корень

Корень отвечает в первую очередь за поведение, а не за внешний вид. Он согласует математику дат, режим выбора и видимый период.

### Раскладка / содержимое скроллера

Визуальная раскладка определяется составными частями сетки и скроллера, а не отдельным модулем стилей корня.

Внешний вид ячейки дня определяется нижележащими примитивами элементов выбора и общими частями календаря.

## Взаимодействие состояний и вариантов

- Вид выбранного, отключённого и активного состояний в основном задают нижележащие примитивы выбора.
- Смена периода влияет на отрендеренное содержимое сетки, а не на отдельный слой токенов стилей.
- Собственный рендер элементов должен сохранять видимые признаки выбранных, недоступных и находящихся вне периода дней.

## Примеры

### Размер и вариант

`size` задаёт размер ячеек и шрифта, `variant` — вид выбранного дня: `secondary` (по умолчанию) и `primary` рядом. Оба — пропсы корня, а не CSS-переменные.

```tsx
import { DayPicker, DayPickerCell, DayPickerLayout } from '@vega-ui/react';

export default function SizeAndVariant() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--spacing-16)', alignItems: 'start' }}>
      <DayPicker aria-label='Secondary, extra small' locale='en-US' month='2026-11-01' defaultSelected='2026-11-18'>
        <DayPickerLayout>
          <DayPickerCell />
        </DayPickerLayout>
      </DayPicker>
      <DayPicker aria-label='Primary, medium' locale='en-US' month='2026-11-01' size='md' variant='primary' defaultSelected='2026-11-18'>
        <DayPickerLayout>
          <DayPickerCell />
        </DayPickerLayout>
      </DayPicker>
    </div>
  );
}
```

## Не переопределяйте

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