States
Section titled “States”| State | Look | Tokens |
|---|---|---|
| Default | Input border, subtle currency | color-border-input, color-text-subtle |
| Focus | Focus border and ring, dark currency | color-border-focus, color-text-default |
| Error | Danger border and message | color-border-danger |
| Disabled | Disabled surface | color-surface-disabled |
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 |
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-motion-hover-duration | 0.11s0.11s0.11s | 0.11s0.11s0.11s |
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. |
| Currency | Darkens on focus | motion-hover-duration |
motion-hover-easing |
Same; colour only. |
| Error message | Slides in (motion.fieldMessage) |
motion-collapsible-duration |
motion-collapsible-easing |
It only fades. |