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