Token values and types

Types, aliases, functional tokens and controlling usage

You can specify the type of your tokens in Interplay to control their behaviour.

Token value

A token value may be:

  • A simple value e.g. color string such as #276EF1
  • A reference another token e.g. {button.background.success}, which references a color token.
  • A composite object made up of values and references e.g. a typography token, which defines values for fontFamily, fontSize, color and lineHeight (which themselves can be references)
 

Type is inherited

A tokens or token group inherits its types from its parent group, unless it has its own type assigned.

This makes it easy to set the types across large numbers of tokens by setting the types on the container groups at the root of your design token group tree structure.

 

Reference tokens

Tokens can reference or alias other tokens.

A reference token has the type of the token it references.

If a token references another token for its value, the value field is locked for editing:

If you want to override this behaviour you can choose to unlink by clicking on the icon that appears when you mouseover the value field.

 

Functional Tokens

Functional token values allow for manipulation and conversion of token values. This can be very useful to generate a scale from a core reference token. To use functional token values, simply add the function syntax specified below. You can pass references to other tokens by wrapping the token path in curly brackets.

Color Functions

color.lighten (color: string, amount: number [0 - 100])
color.brighten(color: string, amount: number [0 - 100])
color.darken(color: string, amount: number [0 - 100])
color.desaturate(color: string, amount: number [0 - 100])
color.saturate(color: string, amount: number [0 - 100])
color.greyscale(color: string)
color.spin(color: string, amount: number [0 - 100])
color.complement(color: string)
color.setAlpha(color: string, alpha: number [0 - 1])
e.g.
color.lighten({base.red.100}, 10)
color.complement({base.red.100})
color.setAlpha({base.red.100}. 0.3)

Mathematical expressions

You can compute basic mathematical expressions by wrapping in the eval function. This is a safer and more math-oriented alternative to using JavaScript’s eval function for mathematical expressions.

eval(statement)

e.g.
eval(1 + 4)
eval(12 + {scale.typography})
 
 
Did this answer your question?
😞
😐
🤩