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.
Text
| Example text value | Token title | Token |
|---|---|---|
Lorem ipsum
| text typeset font Size 2xl | --sl-text-typeset-font-Size-2xl |
Lorem ipsum
| text typeset font Size 3xl | --sl-text-typeset-font-Size-3xl |
Lorem ipsum
| text typeset font Size 4xl | --sl-text-typeset-font-Size-4xl |
Lorem ipsum
| text typeset font Size 5xl | --sl-text-typeset-font-Size-5xl |
Lorem ipsum
| text typeset font Size lg | --sl-text-typeset-font-Size-lg |
Lorem ipsum
| text typeset font Size md | --sl-text-typeset-font-Size-md |
Lorem ipsum
| text typeset font Size sm | --sl-text-typeset-font-Size-sm |
Lorem ipsum
| text typeset font Size xl | --sl-text-typeset-font-Size-xl |
Lorem ipsum
| text typeset font Size xs | --sl-text-typeset-font-Size-xs |
Lorem ipsum
| text typeset font Weight bold | --sl-text-typeset-font-Weight-bold |
Lorem ipsum
| text typeset font Weight demibold | --sl-text-typeset-font-Weight-demibold |
Lorem ipsum
| text typeset font Weight regular | --sl-text-typeset-font-Weight-regular |
Lorem ipsum
| text typeset letter Spacing lg | --sl-text-typeset-letter-Spacing-lg |
Lorem ipsum
| text typeset letter Spacing md | --sl-text-typeset-letter-Spacing-md |
Lorem ipsum
| text typeset letter Spacing none | --sl-text-typeset-letter-Spacing-none |
Lorem ipsum
| text typeset letter Spacing sm | --sl-text-typeset-letter-Spacing-sm |
Lorem ipsum
| text typeset letter Spacing xl | --sl-text-typeset-letter-Spacing-xl |
Lorem ipsum
| text typeset letter Spacing xs | --sl-text-typeset-letter-Spacing-xs |
Lorem ipsum
| text typeset line Height 2xl | --sl-text-typeset-line-Height-2xl |
Lorem ipsum
| text typeset line Height 3xl | --sl-text-typeset-line-Height-3xl |
Lorem ipsum
| text typeset line Height 4xl | --sl-text-typeset-line-Height-4xl |
Lorem ipsum
| text typeset line Height 5xl | --sl-text-typeset-line-Height-5xl |
Lorem ipsum
| text typeset line Height lg | --sl-text-typeset-line-Height-lg |
Lorem ipsum
| text typeset line Height md | --sl-text-typeset-line-Height-md |
Lorem ipsum
| text typeset line Height sm | --sl-text-typeset-line-Height-sm |
Lorem ipsum
| text typeset line Height xl | --sl-text-typeset-line-Height-xl |
Lorem ipsum
| text typeset line Height xs | --sl-text-typeset-line-Height-xs |
Lorem ipsum
| text typeset line Height xs | --sl-text-typeset-line-Height-xs |
Lorem ipsum
| text typeset paragraph Spacing 2xl | --sl-text-typeset-paragraph-Spacing-2xl |
Lorem ipsum
| text typeset paragraph Spacing 3xl | --sl-text-typeset-paragraph-Spacing-3xl |
Lorem ipsum
| text typeset paragraph Spacing 4xl | --sl-text-typeset-paragraph-Spacing-4xl |
Lorem ipsum
| text typeset paragraph Spacing 5xl | --sl-text-typeset-paragraph-Spacing-5xl |
Lorem ipsum
| text typeset paragraph Spacing lg | --sl-text-typeset-paragraph-Spacing-lg |
Lorem ipsum
| text typeset paragraph Spacing md | --sl-text-typeset-paragraph-Spacing-md |
Lorem ipsum
| text typeset paragraph Spacing none | --sl-text-typeset-paragraph-Spacing-none |
Lorem ipsum
| text typeset paragraph Spacing sm | --sl-text-typeset-paragraph-Spacing-sm |
Lorem ipsum
| text typeset paragraph Spacing xl | --sl-text-typeset-paragraph-Spacing-xl |
Lorem ipsum
| text typeset paragraph Spacing xs | --sl-text-typeset-paragraph-Spacing-xs |
Lorem ipsum
| text typeset text Case capitalize | --sl-text-typeset-text-Case-capitalize |
Lorem ipsum
| text typeset text Case lowercase | --sl-text-typeset-text-Case-lowercase |
Lorem ipsum
| text typeset text Case none | --sl-text-typeset-text-Case-none |
Lorem ipsum
| text typeset text Case uppercase | --sl-text-typeset-text-Case-uppercase |
Lorem ipsum
| text typeset text Decoration none | --sl-text-typeset-text-Decoration-none |
Lorem ipsum
| text typeset text Decoration strikethrough | --sl-text-typeset-text-Decoration-strikethrough |
Lorem ipsum
| text typeset text Decoration underline | --sl-text-typeset-text-Decoration-underline |