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 |
---|---|---|
lg20px | size lg | --sl-size-lg |
md16px | size md | --sl-size-md |
sm14px | size sm | --sl-size-sm |
xl24px | size xl | --sl-size-xl |
xs12px | size xs | --sl-size-xs |
2xl32px | size 2xl | --sl-size-2xl |
2xs8px | size 2xs | --sl-size-2xs |
3xl48px | size 3xl | --sl-size-3xl |
3xs4px | size 3xs | --sl-size-3xs |
4xl64px | size 4xl | --sl-size-4xl |
4xs2px | size 4xs | --sl-size-4xs |
none0px | size none | --sl-size-none |