Defining and Using Tokens

A token is a name-value pair that you specify using the <aura:token> component. Define tokens in a tokens bundle, and then use tokens in your components’ CSS styles resources.

Salesforce recommends that you use 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. See Replace Design Tokens with Styling Hooks.

Important

Defining Tokens

Add new tokens as child components of the bundle’s <aura:tokens> component. For example:

1<aura:tokens>
2    <aura:token name="myBodyTextFontFace" 
3               value="'Salesforce Sans', Helvetica, Arial, sans-serif"/>
4    <aura:token name="myBodyTextFontWeight" value="normal"/>
5    <aura:token name="myBackgroundColor" value="#f4f6f9"/>
6    <aura:token name="myDefaultMargin" value="6px"/>
7</aura:tokens>

The only allowed attributes for the <aura:token> tag are name and value.

Using Tokens

Tokens created in the defaultTokens bundle are automatically available in components in your namespace. To use a design token, reference it using the token() function and the token name in the CSS resource of a component bundle. For example:

1.THIS p {
2    font-family: token(myBodyTextFontFace);
3    font-weight: token(myBodyTextFontWeight);
4}

If you prefer a more concise function name for referencing tokens, you can use the t() function instead of token(). The two are equivalent. If your token names follow a naming convention or are sufficiently descriptive, the use of the more terse function name won’t affect the clarity of your CSS styles.

Lightning Aura Components Developer Guide

Defining and Using Tokens

Defining Tokens

Using Tokens