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

## Обзор

`YearPicker` не определяет большого CSS-контракта для корня. Внешний вид определяется нижележащими примитивами пикера и сетки, а также скомпонованными частями раскладки лет и скроллера.

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

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

Семантика темы должна приходить из [Тем](https://vega-ui.dev/ru/docs/styling/themes/) и [CSS-переменных](https://vega-ui.dev/ru/docs/styling/css-variables/), а не из самодельных переопределений `--year-picker-*`.

## Переменные частей

### Корень

Корень в основном отвечает за поведение и контекст. Он владеет видимым диапазоном лет и состоянием выбора.

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

Отображение сетки и скроллера определяется скомпонованными частями строк, элементов и скроллера, а не отдельным модулем стилей корня.

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

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

## Примеры

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

`size` задаёт размер ячеек и шрифта, `variant` — вид выбранного года; форму страницы задают `rows` и `cols` раскладки. Всё это пропсы, а не CSS-переменные.

```tsx
import { YearPicker, YearPickerCell, YearPickerLayout } from '@vega-ui/react';

export default function SizeAndVariant() {
  return (
    <div style={{ display: 'grid', gap: 'var(--spacing-16)', width: '100%' }}>
      <YearPicker aria-label='Secondary, extra small' locale='en-US' year='2020-01-01' defaultSelected='2026-01-01' style={{ width: '100%' }}>
        <YearPickerLayout rows={3} cols={4}>
          <YearPickerCell />
        </YearPickerLayout>
      </YearPicker>
      <YearPicker aria-label='Primary, medium' locale='en-US' year='2020-01-01' size='md' variant='primary' defaultSelected='2026-01-01' style={{ width: '100%' }}>
        <YearPickerLayout rows={4} cols={3}>
          <YearPickerCell />
        </YearPickerLayout>
      </YearPicker>
    </div>
  );
}
```

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

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