States
Section titled “States”| State | Visual change | Tokens |
|---|---|---|
| Closed | Info button only | None |
| Button hover / press | State layer and press scale | motion-press-duration |
| Open | Panel with an arrow, 1 px overlay hairline, small shadow | color-surface-raised, color-border-overlay, shadow-popup |
Measurements
Section titled “Measurements”| Property | Value | Token |
|---|---|---|
| Button | 32 × 32 px, round | button-height-sm |
| Panel width | 240 px | popover-width-sm |
| Padding | 10 px | popover-padding |
| Text style | body-md |
text.body-md |
Tokens
Section titled “Tokens”Values follow the selected brand; change the brand in the top bar.
| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-button-height-sm | 32px32px32px | 32px32px32px | |
--bigbang-popover-width-sm | 240px240px240px | 240px240px240px | |
--bigbang-popover-padding | 10px10px10px | 10px10px10px | |
--bigbang-popover-gap | 10px10px10px | 10px10px10px | |
--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-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 |
Motion and interaction
Section titled “Motion and interaction”| Interaction | Property | Duration token | Easing token | Reduced motion |
|---|---|---|---|---|
Enter (motion.popover) |
opacity, scale 0.96 → 1 from the trigger, 4 px drift |
motion-popover-enter-duration |
motion-popover-enter-easing |
Scale 1, distance 0; it only fades in. |
| Exit | opacity, scale 1 → 0.96 |
motion-popover-exit-duration |
motion-popover-exit-easing |
Fades only. |
| Trigger | Press scale (motion.press) |
motion-press-duration |
motion-press-easing |
Scale becomes 1. |
The panel grows from the trigger’s position (--transform-origin). See Motion for the values.