Components

DatePicker

A date field typed into day, month and year segments or picked from a calendar popup.

Storybook: Storybook
Source: Source

States

State	Visual change	Tokens
Empty	Placeholder segments	`color-text-placeholder`
Focused segment	Primary fill	`color-action-primary-default`
Open	The calendar pops up	`shadow-overlay`, `radius-lg`
Invalid	Danger border and message	`color-border-danger`, `color-text-danger`
Read-only	Calendar button disabled	`color-text-disabled`
Disabled	Faded box	`color-surface-disabled`

Measurements

Property	Value	Token
Height	32 / 36 / 40 px	`input-height-sm`, `input-height-md`, `input-height-lg`
Calendar button	24 / 28 / 32 px	`input-action-size-sm`, `input-action-size-md`, `input-action-size-lg`
Popup placement	Below the field, aligned to its start, 4 px away	`space-xs`
Popup padding	8 px	`space-md`
Day cell	40 px	`calendar-cell-size`

Tokens

Values are shown for the selected brand; switch brands from the top bar.

Token	Sample	Light mode	Dark mode
`--bigbang-input-height-md`		`36px36px36px`	`36px36px36px`
`--bigbang-input-height-lg`		`40px40px40px`	`40px40px40px`
`--bigbang-input-action-size-md`		`28px28px28px`	`28px28px28px`
`--bigbang-calendar-cell-size`		`40px40px40px`	`40px40px40px`
`--bigbang-color-action-primary-default`		`#146d83#171717#171717`	`#77bacf#e5e5e5#e5e5e5`
`--bigbang-color-text-placeholder`		`#737373#737373#737373`	`#a1a1a1#a1a1a1#a1a1a1`
`--bigbang-shadow-overlay`		`0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)`	`0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)`
`--bigbang-radius-lg`		`10px10px10px`	`10px10px10px`
`--bigbang-color-focus-ring`		`#146d83#737373#737373`	`#77bacf#8c8c8c#8c8c8c`

Motion and interaction

Interaction	Property	Duration token	Easing token	Reduced motion
Calendar opens	Fades, scales, moves 4 px (`motion.popover`)	`motion-popover-enter-duration`	`motion-popover-enter-easing`	It only fades.
Calendar closes	Fades faster	`motion-popover-exit-duration`	`motion-popover-exit-easing`	It only fades.
Segment focus	Fill colour	`motion-hover-duration`	`motion-hover-easing`	Unchanged.
Pressing the calendar button	`scale` (`motion.press`)	`motion-press-duration`	`motion-press-easing`	Scale 1.

See Calendar for the month grid motion.