Design Tokens
Design tokens are named entities that store visual and functional information. They take the place of hardcoded values, such as hex values for color or pixel values for spacing.
Border
| Example | Token title | Token |
|---|---|---|
4px | border width lg | --sl-border-width-lg |
3px | border width md | --sl-border-width-md |
2px | border width sm | --sl-border-width-sm |
5px | border width xl | --sl-border-width-xl |
1px | border width xs | --sl-border-width-xs |
6px | border width 2xl | --sl-border-width-2xl |
0.5px | 2xs | --sl-2xs |
0px | border width none | --sl-border-width-none |
{border.width.xs} | ||
12px | border radius lg | --sl-border-radius-lg |
10px | border radius md | --sl-border-radius-md |
8px | border radius sm | --sl-border-radius-sm |
14px | border radius xl | --sl-border-radius-xl |
6px | border radius xs | --sl-border-radius-xs |
16px | ||
4px | border radius 2xs | --sl-border-radius-2xs |
18px | border radius 3xl | --sl-border-radius-3xl |
2px | border radius 3xs | --sl-border-radius-3xs |
50rem | border radius full | --sl-border-radius-full |
0px | border radius none | --sl-border-radius-none |