Borders and lines
One hairline weight, from the faint card edge to the field line that darkens on focus.
Steps
line-faintlineline-controlline-focusline-strong
| Token | Light value | Used by |
|---|---|---|
--line-faint | rgb(5 5 5 / 0.06) | card, panel, row rule |
--line | rgb(5 5 5 / 0.10) | menu, popover, dialog, separator |
--line-control | rgb(5 5 5 / 0.15) | input, select, textarea |
--line-focus | rgb(5 5 5 / 0.32) | input, select, textarea, prompt input |
--line-strong | rgb(5 5 5 / 0.45) | checkbox, radio, switch off |
A field at rest and with the cursor
Rows in a panel
Refund agent
Triage agent
Release agent
Tokens
11 tokens
--line-faint- rgb(5 5 5 / 0.06)
--line- rgb(5 5 5 / 0.10)
--line-control- rgb(5 5 5 / 0.15)
--line-focus- rgb(5 5 5 / 0.32)
--line-strong- rgb(5 5 5 / 0.45)
--focus- rgb(5 5 5 / 0.80)
--line-width- 1px
--focus-width- 2px
--focus-offset- 2px
--focus-width-sm- 1.5px
--focus-offset-sm- 1px