| State |
Visual change |
Tokens |
| Default |
Control border |
color-border-input |
| Focus |
The border takes the focus colour; 2 px outer focus outline with a 2 px gap |
color-border-focus, color-focus-ring |
| Invalid |
Danger border, a 2 px danger halo around it and error text |
color-border-danger, color-status-danger-background, color-text-danger |
| Disabled |
Faded background and text |
color-surface-disabled, color-border-disabled, color-text-disabled |
| Counter near the limit (80 %) |
Counter in the warning colour |
color-text-warning |
| Counter over the limit |
Counter in the danger colour |
color-text-danger |
| Property |
Value |
Token |
| Gap between parts |
4 px |
space-xs |
| Control height |
36 px |
input-height-md |
| Control inline padding |
input-padding-inline |
input-padding-inline |
| Label style |
label-md (14 px) |
text.label-md |
| Help, error and counter style |
body-sm (12 px) |
text.body-sm |
Values are shown for the selected brand; change the brand from 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-text-danger | | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb |
--bigbang-color-text-warning | | #8a5600#8a5600#8a5600 | #f7c790#f7c790#f7c790 |
--bigbang-color-border-input | | #8c8c8c#8c8c8c#8c8c8c | #737373#737373#737373 |
--bigbang-color-border-focus | | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 |
--bigbang-color-border-danger | | #c14347#c14347#c14347 | #ff9a97#ff9a97#ff9a97 |
--bigbang-input-height-md | | 36px36px36px | 36px36px36px |
--bigbang-input-radius | | 10px10px10px | 10px10px10px |
--bigbang-space-xs | | 4px4px4px | 4px4px4px |
| Interaction |
Property |
Duration token |
Easing token |
Reduced motion |
| Focus and error border |
border-color, background-color (motion.field) |
motion-focus-duration (110 ms) |
motion-focus-easing |
Unchanged; it is a colour transition only. |
| Error text appearing |
opacity 0 → 1 and 4 px down (motion.fieldMessage) |
motion-collapsible-duration (150 ms) |
motion-collapsible-easing |
The distance becomes 0; the text only appears. |
| Focus ring |
No transition, at once |
None |
None |
Unchanged. |
See Motion for the values.