States
Section titled “States”| State | Visual change | Tokens |
|---|---|---|
| Default | Input border, raised background | color-border-input, color-surface-raised |
| Focus | Focus border and a 2 px outer focus outline with a 2 px gap | color-border-focus, color-focus-ring |
| Open | The list opens on the shared popup surface (hairline edge, popup shadow); the chevron stays still | color-border-overlay, shadow-popup |
| Highlighted option | Selected surface fill; the only fill on a row | color-surface-selected |
| Chosen option | A check mark, no fill | color-icon-brand |
| Groups | label-sm subtle heading lined up with the option text; a 1 px line between groups |
text-label-sm, menu-item-padding-inline, color-border-subtle |
| Chip | Sunken background; the Backspace target gets the selected background | color-surface-sunken, color-surface-selected |
| Error | Danger border and message | color-border-danger |
| Disabled | Dimmed background and text | color-surface-disabled, color-text-disabled |
Measurements
Section titled “Measurements”| Size | Minimum height |
|---|---|
sm |
32 px (input-height-sm) |
md |
36 px (input-height-md) |
lg |
40 px (input-height-lg) |
With multiple the field grows as chips wrap. Chips are 4 px apart (space-xs). The chevron button, or the clear button that takes its place with showClear, is 32 × 32 px; at size sm it is 24 × 24 px so it fits inside the field. The list opens 6 px from the field, matches its width, has 4 px padding (space-xs) and scrolls beyond 252 px (combobox-list-max-height).
Tokens
Section titled “Tokens”Values follow the selected brand; change the brand from the top bar.
| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-color-border-input | #8c8c8c#8c8c8c#8c8c8c | #737373#737373#737373 | |
--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-border-focus | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 | |
--bigbang-color-border-danger | #c14347#c14347#c14347 | #ff9a97#ff9a97#ff9a97 | |
--bigbang-color-status-danger-background | #ffe8e7#ffe8e7#ffe8e7 | #4c1d1d#4c1d1d#4c1d1d | |
--bigbang-color-surface-raised | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--bigbang-color-surface-sunken | #f5f5f5#f5f5f5#f5f5f5 | #171717#171717#171717 | |
--bigbang-color-border-overlay | #ededed#ededed#ededed | rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549) | |
--bigbang-color-surface-selected | #edf5f8#ededed#ededed | #092932#404040#404040 | |
--bigbang-color-icon-brand | #146d83#9a451c#4f55b4 | #77bacf#ea9774#9aa6ff | |
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c | |
--bigbang-shadow-popup | 0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549)0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549)0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549) | 0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804)0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804)0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804) | |
--bigbang-input-height-sm | 32px32px32px | 32px32px32px | |
--bigbang-input-height-md | 36px36px36px | 36px36px36px | |
--bigbang-input-height-lg | 40px40px40px | 40px40px40px | |
--bigbang-input-radius | 10px10px10px | 10px10px10px | |
--bigbang-menu-radius | 10px10px10px | 10px10px10px | |
--bigbang-menu-item-height | 32px32px32px | 32px32px32px | |
--bigbang-menu-item-radius | 6px6px6px | 6px6px6px | |
--bigbang-button-height-xs | 24px24px24px | 24px24px24px | |
--bigbang-button-height-sm | 32px32px32px | 32px32px32px |
Motion and interaction
Section titled “Motion and interaction”| Interaction | Property | Duration token | Easing token | Reduced motion |
|---|---|---|---|---|
| List opens | opacity 0 → 1, scale 0.96 → 1, 4 px toward the field (motion.popover) |
motion-popover-enter-duration (150 ms) |
motion-popover-enter-easing |
No scale or shift; the list only appears. |
| List closes | opacity and scale back |
motion-popover-exit-duration (110 ms) |
motion-popover-exit-easing |
The list only fades. |
| Check mark | opacity and scale 0.6 → 1 (motion.selectionMark) |
motion-selection-duration (110 ms) |
motion-selection-easing |
Scale stays 1. |
| New chip | opacity 0 → 1 (motion.reveal) |
motion-skeleton-reveal-duration |
easing-productive-enter |
Unchanged. |
| Focus and error | Border colour (motion.field) |
motion-focus-duration (110 ms) |
motion-focus-easing |
Unchanged. |
See Motion for the values.