Anatomy
Properties
CSS Tokens : layout
| State | Property | Token |
|---|
| Default | padding | mu-100 (1rem) |
| Default | border-radius | radius.m (4px) |
| Default | border-width | border.s (1px) |
| Default | font-size | size.font.05(16px) |
CSS Tokens : state colors
You must always use the tokens, the colors are listed here for information purposes only.
| State | Property | Token | Color |
|---|
| Default | background | color.input.background | #ffffff |
| Default | border-color | color.input.border | #6f676c |
| Default | color | color.input.text | #222020 |
| Hover | border-color | color.input.hover.border | #222020 |
| Focus | border-color | color.input.focus.border | #25a8d0 |
| Valid | border-color | color.input.valid.border | #78be20 |
| Invalid | border-color | color.input.invalid.border | #df382b |
| Disabled | background | color.input.disabled.background | #eeeef0 |
| Disabled | border-color | color.input.disabled.border | #eeeef0 |
| Disabled | color | color.input.placeholder | #887f87 |
