Substitutions

Substitutions allow you to substitute certain parts of the blueprint with dynamic data. Substitution start with {{ and end with }} tags respectively. You can use any previously defined variable or function combined with transformers to write the value to the output.

Simple substitutions

Substitution can be used simply to write a dynamic value of a specific variable to the output:

{[ var tokenName "primary" /]}
{[ var tokenValue "FFAA22" /]}

The token: {{ tokenName }} (#{{ tokenValue }})

Resulting in the following output:

The token: primary (#FFAA22)

Note that any space inside the substitution tag is ignored, so both {{name}} and {{ name }} produce the same result. The spaced syntax is highly recommended for better readability.

Dot Notation Access

If a variable is an object, you can use dot notation in order to access specific values inside it. This is very useful, especially when working with functions, as they usually return an object as a result. For example, let's get all tokens using @ds.allTokens() and store it into tokens variable:

{[ const tokens @ds.allTokens() /]}

When executed, tokens is filled with data about all tokens inside a design system, looking like this:

[TODO]

We are only interested in the first token for this case, so select that:

[TODO]

Then, because token is now an object, we can use dot notation access to access the specific values:

[TODO]

The rendered output will then look like this:

[TODO]

Nested objects

Dot notation is not limited just to one level - if there is another object, you can use it again, such as in the following definition:

[TODO]

Resulting in the following output:

[TODO]

Combining arrays and objects

You can always use dot notation, even when the chain didn't start with an object. The only requirement is that you use it on top of the object.