Style Lightning Web Components with Custom Aura Design Tokens

A Lightning web component’s CSS file can use a custom Aura token created in your org or installed from an unmanaged package. Tokens make it easy to ensure that your design is consistent, and even easier to update it as your design evolves.

Where: This change applies to Lightning web components in Lightning Experience and all versions of the Salesforce app.

Why: 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.

How: 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.

<aura:tokens>
    <aura:token name="myBackgroundColor" value="#f4f6f9"/>
</aura:tokens>

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.

// myLightningWebComponent.css
color: var(--c-myBackgroundColor);