| State |
Visual change |
Tokens |
| Empty |
Placeholder text |
color-text-placeholder |
| Focus |
Border turns to the focus colour, 2 px ring |
color-border-focus, color-focus-ring |
| At a bound |
The step button in that direction fades |
color-text-disabled |
| Invalid |
Danger border, error text |
color-border-danger, color-text-danger |
| Read-only |
Buttons inactive, value selectable |
color-text-disabled |
| Disabled |
Faded box, label and buttons |
color-surface-disabled, color-border-disabled |
| Property |
Value |
Token |
| Height |
32 / 36 / 40 px |
input-height-sm, input-height-md, input-height-lg |
| Step button |
24 / 28 / 32 px square |
input-action-size-sm, input-action-size-md, input-action-size-lg |
| Button icon |
16 px |
icon-size-sm |
| Box padding |
12 px at the start, 2 px at the end (with buttons) |
input-padding-inline, space-xxs |
| Digits |
Equal width (tabular-nums) |
— |
Values are shown for the selected brand; switch brands from the top bar.
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-input-height-md | | 36px36px36px | 36px36px36px |
--bigbang-input-height-lg | | 40px40px40px | 40px40px40px |
--bigbang-input-radius | | 10px10px10px | 10px10px10px |
--bigbang-input-padding-inline | | 12px12px12px | 12px12px12px |
--bigbang-input-action-size-md | | 28px28px28px | 28px28px28px |
--bigbang-input-action-size-lg | | 32px32px32px | 32px32px32px |
--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-color-text-subtle | | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 |
--bigbang-color-focus-ring | | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
| Interaction |
Property |
Duration token |
Easing token |
Reduced motion |
| Pressing a step button |
scale 0.97 (motion.press) |
motion-press-duration (70 ms), motion-release-duration on release |
motion-press-easing, easing-spring-productive-fast |
Scale stays 1; only colour changes. |
| Hovering a button |
background-color |
motion-hover-duration (110 ms) |
motion-hover-easing |
Unchanged; it is a colour change. |
| Focus and error |
Border colour (motion.field) |
motion-focus-duration |
motion-focus-easing |
Unchanged. |
| Error text |
Fades in and drops 4 px (motion.fieldMessage) |
motion-collapsible-duration |
motion-collapsible-easing |
Distance becomes 0; it only fades. |
Holding a step button repeats the step (Base UI press and hold). See Motion for values.