Borders
Design tokens for border styles
Border tokens are composed of a border size, border style and border color.
Base Border Tokens
| Style | Token | Value | Compiled Value |
|---|---|---|---|
| $border-style | solid | solid | |
| $border-color | $lines-light | #E4E4E4 | |
| $border-width-0 | 0px | 0px | |
| $border-width-1 | 1px | 1px | |
| $border-width-2 | 2px | 2px | |
| $border-width-3 | 3px | 3px | |
| $border-width-4 | 4px | 4px | |
| $border-width-5 | 5px | 5px | |
| $border-width-6 | 6px | 6px | |
| $border-width | $border-width-1 | 1px | |
| $border | $border-width $border-style $border-color | 1px solid #E4E4E4 | |
| $lines-light | #E4E4E4 | #E4E4E4 | |
| $border-light | $border-width $border-style $lines-light | 1px solid #E4E4E4 | |
| $border-light-2 | $border-width-2 $border-style $su-blue-primary-20 | 2px solid #CCCFDD |