| State |
Support |
Visual change |
Tokens |
| Default |
Yes |
Controls side by side, chips and the result count below |
color-text-default, color-text-subtle |
Draft changed (batch) |
Yes |
Apply and Reset become enabled |
- |
| Loading |
Yes |
The result count is a placeholder; Apply shows its loading state; the root is aria-busy |
- |
| More filters open |
Yes (narrow screens) |
The panel opens inline; the arrow turns half a turn |
motion-collapsible-duration, motion-collapsible-icon-duration |
| Focus |
Yes |
The 2 px focus ring of the controls inside |
color-focus-ring, border-width-focus |
| No results |
Composition |
The count reads “0 results”; the table shows its empty state |
- |
| Property |
Value |
Token |
| Gap between controls |
8 px |
space-md |
| Gap between rows |
12 px |
space-lg |
| Search box width, 1024 px and up |
288 px |
- |
| Field width, 1024 px and up |
176 px |
- |
| Gap between chips |
6 px |
space-sm |
| Multi-select panel |
8 px corners, 12 px padding, shadow |
radius-md, space-lg, shadow-overlay |
| Result count style |
12 px / 16 px |
body-sm |
| Narrow-screen breakpoint |
1024 px (lg) |
- |
Values follow the selected brand; switch the brand in the top bar.
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-color-text-default | | #171717#171717#171717 | #fafafa#fafafa#fafafa |
--bigbang-color-text-subtle | | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 |
--bigbang-color-surface-raised | | #ffffff#ffffff#ffffff | #262626#262626#262626 |
--bigbang-color-border-subtle | | #ededed#ededed#ededed | #303030#303030#303030 |
--bigbang-color-focus-ring | | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
--bigbang-radius-md | | 8px8px8px | 8px8px8px |
--bigbang-space-md | | 8px8px8px | 8px8px8px |
--bigbang-space-lg | | 12px12px12px | 12px12px12px |
--bigbang-space-sm | | 6px6px6px | 6px6px6px |
--bigbang-motion-collapsible-duration | | 0.15s0.15s0.15s | 0.15s0.15s0.15s |
--bigbang-motion-collapsible-distance | | 4px4px4px | 4px4px4px |
--bigbang-motion-collapsible-icon-duration | | 0.15s0.15s0.15s | 0.15s0.15s0.15s |
--bigbang-motion-list-enter-duration | | 0.15s0.15s0.15s | 0.15s0.15s0.15s |
--bigbang-motion-skeleton-reveal-duration | | 0.11s0.11s0.11s | 0.11s0.11s0.11s |
| Interaction |
Motion |
Reduced motion |
| A chip is added |
Opacity 0 → 1 and a 4 px rise (motion.listItem, inside Tag) |
Rise is 0 px; a short fade |
| A chip is removed |
Leaves at once |
Same |
| More filters opens |
Content appears with opacity and a 4 px downward drift (motion.collapsible); the arrow turns half a turn (motion.collapsibleIcon) |
Drift is 0 px |
| The result count changes |
The new text fades in (motion.reveal) |
A short fade |
| Buttons |
Press feedback (motion.press) |
Scale 1 |
| Multi-select panel |
Opens scaling from the trigger (motion.popover) |
Scale 1 |
Values come from tokens; see Motion for details.