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.

Defining Tokens

Add new tokens as child components of the bundle’s <aura:tokens> component. For example:
<aura:tokens>
    <aura:token name="myBodyTextFontFace" 
               value="'Salesforce Sans', Helvetica, Arial, sans-serif"/>
    <aura:token name="myBodyTextFontWeight" value="normal"/>
    <aura:token name="myBackgroundColor" value="#f4f6f9"/>
    <aura:token name="myDefaultMargin" value="6px"/>
</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:
.THIS p {
    font-family: token(myBodyTextFontFace);
    font-weight: token(myBodyTextFontWeight);
}

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.