States
Section titled “States”| State | Visual change | Tokens |
|---|---|---|
| Default | Input border, raised background; placeholder colour when empty | color-border-input, color-surface-raised, color-text-placeholder |
| Focus or list open | Focus border; 2 px outer focus outline with a 2 px gap on focus | color-border-focus, color-focus-ring |
| Invalid | Danger border, a 2 px danger halo around it and error text | color-border-danger, color-status-danger-background, color-text-danger |
| Highlighted option | Selected surface fill; the only fill on a row | color-surface-selected |
| Chosen option | A check mark, no fill (with multiple, several rows are checked) |
color-icon-brand |
| Disabled | Faded background, border and text | color-surface-disabled, color-border-disabled, color-text-disabled |
| Read-only | The look does not change; the list does not open | - |
Measurements
Section titled “Measurements”| Property | Value | Token |
|---|---|---|
| Trigger height | 32, 36 or 40 px | input-height-sm, input-height-md, input-height-lg |
| Trigger width | Fits the value; fullWidth fills the field |
- |
| Trigger padding | 12 px at the start, 8 px at the end | input-padding-inline, space-md |
| Gap between list and trigger | 4 px | - |
| List padding | 4 px | space-xs |
| Option row | At least 32 px; 4 px block and 8 px inline padding; 6 px corners | menu-item-height, menu-item-padding-block, menu-item-padding-inline, menu-item-radius |
| List corner radius | 10 px | menu-radius |
| Group heading | label-sm subtle text lined up with the option text: 8 px inline, 6 px above, 2 px below |
text-label-sm, menu-item-padding-inline |
| Separator | 1 px line with 4 px above and below | color-border-subtle, space-xs |
| List width | At least the trigger width | - |
Tokens
Section titled “Tokens”Values are shown for 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-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c | |
--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-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-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-menu-inset | 4px4px4px | 4px4px4px |
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 trigger (motion.popover) |
motion-popover-enter-duration (150 ms) |
motion-popover-enter-easing |
No scale or slide; 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 at 1. |
| Highlighted option | Background colour (motion.hover) |
motion-hover-duration (110 ms) |
motion-hover-easing |
Unchanged; a colour transition. |
| Trigger focus and error | Border colour (motion.field) |
motion-focus-duration (110 ms) |
motion-focus-easing |
Unchanged. |
See Motion for the values.