| State |
Visual change |
Tokens |
| Viewing |
Text and the pencil button |
color-text-default |
| Empty |
Subtle empty text |
color-text-subtle |
| Editing |
The TextInput box (field shadow; on focus a 2 px focus outline 2 px outside the box), save and cancel |
input-shadow, color-border-focus, color-focus-ring |
| Error |
Danger border and a 2 px danger halo, as in TextInput, with the message below |
color-border-danger, color-status-danger-background, color-text-danger |
| Saving |
Loading on the save button |
As in Button |
| Property |
Value |
Token |
| Edit button |
32 px |
button-height-sm |
| Field and buttons |
36 px; 40 px on touch screens |
input-height-md, button-height-md |
| Between elements |
4 px |
space-xs |
| 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-input-shadow | | 0px 1px 2px 0px rgba(0, 0, 0, 0.050980392156862744)0px 1px 2px 0px rgba(0, 0, 0, 0.050980392156862744)0px 1px 2px 0px rgba(0, 0, 0, 0.050980392156862744) | 0px 0px 0px 0px rgba(0, 0, 0, 0)0px 0px 0px 0px rgba(0, 0, 0, 0)0px 0px 0px 0px rgba(0, 0, 0, 0) |
--bigbang-color-border-focus | | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 |
--bigbang-color-focus-ring | | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
--bigbang-color-border-danger | | #c14347#c14347#c14347 | #ff9a97#ff9a97#ff9a97 |
--bigbang-color-status-danger-background | | #ffe8e7#ffe8e7#ffe8e7 | #4c1d1d#4c1d1d#4c1d1d |
--bigbang-color-text-danger | | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb |
--bigbang-input-height-md | | 36px36px36px | 36px36px36px |
--bigbang-button-height-sm | | 32px32px32px | 32px32px32px |
--bigbang-space-xs | | 4px4px4px | 4px4px4px |
The switch between the view and the field is instant. The error appears with motion.fieldMessage; the buttons use motion.press.