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.
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
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.
- Lightning Aura Components Developer Guide: Defining and Using Tokens
- Lightning Design System: Global Color Styling Hooks