How to Use Design Tokens in Lightning Component

Prerequisites : Basic understanding of Lightning Components.

What is the Tokens ? When it useful ?

Tokens are a bundle in lightning same as component,event bundle.  Tokens are using for hold necessary values of our visual design into named tokens. So we can Define the token values once and reuse them throughout our Lightning components CSS resources.

Important !

• A tokens collection always start with aura:tokens .
• It's can only contains aura:token tags.
• To make accessible Token bundle in lightning component first tokens bundle always should be named defaultsTokens .
• Tokens name with defaultTokens are automatically accessible in lightning components.
• We can not access any other token bundle in our component until we import them into the defaultTokens bundle using extends them.

How to Create Token Bundle ?

For create Token Bundle :

• Go to the Developer Console–> select File –>  New –> Lightning Tokens.

• Enter a name and description(optionally) for the tokens bundle.
• Make sure your first tokens bundle should be named defaultTokens

We can not edit tokens bundle name or description  in the developer console after create once.

an empty Token bundle created successfully  and looks like :

<aura:tokens > </aura:tokens>

How to Use Token Bundle In lightning Component ?

A token is comes with name-value pair. that we specify using the aura:token tag. we can define multiple tokens in a tokens bundle, and then we use tokens in our lightning components' CSS styles resource. we can use only 2 attribute (name , value ) in aura:token tag.

Tokens Example -:

Token [defaultTokens.tokens]

<aura:tokens> <aura:token name = "divFont" value = "Arial, sans-serif" /> <aura:token name = "divFontWeight" value = "bold" /> <aura:token name = "divBackgroundColor" value = "black" /> <aura:token name = "divMargin" value = "5px" /> <aura:token name = "divTextColor" value = "white" /> </aura:tokens>

• Give a relevant name and css value to aura:token tag.

Component [Test.cmp]

<aura:component > <div class = "myClass" > <p> hello i am your page first line </p> <p> hello i am your page second line </p> <p> hello i am your page third line </p> </div> </aura:component>

CSS [Test.css]

Using tokens in lightning component CSS style Resource -:

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

• for using Tokens value in   component CSS  , use token(name) OR t(name).

Tokens created in the defaultTokens bundle are automatically available in components in your namespace. To use a design token, reference it using the token(name) function.

TestApp.app

<aura:application > <c:Test/> <!-- here c: is org. namespace prefix--> </aura:application>

Output -:

Part 2 : Using Other Tokens in Component. (other than defaultTokens)

Tokens defined in any other bundle won't be accessible in our components until we import them into the defaultTokens bundle. by extending them

We can use the extends attribute to extend one tokens bundle from another tokens bundle.
and access tokens from one bundle to another, we extend the "child" tokens bundle from the "parent" tokens

• In Next Example we create 3 Lightning Tokens Bundle , and using them into lightning component CSS style.

1. defaultTokens. tokens
2. TokenForColors.tokens
3. TokenForAlignment.tokens

Token [defaultTokens.tokens]

<aura:tokens extends = "c:TokenForColors" > <!--defaultTokens is extends the TokenForColors Token bundle--> <aura:token name = "divFont" value = "Arial, sans-serif" /> <aura:token name = "divFontWeight" value = "bold" /> </aura:tokens>

Token [TokenForColors.tokens]

<aura:tokens extends = "c:TokenForAlignment" > <!--TokenForColors bundle is extends the TokenForAlignment Token bundle--> <aura:token name = "divBackgroundColor" value = "lightblue" /> <aura:token name = "divTextColor" value = "black" /> </aura:tokens>

Token [TokenForAlignment.tokens]

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

Component [Test.cmp]

<aura:component > <div class = "myClass" > <p> hello i am your page first line </p> <p> hello i am your page second line </p> <p> hello i am your page third line </p> </div> </aura:component>

CSS [Test.css]

Using tokens in lightning component CSS style Resource -:

.THIS.myClass { font-family : token ( divFont ) ; /* value from defaultTokens bundle*/ font-weight : token ( divFontWeight ) ; /* value from defaultTokens bundle*/ background-color : token ( divBackgroundColor ) ; /* value from TokenForColors bundle*/ color : token ( divTextColor ) ; /* value from TokenForColors bundle*/ margin : token ( divMargin ) ; /* value from TokenForAlignment bundle*/ padding : token ( divPadding ) ; /* value from TokenForAlignment bundle*/ }

• for using Tokens value in   component CSS  , use token(name) OR t(name).

TestApp.app

<aura:application > <c:Test/> <!-- here c: is org. namespace prefix--> </aura:application>

Output -:

Some useful resources links related to Tokens :-

• Using Expression in tokens
• Using Standard token styles

Like our facebook page for new post updates.? & Don't forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box. 🙂

How to Use Design Tokens in Lightning Component

Source: https://sfdcmonkey.com/2016/12/30/use-token-lightning-component/

Share this post