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.
Size
| Value | Token title | Token |
|---|---|---|
0px | size none | --sl-size-none |
2px | size 4xs | --sl-size-4xs |
4px | size 3xs | --sl-size-3xs |
8px | size 2xs | --sl-size-2xs |
12px | size xs | --sl-size-xs |
14px | size sm | --sl-size-sm |
16px | size md | --sl-size-md |
20px | size lg | --sl-size-lg |
24px | size xl | --sl-size-xl |
32px | size 2xl | --sl-size-2xl |
48px | size 3xl | --sl-size-3xl |
64px | size 4xl | --sl-size-4xl |
{size.2xl}px | --sl-undefined | |
{size.3xs}px | --sl-undefined |