Capture Design Variables with Lightning Components Tokens (Developer Preview)

Capture the essential values of your visual design into named tokens. Define the token values once and reuse them throughout your Lightning components CSS resources. Tokens make it easy to ensure that your design is consistent, and even easier to update it as your design evolves.
To create a tokens bundle for your org’s namespace, do the following.
  1. In the Developer Console, select File | New | Lightning Tokens.
  2. Name the tokens bundle defaultTokens.


    In this developer preview of tokens, you can only create one tokens bundle, and the only allowed bundle name is defaultTokens. The tokens defined within it are automatically accessible in your Lightning components.

    You now have an empty tokens bundle, ready to edit.
  3. An individual token is a name-value pair that you specify using the <aura:token> component. Add new tokens as child components of the bundle’s <aura:tokens> component. For example:
        <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"/>
Tokens created in your 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);

Standard Design Tokens

Salesforce exposes a set of “base” tokens that you can access in your component style resources.

To add the standard tokens to your org, you extend your org’s tokens bundle from the base tokens, like so.
<aura:tokens extends="force:base">
    <!-- your own tokens here -->
Once added to defaultTokens, you can reference tokens from force:base just like your own tokens, using the token() function and token name. For example:
.THIS p {
    font-family: token(fontFamily);
    font-weight: token(fontWeightRegular);

You can mix-and-match your tokens with the standard tokens. Using tokens available from force:base allows you to mimic the look-and-feel of the Salesforce Lightning Design System (SLDS) in your own custom components. As the SLDS evolves, components that use the standard design tokens will evolve along with it.

See the Lightning Components Developer Guide for more details, including a list of Salesforce standard design tokens currently available.