States
Section titled “States”| State | Visual change | Tokens |
|---|---|---|
| Range end | Primary fill | color-action-primary-default |
| Inside the range and preview | Selected surface, square corners | color-surface-selected |
| Selected preset | Selected surface, bold text | color-surface-selected |
| Disabled preset | Faded text | color-text-disabled |
| Invalid | Danger border and message | color-border-danger, color-text-danger |
| Disabled | Faded box | color-surface-disabled |
Measurements
Section titled “Measurements”| Property | Value | Token |
|---|---|---|
| Field height | 32 / 36 / 40 px | input-height-sm, input-height-md, input-height-lg |
| Preset row | At least 32 px | button-height-sm |
| Preset column | 160 px (from 768 px) | — |
| Between months | 16 px | space-xl |
| Two-month breakpoint | 1024 px | — |
| Day cell | 40 px | calendar-cell-size |
Tokens
Section titled “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-surface-selected | #edf5f8#ededed#ededed | #092932#404040#404040 | |
--bigbang-button-height-sm | 32px32px32px | 32px32px32px | |
--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
Section titled “Motion and interaction”| Interaction | Property | Duration token | Easing token | Reduced motion |
|---|---|---|---|---|
| Popup opens | Fades, scales, moves 4 px (motion.popover) |
motion-popover-enter-duration |
motion-popover-enter-easing |
It only fades. |
| Range preview | Background colour | motion-hover-duration |
motion-hover-easing |
Unchanged. |
| Pressing a preset | scale (motion.press) |
motion-press-duration |
motion-press-easing |
Scale 1. |
| Month changes | Moves in 4 px | motion-list-enter-duration |
easing-productive-enter |
It only fades. |