Border
Borders separate a control from the surface behind it. Surfaces do not change shade to show depth, so the border does that job.
Colours
| Token | Value | Used for | |
|---|---|---|---|
| --wr-border | #8c8f97 | A field outline. | |
| --wr-divider | #0b120e24 | A divider, a table rule, a card edge. | |
| --wr-border-focused | #4688ec | The focus ring, 2px with a 2px offset. |
Widths
One width for structure, one for focus.
| Width | Used for |
|---|---|
| 1px | Field outlines, dividers, card edges, table rules. |
| 2px | The focus ring, and the underline on a selected tab. |