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.