Use Custom Aura Tokens
A Lightning web component’s CSS file can use a custom Aura token created in your org or installed from an unmanaged package.
Capture the essential values of your visual design into custom Aura tokens. Define a token value once and reuse it in your Lightning component’s CSS. Tokens make it easy to ensure that your design is consistent, and even easier to update your design as it evolves.
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.
Create a custom Aura token in the Developer Console by creating a Lightning Tokens bundle. For example, this tokens bundle has a custom Aura token called myBackgroundColor.
Custom Aura tokens aren’t new, but now you can use them in a Lightning web component’s CSS file by using the standard var() CSS function. Prepend --c- to the custom Aura token.
See Also
- Lightning Aura Components Developer Guide: Defining and Using Tokens
- Lightning Design System: Global Color Styling Hooks