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
Border radius
| Example | Token title | Token |
|---|---|---|
50rem | full | --sl-size-borderRadius-full |
2px | sm | --sl-size-borderRadius-sm |
4px | md | --sl-size-borderRadius-md |
8px | lg | --sl-size-borderRadius-lg |
0px | none | --sl-size-borderRadius-none |
12px | xl | --sl-size-borderRadius-xl |
Border width
| Example | Token title | Token |
|---|---|---|
1px | action | --sl-size-borderWidth-action |
2px | bold | --sl-size-borderWidth-bold |
1px | default | --sl-size-borderWidth-default |
2px | focusRing | --sl-size-borderWidth-focusRing |
4px | heavy | --sl-size-borderWidth-heavy |
0px | none | --sl-size-borderWidth-none |
1px | subtle | --sl-size-borderWidth-subtle |