| State |
Visual change |
Tokens |
| Today |
1 px inner ring, bold digits |
color-border-focus |
| Selected |
Primary fill |
color-action-primary-default, color-action-on-primary-default |
| Hover |
Light fill |
color-action-subtle-hovered |
| Unavailable |
Faded and struck through |
color-text-disabled |
| Status dot |
4 px dot |
color-status-*-emphasis |
| Focus |
2 px ring |
color-focus-ring |
| Property |
Value |
Token |
| Day cell |
40 px |
calendar-cell-size |
| Month buttons |
32 px |
button-height-sm |
| Header to grid |
6 px |
space-sm |
| Weekday names |
12 px / 16 px, regular weight, subtle colour |
body-sm, color-text-subtle |
| Month width |
7 × 40 = 280 px |
calendar-cell-size |
Values are shown for the selected brand; switch brands from the top bar.
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-calendar-cell-size | | 40px40px40px | 40px40px40px |
--bigbang-color-action-primary-default | | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 |
--bigbang-color-action-on-primary-default | | #ffffff#fafafa#fafafa | #0a0a0a#171717#171717 |
--bigbang-color-action-subtle-hovered | | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 |
--bigbang-color-surface-selected | | #edf5f8#ededed#ededed | #092932#404040#404040 |
--bigbang-color-border-focus | | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 |
--bigbang-color-text-disabled | | #a1a1a1#a1a1a1#a1a1a1 | #525252#525252#525252 |
--bigbang-color-focus-ring | | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
| Interaction |
Property |
Duration token |
Easing token |
Reduced motion |
| Month changes |
The new month fades in, moving 4 px in the direction of travel |
motion-list-enter-duration |
easing-productive-enter |
Distance 0; it only fades. |
| Pressing a day |
scale 0.97 (motion.press) |
motion-press-duration, motion-release-duration |
motion-press-easing, easing-spring-productive-fast |
Scale stays 1. |
| Hovering and selecting a day |
background-color |
motion-hover-duration |
motion-hover-easing |
Unchanged. |
See Motion for values.