0

I am reading this blog This blog and try to implement the token.

My simple css

.THIS.headerCls{ 
   background-color: myPrimaryColor;
   color: white;
   padding: 10px 20px;
}

my token

<aura:tokens>
    <aura:token name="myPrimaryColor" value="#33ccff"/>
    <aura:token name="myFontFamily" value="Arial"/>
</aura:tokens>

Component

<aura:component >
    <h1 class="headerCls">This is token Test</h1>    
</aura:component>

Token is not working. If i remove token and add color its working as expected.

3

use token in your css markup token(myPrimaryColor)

One important thing thats mandatory is to name the lightning Tokens file as "defaultTokens" .This is very important the tokens defined within it are automatically accessible in all Lightning components. .Refer this link it would help you to use tokens Lightning Tokens

Create DefaultTokens

<aura:tokens extends="namespace:yourTokenName">

</aura:tokens>

In css

.THIS.headerCls {
   background-color: token(myPrimaryColor);
   color: #fff;
   padding: 10px 20px;
}  
3
  • Error while saveing -> A problem was encountered while invoking the subscription method: No TOKENS named markup://c:defaultTokens found: Source
    – bharath
    Mar 9 '17 at 10:44
  • I edited the answer.You must create a default tokens to use it.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.
    – vignesh
    Mar 9 '17 at 10:46
  • +1 I changed the file name as "defaultTokens". Then it worked.
    – bharath
    Mar 9 '17 at 11:19
2

try this :

Your first tokens bundle should be named defaultTokens . The tokens defined within defaultTokens are automatically accessible in your Lightning components. Tokens defined in any other bundle won’t be accessible in your components unless you import them into the defaultTokens bundle.

<!-- defaultTokens.tokens (your tokens) -->
<aura:tokens extends="c:myToken">

</aura:tokens>

then apply token css in your component :

THIS.headerCls {
background-color: token(myPrimaryColor);
}

f you prefer a more concise function name for referencing tokens, you can use the t() function instead of token() . The two are equivalent.

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.