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 |
|---|---|---|
0pxpx | border width none | --sl-border-width-none |
0.5px | 2xs | --sl-2xs |
1px | border width xs | --sl-border-width-xs |
2px | border width sm | --sl-border-width-sm |
3px | border width md | --sl-border-width-md |
4px | border width lg | --sl-border-width-lg |
5px | border width xl | --sl-border-width-xl |
6px | border width 2xl | --sl-border-width-2xl |
{border.width.xs}px | ||
0px | border radius none | --sl-border-radius-none |
2px | border radius 3xs | --sl-border-radius-3xs |
4px | border radius 2xs | --sl-border-radius-2xs |
6px | border radius xs | --sl-border-radius-xs |
8px | border radius sm | --sl-border-radius-sm |
10px | border radius md | --sl-border-radius-md |
12px | border radius lg | --sl-border-radius-lg |
14px | border radius xl | --sl-border-radius-xl |
16px | ||
18px | border radius 3xl | --sl-border-radius-3xl |
50rem | border radius full | --sl-border-radius-full |