Skip to main content

createTokens

Tokens refers to CSS Variables or CSS Custom Properties. createTokens centralizes how you declare, access, and update custom properties in your website or app. The goal is to make themeing easier.

Basic Usage#

Live Editor
Result
SyntaxError: No-Inline evaluations must call `render`.

If you look at the style of the box created above you'll see something like:

.TA1203f594.TA80c539bc {  padding: var(--shape-padding);  background: var(--brandColors-orange);  border-radius: var(--shape-largeRadius);}

Accessor#

The main return value of create tokens is simply an accessor that mirrors the shape of the object you pass in. Instead of returning the values you pass, it returns the custom property created to store that variable. We can see what that looks like here.

Live Editor
Result
SyntaxError: No-Inline evaluations must call `render`.

Attaching the Tokens#

Inside of the accessor there are a couple of other objects for use. The main one is the <Tokens /> component. This component is responsible for writing the CSS Custom Properties to the DOM, so if it's not mounted, using your tokens will have no effect. We can see that in this example:

Live Editor
Result
SyntaxError: No-Inline evaluations must call `render`.

Create Dynamic Tokens#

In some cases it's useful to produce an accessor with createTokens, but allow the values of the css variables to be... variable 🥁 In those situations you can use createDynamicTokens – which is inside the accessor (similar to the component Tokens). It accepts a function that maps the props passed to the component to the token values.

Live Editor
Result
SyntaxError: No-Inline evaluations must call `render`.