| State |
Visual change |
Tokens |
| Default |
Dark title, muted chevron |
color-fg-subtle |
| Hover |
line: the header text is underlined. contained: button background one step darker |
color-action-subtle-hovered (contained) |
| Pressed |
contained only: background one more step darker |
color-action-subtle-pressed |
| Open |
Chevron turns 180°, panel is visible |
None |
| Focus |
3 px focus halo; inside the box in the contained look |
color-focus-ring |
| Disabled |
Muted text and chevron, not-allowed cursor |
None |
line |
A rule between items only, none above the first or below the last; no inline padding |
color-line-subtle |
contained |
Each item is a bordered raised box |
color-line-default, color-surface-raised |
| Size |
Button height |
Padding |
Title text |
Panel padding |
sm (default) |
At least 36 px (button-height-md) |
accordion-padding-block-sm (10 px) block; space-sm inline in contained |
text-label-md |
accordion-padding-block-sm below |
md |
At least 40 px (button-height-lg) |
accordion-padding-block-md (12 px) block; space-md inline in contained |
text-heading-sm |
accordion-padding-block-md below |
Panel text is text-body-md and the description is text-body-sm. In the line look the header and panel have no inline padding, so the text lines up with the content around the accordion; in contained the panel’s inline padding matches the header. The chevron and the optional icon sit on the first line of the title. In the contained look the corner radius is radius-md and items are space-sm apart.
Values show for the selected brand; switch the brand in the top bar.
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-button-height-md | | 36px36px36px | 36px36px36px |
--bigbang-button-height-lg | | 40px40px40px | 40px40px40px |
--bigbang-accordion-padding-block-sm | | 10px10px10px | 10px10px10px |
--bigbang-accordion-padding-block-md | | 12px12px12px | 12px12px12px |
--bigbang-color-line-subtle | | | |
--bigbang-color-line-default | | | |
--bigbang-color-surface-raised | | #ffffff#ffffff#ffffff | #262626#262626#262626 |
--bigbang-color-action-subtle-hovered | | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 |
--bigbang-color-action-subtle-pressed | | #ededed#ededed#ededed | #404040#404040#404040 |
--bigbang-color-focus-ring | | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
--bigbang-color-fg-subtle | | | |
| Interaction |
Property |
Duration token |
Easing token |
Reduced motion |
| Panel opens |
opacity 0 → 1, translate 4 px |
motion-collapsible-duration (150 ms) |
motion-collapsible-easing |
Fade only; distance is 0 (motion-collapsible-distance). |
| Chevron turns |
rotate 180° |
motion-collapsible-icon-duration (150 ms) |
easing-productive |
Turns at once. |
Hover and pressed colour (contained) |
background-color |
motion-hover-duration |
motion-hover-easing |
Unchanged; colour only. |
| Panel closes |
None |
None |
None |
Closes at once. |
The height changes at once and is never animated (MOT-02). See Motion for the values.