Custom Aura Tokens and how to use them in lwc?

Custom Aura tokens:

You can capture essential values of your visual design into Custom Aura tokens. Define a token value once and reuse it in your lightning component’s css.

Advantage:

Tokens make it easy to ensure that your design is consistent and even easier to update your design as it evolves.

Steps To Create Aura Tokens:

• Go to Setup -> Developer Console
• Create New and then select Lightning Tokens.
• Name it ‘defaultTokens’ (This name should not change as it will make your token accessible in aura and lwc components.) and click Submit.
• Now create token inside it using aura:token tag.

For eg. we have created following ‘defaultTokens’ tokens file. Tokens created in the defaultTokens bundle are automatically available in components in your namespace.

<aura:tokens extends="force:base">
	<aura:token name='myYellowColor' value='Yellow' ></aura:token>
    <aura:token name='myRedColor' value='Red' ></aura:token>
</aura:tokens>

Using token in LWC:

To use a design token in lwc, reference it using var() css function. Prepend –c- to the custom aura token. For eg., you can use above tokens in lwc like this-

.searchCss{
		background-color:var(--c-myYellowColor);
        color:var(--c-myRedColor);
}

You can also use global tokens instead of custom design token. To reference a global design token in your Lightning web component’s CSS, use the --lwc- prefix and reference the token name in camelCase as shown below-

.searchCss{
		background-color:var(--lwc-brandAccessible);
}

Using token in Aura:

To use a design token in aura, reference it using the token() function and the token name in the CSS resource of a component bundle. For eg. you can use above tokens in aura like this-

.THIS .searchCss {
    background-color:token(myYellowColor);
    color:token(myRedColor);
}