States
Section titled “States”| State | Visual change | Tokens |
|---|---|---|
| Empty | Country code and an empty number | color-border-input |
| List open | The chevron turns half a turn, the list appears | shadow-overlay, color-surface-raised |
| Focus | Focus border and ring on the box | color-border-focus, color-focus-ring |
| Invalid | Danger border, error text | color-border-danger, color-text-danger |
| Disabled | Faded box and picker | color-surface-disabled, color-text-disabled |
Measurements
Section titled “Measurements”| Property | Value | Token |
|---|---|---|
| Height | 32 / 36 / 40 px | input-height-sm, input-height-md, input-height-lg |
| Picker to number | 1 px line, 6 px space | color-border-default, space-sm |
| List item | 6 px vertical padding | space-sm |
| List offset | 8 px | space-md |
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-radius | 10px10px10px | 10px10px10px | |
--bigbang-color-border-input | #8c8c8c#8c8c8c#8c8c8c | #737373#737373#737373 | |
--bigbang-color-border-default | #e5e5e5#e5e5e5#e5e5e5 | #404040#404040#404040 | |
--bigbang-color-surface-hovered | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 | |
--bigbang-color-surface-selected | #edf5f8#ededed#ededed | #092932#404040#404040 | |
--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-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 |
|---|---|---|---|---|
| The list opens | Fades, scales and moves 4 px (motion.popover) |
motion-popover-enter-duration |
motion-popover-enter-easing |
Scale 1, distance 0; it only fades. |
| The chevron turns | rotate 180° (motion.collapsibleIcon) |
motion-collapsible-icon-duration |
easing-productive |
Shorter. |
| Selected country | The check grows (motion.selectionMark) |
motion-selection-duration |
motion-selection-easing |
Scale 1. |
| Focus and error | Border colour (motion.field) |
motion-focus-duration |
motion-focus-easing |
Unchanged. |
See Motion for values.