| State |
Visual change |
Tokens |
| Info / success / warning / error |
Pastel tone background and bottom edge, an icon in the tone colour, default text |
color-status-*-background, color-status-*-border, color-icon-*, color-text-default |
| Dismissing |
Fades |
motion-collapsible-duration |
| Property |
Value |
Token |
| Width |
The whole container |
None |
| Padding |
8 px block, 16 px inline |
space-sm, space-lg |
| Icon |
16 px |
icon-size-sm |
| Text |
body-sm; action label-sm |
text.body-sm, text.label-sm |
Values follow the selected brand; change the brand in the top bar.
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-color-status-info-emphasis | | #2193e0#2193e0#2193e0 | #79c2ff#79c2ff#79c2ff |
--bigbang-color-status-info-on-emphasis | | #072033#072033#072033 | #072033#072033#072033 |
--bigbang-color-status-success-emphasis | | #2da264#2da264#2da264 | #7dd09b#7dd09b#7dd09b |
--bigbang-color-status-success-on-emphasis | | #092414#092414#092414 | #092414#092414#092414 |
--bigbang-color-status-warning-emphasis | | #c17a00#c17a00#c17a00 | #ecac5f#ecac5f#ecac5f |
--bigbang-color-status-warning-on-emphasis | | #2c1902#2c1902#2c1902 | #2c1902#2c1902#2c1902 |
--bigbang-color-status-danger-emphasis | | #e1595b#e1595b#e1595b | #ff9a97#ff9a97#ff9a97 |
--bigbang-color-status-danger-on-emphasis | | #331212#331212#331212 | #331212#331212#331212 |
--bigbang-motion-collapsible-duration | | 0.15s0.15s0.15s | 0.15s0.15s0.15s |
--bigbang-motion-collapsible-distance | | 4px4px4px | 4px4px4px |
| Interaction |
Property |
Duration token |
Easing token |
Reduced motion |
Appear (motion.collapsible) |
opacity, translate 4 px down |
motion-collapsible-duration |
motion-collapsible-easing |
Distance 0; fades in only. |
| Dismiss |
opacity, then removed |
motion-collapsible-duration |
motion-collapsible-easing |
Shorter. |
Close button (motion.press) |
scale |
motion-press-duration |
motion-press-easing |
Scale 1. |
See Motion for the values.