States
Section titled “States”| State | Look | Tokens |
|---|---|---|
| Default | Input border, subtle TR prefix | color-border-input, color-text-subtle |
| Focus | Focus border and ring | color-border-focus |
| Valid | A check mark in the success colour | color-text-success |
| Error | Danger border and message | color-border-danger |
Measurements
Section titled “Measurements”| Property | Value | Token |
|---|---|---|
| Height | 32 / 36 / 40 px | input-height-sm, input-height-md, input-height-lg |
| Inline padding | 12 px | input-padding-inline |
| Prefix to digits | 4 px | space-xs |
Tokens
Section titled “Tokens”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-padding-inline | 12px12px12px | 12px12px12px | |
--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-text-success | #0e7644#0e7644#0e7644 | #a5e2b9#a5e2b9#a5e2b9 | |
--bigbang-motion-feedback-duration | 0.24s0.24s0.24s | 0.24s0.24s0.24s |
Motion and interaction
Section titled “Motion and interaction”| Interaction | Property | Duration token | Easing token | Reduced motion |
|---|---|---|---|---|
| Focus and error | Border and fill colour change (motion.field) |
motion-focus-duration |
motion-focus-easing |
Same; colour only. |
| Valid | The check mark grows from 60% (motion.success) |
motion-feedback-duration |
motion-feedback-easing |
It only appears. |
| Error message | Slides in (motion.fieldMessage) |
motion-collapsible-duration |
motion-collapsible-easing |
It only fades. |