Tokens support a restricted set of expressions. Use expressions to reuse one token
value in another token, or to combine tokens to form a more complex style property.
Cross-Referencing Tokens
To reference one token’s value in another token’s definition, wrap the token to be
referenced in standard expression syntax.
In the following example, we reference tokens provided by Salesforce in our custom tokens.
Although you can’t see the standard tokens directly, imagine that they look something like
the
following.
With the preceding in mind, you can reference the standard tokens in your custom tokens, as
in the
following.
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.
Combining Tokens
To support combining individual token values into more complex CSS style properties, the
token() function supports string concatenation. For
example, if you have the following tokens
defined:
You
can combine these two tokens in a CSS style definition. For
example:
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.
Since Winter ’21, we convert Aura tokens to CSS custom properties under the covers. CSS
custom properties are a web standard that wasn’t supported when we initially created Aura
tokens. Concatenating an Aura token with another token that defines a CSS unit isn’t
supported due to how we convert the Aura tokens. The tokens are statically converted to
custom properties and can result in incorrect CSS syntax, which is then discarded by the CSS
parser.
For example, don’t separate the size and unit into separate tokens.
If you concatenate the tokens, the CSS doesn’t work as you expect.
The result is font-size: 24, though you might expect it to be font-size: 24px.
Instead, define a size and unit in one token for this use case.
j