[SalesForce] aura:token not working in Lightning component

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?

Best Answer

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);
}
Related Topic