Use Lightning Design System Design Tokens
Design tokens are named entities that store visual design attributes, such as margins and spacing values, font sizes and families, or hex values for colors.
We recommend that you use SLDS Styling Hooks instead of design tokens if possible. While existing design tokens still work, styling hooks are the future of customization for Lightning web components and Aura components. For more guidance, see Lightning Design System: Migration Guide and New Global Styling Hooks Guidance.
Use CSS variables in a Lightning web component to access Lightning Design System design tokens. Lightning web components can use any Lightning Design System design token marked Global Access.
If you get the error: No TOKEN named {tokenName} found, it's likely that you're using a token that isn't marked Global Access. Either use a global token or use a custom Aura design token.
To reference a design token in your Lightning web component’s CSS, use the --lwc- prefix and reference the token name in camelCase.
At compile time, we replace the variables with their actual values, which means that at run time, references to the variables don’t work. For example, you can’t use the standard APIs CSSStyleDeclaration.getPropertyValue() or CSSStyleDeclaration.setPropertyValue() on the variables.
See Also