Use Design Tokens- Salesforce lightning Framework

We’ve completed few lightning based projects and frequently encountered an issue- How to standardize CSS developed for various components ?

For e.g. how to define a font which should be used across all the components. In other words,  suppose in future, if we need to change it(font), it should be do-able at one place, rather that changing every single component.

Easiest way to do this is via Design Tokens.

But we need to remember few things when using design tokens.

First see, how token are defined:

<aura:tokens extends="force:base">
    <aura:token name="myFontWeight" value="bold"/>
  1. Salesforce provide list of Standard Tokens that can be used directly. They don’t to be defined as shown above. How, those can be used, will provide that information later
    • Another point to note is- it is not recommended to override Stadard Tokens in your code(Lightning Components).
  2. You need to create Token Bundle before using you can use Tokens. Even to use standard tokens, you need to create Token Bundles.For this, you’ve two options:
    • Default Tokens : defaultTokens.tokens. This should always be the name of default tokens as shown below(Image 1).

      Default Tokens

      Image 1

    • Custom Tokens : Any name can be given for e.g. myCustomTokens as show in image 2

      Custom Token

      Image 2

    • To create Token bundles(both default or any custom one), go to Developer Console-> File-> New-> Lightning Tokens
  3. Let us see, how we can use token in lightning components
    • if you see below image, you’ll notice standard tokens(fontFamily, colorBorder) are referred directly, they don’t be defined in our tokens bundles. These are Salesforce defined as per link given above.

Use of Tokens

  1. Now question is -when to use Default token or Custom Tokens ? For this, you’ve to note that-Only those tokens should be defined as Default Tokens, which are common across organisation, while custom tokens can be created for a particular project.
  2. Another point to note : If you see above images properly, Custom Tokens have extended force:base(Standard Tokens), while Standard Tokens have extended ‘Custom Tokens’
  3. This give rise to another point – Suppose you’ve defined a token in both Custom Tokens and Default Tokens bundles, which one is applied, when used in lightning component?
    • Answer is – Value is defined in default tokens bundle. so it makes sense to define only limited number of tokens in ‘default tokens’ bundle. Because if it starts conflicting values in other bundles, then there will be no purpose in defining tokens in custom bundles as default token bundles will always take priority
    • Example for this is token :myDefaultMargin. it is defined in both default and custom token bundle. so value(6 px) defined in default token bundle will take priority.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

<span>%d</span> bloggers like this: