States
Section titled “States”| State | Visual change | Tokens |
|---|---|---|
| Closed | An inline link | color-text-link |
| Hover | The link colour deepens | color-text-link-hovered |
| Focus | 2 px focus outline 2 px outside the link | color-focus-ring, focus-offset |
| Open | The shared popup surface: raised fill, hairline edge, popup shadow | color-surface-raised, color-border-overlay, shadow-popup |
Measurements
Section titled “Measurements”| Property | Value | Token |
|---|---|---|
| Width | 240 / 320 / 400 px | popover-width-sm, popover-width-md, popover-width-lg |
| Padding | 10 px | popover-padding |
| Distance from the link | 8 px | - |
| Corner radius | 10 px | popover-radius (radius-lg) |
Tokens
Section titled “Tokens”| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-color-text-link | #125768#171717#171717 | #77bacf#fafafa#fafafa | |
--bigbang-color-text-link-hovered | #0e414f#404040#404040 | #a4d0df#d4d4d4#d4d4d4 | |
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c | |
--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-popover-width-sm | 240px240px240px | 240px240px240px | |
--bigbang-popover-width-md | 320px320px320px | 320px320px320px | |
--bigbang-popover-width-lg | 400px400px400px | 400px400px400px | |
--bigbang-popover-padding | 10px10px10px | 10px10px10px | |
--bigbang-popover-radius | 10px10px10px | 10px10px10px |
Motion and interaction
Section titled “Motion and interaction”The card grows and fades in from the link with motion.popover and closes faster. With reduced motion only the opacity changes.