1

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

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 '17 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 '17 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 '17 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 '17 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 '17 at 4:03

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.