Each part carries its own states; the group applies only the error and disabled states to both.
| State |
Visual change |
Tokens |
| Default |
Two input boxes side by side, with the field shadow |
color-border-input, color-surface-raised, input-shadow |
| Focus |
2 px focus outline 2 px outside the focused part |
color-border-focus, color-focus-ring |
| Error |
Danger border and a 2 px danger halo on both boxes, a message below |
color-border-danger, color-status-danger-background, color-text-danger |
| Disabled |
Both boxes disabled |
color-surface-disabled, color-text-disabled |
| Property |
Value |
Token |
| Between parts |
8 px |
space-md |
| Date part base width |
240 px |
popover-width-sm |
| Height |
32 / 36 / 40 px (sm / md / lg) |
input-height-sm, input-height-md, input-height-lg |
| Legend to parts |
4 px |
space-xs |
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-color-border-input | | #8c8c8c#8c8c8c#8c8c8c | #737373#737373#737373 |
--bigbang-color-surface-raised | | #ffffff#ffffff#ffffff | #262626#262626#262626 |
--bigbang-color-border-danger | | #c14347#c14347#c14347 | #ff9a97#ff9a97#ff9a97 |
--bigbang-color-text-danger | | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb |
--bigbang-color-text-subtle | | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 |
--bigbang-space-md | | 8px8px8px | 8px8px8px |
--bigbang-space-xs | | 4px4px4px | 4px4px4px |
--bigbang-popover-width-sm | | 240px240px240px | 240px240px240px |
--bigbang-input-shadow | | 0px 1px 2px 0px rgba(0, 0, 0, 0.050980392156862744)0px 1px 2px 0px rgba(0, 0, 0, 0.050980392156862744)0px 1px 2px 0px rgba(0, 0, 0, 0.050980392156862744) | 0px 0px 0px 0px rgba(0, 0, 0, 0)0px 0px 0px 0px rgba(0, 0, 0, 0)0px 0px 0px 0px rgba(0, 0, 0, 0) |
--bigbang-color-focus-ring | | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
--bigbang-color-status-danger-background | | #ffe8e7#ffe8e7#ffe8e7 | #4c1d1d#4c1d1d#4c1d1d |
--bigbang-input-height-sm | | 32px32px32px | 32px32px32px |
--bigbang-input-height-md | | 36px36px36px | 36px36px36px |
--bigbang-input-height-lg | | 40px40px40px | 40px40px40px |
The error message appears with motion.fieldMessage. The calendar opens with motion.popover, as in DatePicker.