How To Use Tokens in salesforce Lightning

How To Use Tokens in Salesforce Lightning?

This is one of the cool features of Salesforce lightning mainly used for styling in components.You need to define code, values only once and use anywhere in the lighting components.

Tokens Bundles

A Token is also a Lightning bundle like any other bundle i.e. components, events, and interfaces.

To create a token bundle, follow the steps:

Go to developer console->File-> New->Token bundle

Note - Before naming your token please make sure that the Name of your first token is “defaultTokens”. Token with any other name will not be accessible in a lightning component. To use tokens other than “defaultTokens” you need to import that token in default token first.

Name your token bundle then submit. It will look like below:

<aura:tokens>
</aura:tokens>

A token is basically name-value pair that is defined using <aura: token> component name is used in the component to inherit token values.

Sample code:

Lightning Token - (defaultTokens)

<aura:tokens>
    <aura:token name="divFont" value="italic bold 12px/30px Georgia, serif"/>
    <aura:token name="divFontWeight" value="bold"/>
    <aura:token name="divBackgroundColor" value="Green"/>
    <aura:token name="divMargin" value="6px"/>
    <aura:token name="divTextColor" value="red"/>
</aura:tokens>

Your token is ready now. To use these tokens in the lightning component just write below code in the CSS section of the lightning component where you want to use this.

Lightning Component (TokenTest)

<aura:component>
    <div class="TokenClass">
        <p>Algoworks technologies pvt ltd first line</p>
        <p>Algoworks technologies pvt ltd second line</p>
        <p>Algoworks technologies pvt ltd third line</p>
    </div>
</aura:component>

TokenTest.CSS

To Use a design token just reference it using token() or t() function.

.THIS.TokenClass {
    font-family: token(divFont);
    font-weight: token(divFontWeight);
    background-color: token(divBackgroundColor);
    color: t(divTextColor);
    margin: t(divMargin);
}

Lightning Application (TokenDemo)

<aura:application>
    <c:TokenTest />
</aura:application>

Output

Token_default

To Use Token Other Than Default token

If you want to create token other than Default token then you need to maintain a hierarchical structure among these Tokens. The default token will be the parent and all other child and sub-child and so on. To extend Tokens in the parent token use the keyword “extends”.

I have created three tokens:

  1. DefaultToken
  2. ChildToken1
  3. ChildToken2

Sample code:

ChildToken2

<aura:tokens>
    <aura:token name="divMargin" value="15px"/>
    <aura:token name="divPadding" value="10px"/>
</aura:tokens>

ChildToken1

ChildToken2 is extended in the ChildToken1 using extends keyword.

<aura:tokens extends="c:ChildToken2">
    <aura:token name="divBackgroundColor" value="lightblue"/>
    <aura:token name="divTextColor" value="black"/>
</aura:tokens>

DefaultToken

ChildToken1 is extended in the DefaultToken using extends keyword.

<aura:tokens extends="c:ChildToken1">
    <aura:token name="divFont" value="Arial, sans-serif"/>
    <aura:token name="divFontWeight" value="bold"/>
</aura:tokens>

Lightning component (TokenTest)

<aura:component>
    <div class="TokenClass">
        <p>Algoworks technologies pvt ltd first line</p>
        <p>Algoworks technologies pvt ltd second line</p>
        <p>Algoworks technologies pvt ltd third line</p>
    </div>
</aura:component>

TokenTest.CSS

To Use a design token just reference it using token() or t() function.

.THIS.TokenClass {
    font-family: token(divFont);
    font-weight: token(divFontWeight);
    background-color: token(divBackgroundColor);
    color: t(divTextColor);
    margin: t(divMargin);
}

Lightning Application (TokenDemo)

<aura:application >
    <c:TokenTest />
</aura:application>

Output

Child-Token

Popular Salesforce Blogs