| State |
Visual change |
Tokens |
| Default |
Dashed border |
color-border-strong |
| Hover |
Primary border |
color-action-primary-default |
| Dragging |
Solid primary border, selected surface, 101% scale |
color-surface-selected |
| Keyboard focus |
2 px outer focus outline on the “Choose files” button |
color-focus-ring |
| Invalid |
Danger border and message |
color-border-danger, color-text-danger |
| Disabled |
Faded surface |
color-surface-disabled |
| Property |
Value |
Token |
| Padding |
16 px |
space-xl |
| Border |
2 px dashed |
— |
| Corner radius |
8 px |
radius-lg |
| Icon circle |
16 px icon, 8 px padding |
space-md |
| List row |
With a 32 px button |
button-height-sm |
| Upload progress |
ProgressBar without a visible label, under the file name |
space-xs |
| Failed file |
The row takes the danger border of an invalid field (3:1); the message sits under the file name |
color-border-danger, color-text-danger |
Values are shown for the selected brand; switch brands from the top bar.
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-radius-lg | | 10px10px10px | 10px10px10px |
--bigbang-radius-md | | 8px8px8px | 8px8px8px |
--bigbang-space-xl | | 16px16px16px | 16px16px16px |
--bigbang-color-border-strong | | #8c8c8c#8c8c8c#8c8c8c | #8c8c8c#8c8c8c#8c8c8c |
--bigbang-color-action-primary-default | | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 |
--bigbang-color-surface-selected | | #edf5f8#ededed#ededed | #092932#404040#404040 |
--bigbang-color-surface-sunken | | #f5f5f5#f5f5f5#f5f5f5 | #171717#171717#171717 |
--bigbang-color-border-danger | | #c14347#c14347#c14347 | #ff9a97#ff9a97#ff9a97 |
--bigbang-color-focus-ring | | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
| Interaction |
Property |
Duration token |
Easing token |
Reduced motion |
| Drag starts |
Border and surface colour; scale 1.01 |
motion-hover-duration, motion-release-duration |
motion-hover-easing, easing-spring-productive-fast |
Scale stays 1. |
| Drag starts |
Icon moves up 4 px |
motion-release-duration |
easing-spring-productive-fast |
The icon stays. |
| File added |
The row slides in (motion.listItem) |
motion-list-enter-duration |
easing-productive-enter |
It only fades. |
| Error |
The message fades in (motion.fieldMessage) |
motion-list-enter-duration |
easing-productive-enter |
It only fades. |