DayPicker

Обзор

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

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

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

Цвета и поверхности на уровне темы должны приходить из Тем и Токенов, а не из собственных переменных --day-picker-*.

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

Корень

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

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

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

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

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

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

Примеры

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

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

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>

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

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