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.

Opacity

ValueToken titleToken
0.02
opacity 50--sl-opacity-50
0.04
opacity 100--sl-opacity-100
0.06
opacity 150--sl-opacity-150
0.08
opacity 200--sl-opacity-200
0.12
opacity 300--sl-opacity-300
0.16
opacity 400--sl-opacity-400
0.2
opacity 500--sl-opacity-500
0.32
opacity 600--sl-opacity-600
0.48
opacity 700--sl-opacity-700
0.64
opacity 800--sl-opacity-800
0.8
opacity 900--sl-opacity-900
1
opacity 1000--sl-opacity-1000
0
opacity transparent--sl-opacity-transparent