Components

InlineAlert

An information, success, warning or error message inside the content about a section, a form or the page.

Storybook: Storybook
Source: Source

States

State	Visual change	Tokens
Info / success / warning / error	The tone’s pastel background, border and icon	`color-status--background`, `color-status--border`, `color-icon-*`
Dismissing	Fades	`motion-collapsible-duration`

Measurements

Property	Value	Token
Padding	12 px	`space-lg`
Icon to text	8 px	`space-md`
Icon	16 px, centred on the first line	`icon-size-sm`
Title to message	2 px	`space-xxs`
Corner radius	8 px	`radius-md`
Title / message	`label-md` / `body-md`, the message in `text-subtle`	`text.label-md`, `text.body-md`, `color-text-subtle`

Tokens

Values follow the selected brand; change the brand in the top bar.

Token	Sample	Light mode	Dark mode
`--bigbang-color-status-info-background`		`#e1f1ff#e1f1ff#e1f1ff`	`#0d304b#0d304b#0d304b`
`--bigbang-color-status-success-background`		`#def6e5#def6e5#def6e5`	`#103620#103620#103620`
`--bigbang-color-status-warning-background`		`#ffebd5#ffebd5#ffebd5`	`#422702#422702#422702`
`--bigbang-color-status-danger-background`		`#ffe8e7#ffe8e7#ffe8e7`	`#4c1d1d#4c1d1d#4c1d1d`
`--bigbang-color-border-subtle`		`#ededed#ededed#ededed`	`#303030#303030#303030`
`--bigbang-color-text-subtle`		`#404040#404040#404040`	`#d4d4d4#d4d4d4#d4d4d4`
`--bigbang-icon-size-sm`		`16px16px16px`	`16px16px16px`
`--bigbang-color-icon-info`		`#007ac1#007ac1#007ac1`	`#79c2ff#79c2ff#79c2ff`
`--bigbang-color-icon-success`		`#138a50#138a50#138a50`	`#7dd09b#7dd09b#7dd09b`
`--bigbang-color-icon-warning`		`#a16600#a16600#a16600`	`#ecac5f#ecac5f#ecac5f`
`--bigbang-color-icon-danger`		`#c14347#c14347#c14347`	`#ff9a97#ff9a97#ff9a97`
`--bigbang-motion-collapsible-duration`		`0.15s0.15s0.15s`	`0.15s0.15s0.15s`
`--bigbang-motion-collapsible-distance`		`4px4px4px`	`4px4px4px`

Motion and interaction

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.