Referencing tokens

What is a reference?

In Supernova, you can use a token reference to refer one token value to another.

For example, if you would like to use semantic naming to indicate how a token should be used, you can create a reference from your core token blue-50 to a semantic token primary. You can even get more granular to communicate the specific application of a token in a component, for example primary-cta-button.

When the value of a token changes, any tokens that reference it will also change. So if you decide to change blue-50, your references will also reflect this change.

Add a reference

Create a new referenced token

1. Create your new token as normal. Don't add anything in the value field yet.
2. Click the Add reference icon, as shown in the image above.
3. In the dropdown, select the token you wish to reference. The value of the refernced token will be applied to your new token.

Add a reference to an existing token

1. First, open the token detail drawer for the token you want to apply the reference to.
2. Click the Add reference icon, as shown in the image above.
3. In the dropdown, select the token you wish to reference.

Troubleshooting

Remove a reference

1. Open token detail.
2. Click the Remove reference icon as shown in the image.
3. The token will be converted back to a raw value, or no value if one was never applied.