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.
Since Winter '24, we recommend that you use global color styling hooks instead of design tokens, where possible, to align with the Web Content Accessibility Guidelines (WCAG) 2.1 color contrast standards. See Lightning Design System: Migration Guide.
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