States
Section titled “States”Item states are the same as in DropdownMenu.
| State | Visual change | Tokens |
|---|---|---|
| Open | The shared popup surface: raised fill, hairline edge, popup shadow, 10 px corners, 4 px padding | color-surface-raised, color-border-overlay, shadow-popup, menu-radius, menu-inset |
| Highlighted item | Selected surface fill | color-surface-selected |
| Danger item | Danger text | color-text-danger |
| Disabled item | Disabled text | color-text-disabled |
Measurements
Section titled “Measurements”| Property | Value | Token |
|---|---|---|
| Minimum distance from the screen edge | 16 px | space-xl |
| Item measurements | As in DropdownMenu | - |
Tokens
Section titled “Tokens”| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--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-text-danger | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb | |
--bigbang-color-text-disabled | #a1a1a1#a1a1a1#a1a1a1 | #525252#525252#525252 | |
--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-menu-radius | 10px10px10px | 10px10px10px | |
--bigbang-menu-item-radius | 6px6px6px | 6px6px6px | |
--bigbang-menu-inset | 4px4px4px | 4px4px4px |
Motion and interaction
Section titled “Motion and interaction”The menu grows from the pointer with motion.popover and closes faster. With reduced motion only the opacity changes.