States
Section titled “States”| State | Visual change | Tokens |
|---|---|---|
| Item highlighted (hover or arrow key) | Background appears | color-action-subtle-hovered |
| Danger item | Red text and icon; red background when highlighted | color-text-danger, color-icon-danger, color-action-danger-subtle-hovered |
| Disabled item | Dimmed text, reason on a second line | color-text-disabled |
| Checked checkbox / radio | The mark or dot grows in at the end of the label | color-icon-brand |
| Submenu open | Its trigger item stays highlighted | color-action-subtle-hovered |
Measurements
Section titled “Measurements”| Property | Value | Token |
|---|---|---|
| Menu width | 192–320 px | menu-min-width, menu-max-width |
| Item height | At least 32 px | menu-item-height |
| Menu padding | 4 px | space-xs |
| Item padding | 8 px inline | space-md |
| Icon | 16 px | icon-size-sm |
| Corner radius | 10 px menu, 6 px item (concentric with the 4 px menu padding) | menu-radius, menu-item-radius, menu-inset |
| Menu edge | 1 px overlay hairline (takes no space), small shadow | color-border-overlay, shadow-popup |
Inset item (inset) |
The label lines up with labels after an icon: 32 px start padding | space-md, icon-size-sm |
Tokens
Section titled “Tokens”Values follow the selected brand; change the brand in the top bar.
| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-menu-min-width | 192px192px192px | 192px192px192px | |
--bigbang-menu-max-width | 320px320px320px | 320px320px320px | |
--bigbang-menu-item-height | 32px32px32px | 32px32px32px | |
--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-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-color-surface-selected | #edf5f8#ededed#ededed | #092932#404040#404040 | |
--bigbang-color-action-danger-subtle-hovered | #fff4f3#fff4f3#fff4f3 | #331212#331212#331212 | |
--bigbang-color-text-danger | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb | |
--bigbang-color-icon-brand | #146d83#9a451c#4f55b4 | #77bacf#ea9774#9aa6ff | |
--bigbang-motion-popover-enter-duration | 0.15s0.15s0.15s | 0.15s0.15s0.15s | |
--bigbang-motion-popover-exit-duration | 0.11s0.11s0.11s | 0.11s0.11s0.11s | |
--bigbang-motion-hover-duration | 0.11s0.11s0.11s | 0.11s0.11s0.11s | |
--bigbang-motion-selection-duration | 0.11s0.11s0.11s | 0.11s0.11s0.11s |
Motion and interaction
Section titled “Motion and interaction”| Interaction | Property | Duration token | Easing token | Reduced motion |
|---|---|---|---|---|
Menu enter and exit (motion.popover) |
opacity, scale 0.96 → 1 from the trigger |
motion-popover-enter-duration, motion-popover-exit-duration |
motion-popover-enter-easing, motion-popover-exit-easing |
Fades only. |
Item highlight (motion.hover) |
background-color |
motion-hover-duration |
motion-hover-easing |
Unchanged. |
Check and dot (motion.selectionMark) |
opacity, scale 60 % → 100 % |
motion-selection-duration |
motion-selection-easing |
Scale 1; fades in only. |
See Motion for the values.