Calendar

A date-picker trigger paired with a monthly grid, built on the line-input system and spacing/font tokens. Today is highlighted with a sky fill and dark text; the selected date uses a primary fill with white text.

Anatomy

A trigger box (calendar icon + date + ) and a monthly grid (prev/next navigation · day-of-week row · date cells). Cell radius is 8px. Weekends use Sunday = --c-negative, Saturday = --c-primary (dark sky).

2026-06-14
June 2026
SuMoTuWeThFrSa
123456789101112131415161718192021222324252627282930

Rules

Core rules for correct Calendar usage.

  • The trigger matches the line input (radius --r-md, line tokens) — calendar icon on the left, chevron on the right.
  • Today = background --c-sky + dark text (literal, preserved in dark mode). Selected = background --c-primary + white text.
  • Sky background always pairs with dark text; primary background always pairs with white text — contrast rules are fixed.
  • Icons use Lucide (global standard). Cell radius: 8px; panel radius: 12px.
  • Dark mode: sky and primary fills are pinned to their light-mode values, so text literals maintain contrast. Only the Saturday weekend color flips to sky.