To reference one token’s value in another token’s definition, wrap the token to be referenced in standard expression syntax.
<!-- force:base tokens (SLDS standard tokens) --> <aura:tokens> ... <aura:token name="colorBackground" value="rgb(244, 246, 249)" /> <aura:token name="fontFamily" value="'Salesforce Sans', Arial, sans-serif" /> ... </aura:tokens>
<!-- defaultTokens.tokens (your tokens) --> <aura:tokens extends="force:base"> <aura:token name="mainColor" value="{! colorBackground }" /> <aura:token name="btnColor" value="{! mainColor }" /> <aura:token name="myFont" value="{! fontFamily }" /> </aura:tokens>
You can only cross-reference tokens defined in the same file or a parent.
Expression syntax in tokens resources is restricted to references to other tokens.
<!-- defaultTokens.tokens (your tokens) --> <aura:tokens> <aura:token name="defaultHorizonalSpacing" value="12px" /> <aura:token name="defaultVerticalSpacing" value="6px" /> </aura:tokens>
/* myComponent.css */ .THIS div.notification { margin: token(defaultVerticalSpacing + ' ' + defaultHorizonalSpacing); /* more styles here */ }
You can mix tokens with strings as much as necessary to create the right style definition. For example, use margin: token(defaultVerticalSpacing + ' ' + defaultHorizonalSpacing + ' 3px'); to hard code the bottom spacing in the preceding definition.
The only operator supported within the token() function is “+” for string concatenation.