I'm trying to use some default CSS tokens for coloring components.

As per the Developer Guide documentation:

To add the standard tokens to your org, extend a tokens bundle from the base tokens, like so.

<aura:tokens extends="force:base"> <!-- your own tokens here --> </aura:tokens>

However this immediately gives the following error on save:

Failed to save undefined: markup://c:MyComponent:18,39: Invalid attribute "extends": Source

Is this functionality currently broken?

1 Answer 1


Looks like you are trying to use token in Lightning components instead of Lightning Tokens.

Go to Developer Console and select Lightning Token from New > Lightning Tokens:- enter image description here

This is how we reference tokens once saved.

.THIS p {
    font-family: token(fontFamily); /* fontFamily is token name */
    font-weight: token(fontWeightRegular);
  • I want to use the default tokens that match the SLDS though, which is what the linked documentation says I should be able to do?
    – nicstella
    Jan 11, 2017 at 2:56
  • @nicstella save your token file as defaultTokens. It would automatically inherit all standard tokens. In addition you can add your token within the tag.
    – Ashwani
    Jan 11, 2017 at 3:00
  • Ok I see what I was doing wrong. I have now created the Lightning .tokens bundle. Do I need to reference it from the component trying to use it somehow? I am now receiving the error "No TOKEN named colorBackgroundError found".
    – nicstella
    Jan 11, 2017 at 3:27
  • It is better to create your own by seeing standard css because as per this doc developer.salesforce.com/docs/atlas.en-us.lightning.meta/… Salesforce doesn't guarantee availability of tokens. @nicstella
    – Ashwani
    Jan 11, 2017 at 3:37
  • 1
    @nicstella looks like tokens present in developer.salesforce.com/docs/atlas.en-us.lightning.meta/… are available by default only.
    – Ashwani
    Jan 11, 2017 at 4:03

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .