Use Lightning Design System Design Tokens (Deprecated)
The SLDS design tokens are still present and work normally in SLDS 1 themes, but aren't included in SLDS 2 themes. SLDS 2 replaces design tokens with a system of CSS custom variables called global styling hooks.
The Salesforce Cosmos theme uses SLDS 2. To reflect the Salesforce Cosmos theme or a custom SLDS 2 theme’s styling in your custom components, use the accent category global styling hooks to define accent colors in your components. By using these hooks instead of design tokens, your components can adapt to the brand colors featured in the org's Themes and Branding settings. The global styling hooks can work with SLDS 1 and SLDS 2 themes, including custom themes based on SLDS 2.
See these resources for help preparing your components for use in SLDS 2 themes.
Even if you aren't planning to transition to SLDS 2 yet, 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.
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.
Lightning web components can use any SLDS 1 design token marked Global Access.
If you get the error: No TOKEN named {tokenName} found, you're probably using a token that isn't marked Global Access. Either use a global token or use a custom Aura design token.
Previously, to reference a design token in your Lightning web component’s CSS, you used the --lwc- prefix and reference the token name in camelCase. This syntax works in SLDS 1, but not SLDS 2.
This example shows how to reference the SLDS 1 spacingSmall token.
This example shows how to use an equivalent spacing global styling hook that works with SLDS 1 and SLDS 2.
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