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.